/* ==========================================================================
   Gulf Coast National Lab Alliance: styles.css
   One stylesheet. Values come from tokens.css (loaded first).

   CONTENTS
   01. Fonts
   02. Base
   03. Accessibility helpers (skip link, visually hidden, focus)
   04. Grid (.columns / .column / .m .t .d)
   05. Band modifiers (padding, backgrounds)
   06. Type: eyebrow, headings, rich text
   07. Buttons and links
   08. Site header + mobile menu
   09. Site footer
   10. Back to top
   11. Home hero (fixed)                 home_hero
   12. Hero banner                       hero_banner
   13. Text + stats                      text_stats
   14. Statement                         statement
   15. Focus areas                       focus_areas
   16. News card (shared component)      news-card
   17. Latest news / related news        latest_news
   18. Member logos + member list        member_logos, member_list
   19. CTA band                          cta_band
   20. News grid (newsroom)              news_grid
   21. Article header (single)           article_header
   22. Content layouts                   text_1_col, text_image, image_block,
                                         quote_block, video_block
   23. Showcase label (pagebuilder.html only)
   24. Reduced motion
   ========================================================================== */


/* ==========================================================================
   01. Fonts
   ========================================================================== */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   02. Base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchors and keyboard focus stop below the sticky header (WCAG 2.4.11) */
	scroll-padding-top: calc(var(--sticky-height) + var(--space-s));
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-light);
	line-height: var(--lh-body);
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.menu-open {
	overflow: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
	margin: 0;
}

a {
	color: inherit;
}

button {
	font: inherit;
}

[hidden],
html [hidden] {
	display: none;
}


/* ==========================================================================
   03. Accessibility helpers
   ========================================================================== */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: var(--space-s);
	left: var(--space-s);
	z-index: 100;
	padding: var(--space-xs) var(--space-s);
	background: var(--lime);
	color: var(--navy);
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.bg-navy :focus-visible,
.bg-ink :focus-visible,
.bg-teal :focus-visible,
.bg-image :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.home-hero :focus-visible,
.mobile-menu :focus-visible {
	outline-color: var(--focus-ring-color-on-dark);
}


/* ==========================================================================
   04. Grid
   .columns = full-width band, content centered to --content-width
   .column  = cell; .m1-.m12 all sizes, .t1-.t12 768px+, .d1-.d12 992px+
   ========================================================================== */
.columns {
	--span: 12;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--gutter);
	padding-inline: max(var(--page-margin), calc((100% - var(--content-width)) / 2));
	/* Layouts tune their desktop padding with --pad-top / --pad-bottom (values
	   measured from the XD); .no-top-padding etc. still override it. */
	padding-block: var(--pad-top, var(--space-section)) var(--pad-bottom, var(--space-section));
}

.column {
	--span: 12;
	width: calc((100% - 11 * var(--gutter)) / 12 * var(--span) + (var(--span) - 1) * var(--gutter));
	min-width: 0;
}

.m1 { --span: 1; } .m2 { --span: 2; } .m3 { --span: 3; } .m4 { --span: 4; }
.m5 { --span: 5; } .m6 { --span: 6; } .m7 { --span: 7; } .m8 { --span: 8; }
.m9 { --span: 9; } .m10 { --span: 10; } .m11 { --span: 11; } .m12 { --span: 12; }

@media (min-width: 768px) {
	.t1 { --span: 1; } .t2 { --span: 2; } .t3 { --span: 3; } .t4 { --span: 4; }
	.t5 { --span: 5; } .t6 { --span: 6; } .t7 { --span: 7; } .t8 { --span: 8; }
	.t9 { --span: 9; } .t10 { --span: 10; } .t11 { --span: 11; } .t12 { --span: 12; }
}

@media (min-width: 992px) {
	.d1 { --span: 1; } .d2 { --span: 2; } .d3 { --span: 3; } .d4 { --span: 4; }
	.d5 { --span: 5; } .d6 { --span: 6; } .d7 { --span: 7; } .d8 { --span: 8; }
	.d9 { --span: 9; } .d10 { --span: 10; } .d11 { --span: 11; } .d12 { --span: 12; }
}


/* ==========================================================================
   05. Band modifiers
   ========================================================================== */
.no-top-padding { padding-top: 0; }
.no-bottom-padding { padding-bottom: 0; }
.no-top-bottom-padding { padding-block: 0; }
.tall-padding {
	--pad-top: var(--space-section-tall);
	--pad-bottom: var(--space-section-tall);
}

.bg-white { background-color: var(--white); }
.bg-lightgray { background-color: var(--lightgray); }

.bg-navy,
.bg-navy-pattern,
.bg-ink,
.bg-teal,
.bg-image {
	color: var(--white);
}

.bg-navy { background-color: var(--navy); }
.bg-ink { background-color: var(--ink); }
.bg-teal { background-color: var(--teal); }

.bg-navy-pattern {
	background: var(--navy) var(--pattern-logomark) var(--pattern-offset) / var(--pattern-size) repeat;
}


/* ==========================================================================
   06. Type
   ========================================================================== */
.eyebrow {
	margin-bottom: var(--space-eyebrow);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--teal-text);
}

.bg-navy .eyebrow,
.bg-navy-pattern .eyebrow,
.bg-ink .eyebrow,
.bg-image .eyebrow {
	color: var(--lime);
}

.section-title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-regular);
	line-height: var(--lh-h2);
	color: var(--navy);
}

.bg-navy .section-title,
.bg-navy-pattern .section-title,
.bg-ink .section-title,
.bg-image .section-title {
	color: var(--white);
}

.card-title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-h3);
	color: var(--navy);
}

.bg-ink .card-title {
	color: var(--white);
}

/* Rich text (WYSIWYG output) */
.rich-text > * + * {
	margin-top: var(--space-paragraph);
}

.rich-text h2 {
	font-size: var(--fs-h2);
	font-weight: var(--fw-regular);
	line-height: var(--lh-h2);
	color: var(--navy);
}

.rich-text h3 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	line-height: var(--lh-h3);
	color: var(--navy);
}

.rich-text h4 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body);
	color: var(--navy);
}

.rich-text * + h2,
.rich-text * + h3,
.rich-text * + h4 {
	margin-top: var(--space-2xl);
}

.rich-text h2 + *,
.rich-text h3 + *,
.rich-text h4 + * {
	margin-top: var(--space-s);
}

.rich-text ul,
.rich-text ol {
	padding-left: 1.25em;
}

.rich-text li + li {
	margin-top: var(--space-xs);
}

.rich-text ul li::marker {
	color: var(--teal-text);
}

.rich-text ol li::marker {
	font-weight: var(--fw-bold);
	color: var(--navy);
}

.rich-text strong {
	font-weight: var(--fw-bold);
}

.rich-text a {
	color: var(--navy);
	font-weight: var(--fw-regular);
	text-decoration-color: var(--teal-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness var(--motion-fast) var(--motion-ease);
}

.rich-text a:hover {
	text-decoration-thickness: 2px;
}

.bg-navy .rich-text a,
.bg-navy-pattern .rich-text a,
.bg-ink .rich-text a,
.bg-image .rich-text a {
	color: var(--white);
	text-decoration-color: var(--lime);
}

.lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}


/* ==========================================================================
   07. Buttons and links
   .button             outline (default): navy border on light, lime on dark
   .button.is-solid    solid lime, navy text
   .text-link          uppercase label with a lime underline ("All news")
   ========================================================================== */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--button-height);
	/* letter-spacing adds space after the last letter: take it off the right
	   padding so the label is optically centered (XD button widths) */
	padding: 0 calc(var(--button-padding-inline) - var(--ls-label)) 0 var(--button-padding-inline);
	border: var(--border-width) solid var(--lime);
	background: transparent;
	color: var(--navy);
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--motion-fast) var(--motion-ease),
		color var(--motion-fast) var(--motion-ease),
		border-color var(--motion-fast) var(--motion-ease);
}

.button:hover {
	background: var(--navy);
	color: var(--white);
	border-color: var(--navy);
}

.bg-navy .button,
.bg-navy-pattern .button,
.bg-ink .button,
.bg-image .button,
.home-hero .button {
	border-color: var(--lime);
	color: var(--white);
}

.bg-navy .button:hover,
.bg-navy-pattern .button:hover,
.bg-ink .button:hover,
.bg-image .button:hover,
.home-hero .button:hover {
	background: var(--lime);
	color: var(--navy);
}

.button.is-solid,
.bg-navy .button.is-solid,
.bg-navy-pattern .button.is-solid,
.bg-ink .button.is-solid,
.bg-image .button.is-solid,
.home-hero .button.is-solid {
	border-color: var(--lime);
	background: var(--lime);
	color: var(--navy);
}

.button.is-solid:hover,
.bg-navy .button.is-solid:hover,
.bg-navy-pattern .button.is-solid:hover,
.bg-ink .button.is-solid:hover,
.bg-image .button.is-solid:hover,
.home-hero .button.is-solid:hover {
	border-color: var(--white);
	background: var(--white);
	color: var(--navy);
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-m);
}

.text-link {
	display: inline-block;
	padding-bottom: var(--space-xs);
	border-bottom: var(--border-width) solid var(--lime);
	color: var(--navy);
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

.bg-navy .text-link,
.bg-navy-pattern .text-link,
.bg-ink .text-link {
	color: var(--white);
}

.text-link:hover {
	border-bottom-width: 2px;
	padding-bottom: calc(var(--space-xs) - 1px);
}

.bg-ink .text-link:hover,
.bg-navy .text-link:hover,
.bg-navy-pattern .text-link:hover {
	color: var(--lime);
}

.back-link::before {
	content: "\2190\00a0\00a0";
}


/* ==========================================================================
   08. Site header + mobile menu
   Sits over the dark hero / banner on every page (white logo and nav).
   Below 992px the nav collapses into a full-screen navy menu.
   ========================================================================== */
.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gutter);
	padding: var(--space-l) max(var(--page-margin), calc((100% - var(--content-width)) / 2)) 0;
	color: var(--white);
}

.site-header .logo {
	display: block;
	width: var(--logo-width);
}

.site-header .logo img {
	width: 100%;
}

/* Two logos: white over the hero, full color on the white sticky bar */
.site-header .logo .logo-color {
	display: none;
}

.site-header .desktop-nav {
	display: none;
}

.nav-list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.desktop-nav .nav-list {
	gap: 1.74rem;
	margin-right: -0.1625rem; /* trailing letter-spacing of the last link */
}

.nav-list a {
	display: inline-block;
	padding-block: var(--space-xs);
	font-size: var(--fs-nav);
	font-weight: var(--fw-bold);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	text-decoration: none;
	background: linear-gradient(var(--lime), var(--lime)) left bottom / 0 2px no-repeat;
	transition: background-size var(--motion-base) var(--motion-ease);
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
	background-size: 100% 2px;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 2.75rem;
	padding: 0 var(--space-xs);
	border: 0;
	background: transparent;
	color: var(--white);
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	cursor: pointer;
}

.menu-toggle svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* Open: the navy panel wipes down from the top with an angled leading edge,
   then the logo, links and contact fade up one after another.
   Close: the content fades out, then the panel wipes back up.
   scripts.js adds .is-open (and sets [hidden] after the close transition).
   Under prefers-reduced-motion the motion tokens are 0, so it opens instantly. */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	padding: var(--space-l) var(--page-margin) var(--space-2xl);
	overflow-y: auto;
	color: var(--white);
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	transition: clip-path var(--motion-base) var(--motion-ease) var(--motion-fast);
}

.mobile-menu.is-open {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% + 6rem), 0 100%);
	transition: clip-path var(--motion-slow) var(--motion-ease);
}

.mobile-menu .menu-top,
.mobile-menu .nav-list li,
.mobile-menu .menu-contact {
	opacity: 0;
	transition:
		opacity var(--motion-fast) linear,
		transform var(--motion-base) var(--motion-ease);
}

.mobile-menu .nav-list li,
.mobile-menu .menu-contact {
	transform: translateY(1rem);
}

.mobile-menu.is-open .menu-top,
.mobile-menu.is-open .nav-list li,
.mobile-menu.is-open .menu-contact {
	opacity: 1;
	transform: none;
	transition-duration: var(--motion-base), var(--motion-slow);
	transition-delay: calc(var(--motion-base) + var(--i, 0) * var(--motion-stagger));
}

.mobile-menu .nav-list li:nth-child(1) { --i: 1; }
.mobile-menu .nav-list li:nth-child(2) { --i: 2; }
.mobile-menu .nav-list li:nth-child(3) { --i: 3; }
.mobile-menu .nav-list li:nth-child(4) { --i: 4; }
.mobile-menu .nav-list li:nth-child(5) { --i: 5; }
.mobile-menu .nav-list li:nth-child(6) { --i: 6; }
.mobile-menu .menu-contact { --i: 7; }

.mobile-menu .menu-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-menu .nav-list {
	flex-direction: column;
	gap: var(--space-s);
	margin-top: var(--space-3xl);
}

.mobile-menu .nav-list a {
	font-size: var(--fs-nav-mobile);
	letter-spacing: 0.08em;
}

.mobile-menu .menu-contact {
	margin-top: auto;
	padding-top: var(--space-2xl);
	border-top: var(--border-width) solid var(--rule-footer);
	font-size: var(--fs-small);
	letter-spacing: var(--ls-small);
}

/* Sticky header (XD "Component 1 - 2"): a little after the page scrolls
   past the header, it comes back as a white bar fixed to the top (slides and
   fades in after a short pause), with the full-color logo, ink nav and a
   soft shadow; scrolling back up slides it out before the header returns
   over the hero. scripts.js adds .is-sticky, then .is-shown; no motion under
   prefers-reduced-motion. */
.site-header.is-sticky {
	position: fixed;
	min-height: var(--sticky-height);
	padding-top: 0;
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--shadow-sticky);
	opacity: 0;
	transform: translateY(-100%);
	/* leaving: quick slide up and fade */
	transition:
		transform var(--motion-sticky-out) cubic-bezier(0.4, 0, 1, 1),
		opacity var(--motion-sticky-out) linear;
}

.site-header.is-sticky.is-shown {
	opacity: 1;
	transform: none;
	/* arriving: short pause, then a soft slide and fade */
	transition:
		transform var(--motion-sticky-in) var(--motion-ease) var(--motion-sticky-delay),
		opacity calc(var(--motion-sticky-in) * 0.6) linear var(--motion-sticky-delay);
}

/* Set while the bar is placed above the viewport, so it starts hidden
   instead of transitioning from the header's resting state. */
.site-header.is-sticky.is-placing {
	transition: none;
}

.site-header.is-sticky .logo {
	width: var(--sticky-logo-width);
}

.site-header.is-sticky .logo .logo-white {
	display: none;
}

.site-header.is-sticky .logo .logo-color {
	display: block;
}

.site-header.is-sticky .menu-toggle {
	color: var(--ink);
}

/* Current page / hover underline: teal on the white bar (lime is too pale) */
.site-header.is-sticky .nav-list a {
	background-image: linear-gradient(var(--teal), var(--teal));
}

.site-header.is-sticky :focus-visible {
	outline-color: var(--focus-ring-color);
}

@media (min-width: 992px) {
	.site-header {
		padding-top: 4.25rem; /* 68px: logo top in the XD */
	}

	.site-header.is-sticky {
		padding-top: 0;
	}

	.site-header .desktop-nav {
		display: block;
	}

	.menu-toggle,
	.mobile-menu {
		display: none;
	}
}


/* ==========================================================================
   09. Site footer
   ========================================================================== */
.site-footer {
	padding-block: var(--space-3xl) var(--space-2xl);
}

.site-footer .footer-top {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	width: 100%;
	padding-bottom: var(--space-xl);
	border-bottom: var(--border-width) solid var(--rule-footer);
}

.site-footer .logo {
	display: block;
	width: var(--logo-width);
}

.site-footer .nav-list {
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-l);
}

.site-footer .footer-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	width: 100%;
	padding-top: var(--space-l);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	letter-spacing: var(--ls-small);
}

.site-footer .footer-contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-2xl);
	margin: 0;
	font-style: normal;
}

.site-footer .footer-contact a:hover,
.site-footer .credit a:hover {
	color: var(--lime);
}

.site-footer .footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-l);
}

@media (min-width: 992px) {
	/* XD at 1400: logo top 84px, rule 200px, bottom line baseline 234px,
	   85px under it */
	.site-footer {
		padding-block: 5.0625rem 5rem;
	}

	.site-footer .footer-top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 4.25rem;
	}

	.site-footer nav {
		margin-top: 0.9375rem; /* nav baseline 35px below the logo top (XD) */
	}

	.site-footer .nav-list {
		gap: 1.74rem;
		margin-right: -0.1625rem;
	}

	.site-footer .footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		padding-top: 1.25rem;
	}
}


/* ==========================================================================
   10. Back to top
   ========================================================================== */
.back-to-top {
	position: fixed;
	right: var(--space-l);
	bottom: var(--space-l);
	z-index: 30;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: var(--lime);
	color: var(--navy);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--motion-base) var(--motion-ease), visibility var(--motion-base);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.back-to-top:hover {
	background: var(--white);
}

.back-to-top:focus-visible {
	outline-color: var(--navy);
}

.back-to-top svg {
	width: 1.25rem;
	height: 1.25rem;
}


/* ==========================================================================
   11. Home hero (fixed: template-home.php)
   Background video + 70% navy overlay, two-tone uppercase H1, intro, buttons.
   ========================================================================== */
.home-hero {
	position: relative;
	isolation: isolate;
	align-content: end;
	min-height: 40rem;
	padding-top: calc(var(--header-height) + var(--space-3xl));
	padding-bottom: var(--space-3xl);
	overflow: hidden;
	background: var(--navy);
	color: var(--white);
}

.home-hero .hero-media,
.home-hero .hero-media video,
.home-hero .hero-media img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--overlay-hero);
}

.home-hero h1 {
	font-size: var(--fs-hero);
	font-weight: var(--fw-light);
	line-height: var(--lh-hero);
	text-transform: uppercase;
}

.home-hero h1 strong {
	font-weight: var(--fw-black);
}

.home-hero .hero-intro {
	margin-top: var(--space-l);
}

.home-hero .button-group {
	margin-top: var(--space-xl);
}

.home-hero .video-toggle {
	position: absolute;
	right: max(var(--page-margin), calc((100% - var(--content-width)) / 2));
	bottom: var(--space-l);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: var(--border-width) solid var(--lime);
	border-radius: 50%;
	background: rgb(0 58 112 / 0.6);
	color: var(--white);
	cursor: pointer;
}

.home-hero .video-toggle:hover {
	background: var(--lime);
	color: var(--navy);
}

.home-hero .video-toggle svg {
	width: 1rem;
	height: 1rem;
}

.home-hero .video-toggle .icon-play,
.home-hero .video-toggle.is-paused .icon-pause {
	display: none;
}

.home-hero .video-toggle.is-paused .icon-play {
	display: block;
}

@media (min-width: 992px) {
	.home-hero {
		min-height: 34.25rem; /* 548px */
		padding-top: var(--header-height);
		padding-bottom: 4.875rem; /* 78px */
	}

	.home-hero .hero-intro {
		margin-top: 0.9375rem; /* intro baseline 22px below the H1 first baseline */
	}

	.home-hero .button-group {
		column-gap: 1.125rem; /* 18px */
		margin-top: 2.3125rem;
	}
}


/* ==========================================================================
   12. Hero banner (layout: hero_banner: default pages and the newsroom)
   Background options: navy logomark pattern (.bg-navy-pattern, default)
   or a photo under the 70% navy hero overlay (.bg-image.has-photo).
   Fields: eyebrow (optional), title (bold words for the two-tone style),
   intro (optional), up to two buttons (optional).
   ========================================================================== */
.hero-banner {
	position: relative;
	isolation: isolate;
	align-content: end;
	min-height: 25rem;
	padding-top: calc(var(--header-height) + var(--space-2xl));
	padding-bottom: var(--space-3xl);
	overflow: hidden;
}

.hero-banner.has-photo {
	background-color: var(--navy);
}

.hero-banner .bg-photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-banner.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--overlay-hero);
}

.hero-banner h1,
.hero-banner .h1-style {
	font-size: var(--fs-hero);
	font-weight: var(--fw-light);
	line-height: var(--lh-hero);
	text-transform: uppercase;
}

.hero-banner h1 strong,
.hero-banner .h1-style strong {
	font-weight: var(--fw-black);
}

.hero-banner .banner-intro {
	margin-top: var(--space-m);
}

.hero-banner .button-group {
	margin-top: var(--space-xl);
}

@media (min-width: 992px) {
	.hero-banner {
		min-height: 28.75rem; /* 460px */
		padding-top: var(--header-height);
		padding-bottom: 5.5rem;
	}

	.hero-banner .banner-intro {
		align-self: end;
		margin-top: 0;
		padding-bottom: 0.75rem;
	}
}


/* ==========================================================================
   13. Text + stats (layout: text_stats)
   Text left; teal panel of stats right with two cut corners.
   ========================================================================== */
.text-stats .text-col > .rich-text {
	margin-top: var(--space-m);
}

.text-stats .text-col > .button {
	margin-top: var(--space-2xl);
}

.text-stats .stats-panel {
	margin-top: var(--space-3xl);
	padding: var(--space-3xl) var(--space-xl);
	background: var(--teal);
	color: var(--white);
	clip-path: polygon(
		0 0,
		calc(100% - var(--corner-l-w)) 0,
		100% var(--corner-l-h),
		100% 100%,
		var(--corner-l-w) 100%,
		0 calc(100% - var(--corner-l-h))
	);
}

.text-stats .stats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.text-stats .stat {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xs);
	padding-block: var(--space-xl);
	border-top: var(--border-width) solid var(--lime);
}

.text-stats .stat:first-child {
	padding-top: 0;
	border-top: 0;
}

.text-stats .stat:last-child {
	padding-bottom: 0;
}

.text-stats .number {
	font-size: var(--fs-stat);
	font-weight: var(--fw-thin);
	line-height: 1;
	white-space: nowrap;
}

.text-stats .number .unit {
	font-size: var(--fs-stat-unit);
	vertical-align: var(--stat-unit-shift);
}

@media (min-width: 576px) {
	.text-stats .stat {
		grid-template-columns: 11.5rem minmax(0, 1fr);
		align-items: center;
		gap: var(--space-l);
	}
}

/* XD at 1400: eyebrow baseline 100px from the band top, H2 55px below it,
   panel top 87px, band ends 102px under the panel */
@media (min-width: 992px) {
	.text-stats {
		--pad-top: 5.375rem;
		--pad-bottom: 6.375rem;
		align-items: start;
	}

	.text-stats .text-col > .eyebrow {
		margin-bottom: 1.0625rem;
	}

	.text-stats .text-col > .rich-text {
		margin-top: 1.0625rem;
	}

	.text-stats .text-col > .button {
		margin-top: 1.9375rem;
	}

	.text-stats .stats-panel {
		margin-top: 0.0625rem; /* panel top 1px below the eyebrow line box */
		padding: 5.5rem var(--space-xl) 5.25rem;
	}

	.text-stats .stat {
		grid-template-columns: 45% minmax(0, 1fr);
		gap: var(--space-s);
		padding-block: 2rem;
	}

	.text-stats .number {
		line-height: var(--lh-stat);
	}
}

/* XD at 1400: rules inset 58px, numbers 45px in from the rules, labels 251px in */
@media (min-width: 1400px) {
	.text-stats .stats-panel {
		padding-inline: 3.625rem;
	}

	.text-stats .stat {
		grid-template-columns: 15.6875rem minmax(0, 1fr);
		gap: 0;
	}

	.text-stats .number {
		padding-left: var(--gutter);
	}
}


/* ==========================================================================
   14. Statement (layout: statement)
   ========================================================================== */
.statement .statement-text {
	font-size: var(--fs-h2);
	font-weight: var(--fw-regular);
	line-height: var(--lh-h2);
}

/* XD at 1400 (band 472px): eyebrow baseline 126px from the top, statement
   baseline 74px below it, 143px from the last baseline to the bottom */
@media (min-width: 992px) {
	.statement.tall-padding {
		--pad-top: calc(var(--space-section-tall) - 1rem);
		--pad-bottom: calc(var(--space-section-tall) + 0.3125rem);
	}

	.statement .eyebrow {
		margin-bottom: 2.25rem;
	}
}


/* ==========================================================================
   15. Focus areas (layout: focus_areas)
   Gray band behind the intro that ends --focus-split into the card images.
   ========================================================================== */
.focus-areas {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--white);
}

.focus-areas .intro-text {
	margin-top: var(--space-m);
}

.focus-areas .cards {
	position: relative;
	display: grid;
	align-items: start;
	gap: var(--space-3xl) var(--gutter);
	margin: var(--space-3xl) 0 0;
	padding: 0;
	list-style: none;
}

.focus-areas .cards::before {
	content: "";
	position: absolute;
	inset: -100vh -100vw auto;
	z-index: -1;
	height: calc(100vh + var(--focus-split));
	background: var(--lightgray);
}

.focus-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.focus-card .image {
	position: relative;
	width: 100%;
	aspect-ratio: 264 / 221;
}

.focus-card .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.focus-card .badge {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--corner-s-w);
	height: var(--corner-s-h);
	padding: 0.3rem 0 0 0.75rem;
	background: var(--badge-1);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	color: var(--white);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	line-height: var(--lh-label);
}

.focus-card .card-title {
	margin-top: var(--space-xl);
	padding-bottom: var(--space-l);
	width: 100%;
	border-bottom: var(--rule-accent-width) solid var(--rule-1);
}

.focus-card p {
	margin-top: var(--space-m);
}

.focus-card .explore-toggle {
	margin-top: var(--space-xl);
}

.focus-card .explore-toggle .icon {
	margin-left: 0.75rem;
	width: 0.625rem;
	height: 0.625rem;
	stroke: currentColor;
	stroke-width: 2;
}

.focus-card .explore-toggle .v {
	transition: transform var(--motion-base) var(--motion-ease);
	transform-origin: center;
}

.focus-card .explore-toggle[aria-expanded="true"] {
	background: var(--navy);
	color: var(--white);
}

.focus-card .explore-toggle[aria-expanded="true"] .v {
	transform: scaleY(0);
}

/* Details panel: open by default (no JS); scripts.js closes it and
   animates height with the grid-rows technique. */
.focus-card .focus-details {
	display: grid;
	grid-template-rows: 1fr;
	width: 100%;
	transition: grid-template-rows var(--motion-base) var(--motion-ease);
}

.focus-card .focus-details.is-collapsed {
	grid-template-rows: 0fr;
}

.focus-card .details-inner {
	min-height: 0;
	overflow: hidden;
}

.focus-card .details-inner > :first-child {
	margin-top: var(--space-l);
}

.focus-card .focus-details.is-collapsed .details-inner {
	visibility: hidden;
	transition: visibility 0s var(--motion-base);
}

.focus-card:nth-child(2) .badge { background: var(--badge-2); }
.focus-card:nth-child(3) .badge { background: var(--badge-3); }
.focus-card:nth-child(4) .badge { background: var(--badge-4); }
.focus-card:nth-child(2) .card-title { border-color: var(--rule-2); }
.focus-card:nth-child(3) .card-title { border-color: var(--rule-3); }
.focus-card:nth-child(4) .card-title { border-color: var(--rule-4); }

@media (min-width: 768px) {
	.focus-areas .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* XD at 1400: eyebrow baseline 100px from the band top; images 87px under
   the H2; rule 33px under the title; band 918px tall */
@media (min-width: 992px) {
	.focus-areas {
		--pad-top: 5.375rem;
		--pad-bottom: 3.6875rem;
	}

	.focus-areas .intro-text {
		max-width: 21.875rem; /* 350px text box in the XD */
		margin-top: 0.25rem;
	}

	.focus-areas .cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 4.8125rem;
	}

	.focus-card .card-title {
		min-height: calc(2 * var(--lh-h3) * var(--fs-h3) + 1.625rem + var(--rule-accent-width));
		padding-bottom: 1.625rem;
	}

	.focus-card p {
		margin-top: 1rem;
	}

	.focus-card .explore-toggle {
		margin-top: 2.1875rem;
	}
}


/* XD text boxes in the 264px cards: titles 208px, summaries 261px */
@media (min-width: 1200px) {
	.focus-card .card-title {
		padding-right: calc(100% - 13rem);
	}

	.focus-card > p {
		max-width: 16.3125rem;
	}
}


/* ==========================================================================
   16. News card (shared by latest_news, related news and news_grid)
   Image with a cut top-left corner, category / date, title, Read more.
   ========================================================================== */
.news-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.news-card .image {
	width: 100%;
	aspect-ratio: 367 / 221;
	overflow: hidden;
	clip-path: polygon(var(--corner-s-w) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corner-s-h));
}

.news-card .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--motion-slow) var(--motion-ease);
}

.news-card:hover .image img {
	transform: scale(1.04);
}

.news-card .meta {
	margin-top: var(--space-xl);
	font-size: var(--fs-meta);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.news-card .meta .sep {
	padding-inline: 0.35em;
}

.news-card .card-title {
	margin-top: var(--space-s);
}

.news-card .card-title a {
	text-decoration: none;
}

.news-card .card-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--lime);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.news-card .button {
	margin-top: var(--space-l);
}


/* ==========================================================================
   17. Latest news (layout: latest_news; also "Related news" on single)
   ========================================================================== */
.latest-news .header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-l) var(--gutter);
}

.latest-news .cards {
	display: grid;
	gap: var(--space-3xl) var(--gutter);
	margin: var(--space-2xl) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.latest-news .cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* XD at 1400: eyebrow baseline 93px from the band top, images 54px under the
   H2 baseline, band ends 110px under the lowest button */
@media (min-width: 992px) {
	.latest-news {
		--pad-top: 5rem;
		--pad-bottom: 6.875rem;
	}

	.latest-news .header-row .text-link {
		margin-bottom: 0.75rem;
		padding-bottom: 0.3125rem;
	}

	.latest-news .cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: 2.75rem;
	}

	.news-card .button {
		margin-top: 1.625rem;
	}
}


/* ==========================================================================
   18. Member logos (layout: member_logos)
   ========================================================================== */
/* Optional button ("View all members") in its own d4 column */
.member-logos .header-action {
	margin-top: var(--space-l);
}

.member-logos .logos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xl) var(--gutter);
	align-items: center;
	margin: var(--space-3xl) 0 0;
	padding: 0;
	list-style: none;
}

/* Each logo sits in a 64px-tall cell, vertically centered. The width / height
   attributes set its size: equal visual area for every logo (about 5000px²),
   capped at 160 x 60, so wide wordmarks and stacked marks read at the same
   weight. Narrow cells scale a logo down, keeping its proportions. */
.member-logos .logos li {
	display: flex;
	align-items: center;
	min-height: 4rem;
	justify-content: center;
}

.member-logos .logos a {
	display: block;
	transition: transform var(--motion-base) var(--motion-ease);
}

.member-logos .logos a:hover {
	transform: scale(1.05);
}

.member-logos .logos img {
	max-width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.member-logos .logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* XD at 1400: eyebrow baseline 108px from the band top; button top 11px
   below the eyebrow line box, at column 9; logos 105px under the H2
   baseline, rows 114px apart; band ends 120px under the last row */
@media (min-width: 992px) {
	.member-logos {
		--pad-top: 5.875rem;
		--pad-bottom: 6.75rem; /* 120px under a 40px logo = 108px under the 64px cell */
	}

	.member-logos .header-action {
		margin-top: 0.6875rem;
	}

	.member-logos .logos {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		row-gap: 3.125rem; /* 64px cells, 114px apart as in the XD */
	}
}


.member-logos .intro-text {
	margin-top: var(--space-m);
}

.member-logos .column + .column .logos {
	margin-top: var(--space-2xl);
}

@media (min-width: 992px) {
	.member-logos .column + .column .logos {
		margin-top: 5.25rem; /* logo centers line up with the XD's 40px logos */
	}
}

/* member_list: names only, in columns (members without logos) */
.member-list .names {
	columns: 1;
	column-gap: var(--gutter);
	margin: var(--space-2xl) 0 0;
	padding: 0;
	list-style: none;
}

.member-list .names li {
	break-inside: avoid;
	padding-block: var(--space-s);
	border-top: var(--border-width) solid var(--rule-subtle);
	font-weight: var(--fw-regular);
	color: var(--navy);
}

.member-list.text-color-white .names li {
	border-top-color: var(--rule-footer);
	color: var(--white);
}

@media (min-width: 768px) {
	.member-list .names {
		columns: 2;
	}
}

@media (min-width: 992px) {
	.member-list .names {
		columns: 3;
	}
}


/* ==========================================================================
   19. CTA band (layout: cta_band)
   Photo with a navy gradient that holds behind the text column.
   ========================================================================== */
.cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--navy);
}

.cta-band .bg-photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gradient-cta-mobile);
}

.cta-band .rich-text {
	margin-top: var(--space-m);
}

.cta-band .button {
	margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
	.cta-band::before {
		background: var(--gradient-cta);
	}
}

/* XD at 1400: eyebrow baseline 130px from the band top, body 58px under the
   H2, band ends 117px under the button */
@media (min-width: 992px) {
	.cta-band {
		--pad-top: 7.25rem;
		--pad-bottom: 7.3125rem;
	}

	.cta-band .rich-text {
		margin-top: 1.8125rem;
	}

	.cta-band .button {
		margin-top: 2.75rem;
	}
}


/* ==========================================================================
   20. News grid (newsroom: template for the posts page)
   Category filter + Isotope grid + Load more. Without JS every post shows.
   ========================================================================== */
.news-grid .filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s) var(--space-l);
	width: 100%;
	padding-bottom: var(--space-xl);
	border-bottom: var(--border-width) solid var(--lightgray);
}

.news-grid .filter-label {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--teal-text);
}

.news-grid .filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-grid .filters .button[aria-pressed="true"] {
	border-color: var(--lime);
	background: var(--lime);
	color: var(--navy);
}

.news-grid .results-status {
	width: 100%;
	margin-top: var(--space-l);
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-small);
}

.news-grid .cards {
	--cols: 1;
	width: 100%;
	margin: var(--space-2xl) 0 0;
	padding: 0;
	list-style: none;
}

/* Without JS (or before Isotope runs) the list is a CSS grid */
.news-grid .cards:not(.is-isotope) {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--space-3xl) var(--gutter);
}

.news-grid .cards.is-isotope .news-item {
	width: calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));
	margin-bottom: var(--space-3xl);
}

.news-grid .cards .gutter-sizer {
	width: var(--gutter);
}

.news-grid .cards:not(.is-isotope) .gutter-sizer {
	display: none;
}

.news-grid .load-more-wrap[hidden],
.news-grid .filter-bar[hidden] {
	display: none;
}

.news-grid .load-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var(--space-l);
}

.news-grid .empty-message {
	width: 100%;
	margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
	.news-grid .cards {
		--cols: 2;
	}
}

@media (min-width: 992px) {
	.news-grid .cards {
		--cols: 3;
	}
}


/* ==========================================================================
   21. Article header (single.php)
   Navy pattern banner with back link, category / date and title; the
   featured image overlaps the banner's bottom edge.
   ========================================================================== */
.article-header {
	padding-top: calc(var(--header-height) + var(--space-xl));
	padding-bottom: 7rem;
}

.article-header .back-link {
	margin-bottom: var(--space-2xl);
}

.article-header .meta {
	font-size: var(--fs-meta);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--lime);
}

.article-header .meta .sep {
	padding-inline: 0.35em;
}

.article-header h1 {
	margin-top: var(--space-m);
	font-size: var(--fs-h1);
	font-weight: var(--fw-regular);
	line-height: var(--lh-h1);
}

.article-image {
	padding-block: 0;
}

.article-image figure {
	margin-top: -5rem;
}

.article-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	clip-path: polygon(var(--corner-s-w) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corner-s-h));
}

@media (min-width: 768px) {
	.article-image img {
		clip-path: polygon(var(--corner-l-w) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corner-l-h));
	}
}

@media (min-width: 992px) {
	.article-header {
		padding-top: calc(var(--header-height) + var(--space-s));
		padding-bottom: 10rem;
	}

	.article-image figure {
		margin-top: -7rem;
	}
}


/* ==========================================================================
   22. Content layouts (standard pagebuilder, every page and post)
   text_1_col, text_image, text_2_col, text_3_col, text_1_3_2_3,
   image_block, quote_block, video_block.
   Each is a full-width band like every other layout, with the standard
   section settings (background_color, section_id, padding_top/bottom).
   Content sits in a centered reading column (--reading-width); the width
   option "full" (.is-wide) uses the whole content width instead. The
   multi-column text layouts are always full width.
   ========================================================================== */
.layout-content .column {
	max-width: var(--reading-width);
	margin-inline: auto;
}

.layout-content.is-wide .column {
	max-width: none;
	margin-inline: 0;
}

/* Consecutive content layouts on the same background read as one column:
   the gap closes from two band paddings to 40px. (Browsers without :has
   keep the bottom padding; the page still reads correctly.) */
.layout-content.bg-white:has(+ .layout-content.bg-white),
.layout-content.bg-lightgray:has(+ .layout-content.bg-lightgray),
.layout-content.bg-navy-pattern:has(+ .layout-content.bg-navy-pattern),
.layout-content.bg-ink:has(+ .layout-content.bg-ink) {
	padding-bottom: 0;
}

.layout-content.bg-white + .layout-content.bg-white,
.layout-content.bg-lightgray + .layout-content.bg-lightgray,
.layout-content.bg-navy-pattern + .layout-content.bg-navy-pattern,
.layout-content.bg-ink + .layout-content.bg-ink {
	padding-top: var(--space-2xl);
}

/* Rich text on dark backgrounds */
.text-color-white .rich-text h2,
.text-color-white .rich-text h3,
.text-color-white .rich-text h4,
.text-color-white .section-title,
.text-color-white .card-title {
	color: var(--white);
}

.text-color-white .rich-text ul li::marker,
.text-color-white .rich-text ol li::marker {
	color: var(--lime);
}

.text-color-white .rich-text a {
	color: var(--white);
	text-decoration-color: var(--lime);
}

/* Captions */
.layout-content figcaption {
	margin-top: var(--space-xs);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

/* text_image: image left or right of text; stacks on phones */
.text-image .inner {
	display: grid;
	gap: var(--space-l);
}

.text-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 768px) {
	.text-image .inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--gutter);
	}

	.text-image.image-right .image {
		order: 2;
	}
}

/* text_2_col, text_3_col, text_1_3_2_3: one WYSIWYG field per column.
   2 columns from 768px; 3 columns and the 1/3 + 2/3 split from 992px
   (narrower would squeeze the text). Columns stack in source order, which
   is also the left-to-right order: the narrow-right option outputs the wide
   column first. */
.text-2-col,
.text-3-col,
.text-1-3-2-3 {
	align-items: flex-start;
	row-gap: var(--space-xl);
}

/* image_block (wide option crops to 16:9) */
.image-block img {
	width: 100%;
}

.image-block.is-wide img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* quote_block */
.quote-block .quote {
	padding: var(--space-xl) 0 var(--space-xl) var(--space-xl);
	border-left: var(--rule-accent-width) solid var(--lime);
}

.quote-block.bg-white .quote,
.quote-block.bg-lightgray .quote {
	border-left-color: var(--navy);
}

.quote-block blockquote p {
	font-size: var(--fs-h2);
	font-weight: var(--fw-light);
	line-height: var(--lh-h2);
	color: var(--navy);
}

.quote-block.text-color-white blockquote p {
	color: var(--white);
}

.quote-block figcaption {
	margin-top: var(--space-l);
	font-size: var(--fs-meta);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.quote-block figcaption strong {
	display: block;
	font-weight: var(--fw-bold);
	color: var(--navy);
}

.quote-block.text-color-white figcaption strong {
	color: var(--lime);
}

/* video_block: 16:9 embed */
.video-block .embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ink);
}

.video-block .embed iframe,
.video-block .embed .video-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-block .video-placeholder {
	display: grid;
	place-items: center;
	padding: var(--space-l);
	color: var(--white);
	font-size: var(--fs-meta);
	letter-spacing: var(--ls-label);
	text-align: center;
	text-transform: uppercase;
	background: var(--navy);
}

/* statement on light backgrounds: navy text (dark backgrounds stay white) */
.statement.bg-white .statement-text,
.statement.bg-lightgray .statement-text {
	color: var(--navy);
}


/* ==========================================================================
   23. Showcase label (pagebuilder.html only; not part of the theme)
   ========================================================================== */
.showcase-label {
	padding: var(--space-xs) max(var(--page-margin), calc((100% - var(--content-width)) / 2));
	background: var(--lime);
	color: var(--navy);
	font-size: var(--fs-meta);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}


/* ==========================================================================
   24. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	:root {
		--motion-fast: 0ms;
		--motion-base: 0ms;
		--motion-slow: 0ms;
		--motion-stagger: 0ms;
		--motion-sticky-in: 0ms;
		--motion-sticky-out: 0ms;
		--motion-sticky-delay: 0ms;
	}

	.news-card:hover .image img {
		transform: none;
	}
}

/* WordPress admin bar (logged-in users): keep the header below it */
.admin-bar {
	--admin-bar-height: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--admin-bar-height: 46px;
	}
}

.admin-bar .site-header,
.admin-bar .site-header.is-sticky {
	top: var(--admin-bar-height);
}

.admin-bar {
	scroll-padding-top: calc(var(--sticky-height) + var(--admin-bar-height) + var(--space-s));
}

/* Below 600px the admin bar scrolls away, so the sticky bar goes to the top */
@media (max-width: 600px) {
	.admin-bar .site-header.is-sticky {
		top: 0;
	}

	.admin-bar {
		scroll-padding-top: calc(var(--sticky-height) + var(--space-s));
	}
}