/*
 * NEMRA Blocks — Page Hero widget styles.
 *
 * The site's primary hero card. Light grey rounded surface with a
 * two-column layout: copy + CTA on the left, optional sidebar of link
 * rows on the right. Layout is flex-based; we intentionally avoid
 * position:absolute on the inner columns so Elementor's CSS generator
 * doesn't choke on nested editor instances.
 */

.nemra-page-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	align-items: stretch;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 80px 60px;
	border-radius: 10px;
	background-color: var(--nemra-surface, #F4F5F7);
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	color: var(--nemra-text, #3f3f3f);
}

/* Full-bleed variant: grey background runs edge-to-edge under the nav.
 * The grey is supplied by the wrapping Elementor container (which has no
 * horizontal padding); the widget itself is transparent and just provides
 * the centered max-width content area + sidebar layout. The sidebar
 * anchors to the bottom of the hero (align-self) so it sits flush with
 * the section base, matching the Figma. */
.nemra-page-hero--layout-full-bleed {
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 50px 0;
	background-color: transparent;
	border-radius: 0;
	align-items: stretch;
	min-height: 600px;
}

.nemra-page-hero--layout-full-bleed .nemra-page-hero__sidebar {
	align-self: flex-end;
	margin-bottom: 0;
}

.nemra-page-hero--layout-full-bleed .nemra-page-hero__content {
	padding-bottom: 80px;
}

/* Compact full-bleed: shorter overall height, content anchors to the
 * bottom of the grey area. Used for Events-style heros where there's no
 * sidebar and the heading + body should sit lower in the frame. */
.nemra-page-hero--compact {
	min-height: 380px;
	padding-top: 80px;
	align-items: flex-end;
}

.nemra-page-hero--compact .nemra-page-hero__content {
	padding-bottom: 60px;
	justify-content: flex-end;
}

@media (max-width: 991px) {
	.nemra-page-hero--compact {
		padding-top: 60px;
	}
}

@media (max-width: 599px) {
	.nemra-page-hero--compact {
		padding-top: 40px;
	}
}

/* --- Left column ------------------------------------------------------- */

.nemra-page-hero__content {
	flex: 1 1 55%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
}

.nemra-page-hero--no-sidebar .nemra-page-hero__content {
	flex: 1 1 100%;
	max-width: 820px;
}

.nemra-page-hero__title {
	margin: 0;
	max-width: 670px;
	font-size: 61px;
	line-height: 1;
	letter-spacing: -0.61px;
	font-weight: 400;
	color: var(--nemra-text, #3f3f3f);
}

.nemra-page-hero__body {
	margin: 0;
	max-width: 620px;
	font-size: 18px;
	line-height: 24.75px;
	color: var(--nemra-muted, #6b6b6b);
}

.nemra-page-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 25px;
	border-radius: 5px;
	background-color: var(--nemra-hero-cta-bg, var(--nemra-green, #4c7f39));
	color: #ffffff;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 150ms ease, transform 150ms ease;
}

/* Every button hovers to the same neutral-dark-88 fill, regardless of its
 * resting colour (sitewide designer direction, 2026-08-04). An explicit
 * button_bg_hover still wins if a page sets one. */
.nemra-page-hero__cta:hover,
.nemra-page-hero__cta:focus {
	background-color: var(
		--nemra-hero-cta-bg-hover,
		var(--neutral-dark-88, rgba(23, 23, 26, 0.88))
	);
	color: #ffffff;
	text-decoration: none;
}

.nemra-page-hero__cta:focus-visible {
	outline: 2px solid var(--nemra-blue, #2173B3);
	outline-offset: 2px;
}

.nemra-page-hero__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.nemra-page-hero__cta .nemra-page-hero__arrow {
	width: 22px;
	height: 22px;
}

/* --- Video walkthrough link (left column, below CTA) ------------------- */

.nemra-page-hero__video-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	color: #d0d0d0;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 150ms ease;
}

.nemra-page-hero__video-link:hover,
.nemra-page-hero__video-link:focus-visible {
	color: var(--nemra-text, #3f3f3f);
	text-decoration: none;
}

.nemra-page-hero__video-link:hover .nemra-page-hero__video-icon circle,
.nemra-page-hero__video-link:focus-visible .nemra-page-hero__video-icon circle {
	stroke: var(--nemra-text, #3f3f3f);
}

.nemra-page-hero__video-link:hover .nemra-page-hero__video-icon path,
.nemra-page-hero__video-link:focus-visible .nemra-page-hero__video-icon path {
	fill: var(--nemra-text, #3f3f3f);
}

.nemra-page-hero__video-link--plain {
	cursor: default;
}

.nemra-page-hero__video-icon {
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
}

.nemra-page-hero__video-label {
	letter-spacing: 0;
}

/* --- Right sidebar ----------------------------------------------------- */

.nemra-page-hero__sidebar {
	flex: 0 1 400px;
	align-self: center;
	box-sizing: border-box;
	padding: 37px 25px;
	border-radius: 5px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.nemra-page-hero__sidebar-title {
	margin: 0;
	font-size: 16px;
	line-height: 24.75px;
	color: var(--nemra-muted, #6b6b6b);
}

.nemra-page-hero__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nemra-page-hero__link-item {
	margin: 0;
}

.nemra-page-hero__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	padding: 0 0 20px;
	border-bottom: 1px solid #e2e2e2;
	color: var(--nemra-muted, #6b6b6b);
	font-size: 20px;
	line-height: 24.75px;
	text-decoration: none;
	transition: color 150ms ease;
}

.nemra-page-hero__link:hover,
.nemra-page-hero__link:focus {
	color: var(--nemra-text, #3f3f3f);
	text-decoration: none;
}

.nemra-page-hero__link:focus-visible {
	outline: 2px solid var(--nemra-blue, #2173B3);
	outline-offset: 2px;
}

.nemra-page-hero__link--plain {
	cursor: default;
}

.nemra-page-hero__link-label {
	flex: 1 1 auto;
	min-width: 0;
}

/* Remove the bottom border on the last link row so the card looks tidy. */
.nemra-page-hero__link-item:last-child .nemra-page-hero__link {
	border-bottom: none;
	padding-bottom: 0;
}

/* --- Tablet ------------------------------------------------------------ */

@media (max-width: 991px) {
	.nemra-page-hero {
		flex-direction: column;
		gap: 40px;
		padding: 60px 40px;
	}

	.nemra-page-hero__content,
	.nemra-page-hero__sidebar {
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
	}

	.nemra-page-hero__title {
		font-size: 48px;
	}
}

/* --- Mobile ------------------------------------------------------------ */

@media (max-width: 599px) {
	.nemra-page-hero {
		gap: 32px;
		padding: 40px 24px;
		border-radius: 8px;
	}

	/* The card rounding above must not reach the full-bleed/photo heroes:
	   they run edge-to-edge, and with the section's overflow:hidden the 8px
	   radius clips the bottom drawer bar's corners round while it's closed.
	   The drawer only rounds (top corners, 32px) once opened. */
	.nemra-page-hero--layout-full-bleed,
	.nemra-page-hero--has-bg {
		border-radius: 0;
	}

	.nemra-page-hero__content {
		gap: 20px;
	}

	.nemra-page-hero__title {
		font-size: 36px;
		line-height: 1.1;
	}

	.nemra-page-hero__body {
		font-size: 16px;
	}

	.nemra-page-hero__cta {
		padding: 13px 20px;
		font-size: 15px;
	}

	.nemra-page-hero__sidebar {
		padding: 25px 20px;
	}

	.nemra-page-hero__link {
		font-size: 17px;
		gap: 12px;
		padding-bottom: 16px;
	}

	.nemra-page-hero__link-list {
		gap: 16px;
	}
}

/* ==========================================================================
 * V2 — full-bleed image hero (homepage)
 * Activated when a background image is set (`--has-bg`). Photo covers the
 * surface, a navy gradient washes the lower third, copy renders white, and
 * the sidebar becomes a solid accent card. Colors (heading/body/button/
 * sidebar backgrounds) are driven by the widget's Style controls in the
 * page JSON; this block owns layout, the overlay, typography, and the dark
 * sidebar text treatment. See docs/figma-v2/STYLE-TOKENS.md.
 * ========================================================================== */

.nemra-page-hero--has-bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 820px;
	/* Full-bleed: the photo + overlay span the full viewport width while the
	 * content stays in a 1440-wide centered column with 64px gutters. Without
	 * this the base .nemra-page-hero (max-width:1440) caps the photo and leaves
	 * side gaps on screens wider than 1440 — 240px each side at 1920. The
	 * padding centers content to the 1440 frame: (100vw-1440)/2 + 64 gutter,
	 * clamped to 64px below 1440. */
	max-width: none;
	width: 100%;
	padding: 80px max(64px, calc(50vw - 656px)) 0;
	background-size: cover;
	background-position: center 28%;
	background-repeat: no-repeat;
	align-items: flex-end;

	/* Resolved overlay tint. The widget's Style controls write
	 * --nemra-hero-overlay / --nemra-hero-overlay-rgb (desktop) and the
	 * render method inlines --nemra-hero-overlay-m / -rgb-m (mobile); the
	 * gradients below only ever read the resolved pair, which is what lets
	 * the phone breakpoint swap tints without every gradient rule needing a
	 * mobile twin. Navy is the fallback for both because every hero that
	 * exists sets the controls explicitly. */
	--nemra-hero-tint: var(--nemra-hero-overlay, #042A48);
	--nemra-hero-tint-rgb: var(--nemra-hero-overlay-rgb, 4, 42, 72);
}

/* Desktop photo framing. The base rule above is `cover` at `center 28%`, the
 * right default for a 4:3 photo in a 16:10 hero. Some comps crop tighter than
 * cover: networking's (797:25146) draws the photo at 199.8% of the hero's
 * height pinned to 0% / 60%, i.e. a 1.67x zoom that puts the podium and the
 * banners in frame where cover shows mostly ceiling. Those heroes set
 * --nemra-hero-bg-size / --nemra-hero-bg-pos from the widget's photo-framing
 * controls; everything else keeps cover because the var falls back to it.
 *
 * Gated to >=992px deliberately. The numbers come off a 1440x900 frame, and a
 * height-relative zoom re-applied to a 390x600 phone hero would crop to a
 * quarter of the photo's width. Phone framing stays on cover until a phone
 * comp says otherwise. */
@media (min-width: 992px) {
	.nemra-page-hero--has-bg {
		background-size: var(--nemra-hero-bg-size, cover);
		background-position: var(--nemra-hero-bg-pos, center 28%);
	}
}

/* Navy wash across the WHOLE photo, deepening to solid navy where the heading
 * and body sit (Figma node 571:21183).
 *
 * An earlier revision of this rule capped the top half at 0.22 on the theory
 * that "the comp's upper photo is bright; only the lower third is washed navy".
 * That was measured wrong: sampling the comp against the live render by region
 * shows the comp is 19–23 luminance points DARKER through the whole upper two
 * thirds, and 27–32 points bluer (B minus R) through the mid and text zones.
 * The comp treats the photo as a blue duotone — at 0.22 the raw photo's skin
 * tones, warm browns and red carpet read straight through, which is the
 * "too bright / hurts text readability" note. Keep the floor high enough that
 * the photo reads as tinted, not natural. */
.nemra-page-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(var(--nemra-hero-tint-rgb), 0.58) 0%,
		rgba(var(--nemra-hero-tint-rgb), 0.58) 48%,
		rgba(var(--nemra-hero-tint-rgb), 0.86) 72%,
		rgba(var(--nemra-hero-tint-rgb), 1) 90%,
		var(--nemra-hero-tint) 100%
	);
}

/* Diagonal overlay variant — opt-in via `--overlay-diagonal`, used on the Reps
 * hero (Figma node 571:21974). That comp's photo wash is NOT the Home hero's
 * vertical navy fade: it's a 218.6deg diagonal gradient (transparent near the
 * top-right, to near-black at bottom-left) plus a flat 60% wash on top, both
 * sitting over a solid black base. Gated behind this modifier class so Home
 * (which has no modifier and keeps the ::before rule above) is unaffected.
 * The GRADIENT reads --nemra-hero-tint-rgb so per-page tinting (e.g. reps'
 * dark green-black `13, 26, 8`) applies; the flat wash under it does NOT. An
 * earlier revision pointed the flat layer at the tint too, on the theory that
 * a neutral wash let the photo's own colour cast show through. The comps say
 * otherwise — every diagonal fill string specifies a literal
 * rgba(0, 0, 0, 0.60) for that layer, and tinting it is what makes the whole
 * photo read blue instead of only the bottom-left corner. `--wash-tint` below
 * is the escape hatch if a comp ever does ask for a tinted flat wash. */
.nemra-page-hero--has-bg.nemra-page-hero--overlay-diagonal::before {
	background:
		linear-gradient(
			218.6deg,
			rgba(var(--nemra-hero-tint-rgb), 0) 5.76%,
			rgba(var(--nemra-hero-tint-rgb), 0.97) 98.97%
		),
		rgba(var(--nemra-hero-wash-rgb, 0, 0, 0), 0.6);
	background-blend-mode: normal, normal;
}

/* Opt back into a tinted flat wash. Kept as a switch rather than the default
 * because measuring networking's comp settled the question the other way: with
 * the wash tinted navy the whole photo reads blue, and the built render sits
 * ~14 luminance points bright and ~26 points bluer (B minus R) than the comp
 * across every photo-only region. With a neutral wash the same reconstruction
 * lands within 2.7 points. The tint is supposed to arrive through the diagonal
 * gradient alone. */
.nemra-page-hero--has-bg.nemra-page-hero--wash-tint {
	--nemra-hero-wash-rgb: var(--nemra-hero-tint-rgb);
}

/* Phone overlay. Two independent things change below 992px, and both are
 * opt-in per page because the comps genuinely disagree by device.
 *
 * 1. The tint. Advocacy's desktop frame (797:24791) washes its photo
 *    near-black; its phone frame (797:24989) washes the same photo dark
 *    green. `overlay_color_mobile` re-points the resolved tint here; heroes
 *    that leave it empty keep the desktop colour at every width.
 *
 * 2. The gradient shape. The desktop diagonal is a 60% flat wash under a
 *    fade that only reaches full opacity at 99% — on a 390x850 phone frame
 *    that dims the whole photo, and the comp's ceiling reads ~100 luminance
 *    against ~41 built. The phone comp is a plain vertical fade: photo at
 *    full brightness to 9%, solid tint by 75%, over a flat 20% black. Gated
 *    behind --overlay-mobile-soft so the five heroes whose phone comps have
 *    not been measured keep rendering exactly as they do today. */
@media (max-width: 991px) {
	.nemra-page-hero--has-bg {
		--nemra-hero-tint: var(--nemra-hero-overlay-m, var(--nemra-hero-overlay, #042A48));
		--nemra-hero-tint-rgb: var(--nemra-hero-overlay-rgb-m, var(--nemra-hero-overlay-rgb, 4, 42, 72));
	}

	.nemra-page-hero--has-bg.nemra-page-hero--overlay-mobile-soft::before {
		background:
			linear-gradient(
				180deg,
				rgba(var(--nemra-hero-tint-rgb), 0) 9.02%,
				var(--nemra-hero-tint) 75.18%
			),
			rgba(0, 0, 0, 0.2);
		background-blend-mode: normal, normal;
	}
}

.nemra-page-hero--has-bg > * {
	position: relative;
	z-index: 1;
}

.nemra-page-hero--has-bg .nemra-page-hero__content {
	justify-content: flex-end;
	padding-bottom: 80px;
	gap: 24px;
}

/* Eyebrow: blue dot + uppercase micro-label */
.nemra-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.nemra-page-hero__eyebrow-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--nemra-blue, #2173B3);
}

.nemra-page-hero__eyebrow-text {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--nemra-light, #FCFDFD);
}

/* Display heading — Libre Baskerville, large, tight tracking */
.nemra-page-hero--has-bg .nemra-page-hero__title {
	max-width: 905px;
	font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
	font-size: 82px;
	line-height: 96px;
	letter-spacing: -4px;
	font-weight: 400;
}

.nemra-page-hero--has-bg .nemra-page-hero__body {
	max-width: 610px;
	font-size: 14px;
	line-height: 1.6;
}

.nemra-page-hero--has-bg .nemra-page-hero__cta {
	padding: 12px 16px;
	gap: 8px;
	border: 1px solid rgba(252, 253, 253, 0.08);
	font-size: 14px;
	line-height: 20px;
}

.nemra-page-hero--has-bg .nemra-page-hero__cta:hover,
.nemra-page-hero--has-bg .nemra-page-hero__cta:focus {
	background-color: var(
		--nemra-hero-cta-bg-hover,
		var(--neutral-dark-88, rgba(23, 23, 26, 0.88))
	);
}

/* Accent sidebar card — sits flush against the hero's bottom edge (comp
 * 571:21973: the card's bottom corners are square and touch the section
 * boundary; only the top corners round). */
.nemra-page-hero--has-bg .nemra-page-hero__sidebar {
	align-self: flex-end;
	flex: 0 1 350px;
	margin-bottom: 0;
	padding: 30px 23px;
	border-radius: 5px 5px 0 0;
	gap: 34px;
}

.nemra-page-hero--has-bg .nemra-page-hero__sidebar-title {
	font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
	font-size: 12px;
	line-height: 1.4;
	color: var(--nemra-light, #FCFDFD);
}

.nemra-page-hero--has-bg .nemra-page-hero__link {
	color: var(--nemra-light, #FCFDFD);
	border-bottom-color: rgba(226, 226, 226, 0.2);
	border-bottom-width: 0.5px;
	/* Round-3 sidebar comp (797:21246) sets Body Large's 1.5 leading on the
	   rows — the base card's 24.75px left the whole card 36px short. */
	line-height: 1.5;
}

/* The round-3 comp draws all four rows identical (50px each): the last row
 * keeps its hairline and 20px padding, unlike the base white card. */
.nemra-page-hero--has-bg .nemra-page-hero__link-item:last-child .nemra-page-hero__link {
	border-bottom: 0.5px solid rgba(226, 226, 226, 0.2);
	padding-bottom: 20px;
}

.nemra-page-hero--has-bg .nemra-page-hero__link:hover,
.nemra-page-hero--has-bg .nemra-page-hero__link:focus {
	color: var(--nemra-light, #FCFDFD);
	opacity: 0.85;
}

.nemra-page-hero--has-bg .nemra-page-hero__link .nemra-page-hero__arrow {
	width: 17px;
	height: 17px;
}

/* CTA icon matches Figma's 16px button glyph (the base hero uses a larger
 * 22px arrow; the V2 photo hero's button icon is smaller). Node 571:21190. */
.nemra-page-hero--has-bg .nemra-page-hero__cta .nemra-page-hero__arrow {
	width: 16px;
	height: 16px;
}

@media (max-width: 991px) {
	.nemra-page-hero--has-bg {
		min-height: 0;
		padding: 60px 40px 0;
	}

	.nemra-page-hero--has-bg .nemra-page-hero__title {
		font-size: 52px;
		line-height: 1.1;
		letter-spacing: -2px;
	}

	.nemra-page-hero--has-bg .nemra-page-hero__sidebar {
		margin-bottom: 40px;
	}

	/* Mobile comp 797:21375: eyebrow is a bound UI/Label-2 (8px at 10%
	   tracking in the mobile mode) and the CTA label is UI/Button-1 (12). */
	.nemra-page-hero__eyebrow-text {
		font-size: var(--nemra-t-l2-size, 8px);
		letter-spacing: var(--nemra-t-l2-ls, 0.8px);
	}

	.nemra-page-hero--has-bg .nemra-page-hero__cta {
		font-size: var(--nemra-t-btn-size, 12px);
	}
}

/* The sidebar title row doubles as the mobile drawer toggle. On desktop it
 * renders exactly like the old static title (the caret is hidden and the
 * button chrome is stripped). */
.nemra-page-hero__sidebar-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	color: inherit;
	cursor: default;
}

.nemra-page-hero__sidebar-caret {
	display: none;
}

/* Open-drawer header (handle pill + serif title). Mobile-only chrome for the
 * bottom sheet; never rendered on desktop. */
.nemra-page-hero__drawer-head {
	display: none;
}

/* Mobile V2 round 2 (agents comp 571:21856 et al.): the sidebar becomes a
 * bottom DRAWER — a full-width accent bar showing the title + caret;
 * tapping it expands the link list upward.
 *
 * Round 3: it sits at the BOTTOM OF THE HERO, in flow, not pinned to the
 * viewport. Every round-3 mobile frame draws the bar directly under the
 * hero's CTA and above the trust bar (home 797:21374 puts it at y=816 of
 * an 870px hero). Pinned to the viewport it floated over whatever happened
 * to be there — on home that was the last line of the H1. */
@media (max-width: 768px) {
	.nemra-page-hero--has-bg .nemra-page-hero__sidebar {
		/* Absolute against the hero (which is position: relative) rather
		   than fixed against the viewport: flush to the hero's bottom edge
		   and edge-to-edge, exactly where every round-3 mobile frame draws
		   it, without floating over whatever is scrolled underneath. */
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		z-index: 2;
		flex: none;
		align-self: auto;
		margin: 0;
		padding: 0;
		border-radius: 0;
		gap: 0;
		display: flex;
		flex-direction: column;
	}

	/* Open state = the comp's bottom sheet (797:21508): 32px top rounding,
	   handle pill + serif title at the top, links below, and the persistent
	   trigger bar staying at the bottom. */
	.nemra-page-hero--has-bg .nemra-page-hero__sidebar.is-open {
		border-radius: 32px 32px 0 0;
	}

	/* Persistent trigger bar — the comp draws it exactly 52px tall with
	   Body Medium (14/1.6 regular), 20px caret. */
	.nemra-page-hero--has-bg .nemra-page-hero__sidebar-toggle {
		box-sizing: border-box;
		height: 52px;
		padding: 0 24px;
		cursor: pointer;
		/* the caret strokes currentColor; without this it inherits the page's
		   dark text color instead of the sheet's white */
		color: var(--nemra-light, #FCFDFD);
	}

	.nemra-page-hero--has-bg .nemra-page-hero__sidebar-title {
		font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.6;
	}

	.nemra-page-hero--has-bg .nemra-page-hero__sidebar-caret {
		display: block;
		flex-shrink: 0;
		width: 20px;
		height: 12px;
		transition: transform 0.2s ease;
	}

	.nemra-page-hero--has-bg .nemra-page-hero__sidebar.is-open .nemra-page-hero__sidebar-caret {
		transform: rotate(180deg);
	}

	.nemra-page-hero--has-bg .nemra-page-hero__sidebar.is-open .nemra-page-hero__drawer-head {
		display: flex;
		flex-direction: column;
		order: -2;
		padding: 12px 24px 0;
	}

	.nemra-page-hero__drawer-handle {
		display: block;
		width: 40px;
		height: 4px;
		margin: 0 auto 36px; /* 12px under the pill + the sheet's 24px gap */
		border-radius: 2px;
		background: rgba(255, 255, 255, 0.3);
	}

	.nemra-page-hero__drawer-title {
		font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
		font-size: 16px;
		color: var(--nemra-light, #FCFDFD);
	}

	.nemra-page-hero--has-bg .nemra-page-hero__link-list {
		display: none;
		order: -1; /* links expand upward, above the title bar */
		margin: 0;
		padding: 24px 24px 22px;
	}

	.nemra-page-hero--has-bg .nemra-page-hero__sidebar.is-open .nemra-page-hero__link-list {
		display: flex;
		gap: 16px;
	}

	/* Sheet rows use the comp's Body Medium, not the desktop card's 20px. */
	.nemra-page-hero--has-bg .nemra-page-hero__link {
		font-size: 14px;
		line-height: 1.6;
		padding-bottom: 12px;
	}
}

@media (max-width: 599px) {
	.nemra-page-hero--has-bg {
		padding: 60px 24px 0;
	}

	.nemra-page-hero--has-bg .nemra-page-hero__content {
		flex: 1 1 auto;
		max-width: none;
		/* clears the drawer pinned to the hero's bottom edge (53px bar plus
		   the comp's 26px breathing room under the CTA) */
		padding-bottom: 80px;
		gap: 16px;
	}

	.nemra-page-hero--has-bg .nemra-page-hero__title {
		font-size: 40px;
		line-height: 1.15;
		letter-spacing: -1px;
	}
}

/* ----------------------------------------------------------------------
 * Heading size options for the photo-background hero. The default 82px
 * display size reads oversized on some pages (education/advocacy comps
 * use ~48–64px) — these modifiers step it down without touching layout.
 * -------------------------------------------------------------------- */
.nemra-page-hero--title-medium.nemra-page-hero--has-bg .nemra-page-hero__title {
	font-size: 56px;
	line-height: 1.2;
	letter-spacing: -2px;
}

.nemra-page-hero--title-small.nemra-page-hero--has-bg .nemra-page-hero__title {
	font-size: 48px;
	line-height: 1.25;
	letter-spacing: -1.5px;
}

@media (max-width: 991px) {
	.nemra-page-hero--title-medium.nemra-page-hero--has-bg .nemra-page-hero__title,
	.nemra-page-hero--title-small.nemra-page-hero--has-bg .nemra-page-hero__title {
		font-size: 34px;
		letter-spacing: -1px;
	}
}

/* ----------------------------------------------------------------------
 * Sans heading variant (agents/manufacturers V2 hero, node 571:21974):
 * Poppins Medium 60px on a 660px measure instead of the serif display,
 * with the copy block vertically centered in the 900px hero rather than
 * bottom-anchored. The sidebar card stays flush to the hero bottom.
 * -------------------------------------------------------------------- */
.nemra-page-hero--title-sans.nemra-page-hero--has-bg .nemra-page-hero__title {
	max-width: var(--nemra-hero-title-max-w, 660px);
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 60px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -1.5px;
}

/* The 660 cap exists so the title does not crowd the sidebar card. With no
 * sidebar there is nothing to crowd, and capping it there forced Advocacy's
 * heading onto three lines where comp 797:24791 sets it on two across ~826px.
 * 820 is the no-sidebar content width. */
.nemra-page-hero--title-sans.nemra-page-hero--has-bg.nemra-page-hero--no-sidebar .nemra-page-hero__title {
	max-width: 820px;
}

@media (min-width: 992px) {
	/* The hero row bottom-aligns its children (align-items: flex-end), so
	 * the copy column must opt itself out to center in the 900px hero.
	 *
	 * `padding-bottom: 0` only makes sense when the hero is tall enough for
	 * centring to leave room underneath. On a no-sidebar hero the height
	 * collapses toward the content, so this left Advocacy's CTA 8px off the
	 * bottom edge. Centring is still right there — the fix is that the hero
	 * must actually be its comp height (hero_min_height on the page). */
	.nemra-page-hero--title-sans.nemra-page-hero--has-bg .nemra-page-hero__content {
		align-self: center;
		padding-bottom: 0;
	}
}

@media (max-width: 991px) {
	/* Agents mobile comp 797:21915 binds this title to Heading/H2 — the h2
	   tokens flip to 36/1.2/-1.5 at this same breakpoint. */
	.nemra-page-hero--title-sans.nemra-page-hero--has-bg .nemra-page-hero__title {
		font-size: var(--nemra-t-h2-size, 36px);
		line-height: var(--nemra-t-h2-lh, 1.2);
		letter-spacing: var(--nemra-t-h2-ls, -1.5px);
	}
}

/* ----------------------------------------------------------------------
 * Sans DISPLAY heading variant (round-3 home hero, node 797:21238).
 *
 * Round 3 moved the home H1 off Libre Baskerville onto Poppins while
 * keeping the display size and the bottom-anchored copy block — so it
 * borrows the serif variant's geometry and only swaps the face. Kept
 * separate from `--title-sans`, which is the smaller 60px centered
 * agents/manufacturers treatment.
 * -------------------------------------------------------------------- */
.nemra-page-hero--title-sans-display.nemra-page-hero--has-bg .nemra-page-hero__title {
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-weight: 500;
	/* Comp node 797:21243: 82px on a 96px line with -4px tracking. At -2px
	   the line ran ~40px wide of the comp and the whole H1 read loose. */
	line-height: 96px;
	letter-spacing: -4px;
}

/* The home comp bottom-anchors the CTA flush to the hero edge (button bottom
   978 vs hero 979) — the shared 80px content padding pushed the whole copy
   block up and read as a gap between the hero and the trust band. */
@media (min-width: 992px) {
	.nemra-page-hero--title-sans-display.nemra-page-hero--has-bg .nemra-page-hero__content {
		padding-bottom: 0;
	}
}

@media (max-width: 991px) {
	/* Home mobile comp 797:21375 binds the title to Heading/H1, whose mobile
	   mode is 48/1.2/-1.5 — the h1 tokens flip to exactly that at this same
	   breakpoint. */
	.nemra-page-hero--title-sans-display.nemra-page-hero--has-bg .nemra-page-hero__title {
		font-size: var(--nemra-t-h1-size, 48px);
		line-height: var(--nemra-t-h1-lh, 1.2);
		letter-spacing: var(--nemra-t-h1-ls, -1.5px);
	}
}

/* Floating sidebar variant (home round-3 comp 797:21246): the card keeps its
 * full rounding but sits almost on the hero bottom edge — the comp measures a
 * 4px gap, and inset 85px from the right edge where the grid gutter is 64.
 * Desktop only — on phones every hero uses the flush edge-to-edge drawer,
 * and this rule's extra specificity was pulling that drawer up off the
 * hero's bottom edge. */
@media (min-width: 769px) {
	.nemra-page-hero--sidebar-float.nemra-page-hero--has-bg .nemra-page-hero__sidebar {
		margin-bottom: 4px;
		margin-right: 21px;
		border-radius: 8px;
	}
}