/* =========================================================================
   COMPONENT LAYER
   Layout and styling for the content components that shipped with markup
   but no stylesheet rules. Loaded last, so this file is the final word on
   their geometry.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SITEWIDE BANDS
   ---------------------------------------------------------------------- */

/* 25-minute lesson teaser ------------------------------------------------ */

.lesson-25-mini {
	padding: 78px 0;
	background: linear-gradient(120deg, var(--cream), #fff 62%, var(--soft));
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.lesson-25-mini .wrap {
	display: grid;
	grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
	gap: 54px;
	align-items: center;
}

.lesson-25-mini h2 {
	font-size: clamp(1.8rem, 2.9vw, 2.75rem);
	margin-bottom: 4px;
}

.lesson-25-mini p {
	color: var(--muted);
	max-width: 46ch;
}

.mini-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 12px;
}

.mini-flow > div {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 20px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	overflow: hidden;
}

.mini-flow > div::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, var(--gold), var(--gold2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease-out);
}

.mini-flow > div:hover::after {
	transform: scaleX(1);
}

.mini-flow b {
	font-family: var(--sans);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--gold);
	display: block;
}

.mini-flow strong {
	font-family: var(--serif);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.2;
	letter-spacing: -.02em;
}

.mini-flow span {
	font-size: .8rem;
	color: var(--muted);
}

/* Academic key note ------------------------------------------------------ */

.academic-key-note {
	background: #fff;
	padding: 76px 0;
}

.academic-key-note .editorial-head h2 {
	font-size: clamp(1.9rem, 3.2vw, 3rem);
}

.academic-key-note .editorial-head p {
	color: var(--muted);
	font-size: 1.08rem;
}

/* Reference band --------------------------------------------------------- */

.academic-reference-band {
	padding: 58px 0;
}

.academic-reference-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0;
}

.academic-reference-grid > div {
	padding: 6px 34px;
	border-left: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.academic-reference-grid > div:first-child {
	border-left: 0;
	padding-left: 0;
}

.academic-reference-grid strong {
	font-family: var(--serif);
	font-size: 1.16rem;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: -.02em;
	line-height: 1.24;
}

.academic-reference-grid p {
	margin: 0;
	font-size: .93rem;
	color: var(--muted);
}

.ref-kicker {
	display: inline-block;
	color: var(--gold);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Conversion rail -------------------------------------------------------- */

.conversion-rail {
	padding: 20px 0;
}

.conversion-rail .wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.rail-label {
	color: var(--gold2);
	margin-right: 8px;
	font-size: .68rem;
}

.conversion-rail a {
	color: #e7edf6;
	font-size: .86rem;
	font-weight: 600;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	white-space: nowrap;
}

.conversion-rail a:hover {
	background: var(--gold-bright);
	border-color: var(--gold-bright);
	color: var(--navy);
}

/* -------------------------------------------------------------------------
   2. HOME
   ---------------------------------------------------------------------- */

/* Route cards ------------------------------------------------------------ */

.home-nav-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(278px, 1fr));
	gap: 18px;
}

.route-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 32px 30px 30px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	position: relative;
	overflow: hidden;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

/* The gold left edge is drawn with an inset shadow rather than ::before,
   which the icon badge occupies. */
.route-card {
	box-shadow: inset 0 0 0 0 var(--gold);
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

.route-card:hover {
	transform: translateY(-5px);
	box-shadow: inset 3px 0 0 0 var(--gold), var(--shadow-lift);
	border-color: rgba(201, 162, 71, .5);
}



.route-no {
	font-family: var(--serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: .04em;
}

.route-card h3 {
	font-size: 1.3rem;
	margin-top: 2px;
}

.route-card p {
	color: var(--muted);
	font-size: .95rem;
	flex: 1;
}

.route-card b {
	margin-top: 16px;
	font-size: .88rem;
	font-weight: 700;
	color: var(--navy);
	transition: color .25s var(--ease), transform .3s var(--ease-out);
	display: inline-block;
}

.route-card:hover b {
	color: var(--gold);
	transform: translateX(4px);
}

/* Problem statement ------------------------------------------------------ */

.problem-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 56px;
	align-items: start;
}

.big-statement {
	font-family: var(--serif);
	font-size: clamp(2.1rem, 4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.035em;
	color: var(--navy);
	margin-bottom: 20px;
}

.big-statement em {
	font-style: italic;
	color: var(--gold);
	font-weight: 600;
}

.quote-block {
	background: linear-gradient(160deg, var(--navy), var(--navy2));
	color: #e4ebf5;
	border-radius: var(--radius-lg);
	padding: 40px 38px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.quote-block::before {
	content: "\201C";
	position: absolute;
	top: -40px;
	right: 18px;
	font-family: var(--serif);
	font-size: 12rem;
	color: rgba(201, 162, 71, .17);
	line-height: 1;
	pointer-events: none;
}

.quote-block strong {
	display: block;
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.1vw, 1.72rem);
	font-weight: 600;
	color: #fff;
	line-height: 1.24;
	letter-spacing: -.024em;
	margin-bottom: 14px;
	position: relative;
}

.quote-block p {
	color: #c3d1e4;
	font-size: .97rem;
	position: relative;
}

/* Method line ------------------------------------------------------------ */

.method-line {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
	gap: 14px;
	counter-reset: method;
}

.method-step {
	padding: 28px 22px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	position: relative;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

.method-step:hover {
	transform: translateY(-5px);
	border-color: rgba(201, 162, 71, .55);
	box-shadow: var(--shadow-lift);
}

.method-step b {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--navy), var(--navy2));
	color: var(--gold2);
	font-family: var(--serif);
	font-size: .95rem;
	font-weight: 700;
	margin-bottom: 16px;
	transition: background .35s var(--ease), color .35s var(--ease);
}

.method-step:hover b {
	background: linear-gradient(140deg, var(--gold), var(--gold-bright));
	color: var(--navy);
}

.method-step h3 {
	font-size: 1.18rem;
	margin-bottom: 4px;
}

.method-step p {
	color: var(--muted);
	font-size: .9rem;
	margin: 0;
}

/* Humor strip ------------------------------------------------------------ */

.humor-strip {
	margin-top: 26px;
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
	gap: 40px;
	align-items: start;
	padding: 34px;
	background: linear-gradient(130deg, var(--cream), #fff);
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	border-radius: var(--radius);
}

.humor-strip .label h3 {
	font-size: 1.32rem;
	margin-top: 6px;
}

.humor-strip .copy p {
	margin: 0;
	color: #4d5b71;
}

.humor-strip .copy strong {
	color: var(--navy);
}

/* Ages grid -------------------------------------------------------------- */

.ages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 16px;
}

.age-card {
	padding: 32px 28px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-top: 4px solid transparent;
	background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, var(--gold), var(--gold2));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.age-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lift);
}

.age-card .age {
	font-family: var(--serif);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: -.03em;
	margin-bottom: 6px;
}

.age-card h3 {
	font-size: 1.2rem;
}

.age-card p {
	color: var(--muted);
	font-size: .92rem;
}

/* Delivery formats ------------------------------------------------------- */

.formats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
	gap: 16px;
}

.format-card {
	padding: 32px 28px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: transform .4s var(--ease-out), background .4s var(--ease), border-color .4s var(--ease);
}

.format-card:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, .09);
	border-color: rgba(201, 162, 71, .55);
}

.format-stat {
	display: inline-block;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--navy);
	background: var(--gold2);
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.format-card h3 {
	color: #fff;
	font-size: 1.3rem;
}

.format-card p {
	color: #c7d4e5;
	font-size: .93rem;
}

.home-v3-note {
	margin-top: 22px;
	font-size: .92rem;
	color: #b9c7da;
	max-width: 88ch;
}

.navy-section .home-v3-note,
.cta-section .home-v3-note {
	color: #b9c7da;
}

/* Impact grid ------------------------------------------------------------ */

.impact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.impact-cell {
	padding: 32px 26px;
	border-right: 1px solid var(--line);
	transition: background .35s var(--ease);
}

.impact-cell:last-child {
	border-right: 0;
}

.impact-cell:hover {
	background: var(--cream);
}

.impact-cell h3 {
	font-size: 1.16rem;
	margin: 4px 0 6px;
}

.impact-cell p {
	color: var(--muted);
	font-size: .92rem;
	margin: 0;
}

/* Two brands ------------------------------------------------------------- */

.two-brand {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.two-brand > div {
	padding: 40px 36px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, #fff, var(--soft));
	display: flex;
	flex-direction: column;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

.two-brand > div:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: rgba(201, 162, 71, .5);
}

.two-brand h3 {
	font-size: 1.4rem;
	margin: 6px 0 4px;
}

.two-brand p {
	color: var(--muted);
	flex: 1;
}

.two-brand a strong {
	display: inline-block;
	margin-top: 18px;
	color: var(--navy);
	font-size: .92rem;
	transition: color .25s var(--ease), transform .3s var(--ease-out);
}

.two-brand a:hover strong {
	color: var(--gold);
	transform: translateX(4px);
}

/* Final door ------------------------------------------------------------- */

.final-door {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: 48px;
	align-items: center;
}

.final-door p {
	color: #cbd8e8;
	max-width: 62ch;
}

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

/* -------------------------------------------------------------------------
   3. AGES 4–17
   ---------------------------------------------------------------------- */

.age-hero-note {
	margin-top: 26px;
	padding: 20px 24px;
	border-left: 3px solid var(--gold);
	background: var(--cream);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: .95rem;
	color: #4d5b71;
}

.age-hero-note strong {
	color: var(--navy);
}

.module-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
	gap: 14px;
	margin-top: 30px;
}

.module-index a {
	padding: 22px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 5px;
	transition: transform .35s var(--ease-out), border-color .35s var(--ease), box-shadow .35s var(--ease-out);
}

.module-index a:hover {
	transform: translateY(-4px);
	border-color: var(--gold);
	box-shadow: var(--shadow);
}

.module-index strong {
	font-family: var(--serif);
	font-size: 1.12rem;
	color: var(--navy);
	letter-spacing: -.02em;
}

.module-index span {
	font-size: .84rem;
	color: var(--muted);
}

.age-year-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.age-year-card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	scroll-margin-top: 140px;
	transition: box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

.age-year-card:hover {
	box-shadow: var(--shadow-lift);
	border-color: rgba(201, 162, 71, .45);
}

.age-rail {
	background: linear-gradient(165deg, var(--navy), var(--navy2));
	color: #fff;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	overflow: hidden;
}

.age-rail::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 190px;
	height: 190px;
	border: 1.5px solid rgba(201, 162, 71, .26);
	border-radius: 50%;
}

.age-rail .n {
	font-family: var(--serif);
	font-size: 4.1rem;
	font-weight: 700;
	line-height: .92;
	color: var(--gold2);
	letter-spacing: -.04em;
}

.age-rail .m {
	font-family: var(--serif);
	font-size: 1.16rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: -.02em;
}

.age-rail .c {
	font-size: .8rem;
	color: #b6c6db;
	line-height: 1.5;
	margin-top: 4px;
	position: relative;
}

.age-body {
	padding: 32px 34px;
}

.track {
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 10px;
}

.age-body h3 {
	font-size: 1.42rem;
	margin-bottom: 6px;
}

.age-body p {
	color: var(--muted);
	max-width: 80ch;
}

.topic-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.topic-chips span {
	font-size: .82rem;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--soft);
	color: #4c5a70;
}

.topic-chips span:hover {
	border-color: var(--gold);
	background: var(--cream);
}

.format-choice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.format-choice > div {
	padding: 40px 36px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.format-choice > div:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.format-choice .school {
	background: linear-gradient(160deg, #fff, var(--soft));
}

.format-choice .individual {
	background: linear-gradient(160deg, var(--navy), var(--navy2));
	color: #dbe5f1;
	border-color: transparent;
}

.format-choice .individual h3,
.format-choice .individual .big {
	color: #fff;
}

.format-choice .individual li {
	color: #c4d2e4;
}

.format-choice .big {
	font-family: var(--serif);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: -.035em;
	line-height: 1;
	margin-bottom: 10px;
}

.format-choice .individual .big {
	color: var(--gold2);
}

.format-choice h3 {
	font-size: 1.35rem;
	margin-bottom: 4px;
}

.format-choice p {
	color: inherit;
	opacity: .88;
}

.format-choice ul {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	flex: 1;
}

.format-choice li {
	position: relative;
	padding-left: 24px;
	margin: 9px 0;
	font-size: .93rem;
	color: #4c5a70;
}

.format-choice li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--gold);
	font-weight: 700;
}

.format-choice .btn {
	margin-top: 24px;
	align-self: flex-start;
}

/* -------------------------------------------------------------------------
   4. PROGRAM
   ---------------------------------------------------------------------- */

.standards-detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.standards-detail-card {
	padding: 36px 32px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-top: 4px solid var(--gold);
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.standards-detail-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.standards-detail-card h3 {
	font-size: 1.3rem;
	margin: 10px 0 6px;
}

.standards-detail-card p {
	color: var(--muted);
	font-size: .95rem;
}

.standards-caution {
	margin-top: 20px;
	padding: 20px 24px;
	background: var(--soft);
	border-left: 3px solid var(--navy);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: .9rem;
	color: #4d5b71;
}

.standards-caution strong {
	color: var(--navy);
}

.lesson-25-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	scroll-margin-top: 140px;
}

.lesson-25-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 36px;
	align-items: center;
	padding: 36px 36px 30px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(120deg, var(--cream), #fff);
}

.lesson-time {
	font-family: var(--serif);
	font-size: 2.3rem;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: -.035em;
	line-height: 1.05;
}

.lesson-time span {
	display: block;
	font-family: var(--sans);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	color: var(--gold);
	margin-bottom: 8px;
}

.lesson-25-head p {
	margin: 0;
	color: var(--muted);
	font-size: .97rem;
}

.lesson-25-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}

.lesson-25-step {
	padding: 30px 24px 28px;
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	transition: background .35s var(--ease);
}

.lesson-25-step:last-child {
	border-right: 0;
}

.lesson-25-step:hover {
	background: var(--cream);
}

.lesson-25-step .minute {
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--gold);
	text-transform: uppercase;
}

.lesson-25-step .num {
	font-family: var(--serif);
	font-size: 1.9rem;
	font-weight: 700;
	color: rgba(11, 29, 58, .14);
	line-height: 1;
	letter-spacing: -.04em;
	transition: color .35s var(--ease);
}

.lesson-25-step:hover .num {
	color: rgba(201, 162, 71, .55);
}

.lesson-25-step strong {
	font-family: var(--serif);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--navy);
	letter-spacing: -.02em;
	line-height: 1.2;
}

.lesson-25-step > span:last-child {
	font-size: .86rem;
	color: var(--muted);
	line-height: 1.5;
}

.lesson-25-summary {
	padding: 28px 36px;
	background: linear-gradient(140deg, var(--navy), var(--navy2));
	color: #dbe5f1;
	font-size: .97rem;
}

.lesson-25-summary strong {
	color: #fff;
}

.lesson-25-note {
	padding: 20px 36px;
	background: var(--soft);
	border-top: 1px solid var(--line);
	font-size: .89rem;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   5. INSTITUTE
   ---------------------------------------------------------------------- */

.workforce-bridge-teaser {
	position: relative;
	overflow: hidden;
}

.workforce-bridge-teaser::after {
	content: "";
	position: absolute;
	left: -180px;
	bottom: -260px;
	width: 560px;
	height: 560px;
	border: 1.5px solid rgba(201, 162, 71, .18);
	border-radius: 50%;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   6. RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.lesson-25-mini .wrap { grid-template-columns: 1fr; gap: 34px; }
	.impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.impact-cell:nth-child(2) { border-right: 0; }
	.impact-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.lesson-25-step { border-bottom: 1px solid var(--line); }
	.lesson-25-step:nth-child(3n) { border-right: 0; }
}

@media (max-width: 900px) {
	.lesson-25-head { gap: 16px; padding: 28px; }
	.academic-reference-grid { gap: 26px; }
	.problem-grid { grid-template-columns: 1fr; gap: 34px; }
	.humor-strip { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
	.final-door { grid-template-columns: 1fr; gap: 26px; }
	.final-door .actions { justify-content: flex-start; }
	.academic-reference-grid > div { border-left: 0; padding: 0; }
	.age-rail { flex-direction: row; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 24px 26px; }
	.age-rail .n { font-size: 2.6rem; }
	.age-rail .c { width: 100%; margin-top: 0; }
	.age-body { padding: 26px; }
	.lesson-25-summary, .lesson-25-note { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 760px) {
	.impact-grid { grid-template-columns: 1fr; }
	.impact-cell { border-right: 0; border-bottom: 1px solid var(--line); }
	.impact-cell:last-child { border-bottom: 0; }
	.lesson-25-step { border-right: 0; }
	.lesson-25-step:last-child { border-bottom: 0; }
	.conversion-rail .wrap { gap: 8px; }
	.conversion-rail a { font-size: .8rem; padding: 8px 13px; }
	.quote-block { padding: 30px 26px; }
	.lesson-25-mini { padding: 58px 0; }
}

@media (max-width: 480px) {
	.format-choice > div { padding: 30px 24px; }
	.two-brand > div { padding: 30px 26px; }
}

/* -------------------------------------------------------------------------
   7. EDITORIAL HEAD PROPORTION
   The inherited heading scale was tuned for full-width headings; inside the
   narrow left column of .editorial-head it broke to one word per line.
   ---------------------------------------------------------------------- */

.editorial-head,
body.harvard-square .editorial-head,
body.harvard-square.index-format .editorial-head {
	grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
	gap: 54px;
}

.editorial-head h2,
body.harvard-square .editorial-head h2,
body.harvard-square.index-format .editorial-head h2 {
	font-size: clamp(1.7rem, 2.45vw, 2.55rem);
	line-height: 1.1;
}

.editorial-head > div > .eyebrow {
	margin-top: 4px;
}

.section-head h2,
body.harvard-square .section-head h2 {
	font-size: clamp(1.9rem, 3.1vw, 3.1rem);
}

/* Display heads. The inherited scale (up to 6.8rem) was drawn for short
   two-word headlines; these run to full sentences inside a half-width
   column, so bring the top end down and let them breathe. */
.hero-editorial .hero-copy h1,
body.harvard-square .hero-editorial .hero-copy h1 {
	font-size: clamp(2.3rem, 3.85vw, 3.95rem);
	line-height: 1.04;
}

.hero-home h1,
body.harvard-square .hero-home h1,
body.harvard-square.index-format .hero-home h1 {
	font-size: clamp(2.5rem, 4.35vw, 4.4rem);
	line-height: 1.04;
}

.page-hero h1 {
	font-size: clamp(2.4rem, 4.2vw, 4.2rem);
}

.hero-editorial .hero-copy .hero-sub,
.hero-editorial .hero-copy .lead {
	font-size: 1.1rem;
	max-width: 58ch;
}

@media (max-width: 620px) {
	.hero-editorial .hero-copy h1,
	body.harvard-square .hero-editorial .hero-copy h1 {
		font-size: clamp(2.1rem, 8.6vw, 3rem);
	}
}

@media (max-width: 900px) {
	.editorial-head,
	body.harvard-square .editorial-head,
	body.harvard-square.index-format .editorial-head {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.editorial-head h2 { font-size: clamp(1.7rem, 5.4vw, 2.4rem); }
}

/* Editorial heroes carry their proof points as inline chips, not a grid. */
.hero-editorial .hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 30px;
	border: 0;
}

.hero-editorial .hero-proof span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	color: #4c5a70;
	white-space: nowrap;
}

.hero-editorial.dark .hero-proof span {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .05);
	color: #d5e0ee;
}

.hero-editorial .hero-proof i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
	display: inline-block;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   8. STICKY OFFSETS
   The header height changes when it shrinks on scroll; site.js publishes the
   live value as --lw-header-h so sub-navs and anchors stay in step with it.
   ---------------------------------------------------------------------- */

:root {
	--lw-header-h: 132px;
}

.section-nav,
body.harvard-square .section-nav {
	top: var(--lw-header-h);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	z-index: 40;
}

.section-nav a:hover,
body.harvard-square .section-nav a:hover {
	background: var(--cream);
	color: var(--navy);
}

.section-nav a.is-active {
	background: var(--navy);
	color: #fff;
}

main [id],
section[id],
article[id],
div[id] {
	scroll-margin-top: calc(var(--lw-header-h) + 78px);
}

/* -------------------------------------------------------------------------
   9. OVERFLOW SAFETY
   ---------------------------------------------------------------------- */

/* Long unbroken strings (domains, emails, IDs) must not widen their column. */
h1, h2, h3, h4, h5, h6,
p, li, td, th, dd, dt,
strong, b, span, small, figcaption {
	overflow-wrap: break-word;
	word-break: normal;
}

.role-panel h3,
.contact-card h3,
.footer-grid p,
.story-copy h3 {
	overflow-wrap: anywhere;
}

/* Data tables scroll inside their own box rather than the page. */
main table {
	max-width: 100%;
	border-collapse: collapse;
}

@media (max-width: 860px) {
	main table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	main table th,
	main table td {
		white-space: normal;
		min-width: 140px;
	}
}

/* Media, embeds and pre blocks stay inside the column. */
img, svg, video, iframe, canvas {
	max-width: 100%;
	height: auto;
}

pre {
	overflow-x: auto;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
   10. DECK BAND — the presentation graphic that used to sit cropped behind
   the hero, now shown whole at the top of the page.
   ---------------------------------------------------------------------- */

.deck-band {
	padding: 54px 0;
}

.deck-band .material-frame {
	max-width: 1000px;
	margin: 0 auto;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	background: #fff;
}

.deck-band .material-frame img {
	display: block;
	width: 100%;
	height: auto;
}

.deck-band .caption {
	padding: 16px 22px;
	border-top: 1px solid var(--line);
	font-size: .88rem;
	color: var(--muted);
	background: #fff;
}

.material-frame {
	position: relative;
}

.doc-zoom-note {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(11, 29, 58, .84);
	color: var(--gold2);
	padding: 6px 11px;
	border-radius: 999px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .3s var(--ease), transform .3s var(--ease-out);
	z-index: 3;
}

.material-frame:hover .doc-zoom-note {
	opacity: 1;
	transform: none;
}

@media (max-width: 760px) {
	.deck-band { padding: 36px 0; }
	.doc-zoom-note { display: none; }
}

/* -------------------------------------------------------------------------
   11. REGISTRATION HEROES
   Short conversion pages: give the navy band the same photographic depth
   the home hero has so they do not read as flat blocks.
   ---------------------------------------------------------------------- */

.registration-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 96px 0 92px;
	background: var(--navy-ink);
}

.registration-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center 32%;
	opacity: .26;
}

.registration-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(900px 540px at 8% 6%, rgba(20, 42, 80, .8), transparent 64%),
		radial-gradient(760px 470px at 94% 94%, rgba(201, 162, 71, .2), transparent 68%),
		linear-gradient(165deg, rgba(5, 15, 29, .93), rgba(11, 29, 58, .95));
}

.lw-page-teacher-registration .registration-hero::before {
	background-image: url("../img/photo-teacher-welcome.jpg");
}

.lw-page-buddy-registration .registration-hero::before {
	background-image: url("../img/photo-student-headphones.jpg");
}

.lw-page-partner-registration .registration-hero::before {
	background-image: url("../img/academy-photo.webp");
	background-position: center 28%;
}

.lw-page-enroll-child .registration-hero::before {
	background-image: url("../img/photo-parent-child.jpg");
}

.lw-page-join-us .hero-editorial,
.lw-page-institutions .institution-hero,
.lw-page-society-advantages .society-hero {
	position: relative;
	overflow: hidden;
}

.registration-hero h1 {
	font-size: clamp(2.4rem, 4.2vw, 4.1rem);
}

.registration-panel {
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

.registration-panel:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: rgba(201, 162, 71, .5);
}

@media (max-width: 760px) {
	.registration-hero { padding: 62px 0 58px; }
}

/* -------------------------------------------------------------------------
   12. LAYOUT STABILITY
   Every content image carries width/height attributes; letting the browser
   derive an aspect-ratio from them keeps lazy-loaded media from reflowing
   the page (which also made in-page anchors land in the wrong place).
   ---------------------------------------------------------------------- */

/* `:where()` keeps this at zero specificity so it acts as a default that any
   component rule (the header logo's fixed height, for one) still beats. */
:where(img[width][height]) {
	height: auto;
}

.material-frame img,
.story-media img,
.deck-band img {
	display: block;
	width: 100%;
	height: auto;
}

.hero-editorial .hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* -------------------------------------------------------------------------
   13. SCROLL BEHAVIOUR
   The inherited `html { scroll-behavior: smooth }` applies to every scroll,
   including history restoration and the jump that happens when a page is
   opened directly on an anchor - where a multi-thousand-pixel animation is
   just a long blank glide. Smoothness is applied per-gesture in site.js
   instead, for scrolls the visitor actually initiated.
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: auto;
}


/* -------------------------------------------------------------------------
   14. GRID CHILDREN THAT ARE NOT PART OF THE SPLIT
   .story-split is a two-column layout; a full-width component dropped in as
   a third child otherwise wraps into a ~370px column and collapses.
   ---------------------------------------------------------------------- */

.story-split > .lesson-25-card,
.story-split > .lesson-25-mini,
.story-split > .notice,
.story-split > .micro-note,
.story-split > .standards-caution {
	grid-column: 1 / -1;
}

.age-year-card > .age-rail {
	max-width: 100%;
}

/* Keep the age rail narrow when there is room for the two-column form. */
@media (min-width: 901px) {
	.age-year-card {
		grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
   15. VERY NARROW SCREENS (≤360px)
   Long button labels and the editorial hero's viewport-unit padding push a
   few pixels past the edge on small handsets.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   CONTAINER WIDTH
   The inherited `.wrap { width: min(1180px, 92vw) }` measures against the
   viewport *including* the scrollbar, so on any platform with a classic
   scrollbar the container is a few pixels wider than the space it actually
   has. Percentages measure the real content box, so use those.
   ---------------------------------------------------------------------- */

.wrap,
body.harvard-square .wrap,
body.harvard-square.index-format .wrap {
	width: min(1180px, 100% - 52px);
	margin-inline: auto;
}

.investor-hero-grid {
	width: min(1320px, 100% - 52px);
	margin-inline: auto;
}

@media (max-width: 900px) {
	.wrap,
	body.harvard-square .wrap,
	body.harvard-square.index-format .wrap {
		width: min(1180px, 100% - 38px);
	}

	.investor-hero-grid {
		width: min(1320px, 100% - 38px);
	}
}

@media (max-width: 560px) {
	.wrap,
	body.harvard-square .wrap,
	body.harvard-square.index-format .wrap {
		width: min(1180px, 100% - 28px);
	}

	.investor-hero-grid {
		width: min(1320px, 100% - 28px);
	}
}

@media (max-width: 360px) {

	.hero-editorial .hero-copy,
	body.harvard-square .hero-editorial .hero-copy {
		padding-left: 16px;
		padding-right: 16px;
	}

	.btn {
		white-space: normal;
		text-align: center;
		padding: 13px 16px;
		font-size: .88rem;
	}

	.actions .btn,
	.hero-actions .btn {
		width: 100%;
	}

	.conversion-rail a,
	.topic-chips span,
	.hero-editorial .hero-proof span {
		white-space: normal;
	}

	.lesson-time {
		font-size: 1.9rem;
	}

	.age-rail .n {
		font-size: 2.2rem;
	}
}


/* -------------------------------------------------------------------------
   16. SMALL-SCREEN BOX PADDING
   Several panels carry 30-40px of horizontal padding, which leaves too
   little room for their content on a narrow handset and pushes the box past
   the viewport edge.
   ---------------------------------------------------------------------- */

@media (max-width: 620px) {
	.commercial-model,
	body.harvard-square .commercial-model,
	.note-strip,
	.role-duo {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.card,
	.card.large,
	.panel,
	.square-card,
	.contact-card,
	.registration-panel,
	.route-card,
	.method-step,
	.age-card,
	.format-card,
	.standards-detail-card,
	.quote-block,
	.humor-strip,
	.two-brand > div,
	.format-choice > div,
	.commercial-model > div,
	.age-body {
		padding-left: 20px;
		padding-right: 20px;
	}

	.card > *,
	.panel > *,
	.contact-card > *,
	.route-card > *,
	.commercial-model > div > *,
	.story-copy > * {
		min-width: 0;
	}

	a[href^="mailto:"],
	.contact-card a,
	.role-panel h3,
	.footer-grid a {
		overflow-wrap: anywhere;
	}
}

/* -------------------------------------------------------------------------
   17. INVESTOR HERO
   `fr` tracks default to `min-width: auto`, so a long non-wrapping kicker
   forces the column wider than the grid itself.
   ---------------------------------------------------------------------- */

.investor-hero-grid {
	grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
}

.investor-hero-grid > * {
	min-width: 0;
}

.investor-kicker {
	white-space: normal;
	overflow-wrap: break-word;
}

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

/* -------------------------------------------------------------------------
   18. "START HERE" NAV BUTTON
   It sits on a navy block, so it must not inherit the dark link colour the
   rest of the nav uses - that combination is unreadable.
   ---------------------------------------------------------------------- */

.primary-nav .path-button,
.primary-nav .path-button.nav-link,
body.harvard-square .primary-nav .path-button.nav-link {
	background: linear-gradient(140deg, var(--navy), var(--navy2));
	color: #fff;
	padding: 0 24px;
	font-weight: 700;
	letter-spacing: .01em;
	transition: background .3s var(--ease), color .3s var(--ease);
}

.primary-nav .path-button span {
	color: var(--gold2);
	margin-left: 7px;
	display: inline-block;
	transition: transform .3s var(--ease-out), color .3s var(--ease);
}

.primary-nav .path-button:hover,
.primary-nav .path-button:focus-visible,
.primary-nav .path-item.menu-open .path-button,
body.harvard-square .primary-nav .path-item.menu-open .path-button.nav-link {
	background: linear-gradient(140deg, var(--gold), var(--gold-bright));
	color: var(--navy);
}

.primary-nav .path-button:hover span,
.primary-nav .path-item.menu-open .path-button span {
	color: var(--navy);
	transform: translateX(4px);
}

.primary-nav .path-button::after {
	display: none;
}

/* In the mobile drawer it is a plain row again. */
@media (max-width: 1180px) {
	.primary-nav .path-button,
	.primary-nav .path-button.nav-link,
	body.harvard-square .primary-nav .path-button.nav-link {
		background: transparent;
		color: var(--navy);
		padding: 0 4px;
	}

	.primary-nav .path-button span {
		color: var(--gold);
	}
}

/* =========================================================================
   19. ACCESSIBLE GOLD
   The brand gold (#c0952f) only reaches ~2.6:1 against the light grounds
   this site uses, so every small gold label failed WCAG AA. Split the token:
   a darkened bronze carries small text, a mid tone carries large display
   text, and the bright brand gold stays for rules, borders and dark grounds
   where it already has contrast to spare.
   ========================================================================= */

:root {
	--gold-ink: #8c6717;   /* small text on light: 4.7-5.2:1  */
	--gold-deep: #a87f22;  /* display text on light: 3.4-3.7:1 */
}

/* --- small labels ------------------------------------------------------- */

.eyebrow,
.kicker,
.ref-kicker,
.track,
.staffing-kicker,
.statement-kicker,
.mini-flow b,
.lesson-25-step .minute,
.investor-kicker,
.format-tag,
.role-tag,
.caption .gold-text,
.micro-note .gold-text {
	color: var(--gold-ink);
}

.inline-link:hover,
.text-arrow:hover,
.route-card:hover b,
.link-card:hover strong,
.two-brand a:hover strong,
.section-nav a:hover {
	color: var(--gold-ink);
}

/* --- display text ------------------------------------------------------- */

.big-statement em,
.age-card .age,
.age,
.gold-text,
.route-no,
.lesson-time span,
.format-choice .big,
.hero-wordmark {
	color: var(--gold-deep);
}

.hero-editorial:not(.dark) .hero-wordmark {
	color: var(--gold-ink);
}

/* --- dark grounds keep the bright brand gold --------------------------- */

.navy-section .eyebrow,
.navy-section .kicker,
.navy-section .gold-text,
.cta-section .eyebrow,
.final-band .eyebrow,
.hero-home .eyebrow,
.hero-editorial.dark .eyebrow,
.hero-editorial.dark .hero-wordmark,
.dark .eyebrow,
.dark .kicker,
.dark .gold-text,
.registration-hero .eyebrow,
.investor-hero .investor-kicker,
.quote-block .kicker,
.rail-label,
.conversion-rail .rail-label,
.age-rail .n,
.mega-eyebrow,
.mega-label,
.footer-framework,
.site-footer h3,
.format-choice .individual .big,
.lesson-25-summary .gold-text {
	color: var(--gold2);
}

.navy-section .age,
.dark .age,
.cta-section .age {
	color: var(--gold2);
}

/* --- decoration is unchanged ------------------------------------------- */

.eyebrow::before {
	background: linear-gradient(90deg, var(--gold), rgba(201, 162, 71, 0));
}

.navy-section .eyebrow::before,
.cta-section .eyebrow::before,
.hero-home .eyebrow::before,
.hero-editorial.dark .eyebrow::before,
.dark .eyebrow::before,
.registration-hero .eyebrow::before {
	background: linear-gradient(90deg, var(--gold2), rgba(229, 207, 152, 0));
}

.checks li::before,
.hero-editorial .hero-proof i {
	color: var(--gold-ink);
	background: var(--gold-ink);
}

.checks li::before {
	background: none;
}

.dark .checks li::before,
.navy-section .checks li::before {
	color: var(--gold2);
}

/* =========================================================================
   20. LIGHT CARDS INSIDE DARK SECTIONS
   `.dark` sets `color: #fff` on the whole section, but several panels inside
   it are white cards. Only the `.teacher` variant re-declared its colours,
   so the plain panel rendered white text on a white card - invisible.
   ========================================================================= */

.dark .role-panel:not(.teacher),
.navy-section .role-panel:not(.teacher),
.dark .card:not(.dark-card),
.navy-section .card:not(.dark-card),
.dark .panel:not(.navy-panel),
.navy-section .panel:not(.navy-panel) {
	color: var(--ink);
}

.dark .role-panel:not(.teacher) h1,
.dark .role-panel:not(.teacher) h2,
.dark .role-panel:not(.teacher) h3,
.dark .role-panel:not(.teacher) h4,
.dark .role-panel:not(.teacher) strong,
.navy-section .role-panel:not(.teacher) h3,
.dark .card:not(.dark-card) h3,
.navy-section .card:not(.dark-card) h3,
.dark .panel:not(.navy-panel) h3,
.navy-section .panel:not(.navy-panel) h3 {
	color: var(--navy);
}

.dark .role-panel:not(.teacher) p,
.dark .role-panel:not(.teacher) li,
.navy-section .role-panel:not(.teacher) p,
.navy-section .role-panel:not(.teacher) li,
.dark .card:not(.dark-card) p,
.navy-section .card:not(.dark-card) p {
	color: #5f6d81;
}

.dark .role-panel:not(.teacher) .eyebrow,
.dark .role-panel:not(.teacher) .kicker,
.navy-section .role-panel:not(.teacher) .eyebrow,
.dark .card:not(.dark-card) .kicker,
.navy-section .card:not(.dark-card) .kicker {
	color: var(--gold-ink);
}

/* The statement band is navy: its kicker needs the light gold, not the ink. */
.statement-band .statement-kicker,
.navy-section .statement-kicker,
.dark .statement-kicker {
	color: var(--gold2);
}

/* Body copy that the inherited sheet set just under AA on tinted grounds. */
.card p,
.section-head p,
.editorial-head p,
.impact-cell p,
.lesson-25-note,
.micro-note,
.story-copy p,
.route-card p,
.method-step p,
.age-card p,
.age-body p,
.module-index span,
.mini-flow span,
.academic-reference-grid p,
.standards-detail-card p,
.two-brand p,
.lesson-25-step > span:last-child,
.lesson-25-head p {
	color: var(--muted);
}

/* Two more white cards that inherited their section's light-on-dark colours:
   the partner verification flow steps and the governance guardrail grid. */

.flow-steps > div,
.gov-guardrails > div {
	color: var(--ink);
}

.flow-steps > div strong,
.gov-guardrails > div h3,
.navy-section .gov-guardrails > div h3,
.gov-guardrails > div h2 {
	color: var(--navy);
}

.flow-steps > div p,
.gov-guardrails > div p,
.navy-section .gov-guardrails > div p {
	color: var(--muted);
}

.flow-steps > div span,
.gov-guardrails > div .kicker {
	color: var(--gold-ink);
}


/* =========================================================================
   21. LABEL COLOUR BY GROUND
   Gold labels need two different values: a darkened bronze on light grounds
   (AA at small sizes) and the bright brand gold on navy. Rather than listing
   every dark container next to every label rule, the containers redefine an
   inherited custom property, so a label picks up the right value at any
   nesting depth.
   ========================================================================= */

:root {
	--gold-label: var(--gold-ink);
	--gold-display: var(--gold-deep);
	--soft-copy: var(--muted);
}

.age-rail,
.bluewash-dark,
.burning-house .fire,
.careers-cta,
.community-statement,
.compare-col.highlight,
.confidence-explain,
.conversion-rail,
.cta-section,
.dark,
.dark-card,
.editorial-section.dark,
.final-band,
.fire-test,
.format-card,
.format-choice .individual,
.formula,
.header-utility,
.hero-editorial.dark,
.hero-home,
.investor-hero,
.investor-number-band,
.lesson-25-summary,
.mega-action-card,
.mega-highlight,
.mega-intro,
.mock-dashboard,
.navy-panel,
.navy-section,
.platform-side,
.quote-block,
.registration-hero,
.role-panel.teacher,
.school-partner-callout .question-side,
.seven-team-lead,
.seven-team-rooms,
.site-footer,
.society-hero,
.staffing-format.dark,
.statement-band,
.student-id-card,
.teacher-cap,
.value-hero,
.voice-step,
body.harvard-square .workforce-hero,
body.harvard-square.index-format .cta-section,
body.harvard-square.index-format .editorial-section.dark,
body.harvard-square.index-format .final-band,
body.harvard-square.index-format .header-utility,
body.harvard-square.index-format .hero-editorial.dark .hero-copy,
body.harvard-square.index-format .mega-intro,
body.harvard-square.index-format .navy-section,
body.harvard-square.index-format .site-footer {
	--gold-label: var(--gold2);
	--gold-display: var(--gold2);
	--soft-copy: #c3d1e4;
}

/* Light cards sitting inside those dark containers switch back. */
.role-panel:not(.teacher),
.flow-steps > div,
.gov-guardrails > div,
.card:not(.dark-card),
.panel:not(.navy-panel),
.contact-card,
.registration-panel,
.square-card,
.material-frame,
.lesson-25-card,
.age-year-card .age-body {
	--gold-label: var(--gold-ink);
	--gold-display: var(--gold-deep);
	--soft-copy: var(--muted);
}

.eyebrow,
.kicker,
.ref-kicker,
.track,
.staffing-kicker,
.statement-kicker,
.investor-kicker,
.rail-label,
.mega-eyebrow,
.mega-label,
.format-tag,
.role-tag,
.mini-flow b,
.lesson-25-step .minute,
.flow-steps span,
.gv-year .gv-age,
.path-grid span,
.start-card span,
.partner-q span,
.commercial-model .share,
.impact-line b,
.six-room-grid b,
.age-timeline small,
.num,
.checks li::before,
.eco-node span,
.voice-arrow,
.career-path-line b,
.phase-table td:first-child {
	color: var(--gold-label);
}

.age,
.gold-text,
.big-statement em,
.route-no,
.hero-wordmark,
.lesson-time span,
.format-choice .big,
.age-rail .n,
.logo-main em,
.id-brand em {
	color: var(--gold-display);
}

/* -------------------------------------------------------------------------
   22. REMAINING GROUND MISMATCHES
   ---------------------------------------------------------------------- */

/* Note: the inherited sheet already scopes `strong` colours per block
   (.stat-ribbon, .exchange-ladder, .community-question and friends each
   declare their own), so there is deliberately no blanket rule here - one
   would out-specify all of them and repaint white cards' text white. */

/* The partner verification steps are white cards on a light section. */
body.harvard-square .flow-steps > div p,
body.harvard-square .flow-steps > div > p {
	color: var(--muted);
}

body.harvard-square .flow-steps > div strong {
	color: var(--navy);
}

/* The investor closing band is a light gold panel. */
.investor-cta,
.investor-cta .wrap {
	--gold-label: var(--gold-ink);
	--gold-display: var(--gold-deep);
	--soft-copy: var(--muted);
}

.investor-cta .eyebrow,
.investor-cta .kicker {
	color: var(--gold-ink);
}

/* Label rules must beat the inherited two-class selectors. */
body.harvard-square .gv-year .gv-age,
body.harvard-square .staffing-format .format-tag,
body.harvard-square .partner-q span,
body.harvard-square .commercial-model .share,
body.harvard-square .flow-steps span,
body.harvard-square .start-card span,
body.harvard-square .impact-line b,
body.harvard-square .career-path-line b,
body.harvard-square .age-timeline small,
body.harvard-square .six-room-grid b,
body.harvard-square .path-grid span,
body.harvard-square .eco-node span {
	color: var(--gold-label);
}

/* The zoom hint sits on its own dark pill. */
.doc-zoom-note {
	color: var(--gold2) !important;
}

/* The investor closing band is a pale gold panel: its labels need a deeper
   bronze and its small print a darker grey than the white-ground values. */
.investor-cta .eyebrow,
.investor-cta .kicker,
body.harvard-square .investor-cta .eyebrow {
	color: #7a5a13;
}

.investor-cta .investor-disclaimer,
body.harvard-square .investor-cta .investor-disclaimer {
	color: #545d69;
}

/* Bluewash sections are a touch darker than white, so body copy there needs
   a little more depth to stay at AA. */
.bluewash .id-copy p,
body.harvard-square .bluewash .id-copy p,
.editorial-section.bluewash .id-copy p {
	color: #5a6780;
}

/* Two blocks that are translucent (or transparent) over a navy section but
   whose headline text was coloured navy - invisible as shipped. Scoped to
   the dark ground only, so the light-section versions keep their navy. */

.editorial-section.dark .community-question strong,
.navy-section .community-question strong,
.editorial-section.dark .career-path-line strong,
.navy-section .career-path-line strong {
	color: #fff;
}

.editorial-section.dark .community-question p,
.navy-section .community-question p,
.editorial-section.dark .career-path-line p,
.navy-section .career-path-line p {
	color: #c3d1e4;
}

/* Editor content appended below a designed page. */
.lw-editor-block .editorial-copy > *:first-child {
	margin-top: 0;
}

.lw-editor-block .editorial-copy p,
.lw-editor-block .editorial-copy li {
	color: var(--ink);
	max-width: 74ch;
}

.lw-editor-block .editorial-copy a {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-underline-offset: 3px;
}

.lw-editor-block .editorial-copy a:hover {
	color: var(--gold-ink);
}

/* =========================================================================
   23. POLICY & TERMS DOCUMENTS
   Long-form legal reading: a calm hero, a sticky contents rail, and prose
   measured for comfortable reading rather than the marketing grid.
   ========================================================================= */

.legal-hero {
	background: linear-gradient(160deg, var(--navy-ink), var(--navy) 58%, var(--navy2));
	color: #fff;
	padding: 78px 0 66px;
	position: relative;
	overflow: hidden;
}

.legal-hero::after {
	content: "";
	position: absolute;
	right: -190px;
	top: -200px;
	width: 560px;
	height: 560px;
	border: 1.5px solid rgba(201, 162, 71, .22);
	border-radius: 50%;
	pointer-events: none;
}

.legal-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(760px 420px at 88% 8%, rgba(201, 162, 71, .14), transparent 66%);
	pointer-events: none;
}

.legal-hero .wrap {
	position: relative;
	z-index: 1;
}

.legal-hero h1 {
	color: #fff;
	font-size: clamp(2.1rem, 3.9vw, 3.6rem);
	max-width: 20ch;
}

.legal-hero .eyebrow {
	color: var(--gold2);
}

.legal-updated {
	margin-top: 16px;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--gold2);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px;
	border: 1px solid rgba(229, 207, 152, .38);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
}

.legal-updated::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold2);
	flex: 0 0 auto;
}

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

.legal-hero-actions .btn.outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
}

.legal-hero-actions .btn.outline::before { background: #fff; }
.legal-hero-actions .btn.outline:hover { color: var(--navy); border-color: #fff; }

.legal-hero-actions .btn.navy {
	background: var(--gold-bright);
	border-color: var(--gold-bright);
	color: var(--navy);
	overflow-wrap: anywhere;
}

.legal-hero-actions .btn.navy::before { background: #fff; }

/* --- layout ------------------------------------------------------------ */

.legal-body {
	padding: 64px 0 88px;
	background: #fff;
}

.legal-grid {
	display: grid;
	grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* --- contents rail ------------------------------------------------------ */

.legal-toc-inner {
	position: sticky;
	top: calc(var(--lw-header-h) + 22px);
	max-height: calc(100vh - var(--lw-header-h) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 24px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(170deg, var(--cream), #fff);
	scrollbar-width: thin;
}

.legal-toc .kicker {
	margin-bottom: 14px;
}

.legal-toc nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.legal-toc a {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 9px;
	align-items: baseline;
	padding: 8px 10px;
	border-radius: 9px;
	font-size: .85rem;
	line-height: 1.35;
	color: #4f5d73;
	transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}

.legal-toc a span {
	font-family: var(--serif);
	font-size: .78rem;
	font-weight: 700;
	color: var(--gold-ink);
}

.legal-toc a:hover {
	background: #fff;
	color: var(--navy);
	box-shadow: -3px 0 0 0 var(--gold) inset;
}

.legal-toc a.is-active {
	background: var(--navy);
	color: #fff;
}

.legal-toc a.is-active span {
	color: var(--gold2);
}

/* --- prose -------------------------------------------------------------- */

.legal-prose {
	max-width: 76ch;
	font-size: 1.02rem;
	line-height: 1.75;
	color: #38455a;
}

.legal-prose > p:first-of-type {
	font-size: 1.12rem;
	line-height: 1.7;
	color: var(--ink);
}

.legal-prose h2 {
	font-size: clamp(1.32rem, 2.1vw, 1.72rem);
	line-height: 1.22;
	margin: 2.6rem 0 .5rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--lw-header-h) + 26px);
}

.legal-prose > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-prose h3 {
	font-size: 1.1rem;
	margin: 1.7rem 0 .35rem;
	color: var(--navy);
}

.legal-prose h4 {
	font-family: var(--sans);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin: 1.5rem 0 .3rem;
}

.legal-prose p {
	margin: .85rem 0 0;
}

.legal-prose strong {
	color: var(--navy);
	font-weight: 700;
}

.legal-prose a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.legal-prose a:hover {
	color: var(--gold-ink);
}

.legal-prose ul,
.legal-prose ol {
	margin: 1rem 0 0;
	padding-left: 0;
	list-style: none;
}

.legal-prose ol {
	counter-reset: lw-ol;
}

.legal-prose li {
	position: relative;
	padding-left: 28px;
	margin: .6rem 0;
}

.legal-prose ul > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold);
}

.legal-prose ol > li {
	counter-increment: lw-ol;
}

.legal-prose ol > li::before {
	content: counter(lw-ol);
	position: absolute;
	left: 0;
	top: .04em;
	font-family: var(--serif);
	font-size: .86rem;
	font-weight: 700;
	color: var(--gold-ink);
}

/* Inline icons that shipped with the safeguarding documents. */
.legal-prose li > svg,
.legal-prose p > svg {
	width: 17px;
	height: 17px;
	vertical-align: -3px;
	margin-right: 7px;
	color: var(--gold-ink);
	flex: 0 0 auto;
}

.legal-prose table {
	width: 100%;
	margin: 1.5rem 0 0;
	border-collapse: collapse;
	font-size: .93rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.legal-prose thead th,
.legal-prose tr:first-child td strong {
	background: var(--cream);
}

.legal-prose th,
.legal-prose td {
	padding: 12px 15px;
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.legal-prose th:last-child,
.legal-prose td:last-child { border-right: 0; }

.legal-prose tr:last-child td { border-bottom: 0; }

.legal-prose th {
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--navy);
	background: var(--cream);
}

.legal-prose blockquote {
	margin: 1.5rem 0 0;
	padding: 20px 24px;
	border-left: 3px solid var(--gold);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--soft);
	font-style: normal;
	font-family: var(--sans);
	font-size: .97rem;
	color: #4b5870;
}

.legal-prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.2rem 0 0;
}

.legal-footer-note {
	border-top: 1px solid var(--line);
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1000px) {
	.legal-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.legal-toc-inner {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.legal-toc nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 2px;
	}

	.legal-prose {
		max-width: none;
	}
}

@media (max-width: 760px) {
	.legal-hero { padding: 54px 0 46px; }
	.legal-body { padding: 40px 0 60px; }
	.legal-prose { font-size: .98rem; }
	.legal-prose h2 { margin-top: 2rem; padding-top: 1.2rem; }
	.legal-prose table { display: block; overflow-x: auto; }
	.legal-hero-actions .btn { width: 100%; }
}

/* Document-information cells lifted out of the source markup. */
.legal-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
	gap: 1px;
	margin: 1.6rem 0 .4rem;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.legal-meta > div {
	background: linear-gradient(170deg, var(--cream), #fff);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.legal-meta-label {
	font-family: var(--sans);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.legal-meta-value {
	font-size: .95rem;
	font-weight: 600;
	color: var(--navy);
	overflow-wrap: anywhere;
}

/* Items that ship their own check icon should not also get a bullet dot. */
.legal-prose li:has(> svg)::before {
	display: none;
}

.legal-prose li:has(> svg) {
	padding-left: 26px;
}

.legal-prose li > svg:first-child {
	position: absolute;
	left: 0;
	top: .28em;
	margin-right: 0;
}

.legal-meta-value {
	font-size: .92rem;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

/* =========================================================================
   24. VERTICAL RHYTHM
   The inherited sheet used seven to eleven different section paddings per
   page (82px here, 100px there, 54px elsewhere). One fluid scale makes the
   page read as a single document and removes the uneven band heights.
   ========================================================================= */

:root {
	--space-3xs: 6px;
	--space-2xs: 10px;
	--space-xs: 14px;
	--space-s: 18px;
	--space-m: 26px;
	--space-l: 38px;
	--space-xl: 56px;

	--band: clamp(56px, 6.4vw, 96px);      /* standard section */
	--band-tight: clamp(40px, 4.2vw, 62px); /* ribbons and notes */
	--band-loose: clamp(68px, 7.6vw, 116px);/* feature moments */
}

/* Sections read their padding from a variable, so a hero can opt out with a
   single declaration instead of fighting selector specificity. */
main > section,
body.harvard-square main > section,
body.harvard-square.index-format main > section,
.editorial-section,
body.harvard-square .editorial-section,
body.harvard-square.index-format .editorial-section {
	padding-top: var(--section-pad, var(--band));
	padding-bottom: var(--section-pad, var(--band));
}

/* Bands that are decoration or a single line of links stay tight. */
.conversion-rail { --section-pad: var(--space-s); }

.academic-reference-band,
.deck-band,
.legal-footer-note { --section-pad: var(--band-tight); }

.section-nav { --section-pad: 0px; }

/* Heroes own their vertical proportions. */
.hero-editorial,
.hero-home,
.page-hero,
.registration-hero,
.investor-hero,
.institution-hero,
.society-hero,
.careers-hero,
.workforce-hero,
.legal-hero,
.hero,
[class*="-hero"] {
	--section-pad: 0px;
}

/* ...and the ones that are a padded band rather than a full-bleed split put
   their own value back. */
.hero-home { --section-pad: clamp(58px, 6vw, 92px); }
.page-hero,
.institution-hero,
.society-hero,
.careers-hero,
.workforce-hero { --section-pad: clamp(52px, 5.4vw, 80px); }
.legal-hero { --section-pad: clamp(52px, 5.2vw, 76px); }
.registration-hero { --section-pad: clamp(58px, 6vw, 92px); }
.investor-hero { --section-pad: clamp(54px, 5.6vw, 84px); }

/* Consistent distance from a section head to the content it introduces. */
.section-head,
body.harvard-square .section-head {
	margin-bottom: var(--space-l);
}

.editorial-head,
body.harvard-square .editorial-head,
body.harvard-square.index-format .editorial-head {
	margin-bottom: var(--space-xl);
}

/* One gap scale for card grids. */
.grid,
.home-nav-grid,
.ages-grid,
.formats,
.two-brand,
.module-index,
.format-choice,
.standards-detail-grid,
.method-line,
.mini-flow,
.age-year-list {
	gap: var(--space-s);
}

@media (max-width: 760px) {
	.grid,
	.home-nav-grid,
	.ages-grid,
	.formats,
	.two-brand,
	.module-index,
	.format-choice,
	.standards-detail-grid,
	.method-line,
	.mini-flow,
	.age-year-list {
		gap: var(--space-xs);
	}
}

/* =========================================================================
   25. GRID BALANCE
   Five skills in a three-column grid leaves two cards stranded on their own
   row. Flex with `flex-grow` lets the final row expand to the full width, so
   these ribbons stay balanced at every viewport without hand-tuned counts.
   ========================================================================= */

.home-nav-grid,
.ages-grid,
.formats,
.method-line,
.mini-flow,
.module-index,
.skill-grid,
.impact-grid,
.lesson-25-flow,
.standards-detail-grid,
body.harvard-square .skill-grid,
body.harvard-square .voice-ladder,
body.harvard-square .pathway-river,
body.harvard-square .flow-steps,
body.harvard-square .impact-line {
	display: flex;
	flex-wrap: wrap;
}

.home-nav-grid > *   { flex: 1 1 272px; min-width: 0; }
.ages-grid > *       { flex: 1 1 214px; min-width: 0; }
.formats > *         { flex: 1 1 258px; min-width: 0; }
.method-line > *     { flex: 1 1 176px; min-width: 0; }
.mini-flow > *       { flex: 1 1 146px; min-width: 0; }
.module-index > *    { flex: 1 1 216px; min-width: 0; }
.standards-detail-grid > * { flex: 1 1 298px; min-width: 0; }

body.harvard-square .skill-grid > *    { flex: 1 1 236px; min-width: 0; }
body.harvard-square .voice-ladder > *  { flex: 1 1 168px; min-width: 0; }
body.harvard-square .pathway-river > * { flex: 1 1 210px; min-width: 0; }
body.harvard-square .flow-steps > *    { flex: 1 1 164px; min-width: 0; }

/* Cell ribbons keep their dividing rules while flexing. */
.impact-grid,
body.harvard-square .impact-line {
	gap: 0;
}

.impact-grid > *,
body.harvard-square .impact-line > * {
	flex: 1 1 224px;
	min-width: 0;
}

.lesson-25-flow {
	gap: 0;
}

.lesson-25-flow > * {
	flex: 1 1 172px;
	min-width: 0;
}

/* The home hero proof ribbon: five cells that must never strand one alone. */
.hero-home .hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.hero-home .hero-proof > div {
	flex: 1 1 178px;
	min-width: 0;
}

/* The five-step ribbon should hold all five across, or stack evenly - never
   four and a lonely fifth. Give the flow column more room and a basis that
   fits five tracks. */
.lesson-25-mini .wrap {
	grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
	gap: 46px;
}

.mini-flow > * { flex: 1 1 118px; }

@media (max-width: 1240px) {
	.mini-flow > * { flex: 1 1 128px; }
}

@media (max-width: 1100px) {
	.lesson-25-mini .wrap { grid-template-columns: 1fr; }
	.mini-flow > * { flex: 1 1 152px; }
}

/* =========================================================================
   26. ICON SYSTEM
   Stroke icons delivered as CSS masks, so they inherit `currentColor` and no
   content file has to be touched to add one. Each icon sits in a gold badge
   above the card title.
   ========================================================================= */

.lw-ico::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.lw-i-school { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%2022v-4a2%202%200%201%200-4%200v4M18%2010v12M6%2010v12M2%2010l10-7%2010%207M9%206h6%22/%3E%3C/svg%3E"); }
.lw-i-landmark { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2022h18M6%2018V11M10%2018V11M14%2018V11M18%2018V11M2%208l10-5%2010%205v3H2z%22/%3E%3C/svg%3E"); }
.lw-i-family { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208ZM3%2021v-2a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v2M17%2011a3%203%200%201%200%200-6M21%2021v-2a4%204%200%200%200-3-3.85%22/%3E%3C/svg%3E"); }
.lw-i-teacher { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%209%2012%204%202%209l10%205%2010-5ZM6%2011.5V17c0%201.5%203%203%206%203s6-1.5%206-3v-5.5%22/%3E%3C/svg%3E"); }
.lw-i-globe { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020ZM2%2012h20M12%202a15%2015%200%200%201%200%2020a15%2015%200%200%201%200-20%22/%3E%3C/svg%3E"); }
.lw-i-briefcase { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2ZM16%207V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v2M2%2012h20%22/%3E%3C/svg%3E"); }
.lw-i-message { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%2012a8%208%200%200%201-8%208H7l-5%203%201.5-5A8%208%200%201%201%2021%2012Z%22/%3E%3C/svg%3E"); }
.lw-i-shield { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010ZM9%2012l2%202%204-4%22/%3E%3C/svg%3E"); }
.lw-i-book { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M2%204h6a3%203%200%200%201%203%203v13a3%203%200%200%200-3-2H2ZM22%204h-6a3%203%200%200%200-3%203v13a3%203%200%200%201%203-2h6Z%22/%3E%3C/svg%3E"); }
.lw-i-award { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2015a6%206%200%201%200%200-12%206%206%200%200%200%200%2012ZM8.2%2013.9%207%2022l5-3%205%203-1.2-8.1%22/%3E%3C/svg%3E"); }
.lw-i-chart { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%203v18h18M7%2015l4-5%203%203%205-7%22/%3E%3C/svg%3E"); }
.lw-i-search { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M11%2019a8%208%200%201%200%200-16%208%208%200%200%200%200%2016ZM21%2021l-4.3-4.3%22/%3E%3C/svg%3E"); }
.lw-i-calendar { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%202v4M16%202v4M3%2010h18M5%204h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Z%22/%3E%3C/svg%3E"); }
.lw-i-mail { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2ZM2%207l10%206%2010-6%22/%3E%3C/svg%3E"); }
.lw-i-spark { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%202v6M12%2016v6M2%2012h6M16%2012h6M5%205l4%204M15%2015l4%204M19%205l-4%204M9%2015l-4%204%22/%3E%3C/svg%3E"); }

/* --- badge shell --------------------------------------------------------
   The badge sits above the title rather than beside it: squeezing a heading
   into the space left over by a floating icon forced two-word titles onto
   two lines. `::before` is the shell (it precedes the content, so it lays
   out first) and `::after` is the glyph painted over it.
   ---------------------------------------------------------------------- */

.route-card,
.contact-card,
.start-card {
	position: relative;
	--lw-badge-x: 30px;
	--lw-badge-y: 32px;
}

.contact-card { --lw-badge-x: 30px; --lw-badge-y: 30px; }

.route-card::before,
.contact-card::before,
.start-card::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 14px;
	background-image: linear-gradient(145deg, rgba(201, 162, 71, .24), rgba(201, 162, 71, .08));
	border: 1px solid rgba(201, 162, 71, .42);
	box-shadow: 0 6px 16px -10px rgba(140, 103, 23, .5);
	transition: background-image .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease-out);
	flex: 0 0 auto;
}

.route-card::after,
.contact-card::after,
.start-card::after {
	content: "";
	position: absolute;
	top: calc(var(--lw-badge-y) + 11px);
	left: calc(var(--lw-badge-x) + 11px);
	z-index: 1;
	width: 24px;
	height: 24px;
	background-color: var(--gold-ink);
	background-image: none;
	border: 0;
	-webkit-mask-image: var(--lw-icon, none);
	mask-image: var(--lw-icon, none);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color .35s var(--ease), transform .4s var(--ease-out);
	pointer-events: none;
}

.route-card:hover::before,
.contact-card:hover::before,
.start-card:hover::before {
	background-image: linear-gradient(145deg, var(--gold), var(--gold-bright));
	border-color: var(--gold-bright);
	transform: translateY(-2px) rotate(-4deg);
}

.route-card:hover::after,
.contact-card:hover::after,
.start-card:hover::after {
	background-color: var(--navy);
	transform: translateY(-2px) rotate(-4deg);
}

/* The number sits beside the badge on route cards. */
.route-card .route-no {
	position: absolute;
	top: calc(var(--lw-badge-y) + 14px);
	left: calc(var(--lw-badge-x) + 62px);
}

.route-card h3,
.contact-card h3,
.start-card h3 {
	padding-right: 0;
}

/* --- assignments -------------------------------------------------------- */

.home-nav-grid .route-card:nth-child(1) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%2022v-4a2%202%200%201%200-4%200v4M18%2010v12M6%2010v12M2%2010l10-7%2010%207M9%206h6%22/%3E%3C/svg%3E"); }
.home-nav-grid .route-card:nth-child(2) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2022h18M6%2018V11M10%2018V11M14%2018V11M18%2018V11M2%208l10-5%2010%205v3H2z%22/%3E%3C/svg%3E"); }
.home-nav-grid .route-card:nth-child(3) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208ZM3%2021v-2a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v2M17%2011a3%203%200%201%200%200-6M21%2021v-2a4%204%200%200%200-3-3.85%22/%3E%3C/svg%3E"); }
.home-nav-grid .route-card:nth-child(4) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%209%2012%204%202%209l10%205%2010-5ZM6%2011.5V17c0%201.5%203%203%206%203s6-1.5%206-3v-5.5%22/%3E%3C/svg%3E"); }
.contact-grid .contact-card:nth-child(1) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208ZM3%2021v-2a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v2M17%2011a3%203%200%201%200%200-6M21%2021v-2a4%204%200%200%200-3-3.85%22/%3E%3C/svg%3E"); }
.contact-grid .contact-card:nth-child(2) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%209%2012%204%202%209l10%205%2010-5ZM6%2011.5V17c0%201.5%203%203%206%203s6-1.5%206-3v-5.5%22/%3E%3C/svg%3E"); }
.contact-grid .contact-card:nth-child(3) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%202v6M12%2016v6M2%2012h6M16%2012h6M5%205l4%204M15%2015l4%204M19%205l-4%204M9%2015l-4%204%22/%3E%3C/svg%3E"); }
.contact-grid .contact-card:nth-child(4) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%2022v-4a2%202%200%201%200-4%200v4M18%2010v12M6%2010v12M2%2010l10-7%2010%207M9%206h6%22/%3E%3C/svg%3E"); }
.contact-grid .contact-card:nth-child(5) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M11%2019a8%208%200%201%200%200-16%208%208%200%200%200%200%2016ZM21%2021l-4.3-4.3%22/%3E%3C/svg%3E"); }
.contact-grid .contact-card:nth-child(6) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%204h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2ZM2%207l10%206%2010-6%22/%3E%3C/svg%3E"); }
.start-grid .start-card:nth-child(1) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208ZM3%2021v-2a5%205%200%200%201%205-5h2a5%205%200%200%201%205%205v2M17%2011a3%203%200%201%200%200-6M21%2021v-2a4%204%200%200%200-3-3.85%22/%3E%3C/svg%3E"); }
.start-grid .start-card:nth-child(2) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%209%2012%204%202%209l10%205%2010-5ZM6%2011.5V17c0%201.5%203%203%206%203s6-1.5%206-3v-5.5%22/%3E%3C/svg%3E"); }
.start-grid .start-card:nth-child(3) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%202v6M12%2016v6M2%2012h6M16%2012h6M5%205l4%204M15%2015l4%204M19%205l-4%204M9%2015l-4%204%22/%3E%3C/svg%3E"); }
.start-grid .start-card:nth-child(4) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%2022v-4a2%202%200%201%200-4%200v4M18%2010v12M6%2010v12M2%2010l10-7%2010%207M9%206h6%22/%3E%3C/svg%3E"); }
.start-grid .start-card:nth-child(5) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2022h18M6%2018V11M10%2018V11M14%2018V11M18%2018V11M2%208l10-5%2010%205v3H2z%22/%3E%3C/svg%3E"); }
.start-grid .start-card:nth-child(6) { --lw-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020ZM2%2012h20M12%202a15%2015%200%200%201%200%2020a15%2015%200%200%201%200-20%22/%3E%3C/svg%3E"); }

/* On the Start page the cards are narrow; drop the badge below 520px. */
@media (max-width: 560px) {
	.route-card::before,
	.contact-card::before,
	.start-card::before { width: 40px; height: 40px; margin-bottom: 14px; }

	.route-card, .contact-card, .start-card { --lw-badge-x: 20px; --lw-badge-y: 20px; }

	.route-card::after,
	.contact-card::after,
	.start-card::after { width: 21px; height: 21px; top: calc(var(--lw-badge-y) + 10px); left: calc(var(--lw-badge-x) + 10px); }

	.route-card .route-no { top: calc(var(--lw-badge-y) + 12px); left: calc(var(--lw-badge-x) + 54px); }
}



/* =========================================================================
   27. SECTION TEXTURE
   A whisper of pattern so the light bands do not read as flat blocks. Kept
   under 7% opacity - it should register as paper, not decoration.
   ========================================================================= */

.soft,
.editorial-section.soft,
body.harvard-square .soft {
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2222%22%20height=%2222%22%20viewBox=%220%200%2022%2022%22%3E%3Ccircle%20cx=%222%22%20cy=%222%22%20r=%221%22%20fill=%22%25230b1d3a%22%20fill-opacity=%220.05%22/%3E%3C/svg%3E");
	background-size: 22px 22px;
}

.cream,
.editorial-section.cream,
body.harvard-square .cream {
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2228%22%20height=%2228%22%20viewBox=%220%200%2028%2028%22%3E%3Cpath%20d=%22M0%2028%20L28%200%22%20stroke=%22%2523c0952f%22%20stroke-opacity=%220.07%22%20stroke-width=%221%22/%3E%3C/svg%3E");
	background-size: 28px 28px;
}

.soft > *,
.cream > * {
	position: relative;
	z-index: 1;
}

/* The arc lifted from the wordmark, used as a quiet anchor on key bands. */
.academic-key-note,
.legal-footer-note,
.lesson-25-mini {
	position: relative;
	overflow: hidden;
}

.lesson-25-mini::after {
	content: "";
	position: absolute;
	left: -140px;
	bottom: -260px;
	width: 470px;
	height: 470px;
	border: 1.5px solid rgba(201, 162, 71, .18);
	border-radius: 50%;
	pointer-events: none;
}

.legal-footer-note::after {
	content: "";
	position: absolute;
	right: -170px;
	top: -230px;
	width: 480px;
	height: 480px;
	border: 1.5px solid rgba(201, 162, 71, .16);
	border-radius: 50%;
	pointer-events: none;
}

/* =========================================================================
   29. MICRO-INTERACTIONS
   ========================================================================= */

/* Arrow-bearing links advance on hover. */
.mega-cta,
.text-arrow,
.inline-link,
.role-links a,
.two-brand a strong,
.route-card b,
.card a strong,
.link-card strong {
	transition: color .25s var(--ease), transform .32s var(--ease-out);
}

.inline-link:hover,
.role-links a:hover,
.mega-cta:hover {
	transform: translateX(3px);
}

/* Section sub-navigation gets a pill on hover. */
.section-nav a {
	position: relative;
	transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease-out);
}

.section-nav a:hover {
	transform: translateY(-1px);
}

/* Footer columns lift their links a touch. */
.site-footer a {
	position: relative;
}

.site-footer a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--gold2);
	transition: right .32s var(--ease-out);
}

.site-footer a:hover::after {
	right: 0;
}

/* Framed graphics breathe on hover. */
.material-frame {
	overflow: hidden;
}

.material-frame img {
	transition: transform .7s var(--ease-out);
}

.material-frame:hover img {
	transform: scale(1.018);
}

/* Chips and pills respond. */
.topic-chips span,
.gv-topics span,
.pill-line span,
.hero-editorial .hero-proof span {
	transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease-out), color .25s var(--ease);
}

.gv-topics span:hover,
.hero-editorial .hero-proof span:hover {
	border-color: var(--gold);
	transform: translateY(-2px);
}

/* Quiet focus ring that still reads on navy. */
.navy-section a:focus-visible,
.cta-section a:focus-visible,
.site-footer a:focus-visible,
.hero-home a:focus-visible,
.legal-hero a:focus-visible {
	outline-color: var(--gold2);
}

/* Hero photography: bias the crop toward faces. */
.hero-editorial .hero-media img {
	object-position: center 32%;
}

/* -------------------------------------------------------------------------
   30. CONTENTS RAIL ON SMALL SCREENS
   Grid items default to `min-width: auto`, so the rail's own grid was sizing
   to its longest link and pushing past the viewport. Cap it, and keep the
   43-entry lists from burying the document on a phone.
   ---------------------------------------------------------------------- */

.legal-toc,
.legal-toc-inner,
.legal-toc nav,
.legal-prose {
	min-width: 0;
}

.legal-toc a {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
	.legal-toc nav {
		grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	}

	.legal-toc-inner {
		max-height: 268px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 18px 16px;
	}

	.legal-toc-inner::after {
		content: "";
		position: sticky;
		bottom: -18px;
		display: block;
		height: 26px;
		margin: 0 -16px -18px;
		background: linear-gradient(to top, var(--cream), rgba(250, 247, 241, 0));
		pointer-events: none;
	}

	.legal-toc .kicker {
		position: sticky;
		top: -18px;
		z-index: 1;
		margin: -18px -16px 10px;
		padding: 14px 16px 10px;
		background: linear-gradient(to bottom, var(--cream) 70%, rgba(250, 247, 241, 0));
	}
}

@media (max-width: 560px) {
	.legal-toc nav { grid-template-columns: 1fr; }
	.legal-hero h1 { font-size: clamp(1.8rem, 7.4vw, 2.4rem); }
}

/* -------------------------------------------------------------------------
   31. FIVE-ITEM RIBBONS AT MID WIDTHS
   Five cells across a tablet break 4 + 1, stranding the last one on a row of
   its own. Step them down to an even 2 + 2 + 1 (bordered ribbons) or 3 + 2
   (card ribbons) instead of letting the flex basis decide.
   ---------------------------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 621px) {
	.hero-home .hero-proof > div { flex: 1 1 44%; }
	.mini-flow > * { flex: 1 1 29%; }
	.method-line > * { flex: 1 1 29%; }
	.lesson-25-flow > * { flex: 1 1 29%; }
}

@media (max-width: 620px) {
	.hero-home .hero-proof > div,
	.mini-flow > *,
	.method-line > *,
	.lesson-25-flow > * { flex: 1 1 100%; }
}

/* The three-part reference band keeps equal columns or stacks cleanly. */
.academic-reference-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.academic-reference-grid > div {
	flex: 1 1 248px;
	min-width: 0;
}

@media (max-width: 900px) {
	.academic-reference-grid > div { flex: 1 1 100%; }
}

/* Bordered ribbons: rules should follow the wrap, not the original columns. */
.hero-home .hero-proof > div,
.impact-grid > *,
.lesson-25-flow > * {
	border-right-width: 1px;
	border-right-style: solid;
}

@media (max-width: 1180px) {
	.hero-home .hero-proof > div:nth-child(2n),
	.impact-grid > *:nth-child(2n) { border-right: 0; }
}

/* =========================================================================
   32. ONE HEADER ON EVERY PAGE
   The inherited sheet scoped a whole second chrome treatment to the home
   page (`body.harvard-square.index-format`): a different bar height,
   different nav typography, a different utility bar, a different mega menu
   and square buttons. Navigating away from home visibly changed the header.
   These rules state one treatment at a specificity that beats both.
   ========================================================================= */

body.harvard-square .site-header,
body.harvard-square.index-format .site-header {
	background: rgba(255, 255, 255, .97);
	border-top: 0;
	border-bottom: 1px solid rgba(11, 29, 58, .1);
	box-shadow: none;
	transition: box-shadow .35s var(--ease), background .35s var(--ease);
}

body.harvard-square .site-header.is-stuck,
body.harvard-square.index-format .site-header.is-stuck {
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 14px 40px -22px rgba(11, 29, 58, .5);
}

/* The utility bar: one gradient everywhere. */
body.harvard-square .header-utility,
body.harvard-square.index-format .header-utility {
	background: linear-gradient(100deg, var(--navy-ink), var(--navy) 46%, var(--navy2));
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	font-family: var(--sans);
}

/* One bar height. */
body.harvard-square .topbar,
body.harvard-square.index-format .topbar {
	min-height: 90px;
}

body.harvard-square .site-header.is-stuck .topbar,
body.harvard-square.index-format .site-header.is-stuck .topbar {
	min-height: 74px;
}

/* One nav type treatment - the uppercase institutional one. */
body.harvard-square .primary-nav .nav-link,
body.harvard-square.index-format .primary-nav .nav-link {
	min-height: 90px;
	font-family: var(--sans);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .055em;
	text-transform: uppercase;
	color: #2b3545;
}

body.harvard-square .site-header.is-stuck .primary-nav .nav-link,
body.harvard-square.index-format .site-header.is-stuck .primary-nav .nav-link {
	min-height: 74px;
}

body.harvard-square .primary-nav .nav-link::after,
body.harvard-square.index-format .primary-nav .nav-link::after {
	height: 3px;
	background: linear-gradient(90deg, var(--gold), var(--gold2));
}

/* Start Here keeps its block treatment at the new height. */
body.harvard-square .primary-nav .path-button.nav-link,
body.harvard-square.index-format .primary-nav .path-button.nav-link {
	font-size: .74rem;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* One mega menu. */
body.harvard-square .mega-menu,
body.harvard-square.index-format .mega-menu {
	border: 1px solid var(--line) !important;
	border-top: 3px solid var(--gold) !important;
	border-radius: 0 0 22px 22px !important;
	background: #fff;
	box-shadow: 0 34px 80px -28px rgba(7, 22, 45, .42);
}

body.harvard-square .mega-intro,
body.harvard-square.index-format .mega-intro {
	background: linear-gradient(150deg, var(--navy-ink), var(--navy) 60%, var(--navy2)) !important;
	border: 0 !important;
}

body.harvard-square .mega-column > a:hover,
body.harvard-square.index-format .mega-column > a:hover {
	background: linear-gradient(180deg, #fff, var(--soft));
	transform: translateX(4px);
}

/* One button shape sitewide - the home page alone was forcing square.
   Shining Speech Professional joins it: both are marketing landing pages on
   the pill, and scoping by body class rather than by the page's own wrapper
   reaches the header and footer buttons too, so the page is not half pills
   and half squares. */
body.harvard-square.index-format .btn,
body.harvard-square.index-format .mega-cta,
body.harvard-square.index-format .path-grid a,
body.harvard-square.index-format button,
body.harvard-square.lw-page-shining-speech-professional .btn,
body.harvard-square.lw-page-shining-speech-professional .mega-cta,
body.harvard-square.lw-page-shining-speech-professional .path-grid a,
body.harvard-square.lw-page-shining-speech-professional button {
	border-radius: 999px !important;
}

body.harvard-square.index-format .card,
body.harvard-square.index-format .panel,
body.harvard-square.index-format .start-card,
body.harvard-square.index-format .role-panel,
body.harvard-square.index-format .contact-card,
body.harvard-square.index-format .registration-panel,
body.harvard-square.index-format .skill-card,
body.harvard-square.index-format .path-grid a,
body.harvard-square.index-format .material-frame {
	border-radius: var(--radius) !important;
}

body.harvard-square.index-format .path-grid a {
	border-radius: var(--radius-sm) !important;
}

/* The drawer overrides its own height at the mobile breakpoint. */
@media (max-width: 1180px) {
	body.harvard-square .topbar,
	body.harvard-square.index-format .topbar,
	body.harvard-square .site-header.is-stuck .topbar,
	body.harvard-square.index-format .site-header.is-stuck .topbar {
		min-height: 76px;
	}

	body.harvard-square .primary-nav .nav-link,
	body.harvard-square.index-format .primary-nav .nav-link,
	body.harvard-square .site-header.is-stuck .primary-nav .nav-link,
	body.harvard-square.index-format .site-header.is-stuck .primary-nav .nav-link {
		min-height: 54px;
		font-size: .92rem;
		letter-spacing: .01em;
		text-transform: none;
	}

	body.harvard-square .mega-menu,
	body.harvard-square.index-format .mega-menu {
		border: 0 !important;
		border-top: 1px solid var(--line-soft) !important;
		border-radius: 0 !important;
		box-shadow: none;
		background: var(--soft);
	}
}

@media (max-width: 1340px) and (min-width: 1181px) {
	body.harvard-square .primary-nav .nav-link,
	body.harvard-square.index-format .primary-nav .nav-link {
		font-size: .68rem;
		letter-spacing: .04em;
		padding: 0 7px;
	}
}

/* The Start Here block sits on navy, so it must outrank the nav-link colour
   set just above (which is written for links on the white bar). */
body.harvard-square .primary-nav .path-item .path-button.nav-link,
body.harvard-square.index-format .primary-nav .path-item .path-button.nav-link {
	color: #fff;
	background: linear-gradient(140deg, var(--navy), var(--navy2));
}

body.harvard-square .primary-nav .path-item .path-button.nav-link span,
body.harvard-square.index-format .primary-nav .path-item .path-button.nav-link span {
	color: var(--gold2);
}

body.harvard-square .primary-nav .path-item .path-button.nav-link:hover,
body.harvard-square .primary-nav .path-item.menu-open .path-button.nav-link,
body.harvard-square.index-format .primary-nav .path-item .path-button.nav-link:hover,
body.harvard-square.index-format .primary-nav .path-item.menu-open .path-button.nav-link {
	background: linear-gradient(140deg, var(--gold), var(--gold-bright));
	color: var(--navy);
}

body.harvard-square .primary-nav .path-item .path-button.nav-link:hover span,
body.harvard-square .primary-nav .path-item.menu-open .path-button.nav-link span,
body.harvard-square.index-format .primary-nav .path-item .path-button.nav-link:hover span,
body.harvard-square.index-format .primary-nav .path-item.menu-open .path-button.nav-link span {
	color: var(--navy);
}

@media (max-width: 1180px) {
	body.harvard-square .primary-nav .path-item .path-button.nav-link,
	body.harvard-square.index-format .primary-nav .path-item .path-button.nav-link {
		background: transparent;
		color: var(--navy);
	}

	body.harvard-square .primary-nav .path-item .path-button.nav-link span,
	body.harvard-square.index-format .primary-nav .path-item .path-button.nav-link span {
		color: var(--gold-ink);
	}
}

/* =========================================================================
   33. AUDIT FIXES
   ========================================================================= */

/* The eyebrow was `inline-flex` (to align its leading dash), which made it an
   inline-level box: where the next sibling is also inline - as in the Careers
   qualification band, whose heading is a bare <strong> - the label and the
   heading ran together on one line and their boxes overlapped. `flex` with
   `fit-content` keeps the dash alignment but restores block-level flow, so
   the label sits on its own line and its bottom margin applies again. */
.eyebrow,
body.harvard-square .eyebrow,
body.harvard-square.index-format .eyebrow {
	display: flex;
	width: fit-content;
	max-width: 100%;
	flex-wrap: wrap;
}

/* The same trouble for the other inline-level labels. */
.kicker,
.ref-kicker,
.track,
.staffing-kicker,
.investor-kicker {
	display: block;
}

/* Headings that ship as bare <strong> need to behave like headings. */
.qualification-band > div > strong,
.academic-reference-grid strong,
.statement-band strong,
.value-cell strong {
	display: block;
}

/* --- horizontal scrollers get an affordance -----------------------------
   Wide tables and the role tab strip scroll sideways on small screens. With
   overlay scrollbars there was nothing to show that, so the content simply
   looked cut off. A fading right edge plus a hint line makes it readable. */

.lw-scroller {
	position: relative;
}

.legal-prose table,
.phase-table,
main table {
	scrollbar-width: thin;
}

@media (max-width: 900px) {
	.legal-prose,
	.wrap:has(> table),
	.role-tabs {
		position: relative;
	}

	.legal-prose table,
	main table,
	.role-tab-list {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
	}

	.legal-prose table:only-child,
	main table {
		overscroll-behavior-x: contain;
	}

	/* A small, explicit cue above each scroller. */
	.legal-prose table::before,
	.role-tab-list::before {
		content: "";
	}

	.legal-prose > p.lw-scroll-hint {
		font-family: var(--sans);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--gold-ink);
		margin: 1.2rem 0 -.4rem;
		display: flex;
		align-items: center;
		gap: 7px;
	}

	.lw-scroll-hint::after {
		content: "→";
		font-size: .9rem;
		animation: lw-nudge 1.8s var(--ease) infinite;
	}
}

@keyframes lw-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(4px); }
}

/* --- comfortable tap targets ------------------------------------------- */

.inline-link {
	display: inline-block;
	padding-top: 4px;
	padding-bottom: 6px;
}

@media (max-width: 760px) {
	.inline-link,
	.role-links a,
	.text-arrow {
		padding-top: 6px;
		padding-bottom: 8px;
	}
}

/* --- the footer glow is decorative; keep it from being measured wide ---- */
.site-footer {
	overflow: hidden;
}

.footer-glow {
	max-width: 100vw;
}


/* The hint is inserted by site.js only when a scroller really overflows. */
.lw-scroll-hint {
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin: 1.2rem 0 .5rem;
	display: flex;
	align-items: center;
	gap: 7px;
}

.lw-scroll-hint::after {
	content: "\2192";
	font-size: .9rem;
	animation: lw-nudge 1.8s var(--ease) infinite;
}

main table:focus-visible,
.role-tab-list:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.lw-scroll-hint::after { animation: none; }
}

/* Inline links inside running prose sat at a 19px hit height on phones.
   Vertical padding on an inline box enlarges the hit area without changing
   the line box, so the text rhythm is untouched. */
.legal-prose a,
.editorial-copy a,
.lw-editor-block a,
.legal-prose li a,
main p a:not(.btn):not(.inline-link):not(.text-arrow) {
	padding-block: 6px;
}

/* =========================================================================
   34. MEGA MENU HEIGHT
   The Start Here panel lists all 19 pages and stands 952px tall. On a 950px
   viewport its last row sits below the fold, and the panel is anchored to
   the sticky header so the page cannot be scrolled to reach it - the bottom
   of the directory was simply unreachable. Cap every panel to the space
   below the header and let a tall one scroll inside itself.
   ========================================================================= */

@media (min-width: 1181px) {
	.primary-nav .mega-menu,
	body.harvard-square .primary-nav .mega-menu,
	body.harvard-square.index-format .primary-nav .mega-menu {
		max-height: calc(100vh - var(--lw-header-h, 114px) - 18px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(201, 162, 71, .55) transparent;
	}

	.primary-nav .mega-menu::-webkit-scrollbar { width: 9px; }
	.primary-nav .mega-menu::-webkit-scrollbar-track { background: transparent; }
	.primary-nav .mega-menu::-webkit-scrollbar-thumb {
		background: rgba(201, 162, 71, .5);
		border-radius: 99px;
		border: 2px solid #fff;
	}
	.primary-nav .mega-menu::-webkit-scrollbar-thumb:hover { background: var(--gold); }

	/* On a short screen the 19-page directory tightens up rather than
	   relying on scrolling alone. */
	@media (max-height: 880px) {
		.path-menu .path-grid a { padding-block: 11px; }
		.path-menu .path-heading { margin-bottom: 14px; }
		.path-menu .path-heading h2 { font-size: 1.5rem; }
	}

	@media (max-height: 720px) {
		.path-menu .path-grid a small { display: none; }
		.path-menu .path-grid a { padding-block: 9px; }
	}
}

/* =========================================================================
   35. FORMS & SHORTCODE BLOCKS
   The pasted shortcodes shipped their own colours and spacing. Restyled onto
   the theme's tokens so they read as part of the site, and onto the
   accessible gold - the originals sat at 3.3-3.5:1 on their own backgrounds.
   ========================================================================= */

/* --- shared form controls (also used by Contact Form 7) ----------------- */

.fbook-form input,
.fbook-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: #fff;
	font-family: var(--sans);
	font-size: .97rem;
	color: var(--ink);
	transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
	appearance: none;
	-webkit-appearance: none;
}

.wpcf7-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235f6d84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px;
	padding-right: 42px;
	cursor: pointer;
}

.fbook-form textarea,
.wpcf7-form textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.6;
}

.fbook-form input::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: #93a0b3;
}

.fbook-form input:focus,
.fbook-form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 71, .22);
}

.fbook-field label,
.wpcf7-form label {
	display: block;
	font-family: var(--sans);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-bottom: 8px;
}

/* --- Contact Form 7 ----------------------------------------------------- */

.lw-form-block {
	--section-pad: var(--band);
}

.lw-form-shell {
	max-width: 780px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 48px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.lw-form-shell .wpcf7 { margin: 0; }

.wpcf7-form p {
	margin: 0 0 20px;
}

.wpcf7-form p:last-of-type { margin-bottom: 0; }

/* CF7 authors often put two fields on one line with a <br>; give the form a
   predictable two-column rhythm instead when the markup allows it. */
.wpcf7-form .lw-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
	width: auto;
	border: 1px solid var(--gold-bright);
	border-radius: 999px;
	background: var(--gold-bright);
	color: var(--navy);
	font-family: var(--sans);
	font-size: .93rem;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 15px 34px;
	cursor: pointer;
	transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(11, 29, 58, .4);
}

/* File input (CV upload) */
.wpcf7-form input[type="file"] {
	width: 100%;
	padding: 13px 16px;
	border: 1px dashed var(--line);
	border-radius: var(--radius-sm);
	background: var(--soft);
	font-family: var(--sans);
	font-size: .9rem;
	color: #4c5a70;
	cursor: pointer;
}

.wpcf7-form input[type="file"]:hover {
	border-color: var(--gold);
	background: var(--cream);
}

.wpcf7-form input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 9px 18px;
	border: 1px solid var(--navy);
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
}

/* Validation + response messages */
.wpcf7 form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 18px;
	border-width: 1px;
	border-radius: var(--radius-sm);
	font-size: .92rem;
	font-family: var(--sans);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #1f7a1f;
	background: #eef8ee;
	color: #14601a;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #b3261e;
	background: #fdeeed;
	color: #8c1d18;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 7px;
	font-size: .82rem;
	font-weight: 600;
	color: #8c1d18;
}

.wpcf7-form .wpcf7-not-valid {
	border-color: #c9534b;
}

.wpcf7-spinner { margin-left: 12px; }

/* =========================================================================
   36. FREE PARENT GUIDE BLOCK
   ========================================================================= */

.fbook {
	--section-pad: 0px;
}

.fbook-success {
	max-width: 980px;
	margin: 0 auto 26px;
	padding: 15px 20px;
	border: 1px solid #b7dcb7;
	border-left: 4px solid #1f7a1f;
	border-radius: var(--radius-sm);
	background: #eef8ee;
	color: #14601a;
	font-weight: 600;
	font-size: .95rem;
}

.fbook-grid {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(24px, 4vw, 54px);
	align-items: center;
	max-width: 1040px;
	margin-inline: auto;
	padding: clamp(26px, 3.4vw, 44px);
	background: linear-gradient(150deg, var(--cream), #fff 62%, var(--soft));
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.fbook-grid::after {
	content: "";
	position: absolute;
	right: -170px;
	top: -190px;
	width: 440px;
	height: 440px;
	border: 1.5px solid rgba(201, 162, 71, .22);
	border-radius: 50%;
	pointer-events: none;
}

.fbook-media {
	position: relative;
	z-index: 1;
}

.fbook-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: 0 26px 54px -22px rgba(11, 29, 58, .45);
	transform: rotate(-1.6deg);
	transition: transform .55s var(--ease-out);
}

.fbook-grid:hover .fbook-media img {
	transform: rotate(0) translateY(-4px);
}

.fbook-panel {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.fbook-panel h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	margin-bottom: 10px;
}

.fbook-lead {
	color: var(--muted);
	max-width: 52ch;
	margin-bottom: 22px;
}

.fbook-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}

.fbook-field {
	margin-bottom: 16px;
	min-width: 0;
}

.fbook-row .fbook-field { margin-bottom: 0; }

.fbook-row + .fbook-field { margin-top: 16px; }

.fbook-submit {
	width: 100%;
	margin-top: 20px;
	justify-content: center;
	font-size: .95rem;
	cursor: pointer;
}

.fbook-note {
	margin-top: 14px;
	font-size: .82rem;
	line-height: 1.55;
	color: var(--muted);
}

/* Honeypot: hidden from people, still reachable by bots. */
.fbook-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 860px) {
	.fbook-grid { grid-template-columns: 1fr; }
	.fbook-media { max-width: 230px; margin-inline: auto; }
}

/* =========================================================================
   37. COURSE PRICING BLOCK
   ========================================================================= */

.fsapr {
	--section-pad: 0px;
	max-width: 1040px;
	margin-inline: auto;
}

.fsapr-head {
	text-align: center;
	margin-bottom: 30px;
}

.fsapr-head .eyebrow {
	margin-inline: auto;
	justify-content: center;
}

.fsapr-head h2 {
	font-size: clamp(1.7rem, 2.9vw, 2.5rem);
	margin-bottom: 8px;
}

.fsapr-head p {
	color: var(--muted);
	margin: 0;
}

.fsapr-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: stretch;
}

.fsapr-card {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 32px 30px 28px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	color: var(--ink);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

.fsapr-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--gold), var(--gold2));
	transform: scaleX(.3);
	transform-origin: left;
	transition: transform .45s var(--ease-out);
}

.fsapr-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lift);
	border-color: rgba(201, 162, 71, .55);
}

.fsapr-card:hover::before { transform: scaleX(1); }

.fsapr-card--rec {
	background: linear-gradient(165deg, var(--cream), #fff 58%);
	border-color: rgba(201, 162, 71, .5);
}

.fsapr-card--rec::before { transform: scaleX(1); }

.fsapr-badge {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--navy);
	color: var(--gold2);
	font-family: var(--sans);
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.fsapr-name {
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-bottom: 10px;
}

.fsapr-price {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 8px;
}

.fsapr-amount {
	font-family: var(--serif);
	font-size: clamp(2.3rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--navy);
}

.fsapr-unit {
	font-size: .88rem;
	font-weight: 600;
	color: var(--muted);
}

.fsapr-total {
	font-size: .93rem;
	color: var(--muted);
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.fsapr-features {
	display: flex;
	flex-direction: column;
	gap: 11px;
	flex: 1;
}

.fsapr-features > span {
	position: relative;
	padding-left: 28px;
	font-size: .94rem;
	color: #46536a;
	line-height: 1.5;
}

.fsapr-features > span::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(201, 162, 71, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' fill='none' stroke='%238c6717' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.fsapr-cta {
	margin-top: 22px;
	font-family: var(--sans);
	font-size: .9rem;
	font-weight: 700;
	color: var(--navy);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fsapr-cta i {
	font-style: normal;
	color: var(--gold-ink);
	transition: transform .32s var(--ease-out);
}

.fsapr-card:hover .fsapr-cta i { transform: translateX(5px); }

.fsapr-btnwrap {
	text-align: center;
	margin-top: 28px;
}

.fsapr-btn {
	font-size: 1rem;
	padding: 16px 40px;
}

.fsapr-note {
	margin-top: 14px;
	font-size: .82rem;
	color: var(--muted);
	max-width: 62ch;
	margin-inline: auto;
}

@media (max-width: 560px) {
	.fsapr-card { padding: 26px 22px 24px; }
	.fsapr-btn { width: 100%; }
}

/* Playfair's currency glyph sits tight; the display letter-spacing used for
   headings makes it collide with the first digit. */
.fsapr-amount {
	letter-spacing: -.012em;
	font-variant-numeric: lining-nums;
}

/* CF7 templates sometimes ship their own submit styling; keep ours. */
.lw-form-shell .wpcf7-form input[type="submit"],
.lw-form-shell .wpcf7-form button[type="submit"] {
	background-image: none;
	width: 100%;
	max-width: 340px;
	display: block;
	margin-inline: auto;
}

/* The two CF7 forms lay their fields out with <br>; give the shell a little
   more breathing room between rows on narrow screens. */
@media (max-width: 560px) {
	.lw-form-shell { padding: 24px 20px; }
	.lw-form-shell .wpcf7-form input[type="submit"] { max-width: none; }
}

/* -------------------------------------------------------------------------
   38. CF7 TEMPLATE OVERRIDES
   Both form templates embed their own <style> block. Those rules land in the
   document after the theme's stylesheets, so at equal specificity they win.
   Scoping under .lw-form-shell raises specificity and settles it, and fixes
   the two things their CSS got wrong: a 10px label (below legible size) in
   #7f8ba0 (3.44:1, under WCAG AA).
   ---------------------------------------------------------------------- */

.lw-form-shell .custom-form,
.lw-form-shell .wpcf7-form {
	max-width: none;
	font-family: var(--sans);
}

.lw-form-shell .custom-form label,
.lw-form-shell .wpcf7-form label {
	display: block;
	font-family: var(--sans);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-bottom: 8px;
}

.lw-form-shell .form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin-bottom: 20px;
}

.lw-form-shell .form-group { width: auto; min-width: 0; }

.lw-form-shell .custom-form input[type="text"],
.lw-form-shell .custom-form input[type="email"],
.lw-form-shell .custom-form input[type="tel"],
.lw-form-shell .custom-form select,
.lw-form-shell .custom-form textarea,
.lw-form-shell .wpcf7-form input[type="text"],
.lw-form-shell .wpcf7-form input[type="email"],
.lw-form-shell .wpcf7-form input[type="tel"],
.lw-form-shell .wpcf7-form select,
.lw-form-shell .wpcf7-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background-color: #fff;
	font-family: var(--sans);
	font-size: .97rem;
	color: var(--ink);
}

.lw-form-shell .custom-form input:focus,
.lw-form-shell .custom-form select:focus,
.lw-form-shell .custom-form textarea:focus,
.lw-form-shell .wpcf7-form input:focus,
.lw-form-shell .wpcf7-form select:focus,
.lw-form-shell .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 71, .22);
}

.lw-form-shell .custom-form input::placeholder,
.lw-form-shell .custom-form textarea::placeholder,
.lw-form-shell .wpcf7-form input::placeholder,
.lw-form-shell .wpcf7-form textarea::placeholder {
	color: #8d9aae;
}

.lw-form-shell .custom-form .form-note,
.lw-form-shell .form-note,
.lw-form-shell .custom-form small {
	color: var(--muted);
	font-size: .82rem;
}

/* Keep the "most popular" pill above the 10.5px legibility floor the rest of
   the site holds to. */
.fsapr-badge {
	font-size: .7rem;
	letter-spacing: .13em;
}


/* =========================================================================
   39. HOVER LEGIBILITY
   Every interactive surface must change background and text colour together.
   ========================================================================= */

/* The mega-menu CTA is a navy button sitting inside a column of plain links;
   the column's generic link hover was repainting it white, leaving white text
   on a white button. */
.site-header .mega-cta,
body.harvard-square .site-header .mega-cta {
	background: var(--navy) !important;
	color: #fff !important;
	border: 1px solid var(--navy) !important;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease-out);
}

.site-header .mega-cta:hover,
.site-header .mega-cta:focus-visible,
body.harvard-square .site-header .mega-cta:hover {
	background: var(--gold-bright) !important;
	border-color: var(--gold-bright) !important;
	color: var(--navy) !important;
	transform: translateX(3px);
}

/* Shortcode buttons ride on .btn, so they inherit the corrected hovers, but
   state them explicitly - these are the two conversion buttons. Both are
   gold, and the parent-guide submit sits on a photographic panel, so they
   follow the gold hover rather than inverting to navy against it. */
.fsapr-btn:hover,
.fsapr-btn:focus-visible,
.fbook-submit:hover,
.fbook-submit:focus-visible {
	background-color: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--navy-deep, #071426);
	box-shadow: 0 16px 34px -12px rgba(170, 125, 35, .5);
}

/* Cards that are themselves links: keep the arrow and title legible. */
.route-card:hover .route-no,
.fsapr-card:hover .fsapr-name {
	color: var(--gold-ink);
}

/* -------------------------------------------------------------------------
   40. BUTTON HOVER — SPECIFICITY
   `body.harvard-square.index-format .btn.gold` (0,4,1) outranks a plain
   `.btn.gold:hover` (0,3,0), so on the home page the gold button kept its
   gold background while the text turned white: an invisible label. State
   every hover pair above that weight.
   ---------------------------------------------------------------------- */

body.harvard-square .btn.gold:hover,
body.harvard-square .btn.gold:focus-visible,
body.harvard-square.index-format .btn.gold:hover,
body.harvard-square.index-format .btn.gold:focus-visible {
	background: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--navy-deep, #071426);
	box-shadow: 0 16px 34px -12px rgba(170, 125, 35, .5);
}

body.harvard-square .btn.navy:hover,
body.harvard-square .btn.navy:focus-visible,
body.harvard-square.index-format .btn.navy:hover,
body.harvard-square.index-format .btn.navy:focus-visible {
	background: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--navy-deep, #071426);
}

body.harvard-square .btn.outline:hover,
body.harvard-square .btn.outline:focus-visible,
body.harvard-square.index-format .btn.outline:hover,
body.harvard-square.index-format .btn.outline:focus-visible {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

body.harvard-square .btn.white:hover,
body.harvard-square .btn.white:focus-visible,
body.harvard-square.index-format .btn.white:hover,
body.harvard-square.index-format .btn.white:focus-visible {
	background: var(--gold-bright);
	border-color: var(--gold-bright);
	color: var(--navy);
}

body.harvard-square .btn.ghost-light:hover,
body.harvard-square .btn.ghost-light:focus-visible,
body.harvard-square.index-format .btn.ghost-light:hover,
body.harvard-square.index-format .btn.ghost-light:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--navy);
}

/* Shortcode buttons carry .btn gold, so they follow the same pair. */
body.harvard-square .fsapr-btn:hover,
body.harvard-square .fbook-submit:hover,
body.harvard-square .fsapr-btn:focus-visible,
body.harvard-square .fbook-submit:focus-visible {
	background: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--navy-deep, #071426);
	box-shadow: 0 16px 34px -12px rgba(170, 125, 35, .5);
}

/* -------------------------------------------------------------------------
   41. CF7 SUBMIT BUTTON
   The template's own <style> paints the submit with a gradient. An earlier
   override here cancelled that gradient (`background-image: none`) without
   supplying a background-colour, which left a transparent button with black
   text. State the whole thing at `.lw-form-shell` weight.
   ---------------------------------------------------------------------- */

.lw-form-shell .wpcf7-form input[type="submit"],
.lw-form-shell .wpcf7-form button[type="submit"],
.lw-form-shell .custom-form input[type="submit"],
.lw-form-shell .custom-form button[type="submit"] {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 26px auto 0;
	padding: 16px 34px;
	border: 1px solid var(--gold-bright);
	border-radius: 999px;
	background-color: var(--gold-bright);
	background-image: none;
	color: var(--navy);
	font-family: var(--sans);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .25s var(--ease), border-color .25s var(--ease),
		color .25s var(--ease), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}

.lw-form-shell .wpcf7-form input[type="submit"]:hover,
.lw-form-shell .wpcf7-form input[type="submit"]:focus-visible,
.lw-form-shell .wpcf7-form button[type="submit"]:hover,
.lw-form-shell .custom-form input[type="submit"]:hover,
.lw-form-shell .custom-form button[type="submit"]:hover {
	background-color: var(--navy);
	border-color: var(--navy);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(11, 29, 58, .4);
}

@media (max-width: 560px) {
	.lw-form-shell .wpcf7-form input[type="submit"],
	.lw-form-shell .custom-form input[type="submit"] { max-width: none; }
}

/* The inherited sheet forces `border-radius: 0` on home and `3px` elsewhere
   with !important, which left the same button a different shape per page. */
.lw-form-shell .wpcf7-form input[type="submit"],
.lw-form-shell .wpcf7-form button[type="submit"],
.lw-form-shell .custom-form input[type="submit"],
body.harvard-square .lw-form-shell [type="submit"],
body.harvard-square.index-format .lw-form-shell [type="submit"],
body.harvard-square .fbook-submit,
body.harvard-square.index-format .fbook-submit,
body.harvard-square .fsapr-btn,
body.harvard-square.index-format .fsapr-btn,
body.harvard-square .fsapr-card,
body.harvard-square.index-format .fsapr-card,
body.harvard-square .fbook-grid,
body.harvard-square.index-format .fbook-grid,
body.harvard-square .lw-form-shell,
body.harvard-square.index-format .lw-form-shell {
	border-radius: 999px !important;
}

body.harvard-square .fsapr-card,
body.harvard-square.index-format .fsapr-card,
body.harvard-square .fbook-grid,
body.harvard-square.index-format .fbook-grid,
body.harvard-square .lw-form-shell,
body.harvard-square.index-format .lw-form-shell {
	border-radius: var(--radius-lg) !important;
}

body.harvard-square .fbook-form input,
body.harvard-square.index-format .fbook-form input,
body.harvard-square .lw-form-shell input:not([type="submit"]),
body.harvard-square .lw-form-shell select,
body.harvard-square .lw-form-shell textarea,
body.harvard-square.index-format .lw-form-shell input:not([type="submit"]),
body.harvard-square.index-format .lw-form-shell select,
body.harvard-square.index-format .lw-form-shell textarea {
	border-radius: var(--radius-sm) !important;
}

body.harvard-square .fbook-media img,
body.harvard-square.index-format .fbook-media img {
	border-radius: var(--radius-sm) !important;
}

/* -------------------------------------------------------------------------
   42. EXTERNAL LINKS IN THE HEADER
   The sister-site link sits among page links, so it needs to read as a jump
   off this site. The mark is gold and nudges on hover; the label keeps the
   same sliding underline as its neighbours, which is why the mark lives in
   its own span rather than being an ::after on the anchor.
   ---------------------------------------------------------------------- */

.utility-links a.utility-external {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--gold2);
	opacity: 1;
}

.utility-links a.utility-external:hover {
	color: #f0dca6;
}

.utility-external-mark {
	font-size: .82em;
	line-height: 1;
	transition: transform .25s var(--ease-out);
}

.utility-links a.utility-external:hover .utility-external-mark,
.utility-links a.utility-external:focus-visible .utility-external-mark {
	transform: translate(1px, -1px);
}

/* The same link in the mobile drawer. The drawer is a white panel, so the
   bar's pale gold would fail contrast here — this uses the darker gold ink
   the rest of the light UI uses. The mark sits at the end of the row rather
   than beside the label, because drawer rows are full-width. */
/* base.css scopes .nav-link colour to `body.harvard-square.index-format`
   (0,4,1), so a plain `.primary-nav .academy-nav-link` silently loses. Match
   that weight on both body variants. */
body.harvard-square .primary-nav .academy-nav-link,
body.harvard-square.index-format .primary-nav .academy-nav-link {
	color: var(--gold-ink);
	font-weight: 700;
}

.primary-nav .academy-nav-link .nav-external-mark {
	margin-left: auto;
	padding-left: 10px;
	font-size: .9em;
	line-height: 1;
	/* --gold-deep manages only 3.67:1 on the drawer's white panel. The mark
	   is small, carries meaning and sits next to the label, so it uses the
	   same --gold-ink (5.16:1). */
	color: var(--gold-ink);
	transition: transform .25s var(--ease-out);
}

body.harvard-square .primary-nav .academy-nav-link:hover,
body.harvard-square .primary-nav .academy-nav-link:focus-visible,
body.harvard-square.index-format .primary-nav .academy-nav-link:hover,
body.harvard-square.index-format .primary-nav .academy-nav-link:focus-visible {
	color: var(--navy);
}

.primary-nav .academy-nav-link:hover .nav-external-mark,
.primary-nav .academy-nav-link:focus-visible .nav-external-mark {
	transform: translate(2px, -2px);
}

/* -------------------------------------------------------------------------
   43. CHAT WIDGET vs THE NAV DRAWER
   The LeadConnector widget renders a fixed bubble from inside its own shadow
   root, so it floats above the drawer and covers whichever rows it lands on
   (on a 375px screen that was Florida Star Academy and Investor). While the
   drawer is open the widget has nothing to offer, so stand it down.
   ---------------------------------------------------------------------- */

body.nav-open chat-widget,
body.nav-open [data-chat-widget] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   44. DESIGN PASS — SECTIONS THAT READ AS UNFINISHED

   Three problems found by measuring every section at 1440px rather than by
   eye, each repeating across many pages because they live in shared blocks.
   ---------------------------------------------------------------------- */

/* 44.1 — A section head carries 56px of bottom margin to separate it from the
   body beneath it. Eighteen sections have no body: the head IS the section, so
   that margin became dead space at the foot of the block (146px of empty white
   on .academic-key-note once section padding is added). */
.editorial-head:last-child,
body.harvard-square .editorial-head:last-child,
body.harvard-square.index-format .editorial-head:last-child {
	margin-bottom: 0;
}

/* 44.2 — .academic-key-note appears on seventeen of the twenty-five pages and
   was the weakest block on the site: a heading and a paragraph floating on bare
   white with no anchor. It now borrows the treatment already proven by
   .humor-strip — cream wash, hairline border, gold edge — so it reads as a
   deliberate closing note rather than a section that lost its content. */
.academic-key-note {
	padding: 72px 0;
}

.academic-key-note .editorial-head,
body.harvard-square .academic-key-note .editorial-head,
body.harvard-square.index-format .academic-key-note .editorial-head {
	position: relative;
	align-items: center;
	gap: 48px;
	margin-bottom: 0;
	padding: 44px 52px;
	background: linear-gradient(130deg, var(--cream), #fff 72%);
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold);
	border-radius: var(--radius);
	overflow: hidden;
}

/* The arc lifted from the wordmark, now actually inside the panel it decorates
   instead of a 760px circle hung mostly above the section. */
.academic-key-note .editorial-head::after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -190px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	border: 1.5px solid rgba(201, 162, 71, .3);
	pointer-events: none;
}

.academic-key-note::before { display: none; }

.academic-key-note .editorial-head > * {
	position: relative;
	z-index: 1;
}

.academic-key-note .editorial-head h2 {
	font-size: clamp(1.6rem, 2.3vw, 2.25rem);
}

.academic-key-note .editorial-head p {
	margin: 0;
	color: #4d5b71;
	font-size: 1.02rem;
}

@media (max-width: 900px) {
	.academic-key-note .editorial-head,
	body.harvard-square .academic-key-note .editorial-head,
	body.harvard-square.index-format .academic-key-note .editorial-head {
		padding: 32px 26px;
		gap: 18px;
	}
}

/* 44.3 — The five lesson steps were squeezed into the narrow column of a
   two-column block: 133px wide by 111px tall each, so "Turn & Talk" wrapped
   inside a box barely wider than the words. The head now sits above and the
   sequence runs the full width, which gives each step ~238px. */
.lesson-25-mini .wrap {
	grid-template-columns: minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.lesson-25-mini .wrap > div:first-child {
	max-width: 64ch;
}

.mini-flow {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
}

.mini-flow > div {
	padding: 22px 20px 20px;
	gap: 7px;
}

/* The minute range is the point of the block, so let it lead. */
.mini-flow b {
	font-family: var(--sans);
	font-size: .74rem;
	letter-spacing: .12em;
	color: var(--gold-ink);
}

.mini-flow strong {
	font-size: 1.22rem;
}

@media (max-width: 620px) {
	.mini-flow {
		grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	}
}

/* 44.4 — .role-duo is a two-column comparison, but on Program it sits inside
   .story-copy, which is only 462px wide. That gave each panel 222px with 36px
   of padding — 150px of content for a 32px serif heading, so "Conversation"
   was chopped mid-word. One column per panel inside a story column. */
.story-copy .role-duo {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.story-copy .role-panel {
	padding: 26px 28px;
}

.story-copy .role-panel h3 {
	font-size: 1.55rem;
}

/* 44.5 — `overflow-wrap: anywhere` lets a box size below its longest word,
   which is what allowed the break above. Headings should wrap between words;
   the base `break-word` rule still stops any real overflow. Contact cards and
   footer keep `anywhere` because they genuinely carry bare domains. */
.role-panel h3,
.story-copy h3 {
	overflow-wrap: break-word;
}

/* 44.6 — The dashboard mock sits in the narrow column of a story-split, so its
   window is 462px wide and a fixed 220px sidebar left the main pane 353px. The
   three stat cells were 84px wide and 190px TALL, with each caption wrapping to
   seven lines of one or two words. Give the sidebar a proportional width and
   lay the stats out as rows, which is what a dashboard summary looks like
   anyway. */
.platform-body {
	/* Not narrower than "Partner Dashboard" needs, or the sidebar heading
	   breaks mid-word — which is exactly what a first attempt at 122px did. */
	grid-template-columns: minmax(152px, .34fr) minmax(0, 1fr);
}

.platform-side {
	padding: 20px 16px;
}

.platform-side strong {
	font-size: .92rem;
	line-height: 1.25;
}

.platform-side span {
	font-size: .78rem;
}

.platform-kpis {
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.platform-kpis div {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	align-items: baseline;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
}

.platform-kpis strong {
	font-size: .95rem;
	letter-spacing: -.01em;
}

.platform-kpis span {
	font-size: .78rem;
	line-height: 1.4;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   45. THE DEVELOPMENT ARC (voice ladder)

   The ladder is five stages with a connector between each: nine children in
   one container. Both the base grid (five columns for nine items) and the
   flex fallback that replaced it got this wrong — the fallback gave every
   child `flex: 1 1 168px`, so a 12px arrow claimed as much width as a stage
   card and the row wrapped wherever it ran out. The result was stage cards at
   three different widths, a gap where stage 04's connector should sit, and an
   arrow at the end of the first row pointing into empty space.

   Stages and connectors are different things, so give them different tracks.
   ---------------------------------------------------------------------- */

.voice-ladder,
body.harvard-square .voice-ladder,
body.harvard-square.index-format .voice-ladder {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr);
	align-items: stretch;
	gap: 0 9px;
	margin-top: 30px;
}

.voice-step,
body.harvard-square .voice-step {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 20px 24px;
	min-height: 0;
	transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease-out);
}

.voice-step:hover {
	transform: translateY(-3px);
	border-color: rgba(201, 162, 71, .55);
	background: rgba(255, 255, 255, .08);
}

.voice-step b {
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .16em;
}

.voice-step strong {
	margin-top: 10px;
	font-size: 1.32rem;
	line-height: 1.15;
}

.voice-step p {
	margin: 0;
	line-height: 1.5;
}

/* The connector is a connector: it takes only the width it needs and sits on
   the same optical line as the stage titles rather than the card's centre. */
.voice-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1;
}

/* Five stages across need about 200px each. Below that the arc reads better
   as a vertical ladder, which is what the base stylesheet already intended —
   it just never got there, because the flex rule outranked its media query. */
@media (max-width: 1140px) {
	.voice-ladder,
	body.harvard-square .voice-ladder,
	body.harvard-square.index-format .voice-ladder {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.voice-arrow {
		width: auto;
		height: 34px;
		transform: rotate(90deg);
	}
}

/* Stacked, a stage card is as wide as the page but its text is two lines, so
   the column layout left most of the card empty. Set the stage against its
   description instead. */
@media (max-width: 1140px) and (min-width: 721px) {
	.voice-step,
	body.harvard-square .voice-step {
		display: grid;
		grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
		grid-template-areas:
			"num  copy"
			"name copy";
		align-items: center;
		column-gap: 34px;
		row-gap: 0;
		padding: 22px 26px;
	}

	.voice-step b      { grid-area: num; align-self: end; }
	.voice-step strong { grid-area: name; align-self: start; margin-top: 4px; }
	.voice-step p      { grid-area: copy; }
}

/* -------------------------------------------------------------------------
   46. RIBBONS THAT LEFT ONE CARD AS A FULL-WIDTH SLAB

   Section 25 turned these ribbons into `flex-wrap` with `flex: 1 1 <basis>`
   so a short final row would expand instead of stranding cards. That works
   when the last row holds two or three items. When it holds ONE, the single
   card grows to the entire row: measured at 1440px, the fifth skill card was
   1180px wide beside four 285px siblings, and the same happened to the sixth
   impact cell and the seventh pathway chip.

   Each of these already had a sensible responsive grid in the base stylesheet
   — flex was overriding it. Restore the grid and give every card the same
   width at every viewport, which is what section 25 was reaching for.
   ---------------------------------------------------------------------- */

.skill-grid,
body.harvard-square .skill-grid,
body.harvard-square.index-format .skill-grid,
.impact-line,
body.harvard-square .impact-line,
body.harvard-square.index-format .impact-line,
.pathway-river,
body.harvard-square .pathway-river,
body.harvard-square.index-format .pathway-river {
	display: grid;
}

/* Five skills. */
.skill-grid,
body.harvard-square .skill-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 1160px) {
	.skill-grid,
	body.harvard-square .skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.skill-grid,
	body.harvard-square .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.skill-grid,
	body.harvard-square .skill-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Five impact cells — the base stylesheet's five columns were right. The
   sixth child is not a cell at all: it is the .community-question callout,
   which belongs across the full width beneath them. Flex happened to give it
   the whole row, so this one looked correct by accident; say so explicitly
   instead, or it becomes a very tall sixth cell the moment the grid returns. */
.impact-line,
body.harvard-square .impact-line {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.impact-line > .community-question {
	grid-column: 1 / -1;
	margin-top: 8px;
}

@media (max-width: 1100px) {
	.impact-line,
	body.harvard-square .impact-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
	.impact-line,
	body.harvard-square .impact-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.impact-line,
	body.harvard-square .impact-line { grid-template-columns: minmax(0, 1fr); }
}

/* Seven pathway chips. Seven across only works on a wide screen; the base
   stylesheet held seven columns all the way down to 620px, which is why the
   flex override existed in the first place. */
.pathway-river,
body.harvard-square .pathway-river {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}

@media (max-width: 1180px) {
	.pathway-river,
	body.harvard-square .pathway-river { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.pathway-river,
	body.harvard-square .pathway-river { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pathway-river > div:nth-child(odd) { transform: none; }
}

@media (max-width: 460px) {
	.pathway-river,
	body.harvard-square .pathway-river { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   47. THE REST OF THE SECTION 25 RIBBONS

   Same failure as §46, visible one breakpoint down: at 1024px the fourth
   route card was 972px wide beside three 312px siblings, and the sixth flow
   step was 972px beside five 186px siblings. The ribbons that wrapped to a
   two-item last row were milder but still mismatched — 479px cards under
   315px ones.

   `repeat(auto-fit, minmax(<the old flex basis>, 1fr))` wraps at exactly the
   same points the flex basis did, but every card in the ribbon keeps the same
   width, and a short last row stays card-sized instead of spanning.

   Checked first that every one of these holds a single kind of child — the
   trap in §46 was .impact-line, whose last child is a full-width callout that
   only looked right because flex stretched it.
   ---------------------------------------------------------------------- */

.home-nav-grid,
.ages-grid,
.formats,
.method-line,
.mini-flow,
.module-index,
.lesson-25-flow,
.standards-detail-grid,
.flow-steps,
body.harvard-square .flow-steps,
body.harvard-square.index-format .flow-steps {
	display: grid;
}

.home-nav-grid        { grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); }
.ages-grid            { grid-template-columns: repeat(auto-fit, minmax(min(214px, 100%), 1fr)); }
.formats              { grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr)); }
.method-line          { grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr)); }
.module-index         { grid-template-columns: repeat(auto-fit, minmax(min(216px, 100%), 1fr)); }
.lesson-25-flow       { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.standards-detail-grid{ grid-template-columns: repeat(auto-fit, minmax(min(298px, 100%), 1fr)); }

.flow-steps,
body.harvard-square .flow-steps {
	grid-template-columns: repeat(auto-fit, minmax(min(164px, 100%), 1fr));
}

/* .mini-flow carries its own sizing from §44; state it here too because the
   §25 flex rule was winning on display and silently ignoring it. */
.mini-flow {
	grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr));
}

/* .impact-grid is a butted ribbon (gap: 0, cells divided by their own rules)
   rather than a set of separate cards, so it keeps its zero gap — but it had
   the same lone-slab failure: at 768px the fourth cell was 730px wide under
   three 243px siblings. */
.impact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(224px, 100%), 1fr));
}

/* A card-sized orphan is far better than a full-width slab, but where the
   card count divides evenly there is no need to have one at all. auto-fit
   stays as the base so these degrade sensibly if the counts ever change; the
   breakpoints below just stop it from choosing 3-across for a set of four. */

/* Four cards: 4 / 2 / 1, never 3 + 1. */
@media (max-width: 1100px) {
	.home-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.ages-grid,
	.module-index,
	.impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.home-nav-grid,
	.ages-grid,
	.module-index,
	.impact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Six steps: 6 / 3 / 2 / 1, never 5 + 1. */
@media (max-width: 1100px) {
	.flow-steps,
	body.harvard-square .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.flow-steps,
	body.harvard-square .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.flow-steps,
	body.harvard-square .flow-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Three format cards as 2 + 1 is the most conspicuous short row on the site,
   so they hold three across a little longer and then stack. (Five skill cards
   still end 2 + 2 + 1 on a tablet — a short last row is ordinary grid
   behaviour; the defect this section set out to remove was the last card
   stretching to the full width, not the row being short.) */
@media (max-width: 900px) {
	.formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

/* -------------------------------------------------------------------------
   48. OUTLINE BUTTONS ON DARK GROUNDS

   `.btn.outline:hover` fills with navy, which is right on a light section and
   wrong on a dark one: on the legal hero and the navy block on Ages 4–17 the
   button filled navy, took a navy border, and dissolved into the background —
   the label stayed readable but the button lost its shape entirely. These
   contexts invert to white instead, which is what the old ::before sweep was
   doing before the sweep was replaced.
   ---------------------------------------------------------------------- */

.legal-hero-actions .btn.outline:hover,
.legal-hero-actions .btn.outline:focus-visible,
.individual .btn.outline:hover,
.individual .btn.outline:focus-visible,
.editorial-section.dark .btn.outline:hover,
.editorial-section.dark .btn.outline:focus-visible,
.navy-section .btn.outline:hover,
.navy-section .btn.outline:focus-visible,
.hero-home .btn.outline:hover,
.hero-home .btn.outline:focus-visible,
.final-band .btn.outline:hover,
.final-band .btn.outline:focus-visible,
.registration-hero .btn.outline:hover,
.registration-hero .btn.outline:focus-visible,
body.harvard-square .legal-hero-actions .btn.outline:hover,
body.harvard-square .legal-hero-actions .btn.outline:focus-visible,
body.harvard-square .individual .btn.outline:hover,
body.harvard-square .individual .btn.outline:focus-visible,
body.harvard-square .editorial-section.dark .btn.outline:hover,
body.harvard-square .editorial-section.dark .btn.outline:focus-visible,
body.harvard-square .navy-section .btn.outline:hover,
body.harvard-square .navy-section .btn.outline:focus-visible,
body.harvard-square .hero-home .btn.outline:hover,
body.harvard-square .hero-home .btn.outline:focus-visible,
body.harvard-square .final-band .btn.outline:hover,
body.harvard-square .final-band .btn.outline:focus-visible,
body.harvard-square .registration-hero .btn.outline:hover,
body.harvard-square .registration-hero .btn.outline:focus-visible,
body.harvard-square.index-format .legal-hero-actions .btn.outline:hover,
body.harvard-square.index-format .individual .btn.outline:hover,
body.harvard-square.index-format .editorial-section.dark .btn.outline:hover,
body.harvard-square.index-format .navy-section .btn.outline:hover,
body.harvard-square.index-format .hero-home .btn.outline:hover,
body.harvard-square.index-format .final-band .btn.outline:hover,
body.harvard-square.index-format .registration-hero .btn.outline:hover {
	background: #fff;
	background-color: #fff;
	border-color: #fff;
	color: var(--navy);
}

/* -------------------------------------------------------------------------
   49. FOOTER CONTACT DETAILS AND SOCIAL PROFILES

   Address, phone, email and the three social profiles. The footer is where
   people look for these, and it puts them on all 25 pages at once. Icons use
   the same mask-image system as the rest of the site's iconography, so they
   inherit colour and need no extra requests.
   ---------------------------------------------------------------------- */

.footer-contact {
	font-style: normal;
	margin: 18px 0 0;
	display: grid;
	gap: 10px;
}

.footer-contact-row {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	gap: 11px;
	color: #c9d4e4;
	font-size: .92rem;
	line-height: 1.5;
	text-decoration: none;
	transition: color .25s var(--ease);
}

.footer-contact-row:hover,
.footer-contact-row:focus-visible {
	color: #fff;
}

.fc-icon {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background-color: var(--gold2);
	transition: background-color .25s var(--ease);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.footer-contact-row:hover .fc-icon { background-color: #fff; }

.fc-pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.fc-phone {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.fc-mail {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

/* --- social ------------------------------------------------------------- */

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

.social-link {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .05);
	transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out);
}

.social-link span {
	width: 19px;
	height: 19px;
	background-color: #dce5f1;
	transition: background-color .25s var(--ease);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.social-link:hover,
.social-link:focus-visible {
	background: var(--gold-bright);
	border-color: var(--gold-bright);
	transform: translateY(-3px);
}

.social-link:hover span,
.social-link:focus-visible span { background-color: var(--navy); }

.social-linkedin span {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3zM9 9h3.8v1.7h.05A4.2 4.2 0 0 1 16.6 8.7c4 0 4.4 2.4 4.4 5.6V21h-4v-5.7c0-1.4 0-3.1-1.9-3.1s-2.2 1.5-2.2 3V21H9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3zM9 9h3.8v1.7h.05A4.2 4.2 0 0 1 16.6 8.7c4 0 4.4 2.4 4.4 5.6V21h-4v-5.7c0-1.4 0-3.1-1.9-3.1s-2.2 1.5-2.2 3V21H9z'/%3E%3C/svg%3E");
}

.social-youtube span {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M23 12s0-3.2-.4-4.7a3 3 0 0 0-2.1-2.1C18.9 4.8 12 4.8 12 4.8s-6.9 0-8.5.4a3 3 0 0 0-2.1 2.1C1 8.8 1 12 1 12s0 3.2.4 4.7a3 3 0 0 0 2.1 2.1c1.6.4 8.5.4 8.5.4s6.9 0 8.5-.4a3 3 0 0 0 2.1-2.1C23 15.2 23 12 23 12ZM9.8 15.2V8.8l5.6 3.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M23 12s0-3.2-.4-4.7a3 3 0 0 0-2.1-2.1C18.9 4.8 12 4.8 12 4.8s-6.9 0-8.5.4a3 3 0 0 0-2.1 2.1C1 8.8 1 12 1 12s0 3.2.4 4.7a3 3 0 0 0 2.1 2.1c1.6.4 8.5.4 8.5.4s6.9 0 8.5-.4a3 3 0 0 0 2.1-2.1C23 15.2 23 12 23 12ZM9.8 15.2V8.8l5.6 3.2z'/%3E%3C/svg%3E");
}

.social-facebook span {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7h-2.5V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7h-2.5V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E");
}

/* The phone number belongs where a visitor already looks for it — the top of
   every page. It keeps its place when the institute name is dropped on
   narrower screens, because the number is the useful half. */
.utility-identity {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.utility-phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--gold2);
	opacity: 1;
}

.utility-phone .fc-icon {
	width: 14px;
	height: 14px;
	margin-top: 0;
	background-color: var(--gold2);
}

.utility-phone:hover,
.utility-phone:focus-visible { color: #f0dca6; }
.utility-phone:hover .fc-icon { background-color: #f0dca6; }

@media (max-width: 980px) {
	.utility-identity > span { display: none; }
	.utility-phone { font-size: .78rem; }
}

/* The institute name moved inside .utility-identity, so the styling that was
   scoped to `.utility-inner > span` no longer reaches it. */
.utility-identity > span {
	font-weight: 500;
	letter-spacing: .05em;
	opacity: .78;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Contact page: reach us directly ----------------------------------- */

.direct-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 14px;
}

.direct-card {
	display: block;
	padding: 30px 28px 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-out);
}

.direct-card:hover,
.direct-card:focus-visible {
	transform: translateY(-4px);
	border-color: #d6bd78;
	box-shadow: var(--shadow);
}

.direct-card .fc-icon {
	width: 26px;
	height: 26px;
	margin: 0 0 18px;
	background-color: var(--gold-ink);
}

.direct-card b {
	display: block;
	font-family: var(--sans);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.direct-card strong {
	display: block;
	margin-top: 8px;
	font-family: var(--serif);
	font-size: 1.28rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--navy);
	overflow-wrap: break-word;
}

.direct-card p {
	margin: 10px 0 0;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--muted);
}

.direct-social {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 20px 26px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.direct-social-label {
	font-family: var(--sans);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.direct-social .footer-social { margin-top: 0; }

/* On the cream panel the dark-ground social treatment would disappear. */
.direct-social .social-link {
	border-color: var(--line);
	background: #fff;
}

.direct-social .social-link span { background-color: var(--navy); }

.direct-social .social-link:hover,
.direct-social .social-link:focus-visible {
	background: var(--navy);
	border-color: var(--navy);
}

.direct-social .social-link:hover span,
.direct-social .social-link:focus-visible span { background-color: #fff; }

/* base.css styles every footer link as `.site-footer a { display: block }`
   (0,1,1), which outranked the plain `.social-link` (0,1,0) above: the anchors
   blockified, their icon spans stayed `display: inline` — where width and
   height simply do not apply — and each button collapsed to its 2px of border.
   Scope through .footer-social to clear it, and keep the footer's underline
   sweep off a circular icon button. */
.footer-social .social-link {
	display: inline-flex;
	width: 42px;
	height: 42px;
	margin: 0;
	flex: 0 0 auto;
}

.footer-social .social-link span {
	display: block;
	width: 19px;
	height: 19px;
}

.site-footer .footer-social .social-link::after { display: none; }

/* Pointer targets: WCAG 2.2 asks for 24px. The phone link measured 19px tall
   and the footer contact rows 21px. */
.utility-phone {
	padding: 6px 0;
}

.footer-contact-row {
	padding: 3px 0;
	min-height: 26px;
}

/* Adding the phone pushed the seven utility links onto a second row from
   1280px up, because the full legal name claims 333px of a 1180px bar. The
   links are navigation and must stay on one line; the name is context and can
   shrink, truncate, and drop out entirely once it would be a stub. */
@media (min-width: 981px) {
	.utility-inner {
		gap: 20px;
	}

	.utility-identity {
		flex: 0 1 auto;
		min-width: 0;
	}

	.utility-identity > span {
		flex: 0 1 auto;
		min-width: 0;
	}

	.utility-phone { flex: 0 0 auto; }

	.utility-links {
		flex: 0 0 auto;
		flex-wrap: nowrap;
	}
}

@media (max-width: 1240px) and (min-width: 981px) {
	.utility-identity > span { display: none; }
}

/* The contact rows hit the same `.site-footer a { display: block }` override
   (0,1,1) that collapsed the social buttons: the rows lost their grid, so the
   icon column never existed and the icon spans stayed inline at zero size.
   Scope through .footer-contact to outrank it. */
.footer-contact .footer-contact-row {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	gap: 11px;
	margin: 0;
}

.footer-contact .footer-contact-row .fc-icon {
	display: block;
	width: 18px;
	height: 18px;
}

/* A sliding underline under a two-line postal address reads as a mistake. */
.site-footer .footer-contact .footer-contact-row::after { display: none; }

/* -------------------------------------------------------------------------
   49b. GLOBAL SPOTLIGHT (lifted out of the Program partial)

   The .gv-* class names and the #global-voices anchor keep the pathway's
   former name, Global Voices. They are internal identifiers and the anchor
   is linked from the navigation, so renaming them would break links for no
   visible gain; only the words a reader sees were changed.

   This component shipped as an inline <style> block inside the page content.
   Being in the body, it sat after every enqueued stylesheet, so it won every
   specificity tie against the design system — which is why the mobile type
   rules below appeared to do nothing on `.gv-arc b` while working everywhere
   else. Moved here so it obeys the normal cascade like everything else.
   ---------------------------------------------------------------------- */

.global-voices-intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:start}
.global-voices-intro h2{font-size:clamp(2.7rem,4.8vw,5rem)}
.gv-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #dfe4ea;background:#fff;margin-top:34px}
.gv-stat{padding:24px 22px;border-right:1px solid #dfe4ea}
.gv-stat:last-child{border-right:0}
.gv-stat strong{display:block;font:700 2rem Georgia,"Times New Roman",serif;color:#0b1d3a}
.gv-stat span{display:block;margin-top:5px;color:#6b7789;font-size:.82rem}
.gv-year-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
.gv-year{border:1px solid #dfe4ea;background:#fff;padding:30px;min-height:100%}
.gv-year .gv-age{color:#c9a247;font-size:.71rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.gv-year h3{font-size:1.75rem;margin-top:10px}
.gv-year .gv-focus{font:700 1.02rem Georgia,"Times New Roman",serif;color:#33435a;margin-top:9px}
.gv-year p{color:#657387;font-size:.92rem}
.gv-topics{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.gv-topics span{border:1px solid #dfe4ea;background:#fbfcfd;padding:7px 9px;border-radius:2px;font-size:.76rem;color:#44536a;font-weight:700}
.gv-arc{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.18);margin-top:35px}
.gv-arc>div{padding:24px 21px;border-right:1px solid rgba(255,255,255,.18)}
.gv-arc>div:last-child{border-right:0}
.gv-arc b{display:block;color:#e5cf98;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase}
.gv-arc strong{display:block;color:#fff;font:700 1.25rem Georgia,"Times New Roman",serif;margin-top:10px}
.gv-arc p{color:#dce4ef;font-size:.84rem;margin-top:7px}
.gv-institution-note{margin-top:28px;border-left:3px solid #c9a247;padding:17px 20px;background:#fbf8f1;color:#536176}
@media(max-width:900px){.global-voices-intro,.gv-year-grid{grid-template-columns:1fr}.gv-stat-grid,.gv-arc{grid-template-columns:repeat(2,1fr)}.gv-stat:nth-child(2),.gv-arc>div:nth-child(2){border-right:0}.gv-stat:nth-child(-n+2),.gv-arc>div:nth-child(-n+2){border-bottom:1px solid #dfe4ea}.gv-arc>div:nth-child(-n+2){border-bottom-color:rgba(255,255,255,.18)}}
@media(max-width:620px){.gv-stat-grid,.gv-arc{grid-template-columns:1fr}.gv-stat,.gv-arc>div{border-right:0!important;border-bottom:1px solid #dfe4ea}.gv-arc>div{border-bottom-color:rgba(255,255,255,.18)}.gv-stat:last-child,.gv-arc>div:last-child{border-bottom:0}}

/* -------------------------------------------------------------------------
   50. MOBILE AND TABLET PASS

   No page overflows at 390px or 768px and nothing sits past the viewport
   edge, so the layout itself holds. What the sweep did find was legibility
   and pointer-target sizing.
   ---------------------------------------------------------------------- */

/* 50.1 — The micro-labels (eyebrows, kickers, stat tags, form labels) run
   10.6–11.4px. That is a deliberate editorial size on a desktop screen and
   too small on a phone, especially uppercase and letter-spaced. Lift the
   whole family to 12px on phones and both tablet orientations (iPad portrait
   is 834px and landscape 1024px, so the breakpoint has to clear both);
   letter-spacing tightens
   a touch so the longer ones still fit the boxes they sit in. */
@media (max-width: 1100px) {
	.kicker,
	.ref-kicker,
	.rail-label,
	.staffing-kicker,
	.statement-kicker,
	.format-tag,
	.format-stat,
	.fsapr-badge,
	.doc-zoom-note,
	.gv-age,
	.minute,
	.track,
	.role-code,
	.label,
	.legal-meta-label,
	.community-step span,
	.value-loop span,
	.lesson-time span,
	.build-grid small,
	.diligence-grid small,
	.society-ledger small,
	.investor-thesis small,
	.gv-arc b,
	.fbook-field label,
	.lw-form-shell label,
	.lw-form-shell .wpcf7-form label {
		font-size: 12px;
		letter-spacing: .09em;
	}
}

/* 50.2 — Footer column links measured 23px tall and the utility-bar links
   21px on tablet, both under the 24px WCAG 2.2 pointer target. The contact
   rows and social buttons are excluded: they set their own box above. */
.footer-grid a:not(.footer-contact-row):not(.social-link):not(.btn) {
	padding: 3px 0;
	margin: 4px 0;
}

.utility-links a {
	padding-top: 4px;
	padding-bottom: 5px;
}

/* Six of these are scoped to a parent in the base layers — `.lesson-25-step
   .minute`, `.gv-year .gv-age` and friends at (0,2,0) — so the flat selectors
   above lost. Match their weight. */
@media (max-width: 1100px) {
	.lesson-25-step .minute,
	.gv-year .gv-age,
	.gv-arc b,
	.staffing-format .format-tag,
	.open-role .role-code,
	.fire-test .label,
	body.harvard-square .lesson-25-step .minute,
	body.harvard-square .gv-year .gv-age,
	body.harvard-square .staffing-format .format-tag {
		font-size: 12px;
		letter-spacing: .09em;
	}
}

/* -------------------------------------------------------------------------
   51. CURRENT PAGE IN THE MAIN NAVIGATION

   The utility bar marked the current page; the main navigation did not, so in
   a twelve-item drawer there was no way to tell where you were.

   The desktop bar already owns an indicator: `.nav-link::after`, a gold rule
   that scales in on hover, focus-within and menu-open. A first attempt added a
   second rule as `::before`, which meant hovering the item for the page you
   were already on drew two gold lines. Reuse the existing one instead — the
   current page simply holds it open.
   ---------------------------------------------------------------------- */

.primary-nav .nav-link[aria-current="page"]::after,
body.harvard-square .primary-nav .nav-link[aria-current="page"]::after,
body.harvard-square.index-format .primary-nav .nav-link[aria-current="page"]::after {
	transform: scaleX(1);
}

/* The drawer has no such indicator — `.nav-link::after` is display:none below
   1180px — so it gets a gold edge on the row, which reads while scrolling. */
@media (max-width: 1180px) {
	.primary-nav .nav-item:has(.nav-link[aria-current="page"]) {
		background: linear-gradient(90deg, rgba(201, 162, 71, .1), transparent 60%);
		box-shadow: inset 3px 0 0 0 var(--gold);
	}

	.primary-nav .nav-link[aria-current="page"] {
		padding-left: 14px;
		font-weight: 900;
	}
}

/* -------------------------------------------------------------------------
   52. LONG DISPLAY STATEMENTS

   `.display-quote` is a hero statement: italic Playfair at up to 5.2rem with
   1.02 leading. That is right for the two-sentence statements it carries on
   Families, Program and Teachers & Buddies (105–117 characters). The Institute
   mission statement is 212 characters across four clauses — at display size it
   became seven lines of tight-leading italic, which is a wall rather than a
   statement.

   Extended italic is the specific problem: a high-contrast italic serif is
   fine for a line or two and slow to read at paragraph length. The long
   variant keeps the family and the voice but sets it roman, smaller, and with
   leading that lets the clauses breathe. Use `is-long` on any statement past
   roughly 140 characters.
   ---------------------------------------------------------------------- */

.display-quote.is-long,
body.harvard-square .display-quote.is-long,
body.harvard-square.index-format .display-quote.is-long {
	font-style: normal;
	font-weight: 600;
	font-size: clamp(1.65rem, 2.8vw, 2.7rem);
	line-height: 1.24;
	letter-spacing: -.018em;
	max-width: 20ch;
	max-width: min(100%, 950px);
	text-wrap: balance;
}

/* The clauses are parallel statements, so a slightly wider gold rule and a
   little more air below reads as a considered close rather than a stray dash. */
.display-quote.is-long + .gold-rule {
	margin-top: 26px;
}

@media (max-width: 620px) {
	.display-quote.is-long,
	body.harvard-square .display-quote.is-long {
		font-size: clamp(1.45rem, 6.2vw, 1.8rem);
		line-height: 1.3;
		letter-spacing: -.01em;
	}
}

/* -------------------------------------------------------------------------
   53. STORY SPLIT — HEADINGS THAT IGNORE THEIR COLUMN

   `.story-split` is a 462px / 666px pair, and `.story-copy h2` was a flat 63px
   in either one. In the narrow column that is about seven characters a line:
   on Partners it turned one sentence into a 403px tower, and on Public
   Exchange a 470px one. The heading has to answer to the column it is in, not
   to the viewport, so it is sized in container units.

   Also `align-items: center`. That is fine when the two columns are close in
   height and wrong when they are not — measured across the site the gap runs
   to 995px, and on the Partner Dashboard it pushed the copy 110px below the
   top of the mock it is meant to sit beside. Editorial splits align at the top.
   ---------------------------------------------------------------------- */

.story-split,
body.harvard-square .story-split,
body.harvard-square.index-format .story-split {
	align-items: start;
}

.story-split > * {
	container-type: inline-size;
}

.story-copy h2,
body.harvard-square .story-copy h2,
body.harvard-square.index-format .story-copy h2 {
	font-size: clamp(1.75rem, 8.4cqi, 3.35rem);
	line-height: 1.08;
}

/* The dashboard mock is a product screenshot: it needs the wide column, and
   the checklist beside it reads perfectly well in the narrow one. Swapping
   the proportions also gives the mock's own sidebar and stat rows room. */
#dashboard .story-split {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	gap: 54px;
}

@media (max-width: 900px) {
	#dashboard .story-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* §46 gave .platform-body a two-track grid to stop the stat cells being 84px
   wide, but stated it unconditionally — which outranked the base stylesheet's
   `@media (max-width: 620px) { .platform-body { grid-template-columns: 1fr } }`.
   The sidebar was hidden but its track was not, so on a phone the main pane
   was squeezed into 152px (96px inside its padding) and the mock grew to
   2,350px tall. Collapse it properly. */
@media (max-width: 760px) {
	.platform-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.platform-main {
		padding: 20px 18px;
	}

	.platform-kpis div {
		grid-template-columns: 78px minmax(0, 1fr);
		padding: 11px 12px;
	}
}

/* The two format cards carry different amounts of copy, so their buttons sat
   at different heights inside equal-height cards. Push them to the foot. */
#formats-25-45 .card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#formats-25-45 .card .btn {
	margin-top: auto;
}

#formats-25-45 .card p {
	margin-bottom: 22px;
}

/* -------------------------------------------------------------------------
   54. VIDEO

   A click-to-load facade rather than a bare <iframe>. An embedded YouTube
   player pulls several hundred KB of third-party script and sets cookies on
   every page view, whether or not anyone watches; the poster is a 67KB local
   JPEG and nothing reaches YouTube until the play button is pressed.
   ---------------------------------------------------------------------- */

.lw-video {
	position: relative;
	margin-top: 34px;
	border-radius: var(--radius);
	overflow: hidden;
	background: #05101f;
	box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .7);
}

.lw-video-trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
	aspect-ratio: 16 / 9;
}

.lw-video-trigger img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--ease-out), opacity .35s var(--ease);
}

.lw-video-trigger:hover img,
.lw-video-trigger:focus-visible img {
	transform: scale(1.02);
	opacity: .88;
}

/* Play button */
.lw-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--gold-bright);
	box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .6);
	transition: transform .3s var(--ease-out), background-color .3s var(--ease);
}

.lw-video-play::after {
	content: "";
	position: absolute;
	left: 52%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 15px 0 15px 25px;
	border-color: transparent transparent transparent var(--navy);
}

.lw-video-trigger:hover .lw-video-play,
.lw-video-trigger:focus-visible .lw-video-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #fff;
}

.lw-video-trigger:focus-visible {
	outline: 3px solid var(--gold2);
	outline-offset: 3px;
}

/* The player once it has been asked for */
.lw-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.lw-video-note {
	margin-top: 14px;
	font-size: .82rem;
	color: #b9c6d8;
}

@media (max-width: 620px) {
	.lw-video-play { width: 62px; height: 62px; }
	.lw-video-play::after { border-width: 11px 0 11px 18px; }
}

/* -------------------------------------------------------------------------
   55. HEADINGS ON VERY NARROW SCREENS

   At 320px — the narrowest phone still in use — four display headings hold a
   word longer than their own box: "international" wants 328px of a 292px
   column on Institutions, "Infrastructure." 264px of 222px on Investor. The
   base `overflow-wrap: break-word` then chops them at an arbitrary letter.

   Hyphenation is the right answer rather than shrinking the type: the page is
   `lang="en-US"`, so the browser breaks at real syllables and shows a hyphen.
   Headings only, and only where the screen is genuinely tight.
   ---------------------------------------------------------------------- */

@media (max-width: 430px) {
	main h1,
	main h2,
	main h3,
	.display-quote,
	.legal-prose h2,
	.legal-prose h3 {
		hyphens: auto;
		-webkit-hyphens: auto;
		/* A 4-character minimum after the break stopped "internation-al"
		   hyphenating at all, so break-word chopped it instead. */
		hyphenate-limit-chars: 8 3 2;
	}
}

/* Investor's statement panel is the tightest case — 222px of usable width for
   a 38px heading — so it also loses a little size below 380px. */
@media (max-width: 380px) {
	.fire-test h2,
	.signal-panel h2 {
		font-size: clamp(1.6rem, 8.4vw, 2rem);
	}
}

/* -------------------------------------------------------------------------
   56. HERO HEADINGS THAT NEVER SCALED DOWN

   Institutions, Investor and Careers use one-off hero components whose h1 is
   `clamp(3.4rem, 6vw, 6.5rem)`. On a phone 6vw is far below the 3.4rem floor,
   so the floor wins and the heading stays 54–58px at every width: on a 320px
   screen the Institutions h1 ran to twelve lines and a 666px-tall block, and
   still 10 lines at 390px. Every other hero on the site already carries a
   mobile clamp; these three were missed.
   ---------------------------------------------------------------------- */

@media (max-width: 620px) {
	.institution-hero h1,
	.investor-hero h1,
	.careers-hero h1,
	body.harvard-square .institution-hero h1,
	body.harvard-square .investor-hero h1,
	body.harvard-square .careers-hero h1 {
		font-size: clamp(2rem, 9vw, 2.75rem);
		letter-spacing: -.02em;
	}
}

/* The Teacher/Buddy comparison on Program sits below the split rather than
   inside its narrow column, so it needs its own breathing room above. */
#supervision .role-duo {
	margin-top: 46px;
}

/* The class-structure graphic under the 25-minute lesson steps on the home
   page. Width is left to `body.harvard-square .material-frame`, which caps
   every framed graphic on the site at 860px and centres it — no reason for
   this one to be the exception. Only the space above it is set here. */
.lesson-25-figure {
	margin-top: 38px;
}

@media (max-width: 620px) {
	.lesson-25-figure { margin-top: 26px; }
}

/* -------------------------------------------------------------------------
   57. LABELLED ASIDE IN A SECTION HEAD

   `.editorial-head` is a two-column grid, so a kicker above its paragraph has
   to share one grid cell or it becomes a third item and wraps to a new row.
   Wrapping the paragraph costs it `body.harvard-square .editorial-head > p`,
   which is a direct-child rule — restate its type here.
   ---------------------------------------------------------------------- */

.editorial-head .head-aside p,
body.harvard-square .editorial-head .head-aside p,
body.harvard-square.index-format .editorial-head .head-aside p {
	margin: 0;
	max-width: 760px;
	font-size: 1.06rem;
	line-height: 1.7;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   58. INVESTOR HERO SUB-HEADLINE

   `.hero-statement` is a summary line under the hero headline, not a section
   heading, so it must not compete with it. Left to the generic h2 scale it
   came out at 54.7px against a 95px h1 on desktop — and 32px against 35px on
   a phone, where the two read as rival headlines.
   ---------------------------------------------------------------------- */

.investor-hero .hero-statement,
body.harvard-square .investor-hero .hero-statement {
	font-family: var(--serif);
	font-size: clamp(1.2rem, 2vw, 1.8rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: #fff;
	margin: 30px 0 16px;
	max-width: 26ch;
}

.investor-hero .hero-sub + .hero-sub {
	margin-top: 16px;
}

.investor-hero .hero-sub strong {
	color: #fff;
}

@media (max-width: 620px) {
	.investor-hero .hero-statement,
	body.harvard-square .investor-hero .hero-statement {
		margin: 22px 0 14px;
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   59. INVESTOR HERO COMPOSITION

   Three things were working against this hero:

   1. `align-items: end` bottom-aligned the signal panel, so it began 373px
      down the page and left that much empty navy beside the headline — the
      largest void on the site.
   2. The grid ran 1320px wide (x=60…1380) while every other section on the
      page uses the 1180px wrap (x=130…1310). The headline therefore did not
      line up with any of the content beneath it.
   3. The headline was 95px. That was defensible when it sat above a single
      paragraph; with a sub-headline and two paragraphs under it, it crowds
      everything else out.
   ---------------------------------------------------------------------- */

/* Width comes from .wrap on the element itself, which already tracks the
   site's three gutter breakpoints — no reason to restate them here. */
.investor-hero .investor-hero-grid,
body.harvard-square .investor-hero .investor-hero-grid {
	align-items: start;
	gap: 58px;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

/* Held above the mobile rule in §56, which must keep the last word there. */
@media (min-width: 621px) {
	.investor-hero h1,
	body.harvard-square .investor-hero h1 {
		font-size: clamp(2.8rem, 5vw, 4.5rem);
		line-height: 1.04;
	}
}

/* The panel is a sidebar to the headline, so it should read a touch quieter. */
.investor-hero .signal-panel h2 {
	font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	line-height: 1.12;
}

/* Tablet landscape (1024px) kept two columns, which left the text column at
   ~494px — 26px too narrow for the two CTAs to sit on one line, so they
   stacked — and stranded ~570px of empty navy under the panel. One column
   from 1080px down: the same composition that already reads well at 768px. */
@media (max-width: 1080px) {
	.investor-hero .investor-hero-grid,
	body.harvard-square .investor-hero .investor-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.investor-hero .signal-panel {
		max-width: 720px;
	}
}

/* -------------------------------------------------------------------------
   60. INVESTOR THESIS — "THE QUESTION" PANEL

   Measured at 1440px before this section:

     .left h2   60.5px type in a 370px column  →  11 lines, 705px tall
     .left      1023px, which the grid then forced onto .right
     .right     four cards carrying 238–293px of dead space each

   The heading was sized `clamp(2.5rem, 4.2vw, 4.8rem)` — against the
   viewport, not against the 370px column it actually lives in. Same fault
   §53 fixed on .story-split: a display face has to answer to its own
   column, so it is sized in container units here too.

   Shortening the question also shortens the panel, which is what was
   inflating the cards: the grid stretches both tracks to the taller one.
   ---------------------------------------------------------------------- */

.investor-thesis,
body.harvard-square .investor-thesis {
	grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
}

.investor-thesis .left {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
}

.investor-thesis .left h2,
body.harvard-square .investor-thesis .left h2,
body.harvard-square.index-format .investor-thesis .left h2 {
	font-size: clamp(1.95rem, 10.4cqi, 3.15rem);
	line-height: 1.06;
	margin: 0;
}

/* The rule was a divider between question and answer; with the question now
   a third shorter it can carry the spacing instead of sitting on top of it. */
.investor-thesis .left .investor-rule {
	margin: 30px 0;
}

.investor-thesis .left > p:last-child {
	margin-bottom: 0;
}

/* Cards read as a list, so their labels get the same hairline the eyebrow
   in the left panel has — it ties the two halves together and gives the
   number something to sit against. */
.investor-thesis .right article {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.investor-thesis .right article h3 {
	margin: 0 0 12px;
	line-height: 1.18;
}

.investor-thesis .right article p {
	margin: 0;
}

/* The column rule above is plain-specificity but sits later in the cascade
   than base.css's `@media (max-width: 1050px) { .investor-thesis {
   grid-template-columns: 1fr } }`, so it was holding two columns down into
   tablet. Restate the collapse here rather than leaving it outranked. */
@media (max-width: 1050px) {
	.investor-thesis,
	body.harvard-square .investor-thesis {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Full-width now, so the supporting paragraph needs a measure of its
	   own — it was running to 890px, about 135 characters a line. */
	.investor-thesis .left > p {
		max-width: 68ch;
	}
}

/* -------------------------------------------------------------------------
   61. UTILITY BAR AT TABLET WIDTH

   base.css hides the utility bar at ≤980px; theme.css brings it back between
   761 and 1180 as a hidden-scrollbar `overflow-x: auto` row. Measured at
   768px the row is 819px of links inside a 738px box, so "Contact" — the last
   item — sits entirely outside the bar. It is reachable by dragging the row,
   but the scrollbar is hidden and there is no fade or arrow, so nothing tells
   anyone it is there. Adding "Florida Star Academy ↗" (142px) is what pushed
   it over.

   Two of the seven are also the Institute menu's Brands column and appear
   twice more in the drawer that replaces the nav at this width, so dropping
   them here costs no destination and buys 220px — enough that the row fits
   on one line with slack instead of scrolling blind.
   ---------------------------------------------------------------------- */

@media (max-width: 980px) {
	.utility-links .utility-society-advantages,
	.utility-links .utility-institutions {
		display: none;
	}
}


/* -------------------------------------------------------------------------
   62. MICRO-LABEL FLOOR ON TABLET AND PHONE

   The gold uppercase ordinals and section labels are set in rem, so they
   stay 10.9–11.2px at every width. On a phone that is below the floor §50
   set for body copy, and these carry the step numbering — "01", "02" — that
   tells a reader where they are in a sequence. Raised to 12px at tablet and
   below; desktop keeps the finer setting it was drawn with.
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.flow-steps span,
	.exchange-ladder span,
	.value-loop span,
	.seven-grid span,
	.community-step span,
	.harvard-quote > span,
	.institution-role-grid small,
	.society-ledger small,
	.investor-thesis small,
	.build-grid small,
	.diligence-grid small,
	/* Careers sets its step numbers in <b> rather than a span, which is why
	   they were missed the first time this floor was written. */
	.career-path-line b,
	/* The annual-offer badge is set at .68rem to sit with the other micro
	   labels on desktop, so it needs the same floor here. Its own rule lives
	   further down the file, so this one names the parent to outrank it on
	   specificity rather than relying on order. */
	.ssp-annual .ssp-annual-badge {
		font-size: .75rem;
	}
}

/* The ↗ is the only thing marking a link as leaving the site, and at .82em
   of a .72rem bar it was rendering at 9.4px. Keep it subordinate to its
   label, but never below 11px. */
.utility-external-mark {
	font-size: max(.82em, 11px);
}

/* -------------------------------------------------------------------------
   63. TYPE THAT KEPT GROWING AFTER THE PAGE STOPPED

   Measured every h1/h2/h3 at 1440px and again at 1920px: seventy-five
   headings across all twenty-five pages gain a line on the wider screen,
   inside a column that does not widen by a single pixel. Examples:

     .staffing-head h2      69px → 83px   column 647px both times   5 → 6 lines
     .editorial-head h2     35px → 41px   column 495px both times   2 → 3 lines
     .institution-callout   66px → 80px   column 560px both times   3 → 4 lines

   The cause is one thing repeated: these headings are sized in `vw`, but
   they live inside `.wrap`, which stops at 1180px. Past roughly 1232px the
   measure is frozen and only the type keeps growing, so every extra pixel
   of screen makes the line shorter. On `.institution-callout` that is also
   what drove the empty half of the panel from 267px at 1440 to 410px at
   1920: the heading beside it kept getting taller.

   Each size below is the value its own rule already produces at 1440px, so
   nothing changes at or below that width - the type simply stops growing
   where the page stops growing. Written out per rule rather than as a blunt
   `h2 { font-size: … }` so a heading that genuinely should scale with the
   viewport, like a full-bleed band, is free to keep doing it.
   ---------------------------------------------------------------------- */

@media (min-width: 1441px) {
	.hero-editorial .hero-copy h1,
	body.harvard-square .hero-editorial .hero-copy h1,
	body.harvard-square.index-format .hero-editorial .hero-copy h1 {
		font-size: 3.465rem;
	}

	.society-hero h1,
	body.harvard-square .society-hero h1,
	body.harvard-square.index-format .society-hero h1,
	.institution-hero h1,
	body.harvard-square .institution-hero h1,
	body.harvard-square.index-format .institution-hero h1,
	.careers-hero h1,
	body.harvard-square .careers-hero h1,
	body.harvard-square.index-format .careers-hero h1 {
		font-size: 5.4rem;
	}

	.registration-hero h1,
	body.harvard-square .registration-hero h1,
	body.harvard-square.index-format .registration-hero h1 {
		font-size: 3.78rem;
	}

	.editorial-head h2,
	body.harvard-square .editorial-head h2,
	body.harvard-square.index-format .editorial-head h2 {
		font-size: 2.205rem;
	}

	.section-head h2,
	body.harvard-square .section-head h2,
	body.harvard-square.index-format .section-head h2 {
		font-size: 2.79rem;
	}

	.split h2,
	body.harvard-square .split h2,
	body.harvard-square.index-format .split h2,
	.market-bridge h2,
	body.harvard-square .market-bridge h2,
	body.harvard-square.index-format .market-bridge h2 {
		font-size: 3.42rem;
	}

	.community-statement h2,
	body.harvard-square .community-statement h2,
	body.harvard-square.index-format .community-statement h2 {
		font-size: 3.78rem;
	}

	.id-copy h2,
	body.harvard-square .id-copy h2,
	body.harvard-square.index-format .id-copy h2,
	.institution-callout h2,
	body.harvard-square .institution-callout h2,
	body.harvard-square.index-format .institution-callout h2 {
		font-size: 4.14rem;
	}

	.global-voices-intro h2,
	body.harvard-square .global-voices-intro h2,
	body.harvard-square.index-format .global-voices-intro h2,
	.staffing-head h2,
	body.harvard-square .staffing-head h2,
	body.harvard-square.index-format .staffing-head h2 {
		font-size: 4.32rem;
	}

	.final-band h2,
	body.harvard-square .final-band h2,
	body.harvard-square.index-format .final-band h2,
	.value-hero h2,
	body.harvard-square .value-hero h2,
	body.harvard-square.index-format .value-hero h2 {
		font-size: 4.5rem;
	}

	.investor-cta h2,
	body.harvard-square .investor-cta h2,
	body.harvard-square.index-format .investor-cta h2 {
		font-size: 4.68rem;
	}

	.school-partner-callout .question-side h3,
	body.harvard-square .school-partner-callout .question-side h3,
	body.harvard-square.index-format .school-partner-callout .question-side h3 {
		font-size: 3.15rem;
	}

}

/* -------------------------------------------------------------------------
   64. THE COMMUNITY-QUESTION CALLOUT'S MEASURE

   This callout spans the full 1180px wrap on Families, Partners and the
   Institute, and its paragraph was set across the whole of it: 1113–1142px
   of 16px text, about 130 characters a line. Comfortable reading runs to
   about 75; past roughly 90 the eye starts losing its place on the return
   sweep. The heading above it is left-aligned, so a narrower column under
   it reads as deliberate rather than as a stray indent.
   ---------------------------------------------------------------------- */

.community-question p,
.impact-line > .community-question p {
	max-width: 74ch;
}

/* -------------------------------------------------------------------------
   65. THE "ASK LOCALLY" PANEL ON INSTITUTIONS

   §63 stopped this callout's heading inflating (the empty half ran to 410px
   at 1920 and now holds at 267px), but 267px of 641 is still 42% of the
   panel sitting empty under the button. The two cells are a long explainer
   and a short question, and they will never be the same length, so the
   space is real — it just needs to read as framing rather than as a cell
   that ran out. Centring it costs the eyebrow's alignment with the one
   opposite; a panel that looks composed is worth more than that.
   ---------------------------------------------------------------------- */

@media (min-width: 901px) {
	.institution-callout > div + div {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.institution-callout > div + div > :first-child {
		margin-top: 0;
	}

	.institution-callout > div + div .actions {
		margin-bottom: 0;
	}
}

/* Shown only to logged-in administrators, where a form should have been. */
.lw-form-missing {
	padding: 18px 20px;
	border: 1px dashed #b9832a;
	border-radius: 12px;
	background: #fdf7e9;
	color: #6d4f12;
	font-size: .95rem;
	line-height: 1.6;
}

/* Legacy anchor. The teen section's id became #global-spotlight with the
   October 2026 rename, but the old fragment was linked from the navigation
   and may sit in bookmarks or anyone's notes, so an empty target keeps those
   links landing in the same place. It occupies no space and is skipped by
   assistive technology. */
.lw-anchor-alias {
	display: block;
	height: 0;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   66. THE AGE CARD RAIL ON TABLET

   `.age-year-card` is `repeat(auto-fit, minmax(240px, 1fr))`, so from about
   500px up it forms two equal columns. At 768px that gave the rail half the
   card — 359px for a number, a module name and one CEFR line — while the
   body was squeezed into the other half and ran to 564px.

   The rail is stretched to match that height, and at ≤900px it is a wrapping
   flex row. `align-content` then defaults to stretch, so the wrapped line was
   pushed down with the free space: the CEFR note sat at y293 in a 564px rail,
   orphaned 270px below "Sparkle Lab" with nothing between them. Measured on
   every one of the fourteen cards, 173–218px adrift.

   Below the desktop breakpoint the card now stacks instead: the rail runs
   across the top as a compact row and the body sits beneath it, which is the
   treatment that already reads correctly on a phone. `align-content` is
   pinned as well, so a stretched rail can never strand its own second line
   again.
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.age-year-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.age-rail {
		align-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
   67. PRIMARY NAV SIZE BETWEEN 1181 AND 1365

   The desktop navigation appears at about 1181px, and between there and
   1365px its twelve links were set at 10.88px — below the size used from
   1366 up (11.84px) and small for primary navigation on what is the most
   common laptop width.

   The step-down was presumably there to make twelve items fit. Measured, it
   is no longer needed: at the larger size the nav row is 861px instead of
   818px and, at the tightest width where the nav is visible at all, it still
   clears the logo by 38px on one row with no page overflow. This simply
   gives the band the same size the wider band already uses rather than
   introducing a third.
   ---------------------------------------------------------------------- */

@media (min-width: 1181px) and (max-width: 1365px) {
	.primary-nav .nav-link,
	body.harvard-square .primary-nav .nav-link,
	body.harvard-square.index-format .primary-nav .nav-link {
		font-size: .74rem;
	}
}

/* -------------------------------------------------------------------------
   68. "DISCOVER THE …" LINK IN THE MEGA PANELS

   `.mega-feature-link` is an inline-flex row of text with no vertical
   padding, so it measured 163 × 22px — two pixels under the 24px minimum
   WCAG 2.2 asks of a pointer target. It is easy to miss on desktop, where
   the mega panel is a hover menu driven by a mouse, but in the drawer it is
   a touch target like any other. Padding rather than a height so the link
   keeps hugging its text, and a negative margin so the extra space does not
   shift the panel's rhythm.
   ---------------------------------------------------------------------- */

.mega-feature-link {
	padding-block: 5px;
	margin-top: 14px;
}

/* -------------------------------------------------------------------------
   69. SHINING SPEECH PROFESSIONAL

   This page keeps the layout of the client's standalone HTML — gradient
   hero with a tilted image, glassy metric tiles, numbered cards, a five-up
   level row, a two-column roadmap, figure trio, FAQ cards, gradient close.
   What changes is the palette and the controls.

   The source shipped its own tokens: --navy #071843 (bluer and darker than
   ours), --blue #3558db, --gold #f3ca76, --soft #eef3ff, plus a purple drift
   in both gradients (#35237b, #5544ce, #5265ec). None of those exist on this
   site. Every one is mapped onto an Institute token here — navy, navy2,
   gold, gold2, gold-ink, cream, soft, line, muted — so the page reads in the
   site's colours while keeping the source's shapes. Buttons are the theme's
   `.btn` rather than the source's own pill styles.

   Prefixed `ssp-` throughout: the source's class names (.card, .section,
   .level, .split, .faq) already mean other things in this stylesheet.
   ---------------------------------------------------------------------- */

.ssp {
	background: var(--soft);
}

/* ---- hero ---------------------------------------------------------- */

/* `[class*="-hero"]` zeroes --section-pad for the full-bleed split heroes,
   and `body.harvard-square main > section` (0,1,3) then outranks any plain
   `padding` set here — which left this hero with none at all, its metric
   tiles touching the band's bottom edge. The padded heroes (.hero-home,
   .registration-hero, .investor-hero) all put their value back through the
   variable, so this one does too. */
.ssp-hero {
	--section-pad: clamp(58px, 6vw, 92px);
	position: relative;
	overflow: hidden;
	color: #fff;
	/* The source layered a purple radial over a blue gradient. Same shape,
	   our navy and a gold-tinted glow instead. */
	background:
		radial-gradient(circle at 85% 15%, rgba(201, 162, 71, .22), transparent 45%),
		linear-gradient(125deg, var(--navy-deep, #071426), var(--navy) 55%, var(--navy2));
}

.ssp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, transparent 0 150px, rgba(255, 255, 255, .035) 151px 152px);
	pointer-events: none;
}

.ssp-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: center;
}

.ssp-hero h1 {
	color: #fff;
	font-size: clamp(2.8rem, 5.4vw, 4.6rem);
	line-height: 1.04;
	margin: 20px 0 23px;
}

/* The source fills the emphasised words with a gold gradient clipped to the
   glyphs. Same technique, our two golds. The flat colour is declared first
   so anything that does not support background-clip — or that runs in forced
   colours, where the clip is dropped and the text would vanish — still gets
   a readable gold. */
.ssp-hero h1 em {
	font-style: normal;
	color: var(--gold2);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	@media not (forced-colors: active) {
		.ssp-hero h1 em {
			background: linear-gradient(105deg, #fff5cc, var(--gold-bright));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
	}
}

.ssp-intro {
	font-size: 1.1rem;
	color: #dce4ef;
	max-width: 590px;
}

.ssp-intro strong {
	color: #fff;
	font-weight: 700;
}

/* The source sets the second line a step dimmer than the lead paragraph, so
   the two read as statement and subtitle rather than one block. */
.ssp-intro-sub {
	color: #b9c7da;
}

.ssp-actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	margin-top: 30px;
}

/* The source tilts this card the opposite way to the parent-guide cover in
   .fbook-media (+1deg against its -1.6deg) and rounds it harder, at 22px.
   Those are the hero's own numbers, kept as drawn; the straighten-on-hover
   is the site's and is kept too. */
.ssp-hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 22px;
	box-shadow: 0 24px 95px rgba(5, 10, 45, .8);
	border: 1px solid rgba(255, 255, 255, .4);
	transform: rotate(1deg);
	transition: transform .55s var(--ease-out);
}

.ssp-hero-media:hover .ssp-hero-img {
	transform: rotate(0) translateY(-4px);
}

.ssp-hero-caption {
	font-size: .8rem;
	color: #dce4ef;
	margin-top: 17px;
	text-align: center;
}

.ssp-metrics {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 54px;
}

.ssp-metric {
	padding: 22px 24px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
	border-radius: 17px;
	backdrop-filter: blur(9px);
}

.ssp-metric b {
	display: block;
	font-family: var(--serif);
	font-size: 2rem;
	line-height: 1.2;
	color: var(--gold2);
}

.ssp-metric span {
	font-size: .78rem;
	color: #dce4ef;
}

/* ---- sections -------------------------------------------------------- */

.ssp-section {
	--section-pad: clamp(56px, 6.4vw, 92px);
}

.ssp-section.light {
	background: var(--white);
}

/* The source's pale band was a blue-violet wash; this is the site's cream. */
.ssp-section.pale {
	background: linear-gradient(135deg, var(--cream), var(--soft));
}

.ssp-section-head {
	max-width: 770px;
	margin-bottom: 38px;
}

.ssp-section h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.16;
	margin: 11px 0 16px;
}

.ssp-section-head p {
	font-size: 1.06rem;
	color: var(--muted);
}

/* Most section heads carry a single sentence; the structure one now runs to
   four paragraphs, which need their own rhythm rather than the stacked
   default margin. */
.ssp-section-head p + p {
	margin-top: 14px;
}

/* ---- cards ----------------------------------------------------------- */

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

.ssp-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 19px;
	padding: 28px;
	box-shadow: var(--shadow-soft);
}

.ssp-card h3 {
	font-size: 1.3rem;
	line-height: 1.25;
	margin: 12px 0;
}

.ssp-card p {
	color: var(--muted);
	margin-bottom: 0;
}

.ssp-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	border-radius: 12px;
	font-family: var(--academic-sans);
	font-weight: 900;
	color: var(--gold-ink);
	background: var(--cream);
	border: 1px solid var(--line);
}

/* ---- split + features ------------------------------------------------ */

.ssp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 55px;
	align-items: center;
}

.ssp-lead {
	color: var(--muted);
	font-size: 1.04rem;
}

.ssp-feature {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.ssp-feature strong {
	display: block;
	color: var(--ink);
}

.ssp-feature span {
	color: var(--muted);
	font-size: .9rem;
}

.ssp-image-card {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: var(--shadow);
}

.ssp-figure-note {
	font-size: .85rem;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
}

/* ---- levels ---------------------------------------------------------- */

.ssp-levels {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 13px;
}

.ssp-level {
	padding: 23px 17px;
	border-radius: 17px;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 4px solid var(--gold);
}

.ssp-level b {
	font-family: var(--serif);
	font-size: 1.5rem;
	color: var(--navy);
}

.ssp-level span {
	display: block;
	font-size: .82rem;
	color: var(--muted);
	margin-top: 7px;
}

/* ---- admissions banner ----------------------------------------------- */

.ssp-age-banner {
	margin-top: 26px;
	background: linear-gradient(135deg, var(--navy), var(--navy2));
	color: #fff;
	border-radius: 20px;
	padding: 27px 32px;
	display: flex;
	gap: 25px;
	justify-content: space-between;
	align-items: center;
}

.ssp-age-banner strong {
	font-family: var(--serif);
	font-size: 1.22rem;
	font-weight: 700;
}

.ssp-age-banner p {
	margin: 6px 0 0;
	color: #dce4ef;
	font-size: .95rem;
}

.ssp-badge {
	background: var(--gold2);
	color: var(--navy);
	padding: 8px 14px;
	border-radius: 100px;
	font-family: var(--academic-sans);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .06em;
	white-space: nowrap;
}

/* ---- roadmap --------------------------------------------------------- */

.ssp-roadmap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ssp-road {
	display: flex;
	gap: 17px;
	align-items: flex-start;
	background: var(--white);
	padding: 23px;
	border-radius: 16px;
	border: 1px solid var(--line);
}

.ssp-road > b {
	font-family: var(--serif);
	color: var(--gold-ink);
	font-size: 1.45rem;
	min-width: 38px;
}

.ssp-road h3 {
	margin: 0 0 4px;
	font-size: 1.12rem;
}

.ssp-road p {
	margin: 0;
	color: var(--muted);
	font-size: .9rem;
}

.ssp-note {
	margin-top: 26px;
	padding: 18px 22px;
	border-left: 3px solid var(--gold);
	background: var(--white);
	border-radius: 0 14px 14px 0;
	font-size: .9rem;
	color: var(--muted);
}

.ssp-note strong {
	color: var(--ink);
}

/* ---- visuals --------------------------------------------------------- */

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

.ssp-visuals figure {
	margin: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
}

.ssp-visuals img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center;
}

.ssp-visuals figcaption {
	padding: 15px 18px;
	font-size: .88rem;
	font-weight: 700;
	color: var(--ink);
}

/* Hovering a slide pushes in a little. The figure already clips, so the
   image grows inside a frame that does not move and nothing reflows - it is
   a transform, so the grid never recalculates. The shadow is the one the
   other cards on this page lift with, so the gesture reads as the same
   family even though these are not cards you can click. */
@media (prefers-reduced-motion: no-preference) {
	.ssp-visuals figure {
		transition: box-shadow .35s var(--ease);
	}

	.ssp-visuals img {
		transition: transform .5s var(--ease-out);
	}

	.ssp-visuals figure:hover {
		box-shadow: var(--shadow);
	}

	.ssp-visuals figure:hover img {
		transform: scale(1.07);
	}
}

/* ---- blueprint card -------------------------------------------------- */

.ssp-blueprint h3 {
	font-size: 1.55rem;
	margin: 12px 0;
}

/* Upright, like the site's own pull-quote .big-statement. Italic here is
   reserved for an <em> inside a statement, not for the whole line, and the
   serif at 700 is what carries the emphasis instead. */
.ssp-quote {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--navy);
	border-top: 1px solid var(--line);
	margin-top: 20px;
	padding-top: 20px;
}

.ssp-fineprint {
	font-size: .84rem;
	color: var(--muted);
	margin-bottom: 0;
}

/* ---- faq ------------------------------------------------------------- */

/* The FAQ list is capped at 850px and centred, so its heading has to be
   centred on the same column — left-aligned above a centred list reads as a
   misalignment. The site centres a section head the same way elsewhere
   (text-align plus margin-inline on .section-head). */
.ssp-faq,
#faq .ssp-section-head {
	max-width: 850px;
	margin-inline: auto;
}

#faq .ssp-section-head {
	text-align: center;
}

/* `.eyebrow` is a block-level flex box, so `text-align` cannot move it — it
   stretches and leaves its rule and label on the left. Contact centres its
   own the same way: shrink to the label, then auto margins. */
#faq .ssp-section-head .eyebrow {
	width: fit-content;
	margin-inline: auto;
}

.ssp-faq details {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 13px;
	padding: 18px 24px;
	margin: 10px 0;
}

.ssp-faq summary {
	font-weight: 700;
	cursor: pointer;
	color: var(--ink);
}

.ssp-faq details p {
	color: var(--muted);
	margin: 12px 0 4px;
}

/* ---- closing band ---------------------------------------------------- */

.ssp-cta {
	background:
		radial-gradient(circle at 92% 10%, rgba(201, 162, 71, .2), transparent 45%),
		linear-gradient(115deg, var(--navy), var(--navy2));
	color: #fff;
	--section-pad: clamp(58px, 6vw, 92px);
}

.ssp-cta h2 {
	color: #fff;
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	margin: 10px 0;
}

.ssp-cta p {
	color: #dce4ef;
	max-width: 680px;
}

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 900px) {
	.ssp-hero-grid,
	.ssp-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssp-hero-img {
		max-width: 650px;
		margin: auto;
	}

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

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

	.ssp-roadmap {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 620px) {
	.ssp-grid3,
	.ssp-visuals {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.ssp-metric {
		padding: 16px;
	}

	.ssp-age-banner {
		display: block;
	}

	.ssp-badge {
		display: inline-block;
		margin-top: 16px;
	}

	.ssp-visuals img {
		height: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ssp-card,
	.ssp-road,
	.ssp-plan {
		transition: transform .25s var(--ease-out), box-shadow .25s var(--ease);
	}

	.ssp-card:hover,
	.ssp-road:hover,
	.ssp-plan:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow);
	}
}

/* Hero entrance. Every other hero on the site staggers its copy in with
   lw-hero-in; this one was the only page without it. Same keyframe, same
   delays as .hero-editorial so the two feel identical. */
.ssp-hero-copy > * {
	animation: lw-hero-in .95s var(--ease-out) both;
}

.ssp-hero-copy > *:nth-child(2) { animation-delay: .08s; }
.ssp-hero-copy > *:nth-child(3) { animation-delay: .16s; }
.ssp-hero-copy > *:nth-child(4) { animation-delay: .24s; }
.ssp-hero-copy > *:nth-child(n+5) { animation-delay: .32s; }

/* -------------------------------------------------------------------------
   70. SHINING SPEECH PROFESSIONAL — EYEBROWS AND BUTTONS

   The page now uses the theme's own `.eyebrow`, which carries the 26×2px
   gold rule that fades out before the label. Its two dark grounds need the
   pale variant, so they join the existing lists rather than redefining it.

   Buttons: the site has two treatments. `body.harvard-square .btn` squares
   them to 3px on the inner pages, and the home page's `index-format` block
   re-rounds to a 999px pill — uppercase, .74rem, 14/20 padding. This is a
   marketing landing page like home, so it takes the pill. Both of those
   rules carry `!important`, so matching them needs the body class in the
   selector to outrank `body.harvard-square .btn` (0,2,1).
   ---------------------------------------------------------------------- */

.ssp-hero .eyebrow,
.ssp-cta .eyebrow {
	color: var(--gold2);
}

.ssp-hero .eyebrow::before,
.ssp-cta .eyebrow::before {
	background: linear-gradient(90deg, var(--gold2), rgba(229, 207, 152, 0));
}

body.harvard-square .ssp .btn,
body.harvard-square.index-format .ssp .btn {
	border-radius: 999px !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .74rem;
	padding: 14px 22px;
}

/* -------------------------------------------------------------------------
   71. SHINING SPEECH PROFESSIONAL — STRUCTURE, LESSON TABLE AND TUITION

   The "Young Adults and Adults" revision adds five sections. Four of them
   reuse what §69 already defines (.ssp-grid3, .ssp-card, .ssp-num,
   .ssp-age-banner, .ssp-note, .ssp-feature); only three things are new —
   the lesson-format table, the tuition figures, and an admissions banner
   whose right-hand slot holds a button instead of a badge.

   The source styled these inline in its own palette (#071843 headings,
   #60708d body, #f3ca76 accents). Here they take the theme tokens, and the
   featured plan's accent rule matches .ssp-level's 4px gold top edge rather
   than inventing a second one.
   ---------------------------------------------------------------------- */

/* The two closing notes under "How learning works" sit outside a .ssp-split,
   so they need the gap the split column would otherwise have given them. */
.ssp-feature-list {
	margin-top: 28px;
}

/* ---- lesson format table --------------------------------------------- */

/* Three columns of prose do not fit a phone, so the table scrolls inside
   its own box rather than stretching the page. tabindex makes that scroller
   reachable from the keyboard; the wrapper carries the frame so the sticky
   header row can keep its own background. */
.ssp-table-wrap {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 19px;
	box-shadow: var(--shadow-soft);
	overflow-x: auto;
}

.ssp-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: .95rem;
}

.ssp-table th,
.ssp-table td {
	padding: 16px 22px;
	text-align: left;
	vertical-align: top;
}

.ssp-table thead th {
	font-family: var(--academic-sans);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gold-ink);
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}

.ssp-table tbody tr + tr {
	border-top: 1px solid var(--line);
}

.ssp-table tbody td:first-child {
	font-family: var(--academic-sans);
	font-weight: 900;
	color: var(--navy);
	white-space: nowrap;
}

.ssp-table tbody td:nth-child(2) {
	color: var(--ink);
	font-weight: 600;
}

.ssp-table tbody td:last-child {
	color: var(--muted);
}

/* The table's min-width means phones scroll it sideways, which is invisible
   until you try. The hint says so, and only where it is true. */
.ssp-table-hint {
	display: none;
	font-family: var(--academic-sans);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}

/* ---- tuition plans ----------------------------------------------------- */

/* Two pathway cards side by side: Standard on white, Extended on navy as the
   recommended one. They are their own component rather than .ssp-card because
   a plan carries a kicker, a price, a rate line, a tick list and a full-width
   button, and the Extended card inverts all of it onto a dark ground. */
.ssp-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}

.ssp-plan {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 19px;
	padding: 34px;
	box-shadow: var(--shadow-soft);
}

.ssp-plan.featured {
	background: linear-gradient(150deg, var(--navy), var(--navy2));
	border-color: rgba(255, 255, 255, .14);
	box-shadow: var(--shadow);
	color: #dce4ef;
}

.ssp-plan h3 {
	font-size: 1.75rem;
	line-height: 1.15;
	margin: 12px 0 6px;
}

.ssp-plan.featured h3 {
	color: #fff;
}

.ssp-plan-line {
	color: var(--muted);
	margin: 0;
}

.ssp-plan.featured .ssp-plan-line {
	color: #b9c7da;
}

/* The price is the card's loudest element, so it gets the serif at display
   size with the qualifier riding small beside it on the baseline. */
.ssp-plan-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 6px;
}

.ssp-plan-price b {
	font-family: var(--serif);
	font-size: clamp(2.6rem, 4.4vw, 3.5rem);
	line-height: 1;
	color: var(--navy);
}

.ssp-plan.featured .ssp-plan-price b {
	color: var(--gold2);
}

.ssp-plan-price span {
	font-family: var(--academic-sans);
	font-size: .86rem;
	font-weight: 700;
	color: var(--muted);
}

.ssp-plan.featured .ssp-plan-price span {
	color: #b9c7da;
}

.ssp-plan-rate {
	font-size: .88rem;
	color: var(--muted);
	margin: 0 0 18px;
}

.ssp-plan-terms {
	font-size: .86rem;
	color: var(--muted);
	margin: 0 0 16px;
}

.ssp-plan.featured .ssp-plan-terms {
	color: #b9c7da;
}

.ssp-plan-rate strong {
	color: var(--ink);
}

.ssp-plan.featured .ssp-plan-rate {
	color: #b9c7da;
}

.ssp-plan.featured .ssp-plan-rate strong {
	color: #fff;
}

/* The ticks are decoration in front of the text, so they are drawn rather
   than typed — a list marker read aloud before every line adds nothing. */
.ssp-plan-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 14px;
}

.ssp-plan-list li {
	position: relative;
	padding-left: 32px;
	font-size: .93rem;
	color: var(--ink);
}

.ssp-plan.featured .ssp-plan-list li {
	color: #dce4ef;
}

.ssp-plan-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--cream);
	border: 1px solid var(--line);
}

.ssp-plan.featured .ssp-plan-list li::before {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .22);
}

/* The tick itself: two borders on a rotated box, so it scales with the text
   and needs no icon font. */
.ssp-plan-list li::after {
	content: "";
	position: absolute;
	left: 6.5px;
	top: .4em;
	width: 5px;
	height: 9px;
	border: solid var(--gold-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ssp-plan.featured .ssp-plan-list li::after {
	border-color: var(--gold2);
}

.ssp-plan-list strong {
	color: var(--navy);
}

.ssp-plan.featured .ssp-plan-list strong {
	color: #fff;
}

/* ---- annual upfront offer ---------------------------------------------- */

/* A second checkout inside each plan. It is the whole panel that is the link
   rather than a button inside it, so the price, the saving and the target are
   one target - but it still lifts and shows a focus ring like any control.
   The panel stays cream on both cards: on the navy one that contrast is what
   separates the annual option from the monthly button below it. */
.ssp-annual {
	display: block;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #fdf6e4, var(--cream));
	border: 1px solid rgba(192, 149, 47, .32);
	border-radius: 16px;
	padding: 20px 22px;
	color: var(--ink);
	text-decoration: none;
}

.ssp-annual.on-dark {
	background: linear-gradient(135deg, #fbeec9, #f5e3b4);
	border-color: rgba(255, 255, 255, .28);
}

.ssp-annual-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.ssp-annual-head strong {
	font-size: 1rem;
	color: var(--navy);
}

.ssp-annual-badge {
	flex: 0 0 auto;
	background: linear-gradient(135deg, var(--gold-bright), var(--gold));
	color: var(--navy-deep, #071426);
	border-radius: 100px;
	padding: 6px 13px;
	font-family: var(--academic-sans);
	font-size: .68rem;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ssp-annual-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin: 12px 0 10px;
}

.ssp-annual-price b {
	font-family: var(--serif);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--navy);
}

/* The struck price is the old one, so <s> carries that meaning in the markup
   and the muted tone keeps it from competing with the new figure. */
.ssp-annual-price s {
	font-family: var(--serif);
	font-size: 1.25rem;
	color: var(--muted);
}

.ssp-annual-note {
	display: block;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--muted);
}

.ssp-annual-note strong {
	color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
	.ssp-annual {
		transition: transform .25s var(--ease-out), box-shadow .25s var(--ease);
	}
}

.ssp-annual:hover,
.ssp-annual:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(170, 125, 35, .45);
}

/* Full-width button pinned to the bottom, so both cards' buttons line up
   however long the lists above them run. `auto` still does that with the
   enquiry link below it: the free space collects above the button, and the
   pair settles at the foot of the card together. */
.ssp-plan .btn {
	margin-top: auto;
	width: 100%;
}

/* The button goes straight to checkout, so the card also keeps a way to ask
   first — quieter than the button, but a real target, not fine print. */
.ssp-plan-ask {
	display: block;
	/* Padding rather than margin for most of the gap: it looks identical but
	   gives the link a 34px-tall target instead of the 22px the text alone
	   would offer, which matters next to a button that goes to checkout. */
	margin-top: 8px;
	padding: 6px 0;
	text-align: center;
	font-size: .84rem;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(95, 109, 132, .4);
}

.ssp-plan-ask:hover,
.ssp-plan-ask:focus-visible {
	color: var(--navy);
	text-decoration-color: currentColor;
}

.ssp-plan.featured .ssp-plan-ask {
	color: #b9c7da;
	text-decoration-color: rgba(185, 199, 218, .45);
}

.ssp-plan.featured .ssp-plan-ask:hover,
.ssp-plan.featured .ssp-plan-ask:focus-visible {
	color: #fff;
	text-decoration-color: currentColor;
}

/* ---- summer intensive -------------------------------------------------- */

.ssp-summer {
	margin-top: 22px;
	background: linear-gradient(135deg, var(--navy), var(--navy2));
	color: #dce4ef;
	border-radius: 20px;
	padding: 30px 34px;
	display: flex;
	gap: 28px;
	justify-content: space-between;
	align-items: center;
}

.ssp-summer h3 {
	color: #fff;
	font-size: 1.4rem;
	margin: 10px 0 8px;
}

.ssp-summer p {
	margin: 0;
	font-size: .95rem;
	color: #dce4ef;
}

.ssp-summer strong {
	color: #fff;
}

.ssp-summer .eyebrow {
	color: var(--gold2);
}

.ssp-summer .eyebrow::before {
	background: linear-gradient(90deg, var(--gold2), rgba(229, 207, 152, 0));
}

.ssp-summer .btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---- admissions banner with a button ---------------------------------- */

/* #who-can-join puts a .btn where the other banners put a .ssp-badge. The
   button must not stretch or shrink in the flex row. */
.ssp-age-banner .btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.ssp-plans {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssp-plan {
		padding: 28px;
	}

	.ssp-summer {
		display: block;
	}

	.ssp-summer .btn {
		margin-top: 20px;
	}
}

@media (max-width: 620px) {
	.ssp-table th,
	.ssp-table td {
		padding: 14px 16px;
	}

	.ssp-age-banner .btn {
		margin-top: 18px;
	}

	.ssp-table-hint {
		display: block;
	}
}