/* ============================================================================
   About page (page-about.php) — ported from nsf-about-wireframe-v16.html.
   All rules are scoped under .nsfa. Tokens mirror the NSF design system
   (:root block); values are the six brand colors verbatim — no new colors.
   ============================================================================ */

.nsfa {
	/* Brand palette — NSF Brand Manual 2025 */
	--dark:  #0b2d49;
	--blue:  #003c69;
	--lb:    #0075b0;
	--gold:  #f0ab00;
	--gray:  #566175;
	--ocean: #a6bed5;
	--off:   #f5f4f0;
	--white: #ffffff;
	--btn-navy:  #0a2c48;
	--ink:       #24282d;
	--ink2:      #1f2f3d;
	--black-txt: #080e1f;

	--font-display: 'Oswald', Arial, sans-serif;
	--font-body:    'Open Sans', Arial, Helvetica, sans-serif;

	--max-w:  1200px;
	--gutter: clamp(40px, 14vw, 264px);

	font-family: var(--font-body);
	color: var(--ink);
	line-height: 1.625;
	overflow-x: hidden;
}

.nsfa *,
.nsfa *::before,
.nsfa *::after { box-sizing: border-box; }

.nsfa h1,
.nsfa h2,
.nsfa h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	margin: 0;
	padding: 0; /* the theme's global h3 rule adds padding-bottom: 25px */
}

.nsfa img { display: block; max-width: 100%; }
.nsfa a { text-decoration: none; }

/* Widow/orphan control: paragraphs avoid lone last words; centered headings
   split evenly when they wrap. (The Answer heading keeps its manual breaks.) */
.nsfa p { text-wrap: pretty; }
.nsfa-nsw-head h2,
.nsfa-ch-title-m,
.nsfa-ch-copy h2,
.nsfa-mu-inner h2,
.nsfa-cta h2,
.nsfa-who-card h2,
.nsfa-pod-content h2,
.nsfa-tl-title h2 { text-wrap: balance; }

/* Gold rule = border-bottom on the heading, fit to text width.
   8px gap under the text matches the FAQ page standard. */
.nsfa .nsfa-h2-rule {
	display: inline-flex;
	border-bottom: 4px solid var(--gold);
	padding-bottom: 8px;
}

/* Shared cover-image behavior for elements that carry an inline background-image. */
.nsfa-hero-bg,
.nsfa-buds-bg,
.nsfa-buds-img,
.nsfa-tl-bg,
.nsfa-tl-img,
.nsfa-ch-img,
.nsfa-who-bg,
.nsfa-ans-bg,
.nsfa-prog-img,
.nsfa-pod-bg,
.nsfa-pod-still,
.nsfa-sal,
.nsfa-cta-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Play buttons use the site's canonical .playbtncontainer markup (style.css)
   so the hover — triangle scales to .9 while the ring rotates 45° — matches
   the rest of the site exactly. Only positioning lives here. */
.nsfa .playbtncontainer { display: inline-block; width: 100px; line-height: 0; position: relative; }
.nsfa .playbtncontainer img { display: block; width: 100%; }
/* Neutralize .specialplaybtn's self-centering offsets (top/left 50% + translate):
   with our relative positioning they shove the button off-center. The anchors
   below handle centering instead. */
.nsfa .playbtncontainer.specialplaybtn { top: auto; left: auto; transform: none; }

/* Reusable buttons (design-system variants). */
.nsfa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	padding: 10px 15px;
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	border: 2px solid var(--gold);
	transition: background-color 0.25s ease, color 0.25s ease;
}
.nsfa-btn--navy { background: var(--btn-navy); color: #fff; }
.nsfa-btn--navy:hover,
.nsfa-btn--navy:focus-visible { background: var(--dark); color: var(--gold); }
.nsfa-btn--gold { background: var(--gold); color: var(--black-txt); }
.nsfa-btn--gold:hover,
.nsfa-btn--gold:focus-visible { background: #d49500; }

/* ══ 1 · HERO ══════════════════════════════════════════════════════════════ */
.nsfa-hero {
	position: relative;
	/* 124 top / 240 bottom looks lopsided on paper, but the collage rides up
	   117px into the hero — so the copy actually sits 124px below the top edge
	   and 123px above the first tile. Measured, not eyeballed. */
	padding: 124px var(--gutter) 240px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
}
.nsfa-hero-bg {
	position: absolute; inset: 0;
	background-color: var(--dark);
	background-image: linear-gradient(150deg, #123a5c, #06192c);
}
.nsfa-hero-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.nsfa-hero-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.nsfa-hero-texture {
	position: absolute; inset: 0;
	background: url("../images/about/hero-texture.png") top left repeat;
	background-size: 60px 59px;
}
.nsfa-hero-inner {
	position: relative;
	max-width: var(--max-w); width: 100%;
	display: flex; flex-direction: column; gap: 22px;
}
.nsfa-hero h1 {
	font-size: clamp(38px, 5vw, 60px);
	font-weight: 600; color: #fff;
	letter-spacing: 0.03em; line-height: 1.15; max-width: 760px;
}
.nsfa-hero-mission {
	font-family: var(--font-body);
	font-weight: 600; font-style: italic;
	color: var(--gold);
	font-size: 20px; line-height: 32px; max-width: 540px;
}

/* ══ COLLAGE · horizontal parallax, straddles the hero ══════════════════════ */
.nsfa-collage {
	position: relative; height: 250px;
	margin-top: -117px; margin-bottom: -133px;
	z-index: 3; pointer-events: none;
	/* Clip only horizontally (the parallax track overflows sideways) so the
	   tile shadows can bleed above/below the band instead of being cut off. */
	overflow-x: clip; overflow-y: visible;
}
.nsfa-collage-track {
	display: flex; gap: 16px; align-items: center;
	height: 250px; padding-left: 16px; will-change: transform;
}
.nsfa-collage-item {
	flex: 0 0 auto;
	position: relative;
	box-shadow: 0 4px 20px rgba(11,45,73,.35);
	overflow: hidden;
}
/* Site gradient frame — same border.png overlay as .impact-card / financials badges. */
.nsfa-collage-item::before {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: url("../images/about/border-2x.png") center / 100% 100% no-repeat;
	pointer-events: none;
}
.nsfa-collage-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); }
/* Unifying navy wash — pulls the mixed-temperature photos into one family
   so the band reads as a set against the nocturnal hero. */
.nsfa-collage-item::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(11,45,73,.28);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.nsfa-collage-item:nth-child(odd)  { width: 257.5px; height: 181.25px; margin-top: 34.4px; }
.nsfa-collage-item:nth-child(even) { width: 218.75px; height: 250px;  margin-top: 0; }

/* ══ 2 · NAVAL SPECIAL WARFARE ═════════════════════════════════════════════ */
.nsfa-nsw {
	position: relative;
	padding: 260px var(--gutter) 100px;
	background: var(--off) url("../images/about/texture-paper.jpg") center / cover no-repeat;
	overflow: hidden;
}
.nsfa-nsw-bg { position: absolute; inset: 0; pointer-events: none; }
/* Ocean surfaces at 27% — crest raised twice on review (44% -> 36% -> 27%).
   The mask fade keeps the top edge soft where it passes behind the copy. */
.nsfa-nsw-bg-img {
	position: absolute; inset: 0; top: 27%; height: 73%;
	/* This one is deliberately NOT in the shared cover list above (that sets
	   background-position: center, and the crest needs `center top`). Without
	   these two it fell back to the image's natural 2000px and `repeat`, which
	   tiled — and showed a hard vertical seam — past 2000px. */
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
}
/* The paper wash over the ocean. Its stops, not the photo's `top`, decide how
   high the crest actually reads — raise these together with .nsfa-nsw-bg-img. */
.nsfa-nsw-bg-fade {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(255,255,255,0) 50%, #f5f4f0 90%);
}
.nsfa-nsw-inner {
	position: relative; max-width: var(--max-w); margin: 0 auto;
	display: flex; flex-direction: column; gap: 56px;
}
.nsfa-nsw-head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.nsfa-nsw-head h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: var(--dark);
	letter-spacing: 0.033em; line-height: 1.25; text-align: center;
}
.nsfa-nsw-body { font-size: 16px; line-height: 26px; color: var(--ink); text-align: center; text-wrap: pretty; }
.nsfa-nsw-body-rest { max-width: var(--max-w); margin: 0 auto; }
/* Desktop reads the copy as ONE continuous paragraph above the cards (the
   approved structure); the lead/cards/rest interleave is mobile/tablet only. */
.nsfa-nsw-body-full p { display: inline; margin: 0; }
.nsfa-nsw-body-full p::after { content: " "; }
.nsfa-nsw-body-lead,
.nsfa-nsw-body-rest { display: none; }
.nsfa-nsw-body p { margin: 0 0 1em; }
.nsfa-nsw-body p:last-child { margin-bottom: 0; }
.nsfa-sal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nsfa-sal {
	position: relative; height: 491px;
	overflow: hidden;
	background-color: var(--dark);
	display: block;
}
.nsfa-sal::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: url("../images/about/border-2x.png") center / 100% 100% no-repeat;
	pointer-events: none;
}
.nsfa-sal-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsfa-sal-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(11,37,67,0) 60%, #0b2543 100%);
}
.nsfa-sal-label {
	position: absolute; left: 0; right: 0; bottom: 40px;
	text-align: center; font-family: var(--font-display);
	font-weight: 600; font-size: clamp(36px, 5vw, 60px);
	color: #fff; text-transform: uppercase; line-height: 1;
}

/* ══ 3 · BUD/S BREAKOUT ════════════════════════════════════════════════════ */
.nsfa-buds { display: flex; background: #000; min-height: 650px; }
/* flex-basis 50% (not 0) — with basis 0 the copy panel's large gutter padding
   acts as an incompressible floor and steals width from the image column. */
.nsfa-buds-left,
.nsfa-buds-img,
.nsfa-ch-left,
.nsfa-ch-right { flex: 1 1 50%; min-width: 0; }
.nsfa-buds-left {
	flex: 1 1 50%; position: relative; background: #000;
	display: flex; flex-direction: column; justify-content: center;
	padding: 100px 120px 100px var(--gutter);
	z-index: 1;
}
/* Torn-paper right edge overhanging the photo (per Figma seam treatment). */
.nsfa-buds-left::after {
	content: ""; position: absolute; top: 0; bottom: 0; right: -32px; width: 32px;
	background: #101010;
	-webkit-mask: url("../images/about/torn-edge-v.png") left center / 100% 100%;
	mask: url("../images/about/torn-edge-v.png") left center / 100% 100%;
	pointer-events: none;
}
.nsfa-buds-bg { position: absolute; inset: 0; opacity: .55; background-position: top right; }
.nsfa-buds-copy {
	position: relative; width: 100%; max-width: 560px;
	display: flex; flex-direction: column; gap: 16px;
	filter: drop-shadow(0 4px 15px rgba(0,0,0,.25));
}
.nsfa-buds-copy h3 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: var(--gold);
	letter-spacing: 0.033em; line-height: 1.25;
	text-wrap: balance; /* breaks as "The world's / toughest training" instead of widowing */
}
.nsfa-buds-copy p { font-size: 16px; line-height: 26px; color: #fff; margin: 0; }
/* Flex `gap` already spaces these paragraphs — the 1em margin stacked on top of
   it and doubled the gap to 32px. Gap alone governs. */
.nsfa-buds-copy p { margin: 0; }
.nsfa-buds-img { flex: 1 1 50%; position: relative; background-color: var(--dark); overflow: hidden; }
.nsfa-buds-img .nsfa-buds-scrub { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsfa-buds-inline { display: none; }
.nsfa-ch-inline { display: none; }
.nsfa-buds-stats { display: flex; gap: 32px; margin-top: 8px; flex-wrap: wrap; }
.nsfa-buds-stat { flex: 1 1 160px; }
.nsfa-buds-stat-v {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; color: var(--gold);
}
.nsfa-buds-stat-l {
	font-family: var(--font-display); font-weight: 500; font-size: 16px;
	line-height: 22px; color: #fff; text-transform: uppercase;
	letter-spacing: -.2px; margin-top: 8px;
}

/* ══ 4 · TIMELINE ══════════════════════════════════════════════════════════ */
.nsfa-tl { position: relative; padding: 100px 0 80px; overflow: hidden; }
.nsfa-tl-bg {
	position: absolute; inset: 0;
	background-color: var(--dark);
	background-image: linear-gradient(150deg, #0e3350, #05121f);
}
.nsfa-tl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsfa-tl-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.nsfa-tl-inner {
	position: relative; display: flex; flex-direction: column;
	align-items: center; gap: 32px;
}
.nsfa-tl-title {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	max-width: var(--max-w); padding: 0 48px;
}
.nsfa-tl-title h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: var(--gold);
	letter-spacing: 0.033em; line-height: 1.25; text-align: center;
}
.nsfa-tl-title p { font-size: 16px; line-height: 26px; color: #fff; text-align: center; margin: 0; }
/* Draggable scroller — native scrollbar hidden; drag/wheel/keys instead. */
.nsfa-tl-scroll {
	width: 100%; overflow-x: auto; overflow-y: hidden;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.nsfa-tl-scroll::-webkit-scrollbar { display: none; }
.nsfa-tl-scroll.is-dragging { cursor: grabbing; user-select: none; }
.nsfa-tl-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* width: max-content so the track measures its full scrollable length. Without
   it the track box is only as wide as the viewport, and the rope — absolutely
   positioned to `right` — stops at the fold instead of running the timeline. */
.nsfa-tl-track { display: flex; padding: 0 48px; position: relative; width: max-content; }
/* Rope: centered on the image row (286px-wide cards at 236/160 ≈ 194px tall),
   enlarged per design review. top = (194 − 14) / 2. */
.nsfa-tl-rope {
	/* right = track padding (48) + the card's own trailing gutter (44), so the
	   rope stops at the last image's edge instead of dangling into the gap. */
	position: absolute; left: 158px; top: 90px; height: 14px; right: 92px;
	background: url("../images/about/rope.png") left center repeat-x;
	background-size: auto 100%;
}
.nsfa-tl-ev {
	flex: 0 0 330px; width: 330px; padding-right: 44px;
	display: flex; flex-direction: column; gap: 24px; position: relative;
}
.nsfa-tl-img {
	aspect-ratio: 236 / 160; position: relative;
	background-color: var(--dark);
}
.nsfa-tl-img::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: url("../images/about/border-2x.png") center / 100% 100% no-repeat;
	pointer-events: none;
}
.nsfa-tl-img::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.nsfa-tl-year { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--gold); line-height: 40px; }
.nsfa-tl-name {
	font-family: var(--font-display); font-weight: 600; font-size: 22px;
	color: #fff; text-transform: uppercase; line-height: 34px; margin-top: 8px;
}
.nsfa-tl-desc { font-size: 16px; line-height: 26px; color: rgba(255,255,255,.64); margin-top: 8px; }
/* Scope graduation scale — ticks light up with scroll progress. */
.nsfa-tl-ticks {
	display: flex; align-items: flex-end; justify-content: space-between;
	width: min(560px, 70%); height: 22px;
}
.nsfa-tick {
	width: 1px; height: 10px;
	background: rgba(255,255,255,.22);
	transition: background-color .25s ease, height .25s ease, box-shadow .25s ease;
}
.nsfa-tick--major { width: 2px; height: 16px; background: rgba(255,255,255,.32); }
.nsfa-tick.is-passed { background: rgba(240,171,0,.45); }
.nsfa-tick.is-active {
	background: var(--gold);
	height: 22px;
	box-shadow: 0 0 6px rgba(240,171,0,.8);
}

/* ══ 5 · THE CHALLENGE ═════════════════════════════════════════════════════ */
.nsfa-ch { display: flex; background: var(--off); min-height: 694px; }
.nsfa-ch-left {
	flex: 1 1 50%; position: relative;
	background: var(--off) url("../images/about/texture-paper.jpg") center / cover no-repeat;
	display: flex; flex-direction: column; justify-content: center;
	padding: 100px 120px 100px var(--gutter);
	z-index: 1;
}
/* (Challenge seam intentionally clean — the torn-edge treatment stays on BUD/S only.) */
.nsfa .nsfa-ch-title-m { display: none; }
.nsfa-ans-cta { display: none; }
.nsfa-who-inline { display: none; }
.nsfa-who-inline-video { display: none; }
.nsfa-ch-copy { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.nsfa-ch-copy h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: var(--dark);
	letter-spacing: 0.033em; line-height: 1.25;
}
.nsfa-ch-copy p { font-size: 16px; line-height: 26px; color: var(--ink2); margin: 0; }
.nsfa-ch-copy p { margin: 0 0 1em; }
.nsfa-ch-copy p:last-child { margin-bottom: 0; }
.nsfa-ch-copy b, .nsfa-ch-copy strong { font-weight: 700; }
.nsfa-ch-right { flex: 1 1 50%; position: relative; display: flex; align-items: flex-end; background: #000; }
.nsfa-ch-img { position: absolute; inset: 0; }
.nsfa-ch-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(182deg, rgba(0,0,0,0) 29%, rgba(13,13,10,.9) 97%);
}
.nsfa-ch-stats { position: relative; display: flex; gap: 32px; padding: 0 0 60px 61px; }
.nsfa-ch-stat-v {
	font-family: var(--font-display); font-weight: 500;
	font-size: clamp(42px, 5vw, 60px); line-height: 1.1; color: var(--gold);
	text-shadow: 0 4px 4px rgba(0,0,0,.25);
}
/* max-width tuned so BOTH captions land on two lines — they read as a matched
   pair, and the longer one ("…families and veterans") sets the measure. */
.nsfa-ch-stat-l {
	font-family: var(--font-display); font-weight: 500; font-size: 20px;
	line-height: 28px; color: #fff; letter-spacing: -.4px;
	text-transform: uppercase; margin-top: 8px; max-width: 340px;
	text-wrap: balance;
}

/* ══ 6 · WHO WE ARE ════════════════════════════════════════════════════════ */
.nsfa-who {
	position: relative;
	padding: 100px 0 100px clamp(40px, 11vw, 216px);
	display: flex; flex-direction: row;
	align-items: center; justify-content: flex-start;
	overflow: hidden;
}
.nsfa-who-bg { position: absolute; inset: 0; background-color: #000; overflow: hidden; }
.nsfa-who-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim over the ambient video so the play button keeps contrast on bright frames. */
.nsfa-who-bg::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(0,0,0,.35);
}
.nsfa-who-card {
	position: relative; width: 780px; max-width: 100%;
	background: rgba(11,45,73,.72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 2px solid #000; padding: 48px;
	display: flex; flex-direction: column; gap: 16px;
	box-shadow: 0 30px 80px rgba(0,0,0,.08);
}
.nsfa-who-card h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: #fff;
	letter-spacing: 0.033em; line-height: 1.25;
	align-self: flex-start; display: inline-flex;
	border-bottom: 4px solid var(--gold); padding-bottom: 8px;
}
.nsfa-who-card p { font-size: 16px; line-height: 26px; color: #fff; margin: 0; }
.nsfa-who-card p { margin: 0; }  /* flex gap governs (see .nsfa-buds-copy) */
/* The play area fills whatever space remains right of the card and centers
   the button in it — holds at any viewport width. On stacked layouts it turns
   into a standard video thumbnail (--who-thumb) with the play button on top. */
.nsfa-who-playarea {
	flex: 1 1 auto; align-self: stretch;
	display: flex; align-items: center; justify-content: center;
	position: relative; z-index: 2; min-width: 0;
}
.nsfa-who-play { display: inline-block; }
/* ~40% larger than the site's standard 100px play button. */
.nsfa .nsfa-who-play .playbtncontainer { width: 140px; }

/* Desktop: the NSF mark sits inside the frosted card, same treatment as the
   phone layout. Scoped to >=768 because the card is clipped here — on phones the
   inline video deliberately bleeds past the card edge. */
@media (min-width: 768px) {
	.nsfa-who-card { overflow: hidden; }
	.nsfa-who-card::before {
		content: ""; position: absolute; z-index: 0; pointer-events: none;
		width: 54%; aspect-ratio: 186 / 188;
		top: -8%; right: -10%;
		background: rgba(255,255,255,.06);
		-webkit-mask: url("../images/about/who-we-are-icon.svg") center / contain no-repeat;
		mask: url("../images/about/who-we-are-icon.svg") center / contain no-repeat;
	}
	.nsfa-who-card > * { position: relative; z-index: 1; }
}

/* ══ 7 · HOW WE ANSWER THE CALL ════════════════════════════════════════════ */
.nsfa-ans {
	position: relative; padding: 100px 60px;
	display: flex; flex-direction: column; align-items: center; overflow: hidden;
}
.nsfa-ans-bg {
	position: absolute; inset: 0;
	background-color: var(--dark);
	background-image: linear-gradient(150deg, #0e3350, #05121f);
}
.nsfa-ans-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsfa-ans-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.nsfa-ans-inner {
	position: relative; width: 100%; max-width: 1401px;
	display: flex; flex-direction: column; gap: 48px;
}
.nsfa-ans-top { display: flex; gap: 36px; align-items: center; }
.nsfa-ans-top h2 {
	font-size: clamp(38px, 5vw, 60px);
	font-weight: 600; color: #fff;
	letter-spacing: 0.033em; line-height: 1.08; white-space: pre-line;
}
.nsfa-ans-fig-block {
	border-left: 4px solid var(--gold); padding-left: 36px;
	width: 700px; max-width: 100%;
	display: flex; flex-direction: column; gap: 24px;
}
.nsfa-ans-fig { font-family: var(--font-display); font-weight: 700; font-size: clamp(42px, 5vw, 60px); line-height: 1; color: var(--gold); }
.nsfa-ans-sup { font-size: 16px; line-height: 26px; color: #fff; margin: 0; }
.nsfa-ans-fig ~ .nsfa-ans-sup { margin-top: 16px; }
.nsfa-btn-fin { align-self: flex-start; min-width: 0; }
.nsfa-prog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.nsfa-prog { padding: 5px; display: flex; flex-direction: column; color: inherit; }
.nsfa-prog-img { height: 250px; position: relative; background-color: var(--dark); }
.nsfa-prog-img::before {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: url("../images/about/border-2x.png") center / 100% 100% no-repeat;
	pointer-events: none;
}
.nsfa-prog-body {
	background: var(--blue); padding: 20px 30px; flex: 1;
	display: flex; flex-direction: column; gap: 6px;
	justify-content: flex-start; align-content: flex-start;
}
.nsfa-prog-body h3 { font-size: 30px; font-weight: 600; color: #fff; line-height: 36px; text-align: center; margin: 0; }
.nsfa-prog-body p {
	font-family: var(--font-body); font-size: 16px; font-weight: 400;
	line-height: 26px; letter-spacing: normal; color: #fff;
	text-align: center; margin: 0; padding: 0;
}
a.nsfa-prog { transition: transform .2s ease; }
a.nsfa-prog:hover { transform: translateY(-4px); }

/* ══ 8 · MEASURE UP ════════════════════════════════════════════════════════ */
.nsfa-mu {
	position: relative; padding: 100px 0;
	display: flex; flex-direction: column; align-items: center; gap: 56px;
	background: var(--white);
	overflow: hidden;
}
.nsfa-mu-bg { position: absolute; inset: 0; pointer-events: none; }
.nsfa-mu-bg-img { position: absolute; inset: 0; opacity: .5; }
.nsfa-mu-bg-texture {
	position: absolute; inset: 0;
	background: url("../images/about/texture-paper.jpg") center / cover no-repeat;
	mix-blend-mode: multiply; opacity: .9;
}
.nsfa-mu-inner {
	position: relative; width: var(--max-w); max-width: 100%;
	padding: 0 40px; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.nsfa-mu-inner h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: var(--dark);
	letter-spacing: 0.033em; line-height: 1.25; text-align: center;
}
.nsfa-mu-body { font-size: 16px; line-height: 26px; color: var(--ink); text-align: center; }
.nsfa-mu-body p { margin: 0 0 1em; }
.nsfa-mu-body p:last-child { margin-bottom: 0; }
.nsfa-mu-body b, .nsfa-mu-body strong { font-weight: 700; }
.nsfa-mu-body a {
	color: var(--lb); font-weight: 600; text-decoration: underline;
	text-decoration-color: var(--gold); text-decoration-thickness: 2px;
}

/* Flip badge cards — ported from the financials accreditation component. */
.nsfa-badges {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 290px));
	gap: 32px;
	justify-content: center;
	padding: 0 40px;
	width: 100%;
}
.nsfa-badge-card { width: 100%; max-width: 290px; justify-self: center; }
.nsfa-badge-card {
	background: transparent; border: 0; color: #fff;
	width: 290px; min-height: 300px; padding: 0;
	perspective: 1100px; outline: none; cursor: pointer;
}
.nsfa-badge-card__inner {
	position: relative; height: 100%; min-height: 300px;
	transform-style: preserve-3d;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nsfa-badge-card:focus-visible .nsfa-badge-card__inner,
.nsfa-badge-card:has(:focus-visible) .nsfa-badge-card__inner,
.nsfa-badge-card.is-flipped .nsfa-badge-card__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.nsfa-badge-card:hover .nsfa-badge-card__inner { transform: rotateY(180deg); }
}
.nsfa-badge-card__face {
	position: absolute; inset: 0; min-height: 300px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 32px 22px 28px; text-align: center;
	background: var(--blue);
	box-shadow: 0 4px 24px -1px rgba(0,0,0,.25);
	backface-visibility: hidden;
	transition: background-color .3s ease;
}
.nsfa-badge-card__face::before {
	content: ""; position: absolute; inset: 0;
	background: url("../images/border.png") center / 100% 100% no-repeat;
	pointer-events: none;
}
.nsfa-badge-card__face > * { position: relative; z-index: 1; }
.nsfa-badge-card__face--back { gap: 20px; transform: rotateY(180deg); }
/* #0c2443 matches the financials flip cards (--nsf-financials-navy); both
   pages should migrate to var(--dark) together when that hex is retired. */
.nsfa-badge-card:focus-visible .nsfa-badge-card__face,
.nsfa-badge-card:has(:focus-visible) .nsfa-badge-card__face,
.nsfa-badge-card.is-flipped .nsfa-badge-card__face { background: #0c2443; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.nsfa-badge-card:hover .nsfa-badge-card__face { background: #0c2443; }
}
/* Only the visible face receives pointer events. */
@media (min-width: 768px) {
	.nsfa-badge-card__face--back { pointer-events: none; }
	.nsfa-badge-card:focus-visible .nsfa-badge-card__face--back,
	.nsfa-badge-card:has(:focus-visible) .nsfa-badge-card__face--back,
	.nsfa-badge-card.is-flipped .nsfa-badge-card__face--back { pointer-events: auto; }
	.nsfa-badge-card:focus-visible .nsfa-badge-card__face--front,
	.nsfa-badge-card:has(:focus-visible) .nsfa-badge-card__face--front,
	.nsfa-badge-card.is-flipped .nsfa-badge-card__face--front { pointer-events: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.nsfa-badge-card:hover .nsfa-badge-card__face--back { pointer-events: auto; }
	.nsfa-badge-card:hover .nsfa-badge-card__face--front { pointer-events: none; }
}
.nsfa-badge-card__image {
	display: flex; align-items: center; justify-content: center;
	height: 92px; width: 100%; margin-bottom: 18px; position: relative;
}
.nsfa-badge-card__image::after {
	content: ""; position: absolute; bottom: -13px; left: 50%;
	transform: translateX(-50%); width: min(144px, 78%); height: 1px;
	background: rgba(255,255,255,.24);
}
.nsfa-badge-card__image img { max-width: 118px; max-height: 90px; width: auto; object-fit: contain; }
.nsfa-badge-card h3 {
	color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 500;
	line-height: 1.28; margin: 14px 0 0; text-transform: uppercase; text-wrap: pretty;
}
.nsfa-badge-card h3 em {
	display: block; font-family: var(--font-body); font-style: normal;
	font-weight: 400; font-size: 16px; text-transform: none; margin-top: 4px;
}
.nsfa-badge-card p {
	color: #fff; font-family: var(--font-body); font-size: 14px;
	font-weight: 500; line-height: 1.5; margin: 0; max-width: 218px; text-wrap: pretty;
}
.nsfa-badge-card a {
	display: inline-flex; justify-content: center; min-width: 132px;
	padding: 10px 14px; border: 2px solid var(--gold); color: #fff;
	font-family: var(--font-display); font-size: 16px; font-weight: 500;
	line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
	transition: background-color .3s ease, color .3s ease;
}
.nsfa-badge-card a:hover,
.nsfa-badge-card a:focus { background: #040a2a; color: var(--gold); } /* matches financials badge-card link hover */

/* Metric variant — front shows a large value + caption instead of a logo. */
.nsfa-metric-value {
	font-family: var(--font-display); font-weight: 700;
	font-size: clamp(44px, 5vw, 60px); line-height: 1; color: var(--gold);
	text-transform: uppercase;
}
.nsfa-metric-cap {
	color: #fff; font-family: var(--font-body); font-size: 15px;
	font-weight: 500; line-height: 1.45; margin: 16px 0 0; max-width: 220px;
	text-wrap: pretty;
}
.nsfa-metric-card--static { cursor: default; }
.nsfa-metric-card--static .nsfa-badge-card__face { position: relative; }

/* Ways to listen — a gold hairline label, then platform icon links. The SVGs
   are masked rather than <img>, so one file tints to any state colour. */
/* max-width = the three chips' natural width, so the label's rule terminates
   with the last chip instead of running past it. */
.nsfa-pod-listen { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; max-width: 430px; }
.nsfa-pod-listen-label {
	font-family: var(--font-display); font-size: 14px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
	display: flex; align-items: center; gap: 14px;
}
/* the rule runs from the label out to the edge of the column */
.nsfa-pod-listen-label::after {
	content: ""; flex: 1 1 auto; height: 1px;
	background: linear-gradient(to right, rgba(240,171,0,.55), rgba(240,171,0,0));
}
.nsfa-pod-listen-links {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
/* Hairline between platforms now that the boxes are gone. */
.nsfa-pod-listen-links li { display: flex; align-items: center; }
.nsfa-pod-listen-links li + li::before {
	content: ""; flex: 0 0 1px; width: 1px; height: 18px;
	background: rgba(255,255,255,.28);
}
/* No chrome at rest — the icon and name carry it. Keeps the 44px tap target
   via padding, and a focus ring still appears for keyboard users. */
.nsfa-pod-listen-link {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 16px; color: #fff; min-height: 44px;
	transition: color .25s ease, transform .25s ease;
}
.nsfa-pod-listen-links li:first-child .nsfa-pod-listen-link { padding-left: 0; }
.nsfa-pod-listen-link:hover { color: var(--gold); transform: translateY(-2px); }
.nsfa-pod-listen-link:focus-visible {
	color: var(--gold);
	outline: 2px solid var(--gold); outline-offset: 3px;
}
.nsfa-pod-listen-icon {
	width: 22px; height: 22px; flex: 0 0 22px; display: block;
	background-color: #fff;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
	transition: background-color .25s ease;
}
.nsfa-pod-listen-link:hover .nsfa-pod-listen-icon,
.nsfa-pod-listen-link:focus-visible .nsfa-pod-listen-icon { background-color: var(--gold); }
.nsfa-pod-listen-name {
	font-family: var(--font-display); font-size: 15px; font-weight: 500;
	letter-spacing: .02em; text-transform: uppercase; line-height: 1;
	white-space: nowrap; /* "Apple Podcasts" must never stack inside its chip */
}
.nsfa-pod-listen-bottom { display: none; }

/* ══ 9 · STATEMENT ═════════════════════════════════════════════════════════ */
.nsfa-stmt { background: var(--btn-navy); padding: 28px 60px; display: flex; align-items: center; justify-content: center; }
.nsfa-stmt p {
	font-family: var(--font-display); font-weight: 500;
	font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.72px;
	text-transform: uppercase; color: var(--gold); text-align: center; line-height: 1.15; margin: 0;
	text-wrap: balance;
}

/* ══ 10 · PODCAST ══════════════════════════════════════════════════════════ */
.nsfa-pod { position: relative; padding: 100px var(--gutter); overflow: hidden; }
.nsfa-pod-bg {
	position: absolute; inset: 0;
	background-color: var(--dark);
	background-image: linear-gradient(150deg, #0e3350, #05121f);
}
.nsfa-pod-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); }
.nsfa-pod-inner {
	position: relative; max-width: var(--max-w); margin: 0 auto;
	display: flex; gap: 64px; align-items: center;
}
.nsfa-pod-video {
	flex: 1; align-self: stretch; min-height: 360px; position: relative;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.nsfa-pod-video::before {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: url("../images/about/border-2x.png") center / 100% 100% no-repeat;
	pointer-events: none;
}
.nsfa-pod-still { position: absolute; inset: 0; background-color: #000; }
.nsfa-pod-play {
	position: relative; z-index: 1; display: inline-flex;
	align-items: center; line-height: 0; /* kill the inline-block baseline gap
	   that pushed the button a few px above the true vertical centre */
}
.nsfa-pod-content { width: 468px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.nsfa-pod-head { display: flex; align-items: center; gap: 24px; }
.nsfa-pod-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nsfa-pod-logo {
	width: 140px; height: 140px; flex: 0 0 auto; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.nsfa-pod-logo img { width: 100%; height: 100%; object-fit: contain; }
.nsfa-pod-kicker {
	font-family: var(--font-display); font-weight: 600; font-size: 12px;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); line-height: 22px;
}
.nsfa-pod-content h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: #fff; letter-spacing: 0.033em; line-height: 1.25;
}
.nsfa-pod-content p { font-size: 16px; line-height: 26px; color: #fff; margin: 0; }  /* flex gap governs */
/* The theme styles body links #0075B0 with no hover state — nearly invisible on
   this near-black section. Gold at rest, white on hover, underline throughout so
   the link is findable inside body copy.
   The :not() chain mirrors style.css's `p a:not(.btn):not(.button):not(.trident-btn)`,
   whose three :not()s give it (0,3,2); without them this rule loses. */
.nsfa-pod-content p a:not(.btn):not(.button):not(.trident-btn) {
	color: var(--gold); font-weight: 600;
	text-decoration: underline; text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.nsfa-pod-content p a:not(.btn):not(.button):not(.trident-btn):hover,
.nsfa-pod-content p a:not(.btn):not(.button):not(.trident-btn):focus-visible {
	color: #fff; text-decoration-color: var(--gold);
}

/* ══ 11 · CTA ══════════════════════════════════════════════════════════════ */
.nsfa-cta {
	position: relative; border-top: 2px solid #000;
	padding: 120px 0 80px; /* matches the site's historical section padding */
	display: flex; flex-direction: column; align-items: center; overflow: hidden;
	background: var(--off) url("../images/about/texture-paper.jpg") center / cover no-repeat;
}
.nsfa-cta-bg { position: absolute; inset: 0; }
.nsfa-cta-torn {
	position: absolute; top: 0; left: 0; right: 0; height: 57px;
	background: url("../images/about/torn-edge.png") top center no-repeat;
	background-size: 112% 100%;
	pointer-events: none;
}
.nsfa-cta-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.nsfa-cta h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600; color: var(--blue);
	letter-spacing: 0.033em; line-height: 1.25; text-align: center;
}
.nsfa-cta-sub { font-size: 16px; line-height: 26px; color: var(--ink); text-align: center; max-width: 600px; margin: 16px auto 0; }
.nsfa-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════
   Rhythm: tablet (≤1000px) 64px/40px, mobile (≤767px) 64px/20px section
   padding. The collage survives on mobile as a compact parallax divider. */
@media (max-width: 1200px) {
	.nsfa-sal { height: 360px; }
	.nsfa-badges { grid-template-columns: repeat(2, minmax(0, 290px)); }
}
@media (max-width: 1100px) {
	.nsfa-ans-top { flex-direction: column; align-items: flex-start; gap: 24px; }
	/* Full-width now, so the left rule + indent no longer frame anything. */
	.nsfa-ans-fig-block { width: 100%; border-left: 0; padding-left: 0; }
	.nsfa-prog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.nsfa-prog { padding: 0; }
}
/* Raised from 1000px so iPad Pro portrait (1024) stacks. At 1024 the desktop
   two-column layout left the Challenge copy ~242px wide, squeezed the Who play
   button into 136px, and stood the podcast video up at 190x377. */
@media (max-width: 1100px) {
	.nsfa-buds { flex-direction: column; }
	.nsfa-buds-left::after, .nsfa-ch-left::after { display: none; }
	.nsfa-buds-left { padding: 64px 40px; }
	.nsfa-buds-copy { width: 100%; max-width: none; }
	.nsfa-buds-img { min-height: 320px; }
	.nsfa-ch { flex-direction: column; }
	.nsfa-ch-left { padding: 64px 40px; }
	.nsfa-ch-copy { width: 100%; max-width: none; }
	.nsfa-ch-right { min-height: 420px; }
	/* NSW: split copy with the cards between (full single-paragraph hidden). */
	.nsfa-nsw-body-full { display: none; }
	.nsfa-nsw-body-lead, .nsfa-nsw-body-rest { display: block; }
	/* Stacked Who: the poster photo returns as the backdrop (video stays
	   desktop-only) with a scrim, a scaled-down frosted card, a gold-ruled
	   centered title, and the site frame on the thumbnail. */
	.nsfa-who { flex-direction: column; padding: 64px 20px; align-items: stretch; background: var(--dark); }
	.nsfa-who-bg { display: block; }
	.nsfa-who-video { display: none; }
	.nsfa-who-bg::after { background: rgba(0,0,0,.55); }
	.nsfa-who-card {
		width: 100%; padding: 28px 20px;
		background: rgba(11,45,73,.78);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.25);
	}
	.nsfa-who-card h2 {
		text-align: center; align-self: center;
		display: inline-flex;
		border-bottom: 4px solid var(--gold); padding-bottom: 8px;
		margin-bottom: 4px;
	}
	.nsfa-who-playarea { display: none; }
	.nsfa-who-inline {
		display: flex; align-items: center; justify-content: center;
		position: relative; aspect-ratio: 16 / 9; margin: 4px 0 1em;
		background-color: #000; background-size: cover; background-position: center;
	}
	.nsfa-who-inline::after {
		content: ""; position: absolute; inset: 0; z-index: 1;
		background: url("../images/about/border-2x.png") center / 100% 100% no-repeat;
		pointer-events: none;
	}
	.nsfa-who-inline a { position: relative; z-index: 2; }
	.nsfa-pod { padding: 64px 40px; }
	.nsfa-pod-inner { flex-direction: column; }
	.nsfa-pod-video { width: 100%; min-height: 300px; }
	.nsfa-pod-content { width: 100%; }
	.nsfa-ans { padding: 64px 40px; }
	.nsfa-mu { padding: 64px 0; }
	.nsfa-tl { padding: 64px 0 48px; }
	.nsfa-cta { padding: 96px 40px 48px; }
}
/* ── Tablet (iPad Pro portrait and friends) ────────────────────────────────
   The stacked rules above are right for phones but overshoot here: this range
   still has room for two columns in places, and stacking the NSW copy pushed
   its closing lines onto the wave crest where they lost all contrast. */
@media (min-width: 768px) and (max-width: 1100px) {
	/* Keep the NSW paragraph whole, as on desktop — the split dropped the last
	   lines onto the wave with no contrast behind them. */
	.nsfa-nsw-body-full { display: block; }
	.nsfa-nsw-body-lead, .nsfa-nsw-body-rest { display: none; }
	/* Collage clears the heading with room to spare. */
	.nsfa-nsw { padding: 200px 80px 80px; }

	/* BUD/S stays a left/right column here. The scrub panel keeps its video —
	   about.js drives every .nsfa-buds-scrub by class and skips hidden ones. */
	.nsfa-buds { flex-direction: row; min-height: 560px; }
	.nsfa-buds-left { flex: 1 1 56%; padding: 72px 40px; }
	.nsfa-buds-left::after { display: block; }
	.nsfa-buds-img { flex: 1 1 44%; min-height: 0; }
	.nsfa-buds-inline { display: none; }

	/* Who: open the top and bottom so the Challenge above stops running into
	   it. The frosted card keeps its blur — only the section breathes more. */
	.nsfa-who { padding: 112px 40px; }

	/* Podcast: copy first, still on the right — it's supplemental, and we read
	   left to right. Square here, vertically centred with the copy. */
	.nsfa-pod-inner { flex-direction: row; align-items: center; }
	.nsfa-pod-content { order: 1; width: auto; flex: 1 1 56%; }
	.nsfa-pod-video { order: 2; flex: 1 1 44%; aspect-ratio: 1 / 1; min-height: 0; align-self: center; }

	/* The heading fits on one line here (597px needed, ~944px available), so
	   collapse the field's manual line break — it's honoured via pre-line —
	   and give it the section gold rule, same as mobile. */
	.nsfa-ans-top h2 {
		white-space: normal;
		align-self: flex-start; display: inline-flex;
		border-bottom: 4px solid var(--gold); padding-bottom: 8px;
	}

	/* No torn divider: with the copy and video side by side it reads as a
	   stray vertical line rather than an edge. */
	.nsfa-buds-left::after { display: none; }

	/* Who: tighter overall, with the card carrying more of the side inset. */
	.nsfa-who { padding: 80px 60px; }
	.nsfa-who-card { padding: 28px 40px; }

	/* Challenge: image + stats sit between the paragraphs, inset rather than
	   full-bleed, so "Over the course…" closes the section beneath them. */
	.nsfa-ch-right { display: none; }
	/* .nsfa-ch-copy is a flex column with align-items:flex-start, so a block whose
	   children are all absolutely positioned would shrink to zero — stretch it. */
	.nsfa-ch-inline {
		display: block; position: relative; overflow: hidden;
		aspect-ratio: 16 / 10; margin: 28px 0 32px;
		width: 100%; align-self: stretch;
	}
	.nsfa-ch-inline-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
	.nsfa-ch-inline .nsfa-ch-scrim { position: absolute; inset: 0; }
	.nsfa-ch-inline .nsfa-ch-stats { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 32px 32px; }
	.nsfa-ch-left { padding: 72px 80px; }

	/* Measure Up: four across fits once the cards give up their 290px cap. */
	/* One inset on the wrapper so the heading, copy and card row share an edge —
	   pulling the text in to meet the cards rather than stretching the cards. */
	.nsfa-mu-inner { padding: 0 80px; }
	/* .nsfa-badges is a sibling of .nsfa-mu-inner, not a child — it needs the
	   same inset applied directly for the copy and cards to share an edge. */
	.nsfa-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0 80px; }
	.nsfa-badge-card { width: 100%; max-width: none; min-height: 0; }
	.nsfa-badge-card__face { padding: 24px 14px 22px; }
	.nsfa-badge-card h3 { font-size: 14px; }
	.nsfa-badge-card h3 em { font-size: 14px; }
	.nsfa-badge-card p { font-size: 13px; }
	.nsfa-badge-card a { min-width: 0; padding: 9px 12px; font-size: 14px; }
}

@media (max-width: 900px) {
	/* stays three-up here — 1-col was an oversight; phones are 3-up too */
	.nsfa-sal-grid { gap: 12px; }
	.nsfa-sal { height: 260px; }
	.nsfa-nsw { padding-top: 200px; }
}
@media (max-width: 767px) {
	/* Section rhythm: 64px vertical, 20px sides, everywhere. */
	.nsfa-hero { padding: 64px 20px 120px; }
	/* The headline carries a manual break, so it is meant to read as two lines.
	   At 38px the longer line ("Serving those who") overflows a phone and wraps
	   to three. Size it off that line instead: 9.4 is its width-to-font-size
	   ratio in Oswald 600, so the break holds from 320px up. */
	.nsfa-hero h1 { font-size: min(38px, calc((100vw - 44px) / 9.4)); }
	.nsfa-hero-mission { font-size: 18px; line-height: 28px; }
	.nsfa-nsw { padding: 140px 20px 64px; }
	.nsfa-nsw-head { gap: 16px; }
	.nsfa-nsw-inner { gap: 32px; }
	/* Ocean image anchored to the section bottom at ~200%, top edge faded and
	   kept low so the wave never bleeds into the copy; extra bottom padding
	   gives it room of its own. */
	.nsfa-nsw { padding-bottom: 150px; }
	/* Fixed-height band (not a % of the tall section) so the wave lives inside
	   the bottom padding and can never climb into the copy. */
	.nsfa-nsw-bg-img {
		background-size: 200% auto; background-position: center top;
		top: auto; height: 150px; bottom: 0;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 10%);
	}
	/* A dedicated mobile crop (crest at its top) replaces the desktop photo. */
	.nsfa-nsw-bg-img.has-mobile-bg {
		background-image: var(--nsw-bg-m) !important;
		background-size: cover;
	}
	/* Sea/Air/Land stay three-up as a compact visual break. */
	.nsfa-sal-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.nsfa-sal { height: 150px; }
	.nsfa-sal-scrim { background: linear-gradient(to bottom, rgba(11,37,67,0) 40%, #0b2543 100%); }
	.nsfa-sal-label { bottom: 12px; font-size: 20px; }
	.nsfa-buds-left, .nsfa-ch-left { padding: 64px 20px; }
	/* The scrubbed video sits between the two paragraphs; standalone panel hides. */
	.nsfa-buds-img { display: none; }
	.nsfa-buds-inline {
		display: block; position: relative; aspect-ratio: 16 / 9; margin: 4px 0 1em; overflow: hidden;
		background-size: cover; background-position: center;
	}
	/* Section edges, same hairline as the Answer section, so BUD/S reads as its
	   own chapter between the two light sections above and below it. */
	.nsfa-buds {
		border-top: 1px solid rgba(166,190,213,.22);
		border-bottom: 1px solid rgba(166,190,213,.22);
	}
	/* Static image on mobile — the scrubbed video stays a desktop moment. */
	.nsfa-buds-inline .nsfa-buds-scrub { display: none; }
	/* Challenge: centered title first, image inset below it, then the copy —
	   texture carried by the section so all three sit on the same paper. */
	.nsfa-ch {
		flex-direction: column; padding-top: 64px;
		background: var(--off) url("../images/about/texture-paper.jpg") center / cover no-repeat;
	}
	.nsfa-ch-left { background: transparent; }
	.nsfa .nsfa-ch-title-m { display: inline-flex; order: 0; align-self: center; margin: 0 20px; text-align: center; font-size: 30px; font-weight: 600; color: var(--dark); letter-spacing: 0.033em; line-height: 1.25; }
	.nsfa-ch-right { order: 1; min-height: 300px; margin: 24px 20px 0; }
	.nsfa-ch-left { order: 2; padding-top: 32px; }
	.nsfa .nsfa-ch-copy h2 { display: none; }
	.nsfa-ch-stats { padding: 0 0 24px 20px; gap: 20px; }
	.nsfa-tl-title { padding: 0 20px; width: 100%; }
	.nsfa-tl-track { padding: 0 20px; }
	.nsfa-tl-rope { left: 130px; right: 64px; }  /* 20 track + 44 card gutter */
	/* Who We Are, mobile: flat navy section, centered gold-rule title, and the
	   ambient background video as a full-bleed band between the two copy
	   paragraphs — the play button rides on it as the section's anchor.
	   The photo-scrim + frosted-card treatment stays on tablet widths. */
	.nsfa-who { padding: 64px 20px; background: var(--dark); }
	.nsfa-who-bg { display: none; }
	.nsfa-who-card {
		padding: 0; background: transparent;
		-webkit-backdrop-filter: none; backdrop-filter: none;
		box-shadow: none;
	}
	/* Faint NSF mark behind the section, annual-report style. Painted as a mask
	   so the tint is a single controllable value: white at 5.5% over the navy
	   lifts it to ~#183853, which keeps white body copy above 10:1 contrast. */
	.nsfa-who::before {
		content: ""; position: absolute; z-index: 0; pointer-events: none;
		width: 88%; aspect-ratio: 186 / 188;
		top: 12px; right: -14%; left: auto;
		background: rgba(255,255,255,.055);
		-webkit-mask: url("../images/about/who-we-are-icon.svg") center / contain no-repeat;
		mask: url("../images/about/who-we-are-icon.svg") center / contain no-repeat;
	}
	.nsfa-who-card { z-index: 1; }
	.nsfa-who-inline { margin: 8px -20px; aspect-ratio: 16 / 9; overflow: hidden; }
	.nsfa-who-inline-video {
		display: block; position: absolute; inset: 0;
		width: 100%; height: 100%; object-fit: cover;
	}
	.nsfa-who-playarea { margin-top: 24px; }
	/* Who We Are and Answer the Call are both navy on phones, so the section
	   boundary washes out. Step the Answer section deeper and give it a defined
	   top edge, so the change of chapter reads without a new element. */
	.nsfa-ans { padding: 64px 20px; border-top: 1px solid rgba(166,190,213,.22); }
	.nsfa-ans-scrim { background: rgba(0,0,0,.45); }
	.nsfa-ans-inner { gap: 32px; }
	.nsfa-ans-top { gap: 16px; }
	/* Centered single-line heading with the section gold rule. */
	.nsfa-ans-top h2 {
		white-space: nowrap; text-align: center; font-size: 26px; line-height: 1.2;
		align-self: center; display: inline-flex;
		border-bottom: 4px solid var(--gold); padding-bottom: 8px;
	}
	.nsfa-ans-top { align-items: center; }
	/* No left border on the figure block at mobile; copy centered. */
	.nsfa-ans-fig-block { border-left: 0; padding-left: 0; }
	.nsfa-ans-sup { text-align: center; }
	/* No financials button on mobile — the in-copy link covers it. */
	.nsfa-ans-fig-block .nsfa-btn-fin { display: none; }
	.nsfa-ans-cta { display: none; }
	.nsfa-prog-grid { grid-template-columns: 1fr; gap: 20px; }
	.nsfa-prog { padding: 0; }
	.nsfa-prog-img { height: 220px; }
	.nsfa-mu-inner { padding: 0 20px; }
	/* Compact 2×2 accolade grid — full archive visible in one screen. */
	/* Flip cards become a tap-to-open accordion (icon · title · chevron) —
	   mirrors the financials page's mobile lockup. The existing tap handler in
	   about.js already toggles .is-flipped, so no JS change is needed. */
	.nsfa-badges {
		padding: 0 16px;
		grid-template-columns: 1fr;
		gap: 10px;
		max-width: none;
		margin: 0 auto;
	}
	.nsfa-badge-card {
		width: 100%; max-width: none; min-height: 0;
		perspective: none;
		box-shadow: 0 6px 18px -8px rgba(0,0,0,.4);
	}
	.nsfa-badge-card__inner {
		display: block; min-height: 0;
		transform: none !important; transform-style: flat;
	}
	.nsfa-badge-card__face {
		position: static; inset: auto; min-height: 0;
		backface-visibility: visible; transform: none;
		background: var(--dark); box-shadow: none; transition: none;
	}
	.nsfa-badge-card__face::before { display: none; } /* drop the frame overlay */

	/* Header row: seal · title · chevron */
	.nsfa-badge-card__face--front {
		flex-direction: row; justify-content: flex-start; align-items: center;
		gap: 14px; padding: 13px 16px; text-align: left; cursor: pointer;
	}
	.nsfa-badge-card__image {
		flex: 0 0 auto; width: 46px; height: 46px; margin: 0;
	}
	.nsfa-badge-card__image::after { display: none; } /* the divider rule */
	.nsfa-badge-card__image img { max-width: 46px; max-height: 46px; }
	.nsfa-badge-card__face--front h3 {
		flex: 1 1 auto; margin: 0; padding: 0;
		font-size: 14px; line-height: 1.25; text-align: left;
	}
	.nsfa-badge-card__face--front h3 em { font-size: 14px; }
	.nsfa-badge-card__face--front::after {
		content: ""; flex: 0 0 auto; width: 11px; height: 11px;
		border-right: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
		margin: -5px 4px 0; transform: rotate(45deg);
		transition: transform .32s ease, margin-top .32s ease;
	}
	.nsfa-badge-card.is-flipped .nsfa-badge-card__face--front::after {
		margin-top: 3px; transform: rotate(-135deg);
	}

	/* Collapsible panel — description + link, indented under the title. */
	.nsfa-badge-card__face--back {
		align-items: flex-start; gap: 16px; text-align: left;
		max-height: 0; overflow: hidden; padding: 0 18px 0 76px;
		transition: max-height .35s ease, padding .35s ease;
	}
	.nsfa-badge-card.is-flipped .nsfa-badge-card__face--back {
		max-height: 380px; padding: 2px 18px 22px 76px;
	}
	.nsfa-badge-card p { font-size: 13px; line-height: 1.5; max-width: none; }
	.nsfa-badge-card a { min-width: 0; padding: 8px 14px; font-size: 13px; }
	.nsfa-metric-value { font-size: 36px; }
	.nsfa-metric-cap { font-size: 12px; margin-top: 10px; }
	.nsfa-stmt { padding: 20px; }
	.nsfa-pod { padding: 64px 20px; }
	.nsfa-pod-inner { gap: 32px; }
	.nsfa-pod-content { order: -1; }
	.nsfa-pod-content .nsfa-pod-listen { display: none; }
	.nsfa-pod-listen.nsfa-pod-listen-bottom { display: flex; }
	.nsfa-pod-video { min-height: 240px; width: 100%; }
	.nsfa-pod-head { gap: 16px; justify-content: center; }
	.nsfa-pod-head-text { text-align: center; align-items: center; }
	.nsfa-pod-content > p { text-align: center; }
	.nsfa-pod-logo { width: 100px; height: 100px; }
	.nsfa-cta { padding: 88px 20px 48px; border-top: 0; }
	.nsfa-cta-torn { height: 40px; }
	.nsfa-cta-sub { margin-top: 8px; }
	.nsfa .playbtncontainer { width: 72px; }
	.nsfa .nsfa-who-play .playbtncontainer { width: 96px; }
}
/* Collage as a compact parallax divider on mobile (scaled ~56%). */
@media (max-width: 767px) {
	.nsfa-collage { height: 140px; margin-top: -60px; margin-bottom: -80px; }
	.nsfa-collage-track { height: 140px; gap: 10px; padding-left: 10px; }
	.nsfa-collage-item { box-shadow: 0 3px 12px rgba(11,45,73,.35); }
	.nsfa-collage-item:nth-child(odd)  { width: 144px; height: 101.5px; margin-top: 19.25px; }
	.nsfa-collage-item:nth-child(even) { width: 122.5px; height: 140px; margin-top: 0; }
}
@media (max-width: 480px) {
	/* Full-width tap targets once side-by-side buttons get cramped. */
	.nsfa-cta-btns { flex-direction: column; width: 100%; }
	.nsfa-pod-listen, .nsfa-pod-listen-links { width: 100%; max-width: none; }
	/* One line at phone widths: tighter type, smaller marks, no wrap. */
	.nsfa-pod-listen-links { flex-wrap: nowrap; }
	.nsfa-pod-listen-link { padding: 10px 11px; gap: 7px; }
	.nsfa-pod-listen-name { font-size: 13px; letter-spacing: 0; }
	.nsfa-pod-listen-icon { width: 18px; height: 18px; flex-basis: 18px; }
	.nsfa-cta-btns .nsfa-btn { width: 100%; }
	.nsfa-ch-stats { flex-direction: column; gap: 16px; }
}

/* Smallest phones (iPhone SE): one more step down keeps the three platforms
   on a single line without the names wrapping. */
@media (max-width: 360px) {
	.nsfa-pod-listen-name { font-size: 11px; }
	.nsfa-pod-listen-link { padding: 10px 7px; gap: 6px; }
	.nsfa-pod-listen-icon { width: 16px; height: 16px; flex-basis: 16px; }
}

/* Ambient background videos fall back to their posters for users who
   prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.nsfa-hero-video,
	.nsfa-who-video,
	.nsfa-sal-video,
	.nsfa-tl-video,
	.nsfa-buds-scrub,
	.nsfa-ans-video { display: none; }
}