:root { --navy: #082844; --navy2: #0e3d61; --gold: #d7a829; --cream: #fff8e8; --blue: #eaf4fb; --ink: #173042; --muted: #516675; --white: #fff; --line: #d7e1e8; --shadow: 0 16px 34px rgba(8,40,68,.12); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: rgb(243, 247, 250); line-height: 1.65; font-size: 17px; }
a { color: inherit; }
.shell { width: min(1120px, 92%); margin: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: rgb(255, 255, 255); padding: 0.7rem; z-index: 99; }
.site-header { position: sticky; top: 0px; z-index: 50; background: rgba(8, 40, 68, 0.98); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 18px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand strong { display: block; font-size: 1.12rem; }
.brand small { display: block; color: rgb(233, 214, 154); }
.menu-button { display: none; border: 1px solid rgba(255, 255, 255, 0.467); background: transparent; color: rgb(255, 255, 255); border-radius: 9px; padding: 0.6rem 0.8rem; font-weight: 800; }
.main-nav { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.main-nav a { text-decoration: none; padding: 0.55rem 0.75rem; border-radius: 8px; font-weight: 700; }
.main-nav a:hover, .main-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: rgb(255, 220, 118); }
.hero { background: linear-gradient(135deg, rgb(8, 40, 68) 0%, rgb(13, 70, 109) 62%, rgb(196, 147, 23) 160%); color: rgb(255, 255, 255); padding: 4rem 0px 3.5rem; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 900; color: rgb(180, 130, 0); margin: 0px 0px 0.4rem; }
.hero .eyebrow { color: rgb(255, 223, 128); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.07; margin: 0.2rem 0px 1rem; }
.lead { font-size: 1.17rem; max-width: 760px; }
.summit-card { background: rgb(255, 255, 255); color: var(--ink); border-radius: 20px; padding: 1.4rem; box-shadow: var(--shadow); border-top: 6px solid var(--gold); }
.summit-card img { width: 100%; max-height: 185px; }
.button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.portal-button { display: flex; flex-direction: column; min-height: 170px; text-decoration: none; background: rgb(255, 255, 255); border-right: 1px solid rgb(213, 225, 232); border-bottom: 1px solid rgb(213, 225, 232); border-left: 1px solid rgb(213, 225, 232); border-image: none; border-radius: 18px; padding: 1.35rem; box-shadow: var(--shadow); transition: 0.2s; border-top: 6px solid var(--gold); }
.portal-button:hover { transform: translateY(-4px); border-color: var(--gold); }
.portal-button strong { font-size: 1.18rem; color: var(--navy); margin-bottom: 0.4rem; }
.portal-button span { color: var(--muted); }
.portal-button .arrow { margin-top: auto; font-size: 1.45rem; color: rgb(168, 117, 0); font-weight: 900; }
.section { padding: 3.5rem 0px; }
.section.cream { background: var(--cream); }
.section.blue { background: var(--blue); }
.section.navy { background: var(--navy); color: rgb(255, 255, 255); }
.section h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.18; margin: 0.2rem 0px 1rem; color: var(--navy); }
.section.navy h2 { color: rgb(255, 255, 255); }
.rich-panel { background: rgb(255, 255, 255); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow); border-left: 7px solid var(--gold); }
.rich-panel p, .rich-panel li { font-weight: 600; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card { background: rgb(255, 255, 255); border-radius: 16px; padding: 1.35rem; box-shadow: var(--shadow); border: 1px solid var(--line); }
.card h3 { color: var(--navy); margin: 0.1rem 0px 0.6rem; }
.status { display: inline-block; background: rgb(255, 240, 190); color: rgb(107, 75, 0); border-radius: 999px; padding: 0.25rem 0.65rem; font-size: 0.78rem; font-weight: 900; }
.page-hero { background: linear-gradient(120deg, rgb(8, 40, 68), rgb(15, 75, 116)); color: rgb(255, 255, 255); padding: 2.8rem 0px; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0.2rem 0px; }
.breadcrumbs { font-size: 0.92rem; color: rgb(216, 230, 238); }
.breadcrumbs a { color: rgb(255, 223, 128); }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.steps { display: grid; gap: 1rem; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; background: rgb(255, 255, 255); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); }
.step .num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: rgb(43, 33, 0); font-weight: 900; font-size: 1.15rem; }
.notice { background: rgb(255, 244, 206); border-width: 1px 1px 1px 7px; border-style: solid; border-color: rgb(227, 189, 78) rgb(227, 189, 78) rgb(227, 189, 78) rgb(181, 125, 0); border-image: none; border-radius: 13px; padding: 1rem 1.15rem; font-weight: 700; }
.button { display: inline-block; text-decoration: none; border-radius: 10px; padding: 0.72rem 1rem; font-weight: 900; background: var(--gold); color: rgb(36, 27, 0); border: 0px; }
.button.secondary { background: var(--navy); color: rgb(255, 255, 255); }
.resource-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.resource-card { background: rgb(255, 255, 255); border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow); border-top: 5px solid var(--navy2); }
.resource-card button { width: 100%; cursor: pointer; }
.footer { background: rgb(5, 28, 49); color: rgb(219, 231, 238); padding: 2rem 0px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.footer a { color: rgb(255, 223, 128); }
.back-home { display: inline-flex; gap: 0.4rem; align-items: center; margin-top: 1rem; }
.external-dialog { border: 0px; border-radius: 18px; padding: 0px; max-width: 620px; width: min(92%, 620px); box-shadow: rgba(0, 0, 0, 0.42) 0px 30px 80px; }
.external-dialog::backdrop { background: rgba(2, 15, 27, 0.78); }
.dialog-body { padding: 1.6rem; }
.dialog-body h2 { color: var(--navy); margin-top: 0px; }
.dialog-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.down-note { font-weight: 900; color: rgb(129, 89, 0); text-align: center; font-size: 1.1rem; }
.policy-list li { margin: 0.6rem 0px; }
.lesson-lock { background: rgb(234, 244, 251); border: 1px solid rgb(184, 212, 230); border-radius: 14px; padding: 1.1rem; }
.page-nav { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.page-nav a { background: rgb(255, 255, 255); border: 1px solid rgb(201, 217, 227); text-decoration: none; padding: 0.7rem 0.9rem; border-radius: 10px; font-weight: 800; }
.page-nav a:hover { border-color: var(--gold); }
@media (max-width: 850px) {
  body { font-size: 16px; }
  .menu-button { display: block; }
  .main-nav { display: none; position: absolute; top: 76px; left: 0px; right: 0px; background: rgb(8, 40, 68); padding: 1rem 4%; flex-direction: column; align-items: stretch; }
  .main-nav.open { display: flex; }
  .hero-grid, .content-grid, .footer-grid { grid-template-columns: 1fr; }
  .button-grid, .card-grid { grid-template-columns: 1fr 1fr; }
  .resource-list { grid-template-columns: 1fr; }
  .portal-button { min-height: 145px; }
  .hero { padding: 3rem 0px; }
  .section { padding: 2.7rem 0px; }
}
@media (max-width: 560px) {
  .button-grid, .card-grid { grid-template-columns: 1fr; }
  .brand span { max-width: 190px; }
  .brand strong { font-size: 1rem; }
  .portal-button { min-height: 130px; }
  .rich-panel { padding: 1.15rem; }
  .step { grid-template-columns: 45px 1fr; }
  .step .num { width: 40px; height: 40px; }
  .dialog-actions .button { width: 100%; text-align: center; }
}
.orientation-hero { background: linear-gradient(120deg, rgb(6, 31, 54) 0%, rgb(13, 75, 116) 70%, rgb(185, 133, 18) 160%); color: rgb(255, 255, 255); padding: 3.4rem 0px 3rem; overflow: hidden; }
.orientation-hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 2rem; align-items: center; }
.orientation-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; margin: 0.3rem 0px 1rem; }
.eyebrow.light { color: rgb(255, 225, 138); }
.hero-motto { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; }
.hero-motto span { background: rgba(255, 255, 255, 0.086); border: 1px solid rgba(255, 255, 255, 0.26); padding: 0.42rem 0.7rem; border-radius: 999px; font-weight: 800; }
.orientation-mountain { position: relative; min-height: 230px; display: grid; place-items: center; }
.orientation-mountain img { width: min(100%, 360px); filter: brightness(0) invert(1); opacity: 0.86; }
.summit-flag { position: absolute; top: 1rem; right: 20%; background: var(--gold); color: rgb(29, 25, 12); font-weight: 900; padding: 0.35rem 0.55rem; border-radius: 8px; box-shadow: var(--shadow); }
.learning-mode-section { background: rgb(246, 251, 255); padding: 1.3rem 0px 1.8rem; }
.mode-panel { background: rgb(255, 255, 255); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top: 6px solid var(--gold); border-radius: 20px; padding: 1.4rem; box-shadow: var(--shadow); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.2rem; align-items: center; }
.mode-panel h2 { color: var(--navy); margin: 0.15rem 0px 0.4rem; }
.mode-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.mode-button { border: 2px solid rgb(203, 219, 229); background: rgb(248, 251, 253); border-radius: 15px; padding: 1rem 0.65rem; cursor: pointer; color: var(--navy); min-height: 115px; }
.mode-button span { display: block; font-size: 1.8rem; }
.mode-button strong, .mode-button small { display: block; }
.mode-button strong { font-size: 1rem; }
.mode-button small { color: var(--muted); margin-top: 0.2rem; }
.mode-button.active { border-color: var(--gold); background: rgb(255, 246, 217); box-shadow: rgba(215, 168, 41, 0.14) 0px 0px 0px 3px; }
.audio-console { margin-top: 1rem; background: var(--navy); color: rgb(255, 255, 255); border-radius: 18px; padding: 1rem 1.1rem; display: grid; grid-template-columns: 1fr auto; gap: 0.8rem 1rem; align-items: center; box-shadow: var(--shadow); }
.audio-status-wrap { display: flex; gap: 0.7rem; align-items: center; }
.audio-status-wrap strong, .audio-status-wrap small { display: block; }
.audio-status-wrap small { color: rgb(207, 226, 237); }
.audio-icon { font-size: 1.8rem; }
.audio-controls { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }
.audio-controls button { border: 1px solid rgba(255, 255, 255, 0.396); background: rgb(255, 255, 255); color: var(--navy); border-radius: 8px; padding: 0.5rem 0.65rem; font-weight: 800; cursor: pointer; }
.audio-options { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.audio-options label { font-weight: 800; font-size: 0.9rem; }
.audio-options select { margin-left: 0.3rem; border-radius: 7px; padding: 0.35rem; border: 0px; }
.audio-help { grid-column: 1 / -1; margin: 0px; color: rgb(226, 237, 243); font-size: 0.9rem; }
.audio-console.disabled { opacity: 0.75; }
.audio-console.speaking { outline: rgba(215, 168, 41, 0.45) solid 4px; }
.orientation-progress-section { background: rgb(255, 255, 255); padding: 1.1rem 0px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.progress-heading { display: flex; justify-content: space-between; gap: 1rem; color: var(--navy); }
.progress-track { height: 10px; background: rgb(220, 232, 239); border-radius: 999px; overflow: hidden; margin: 0.55rem 0px 0.8rem; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg,var(--gold),#e3bd54); border-radius: 999px; transition: width 0.3s; }
.stage-dots { display: flex; justify-content: space-between; gap: 0.35rem; }
.stage-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgb(185, 204, 216); background: rgb(255, 255, 255); color: var(--navy); font-weight: 900; cursor: pointer; }
.stage-dot.active, .stage-dot.completed { border-color: var(--gold); }
.stage-dot.active { background: var(--gold); color: rgb(35, 29, 11); }
.stage-dot.completed { background: rgb(234, 245, 233); color: rgb(40, 99, 47); }
.orientation-stage-section { padding: 2rem 0px 3.3rem; background: linear-gradient(rgb(238, 246, 251), rgb(255, 248, 232)); }
.stage-card-wrap { max-width: 940px; margin: auto; }
.orientation-stage { display: grid; grid-template-columns: 145px 1fr; background: rgb(255, 255, 255); border-radius: 22px; box-shadow: rgba(8, 40, 68, 0.15) 0px 20px 45px; overflow: hidden; min-height: 540px; }
.stage-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; color: rgb(255, 255, 255); text-align: center; }
.stage-sign span { font-size: 4rem; }
.stage-sign strong { font-size: 1.15rem; }
.sign-gold { background: rgb(183, 131, 12); }
.sign-blue { background: rgb(23, 107, 156); }
.sign-green { background: rgb(57, 121, 67); }
.sign-purple { background: rgb(106, 75, 134); }
.sign-red { background: rgb(155, 60, 60); }
.sign-navy { background: rgb(8, 40, 68); }
.sign-teal { background: rgb(40, 118, 111); }
.sign-orange { background: rgb(168, 92, 18); }
.stage-copy { padding: 2rem 2.2rem; }
.stage-copy h2 { font-size: clamp(1.7rem, 4vw, 2.55rem); line-height: 1.15; color: var(--navy); margin: 0.2rem 0px 1rem; }
.stage-copy p, .stage-copy li { font-size: 1.05rem; }
.stage-copy blockquote { margin: 1.25rem 0px; background: rgb(255, 246, 217); border-left: 7px solid var(--gold); padding: 1rem 1.2rem; border-radius: 0px 12px 12px 0px; color: rgb(76, 58, 5); font-weight: 800; }
.key-message, .important-notice { display: flex; gap: 0.8rem; align-items: flex-start; background: rgb(234, 244, 251); border: 1px solid rgb(189, 216, 232); border-radius: 14px; padding: 1rem; }
.key-message span, .important-notice span { font-size: 1.7rem; }
.fact-strip, .program-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }
.fact-strip span, .program-chips span { background: rgb(234, 244, 251); color: var(--navy); border-radius: 999px; padding: 0.4rem 0.7rem; font-weight: 800; }
.mission-grid, .leader-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mission-grid > div, .leader-card { background: rgb(245, 250, 255); border: 1px solid rgb(207, 225, 235); border-radius: 16px; padding: 1.1rem; }
.mission-grid span { font-size: 2rem; }
.mission-grid h3, .leader-card h3 { color: var(--navy); margin: 0.25rem 0px; }
.formula-flow { display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin: 1.3rem 0px; }
.formula-flow span { background: var(--navy); color: rgb(255, 255, 255); padding: 0.65rem 0.9rem; border-radius: 12px; font-weight: 900; }
.formula-flow b { color: rgb(164, 116, 5); font-size: 1.6rem; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.values-grid div { background: rgb(248, 251, 253); border: 1px solid rgb(213, 227, 235); border-radius: 14px; padding: 0.85rem; text-align: center; }
.values-grid span, .values-grid strong, .values-grid small { display: block; }
.values-grid span { font-size: 1.7rem; }
.values-grid strong { color: var(--navy); }
.values-grid small { color: var(--muted); }
.leader-initials { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: rgb(255, 255, 255); font-weight: 900; font-size: 1.3rem; border: 5px solid rgb(234, 208, 138); }
.learning-path { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.45rem; margin: 1.2rem 0px; }
.learning-path div { text-align: center; background: rgb(238, 246, 251); border-radius: 12px; padding: 0.65rem 0.35rem; }
.learning-path span { width: 30px; height: 30px; margin: auto; border-radius: 50%; display: grid; place-items: center; background: var(--gold); font-weight: 900; }
.learning-path strong, .learning-path small { display: block; }
.learning-path small { font-size: 0.75rem; color: var(--muted); }
.responsibility-box, .reflection-box { background: rgb(245, 250, 255); border: 1px solid rgb(207, 225, 235); border-radius: 15px; padding: 1rem 1.2rem; }
.responsibility-box h3, .reflection-box h3 { color: var(--navy); margin-top: 0px; }
.commitment { background: rgb(233, 246, 233) !important; border-left-color: rgb(79, 145, 87) !important; color: rgb(35, 75, 40) !important; }
.presidential-welcome { background: var(--navy); color: rgb(255, 255, 255); border-radius: 15px; padding: 1.1rem; margin-top: 1rem; }
.presidential-welcome strong { color: rgb(255, 223, 128); }
.presidential-welcome small { color: rgb(214, 230, 239); }
.completion-badge { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; background: rgb(255, 246, 217); border: 2px solid var(--gold); padding: 1rem; border-radius: 15px; }
.completion-badge span { font-size: 2rem; }
.completion-badge strong, .completion-badge small { display: block; }
.stage-navigation { max-width: 940px; margin: 1.2rem auto 0px; display: flex; justify-content: space-between; gap: 1rem; }
.stage-navigation button { cursor: pointer; }
.stage-navigation button:disabled { opacity: 0.45; cursor: not-allowed; }
.orientation-page-nav { max-width: 940px; margin-left: auto; margin-right: auto; justify-content: center; }
.speech-highlight { outline: rgba(215, 168, 41, 0.45) solid 4px; background: rgb(255, 253, 245); }
.orientation-page.listen-only .stage-copy { font-size: 1.08rem; }
.orientation-page.listen-only .stage-copy > :not(.eyebrow):not(h2) { opacity: 0.28; }
.orientation-page.listen-only .speech-highlight > * { opacity: 1; }
@media (max-width: 850px) {
  .orientation-hero-grid, .mode-panel { grid-template-columns: 1fr; }
  .orientation-mountain { min-height: 150px; }
  .orientation-mountain img { max-height: 180px; }
  .audio-console { grid-template-columns: 1fr; }
  .audio-controls { justify-content: flex-start; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .learning-path { grid-template-columns: repeat(4, 1fr); }
  .orientation-stage { grid-template-columns: 100px 1fr; }
  .stage-sign span { font-size: 3rem; }
  .stage-copy { padding: 1.5rem; }
  .mission-grid, .leader-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mode-buttons { grid-template-columns: 1fr; }
  .mode-button { min-height: 88px; display: grid; grid-template-columns: 48px 1fr; text-align: left; align-items: center; }
  .mode-button span { grid-row: 1 / 3; font-size: 1.7rem; }
  .audio-controls button { flex: 1 1 42%; }
  .audio-options { display: grid; grid-template-columns: 1fr 1fr; }
  .audio-options label, .audio-options select { display: block; width: 100%; margin-left: 0px; }
  .stage-dots { overflow-x: auto; padding-bottom: 0.25rem; justify-content: flex-start; }
  .stage-dot { flex: 0 0 34px; }
  .orientation-stage { display: block; min-height: 0px; }
  .stage-sign { flex-direction: row; justify-content: flex-start; padding: 0.75rem 1rem; }
  .stage-sign span { font-size: 2rem; }
  .stage-copy { padding: 1.2rem; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .learning-path { grid-template-columns: 1fr 1fr; }
  .stage-navigation { display: grid; grid-template-columns: 1fr 1fr; }
  .stage-navigation .button { width: 100%; padding: 0.8rem 0.45rem; }
  .hero-motto { display: grid; }
  .orientation-hero { padding: 2.5rem 0px 2rem; }
}
.audio-diagnostic { margin: 0.7rem 0px 0px; padding: 0.65rem 0.8rem; border-radius: 10px; background: rgb(255, 248, 219); border: 1px solid rgb(223, 189, 84); color: rgb(75, 58, 5); font-weight: 800; }
#testVoice { background: rgb(255, 243, 191) !important; color: rgb(44, 35, 5) !important; border: 2px solid rgb(213, 169, 30) !important; }
.mode-button:focus, .audio-controls button:focus { outline: rgba(215, 168, 41, 0.45) solid 4px; outline-offset: 2px; }
html { font-size: 16px; overflow-x: hidden; }
body { overflow-x: hidden; background: rgb(244, 247, 249); color: rgb(23, 33, 43); font-size: 17px; line-height: 1.58; }
img, svg, video { max-width: 100%; height: auto; }
a, button, input, select, textarea { max-width: 100%; }
p, li, dd, dt, small, strong, h1, h2, h3, h4, a { overflow-wrap: anywhere; word-break: normal; }
.shell { width: min(1080px, 100% - 32px); margin-inline: auto; }
.site-header { position: sticky; top: 0px; }
.header-inner { min-height: 70px; gap: 0.65rem; }
.brand { min-width: 0px; gap: 0.65rem; }
.brand img { width: 46px; height: 46px; flex: 0 0 46px; }
.brand span { min-width: 0px; }
.brand strong { font-size: 1rem; line-height: 1.1; }
.brand small { font-size: 0.82rem; line-height: 1.2; }
.main-nav a { font-size: 0.94rem; }
.page-hero, .compact-hero { padding: 2.2rem 0px; }
.page-hero h1, .compact-hero h1 { font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.08; }
.lead, .section-intro { font-size: 1.05rem; line-height: 1.55; max-width: 760px; }
.section { padding: 2.6rem 0px; }
.section h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.15; }
.card h3, .mobile-program-card h2, .module h2, .module h3 { font-size: clamp(1.3rem, 5vw, 1.65rem); line-height: 1.22; }
.footer, .footer * { overflow-wrap: anywhere; }
.footer a { display: inline-block; max-width: 100%; }
.home-hero { background: linear-gradient(135deg, rgb(6, 31, 54), rgb(13, 70, 109) 68%, rgb(154, 111, 12) 170%); color: rgb(255, 255, 255); padding: 3.2rem 0px; }
.home-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.5rem; align-items: center; }
.home-hero h1 { font-size: clamp(2.5rem, 7vw, 4.7rem); line-height: 1.02; margin: 0.25rem 0px 1rem; }
.home-intro { font-size: 1.12rem; line-height: 1.55; max-width: 700px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.3rem; }
.hero-actions .button { padding: 0.85rem 1rem; }
.hero-primary { background: rgb(241, 198, 79); color: rgb(29, 36, 48); }
.hero-secondary { background: rgb(255, 255, 255); color: rgb(8, 40, 68); }
.hero-outline { background: transparent; color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); }
.home-hero-card { background: rgb(255, 255, 255); color: rgb(23, 33, 43); border-radius: 18px; padding: 1.2rem; border-top: 6px solid rgb(215, 168, 41); }
.home-hero-card img { max-height: 190px; width: 100%; }
.home-hero-card h2 { font-size: 1.55rem; color: rgb(8, 40, 68); margin: 0.5rem 0px; }
.pathway-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pathway-card { display: block; background: rgb(255, 255, 255); text-decoration: none; border-radius: 16px; padding: 1.1rem; border: 1px solid rgb(215, 225, 232); box-shadow: rgba(8, 40, 68, 0.08) 0px 10px 25px; }
.pathway-card span, .pathway-card strong, .pathway-card small { display: block; }
.pathway-card span { font-size: 2rem; }
.pathway-card strong { font-size: 1.08rem; color: rgb(8, 40, 68); margin: 0.35rem 0px; }
.pathway-card small { font-size: 0.94rem; color: rgb(67, 87, 102); }
.program-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.program-preview-grid a { display: block; text-decoration: none; background: rgb(255, 255, 255); border-width: 1px 1px 1px 6px; border-style: solid; border-color: rgb(215, 225, 232) rgb(215, 225, 232) rgb(215, 225, 232) rgb(215, 168, 41); border-image: none; border-radius: 14px; padding: 1.05rem; }
.program-preview-grid strong, .program-preview-grid span { display: block; }
.program-preview-grid strong { font-size: 1.08rem; color: rgb(8, 40, 68); }
.program-preview-grid span { font-size: 0.95rem; color: rgb(67, 87, 102); margin-top: 0.35rem; }
.center-action { text-align: center; margin-top: 1.4rem; }
.compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.compact-panel { background: rgb(255, 255, 255); border-radius: 16px; padding: 1.25rem; border: 1px solid rgb(205, 220, 230); }
.compact-panel h2 { font-size: 1.7rem; }
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.contact-panel h2 { color: rgb(255, 255, 255); }
.contact-details p { margin-top: 0px; }
.contact-details a { color: rgb(255, 225, 138); }
.footer-simple { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.technology-notice { background: rgb(255, 244, 204); border-left: 7px solid rgb(165, 110, 0); padding: 1rem 1.1rem; border-radius: 12px; margin-bottom: 1.25rem; }
.technology-notice p { margin: 0.35rem 0px 0px; }
.mobile-program-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.mobile-program-card { background: rgb(255, 255, 255); border-radius: 16px; padding: 1.15rem; border: 1px solid rgb(213, 225, 232); box-shadow: rgba(8, 40, 68, 0.08) 0px 10px 25px; }
.mobile-program-card h2 { color: rgb(8, 40, 68); margin: 0.7rem 0px; }
.mobile-program-card p { font-size: 1rem; }
.action-band { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; }
.action-band-buttons { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.course-shell { width: min(980px, 100% - 32px); padding: 1rem 0px 2rem; }
.course-hero { padding: 1.25rem !important; }
.course-hero h1 { font-size: clamp(2rem, 7vw, 3.25rem) !important; line-height: 1.08 !important; }
.course-hero p { font-size: 1.02rem !important; }
.module-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
.module { padding: 1rem !important; }
.action-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
.action { font-size: 1rem; }
.orientation-hero { padding: 2.4rem 0px 2rem; }
.orientation-hero h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.05; }
.orientation-stage { min-height: 0px; }
.stage-copy h2 { font-size: clamp(1.65rem, 6vw, 2.25rem); }
.stage-copy p, .stage-copy li { font-size: 1rem; line-height: 1.55; }
.form-shell, .wrap { width: min(860px, 100% - 28px) !important; padding: 0.8rem 0px !important; }
.form-card, .panel { padding: 1rem !important; }
input, select, textarea { font-size: 16px !important; }
@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 1080px); }
  .header-inner { min-height: 64px; }
  .brand img { width: 42px; height: 42px; flex-basis: 42px; }
  .brand strong { font-size: 0.98rem; }
  .brand small { font-size: 0.78rem; }
  .menu-button { display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; padding: 0.55rem 0.72rem; }
  .main-nav { display: none; position: absolute; left: 12px; right: 12px; top: 64px; background: rgb(8, 40, 68); padding: 0.65rem; border-radius: 0px 0px 14px 14px; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 30px; }
  .main-nav.open { display: grid; grid-template-columns: 1fr; }
  .main-nav a { display: block; padding: 0.75rem; }
  .home-hero { padding: 2.3rem 0px; }
  .home-hero-grid, .contact-panel, .compact-grid { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: clamp(2.35rem, 13vw, 3.4rem); }
  .home-intro { font-size: 1rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { text-align: center; width: 100%; }
  .home-hero-card img { max-height: 145px; }
  .pathway-grid, .program-preview-grid, .mobile-program-grid, .module-grid, .action-grid { grid-template-columns: 1fr !important; }
  .pathway-card, .mobile-program-card, .program-preview-grid a { padding: 1rem; }
  .section { padding: 2.2rem 0px; }
  .section h2 { font-size: clamp(1.7rem, 8vw, 2.15rem); }
  .page-hero, .compact-hero { padding: 1.8rem 0px; }
  .page-hero h1, .compact-hero h1 { font-size: clamp(1.9rem, 10vw, 2.65rem); }
  .action-band { display: block; }
  .action-band-buttons { display: grid; grid-template-columns: 1fr; }
  .action-band-buttons .button { width: 100%; text-align: center; }
  .footer-simple { display: grid; }
  .course-hero h1 { font-size: clamp(1.9rem, 9vw, 2.65rem) !important; }
  .course-icon { font-size: 2.3rem !important; }
  .active-badge, .level-badge { font-size: 0.78rem !important; }
  .orientation-stage { display: block !important; }
  .stage-sign { min-height: auto !important; }
  .stage-copy { padding: 1rem !important; }
  .stage-copy p, .stage-copy li { font-size: 1rem !important; }
  .footer { padding: 1.4rem 0px; }
}
@media (max-width: 380px) {
  body { font-size: 16px; }
  .shell { width: min(100% - 18px, 1080px); }
  .brand strong { font-size: 0.9rem; }
  .brand small { font-size: 0.72rem; }
  .menu-button { font-size: 0.88rem; padding: 0.5rem 0.62rem; }
  .home-hero h1 { font-size: 2.2rem; }
  .page-hero h1, .compact-hero h1 { font-size: 1.85rem; }
}
h1, h2, h3, h4, h5, h6, p, li, dd, dt, strong, small, span, label, a, button { word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; }
a[href^="mailto:"], .long-link, .email-link { overflow-wrap: anywhere !important; word-break: break-word !important; }
*, ::before, ::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
.course-shell, .shell, .form-shell, .wrap { max-width: 100%; }
.course-hero { width: 100%; max-width: 100%; overflow: hidden; padding: 1.1rem !important; }
.course-hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.55rem) !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; max-width: 100% !important; margin: 0.65rem 0px 0.85rem !important; }
.course-hero p { font-size: 1rem !important; line-height: 1.52 !important; }
.course-hero .active-badge, .course-hero .level-badge { max-width: 100%; white-space: normal; }
.mobile-program-card h2, .card h3, .program-preview-grid strong { font-size: clamp(1.25rem, 5.8vw, 1.65rem) !important; line-height: 1.22 !important; letter-spacing: -0.01em !important; }
@media (max-width: 760px) {
  h1 { font-size: clamp(1.9rem, 9vw, 2.65rem) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(1.55rem, 7vw, 2.1rem) !important; line-height: 1.16 !important; }
  h3 { font-size: clamp(1.25rem, 5.8vw, 1.65rem) !important; line-height: 1.22 !important; }
  body { font-size: 16.5px !important; }
  .course-shell { width: calc(100% - 22px) !important; margin-inline: auto !important; padding: 0.75rem 0px 2rem !important; }
  .course-hero { border-radius: 16px !important; }
  .course-hero h1 { font-size: clamp(1.72rem, 7.2vw, 2.35rem) !important; }
  .module, .mobile-program-card, .pathway-card, .program-preview-grid a { width: 100%; max-width: 100%; }
}
@media (max-width: 390px) {
  .course-hero h1 { font-size: 1.72rem !important; }
  .course-hero p { font-size: 0.98rem !important; }
}
.form-card h1, .panel h1 { word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; }
.form-card p, .panel p { font-size: 1rem !important; line-height: 1.5 !important; }
@media (max-width: 680px) {
  .form-card h1, .panel h1 { font-size: 1.9rem !important; line-height: 1.12 !important; }
  .form-card, .panel { width: 100% !important; max-width: 100% !important; }
}
.leadership-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.leadership-preview-card { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: start; background: rgb(255, 255, 255); border: 1px solid rgb(215, 225, 232); border-radius: 16px; padding: 1rem; }
.leadership-preview-card img { width: 150px; height: 175px; object-fit: cover; object-position: center top; border-radius: 12px; }
.leadership-preview-card h3 { font-size: 1.3rem; line-height: 1.18; color: rgb(8, 40, 68); margin: 0.1rem 0px; }
.leadership-preview-card p { font-size: 0.98rem; line-height: 1.5; margin: 0.35rem 0px; }
@media (max-width: 760px) {
  .leadership-preview-grid { grid-template-columns: 1fr; }
  .leadership-preview-card { grid-template-columns: 105px 1fr; gap: 0.8rem; }
  .leadership-preview-card img { width: 105px; height: 135px; }
  .leadership-preview-card h3 { font-size: 1.15rem !important; }
  .leadership-preview-card p { font-size: 0.94rem !important; }
}
@media (max-width: 420px) {
  .leadership-preview-card { grid-template-columns: 1fr; }
  .leadership-preview-card img { width: 100%; height: auto; max-height: 360px; }
}
.leadership-preview-card:first-child img { object-fit: contain !important; object-position: center top !important; background: rgb(7, 31, 54) !important; }
.leadership-preview-card:first-child img { object-fit: cover !important; object-position: center top !important; background: rgb(238, 242, 246) !important; }
.leader-card:first-child img { object-fit: cover !important; object-position: center top !important; background: rgb(238, 242, 246) !important; }
img[src*="dr-fred-nana-biney-official-portrait-20260801.jpg"] { object-fit: cover !important; object-position: center top !important; background: rgb(238, 242, 246) !important; }
.brand img { width: 48px !important; height: 48px !important; max-width: 48px !important; object-fit: contain !important; }
.universal-back-row { width: min(1080px, 100% - 24px); margin: 0.75rem auto; display: flex; gap: 0.55rem; flex-wrap: wrap; }
.universal-back-row .button { font-size: 0.92rem; }
.site-header .main-nav { gap: 0.35rem; }
.site-header .main-nav a { font-size: 0.88rem; }
.media-shell img, .demo-shell img { max-width: 100%; height: auto; }
@media (max-width: 700px) {
  .brand img { width: 40px !important; height: 40px !important; max-width: 40px !important; }
  .universal-back-row { display: grid; grid-template-columns: 1fr; }
  .universal-back-row .button { text-align: center; width: 100%; }
}
.compact-legal-note { display: grid !important; grid-template-columns: 28px 1fr !important; align-items: start !important; gap: 0.45rem !important; padding: 0.6rem 0.7rem !important; margin: 0.65rem 0px !important; border-radius: 10px !important; }
.compact-legal-note span { font-size: 1rem !important; line-height: 1.2 !important; }
.compact-legal-note p { margin: 0px !important; font-size: 0.78rem !important; line-height: 1.35 !important; letter-spacing: 0px !important; }
.compact-priority-section { padding: 0.8rem 0px !important; background: rgb(243, 234, 210) !important; }
.priority-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.75rem; }
.priority-access-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem; border-radius: 14px; text-decoration: none; background: rgb(8, 40, 68); color: rgb(255, 255, 255); box-shadow: rgba(8, 40, 68, 0.14) 0px 8px 22px; }
.priority-access-card span { font-size: 1.45rem; }
.priority-access-card strong { display: block; font-size: 1rem; line-height: 1.2; }
.priority-access-card small { display: block; margin-top: 0.2rem; font-size: 0.75rem; line-height: 1.3; color: rgb(234, 241, 245); }
.media-priority-card { background: rgb(141, 101, 16); }
.active-classroom-hero { background: linear-gradient(135deg, rgb(6, 34, 59), rgb(13, 75, 114)); color: rgb(255, 255, 255); padding: 1.6rem 0px; }
.active-classroom-hero h1 { font-size: clamp(1.8rem, 5.4vw, 3rem) !important; line-height: 1.05 !important; margin: 0.35rem 0px 0.65rem !important; }
.active-classroom-hero .lead { max-width: 760px; color: rgb(237, 245, 248); font-size: 1rem !important; line-height: 1.5 !important; }
.classroom-status-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.8rem 0px; }
.classroom-status-row span { padding: 0.35rem 0.6rem; border-radius: 999px; background: rgb(230, 181, 46); color: rgb(31, 24, 0); font-size: 0.76rem; font-weight: 900; }
.student-roster-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 0.7rem; }
.student-roster-grid article { background: rgb(255, 255, 255); border: 1px solid rgb(202, 220, 231); border-radius: 13px; padding: 0.8rem; }
.student-roster-grid span, .panel-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(8, 40, 68); color: rgb(255, 255, 255); font-size: 0.78rem; font-weight: 900; }
.student-roster-grid h3 { margin: 0.55rem 0px 0.2rem !important; font-size: 1rem !important; }
.student-roster-grid p { overflow-wrap: anywhere; margin: 0px !important; font-size: 0.72rem !important; }
.privacy-line { color: rgb(88, 106, 117); margin-top: 0.7rem; font-size: 0.72rem !important; }
.active-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.8rem; }
.classroom-panel { background: rgb(255, 255, 255); border: 1px solid rgb(204, 218, 227); border-radius: 14px; padding: 0.9rem; }
.classroom-panel h3 { margin: 0.35rem 0px !important; font-size: 1.05rem !important; }
.classroom-panel p { font-size: 0.88rem !important; line-height: 1.45 !important; }
@media (max-width: 760px) {
  body { font-size: 15px !important; }
  .section { padding: 1.2rem 0px !important; }
  h1 { font-size: clamp(1.75rem, 8vw, 2.35rem) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(1.35rem, 6.6vw, 1.9rem) !important; line-height: 1.15 !important; }
  h3 { font-size: 1.05rem !important; }
  p, .lead, li { font-size: 0.9rem !important; line-height: 1.5 !important; }
  .eyebrow { font-size: 0.72rem !important; letter-spacing: 0.08em !important; }
  .brand img { width: 42px !important; height: 42px !important; }
  .brand strong { font-size: 0.94rem !important; }
  .brand small { font-size: 0.69rem !important; }
  .button { font-size: 0.82rem !important; padding: 0.58rem 0.75rem !important; }
  .priority-access-grid, .student-roster-grid, .active-module-grid { grid-template-columns: 1fr !important; }
  .priority-access-card { padding: 0.72rem !important; }
  .priority-access-card strong { font-size: 0.92rem !important; }
  .priority-access-card small { font-size: 0.7rem !important; }
  .compact-legal-note p { font-size: 0.72rem !important; }
  .active-classroom-hero { padding: 1.15rem 0px !important; }
  .active-classroom-hero h1 { font-size: 1.9rem !important; }
  .active-classroom-hero .lead { font-size: 0.88rem !important; }
  .classroom-panel p { font-size: 0.82rem !important; }
}
.privacy-safe-cohort { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border: 1px solid rgb(202, 220, 231); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(8, 40, 68, 0.08) 0px 8px 22px; }
.privacy-safe-cohort span { font-size: 1.3rem; line-height: 1; }
.privacy-safe-cohort strong { display: block; color: rgb(8, 40, 68); margin-bottom: 0.25rem; }
.privacy-safe-cohort p { margin: 0px; font-size: 0.9rem; line-height: 1.45; }
.dompreh-media-card figure { margin: 0px 0px 0.8rem; text-align: center; }
.dompreh-media-card figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
.dompreh-media-card figcaption { margin-top: 0.55rem; padding: 0.55rem 0.7rem; background: rgb(8, 40, 68); color: rgb(255, 255, 255); border-radius: 10px; line-height: 1.35; }
.dompreh-media-card figcaption strong { display: block; font-size: 1rem; }
.dompreh-media-card figcaption span { font-size: 0.82rem; color: rgb(240, 217, 138); }
@media (max-width: 760px) {
  .privacy-safe-cohort { padding: 0.8rem; }
  .privacy-safe-cohort p { font-size: 0.8rem !important; }
  .dompreh-media-card figcaption strong { font-size: 0.92rem; }
  .dompreh-media-card figcaption span { font-size: 0.75rem; }
}
.founders-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.founders-media-grid figure { margin: 0px; text-align: center; }
.founders-media-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 12px; }
.founders-media-grid figcaption { margin-top: 0.5rem; padding: 0.55rem 0.6rem; background: rgb(8, 40, 68); color: rgb(255, 255, 255); border-radius: 10px; line-height: 1.3; }
.founders-media-grid figcaption strong { display: block; font-size: 0.95rem; }
.founders-media-grid figcaption span { font-size: 0.78rem; color: rgb(240, 217, 138); }
@media (max-width: 700px) {
  .founders-media-grid { grid-template-columns: 1fr; }
  .founders-media-grid img { max-height: 520px; }
  .founders-media-grid figcaption strong { font-size: 0.9rem; }
  .founders-media-grid figcaption span { font-size: 0.74rem; }
}
html, body { max-width: 100%; overflow-x: hidden; }
*, ::before, ::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, li, a, span, strong, small, button, label, input, textarea, select { overflow-wrap: anywhere; word-break: normal; hyphens: auto; max-width: 100%; }
.card, .program-card, .pathway-card, .media-card, .article-card, .rich-panel, .classroom-panel, .priority-access-card, .privacy-safe-cohort, .student-roster-grid article, .button { min-width: 0px; max-width: 100%; }
@media (max-width: 760px) {
  body { font-size: 14.5px !important; line-height: 1.48 !important; }
  .shell, .media-shell, .demo-shell { width: calc(100% - 22px) !important; }
  .section { padding: 1rem 0px !important; }
  h1, .page-hero h1, .active-classroom-hero h1 { font-size: clamp(1.65rem, 7.6vw, 2.05rem) !important; line-height: 1.08 !important; }
  h2, .article-card h2, .media-card h2, .demo-card h2 { font-size: clamp(1.18rem, 5.7vw, 1.48rem) !important; line-height: 1.16 !important; }
  h3, .classroom-panel h3, .pathway-card strong { font-size: 1rem !important; line-height: 1.22 !important; }
  p, .lead, li, .article-card p, .media-card p, .demo-card p, .demo-card li { font-size: 0.84rem !important; line-height: 1.45 !important; }
  .eyebrow, .status, .breadcrumbs { font-size: 0.68rem !important; letter-spacing: 0.06em !important; }
  .button { font-size: 0.78rem !important; line-height: 1.2 !important; padding: 0.52rem 0.66rem !important; white-space: normal !important; text-align: center !important; }
  .pathway-card, .media-card, .article-card, .rich-panel, .classroom-panel, .demo-card, .privacy-safe-cohort { padding: 0.75rem !important; border-radius: 12px !important; }
  .priority-access-card strong { font-size: 0.88rem !important; }
  .priority-access-card small { font-size: 0.66rem !important; line-height: 1.25 !important; }
  .classroom-status-row span { font-size: 0.68rem !important; }
  .founders-media-grid figcaption strong { font-size: 0.84rem !important; }
  .founders-media-grid figcaption span { font-size: 0.69rem !important; }
  .main-nav a { font-size: 0.82rem !important; line-height: 1.2 !important; }
  .brand img { width: 38px !important; height: 38px !important; }
  .brand strong { font-size: 0.86rem !important; }
  .brand small { font-size: 0.63rem !important; }
  input, textarea, select { font-size: 16px !important; }
}
@media (max-width: 390px) {
  body { font-size: 14px !important; }
  h1, .page-hero h1, .active-classroom-hero h1 { font-size: 1.72rem !important; }
  h2, .article-card h2, .media-card h2, .demo-card h2 { font-size: 1.28rem !important; }
  h3, .classroom-panel h3 { font-size: 0.96rem !important; }
}
:root { --ink: #f6f7f8; --muted: #c9cdd3; --black: #05070b; --charcoal: #15171b; --navy: #00163a; --navy2: #062754; --yellow: #ffe34f; --yellow2: #ffd21f; --gold: #c99a20; --line: #445264; }
html, body { background: var(--black); color: var(--ink); overflow-x: hidden; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.55; }
.site-header { background: linear-gradient(100deg, rgb(0, 7, 20), rgb(0, 25, 68)); border-bottom: 3px solid var(--yellow2); }
.header-inner { min-height: 96px; gap: 1rem; }
.brand { gap: 0.85rem; }
.brand img { width: 76px; height: 76px; object-fit: contain; }
.brand strong { font-size: 1.45rem; color: rgb(255, 255, 255); }
.brand small { font-size: 1rem; color: var(--yellow2); font-weight: 800; }
.menu-button { font-size: 1rem; border-color: rgb(92, 102, 119); color: rgb(255, 255, 255); background: rgb(7, 18, 43); }
.eyebrow.bright, .eyebrow.bright { font-weight: 900; letter-spacing: 0.08em; color: var(--yellow) !important; }
.section-mini-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, rgb(16, 45, 93), rgb(5, 7, 11)); border: 1px solid rgb(83, 96, 120); font-size: 1.55rem; margin: 0.65rem 0px; }
.compact-priority-section { background: linear-gradient(135deg, rgb(22, 19, 9), rgb(9, 11, 16)) !important; padding: 1rem 0px !important; }
.priority-access-card { border: 1px solid rgb(52, 77, 118); background: linear-gradient(145deg, rgb(3, 22, 64), rgb(6, 29, 74)) !important; padding: 1rem !important; }
.media-priority-card { background: linear-gradient(145deg, rgb(82, 20, 0), rgb(39, 8, 0)) !important; border-color: rgb(132, 64, 36) !important; }
.priority-icon { font-size: 2rem !important; }
.priority-access-card strong { font-size: 1.15rem !important; }
.priority-access-card small { font-size: 0.93rem !important; }
.home-hero, .page-hero, .active-classroom-hero, .access-hero { color: rgb(255, 255, 255); background: radial-gradient(circle at 85% 10%, rgba(28, 69, 129, 0.5), transparent 32%), linear-gradient(145deg, rgb(0, 20, 59), rgb(2, 7, 19) 70%, rgb(0, 0, 0)) !important; }
.compact-home-hero { padding: 2rem 0px !important; }
.hero-utility-nav { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; margin: 0px 0px 1rem auto; }
.hero-utility-nav a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0.55rem 0.82rem; border-radius: 999px; background: rgba(3, 11, 24, 0.86); border: 1px solid rgba(255, 227, 79, 0.75); color: rgb(255, 247, 199); font-weight: 800; font-size: 0.82rem; line-height: 1.2; box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 24px; }
.hero-utility-nav a:hover { background: rgb(9, 24, 46); color: rgb(255, 255, 255); border-color: var(--yellow); }
.compact-home-hero h1 { display: grid; gap: 0.05rem; font-size: clamp(2.15rem, 6vw, 3.55rem) !important; line-height: 1.04 !important; margin: 0.5rem 0px 1rem !important; }
.compact-home-hero .home-intro { max-width: 720px; font-size: 1.02rem !important; line-height: 1.55 !important; }
.home-hero-card { background: linear-gradient(145deg, rgb(16, 21, 29), rgb(4, 7, 12)) !important; border: 1px solid rgb(54, 68, 84) !important; }
.home-hero-card img { max-height: 170px !important; }
.section { background: rgb(13, 15, 19); color: rgb(244, 245, 246); }
.section.cream { color: rgb(246, 245, 238); background: rgb(23, 21, 13) !important; }
.section.blue, .section.navy, .dark-section { color: rgb(255, 255, 255); background: linear-gradient(145deg, rgb(0, 20, 51), rgb(7, 16, 30)) !important; }
.section h2 { color: rgb(255, 255, 255); }
.section-intro, .section p, .pathway-card small, .program-preview-grid span { color: rgb(215, 219, 225); }
.pathway-card, .program-preview-grid a, .classroom-panel, .rich-panel, .media-card, .article-card, .leadership-preview-card { background: linear-gradient(145deg, rgb(25, 27, 32), rgb(11, 13, 17)) !important; color: rgb(255, 255, 255) !important; border: 1px solid rgb(72, 81, 95) !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 12px 28px !important; }
.pathway-card strong, .program-preview-grid strong, .classroom-panel h3, .rich-panel h2, .media-card h2, .article-card h2, .leadership-preview-card h3 { color: rgb(246, 247, 248) !important; }
.program-preview-grid a { position: relative; padding: 1rem !important; }
.program-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgb(6, 27, 66); border: 1px solid rgb(52, 78, 125); font-size: 1.25rem; margin-bottom: 0.55rem; }
.button, .action { border-radius: 12px !important; font-weight: 800 !important; }
.button.primary, .hero-primary { background: var(--yellow2) !important; color: rgb(17, 17, 17) !important; border-color: var(--yellow2) !important; }
.hero-secondary { background: rgb(34, 37, 43) !important; color: rgb(255, 255, 255) !important; border-color: rgb(74, 79, 89) !important; }
.hero-outline, .button.secondary { background: rgb(7, 21, 46) !important; color: rgb(255, 255, 255) !important; border-color: rgb(83, 98, 123) !important; }
.universal-back-row { background: rgb(12, 14, 18) !important; padding: 0.7rem !important; gap: 0.55rem !important; }
.universal-back-row .button { font-size: 0.9rem !important; }
.active-classroom-compact { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.active-classroom-hero h1 { font-size: clamp(2rem, 6vw, 3.1rem) !important; }
.active-classroom-hero .lead { font-size: 1.05rem !important; max-width: 700px; }
.classroom-status-row span { border: 1px solid rgb(139, 75, 37); background: rgb(84, 32, 0) !important; color: rgb(255, 255, 255) !important; font-size: 0.86rem !important; }
.active-module-grid { gap: 0.85rem !important; }
.classroom-panel { padding: 1rem !important; }
.classroom-panel h3 { font-size: 1.15rem !important; }
.classroom-panel p { font-size: 0.98rem !important; }
.access-hero { padding: 2.3rem 0px; }
.access-grid { display: grid; grid-template-columns: 1fr minmax(300px, 430px); gap: 1.4rem; align-items: center; }
.access-grid h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: 1.05; margin: 0.4rem 0px 1rem; }
.access-note { font-size: 0.95rem; color: rgb(205, 212, 221); max-width: 680px; }
.access-card { background: linear-gradient(145deg, rgb(23, 26, 32), rgb(8, 10, 14)); border: 1px solid rgb(82, 96, 113); border-radius: 18px; padding: 1.25rem; box-shadow: rgba(0, 0, 0, 0.45) 0px 18px 45px; }
.access-card h2 { margin-top: 0px; }
.access-card label { display: block; font-weight: 800; margin: 0.8rem 0px 0.3rem; }
.access-card input { width: 100%; padding: 0.8rem; border-radius: 10px; border: 1px solid rgb(104, 116, 135); background: rgb(5, 7, 11); color: rgb(255, 255, 255); }
.access-card .button { width: 100%; margin-top: 1rem; }
.form-message { min-height: 1.6rem; color: var(--yellow); font-size: 0.9rem; }
.small-print { font-size: 0.78rem; color: rgb(173, 180, 190); }
.two-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1rem; }
.feature-link-card { display: flex; gap: 0.75rem; align-items: center; padding: 1rem; border-radius: 14px; text-decoration: none; background: rgb(7, 27, 63); color: rgb(255, 255, 255); border: 1px solid rgb(64, 86, 121); }
.feature-link-card.media { background: rgb(61, 16, 4); }
.feature-link-card span { font-size: 1.7rem; }
.feature-link-card strong { display: block; }
.feature-link-card small { display: block; color: rgb(216, 220, 227); }
.media-shell { color: rgb(255, 255, 255); }
.media-shell > p, .media-shell section > p { color: rgb(209, 214, 221); }
.founders-media-grid figure { background: rgb(12, 15, 20); border: 1px solid rgb(70, 80, 95); border-radius: 14px; padding: 0.6rem; }
.founders-media-grid img { border-radius: 10px; }
.footer { border-top: 1px solid rgb(48, 54, 64); background: rgb(2, 4, 7) !important; color: rgb(217, 221, 227) !important; }
.footer a { color: var(--yellow); }
@media (max-width: 760px) {
  body { font-size: 16px !important; }
  .header-inner { min-height: 82px !important; }
  .brand img { width: 68px !important; height: 68px !important; }
  .brand strong { font-size: 1.25rem !important; }
  .brand small { font-size: 0.88rem !important; color: var(--yellow2) !important; }
  .compact-home-hero { padding: 1.35rem 0px !important; }
  .compact-home-hero h1 { font-size: 1.92rem !important; }
  .compact-home-hero .home-intro { font-size: 1rem !important; }
  .home-hero-card { padding: 1rem !important; }
  .home-hero-card img { max-height: 125px !important; }
  .priority-access-grid, .two-feature-grid, .access-grid { grid-template-columns: 1fr !important; }
  .priority-access-card { padding: 0.9rem !important; }
  .priority-access-card strong { font-size: 1.08rem !important; }
  .priority-access-card small { font-size: 0.88rem !important; }
  .section { padding: 1.3rem 0px !important; }
  .section h2 { font-size: 1.65rem !important; }
  .pathway-card, .program-preview-grid a, .classroom-panel, .rich-panel, .media-card, .article-card { padding: 0.9rem !important; }
  .pathway-card strong, .program-preview-grid strong { font-size: 1.05rem !important; }
  .pathway-card small, .program-preview-grid span { font-size: 0.9rem !important; }
  .button { font-size: 0.94rem !important; padding: 0.72rem 0.86rem !important; }
  .active-classroom-compact { grid-template-columns: 1fr; gap: 0.2rem; }
  .active-classroom-hero h1 { font-size: 2rem !important; }
  .active-classroom-hero .lead { font-size: 1rem !important; }
  .classroom-panel h3 { font-size: 1.08rem !important; }
  .classroom-panel p { font-size: 0.95rem !important; }
  .universal-back-row { display: grid !important; grid-template-columns: 1fr !important; }
  .universal-back-row .button { width: 100% !important; }
  .access-hero { padding: 1.35rem 0px; }
  .access-grid h1 { font-size: 2.1rem; }
  .access-card { padding: 1rem; }
  .section-mini-icon { width: 44px; height: 44px; font-size: 1.4rem; }
  .main-nav a { font-size: 0.95rem !important; }
}
@media (max-width: 390px) {
  .brand img { width: 56px !important; height: 56px !important; }
  .brand strong { font-size: 1.12rem !important; }
  .brand small { font-size: 0.8rem !important; }
  .compact-home-hero h1 { font-size: 2.05rem !important; }
  .section h2 { font-size: 1.48rem !important; }
}
.mobile-program-card { background: linear-gradient(145deg, rgb(25, 27, 32), rgb(11, 13, 17)) !important; color: rgb(246, 247, 248) !important; border: 1px solid rgb(72, 81, 95) !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 12px 28px !important; }
.mobile-program-card h2 { color: rgb(255, 255, 255) !important; }
.section .mobile-program-card p { color: rgb(215, 219, 225) !important; }
.mobile-program-card .status { background: rgb(255, 240, 173) !important; color: rgb(74, 53, 0) !important; }
.technology-notice { background: rgb(255, 244, 204) !important; color: rgb(51, 36, 0) !important; border-left-color: rgb(201, 154, 32) !important; }
.section .technology-notice p { color: rgb(74, 58, 22) !important; }
.knowledge-check-section { background: linear-gradient(rgb(6, 25, 54), rgb(17, 24, 39)); }
.knowledge-check-card { max-width: 860px; margin: auto; background: rgb(23, 25, 29); border: 1px solid rgb(75, 85, 99); border-radius: 20px; padding: clamp(1rem, 3vw, 2rem); box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 44px; color: rgb(248, 250, 252); }
.knowledge-check-card h2 { font-size: clamp(1.75rem, 5vw, 2.35rem); margin: 0.25rem 0px 0.65rem; color: rgb(191, 232, 255); }
.knowledge-intro { font-size: 1rem; line-height: 1.55; color: rgb(238, 242, 247); }
.quiz-question { border: 1px solid rgb(75, 85, 99); border-radius: 16px; padding: 1rem; margin: 1rem 0px; background: rgb(32, 34, 38); }
.quiz-question legend { font-weight: 800; font-size: 1.05rem; line-height: 1.4; padding: 0px 0.35rem; color: rgb(255, 255, 255); }
.quiz-question label { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0.65rem 0px; padding: 0.72rem; border-radius: 11px; background: rgb(21, 23, 26); font-size: 1rem; line-height: 1.45; cursor: pointer; }
.quiz-question label:hover, .quiz-question label:focus-within { outline: rgb(255, 216, 77) solid 2px; background: rgb(34, 37, 42); }
.quiz-question input { width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; accent-color: rgb(255, 216, 77); flex: 0 0 auto; }
.quiz-question.correct { border-color: rgb(34, 197, 94); }
.quiz-question.incorrect { border-color: rgb(239, 68, 68); }
.reflection-label { display: block; margin-top: 1.25rem; font-size: 1.05rem; }
.reflection-label span { display: block; font-weight: 400; color: rgb(209, 213, 219); margin-top: 0.3rem; font-size: 0.95rem; }
.knowledge-reflection { width: 100%; margin: 0.65rem 0px 1rem; padding: 0.9rem; border-radius: 12px; border: 1px solid rgb(100, 116, 139); background: rgb(15, 17, 21); color: rgb(255, 255, 255); font: inherit; resize: vertical; }
.quiz-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.quiz-result { display: none; margin: 1rem 0px; padding: 1rem; border-radius: 12px; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.quiz-result.show { display: block; }
.quiz-result.pass { background: rgb(18, 60, 42); border: 1px solid rgb(34, 197, 94); }
.quiz-result.review { background: rgb(74, 36, 13); border: 1px solid rgb(245, 158, 11); }
.knowledge-next { display: none; margin-top: 0.75rem; }
.knowledge-next.show { display: inline-flex; }
@media (max-width: 600px) {
  .knowledge-check-card { border-radius: 15px; }
  .quiz-question { padding: 0.8rem; }
  .quiz-question label { font-size: 0.96rem; }
  .quiz-actions .button { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .hero-utility-nav { justify-content: flex-start; gap: 0.45rem; margin-bottom: 0.8rem; }
  .hero-utility-nav a { font-size: 0.74rem; padding: 0.48rem 0.65rem; }
  .brand img { width: 72px !important; height: 72px !important; }
  .brand strong { font-size: 1.2rem !important; }
  .brand small { font-size: 0.9rem !important; }
  .compact-home-hero h1 { font-size: 1.95rem !important; }
  .home-intro { font-size: 0.98rem !important; }
}
@media (max-width: 430px) {
  .hero-utility-nav { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); width: 100%; }
  .hero-utility-nav a { text-align: center; padding: 0.5rem 0.35rem; font-size: 0.68rem; }
  .brand img { width: 62px !important; height: 62px !important; }
}
.compact-privacy-section { padding: 0.7rem 0px !important; background: rgb(8, 11, 17) !important; }
.compact-privacy-note { margin: 0px; padding: 0.7rem 0.9rem; border-left: 4px solid var(--yellow2); background: rgb(17, 23, 34); color: rgb(233, 237, 242); border-radius: 8px; font-size: 0.82rem !important; line-height: 1.4 !important; }
.compact-privacy-note strong { color: var(--yellow) !important; }
@media (max-width: 600px) {
  .compact-privacy-note { padding: 0.62rem 0.72rem; font-size: 0.76rem !important; }
}
html { text-size-adjust: none !important; }
h1, h2, h3, h4, h5, h6, p, li, a, span, strong, small, button { hyphens: none !important; }
.section .notice, .section .notice p, .section .notice strong { color: rgb(56, 43, 8) !important; }
.section .resource-card, .section .resource-card p, .section .resource-card h2, .section .resource-card h3 { color: rgb(246, 247, 248) !important; }
@media (max-width: 700px) {
  h1, .page-hero h1, .active-classroom-hero h1 { font-size: 1.9rem !important; line-height: 1.12 !important; }
  h2, .section h2, .article-card h2, .media-card h2, .demo-card h2 { font-size: 1.45rem !important; line-height: 1.2 !important; }
  h3, .classroom-panel h3 { font-size: 1.08rem !important; line-height: 1.25 !important; }
  p, .lead, li, .article-card p, .media-card p, .demo-card p, .demo-card li { font-size: 1rem !important; line-height: 1.6 !important; }
  .rich-panel h2 { font-size: 1.45rem !important; line-height: 1.2 !important; }
  .rich-panel h3 { font-size: 1.08rem !important; line-height: 1.25 !important; }
  .rich-panel p, .rich-panel li { font-size: 1rem !important; line-height: 1.6 !important; }
  .notice, .notice p, .resource-card, .resource-card p, .resource-card li { font-size: 1rem !important; line-height: 1.6 !important; }
  .leadership-note { font-size: 1rem !important; line-height: 1.6 !important; padding: 1.1rem !important; }
}
.resource-card, .compact-panel, .step, .lesson-lock, .page-nav a, .privacy-safe-cohort, .mode-panel, .mission-grid > div, .leader-card, .responsibility-box, .reflection-box, .completion-badge, .summit-card, .portal-button { background: linear-gradient(145deg, rgb(25, 27, 32), rgb(11, 13, 17)) !important; color: rgb(246, 247, 248) !important; border-color: rgb(72, 81, 95) !important; }
.resource-card h3, .compact-panel h2, .step h3, .lesson-lock h2, .privacy-safe-cohort strong, .mode-panel h2, .mission-grid h3, .leader-card h3, .responsibility-box h3, .reflection-box h3, .summit-card h2, .portal-button strong { color: rgb(255, 255, 255) !important; }
.resource-card p, .compact-panel p, .step p, .lesson-lock p, .privacy-safe-cohort p, .mode-panel p, .mission-grid p, .leader-card p, .responsibility-box p, .reflection-box p, .summit-card p, .portal-button span { color: rgb(215, 219, 225) !important; }
.notice { background: rgb(255, 244, 206) !important; color: rgb(56, 43, 8) !important; }
.section .notice { color: rgb(56, 43, 8) !important; }
.learning-path span { color: rgb(35, 29, 11) !important; }
.demo-card, .module { background: linear-gradient(145deg, rgb(25, 27, 32), rgb(11, 13, 17)) !important; color: rgb(246, 247, 248) !important; border-color: rgb(72, 81, 95) !important; }
.demo-card h2, .demo-card h3, .module strong { color: rgb(255, 255, 255) !important; }
.demo-card p, .demo-card li, .module p, .module li { color: rgb(215, 219, 225) !important; }
.orientation-stage, .orientation-progress-section { color: rgb(23, 33, 43) !important; }
.orientation-stage .stage-copy p, .orientation-stage .stage-copy li { color: rgb(23, 33, 43) !important; }
.key-message, .important-notice, .values-grid div, .learning-path div { color: rgb(23, 33, 43) !important; }
.key-message p, .important-notice p, .values-grid strong, .values-grid small, .learning-path strong, .learning-path small { color: rgb(23, 33, 43) !important; }

/* Accessibility repair: keep every orientation card readable in all audio modes. */
.orientation-page.listen-only .stage-copy > :not(.eyebrow):not(h2) { opacity: 1 !important; }
.orientation-page.listen-only .speech-highlight { opacity: 1 !important; outline: 3px solid var(--yellow2); outline-offset: 4px; border-radius: 12px; }
.orientation-page .mission-grid > div,
.orientation-page .leader-card { background: linear-gradient(145deg, rgb(25, 27, 32), rgb(11, 13, 17)) !important; color: rgb(246, 247, 248) !important; }
.orientation-page .mission-grid h3,
.orientation-page .leader-card h3,
.orientation-page .mission-grid p,
.orientation-page .leader-card p,
.orientation-page .leader-card strong { color: rgb(246, 247, 248) !important; opacity: 1 !important; }

@media (max-width: 700px) {
  .orientation-page .mission-grid h3,
  .orientation-page .leader-card h3 { font-size: 1.3rem !important; line-height: 1.25 !important; }
  .orientation-page .mission-grid p,
  .orientation-page .leader-card p { font-size: 1rem !important; line-height: 1.6 !important; }
  .orientation-page .mission-grid > div,
  .orientation-page .leader-card { padding: 1rem !important; overflow-wrap: break-word !important; word-break: normal !important; }
}