/* =========================================================================
   LEARN & WORK FLORIDA — DESIGN LAYER
   Sits on top of base.css. Typography, brand imagery, motion and polish.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */

:root {
	--navy: #0b1d3a;
	--navy2: #142a50;
	--navy-deep: #071426;
	--navy-ink: #050f1d;

	--gold: #c0952f;
	--gold-bright: #c9a247;
	/* Hover gold. Lighter than every resting gold so the change is legible on
	   cream and white, and still 7.2:1 against the darkest navy ground, which
	   the old navy hover was not - it matched the ground at 1.0:1. */
	--gold-hover: #d8b465;
	--gold2: #e5cf98;
	--gold-glow: rgba(201, 162, 71, .32);

	--ink: #1b2536;
	--muted: #5f6d84;   /* 4.7:1+ on every light ground the site uses */
	--soft: #f5f7fa;
	--cream: #faf7f1;
	--line: #e3e7ee;
	--line-soft: #eef1f5;
	--white: #fff;

	--radius: 22px;
	--radius-lg: 30px;
	--radius-sm: 14px;

	--shadow: 0 18px 48px rgba(11, 29, 58, .09);
	--shadow-lift: 0 30px 70px -18px rgba(11, 29, 58, .26);
	--shadow-soft: 0 10px 30px rgba(11, 29, 58, .055);

	--serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------------------
   2. TYPOGRAPHY
   ---------------------------------------------------------------------- */

body {
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--ink);
	letter-spacing: -.003em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.logo-main,
.display-quote,
.big-line,
.age,
.statement-text,
.hero-wordmark {
	font-family: var(--serif);
	font-weight: 700;
	letter-spacing: -.028em;
}

h1 {
	letter-spacing: -.038em;
	line-height: 1.02;
}

h2 {
	letter-spacing: -.03em;
	line-height: 1.06;
}

h3 {
	letter-spacing: -.018em;
	line-height: 1.22;
	font-weight: 700;
}

strong, b {
	font-weight: 700;
}

.eyebrow,
.kicker,
.ref-kicker,
.staffing-kicker,
.mega-eyebrow,
.mega-label,
.rail-label,
.statement-kicker,
.role-tag,
.format-tag {
	font-family: var(--sans);
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	font-size: .71rem;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--gold);
	margin-bottom: 16px;
}

.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: linear-gradient(90deg, var(--gold), rgba(201, 162, 71, 0));
	flex: 0 0 auto;
	border-radius: 2px;
}

.navy-section .eyebrow,
.cta-section .eyebrow,
.hero-home .eyebrow,
.hero-editorial.dark .eyebrow,
.dark .eyebrow {
	color: var(--gold2);
}

.lead,
.page-lead,
.hero-lead,
.hero-sub {
	font-weight: 400;
	letter-spacing: -.008em;
}

/* -------------------------------------------------------------------------
   3. HEADER — brand lockup, utility bar, nav choreography
   ---------------------------------------------------------------------- */

.site-header {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid rgba(11, 29, 58, .07);
	transition: box-shadow .35s var(--ease), background .35s var(--ease);
}

.site-header.is-stuck {
	box-shadow: 0 14px 40px -18px rgba(11, 29, 58, .35);
	background: rgba(255, 255, 255, .97);
}

.header-utility {
	background: linear-gradient(100deg, var(--navy-ink), var(--navy) 46%, var(--navy2));
	position: relative;
	overflow: hidden;
}

.header-utility::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(900px 60px at 78% 50%, rgba(201, 162, 71, .22), transparent 70%);
	pointer-events: none;
}

.utility-inner {
	position: relative;
	z-index: 1;
	min-height: 36px;
}

.utility-inner > span {
	font-weight: 500;
	letter-spacing: .05em;
	opacity: .78;
}

.utility-links a {
	font-weight: 600;
	letter-spacing: .04em;
	position: relative;
	padding-bottom: 2px;
}

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

.utility-links a:hover::after,
.utility-links a[aria-current="page"]::after {
	right: 0;
}

.utility-links a[aria-current="page"] {
	color: var(--gold2);
	opacity: 1;
}

/* Brand lockup */
.topbar {
	min-height: 96px;
	transition: min-height .35s var(--ease);
}

.site-header.is-stuck .topbar {
	min-height: 78px;
}

.logo {
	min-width: 0;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.logo-mark {
	display: block;
	width: auto;
	height: 62px;
	max-width: 100%;
	transition: height .35s var(--ease), transform .45s var(--ease);
	transform-origin: left center;
}

.site-header.is-stuck .logo-mark {
	height: 50px;
}

.logo:hover .logo-mark {
	transform: scale(1.02);
}

/* Nav links */
.primary-nav .nav-link {
	font-family: var(--sans);
	font-weight: 650;
	font-size: .875rem;
	letter-spacing: -.005em;
	color: #2b3545;
	min-height: 96px;
	transition: color .25s var(--ease), min-height .35s var(--ease);
}

.site-header.is-stuck .primary-nav .nav-link {
	min-height: 78px;
}

.primary-nav .nav-link::after {
	background: linear-gradient(90deg, var(--gold), var(--gold2));
	height: 2.5px;
	border-radius: 3px;
}

.primary-nav .nav-item > .nav-topline > .nav-link[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Mega menu */
.mega-menu {
	border-radius: 0 0 26px 26px;
	box-shadow: 0 34px 80px -28px rgba(7, 22, 45, .42);
	border-top: 2px solid var(--gold);
	animation: lw-mega .34s var(--ease-out) both;
}

@keyframes lw-mega {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mega-intro h2 {
	font-family: var(--serif);
	letter-spacing: -.03em;
}

.mega-feature-link,
.text-arrow,
.mega-cta {
	font-weight: 700;
	letter-spacing: -.005em;
}

.mega-feature-link span,
.text-arrow,
.mega-cta {
	transition: transform .3s var(--ease-out);
	display: inline-block;
}

.mega-feature-link:hover span {
	transform: translateX(6px);
}

.mega-column a {
	border-radius: 12px;
	transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}

.mega-column a:not(.mega-cta):hover {
	background: linear-gradient(180deg, #fff, var(--soft));
	transform: translateX(4px);
	box-shadow: -3px 0 0 0 var(--gold) inset;
}

.role-menu-card,
.mega-action-card {
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.role-menu-card:hover,
.mega-action-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
}

.path-grid a {
	transition: background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}

.path-grid a:hover {
	transform: translateY(-3px);
	border-color: var(--gold);
	background: var(--cream);
}

.path-grid a span {
	color: var(--gold);
	font-family: var(--serif);
}

/* Mobile toggle */
.mobile-toggle {
	border-radius: 999px;
	border: 1px solid var(--line);
	font-weight: 700;
	letter-spacing: .04em;
	transition: background .22s var(--ease), border-color .22s var(--ease);
}

.mobile-toggle:hover {
	background: var(--soft);
	border-color: var(--gold);
}

.nav-scrim {
	display: none;
}

.nav-mobile-foot {
	display: none;
}

/* -------------------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------------- */

.btn {
	font-family: var(--sans);
	font-weight: 700;
	font-size: .93rem;
	letter-spacing: -.005em;
	padding: 14px 26px;
	position: relative;
	transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
		color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}

/* Hover swaps background and text together.
   The previous version slid a ::before panel up on hover, but that panel sat
   at `z-index: -1` inside an `isolation: isolate` button, so it painted
   BEHIND the button's own opaque background and never showed. Only the text
   colour changed - which left white-on-gold, navy-on-navy and white-on-white
   depending on the variant, i.e. the label vanished. Swapping the background
   directly cannot desynchronise from the text colour. */

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(11, 29, 58, .4);
}

/* Pressing it puts the button back down, so a click has a felt beginning and
   end rather than only a hover state. */
.btn:active {
	transform: translateY(0);
	box-shadow: 0 6px 14px -8px rgba(11, 29, 58, .45);
	transition-duration: .08s;
}

/* Gold used to invert to navy on hover. On the cream and white sections
   that read fine, but gold buttons also sit on every navy hero and closing
   band, and there the hover background WAS the ground - 1.00:1 against
   --navy, 1.18:1 against --navy2. The button stopped being a button and left
   a floating label. Lightening the gold instead keeps the shape on every
   ground it is used on, and the warm shadow replaces the flat navy one so
   the lift reads on dark sections too. */
.btn.gold:hover,
.btn.gold: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);
}

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

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

.btn.white:hover,
.btn.white:focus-visible {
	background-color: var(--gold-hover);
	border-color: var(--gold-hover);
	color: var(--navy-deep, #071426);
}

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

/* A .btn with no variant class. */
.btn:not(.gold):not(.navy):not(.outline):not(.white):not(.ghost-light):hover {
	background-color: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.inline-link,
.text-arrow,
a.card-link {
	position: relative;
	font-weight: 700;
	color: var(--navy);
	background-image: linear-gradient(90deg, var(--gold), var(--gold));
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .35s var(--ease-out), color .25s var(--ease);
	padding-bottom: 2px;
}

.inline-link:hover,
.text-arrow:hover {
	background-size: 100% 1.5px;
	color: var(--gold);
}

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

/* -------------------------------------------------------------------------
   5. CARDS & SURFACES
   ---------------------------------------------------------------------- */

.card,
.square-card,
.panel,
.start-card,
.skill-card,
.contact-card,
.age-year-card,
.route-card {
	border-radius: var(--radius);
	border-color: var(--line);
	background: #fff;
	position: relative;
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}

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

.card.accent {
	border-top: 0;
}

.card.accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: var(--radius) var(--radius) 0 0;
	background: linear-gradient(90deg, var(--gold), var(--gold2));
	transform: scaleX(.34);
	transform-origin: left;
	transition: transform .45s var(--ease-out);
}

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

.link-card strong,
.card a {
	position: relative;
}

.link-card:hover strong {
	color: var(--gold);
}

/* Numbered elements pick up the serif + gold */
.num,
.journey b,
.lesson-flow b,
.mini-flow b,
.community-step .n,
.method-step .n,
.voice-step .n,
.age {
	font-family: var(--serif);
	font-weight: 700;
}

/* Material / document frames */
.material-frame {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

.material-frame:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

img.document-asset {
	cursor: zoom-in;
	transition: transform .5s var(--ease-out), filter .4s var(--ease);
	display: block;
	width: 100%;
	height: auto;
}

img.document-asset:hover {
	transform: scale(1.015);
	filter: saturate(1.05);
}

/* -------------------------------------------------------------------------
   6. HEROES & SECTION BACKDROPS
   ---------------------------------------------------------------------- */

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

.hero-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background-image: url("../img/family-photo.webp");
	background-size: cover;
	background-position: center 34%;
	opacity: .3;
	transform: scale(1.06);
	animation: lw-slow-zoom 26s var(--ease) infinite alternate;
}

@keyframes lw-slow-zoom {
	from { transform: scale(1.02); }
	to   { transform: scale(1.11); }
}

.hero-home::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(1100px 620px at 12% 8%, rgba(20, 42, 80, .82), transparent 62%),
		radial-gradient(900px 560px at 92% 92%, rgba(201, 162, 71, .2), transparent 66%),
		linear-gradient(168deg, rgba(5, 15, 29, .93) 12%, rgba(7, 20, 38, .9) 52%, rgba(11, 29, 58, .95));
}

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

.hero-home h1 {
	text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}

.hero-home h1 span {
	display: block;
	color: var(--gold2);
	font-style: italic;
	font-weight: 500;
	margin-top: .22em;
	font-size: .62em;
	letter-spacing: -.022em;
}

.hero-home .hero-lead {
	color: #dce5f2;
}

.hero-home .hero-proof {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.hero-home .hero-proof > div {
	padding: 22px 22px 22px 0;
	border-right: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-direction: column;
	gap: 5px;
	transition: background .3s var(--ease);
}

.hero-home .hero-proof > div:last-child {
	border-right: 0;
}

.hero-home .hero-proof > div:not(:first-child) {
	padding-left: 22px;
}

.hero-home .hero-proof > div:hover {
	background: rgba(255, 255, 255, .045);
}

.hero-home .hero-proof strong {
	font-family: var(--serif);
	font-size: 1.16rem;
	color: #fff;
	letter-spacing: -.02em;
}

.hero-home .hero-proof span {
	font-size: .84rem;
	color: rgba(226, 235, 247, .74);
	line-height: 1.4;
}

/* Editorial hero (inner pages) */
.hero-editorial .hero-media {
	position: relative;
}

.hero-editorial .hero-media img {
	transition: transform 1.2s var(--ease-out);
}

.hero-editorial:hover .hero-media img {
	transform: scale(1.03);
}

.hero-editorial .hero-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(11, 29, 58, .16), transparent 42%);
	pointer-events: none;
}

.hero-editorial.dark {
	background: linear-gradient(150deg, var(--navy-ink), var(--navy) 55%, var(--navy2));
	position: relative;
	overflow: hidden;
}

.hero-editorial.dark::before {
	content: "";
	position: absolute;
	top: -240px;
	right: -180px;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 162, 71, .19), transparent 66%);
	pointer-events: none;
}

.hero-wordmark {
	color: var(--gold);
	font-style: italic;
	font-weight: 500;
}

.page-hero {
	background: linear-gradient(180deg, #fff, var(--cream));
	position: relative;
	overflow: hidden;
}

.page-hero::after {
	content: "";
	position: absolute;
	right: -160px;
	bottom: -220px;
	width: 520px;
	height: 520px;
	border: 1.5px solid rgba(201, 162, 71, .2);
	border-radius: 50%;
	pointer-events: none;
}

/* Navy / cream / soft section backdrops */
.navy-section,
.cta-section,
.final-band {
	background: linear-gradient(145deg, var(--navy-ink), var(--navy) 52%, var(--navy2));
	position: relative;
	overflow: hidden;
}

.navy-section::before,
.cta-section::before,
.final-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(760px 420px at 88% 6%, rgba(201, 162, 71, .16), transparent 64%),
		radial-gradient(620px 380px at 4% 96%, rgba(60, 104, 175, .2), transparent 68%);
	pointer-events: none;
}

.navy-section > *,
.cta-section > *,
.final-band > * {
	position: relative;
	z-index: 1;
}

.soft {
	background: linear-gradient(180deg, var(--soft), #fff);
}

.cream {
	background: linear-gradient(180deg, var(--cream), #fff);
}

/* The arc motif lifted from the wordmark */
.editorial-section {
	position: relative;
}

.academic-key-note {
	position: relative;
	overflow: hidden;
}

.academic-key-note::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -50%;
	width: 760px;
	height: 760px;
	transform: translateX(-50%);
	border-top: 1.5px solid rgba(201, 162, 71, .26);
	border-radius: 50%;
	pointer-events: none;
}

/* Reference band */
.academic-reference-band {
	background: linear-gradient(120deg, var(--cream), #fff 58%, var(--soft));
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.academic-reference-grid > div {
	transition: transform .35s var(--ease-out);
}

.academic-reference-grid > div:hover {
	transform: translateY(-3px);
}

.ref-kicker {
	color: var(--gold);
}

/* Conversion rail */
.conversion-rail {
	background: linear-gradient(100deg, var(--navy-ink), var(--navy2));
	position: relative;
	overflow: hidden;
}

.conversion-rail a {
	position: relative;
	transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out);
}

.conversion-rail a:hover {
	color: var(--gold2);
	transform: translateY(-2px);
}

.rail-label {
	color: var(--gold2);
}

/* 25-minute mini flow */
.mini-flow > div,
.lesson-flow > div {
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease);
}

.mini-flow > div:hover,
.lesson-flow > div:hover {
	transform: translateY(-5px);
	border-color: var(--gold);
	box-shadow: var(--shadow);
}

/* -------------------------------------------------------------------------
   7. MOTION — scroll choreography
   ---------------------------------------------------------------------- */

.lw-js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
	will-change: opacity, transform;
}

.reveal,
.lw-js .reveal.visible {
	opacity: 1;
	transform: none;
}

/* Stagger children of revealed grids.
   Opacity only - deliberately no transform. A staggered `translateY` with
   `animation-fill-mode: both` holds its from-state while the animation is
   still delayed (and indefinitely if the tab never paints), which leaves the
   children visually offset from their layout boxes and overlapping whatever
   follows the grid. The parent .reveal already supplies the movement. */
.reveal.visible > * {
	animation: lw-fade .7s var(--ease-out) both;
}

.reveal.visible > *:nth-child(1) { animation-delay: .02s; }
.reveal.visible > *:nth-child(2) { animation-delay: .08s; }
.reveal.visible > *:nth-child(3) { animation-delay: .14s; }
.reveal.visible > *:nth-child(4) { animation-delay: .2s; }
.reveal.visible > *:nth-child(5) { animation-delay: .26s; }
.reveal.visible > *:nth-child(6) { animation-delay: .32s; }
.reveal.visible > *:nth-child(n+7) { animation-delay: .38s; }

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

/* Hero entrance */
.hero-home .eyebrow,
.hero-home h1,
.hero-home .hero-lead,
.hero-home .actions,
.hero-home .hero-proof,
.hero-editorial .hero-copy > * {
	animation: lw-hero-in .95s var(--ease-out) both;
}

.hero-home h1 { animation-delay: .08s; }
.hero-home .hero-lead { animation-delay: .18s; }
.hero-home .actions { animation-delay: .28s; }
.hero-home .hero-proof { animation-delay: .38s; }

.hero-editorial .hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-editorial .hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-editorial .hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-editorial .hero-copy > *:nth-child(n+5) { animation-delay: .32s; }

@keyframes lw-hero-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

/* Scroll progress bar */
.page-progress {
	height: 3px;
	background: linear-gradient(90deg, var(--gold), var(--gold2), #fff);
	box-shadow: 0 0 14px var(--gold-glow);
}

/* Back to top */
.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 900;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(201, 162, 71, .5);
	background: var(--navy);
	color: var(--gold2);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .35s var(--ease), transform .35s var(--ease-out), visibility .35s, background .25s var(--ease);
	box-shadow: var(--shadow);
}

.to-top.show {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top:hover {
	background: var(--gold-bright);
	color: var(--navy);
	transform: translateY(-3px);
}

/* Document lightbox polish */
.doc-lightbox {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.doc-zoom-note {
	font-family: var(--sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .66rem;
	font-weight: 800;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   8. FOOTER
   ---------------------------------------------------------------------- */

.site-footer {
	background: linear-gradient(180deg, var(--navy-ink), #04101f);
	position: relative;
	overflow: hidden;
	padding: 0 0 28px;
}

.footer-glow {
	position: absolute;
	top: -320px;
	left: 50%;
	transform: translateX(-50%);
	width: 1100px;
	height: 620px;
	background: radial-gradient(ellipse at center, rgba(201, 162, 71, .16), transparent 66%);
	pointer-events: none;
}

.site-footer .wrap {
	position: relative;
	z-index: 1;
}

.footer-brandline {
	display: grid;
	grid-template-columns: minmax(0, 300px) 1fr;
	gap: 44px;
	align-items: center;
	padding: 56px 0 46px;
	border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.footer-logo {
	width: 100%;
	max-width: 290px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: .95;
}

.footer-brandline-copy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.footer-brandline-copy strong {
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.2vw, 1.85rem);
	font-weight: 600;
	color: #fff;
	letter-spacing: -.025em;
	line-height: 1.24;
	max-width: 620px;
}

.footer-grid {
	grid-template-columns: 1.9fr 1fr 1.15fr 1.05fr 1.05fr;
	padding: 52px 0 12px;
	gap: 34px;
}

.site-footer h3 {
	font-family: var(--sans);
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold2);
	margin-bottom: 18px;
}

.site-footer p {
	color: #9fb0c6;
	font-size: .9rem;
	line-height: 1.65;
}

.footer-framework {
	color: var(--gold2) !important;
	font-weight: 600;
	font-size: .83rem !important;
	letter-spacing: .02em;
}

.site-footer a {
	color: #c2cfe0;
	font-size: .89rem;
	width: fit-content;
	transition: color .22s var(--ease), transform .22s var(--ease);
}

.site-footer a:hover {
	color: var(--gold2);
	transform: translateX(3px);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: 26px;
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	color: #7f90a8;
	font-size: .8rem;
}

/* -------------------------------------------------------------------------
   9. MISC CONTENT POLISH
   ---------------------------------------------------------------------- */

.checks li::before {
	color: var(--gold);
	font-weight: 700;
}

.display-quote {
	font-style: italic;
	font-weight: 500;
	letter-spacing: -.032em;
}

.gold-text,
.gold-rule {
	color: var(--gold);
}

.notice {
	border-left: 3px solid var(--gold);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.topic-chips span,
.pill-line span,
.format-tag {
	transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out);
}

.topic-chips span:hover,
.pill-line span:hover {
	border-color: var(--gold);
	transform: translateY(-2px);
}

.faq-grid > div,
.partner-q,
.contact-card {
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease);
}

.faq-grid > div:hover,
.partner-q:hover {
	border-color: var(--gold);
	transform: translateY(-3px);
}

.role-tab-list button {
	font-family: var(--sans);
	font-weight: 700;
	transition: background .25s var(--ease), color .25s var(--ease);
}

.section-nav a {
	transition: color .22s var(--ease), border-color .22s var(--ease);
}

.section-nav a:hover {
	color: var(--gold);
	border-color: var(--gold);
}

.editorial-copy h2,
.editorial-copy h3 {
	margin-top: 1.8rem;
}

.editorial-copy p {
	max-width: 74ch;
}

.lw-directory .num {
	display: block;
	color: var(--gold);
	font-size: 1.1rem;
	margin-bottom: 8px;
}

.lw-search {
	display: flex;
	gap: 10px;
	max-width: 520px;
}

.lw-search input {
	flex: 1;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 13px 20px;
}

.lw-search input:focus {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

/* Selection + focus */
::selection {
	background: var(--gold-bright);
	color: var(--navy);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Scrollbar */
@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar { width: 11px; height: 11px; }
	::-webkit-scrollbar-track { background: var(--soft); }
	::-webkit-scrollbar-thumb { background: #c3ccd9; border-radius: 99px; border: 3px solid var(--soft); }
	::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); }
}

/* -------------------------------------------------------------------------
   10. RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 1240px) {
	.logo-mark { height: 54px; }
	.primary-nav .nav-link { font-size: .82rem; padding: 0 8px; }
}

@media (max-width: 1100px) {
	.hero-home .hero-proof { grid-template-columns: repeat(3, 1fr); }
	.hero-home .hero-proof > div:nth-child(3) { border-right: 0; }
	.hero-home .hero-proof > div:nth-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.hero-home .hero-proof > div:nth-child(4) { padding-left: 0; border-left: 0; }
	.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 980px) {
	.topbar,
	.site-header.is-stuck .topbar { min-height: 76px; }

	.logo-mark,
	.site-header.is-stuck .logo-mark { height: 44px; }

	.header-utility .utility-inner > span { display: none; }
	.utility-links { gap: 14px; overflow-x: auto; scrollbar-width: none; }
	.utility-links::-webkit-scrollbar { display: none; }
	.utility-links a { white-space: nowrap; font-size: .72rem; }

	/* Nav becomes a drawer */

	.primary-nav .nav-item {
		display: block;
		border-bottom: 1px solid var(--line-soft);
	}

	.primary-nav .nav-topline {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.primary-nav .nav-link {
		min-height: 56px;
		justify-content: flex-start;
		font-size: 1rem;
		flex: 1;
		padding: 0 4px;
	}

	.primary-nav .nav-link::after { display: none; }

	.drop-toggle,
	.path-button {
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.nav-mobile-foot {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 26px;
	}

	.nav-mobile-foot .btn { width: 100%; }

	.mobile-toggle { z-index: 1300; position: relative; }

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(6, 17, 33, .55);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s var(--ease), visibility .35s;
		z-index: 1100;
	}

	body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
	body.nav-open { overflow: hidden; }

	.mega-menu {
		position: static;
		box-shadow: none;
		border: 0;
		border-top: 1px solid var(--line-soft);
		border-radius: 0;
		padding: 6px 0 18px;
		animation: none;
		width: auto;
		background: var(--soft);
	}

	.footer-brandline { grid-template-columns: 1fr; gap: 26px; }
	.footer-brandline-copy { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
	body { font-size: 16px; }

	.hero-home { padding: 62px 0 70px; }
	.hero-home::before { background-position: center 30%; opacity: .24; }

	.hero-home .hero-proof { grid-template-columns: 1fr 1fr; }
	.hero-home .hero-proof > div {
		border-right: 1px solid rgba(255, 255, 255, .12);
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		padding: 16px 14px;
	}
	.hero-home .hero-proof > div:nth-child(even) { border-right: 0; }
	.hero-home .hero-proof > div:not(:first-child) { padding-left: 14px; }
	.hero-home .hero-proof > div:last-child { border-bottom: 0; }

	.footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
	.footer-bottom { flex-direction: column; gap: 8px; }

	.to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }

	.actions .btn { width: 100%; }
}

@media (max-width: 520px) {
	.footer-grid { grid-template-columns: 1fr; }
	.logo-mark, .site-header.is-stuck .logo-mark { height: 38px; }
	.eyebrow { font-size: .66rem; letter-spacing: .14em; }
	.hero-home .hero-proof { grid-template-columns: 1fr; }
	.hero-home .hero-proof > div { border-right: 0; }
}

/* -------------------------------------------------------------------------
   11. REDUCED MOTION
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.reveal { opacity: 1; transform: none; }
	.hero-home::before { animation: none; transform: none; }
}

/* -------------------------------------------------------------------------
   12. PRINT
   ---------------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.to-top,
	.page-progress,
	.conversion-rail { display: none !important; }

	.reveal { opacity: 1 !important; transform: none !important; }
	body { font-size: 11pt; }
}

/* =========================================================================
   13. BRIDGE — reconcile the inherited "collegiate academic" layer
   base.css scopes an academic serif system to body.harvard-square.index-format
   at a higher specificity than our element selectors. Re-point its variables
   at the brand type system and put body copy back on the sans face.
   ========================================================================= */

:root {
	--academic-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--academic-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--academic-ink: #1b2536;
	--academic-navy: #0b1d3a;
	--academic-gold: #c0952f;
	--academic-paper: #faf7f1;
	--academic-rule: #dfe4ec;
}

body.harvard-square,
body.harvard-square.index-format {
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--ink);
}

body.harvard-square.index-format p,
body.harvard-square.index-format li,
body.harvard-square.index-format .lead,
body.harvard-square.index-format .hero-lead,
body.harvard-square.index-format .hero-sub,
body.harvard-square p,
body.harvard-square li {
	font-family: var(--sans);
}

body.harvard-square blockquote,
body.harvard-square.index-format blockquote,
body.harvard-square .display-quote,
body.harvard-square.index-format .display-quote {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
}

body.harvard-square h1,
body.harvard-square h2,
body.harvard-square h3,
body.harvard-square h4,
body.harvard-square.index-format h1,
body.harvard-square.index-format h2,
body.harvard-square.index-format h3,
body.harvard-square.index-format .big-line {
	font-family: var(--serif) !important;
	font-weight: 700;
	letter-spacing: -.03em;
}

body.harvard-square .eyebrow,
body.harvard-square.index-format .eyebrow,
body.harvard-square .kicker,
body.harvard-square.index-format .kicker,
body.harvard-square .ref-kicker,
body.harvard-square.index-format .ref-kicker,
body.harvard-square .btn,
body.harvard-square.index-format .btn,
body.harvard-square .nav-link,
body.harvard-square .mega-label,
body.harvard-square .rail-label,
body.harvard-square .staffing-kicker {
	font-family: var(--sans) !important;
}

/* The base layer squares off cards on the home page; keep the softer
   institutional radius the rest of the site uses. */
body.harvard-square .card,
body.harvard-square .panel,
body.harvard-square .notice,
body.harvard-square .start-card,
body.harvard-square .role-menu-card,
body.harvard-square .mega-action-card,
body.harvard-square .material-frame,
body.harvard-square .registration-panel,
body.harvard-square .contact-card {
	border-radius: var(--radius);
}

body.harvard-square.index-format .material-frame img,
body.harvard-square.index-format img.document-asset {
	border-radius: var(--radius-sm) !important;
}

/* =========================================================================
   14. NAVIGATION SCALE — 11 top-level destinations need room
   ========================================================================= */

/* On desktop the bar carries seven destinations. Society Advantages,
   Institutions, Public Exchange, Florida Star Academy and Investor stay one
   click away in the utility bar, the Institute mega menu, Start Here and the
   footer. Below 1181px the drawer takes over and carries them itself. */
@media (min-width: 1181px) {
	.primary-nav .society-item,
	.primary-nav .institution-item,
	.primary-nav .exchange-item,
	.primary-nav .academy-item,
	.primary-nav .investor-item {
		display: none;
	}
}

@media (max-width: 1340px) and (min-width: 1181px) {
	.primary-nav .nav-link { font-size: .81rem; padding: 0 8px; }
	.logo-mark { height: 52px; }
	.site-header.is-stuck .logo-mark { height: 44px; }
}

/* Drawer takes over earlier than the base layer's 980px. */
@media (max-width: 1180px) {
	.mobile-toggle { display: inline-flex; }

	/* Off-canvas drawer.
	   It is toggled with `display` rather than parked off-screen with a
	   transform: a fixed panel translated past the right edge adds its full
	   width to the document's scrollable overflow, which is what the old
	   `body { overflow-x: hidden }` was really hiding. Display toggling
	   keeps the slide-in animation without the phantom overflow. */
	.primary-nav {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(440px, 92vw);
		max-width: 100vw;
		max-height: none;
		height: 100%;
		background: #fff;
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0;
		padding: 88px 22px 44px;
		border: 0;
		border-radius: 0 !important;
		box-shadow: -30px 0 70px -30px rgba(7, 22, 45, .5);
		z-index: 1200;
	}

	.primary-nav.open {
		display: block;
		transform: none;
		animation: lw-drawer-in .42s var(--ease-out);
	}

	/* The slide starts 26px out rather than a full panel width, because a
	   running animation overrides the `transform: none` above even when it
	   is not advancing - declaring the open position there does not rescue
	   it. A background or throttled page holds the panel at this keyframe's
	   first frame indefinitely, so that frame has to be a position the
	   drawer is still usable from. Fading in over 26px reads the same as a
	   slide at this duration; stranded at 100% it was off-screen entirely. */
	@keyframes lw-drawer-in {
		from { transform: translateX(26px); opacity: 0; }
		to   { transform: none; opacity: 1; }
	}

	.primary-nav .nav-item {
		display: block;
		border-bottom: 1px solid var(--line-soft);
	}

	.primary-nav .nav-topline {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.primary-nav .nav-link {
		min-height: 54px;
		justify-content: flex-start;
		font-size: 1rem;
		flex: 1;
		padding: 0 4px;
	}

	.primary-nav .nav-link::after { display: none; }

	.nav-mobile-foot {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding-top: 26px;
	}

	.nav-mobile-foot .btn { width: 100%; }

	.mobile-toggle { position: relative; z-index: 1300; }

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(6, 17, 33, .55);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s var(--ease), visibility .35s;
		z-index: 1100;
	}

	body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
	body.nav-open { overflow: hidden; }

	.primary-nav .mega-menu,
	body.harvard-square .primary-nav .mega-menu {
		position: static;
		display: none;
		width: auto;
		max-width: none;
		left: auto;
		right: auto;
		transform: none;
		box-shadow: none;
		border: 0;
		border-top: 1px solid var(--line-soft);
		border-radius: 0 !important;
		padding: 8px 0 20px;
		margin: 0;
		animation: none;
		background: var(--soft);
	}

	.primary-nav .nav-item.menu-open > .mega-menu {
		display: block;
	}

	.mega-columns,
	.mega-columns.three-col,
	.mega-columns.two-col,
	.path-grid {
		grid-template-columns: 1fr !important;
	}

	.mega-intro { padding: 18px 16px; }
	.mega-intro h2 { font-size: 1.4rem; }
	.mega-column a:hover { transform: none; }

	/* Drawer toggles need a visible affordance. */
	.drop-toggle,
	.path-button {
		width: 42px;
		height: 42px;
		display: grid;
		place-items: center;
		border-radius: 10px;
		background: var(--soft);
		border: 1px solid var(--line);
		position: relative;
		flex: 0 0 auto;
	}

	.drop-toggle::after,
	.path-button::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--navy);
		border-bottom: 2px solid var(--navy);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .3s var(--ease);
	}

	.nav-item.menu-open .drop-toggle::after,
	.nav-item.menu-open .path-button::after {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.path-button.nav-link {
		width: auto;
		flex: 1;
		justify-content: flex-start;
		background: transparent;
		border: 0;
	}

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

	.path-item .nav-topline { gap: 8px; }
}

/* The utility bar keeps carrying the secondary destinations on tablet. */
@media (max-width: 1180px) and (min-width: 761px) {
	.header-utility { display: block; }
	.utility-inner > span { display: none; }
	.utility-links { gap: 16px; overflow-x: auto; scrollbar-width: none; }
	.utility-links::-webkit-scrollbar { display: none; }
	.utility-links a { white-space: nowrap; font-size: .72rem; }
}

/* The inherited stylesheet masks horizontal overflow with
   `body { overflow-x: hidden }`. That makes <body> its own scroll container,
   which stops window.scrollY from tracking the page - breaking in-page
   anchors, the reading-progress bar and back-to-top - and only hides layout
   bugs rather than fixing them. The real offenders (a wide data table, long
   unbreakable domain strings, unconstrained media) are handled in
   components.css, so the mask can go. */
body {
	overflow-x: visible;
}

html,
body {
	max-width: 100%;
}