/* ============================================================================
   Community Survey Results (page-survey-results.php).

   Scoped under .nsfsr. Tokens are the NSF brand palette verbatim, same set the
   About page uses; no new colours. The page sits inside .mission-section, whose
   textured background shows between the cards.

   Specificity note: style.css styles `.mission-section li a:not(.btn):not(.button):not(.trident-btn)`
   as a blue underlined body link. Anything here that is a link inside a list
   (the jump chips, the result tiles) has to carry the same :not() chain to win.
   ========================================================================= */

/* ── Spacing scale ─────────────────────────────────────────────────────────
   Every gap on this page comes from one of these, so the three breakpoints
   redefine the scale rather than chasing individual rules. Steps are multiples
   of 4. Declared on the body class, not on .nsfsr: the section wrapper that
   holds the cards is an ANCESTOR of .nsfsr, and a custom property only
   inherits downwards, so a scale defined on .nsfsr is invisible to it. */
body.page-template-page-survey-results-php {
	--sp-card-pad-y:  40px; /* card top/bottom padding */
	--sp-card-pad-x:  40px; /* card side padding */
	--sp-card-gap:    32px; /* between cards */
	--sp-block:       32px; /* between blocks inside a card */
	--sp-head:        20px; /* card heading to its copy */
	--sp-tile-gap:    20px; /* between result tiles */
	--sp-nav-gap:     40px; /* jump list to the first card */
	--sp-section-end: 64px; /* last card to the closing band */
	--sp-band-top:    96px; /* closing band padding */
	--sp-band-bottom: 80px;
}

.nsfsr {
	/* Brand palette, NSF Brand Manual */
	--dark:  #0b2d49;
	--blue:  #003c69;
	--lb:    #0075b0;
	--gold:  #f0ab00;
	--gray:  #566175;
	--ocean: #a6bed5;
	--off:   #f5f4f0;
	--white: #ffffff;
	--ink:   #24282d;
	--line:  rgba(11, 45, 73, 0.14);

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

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

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

.nsfsr h2,
.nsfsr h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: var(--dark);
	margin: 0;
	padding: 0; /* the global h3 rule adds padding-bottom: 25px */
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.nsfsr p { text-wrap: pretty; }
.nsfsr img { display: block; max-width: 100%; height: auto; }

.nsf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Rich text from the editor ─────────────────────────────────────────── */
.nsfsr-rich > *:first-child { margin-top: 0; }
.nsfsr-rich > *:last-child { margin-bottom: 0; }
.nsfsr-rich p { margin: 0 0 1em; }
.nsfsr-rich ul,
.nsfsr-rich ol { margin: 0 0 1em; padding-left: 22px; }
/* style.css resets `ul { list-style: none }` sitewide, so editor bullets have
   to be asked for again. Markers sit outside, unlike the theme's
   list-style-position: inside lists, so wrapped lines stay aligned. */
.nsfsr-rich ul { list-style: disc outside; }
.nsfsr-rich ul ul { list-style: circle outside; }
.nsfsr-rich ol { list-style: decimal outside; }
.nsfsr-rich li { margin-bottom: 6px; }
.nsfsr-rich ul ul,
.nsfsr-rich ol ol { margin: 6px 0 0; }

/* ── Jump-to list ──────────────────────────────────────────────────────── */
/* Rendered as a div with role="navigation", not a <nav>: style.css carries
   `nav { display: none !important }` below 840px for the header menu. */
.nsfsr-nav {
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 4px solid var(--gold); /* the one accent stripe on the page, by choice */
	padding: 20px 24px;
	margin: 0 0 var(--sp-nav-gap);
}

.nsfsr-nav-label {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gray);
	/* line-height 1 so the box is the cap height. The theme's inherited 1.65
	   reserves descender space that all-caps never uses, which made the label
	   sit high in its own box and read as off-centre. */
	line-height: 1;
	margin: 0 0 14px;
}

.nsfsr-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nsfsr-nav li { margin: 0; }

.nsfsr .nsfsr-nav li a:not(.btn):not(.button):not(.trident-btn) {
	display: inline-flex;
	/* Centre, not baseline: the gold year block is a padded box and the title is
	   plain text, so aligning their baselines hung the block low against the
	   words. Centring lines the two up on their optical middles. */
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	background: var(--off);
	color: var(--dark);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nsfsr .nsfsr-nav li a:not(.btn):not(.button):not(.trident-btn):hover,
.nsfsr .nsfsr-nav li a:not(.btn):not(.button):not(.trident-btn):focus-visible {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--white);
	text-decoration: none;
}

/* Gold text on the off-white chip measured 1.9:1. The same gold block the card
   badge uses puts navy on gold instead (6.7:1) and matches the card heading. */
.nsfsr-chip-year {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--dark);
	background: var(--gold);
	padding: 5px 7px 4px;
}

/* Phone jump list: a native select, swapped in for the chips at 767px. 16px
   text stops iOS zooming the page on focus. The chevron is navy, not gold:
   gold on white is 2.1:1, under the 3:1 a control icon needs. */
.nsfsr-jump-select { display: none; }

.nsfsr .nsfsr-jump {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 44px 0 14px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.2;
	color: var(--dark);
	background-color: var(--white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230b2d49' stroke-width='2.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px 9px;
	border: 1px solid var(--gray);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.nsfsr .nsfsr-jump:focus-visible {
	outline: 3px solid rgba(0, 117, 176, 0.35);
	outline-offset: 2px;
}

/* Active state, set by survey-results.js as you scroll past each card. */
.nsfsr .nsfsr-nav li a.is-active:not(.btn):not(.button):not(.trident-btn) {
	background: var(--dark);
	border-color: var(--dark);
	color: var(--white);
}

/* The jump links land the card clear of the sticky-ish header. */
.nsfsr-card { scroll-margin-top: 110px; }

/* ── Survey card ───────────────────────────────────────────────────────── */
.nsfsr-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-card-gap);
}

/* No coloured accent stripes on cards or stat numbers. They were removed as a
   generated-UI tell that duplicated what the white-on-texture card, its shadow
   and the gold year badge already do. The jump list keeps its gold left edge. */
.nsfsr-card {
	background: var(--white);
	border: 1px solid var(--line);
	padding: var(--sp-card-pad-y) var(--sp-card-pad-x);
	box-shadow: 0 12px 28px -18px rgba(11, 45, 73, 0.45);
}

.nsfsr-card-head { margin-bottom: var(--sp-head); }

.nsfsr-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.nsfsr-badge {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--dark);
	background: var(--gold);
	padding: 7px 12px 6px;
}

.nsfsr-audience {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--gray);
}

.nsfsr-audience {
	border: 1px solid var(--line);
	padding: 6px 10px;
	color: var(--blue);
}

/* Heading sizes and colours below all carry a `.nsfsr ` prefix on purpose.
   style.css has `.page-template h2 { font-size: 222%; color: #0b2d48;
   line-height: 1.2 !important }`, which is (0,1,1) and loads after this file,
   so a single-class rule here ties and loses. Its line-height is !important
   and is left alone: 1.2 is the site's heading rhythm. */
.nsfsr .nsfsr-card-head h2 {
	font-size: 222%; /* the site's section-title size, as on the FAQ page */
	color: var(--dark);
}

/* ── Body copy: one style ──────────────────────────────────────────────────
   Every paragraph and list item inside a card, summary or details, is the same
   16px / 1.65 charcoal as the theme's own `p`, and list markers inherit that
   colour. Before this the summary set 17px, which only list items picked up
   (the theme's `p { font-size: 16px }` beat it on paragraphs), and the lists
   inherited navy, so a numbered list read bigger and bluer than the paragraph
   directly above it. Scoped to .nsfsr-card so the navy closing band keeps its
   white type. The summary runs the full card width. */
.nsfsr .nsfsr-card .nsfsr-rich p,
.nsfsr .nsfsr-card .nsfsr-rich li,
.nsfsr .nsfsr-card .nsfsr-highlights li {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
}

/* ── Headline numbers ──────────────────────────────────────────────────── */
.nsfsr-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	list-style: none;
	margin: var(--sp-block) 0 0;
	padding: var(--sp-block) 0 0;
	border-top: 1px solid var(--line);
}

.nsfsr-stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	min-width: 0;
}

.nsfsr-stat-value {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.05;
	color: var(--dark);
}

.nsfsr-stat-label {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gray);
	line-height: 1.4;
}

/* ── Result tiles ──────────────────────────────────────────────────────── */
.nsfsr-results {
	display: grid;
	gap: var(--sp-tile-gap);
	list-style: none;
	margin: var(--sp-block) 0 0;
	padding: 0;
	grid-template-columns: 1fr;
}

.nsfsr-results li { margin: 0; }

@media (min-width: 700px) {
	.nsfsr-results--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nsfsr-results--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.nsfsr-results--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nsfsr .nsfsr-results li a:not(.btn):not(.button):not(.trident-btn) {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--dark);
	color: var(--white);
	font-weight: 400;
	text-decoration: none;
	border: 2px solid var(--gold);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.nsfsr .nsfsr-results li a:not(.btn):not(.button):not(.trident-btn):hover,
.nsfsr .nsfsr-results li a:not(.btn):not(.button):not(.trident-btn):focus-visible {
	text-decoration: none;
	color: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 16px 30px -18px rgba(11, 45, 73, 0.7);
}

.nsfsr-tile-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--dark);
}

.nsfsr-tile-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.62;
	transition: opacity 0.35s ease, transform 0.6s ease;
}

.nsfsr-tile a:hover .nsfsr-tile-media img,
.nsfsr-tile a:focus-visible .nsfsr-tile-media img {
	opacity: 0.85;
	transform: scale(1.04);
}

/* Fallback mark, for a tile with no image of its own. */
.nsfsr-tile-media .nsfsr-tile-mark {
	width: auto;
	height: 46%;
	max-width: 60%;
	object-fit: contain;
	opacity: 0.35;
	margin: auto;
	position: absolute;
	inset: 0;
}

.nsfsr-tile a:hover .nsfsr-tile-mark,
.nsfsr-tile a:focus-visible .nsfsr-tile-mark {
	opacity: 0.5;
	transform: none;
}

.nsfsr-tile-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 18px 20px 20px;
}

.nsfsr-tile-note {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ocean);
	line-height: 1;
}

.nsfsr-tile-label {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--gold);
}

/* Headline numbers inside the tile, for a survey with a single results link.
   Gold on navy is 6.7:1, the ocean label 7.5:1. */
.nsfsr-tile-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin: 6px 0 2px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.nsfsr-tile-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nsfsr-tile-stat-value {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.05;
	color: var(--gold);
}

.nsfsr-tile-stat-label {
	font-family: var(--font-display);
	font-size: 12px; /* matches .nsfsr-stat-label */
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ocean);
}

.nsfsr-tile-cta {
	margin-top: auto;
	padding-top: 10px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--white);
}

.nsfsr-tile-cta .fa { margin-left: 6px; transition: transform 0.25s ease; }

.nsfsr-tile a:hover .nsfsr-tile-cta .fa,
.nsfsr-tile a:focus-visible .nsfsr-tile-cta .fa { transform: translateX(4px); }

@media (min-width: 700px) {
	/* A lone tile turns on its side and takes the full card width. Kept upright
	   it sits in one corner of a very wide card with nothing beside it, which
	   reads like something failed to load rather than a deliberate single.
	   The :not() chain and the position after the base rule are both needed to
	   beat `.nsfsr .nsfsr-results li a:not()...`, which ties on specificity. */
	.nsfsr .nsfsr-results--1 li a:not(.btn):not(.button):not(.trident-btn) { flex-direction: row; }

	.nsfsr-results--1 .nsfsr-tile-media {
		flex: 0 0 42%;
		aspect-ratio: auto;
		min-height: 230px;
	}

	.nsfsr-results--1 .nsfsr-tile-body {
		justify-content: center;
		padding: 28px 34px;
	}

	.nsfsr-results--1 .nsfsr-tile-stat-value { font-size: 34px; }

	.nsfsr-results--1 .nsfsr-tile-label { font-size: 24px; }
	.nsfsr-results--1 .nsfsr-tile-cta { margin-top: 14px; padding-top: 0; }
}

/* ── Details: the FAQ accordion ────────────────────────────────────────────
   Anatomy, sizes and the gold plus/minus are the FAQ page's .nsf-faq-item
   (css/faqs.css) so the two pages read as one system. Replicated rather than
   shared because faqs.css is only enqueued on the FAQ template and its tokens
   hang off a .nsf-faq-body body class this page does not carry. */
.nsfsr-detail {
	margin-top: var(--sp-block);
	border: 1px solid #ddd8cc;
	background: var(--white);
}

.nsfsr-detail > summary {
	position: relative;
	display: block;
	padding: 18px 60px 18px 22px;
	color: var(--dark);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.35;
	list-style: none;
	text-transform: uppercase;
}

.nsfsr-detail > summary::-webkit-details-marker { display: none; }
.nsfsr-detail > summary::marker { content: ''; }

.nsfsr-detail > summary:focus-visible {
	outline: 3px solid rgba(0, 117, 176, 0.22);
	outline-offset: 3px;
}

.nsfsr-detail[open] > summary {
	background: var(--dark);
	color: var(--white);
}

.nsfsr-detail-toggle {
	position: absolute;
	top: 50%;
	right: 22px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
}

.nsfsr-detail-toggle::before,
.nsfsr-detail-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--gold);
	transform: translate(-50%, -50%);
	transition: transform 160ms ease, opacity 160ms ease;
}

.nsfsr-detail-toggle::before { width: 18px; height: 3px; }
.nsfsr-detail-toggle::after { width: 3px; height: 18px; }

.nsfsr-detail[open] .nsfsr-detail-toggle::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.nsfsr-detail-body {
	padding: 22px 22px 22px;
}

.nsfsr-detail[open] .nsfsr-detail-body {
	animation: nsfsr-detail-reveal 220ms ease-out;
}

@keyframes nsfsr-detail-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.nsfsr-detail-body > * + * { margin-top: 20px; }

.nsfsr-cols {
	display: grid;
	gap: 8px 40px;
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.nsfsr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nsfsr-cols.is-single { grid-template-columns: 1fr; }
}

/* ── What we heard ───────────────────────────────────────────────────────── */
.nsfsr-highlights {
	background: none;
	border: 0;
	padding: 0;
}

.nsfsr-highlights-lead {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dark);
	margin: 0 0 14px;
}

/* Plain bullets, matched to the editor lists in .nsfsr-rich so every list in
   the details copy reads the same. style.css resets `ul { list-style: none }`
   sitewide, so the disc has to be asked for again. */
.nsfsr-highlights ul {
	list-style: disc outside;
	margin: 0;
	padding-left: 22px;
}

.nsfsr .nsfsr-highlights li {
	margin: 0 0 6px;
	/* style.css floats and inline-blocks list items in some contexts; these are
	   full-width rows. */
	display: list-item;
	float: none;
	clear: none;
	padding-left: 0;
}

.nsfsr .nsfsr-highlights li:last-child { margin-bottom: 0; }

/* The approved copy bolds this line; bold is all it gets. */
.nsfsr .nsfsr-highlights li.is-emphasis {
	font-weight: 700;
}

/* style.css has `#section-to-scroll { padding-bottom: 0 }`, so without this the
   last card's bottom edge touches the closing band. */
.page-template-page-survey-results-php #section-to-scroll {
	padding-bottom: var(--sp-section-end);
}

/* ── Closing: the About page CTA ───────────────────────────────────────────
   Matches .nsfa-cta on page-about.php ("Their mission never stops."): a
   the same centred heading, supporting line and buttons, on a plain navy band.
   The template renders .nsfsr-closing-wrap outside .center-content-header, so
   the band is full width with no breakout maths. */
.nsfsr-closing {
	position: relative;
	padding: var(--sp-band-top) 30px var(--sp-band-bottom);
	background: var(--dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

.nsfsr-closing-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 1236px;
}

.nsfsr .nsfsr-closing h2 {
	font-size: clamp(30px, 3.6vw, 45px);
	font-weight: 600;
	color: var(--white); /* 13.9:1 on --dark */
	letter-spacing: 0.033em;
	line-height: 1.25;
	text-align: center;
}

.nsfsr-closing-sub {
	font-size: 16px;
	line-height: 26px;
	color: var(--white);
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
}

.nsfsr-closing-sub p { margin: 0; color: var(--white); }

/* Body links are styled #0075b0 sitewide, which is 3.1:1 on this navy. */
.nsfsr .nsfsr-closing-sub p a:not(.btn):not(.button):not(.trident-btn) {
	color: var(--gold);
	text-decoration-color: var(--white);
}

.nsfsr-closing-btns {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Button spec copied from .nsfa-btn in about.css. */
.nsfsr-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);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.nsfsr-btn--navy { background: #0a2c48; color: #fff; }
.nsfsr-btn--navy:hover,
.nsfsr-btn--navy:focus-visible { background: var(--dark); color: var(--gold); text-decoration: none; }
.nsfsr-btn--gold { background: var(--gold); color: #080e1f; }
.nsfsr-btn--gold:hover,
.nsfsr-btn--gold:focus-visible { background: #d49500; color: #080e1f; text-decoration: none; }

/* ── Tablet ────────────────────────────────────────────────────────────────
   1199px, not 1000px: iPad landscape at 1024 was getting the full desktop
   scale, including a 96px band. Tile column counts keep their own breakpoints
   above (700px and 1000px) because those are about fitting, not rhythm. */
@media (max-width: 1199px) {
	body.page-template-page-survey-results-php {
		--sp-card-pad-y:  32px;
		--sp-card-pad-x:  32px;
		--sp-card-gap:    28px;
		--sp-block:       28px;
		--sp-head:        20px;
		--sp-tile-gap:    20px;
		--sp-nav-gap:     32px;
		--sp-section-end: 56px;
		--sp-band-top:    72px;
		--sp-band-bottom: 64px;
	}

	.nsfsr .nsfsr-card-head h2 { font-size: 200%; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	body.page-template-page-survey-results-php {
		--sp-card-pad-y:  24px;
		--sp-card-pad-x:  20px;
		--sp-card-gap:    20px;
		--sp-block:       24px;
		--sp-head:        16px;
		--sp-tile-gap:    16px;
		--sp-nav-gap:     24px;
		--sp-section-end: 40px;
		--sp-band-top:    56px;
		--sp-band-bottom: 48px;
	}

	.nsfsr-card { box-shadow: 0 8px 20px -16px rgba(11, 45, 73, 0.5); }

	.nsfsr .nsfsr-card-head h2 { font-size: 185%; }


	.nsfsr-nav { padding: 16px 18px; }

	/* Chips out, select in. */
	.nsfsr .nsfsr-nav ul { display: none; }
	.nsfsr .nsfsr-jump-select { display: block; }

	.nsfsr-stats { gap: 18px; }
	.nsfsr-stats li { width: 100%; }
	.nsfsr-stat-value { font-size: 30px; }

	.nsfsr-tile-label { font-size: 18px; }
	.nsfsr-tile-stats { gap: 12px; }
	.nsfsr-tile-stat { width: 100%; }

	.nsfsr-closing { padding-left: 20px; padding-right: 20px; }
	.nsfsr-closing-btns { width: 100%; flex-direction: column; }
	.nsfsr-btn { width: 100%; }

	.nsfsr-detail > summary { padding: 16px 50px 16px 18px; font-size: 18px; }
	.nsfsr-detail-toggle { right: 18px; }
	.nsfsr-detail-body { padding: 18px; }
}

/* The page still carries its old WPBakery build in post_content, and with it a
   `_wpb_post_custom_css` meta that WPBakery prints inline on every render. Most
   of it is dead (.survey_wrapper, .ult-new-ib), but one rule is not:
   `.center-content-header { padding: 0 10px !important }` below 767px. A 10px
   gutter is too tight against a bordered card, and the site's mobile gutter is
   20px. Overridden rather than deleted so switching the template back still
   restores the legacy page exactly. */
@media (max-width: 767px) {
	body.page-template-page-survey-results-php .center-content-header {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nsfsr * { transition: none !important; }
	.nsfsr .nsfsr-results li a:hover { transform: none; }
}