/**
 * Samueli Blocks — component styles.
 *
 * Palette and sizing are exposed as custom properties so individual
 * placements can be tweaked without overriding structural rules.
 */

/* Shared primitives — single source of truth for repeated values. */
:root {
	/* Dotted connector / spine dot (Illustrator stroke: 4px dot, 8.16px pitch). */
	--samueli-dot-width: 4px;
	--samueli-dot-pitch: 8.16px;
	--samueli-dot-on: 1.9px; /* radial-gradient solid stop */
	--samueli-dot-off: 2.1px; /* radial-gradient transparent stop */

	/* Section eyebrow look (small uppercase title with a thin underline). The
	   theme's .samueli-uline references these too, with literal fallbacks. */
	--samueli-eyebrow-size: 13px;
	--samueli-eyebrow-weight: 900;
	--samueli-eyebrow-tracking: 2px;
	--samueli-eyebrow-color: #555;
	--samueli-eyebrow-rule: #1b2a4a;

	/* Pinned-scrub geometry (Stories, Sections) is built from viewport fractions,
	   which balloon on very tall or zoomed-out screens. Every such length is
	   capped at the value it has on a viewport this tall, so the beats stay a
	   fixed size beyond it and are untouched below it. */
	--samueli-pin-vh-cap: 900px;
}

/* ------------------------------------------------------------------ *
 * Button — two-layer pill (outer #f1f1f2, inner #fff)
 * ------------------------------------------------------------------ */

.samueli-btn {
	--samueli-btn-outer: rgba(255, 255, 255, 0.3);
	--samueli-btn-inner: #ffffff;
	--samueli-btn-text: #636466;
	--samueli-btn-accent: #2f7d8c; /* accented words in the label (matches the icon) */
	--samueli-btn-gap: 7px;
	--samueli-btn-icon-size: 40px;
	--samueli-btn-label-gap: 14px;

	display: inline-block;
	padding: var(--samueli-btn-gap); /* the gap between the two layers */
	border-radius: 100px;
	background: var(--samueli-btn-outer);
	text-decoration: none;
	line-height: 1;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.samueli-btn__inner {
	display: inline-flex;
	align-items: center;
	gap: var(--samueli-btn-label-gap);
	padding: 8px 30px 8px 8px; /* icon hugs the left; roomy right side */
	border-radius: 100px;
	background: var(--samueli-btn-inner);
}

.samueli-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--samueli-btn-icon-size);
	height: var(--samueli-btn-icon-size);
}

.samueli-btn__svg {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.2s ease;
}

.samueli-btn--arrow-down .samueli-btn__svg {
	transform: rotate(90deg);
}

.samueli-btn__label {
	color: var(--samueli-btn-text);
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
}

/* Accent treatment for words an editor wraps in the label: wrap text in
   <strong>/<b> (or a .samueli-btn__accent span) to color it the button accent
   and bold — e.g. "...Study: <strong>Full Report</strong>". For a custom color
   use an inline style on the span. */
.samueli-btn__label strong,
.samueli-btn__label b,
.samueli-btn__label .samueli-btn__accent {
	color: var(--samueli-btn-accent, #2f7d8c);
	font-weight: 700;
}

/* Two-line variant: bold label over a muted italic sub-line. */
.samueli-btn--has-sub .samueli-btn__label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: normal;
	text-align: left;
}

.samueli-btn--has-sub .samueli-btn__label-main {
	font-weight: 700;
}

.samueli-btn__sublabel {
	color: var(--samueli-btn-sub, #2f7d8c);
	font-size: 13px;
	font-style: italic;
	font-weight: 400;
}

/* On narrow screens let long labels wrap instead of overflowing the viewport. */
@media (max-width: 480px) {
	.samueli-btn__label {
		white-space: normal;
	}
}

.samueli-btn:hover,
.samueli-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.samueli-btn:focus-visible {
	outline: 2px solid var(--samueli-btn-text);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Card — rounded panel with background image + centered text
 * ------------------------------------------------------------------ */

.samueli-card {
	--samueli-card-bg: #25508f;
	--samueli-card-text: #ffffff;
	--samueli-card-max-width: 760px;
	--samueli-card-radius: 18px;
	--samueli-card-pad-y: 52px;
	--samueli-card-pad-x: 40px;

	background-color: var(--samueli-card-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--samueli-card-radius);
	overflow: hidden;
}

.samueli-card__inner {
	max-width: var(--samueli-card-max-width);
	margin: 0 auto;
	padding: var(--samueli-card-pad-y) var(--samueli-card-pad-x);
	color: var(--samueli-card-text);
	text-align: center;
}

.samueli-card__inner > :first-child {
	margin-top: 0;
}

.samueli-card__inner > :last-child {
	margin-bottom: 0;
}

.samueli-card__inner p {
	margin: 0 0 1em;
	font-size: 18px;
	line-height: 1.6;
}

/* Card title (e.g. "Community Findings"); the --xl variant is the larger
 * "Research Report" treatment. A subtitle directly under the title is the
 * small italic attribution line. */
.samueli-card__inner h2,
.samueli-card__inner h3 {
	margin: 0;
	color: inherit;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 700;
}

.samueli-card--xl .samueli-card__inner h2,
.samueli-card--xl .samueli-card__inner h3 {
	font-size: 56px;
}

.samueli-card__inner h2 + p,
.samueli-card__inner h3 + p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.92;
}

@media (max-width: 768px) {
	.samueli-card__inner h2,
	.samueli-card__inner h3 {
		font-size: 30px;
	}

	.samueli-card--xl .samueli-card__inner h2,
	.samueli-card--xl .samueli-card__inner h3 {
		font-size: 38px;
	}
}

/* Dotted vertical connector, above/below the card.
 * Dots: 4px diameter, 8.16px pitch, #414042 (per the Illustrator stroke:
 * 4pt weight, round cap, dash 0 / gap 8.16). Top = dots only; the bottom
 * carries the orange node marker. */
.samueli-card-wrap {
	--samueli-connector-color: #414042;
	--samueli-connector-length: 56px;
}

.samueli-card__connector {
	display: block;
	width: 4px;
	height: var(--samueli-connector-length);
	margin: 0 auto;
	background-image: radial-gradient(circle, var(--samueli-connector-color, #414042) var(--samueli-dot-on), transparent var(--samueli-dot-off));
	background-size: var(--samueli-dot-width) var(--samueli-dot-pitch);
	background-repeat: repeat-y;
	position: relative;
}

/* Top: 11 dots, the bottom 4 overlapping onto the card. Height holds 11 dots
 * (11 x 8.16px pitch); the negative margin pulls the card up so the last 4 dots
 * sit on it, and z-index paints those dots over the card. */
.samueli-card__connector--top {
	height: 89.76px;
	margin-bottom: -32.64px;
	background-position: center top;
	z-index: 1;
}

/* Bottom: orange node straddles the card edge; dots start below it. */
.samueli-card__connector--bottom {
	background-position: center 24px;
}

.samueli-card__node {
	position: absolute;
	left: 50%;
	top: -9px;
	width: 22px;
	height: auto;
	transform: translateX(-50%);
}

/* ------------------------------------------------------------------ *
 * Connector — standalone dotted junction between stacked blocks
 * (static pages, where there is no page-wide scroll spine)
 * ------------------------------------------------------------------ */

.samueli-connector {
	/* New connector dots: lighter and finer than the page-spine primitive.
	   Scoped here so the card/spine keep their own dot values. */
	--samueli-connector-color: #b5b5b5;
	--samueli-dot-width: 3px;
	--samueli-dot-pitch: 7.93px;
	--samueli-dot-on: 1.5px;
	--samueli-dot-off: 1.65px;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--samueli-connector-len, 90px);
	overflow: hidden; /* clip the wedge as it drips in at the top and out the bottom */
}

.samueli-connector__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--samueli-dot-width, 3px);
	transform: translateX(-50%);
	background-image: radial-gradient(circle, var(--samueli-connector-color, #b5b5b5) var(--samueli-dot-on), transparent var(--samueli-dot-off));
	background-size: var(--samueli-dot-width) var(--samueli-dot-pitch);
	background-repeat: repeat-y;
}

/* The orange wedge drips down the line on a continuous loop. */
.samueli-connector__wedge {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 22px;
	transform: translateX(-50%);
	animation: samueli-connector-drip 2.5s ease-in-out infinite;
}

.samueli-connector__wedge .samueli-card__node {
	position: static;
	display: block;
	width: 100%;
	transform: none;
}

/* The wedge drips in at the top, then ends with its BOTTOM resting on the line's
 * bottom (travel = run minus the ~20px wedge height) and fades out over the last
 * leg — so it disappears on the line rather than sliding out of view / clipping. */
@keyframes samueli-connector-drip {
	0% { transform: translate(-50%, -10px); opacity: 0; }
	12% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(-50%, calc(var(--samueli-connector-len, 90px) - 20px)); opacity: 0; }
}

/* No motion: park the wedge statically, centred on the line. */
@media (prefers-reduced-motion: reduce) {
	.samueli-connector__wedge {
		animation: none;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

@media (max-width: 768px) {
	.samueli-connector {
		height: clamp(48px, var(--samueli-connector-len, 90px), 64px);
	}
}

/* ------------------------------------------------------------------ *
 * Stories — scroll-converge headline + logo assembly
 * ------------------------------------------------------------------ */

.samueli-stories {
	--progress: 1; /* 0 = scattered, 1 = assembled. JS drives it on desktop. */
	--samueli-stories-scatter: 1; /* multiplier to tune scatter spread */
	--samueli-stories-mask-rgb: 241, 241, 242; /* page color used to mask the spine */
	--samueli-stories-spine-top: -21px; /* reach up to the card's bottom edge (the inter-section gap) */
	/* Reuse the connector primitive outside .samueli-card-wrap. */
	--samueli-connector-color: #414042;
	--samueli-connector-length: 56px;
}

.samueli-stories__pin {
	position: relative; /* anchors the absolute spine (also a positioned context when sticky) */
}

.samueli-stories__inner {
	position: relative;
	z-index: 1; /* content sits over the spine */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Text + logo: masks the spine behind them, fading in with the converge.
 * Scattered (progress 0) = transparent so the spine reads continuous; assembled
 * (progress 1) = opaque page color, so the line stops above the text and
 * resumes below the logo. */
.samueli-stories__content {
	background-color: rgba(var(--samueli-stories-mask-rgb, 241, 241, 242), var(--progress, 1));
}

/* Orange node below the logo, on the spine — the junction toward the next
 * section. Fades in with the converge. */
.samueli-stories__node {
	position: relative;
	z-index: 1;
	width: 22px;
	margin-top: 16px; /* short run of dots between the logo and the node */
	opacity: var(--progress, 1);
}

.samueli-stories__node .samueli-card__node {
	position: static;
	display: block;
	width: 100%;
	margin: 0 auto;
	transform: none;
}

/* The cap node marks the card junction at the top of the spine, painted over
 * the dots (same stacking context as the spine, so the node wins). */
.samueli-stories__cap {
	position: absolute;
	top: calc(var(--samueli-stories-spine-top, -21px) - 10px); /* straddle the box bottom; dots emerge below */
	left: 50%;
	z-index: 1;
	width: 22px;
	transform: translateX(-50%);
}

.samueli-stories__cap .samueli-card__node {
	position: static;
	display: block;
	width: 100%;
	margin: 0;
	transform: none;
}

/* On stories pages the spine owns the junction, so drop the card's bottom
 * connector entirely (the stories cap node replaces it). */
body.has-samueli-stories .samueli-card__connector--bottom {
	display: none;
}

.samueli-stories__line {
	margin: 0;
	padding: 0; /* override Salient's p { padding-bottom: 1.5em } */
	color: #414042;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.1;
}

.samueli-stories__logo {
	width: 132px;
	margin: 32px auto 0;
}

.samueli-stories__logo-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible; /* scattered petals sit outside the viewBox */
}

/* Each petal translates from (start * scatter) at progress 0 to home at 1. */
.samueli-stories__petal {
	transform: translate(
		calc(var(--sx, 0) * var(--samueli-stories-scatter, 1) * (1 - var(--progress, 1)) * 1px),
		calc(var(--sy, 0) * var(--samueli-stories-scatter, 1) * (1 - var(--progress, 1)) * 1px)
	);
}

/* Both lines fade in as the petals converge: line 1 over the first ~40% of
 * the scrub, line 2 over the back half. At the no-JS default (--progress: 1)
 * both are fully visible, preserving the final state. */
.samueli-stories__line--1 {
	opacity: clamp(0, calc(var(--progress, 1) / 0.4), 1);
}

.samueli-stories__line--2 {
	opacity: clamp(0, calc((var(--progress, 1) - 0.55) / 0.45), 1);
}

/* Desktop (motion allowed, viewport short enough to pin): pin the section and
 * give it scroll length to scrub through. Reduced-motion and very tall screens
 * drop the pin and keep the static state (see the fallback query below).
 *
 * Two separate viewport-height problems are handled here:
 *
 * 1. The pin box MUST fill the viewport (100vh). It is what the reader looks at
 *    while the section is held, and it hides the section's scroll runway — the
 *    empty tail the scrub travels through. A shorter box exposes that runway as
 *    dead blank screen and lets the next section peek up from under it.
 * 2. But content must NOT be centred in that viewport-tall box, or the empty
 *    lead-in above it — (100vh - content) / 2 — grows half a pixel per pixel of
 *    viewport height and balloons on a tall or zoomed-out screen. So the content
 *    is centred in a *capped* box (--samueli-pin-vh-cap) held at the top of the
 *    pin instead: constant lead-in, viewport-filling pin. Below the cap the two
 *    are the same thing, so ordinary screens render exactly as before. */
@media (min-width: 1025px) and (max-height: 1800px) and (prefers-reduced-motion: no-preference) {
	.samueli-stories {
		--content-box: min(100vh, var(--samueli-pin-vh-cap, 900px));
		--scrub-len: min(80vh, 720px); /* scroll distance the converge spans */

		position: relative;
		height: calc(100vh + var(--scrub-len));
	}

	.samueli-stories__pin {
		position: sticky;
		top: 0;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		height: 100vh;
	}

	/* Content centres inside the capped box, not the viewport-tall pin. */
	.samueli-stories__inner {
		justify-content: center;
		height: var(--content-box);
	}

	.samueli-stories__petal {
		will-change: transform;
	}
}

/* Unpinned (motion allowed): no pin, so the driver flips --progress 0->1 once on
 * enter and these transitions turn that into a one-shot converge + fade. Applies
 * to mobile and to viewports too tall to pin — a pinned beat on a very tall
 * screen is a small block of content stranded in a sea of blank, scrubbing
 * through a long empty runway. Flowing content reads far better there. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference),
	(min-height: 1801px) and (prefers-reduced-motion: no-preference) {
	.samueli-scrub--animate .samueli-stories__petal {
		transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.samueli-scrub--animate .samueli-stories__line--1 {
		transition: opacity 0.6s ease;
	}

	.samueli-scrub--animate .samueli-stories__line--2 {
		transition: opacity 0.6s ease 0.2s;
	}
}

/* Salient sets body overflow:hidden which breaks the pin's position:sticky.
 * On any pinned-scrub page (desktop, motion allowed), use overflow:clip —
 * clips horizontally without creating a scroll container, so sticky works.
 * Gated to match the pin: reduced-motion has no pin, so body overflow is left
 * alone. */
@media (min-width: 1025px) and (max-height: 1800px) and (prefers-reduced-motion: no-preference) {
	body.has-samueli-scrub {
		overflow: clip;
	}
}


/* ------------------------------------------------------------------ *
 * Sections — four mini-report boxes with a pinned scroll-scrub
 * ------------------------------------------------------------------ */

.samueli-sections {
	--progress: 1; /* 0 = pre-animation, 1 = final state. JS drives it on desktop. */
	--box-blur-max: 6px; /* de-emphasis blur radius (dropped on mobile/reduced-motion) */
	--samueli-sections-text: #444444;
	/* Capped at their 900px-viewport values (see --samueli-pin-vh-cap): past that
	   height these would keep growing and tear the beat apart on a tall screen. */
	--samueli-sections-content-top: min(26vh, 234px); /* where the text + boxes sit (clear of the nav) */
	--samueli-sections-cap-top: min(23vh, 207px); /* the connector's base sits here, just above the text */
	--samueli-sections-pull: min(52vh, 468px); /* overlap up into the stories' empty bottom */
	text-align: center;
}

.samueli-sections__pin {
	position: relative; /* positioning context for the spine (sticky on desktop) */
}

/* When the sections section follows the stories on the same page, its cap
 * connector is the single junction — drop the stories' own exit node so they
 * don't double up where the two overlap. */
body.has-samueli-sections .samueli-stories__node {
	display: none;
}

/* The cap is the animated connector in the gap above the copy. It holds a 110px
 * .samueli-connector, seated so its base lands at --samueli-sections-cap-top
 * (just above the text); the wedge drips down toward the copy. */
.samueli-sections__cap {
	position: absolute;
	top: calc(var(--samueli-sections-cap-top, 23vh) - 110px);
	left: 50%;
	z-index: 1;
	width: 22px;
	transform: translateX(-50%);
}

.samueli-sections__inner {
	position: relative;
	z-index: 1; /* content sits over the spine */
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
	/* Mask the spine behind the centred content band (it shows above + below). */
	background-color: #f1f1f2;
}


/* Explainer steps: absolutely stacked so they cross-fade in place. Step 1 holds
 * the layout height; the rest overlay it. Step 1 is visible by default so the
 * no-JS / static state reads coherently. */
.samueli-sections__steps {
	position: relative;
	min-height: 4.2em;
	margin-bottom: 44px;
}

.samueli-sections__step {
	margin: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 22px;
	line-height: 1.5;
	color: var(--samueli-sections-text);
}

.samueli-sections__step--1 {
	position: relative;
}

.samueli-sections__step--2,
.samueli-sections__step--3 {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* Boxes row. */
.samueli-sections__boxes {
	display: flex;
	gap: 18px;
	justify-content: center;
	align-items: stretch;
}

/* A box's emphasis is one signed value: -1 dim, 0 rest, +1 highlight.
 * --dim derives the de-emphasis amount (0..1) for opacity + blur. U4 drives
 * --emph from --progress; for static QA set --emph inline. */
.samueli-sections__box {
	/* Slide-in (stage 1): each box rises + fades, staggered by index. */
	--slide: clamp(0, calc((var(--progress) - (var(--box-index, 1) - 1) * 0.04) / 0.12), 1);
	/* Moving spotlight (stage 2+): emph peaks at the box's --peak and dims away
	 * from it; --gate holds stage 1 at rest. -1 dim, 0 rest, +1 highlight. */
	--spot-w: 0.2;
	--gate: clamp(0, calc((var(--progress) - 0.18) / 0.05), 1);
	/* Release: as the outro slides up (0.78+) the spotlight fades out so all four
	 * boxes return to their clear resting state alongside the outro. */
	--release: clamp(0, calc((var(--progress) - 0.78) / 0.1), 1);
	--dist: max(calc(var(--progress) - var(--peak, 0.3)), calc(var(--peak, 0.3) - var(--progress)));
	--spot: calc(1 - 2 * clamp(0, calc(var(--dist) / var(--spot-w)), 1));
	--emph: calc(var(--spot) * var(--gate) * (1 - var(--release)));
	--dim: clamp(0, calc(-1 * var(--emph)), 1);

	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	max-width: 224px;
	min-height: 150px;
	padding: 20px;
	border-radius: 14px;
	/* Tone-on-tone star texture: one inline-SVG sparkle tile (no media), white at
	 * low opacity so it reads as a lighter shade over any box color. A per-box
	 * background image (set inline) overrides this. */
	background-color: var(--box-color, #2d69a6);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20fill-opacity='.15'%20d='M50,4L57,43L96,50L57,57L50,96L43,57L4,50L43,43Z'/%3E%3C/svg%3E");
	background-size: 60px 60px;
	background-repeat: repeat;
	box-shadow: 0 0 0 5px #ffffff, 0 8px 20px rgba(0, 0, 0, 0.12);
	color: #ffffff;
	text-align: left;
	text-decoration: none;

	transform: translateY(calc((1 - var(--slide)) * 30px)) scale(calc(1 + 0.06 * var(--emph)));
	opacity: calc(var(--slide) * (1 - 0.45 * var(--dim)));
	filter: blur(calc(var(--dim) * var(--box-blur-max)));
	transition: box-shadow 0.25s ease; /* only the hover shadow animates; the scrub drives transform per frame */
	will-change: transform, filter;
	contain: layout paint;
}

/* Lift the box on hover with a deeper drop shadow. */
.samueli-sections__box:hover {
	box-shadow: 0 0 0 5px #ffffff, 0 16px 38px rgba(0, 0, 0, 0.26);
}

/* Per-box spotlight peaks: the highlight sweeps Overview -> Daily -> Jewish ->
 * Hot Topics; Hot peaks ~0.72; the closing outro then slides up below (0.78+). */
.samueli-sections__box--1 {
	--peak: 0.24;
}

.samueli-sections__box--2 {
	--peak: 0.4;
}

.samueli-sections__box--3 {
	--peak: 0.55;
}

.samueli-sections__box--4 {
	--peak: 0.72;
}

/* Three explainer steps cross-fade across the box sweep (1 -> 2 -> 3); step 3
 * holds through the end of the sweep. */
.samueli-sections__step--1 {
	opacity: clamp(0, calc((0.2 - var(--progress)) / 0.04), 1);
}

.samueli-sections__step--2 {
	opacity: min(clamp(0, calc((var(--progress) - 0.18) / 0.06), 1), clamp(0, calc((0.42 - var(--progress)) / 0.04), 1));
}

.samueli-sections__step--3 {
	opacity: clamp(0, calc((var(--progress) - 0.42) / 0.06), 1);
}

/* The main content (steps + boxes) stays put for the whole scrub, so the four
 * boxes remain visible and clickable; the closing outro slides up below them. */
.samueli-sections__main {
	opacity: 1;
}

/* Closing beat: the outro sits in flow below the boxes and slides up + fades in
 * as the scrub finishes. It never overlaps the boxes, so they stay clickable
 * with no z-index / pointer-events hack. */
.samueli-sections__outro {
	--reveal: clamp(0, calc((var(--progress) - 0.78) / 0.2), 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 48px;
	text-align: center;
	transform: translateY(calc((1 - var(--reveal)) * 48px));
	opacity: var(--reveal);
	will-change: transform;
}

.samueli-sections__outro-text {
	margin: 0 0 28px;
	max-width: 720px;
	padding: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 26px;
	line-height: 1.35;
	color: var(--samueli-sections-text);
}

/* Desktop pin + scrub: a tall wrapper sticky-pins the centred content while the
 * driver scrubs --progress across the extra scroll length. */
@media (min-width: 1025px) and (max-height: 1800px) and (prefers-reduced-motion: no-preference) {
	.samueli-sections {
		--scrub-len: min(220vh, 1980px); /* scroll distance the staged spotlight spans */

		position: relative;
		/* The pin fills the viewport; the extra height is the scrub runway it is
		 * held across. Capping the runway keeps the dead scroll a fixed length
		 * instead of growing with the viewport. */
		height: calc(100vh + var(--scrub-len));
		/* Overlap up into the stories' empty bottom so the content sits just
		 * below the stories logo (short connector). The stories spine carries
		 * the line down through the overlap; this section's content masks it. */
		margin-top: calc(-1 * var(--samueli-sections-pull, 468px));
	}

	.samueli-sections__pin {
		position: sticky;
		top: 0;
		display: flex;
		align-items: flex-start; /* content sits high so the line from stories is short */
		justify-content: center;
		padding-top: var(--samueli-sections-content-top, 234px);
		height: 100vh;
	}
}

.samueli-sections__box-title {
	font-family: 'sofia-pro', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	color: #ffffff;
}

.samueli-sections__box-arrow {
	display: block;
	width: 30px;
	height: 30px;
}

.samueli-sections__box-arrow svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Sections — unpinned fallback (mobile, reduced-motion, or a viewport too tall
 * to pin). The staged spotlight sweep is a scroll-scrub experience that doesn't
 * translate to a single play-once flip, so these get a clean static layout: all
 * four boxes at rest (no dim, no blur), with the intro line and the outro
 * stacked below. No pin, so no scroll runway and no dead scroll — on a very tall
 * screen the boxes simply sit in the page flow beside the sections around them.
 * (The two-per-row wrap is mobile-only, so a tall desktop keeps four across.) */
@media (max-width: 1024px), (prefers-reduced-motion: reduce), (min-height: 1801px) {
	.samueli-sections {
		--box-blur-max: 0px;
	}

	/* No pin here, so hide the junction cap node. */
	.samueli-sections__cap {
		display: none;
	}

	.samueli-sections__box {
		--emph: 0;
		--slide: 1;
	}

	.samueli-sections__step {
		position: absolute;
		opacity: 0;
	}

	.samueli-sections__step--1 {
		position: relative;
		opacity: 1;
	}

	/* Show the boxes and the outro together (stacked) — no scrub animation. */
	.samueli-sections__main {
		opacity: 1;
	}

	.samueli-sections__outro {
		margin-top: 36px;
		transform: none;
		opacity: 1;
	}
}

/* Mobile only: wrap the boxes two-per-row. */
@media (max-width: 1024px) {
	.samueli-sections__boxes {
		flex-wrap: wrap;
	}

	.samueli-sections__box {
		flex: 1 1 40%; /* two per row, growing to fill */
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * Glance — "at a glance" overview block (eyebrow, stats, image columns)
 * ------------------------------------------------------------------ */

.samueli-glance {
	--samueli-glance-bg: #f1f1f2; /* opaque band that masks the page spine */
	--samueli-glance-stat: #25508f; /* stat numerals */
	--samueli-glance-ink: #54585a; /* headings */
	--samueli-glance-muted: #636466; /* body copy + labels */
	--samueli-glance-rule: #1a1a1a; /* eyebrow / label underline */
	--samueli-glance-run: 150px; /* the dotted connector run above the eyebrow */
}

/* Top connector: the self-contained animated connector (.samueli-connector
 * draws the dotted line + looping wedge); this just sets the run height. */
.samueli-glance__connector {
	margin: 0 auto;
}

/* Mobile / reduced-motion: the converge is a static stack (no pins), so drop the
 * junction connector and seat the block normally (no pull) — matches the
 * sections cap, which is hidden in the same breakpoint. */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
	.samueli-glance__connector {
		display: none;
	}
}

/* Centred content column; its opaque background masks the connector behind it. */
.samueli-glance__inner {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	padding: 44px 20px 96px;
	background-color: var(--samueli-glance-bg, #f1f1f2);
	text-align: center;
}

/* Eyebrow: "01 | Overview" with an underline rule hugging the text. */
.samueli-glance__eyebrow {
	display: inline-block;
	margin: 0 0 30px;
	padding: 0 2px 8px;
	border-bottom: 1px solid var(--samueli-glance-rule, #1a1a1a);
	font-family: 'sofia-pro', sans-serif;
	font-size: 16px;
	line-height: 1;
	color: var(--samueli-glance-rule, #1a1a1a);
}

.samueli-glance__eyebrow-num {
	font-weight: 400;
}

.samueli-glance__eyebrow-sep {
	margin: 0 11px;
	font-weight: 300;
	color: #9a9b9d;
}

.samueli-glance__eyebrow-label {
	font-weight: 600;
}

/* Title inherits Salient's heading font (Khand); size/color set here. */
.samueli-glance .samueli-glance__title {
	margin: 0 auto 22px;
	max-width: 620px;
	color: var(--samueli-glance-ink, #54585a);
	font-size: 52px;
	font-weight: 700;
	line-height: 1.06;
}

.samueli-glance__intro {
	margin: 0 auto 56px;
	max-width: 620px;
	padding: 0; /* override Salient p padding-bottom */
	font-family: 'sofia-pro', sans-serif;
	font-size: 19px;
	line-height: 1.6;
	color: var(--samueli-glance-muted, #636466);
}

/* Stat trio: divider-separated value/label pairs. */
.samueli-glance__stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 44px;
	margin-bottom: 76px;
}

.samueli-glance__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.samueli-glance__stat-value {
	font-family: 'sofia-pro', sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 1;
	color: var(--samueli-glance-stat, #25508f);
	/* Fixed-width digits so the number doesn't jitter while counting up. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.samueli-glance__stat-label {
	font-family: 'sofia-pro', sans-serif;
	font-size: 16px;
	color: var(--samueli-glance-muted, #636466);
}

.samueli-glance__stat-divider {
	flex: 0 0 auto;
	width: 1px;
	height: 78px;
	background-color: #d2d3d4;
}

/* Two image columns: Age (wide) + Gender (narrow). */
.samueli-glance__cols {
	display: flex;
	gap: 64px;
	align-items: flex-start;
	text-align: left;
}

.samueli-glance__col--age {
	flex: 1.85 1 0;
}

.samueli-glance__col--gender {
	flex: 1 1 0;
}

.samueli-glance .samueli-glance__col-label {
	display: inline-block;
	margin: 0 0 14px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--samueli-eyebrow-rule, #1b2a4a);
	font-family: 'sofia-pro', sans-serif;
	font-size: var(--samueli-eyebrow-size, 13px);
	font-weight: var(--samueli-eyebrow-weight, 900);
	line-height: 1;
	letter-spacing: var(--samueli-eyebrow-tracking, 2px);
	text-transform: uppercase;
	color: var(--samueli-eyebrow-color, #555);
}

.samueli-glance__col-text {
	margin: 0 0 22px;
	padding: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 17px;
	line-height: 1.55;
	color: var(--samueli-glance-muted, #636466);
}

.samueli-glance__media {
	margin: 0;
}

.samueli-glance__img {
	display: block;
	width: 100%;
	height: auto;
}

.samueli-glance__col-caption {
	margin: 14px 0 0;
	padding: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 14px;
	color: var(--samueli-glance-muted, #636466);
}

/* Tablet: stack the image columns; let the stats wrap. */
@media (max-width: 980px) {
	.samueli-glance__cols {
		flex-direction: column;
		gap: 48px;
	}

	.samueli-glance__stats {
		flex-wrap: wrap;
		gap: 24px 36px;
	}

	.samueli-glance .samueli-glance__title {
		font-size: 40px;
	}
}

/* Phone: drop the vertical stat dividers and stack the trio. */
@media (max-width: 560px) {
	.samueli-glance__inner {
		padding-bottom: 64px;
	}

	.samueli-glance__stats {
		flex-direction: column;
		gap: 28px;
	}

	.samueli-glance__stat-divider {
		display: none;
	}

	.samueli-glance .samueli-glance__title {
		font-size: 32px;
	}
}

/* ------------------------------------------------------------------ *
 * Bar chart — native stacked horizontal bars (Glance Age column)
 *   Segments grow from zero on scroll-in via assets/js/bars.js, which
 *   toggles --animate then is-drawn. The no-class state below IS the
 *   finished chart, so no-JS / reduced-motion show the final bars.
 * ------------------------------------------------------------------ */

.samueli-barchart {
	margin: 0;
}

.samueli-barchart__row {
	margin: 0 0 20px;
}

.samueli-barchart__row-label {
	margin: 0 0 6px;
	padding: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 13px;
	line-height: 1.25;
	color: var(--samueli-glance-muted, #636466);
}

.samueli-barchart__bar {
	position: relative;
	height: 40px;
	overflow: hidden;
	border-radius: 4px;
	background: #e3e5e7; /* track: the line is visible before segments wipe in */
}

/* The clipped layer: segments at their final proportions. bars.js wipes this
   open left-to-right; the track (above) stays visible underneath. */
.samueli-barchart__segs {
	display: flex;
	height: 100%;
}

.samueli-barchart__seg {
	display: flex;
	flex: var(--seg-flex, 1) 1 0%;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.samueli-barchart__seg-value {
	font-family: 'sofia-pro', sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

.samueli-barchart__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 16px;
}

.samueli-barchart__key {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 12px;
	color: var(--samueli-glance-muted, #636466);
}

.samueli-barchart__key-swatch {
	display: inline-block;
	width: 20px;
	height: 12px;
	border-radius: 2px;
}

.samueli-barchart__footnotes {
	margin: 8px 0 0;
	padding: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 11px;
	color: #999;
}

/* Draw-in is JS-driven (assets/js/bars.js): on scroll-in the segments settle
   from a skewed-but-full layout (left bands a fraction smaller, the rightmost a
   bit larger) into their final flex widths, written each frame in JS (a CSS
   flex-grow transition is unreliable across browsers). The static state above
   is the finished chart, so no-JS / reduced-motion show the final bars; the bar
   stays full throughout so the track only shows if segments are absent. */

@media (max-width: 560px) {
	.samueli-barchart__bar {
		height: 34px;
	}
}

/* ------------------------------------------------------------------ *
 * Gender — fill-to-percentage people silhouettes (Glance Gender column)
 *   Each silhouette's clipped fill rect is tweened up from the bottom on
 *   scroll-in by assets/js/gender.js. The static (server-rendered) state
 *   is the filled figure, so no-JS / reduced-motion show the result.
 * ------------------------------------------------------------------ */

.samueli-gender {
	margin: 0;
}

.samueli-gender__figures {
	display: flex;
	justify-content: center;
	gap: 48px;
}

.samueli-gender__fig {
	text-align: center;
}

.samueli-gender__icon {
	display: block;
	height: 120px;
	margin: 0 auto 12px;
}

.samueli-gender__value {
	margin: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	color: #1b2a4a;
}

.samueli-gender__label {
	margin: 4px 0 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--samueli-glance-muted, #636466);
}

@media (max-width: 560px) {
	.samueli-gender__figures {
		gap: 32px;
	}
}

/* ------------------------------------------------------------------ *
 * Region by Age — tabbed grouped bar chart (icon rail + vertical bars)
 *   Tabs switch the chart; bars grow from height 0 via assets/js/region.js
 *   (a CSS height transition). The server-rendered active region is the
 *   no-JS / reduced-motion state.
 * ------------------------------------------------------------------ */

.samueli-region {
	margin: 0 auto;
	padding: 56px 20px;
}

/* Section eyebrow — matches the design sample (and the .samueli-uline helper).
   Stated at higher specificity (0,2,2 via `section.samueli-region h3...`) so
   Salient's heading typography and its `.row .col h3 { margin-bottom: 8px }`
   (0,2,1) don't override the font/size/margin in WPBakery content. */
.samueli-region__heading,
section.samueli-region h3.samueli-region__heading {
	display: inline-block;
	margin: 0 0 32px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--samueli-eyebrow-rule, #1b2a4a);
	font-family: 'sofia-pro', sans-serif;
	font-size: var(--samueli-eyebrow-size, 13px);
	font-weight: var(--samueli-eyebrow-weight, 900);
	line-height: 1;
	letter-spacing: var(--samueli-eyebrow-tracking, 2px);
	text-transform: uppercase;
	color: var(--samueli-eyebrow-color, #555);
}

.samueli-region__card {
	padding: 48px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.samueli-region__legend {
	display: flex;
	justify-content: flex-end;
	gap: 28px;
	margin-bottom: 40px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 13px;
	color: #555;
}

.samueli-region__legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.samueli-region__legend-dot {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	transition: background 0.3s;
}

.samueli-region__module {
	display: flex;
	align-items: stretch;
	min-height: 340px;
}

.samueli-region__tabs {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	margin-left: -48px; /* flush the D tabs to the card's left edge */
}

.samueli-region__tab {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
}

/* "D"-shaped icon tabs flush to the card's left edge: the white region
   silhouette inside a colored D — the region accent when active (slightly
   larger), neutral grey otherwise. */
.samueli-region__tab-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: 87px;
	height: 87px;
	padding: 11px 11px 11px 15px;
	background: #cfd0d1;
	border-radius: 0 50% 50% 0;
	transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.samueli-region__tab.is-active .samueli-region__tab-icon {
	width: 97px;
	height: 97px;
	background: var(--samueli-region-color, #25508f);
}

/* Scoped through .samueli-region (3 classes) to outrank Salient's `.row .col img`. */
.samueli-region .samueli-region__tab-icon .samueli-region__tab-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 56px;
	max-height: 56px;
	margin: 0;
	object-fit: contain;
}

.samueli-region__tab.is-active .samueli-region__tab-icon .samueli-region__tab-img {
	max-width: 62px;
	max-height: 62px;
}

/* Label shows only for the active tab, underlined in the region accent. */
.samueli-region__tab-label {
	display: none;
	padding-bottom: 4px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: #1b2a4a;
}

.samueli-region__tab.is-active .samueli-region__tab-label {
	display: inline-block;
	border-bottom: 2px solid var(--samueli-region-color, #25508f);
}

.samueli-region__divider {
	flex-shrink: 0;
	width: 1px;
	margin: 0 20px;
	background: #e5e5e5;
}

.samueli-region__chart-wrap {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	justify-content: flex-end;
}

.samueli-region__chart {
	position: relative;
	flex: 1;
	min-height: 280px;
}

.samueli-region__grid {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: none;
}

.samueli-region__grid-line {
	border-bottom: 1px solid #f0f0f0;
}

.samueli-region__bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	padding: 0 20px;
	border-bottom: 1px solid #e0e0e0;
}

.samueli-region__group {
	display: flex;
	flex: 1;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	height: 100%;
}

.samueli-region__bar {
	position: relative; /* anchor the % label to the bar's top */
	width: 36px;
	height: 0;
	align-self: flex-end;
	border-radius: 3px 3px 0 0;
	transition: height 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The value overlaid above each bar; rides up with the bar as it grows. */
.samueli-region__bar-val {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #45494c;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.5s ease;
}

/* Overview image panel — shown in place of the chart when the overview tab is
   active (root toggles is-image-mode). */
.samueli-region__image {
	display: none;
	width: 100%;
}

.samueli-region__image img {
	display: block;
	width: 100%;
	height: auto;
}

.samueli-region.is-image-mode .samueli-region__image {
	display: block;
}

.samueli-region.is-image-mode .samueli-region__chart,
.samueli-region.is-image-mode .samueli-region__axis,
.samueli-region.is-image-mode .samueli-region__legend {
	display: none;
}

.samueli-region__axis {
	display: flex;
	justify-content: space-around;
	margin-top: 12px;
	padding: 0 20px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #999;
}

.samueli-region__axis span {
	flex: 1;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.samueli-region__bar,
	.samueli-region__bar-val {
		transition: none;
	}
}

/* >tablet: lock the tab rail to a fixed width so the chart column stays a
   constant width no matter how long the active region's label is (the chart is
   flex:1, so otherwise a longer label widens the rail and narrows the chart). */
@media (min-width: 701px) {
	.samueli-region__tabs {
		flex: 0 0 320px;
	}
}

@media (max-width: 700px) {
	/* Full-bleed on mobile: drop the section's left/right gutter (kept on
	   tablet/desktop). */
	.samueli-region {
		padding-left: 0;
		padding-right: 0;
	}

	.samueli-region__card {
		display: flex;
		flex-direction: column;
		padding: 24px;
	}

	/* Promote the module's children to card-level flex items so the tab row can
	   be reordered above the legend (and the chart spans full width). */
	.samueli-region__module {
		display: contents;
	}

	.samueli-region__tabs {
		order: -1;
		flex-direction: row;
		align-items: flex-start;
		gap: 10px;
		width: 100%;
		min-width: 0;
		margin: 0 0 22px;
	}

	.samueli-region__legend {
		order: 0;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 12px 20px;
		margin-bottom: 24px;
	}

	.samueli-region__chart-wrap {
		order: 1;
		width: 100%;
	}

	.samueli-region__divider {
		display: none;
	}

	/* Full-width square tabs (no "D"); the active region's label drops below its
	   square. Each tab is an equal share of the row. */
	.samueli-region__tab {
		flex: 1 1 0;
		min-width: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.samueli-region__tab-icon,
	.samueli-region__tab.is-active .samueli-region__tab-icon {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 0;
		aspect-ratio: 1 / 1; /* equal squares, no matter the silhouette shape */
		border-radius: 12px;
		justify-content: center;
	}

	/* Size the silhouette to a fixed share of the square (centred) so a tall
	   region shape can't stretch its tab taller than the others. */
	.samueli-region .samueli-region__tab-icon .samueli-region__tab-img,
	.samueli-region__tab.is-active .samueli-region__tab-icon .samueli-region__tab-img {
		width: 62%;
		height: 62%;
		max-width: 62%;
		max-height: 62%;
	}

	.samueli-region__tab-label {
		text-align: center;
		white-space: normal;
		font-size: 11px;
		line-height: 1.25;
	}

	.samueli-region__tab.is-active .samueli-region__tab-label {
		display: block;
		border-bottom: 0;
	}

	.samueli-region__bar {
		width: 18px;
	}

	.samueli-region__bar-val {
		font-size: 11px;
		margin-bottom: 4px;
	}
}

/* ------------------------------------------------------------------ *
 * Donut — animated ring chart (Employment Status)
 *   Rings grow via stroke-dasharray and callouts fade in, both driven by
 *   assets/js/donut.js. The server-rendered full donut is the no-JS state.
 * ------------------------------------------------------------------ */

.samueli-donut {
	text-align: left;
}

.samueli-donut .samueli-donut__title {
	margin: 0 0 20px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #1b2a4a;
}

.samueli-donut__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 24px;
}

.samueli-donut__chart {
	position: relative;
	flex: 0 0 auto;
	width: 176px;
	height: 176px;
}

.samueli-donut__svg {
	display: block;
	width: 176px;
	height: 176px;
	transform: rotate(-90deg); /* start the first arc at 12 o'clock */
}

.samueli-donut__ring {
	transition: opacity 0.25s ease;
	cursor: pointer;
}

/* Dim the non-active rings while one segment is highlighted. */
.samueli-donut__chart.has-active .samueli-donut__ring:not(.is-active) {
	opacity: 0.28;
}

/* Active-segment readout, parked in the donut hole; filled by donut.js. */
.samueli-donut__center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 116px;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}

.samueli-donut__center-value {
	display: block;
	font-family: 'sofia-pro', sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	color: #1b2a4a;
}

.samueli-donut__center-value:empty {
	display: none;
}

.samueli-donut__center-label {
	display: block;
	margin-top: 4px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	color: #555;
}

/* Legend — the always-visible label list (mobile / no-JS reference). */
.samueli-donut__legend {
	flex: 1 1 210px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.samueli-donut .samueli-donut__legend-item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 2px 6px;
	width: 100%;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-family: 'sofia-pro', sans-serif;
	font-size: 13px;
	text-align: left;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.samueli-donut .samueli-donut__legend-item:hover,
.samueli-donut .samueli-donut__legend-item:focus-visible,
.samueli-donut .samueli-donut__legend-item.is-active {
	background: rgba(27, 42, 74, 0.06);
}

.samueli-donut__legend-swatch {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 2px;
	border-radius: 3px;
}

.samueli-donut__legend-value {
	font-weight: 800;
	color: #1b2a4a;
}

.samueli-donut__legend-label {
	font-weight: 500;
	color: #555;
}

/* Grouped summary (e.g. 62% Working / 38% Not working). */
.samueli-donut__summary {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e3e5e7;
}

.samueli-donut__summary-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.samueli-donut__summary-swatch {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 4px;
}

.samueli-donut__summary-value {
	font-family: 'sofia-pro', sans-serif;
	font-size: 18px;
	font-weight: 800;
	color: #1b2a4a;
}

.samueli-donut__summary-label {
	font-family: 'sofia-pro', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #555;
}

@media (max-width: 700px) {
	.samueli-donut__layout {
		flex-direction: column;
		align-items: center;
	}

	.samueli-donut__legend {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Horizontal bars — labelled bar chart (Educational Attainment)
 *   Bars grow from width 0 (staggered) via assets/js/hbars.js. The
 *   server-rendered final widths are the no-JS / reduced-motion state.
 * ------------------------------------------------------------------ */

.samueli-hbars {
	--samueli-hbars-label: 140px;
	text-align: left;
}

.samueli-hbars .samueli-hbars__title {
	margin: 0 0 32px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #1b2a4a;
}

.samueli-hbars__chart {
	position: relative;
}

.samueli-hbars__grid {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--samueli-hbars-label);
	right: 0;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.samueli-hbars__grid span {
	width: 1px;
	background: #eee;
}

.samueli-hbars__rows {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.samueli-hbars__row {
	display: flex;
	align-items: center;
}

.samueli-hbars__label {
	flex-shrink: 0;
	width: var(--samueli-hbars-label);
	padding-right: 14px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 11px;
	line-height: 1.3;
	color: #777;
	text-align: right;
}

.samueli-hbars__track {
	flex: 1;
	min-width: 0;
}

.samueli-hbars__bar {
	position: relative;
	width: 0;
	height: 26px;
	border-radius: 3px;
	transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The value label rides the end of its bar (so it travels with the grow). */
.samueli-hbars__value {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'sofia-pro', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

/* Short bars: float the label just past the tip. */
.samueli-hbars__value--out {
	left: 100%;
	margin-left: 10px;
	color: #333;
}

/* Near-full bars: tuck the label inside the end so it can't clip off-chart. */
.samueli-hbars__value--in {
	right: 10px;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.samueli-hbars__bar {
		transition: none;
	}
}

@media (max-width: 600px) {
	.samueli-hbars {
		--samueli-hbars-label: 104px;
	}
}

/* ------------------------------------------------------------------ *
 * CTA — centred title + intro + button ("Learn More")
 *   Title/intro mirror the report head (.samueli-report__head) minus the
 *   eyebrow; the button is the shared [samueli_button].
 * ------------------------------------------------------------------ */

.samueli-cta {
	padding: 64px 20px;
	text-align: center;
}

.samueli-cta__inner {
	max-width: 720px;
	margin: 0 auto;
}

.samueli-cta .samueli-cta__title {
	margin: 0 auto 18px;
	color: #45494c;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.04;
}

.samueli-cta__intro {
	margin: 0 auto 32px;
	max-width: 540px;
	padding: 0; /* override Salient p padding-bottom */
	font-family: 'sofia-pro', sans-serif;
	font-size: 19px;
	line-height: 1.6;
	color: #636466;
}

.samueli-cta__button {
	display: flex;
	justify-content: center;
}

@media (max-width: 600px) {
	.samueli-cta .samueli-cta__title {
		font-size: 38px;
	}
}

/* ------------------------------------------------------------------ *
 * Slider — N-slide tabbed image slider (arrows + labeled tab row)
 * ------------------------------------------------------------------ */

.samueli-slider {
	/* The section is wider than the panel; the extra width is the gutter the
	 * arrows sit in. The panel (and the head + tabs that align to it) is capped
	 * at the narrower panel width. */
	--samueli-slider-max-width: 1280px;
	--samueli-slider-panel-width: 1040px;
	--samueli-slider-ink: #54585a; /* heading */
	--samueli-slider-muted: #636466; /* subheading + resting tab */
	--samueli-slider-accent: #ec7624; /* arrows */
	--samueli-slider-rule: #1a1a1a; /* heading underline */
	--samueli-slider-arrow-icon: 26px;
	--samueli-slider-arrow-offset: 84px; /* how far the arrow sits into the gutter */

	max-width: var(--samueli-slider-max-width, 1280px);
	margin: 0 auto;
	padding: 0 20px;
}

/* Full-bleed on mobile: drop the section's left/right gutter (kept on
   tablet/desktop). */
@media (max-width: 700px) {
	.samueli-slider {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Heading + subheading: left-aligned, capped to the panel width. */
.samueli-slider__head {
	max-width: var(--samueli-slider-panel-width, 1040px);
	margin: 0 auto 24px;
	text-align: left;
}

.samueli-slider__subheading {
	margin: 0;
	max-width: 640px;
	padding: 0; /* override Salient p padding-bottom */
	font-family: 'sofia-pro', sans-serif;
	font-size: 17px;
	line-height: 1.55;
	color: var(--samueli-slider-muted, #636466);
}

/* Stage: the panel-width column that holds the viewport (panel + arrows) and
 * the tab row, both aligned to the panel. */
.samueli-slider__stage {
	max-width: var(--samueli-slider-panel-width, 1040px);
	margin: 0 auto;
}

/* Viewport: positioning context for the arrows, sized to the panel so the
 * arrows centre on the panel (not the panel + tabs). */
.samueli-slider__viewport {
	position: relative;
}

.samueli-slider__panel {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding: 28px;
	overflow: hidden;
}

/* Each slide is a tabpanel; inactive ones are hidden (the [hidden] attribute is
 * toggled by the controller). The explicit rule guards against resets that
 * neutralise [hidden]. */
.samueli-slider__slide[hidden] {
	display: none;
}

.samueli-slider__slide:focus-visible {
	outline: 2px solid var(--samueli-slider-accent, #ec7624);
	outline-offset: 4px;
}

.samueli-slider__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Round prev/next arrows: a faint translucent outer ring -> white inner circle
 * -> orange arrow glyph (the site buttons' layered look). Absolutely positioned
 * in the gutter, vertically centred on the panel. The `.samueli-slider` prefix
 * and the explicit resets override Salient's theme `button` styling. */
.samueli-slider .samueli-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 11px; /* faint outer ring */
	border: 0;
	/* !important: Salient's theme button styling sets a 4px radius from a built
	 * stylesheet that outranks component classes; the arrow must stay a circle. */
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.samueli-slider .samueli-slider__arrow--prev {
	left: calc(-1 * var(--samueli-slider-arrow-offset, 84px));
}

.samueli-slider .samueli-slider__arrow--next {
	right: calc(-1 * var(--samueli-slider-arrow-offset, 84px));
}

.samueli-slider .samueli-slider__arrow-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px; /* white inner circle around the glyph */
	border-radius: 50%;
	background: #ffffff;
}

.samueli-slider .samueli-slider__arrow-icon {
	display: block;
	width: var(--samueli-slider-arrow-icon, 26px);
	height: var(--samueli-slider-arrow-icon, 26px);
}

.samueli-slider .samueli-slider__arrow-glyph {
	display: block;
	width: 100%;
	height: 100%;
}

/* The glyph points right; the prev button rotates it. */
.samueli-slider .samueli-slider__arrow--prev .samueli-slider__arrow-icon {
	transform: rotate(180deg);
}

.samueli-slider .samueli-slider__arrow:hover,
.samueli-slider .samueli-slider__arrow:focus-visible {
	transform: translateY(-50%) scale(1.06);
	background: rgba(255, 255, 255, 0.7);
}

.samueli-slider .samueli-slider__arrow:focus-visible {
	outline: 2px solid var(--samueli-slider-accent, #ec7624);
	outline-offset: 3px;
}

.samueli-slider .samueli-slider__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

.samueli-slider .samueli-slider__arrow[disabled]:hover {
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.5);
}

/* Bottom tab row: one inline row of equal-width tabs; long labels wrap inside
 * their own tab rather than pushing the row to multiple lines. */
.samueli-slider__tabs {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.samueli-slider__tab {
	flex: 1 1 0;
	min-width: 0; /* allow tabs to shrink so the row never wraps */
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #e2e2e3;
	border-radius: 10px;
	background: #f5f5f6;
	font-family: 'sofia-pro', sans-serif;
	font-size: 14px;
	line-height: 1.25;
	text-align: center;
	color: var(--samueli-slider-muted, #636466);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.samueli-slider__tab:hover {
	color: var(--samueli-slider-ink, #54585a);
}

.samueli-slider__tab[aria-selected='true'] {
	background: #ffffff;
	color: var(--samueli-slider-ink, #54585a);
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.samueli-slider__tab:focus-visible {
	outline: 2px solid var(--samueli-slider-accent, #ec7624);
	outline-offset: 2px;
}

/* ---- Left icon-rail variant (Region by Age) ----
 * The stage itself becomes the white panel, holding a vertical rail of
 * teardrop icon tabs on the left and the chart image on the right. Each
 * slide image is the full right side (legend + chart) the editor uploads. */
.samueli-slider--left .samueli-slider__stage {
	--samueli-slider-left-max-h: 575px;

	display: flex;
	align-items: center;
	gap: 40px;
	max-height: var(--samueli-slider-left-max-h, 575px);
	padding: 40px 44px 40px 0; /* no left pad: the icon rail sits flush to the edge */
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	overflow: hidden; /* clip the flush D-tabs to the rounded panel */
}

/* Rail on the left (the tablist follows the viewport in the DOM). */
.samueli-slider--left .samueli-slider__tabs {
	order: -1;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: flex-start;
	gap: 16px;
	margin-top: 0;
}

.samueli-slider--left .samueli-slider__viewport {
	flex: 1 1 0; /* basis 0 so a large chart image can't drive the width */
	min-width: 0;
	display: flex;
	align-items: center;
}

.samueli-slider--left .samueli-slider__panel {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* Keep the chart within the panel regardless of its intrinsic size. */
.samueli-slider--left .samueli-slider__slide {
	width: 100%;
}

.samueli-slider--left .samueli-slider__img {
	width: auto;
	height: auto;
	max-width: 100%;
	/* fit within the box height (max-height minus the stage's vertical padding). */
	max-height: calc(var(--samueli-slider-left-max-h, 575px) - 80px);
	margin: 0 auto;
}

/* No prev/next arrows in the rail layout — the tabs are the only nav. */
.samueli-slider--left .samueli-slider__arrow {
	display: none;
}

/* Each tab: a teardrop icon, with the label shown (teal, underlined) only when
 * active. Reset the bottom-variant pill styling. */
.samueli-slider--left .samueli-slider__tab {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	transform: none;
}

.samueli-slider--left .samueli-slider__tab-icon {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 87px;
	height: 87px;
	padding: 11px 11px 11px 15px; /* breathing room; extra on the flush left edge */
	background: var(--samueli-slider-rail-rest, #cfd0d1); /* inactive gray */
	border-radius: 0 50% 50% 0; /* "D" shape: flat at the (flush) left edge */
	transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}

/* Active tab: teal, and a bit larger than the resting tabs. */
.samueli-slider--left .samueli-slider__tab[aria-selected='true'] .samueli-slider__tab-icon {
	width: 97px;
	height: 97px;
	background: var(--samueli-slider-rail-active, #43b0ad); /* active teal */
}

/* The silhouette shrinks to fit the padded box (object-fit, never clipped).
 * Scoped through .samueli-slider__tab-icon (3 classes) so it outranks Salient's
 * `.row .col img` rule, which otherwise forces margin-bottom:15px + height:auto. */
.samueli-slider--left .samueli-slider__tab-icon .samueli-slider__tab-img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 56px;
	max-width: 56px;
	margin: 0;
	object-fit: contain;
}

.samueli-slider--left .samueli-slider__tab[aria-selected='true'] .samueli-slider__tab-icon .samueli-slider__tab-img {
	max-height: 62px;
	max-width: 62px;
}

.samueli-slider--left .samueli-slider__tab-label {
	display: none;
	font-family: 'sofia-pro', sans-serif;
	font-size: 17px;
	line-height: 1.2;
	color: var(--samueli-slider-ink, #54585a);
	white-space: nowrap;
}

.samueli-slider--left .samueli-slider__tab:hover {
	color: inherit;
}

.samueli-slider--left .samueli-slider__tab[aria-selected='true'] .samueli-slider__tab-label {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--samueli-slider-rail-active, #43b0ad);
}

/* Stack the rail above the chart on narrow screens. */
@media (max-width: 760px) {
	.samueli-slider--left .samueli-slider__stage {
		flex-direction: column;
		gap: 24px;
		padding: 20px;
	}

	.samueli-slider--left .samueli-slider__tabs {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Bottom tab row: equal-width tabs squash long labels on a narrow screen
	   (they overrun their tab). Switch to a horizontal snap-scroller with
	   comfortable fixed-width tabs so each label wraps cleanly inside its tab. */
	.samueli-slider:not(.samueli-slider--left) .samueli-slider__tabs {
		justify-content: flex-start;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		padding: 6px 16px 12px; /* edge gutter + room for the active lift/shadow */
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.samueli-slider:not(.samueli-slider--left) .samueli-slider__tab {
		flex: 0 0 auto;
		width: 10.5rem; /* ~168px — fits the longest labels on a few wrapped lines */
		padding: 12px 14px;
		font-size: 13px;
		scroll-snap-align: start;
	}
}

/* Motion: a gentle fade as a slide becomes active. Reduced-motion + the no-JS
 * baseline show the active slide instantly (no transition). */
@media (prefers-reduced-motion: no-preference) {
	.samueli-slider__slide {
		animation: samueli-slider-fade 0.25s ease both;
	}
}

@keyframes samueli-slider-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Below the full section width the gutter vanishes, so the arrows overlap the
 * panel's left/right edges instead of overflowing the section. */
@media (max-width: 1260px) {
	.samueli-slider {
		--samueli-slider-arrow-offset: -2px;
	}
}

/* Tablet / mobile: shrink the arrows; the tab row stays one inline row (tabs
 * shrink and wrap their text internally). */
@media (max-width: 900px) {
	.samueli-slider {
		--samueli-slider-arrow-icon: 20px;
		--samueli-slider-arrow-offset: -2px;
	}

	.samueli-slider .samueli-slider__arrow {
		padding: 8px;
	}

	.samueli-slider .samueli-slider__arrow-inner {
		padding: 9px;
	}

	.samueli-slider__panel {
		padding: 16px;
	}

	.samueli-slider__tabs {
		gap: 5px;
	}

	.samueli-slider__tab {
		padding: 9px 8px;
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Report — a "mini report" section (Daily Life / Jewish Life / Hot
 * Topics): eyebrow + title + intro, a vertical stack of accent question
 * cards, a report download. The accent color is per-instance
 * (--samueli-report-accent); the opaque inner (--samueli-report-bg) masks
 * the page spine behind the content.
 * ------------------------------------------------------------------ */

.samueli-report {
	--samueli-report-accent: #8b9067; /* question card fill */
	--samueli-report-bg: #f1f1f2; /* opaque band that masks the page spine */
	--samueli-report-ink: #45494c; /* title */
	--samueli-report-muted: #636466; /* intro copy */
	--samueli-report-rule: #1a1a1a; /* eyebrow underline */
	--samueli-report-run: 120px; /* the connector run above the eyebrow */
	--samueli-report-card-radius: 28px; /* question card corner radius */
	--samueli-report-link: #414042; /* dotted connector between cards */
}

/* Top connector: the self-contained animated connector (.samueli-connector
 * draws the dotted line + looping wedge); this just centres the run. */
.samueli-report__connector {
	margin: 0 auto;
}

/* Centred content column; its opaque background masks the connector behind it. */
.samueli-report__inner {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 20px 88px;
	background-color: var(--samueli-report-bg, #f1f1f2);
	text-align: center;
}

/* Header --------------------------------------------------------------- */

.samueli-report__head {
	margin: 0 auto 46px;
	max-width: 720px;
}

.samueli-report__eyebrow {
	display: inline-block;
	margin: 0 0 26px;
	padding: 0 2px 8px;
	border-bottom: 1px solid var(--samueli-report-rule, #1a1a1a);
	font-family: 'sofia-pro', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--samueli-report-rule, #1a1a1a);
}

.samueli-report .samueli-report__title {
	margin: 0 auto 22px;
	color: var(--samueli-report-ink, #45494c);
	font-size: 52px;
	font-weight: 700;
	line-height: 1.04;
}

.samueli-report__intro {
	margin: 0 auto;
	padding: 0; /* override Salient p padding-bottom */
	font-family: 'sofia-pro', sans-serif;
	font-size: 19px;
	line-height: 1.6;
	color: var(--samueli-report-muted, #636466);
}

/* Cards ---------------------------------------------------------------- */

/* Vertical stack of accent question cards, each linked by a short dotted
 * connector (.samueli-report__link) drawn between them. Cards shrink to their
 * content width (centred), growing only until the text reaches the max. */
.samueli-report__cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

.samueli-report__card {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 860px;
	min-height: 96px;
	padding: 26px 52px;
	border-radius: var(--samueli-report-card-radius, 28px);
	background: var(--samueli-report-accent, #8b9067);
}

.samueli-report__q {
	margin: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.34;
	color: #ffffff;
	text-align: center;
}

/* Short dotted connector between consecutive cards (reuses the shared dot
 * tokens; charcoal dots to match the mockup). */
.samueli-report__link {
	align-self: center;
	width: var(--samueli-dot-width, 4px);
	height: 26px;
	margin: 9px 0;
	background-image: radial-gradient(circle, var(--samueli-report-link, #414042) var(--samueli-dot-on, 1.9px), transparent var(--samueli-dot-off, 2.1px));
	background-size: var(--samueli-dot-width, 4px) var(--samueli-dot-pitch, 8.16px);
	background-repeat: repeat-y;
	background-position: center;
}

/* Report download ------------------------------------------------------ */

.samueli-report__report {
	position: relative;
	max-width: 720px;
	margin: 58px auto 0;
}

.samueli-report__report-media {
	margin: 0;
}

.samueli-report__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Positions the shared [samueli_button] over the report image. The button
 * itself carries no report-specific styles — it renders exactly as elsewhere. */
.samueli-report__report-cta {
	position: absolute;
	left: 50%;
	bottom: 7%;
	transform: translateX(-50%);
}

/* Tablet: smaller title, slightly tighter cards. */
@media (max-width: 980px) {
	.samueli-report .samueli-report__title {
		font-size: 40px;
	}

	.samueli-report__card {
		min-height: 84px;
		padding: 22px 36px;
	}

	.samueli-report__q {
		font-size: 20px;
	}
}

/* Phone: tighter cards, smaller question text. */
@media (max-width: 768px) {
	.samueli-report__inner {
		padding-bottom: 64px;
	}

	.samueli-report__card {
		padding: 20px 26px;
		border-radius: 22px;
	}

	.samueli-report__q {
		font-size: 18px;
		line-height: 1.3;
	}

	.samueli-report__report-cta {
		bottom: 4%;
	}
}

/* ------------------------------------------------------------------ *
 * Report links — four mini-report download boxes (Reports page)
 * ------------------------------------------------------------------ */

.samueli-report-links {
	--samueli-report-links-max-width: 1080px;
	/* Star tile rendered at a fixed size (NOT `cover`, which shrinks the tile
	 * to a small box and makes the stars tiny); matches the card star scale. */
	--samueli-report-links-pattern: 760px;
	max-width: var(--samueli-report-links-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.samueli-report-links__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.samueli-report-links__box {
	display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: 26px 26px 28px;
    border-radius: 16px;
    background-color: var(--box-bg, #25508f);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--box-text, #fff);
    border: 5px solid;
}

/* Salient's Redux typography sets h3 via inline !important CSS, so the title
 * size/weight must be forced (same override pattern as the button radius). */
.samueli-report-links__box .samueli-report-links__title {
	margin: 0;
	color: var(--box-text, #fff);
	font-size: 27px !important;
	line-height: 1.08 !important;
	font-weight: 600 !important;
}

.samueli-report-links__cta {
	margin-top: auto;
	padding-top: 24px;
}

/* Compact the reused download button to fit inside a box. */
.samueli-report-links__btn {
	--samueli-btn-icon-size: 30px;
	--samueli-btn-label-gap: 8px;
}

.samueli-report-links__btn .samueli-btn__inner {
	padding: 5px 16px 5px 5px;
}

.samueli-report-links__btn .samueli-btn__label {
	max-width: 84px;
	font-size: 13px;
	line-height: 1.15;
	white-space: normal;
}

@media (max-width: 880px) {
	.samueli-report-links__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.samueli-report-links__grid {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * Request Form — "Prefer a printed copy?" Gravity Forms card that flips
 * to a confirmation message on a successful AJAX submit.
 * ===================================================================== */

.samueli-form {
	--samueli-form-accent: #2f8a82; /* submit button + confirmation check */
	--samueli-form-bg: #ffffff; /* card face */
	--samueli-form-max-width: 900px; /* centred card width */
	--samueli-form-field-bg: #ececec; /* pill input fill */
	--samueli-form-input-radius: 999px; /* shared by inputs + submit button */
	--samueli-form-ink: #45494c; /* heading + input text */
	--samueli-form-muted: #6b6e70; /* intro + confirmation copy */
	--samueli-form-label: #555555; /* field labels */
	max-width: var(--samueli-form-max-width, 900px);
	margin: 0 auto;
}

/* Perspective host for the 3D flip. */
.samueli-form__card {
	perspective: 2200px;
}

/* The rotating inner. Front is in flow (defines card height); back is absolute
 * and pre-rotated, so the card auto-sizes to whichever face is showing. */
.samueli-form__flip {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.samueli-form__flip.is-flipped {
	transform: rotateY(180deg);
}

.samueli-form__face {
	border-radius: 28px;
	background: var(--samueli-form-bg, #ffffff);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.samueli-form__face--front {
	position: relative; /* in flow → sets the flip height */
	padding: 56px 64px 64px;
}

.samueli-form__face--back {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 64px;
	background: var(--samueli-form-bg, #ffffff);
	transform: rotateY(180deg);
}

.samueli-form__face--back:focus {
	outline: none;
}

/* Header --------------------------------------------------------------- */

.samueli-form__head {
	max-width: 640px;
	margin: 0 auto 36px;
	text-align: center;
}

.samueli-form .samueli-form__heading {
	margin: 0 0 18px;
	color: var(--samueli-form-ink, #45494c);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
}

.samueli-form__intro {
	margin: 0;
	padding: 0; /* override Salient p padding-bottom */
	font-family: 'sofia-pro', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--samueli-form-muted, #6b6e70);
}

/* Gravity Forms field styling ----------------------------------------- */

.samueli-form__gf {
	max-width: 660px;
	margin: 0 auto;
}

.samueli-form .gform_wrapper {
	margin: 0;
}

.samueli-form .gform_wrapper .gfield_label {
	margin-bottom: 8px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--samueli-form-label, #555555);
}

.samueli-form .gform_wrapper .gfield input[type="text"],
.samueli-form .gform_wrapper .gfield input[type="email"],
.samueli-form .gform_wrapper .gfield input[type="tel"],
.samueli-form .gform_wrapper .gfield input[type="url"],
.samueli-form .gform_wrapper .gfield input[type="number"],
.samueli-form .gform_wrapper .gfield select,
.samueli-form .gform_wrapper .gfield textarea {
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: var(--samueli-form-input-radius, 999px);
	background: var(--samueli-form-field-bg, #ececec);
	padding: 14px 22px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--samueli-form-ink, #45494c);
	box-shadow: none;
}

/* Dropdowns (e.g. the Address "State" field): Gravity Forms sizes every control
 * to a fixed 38px (--gf-ctrl-size-md) and the text inputs inherit that height,
 * with the inputs' 14px vertical padding crammed inside via border-box. A text
 * input centres its value natively so that squeeze is invisible, but a
 * <select> (appearance: none) clips its content box — so the same 14px padding
 * crops the option text. Drop the select's vertical padding so its text gets
 * the full 38px height, and do NOT set a height: the select then keeps GF's
 * 38px and lines up with the inputs. Extra right padding clears the arrow. */
.samueli-form .gform_wrapper .gfield select {
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 44px;
}

/* Address layout: Gravity Forms lays the address sub-fields out as a flex-wrap
 * row — Street full width, then City + State as halves, so ZIP wraps onto a
 * second row. On desktop, make City / State / ZIP equal thirds on one line
 * (Street stays full). Below GF's own 640px breakpoint the sub-fields stack,
 * so this is scoped to desktop only. */
@media (min-width: 641px) {
	.samueli-form .ginput_complex.ginput_container_address .address_city,
	.samueli-form .ginput_complex.ginput_container_address .address_state,
	.samueli-form .ginput_complex.ginput_container_address .address_zip {
		flex: 1 1 0;
		width: auto;
		max-width: none;
	}
}

/* Multi-line (Street Address) keeps a softer rounded rect, not a full pill. */
.samueli-form .gform_wrapper .gfield textarea {
	border-radius: 22px;
}

.samueli-form .gform_wrapper .gfield input:focus,
.samueli-form .gform_wrapper .gfield select:focus,
.samueli-form .gform_wrapper .gfield textarea:focus {
	outline: 2px solid var(--samueli-form-accent, #2f8a82);
	outline-offset: 2px;
	background: #e6e7e8;
}

.samueli-form .gform_wrapper .gfield input::placeholder,
.samueli-form .gform_wrapper .gfield textarea::placeholder {
	color: #9a9c9e;
}

/* Submit: a teal pill with an icon + label. Gravity Forms 2.7+ ships the
 * "theme framework", whose button selector is far more specific than ours and
 * paints the button from its own --gf-ctrl-btn-* custom properties. Rather than
 * fight that with !important, we override those properties on the wrapper so
 * the framework itself recolours/reshapes the button to our pill. The icon and
 * label are real child elements of the <button> (see the gform_submit_button
 * filter), laid out by the framework's inline-flex + column-gap. */
.samueli-form .gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--samueli-form-accent, #2f8a82);
	--gf-ctrl-btn-bg-color-hover-primary: #267770;
	--gf-ctrl-btn-bg-color-focus-primary: #267770;
	--gf-ctrl-btn-border-color-primary: var(--samueli-form-accent, #2f8a82);
	--gf-ctrl-btn-border-color-hover-primary: #267770;
	--gf-ctrl-btn-border-color-focus-primary: #267770;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-color-hover-primary: #ffffff;
	--gf-ctrl-btn-color-focus-primary: #ffffff;
	--gf-ctrl-btn-radius: var(--samueli-form-input-radius, 999px);
	--gf-ctrl-btn-padding-x: 34px;
	--gf-ctrl-btn-padding-y: 16px;
	--gf-ctrl-btn-font-size: 17px;
	--gf-ctrl-btn-font-weight: 500;
	--gf-ctrl-btn-icon-gap: 10px;
}

.samueli-form .gform_wrapper .gform_footer,
.samueli-form .gform_wrapper .gform-footer {
	display: flex;
	justify-content: center;
	margin: 30px 0 0;
	padding: 0;
}

/* Belt-and-braces for legacy markup / non-framework buttons: same pill, no
 * dependence on the GF custom properties above. The radius is forced with
 * !important because Salient also styles theme buttons and its rounding would
 * otherwise win over GF's variable-driven radius (the same gotcha the Report
 * flip button hits). The shared token keeps it identical to the inputs. */
.samueli-form .gform_wrapper .gform_footer button.samueli-form__submit,
.samueli-form .gform_wrapper .gform-footer button.samueli-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 10px;
	border: 0;
	border-radius: var(--samueli-form-input-radius, 999px) !important;
	background-color: var(--samueli-form-accent, #2f8a82);
	padding: 16px 34px;
	font-family: 'sofia-pro', sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: #ffffff;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.samueli-form .gform_wrapper .gform_footer button.samueli-form__submit:hover,
.samueli-form .gform_wrapper .gform-footer button.samueli-form__submit:hover {
	background-color: #267770;
	transform: translateY(-1px);
}

/* Icon child: keep the SVG / uploaded image / text glyph a fixed size and
 * aligned with the label (inherits the button's white text colour). */
.samueli-form__submit-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.samueli-form__submit-svg,
.samueli-form__submit-img {
	display: block;
	width: 22px;
	height: 22px;
}

.samueli-form__submit-img {
	-o-object-fit: contain;
	object-fit: contain;
}

/* Validation messages kept legible over the white card. */
.samueli-form .gform_wrapper .validation_message,
.samueli-form .gform_wrapper .gfield_validation_message {
	font-family: 'sofia-pro', sans-serif;
	font-size: 14px;
}

/* Confirmation back face ---------------------------------------------- */

.samueli-form__confirm {
	text-align: center;
}

.samueli-form__confirm-icon {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 22px;
	color: var(--samueli-form-accent, #2f8a82);
}

.samueli-form .samueli-form__confirm-title {
	margin: 0 0 14px;
	color: #ea6a20;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
}

.samueli-form__confirm-text {
	font-family: 'sofia-pro', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--samueli-form-muted, #6b6e70);
}

.samueli-form__confirm-text p {
	margin: 0 0 12px;
	padding: 0;
}

.samueli-form__confirm-text p:last-child {
	margin-bottom: 0;
}

/* Editor-only notice when the form can't render (GF inactive / bad id). */
.samueli-form--notice {
	max-width: 640px;
	padding: 18px 22px;
	border: 1px dashed #c0392b;
	border-radius: 14px;
	background: #fff5f4;
	color: #8a2018;
	text-align: center;
}

.samueli-form--notice p {
	margin: 0;
	padding: 0;
	font-family: 'sofia-pro', sans-serif;
	font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
	.samueli-form__flip {
		transition: none;
	}
}

@media (max-width: 700px) {
	.samueli-form__face--front {
		padding: 36px 24px 40px;
	}

	.samueli-form__face--back {
		padding: 36px 24px;
	}

	.samueli-form .samueli-form__heading {
		font-size: 30px;
	}

	.samueli-form .samueli-form__confirm-title {
		font-size: 28px;
	}
}