@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/roboto-condensed-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/roboto-slab-latin.woff2") format("woff2");
}

:root {
	--campaign-navy: #16325A;
	--campaign-blue: #16325A;
	--campaign-pale-blue: #ffffff;
	--campaign-paper: #ffffff;
	--campaign-coral: #D03330;
	--campaign-tan: #D03330;
	--campaign-ink: #0d0b01;
	--campaign-white: #fff;
	--campaign-line: rgba(22, 50, 90, 0.25);
	--campaign-content: 1280px;
	--campaign-reading: 640px;
	--campaign-gutter: clamp(2rem, 4.2vw, 4rem);
	--campaign-section: clamp(4rem, 7vw, 6rem);
	--campaign-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--campaign-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

html {
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	color: var(--campaign-ink);
	background: var(--campaign-paper);
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
}

body::after {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: block;
	pointer-events: none;
	content: "";
	border: 4px solid var(--campaign-white);
}

body.is-campaign-menu-open {
	overflow: hidden;
}

.wp-site-blocks {
	overflow: clip;
}

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

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--campaign-coral);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--campaign-coral);
	outline-offset: 3px;
}

::selection {
	color: var(--campaign-white);
	background: var(--campaign-blue);
}

.wp-block-group.alignfull,
.front-page > .wp-block-group {
	margin-block-start: 0;
}

.campaign-eyebrow,
.integration-slot__label,
.section-number,
.article-meta,
.archive-date,
.archive-item__meta,
.update-item__meta,
.site-footer__eyebrow {
	margin: 0 0 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	line-height: 1.35;
	text-transform: uppercase;
}

.campaign-eyebrow {
	color: var(--campaign-blue);
}

.editorial-heading {
	max-width: 12ch;
	margin: 0;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border: 1px solid transparent;
	transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease, transform 140ms ease;
}

.wp-block-button:not(.is-style-secondary):not(.is-style-tertiary):not(.is-style-outline) > .wp-block-button__link {
	color: var(--campaign-navy);
}

.wp-block-button__link:hover {
	color: var(--campaign-white);
	background: var(--campaign-navy);
}

.wp-block-button__link:active {
	transform: scale(0.97);
}

.wp-block-button.is-style-secondary > .wp-block-button__link {
	color: var(--campaign-navy);
	background: var(--campaign-pale-blue);
}

.wp-block-button.is-style-secondary > .wp-block-button__link:hover {
	color: var(--campaign-white);
	background: var(--campaign-blue);
}

.wp-block-button.is-style-tertiary > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: currentColor;
	background: transparent;
	border-color: currentColor;
}

.wp-block-button.is-style-tertiary > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--campaign-white);
	background: var(--campaign-navy);
	border-color: var(--campaign-navy);
}

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

.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	z-index: 1000000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	color: var(--campaign-white);
	background: var(--campaign-navy);
}

/* Header */
.site-header {
	position: relative;
	z-index: 100;
	margin: 0;
}

.site-navigation {
	color: var(--campaign-white);
	background: var(--campaign-navy);
}

.site-navigation__inner {
	width: min(calc(100% - 2 * var(--campaign-gutter)), var(--campaign-content));
	min-height: 60px;
	margin-inline: auto;
	gap: 1.5rem;
}

.site-brand {
	flex: 0 0 auto;
	margin: 0;
}

.site-brand__name {
	margin: 0;
	font-family: "Roboto Slab", Rockwell, Georgia, serif;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
}

.site-brand__name a {
	color: var(--campaign-white);
	text-decoration: none;
}

.site-brand__district {
	margin: 0.3rem 0 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
}

.primary-navigation {
	margin-left: auto;
}

.primary-navigation .wp-block-navigation__container {
	gap: clamp(0.9rem, 2vw, 1.65rem);
}

.primary-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0;
	color: var(--campaign-white);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.primary-navigation .wp-block-navigation-item__content:hover {
	color: var(--campaign-pale-blue);
}

.primary-navigation .current-menu-item > .wp-block-navigation-item__content,
.primary-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.42em;
}

.primary-navigation__socials {
	gap: 0.4rem;
	margin-left: 0.25rem;
}

.primary-navigation__socials:empty,
.footer-socials:empty {
	display: none;
}

.primary-navigation__socials .wp-social-link {
	color: var(--campaign-navy);
	background: var(--campaign-white);
}

.primary-navigation .mobile-menu-donate {
	display: none !important;
}

.header-actions {
	flex: 0 0 auto;
	margin: 0;
}

.header-donate .wp-block-button__link {
	min-width: 94px;
	min-height: 38px;
}

/* Hero */
.campaign-hero {
	padding: 0 var(--campaign-gutter) clamp(3rem, 5vw, 4.5rem);
}

.campaign-hero__grid {
	width: min(100%, var(--campaign-content));
	min-height: 620px;
	margin: 0 auto;
	gap: 0;
}

.campaign-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5.4vw, 5rem);
}

.campaign-hero__eyebrow {
	color: var(--campaign-pale-blue);
}

.campaign-hero__title {
	max-width: 9ch;
	margin: 0;
	font-size: clamp(3.25rem, 5.4vw, 4.5rem);
	font-weight: 650;
	letter-spacing: -0.055em;
	line-height: 0.98;
}

.campaign-hero__summary {
	max-width: 31rem;
	margin: 1.5rem 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	line-height: 1.55;
}

.campaign-hero__actions {
	margin-top: 1.75rem;
	gap: 0.65rem;
}

.campaign-hero__actions .is-style-tertiary > .wp-block-button__link {
	color: var(--campaign-white);
	border-color: rgba(255, 255, 255, 0.65);
}

.campaign-hero__actions .is-style-tertiary > .wp-block-button__link:hover {
	color: var(--campaign-navy);
	background: var(--campaign-white);
	border-color: var(--campaign-white);
}

.campaign-hero__media,
.campaign-hero__image,
.campaign-hero__image img,
.media-split__media,
.media-split__image,
.media-split__image img,
.organizing-split__media,
.organizing-split__image,
.organizing-split__image img {
	height: 100%;
}

.campaign-hero__image,
.media-split__image,
.organizing-split__image {
	margin: 0;
}

.campaign-hero__image img,
.media-split__image img,
.organizing-split__image img {
	width: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Editorial story */
.story-split {
	position: relative;
	z-index: 2;
	padding: var(--campaign-section) var(--campaign-gutter) 4rem;
}

.story-split__grid {
	width: min(100%, var(--campaign-content));
	margin-inline: auto;
	gap: clamp(3rem, 7vw, 7rem);
}

.story-split__heading {
	padding-top: 0.35rem;
}

.story-split__body {
	max-width: var(--campaign-reading);
}

.story-split__lead {
	margin-top: 0;
	font-family: "Roboto Slab", Rockwell, Georgia, serif;
	font-size: clamp(1.4rem, 2.15vw, 1.875rem);
	font-weight: 500;
	line-height: 1.38;
}

.story-split__body > p:not(.story-split__lead) {
	max-width: 38rem;
}

.story-split__body .wp-block-buttons {
	margin-top: 1.5rem;
}

.story-split__accent {
	position: relative;
	z-index: 2;
	width: min(100%, 470px);
	min-height: 96px;
	margin: 2rem 0 -7rem auto;
	padding: 1.5rem 2rem;
	transform: translateX(2rem);
}

.story-split__accent p {
	margin: 0;
	color: var(--campaign-navy);
	font-family: "Roboto Slab", Rockwell, Georgia, serif;
	font-size: 1.125rem;
	font-weight: 600;
}

/* Accent callout */
.accent-callout {
	padding: 8rem var(--campaign-gutter) 5rem;
}

.accent-callout__inner {
	width: min(100%, var(--campaign-content));
	margin-inline: auto;
	gap: 2rem;
}

.accent-callout__index {
	flex: 0 0 18%;
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.accent-callout__title {
	flex: 1 1 50%;
	max-width: 16ch;
	margin: 0;
	font-size: clamp(2.25rem, 4.2vw, 3.75rem);
	letter-spacing: -0.04em;
	line-height: 1.06;
}

/* Media split */
.media-split {
	padding: var(--campaign-section) var(--campaign-gutter);
	background: var(--campaign-paper);
}

.media-split__grid,
.organizing-split__grid {
	width: min(100%, var(--campaign-content));
	margin-inline: auto;
	gap: 0;
}

.media-split__grid {
	min-height: 560px;
}

.media-split__copy,
.organizing-split__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 6vw, 5rem);
}

.media-split__copy > p:not(.campaign-eyebrow),
.organizing-split__copy > p:not(.campaign-eyebrow) {
	max-width: 33rem;
}

.media-split__copy .wp-block-buttons,
.organizing-split__copy .wp-block-buttons {
	margin-top: 1.25rem;
}

/* Priorities */
.priorities-section {
	padding: var(--campaign-section) var(--campaign-gutter);
}

.priorities-inner,
.latest-updates__inner,
.archive-masthead__inner,
.archive-content,
.page-masthead__inner,
.page-content-shell,
.article-masthead__inner,
.article-content-shell,
.not-found-inner,
.site-footer__main {
	width: min(100%, var(--campaign-content));
	margin-inline: auto;
}

.priorities-inner > *,
.latest-updates__inner > *,
.archive-content > .wp-block-query,
.site-footer__main > *,
.endorsements-ledger__inner > *,
.events-ledger__inner > * {
	width: 100%;
	max-width: none !important;
}

.section-heading-row {
	gap: 2rem;
}

.section-number {
	margin: 0 0 0.4rem;
	color: var(--campaign-navy);
}

.priority-list {
	margin-top: 2.5rem;
	border-top: 1px solid var(--campaign-navy);
}

.priority-list > *,
.endorsement-list > *,
.event-list > * {
	width: 100%;
	max-width: none !important;
}

.priority-row {
	min-height: 112px;
	padding: 1rem 0;
	gap: clamp(1rem, 3vw, 3.25rem);
	border-bottom: 1px solid var(--campaign-line);
}

.priority-number {
	flex: 0 0 2.5rem;
	margin: 0;
	color: var(--campaign-coral);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.priority-title {
	flex: 0 0 30%;
	margin: 0;
	font-size: clamp(1.45rem, 2.3vw, 2rem);
	letter-spacing: -0.025em;
}

.priority-description {
	flex: 1 1 auto;
	max-width: 33rem;
	margin: 0;
}

.priority-arrow {
	flex: 0 0 auto;
	margin: 0;
	font-size: 1.25rem;
}

.priorities-action {
	margin-top: 2rem;
}

/* News */
.latest-updates {
	padding: var(--campaign-section) var(--campaign-gutter);
}

.latest-updates .campaign-eyebrow {
	color: var(--campaign-pale-blue);
}

.latest-updates__heading {
	margin-bottom: 2.5rem;
}

.editorial-link {
	margin: 0 0 0.4rem;
}

.latest-updates a,
.article-masthead a {
	color: var(--campaign-white);
}

.updates-list,
.archive-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid currentColor;
}

.update-item,
.archive-item {
	grid-template-columns: minmax(110px, 0.7fr) minmax(260px, 1.6fr) minmax(220px, 1fr);
	gap: clamp(1rem, 3vw, 3rem);
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.update-item__meta,
.archive-item__meta {
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
}

.update-item__meta > *,
.archive-item__meta > * {
	margin: 0;
}

.update-item__meta a,
.archive-item__meta a {
	text-decoration: none;
}

.update-item__title,
.archive-item__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.3vw, 1.9rem);
	letter-spacing: -0.025em;
	line-height: 1.18;
}

.update-item__title a,
.archive-item__title a {
	color: inherit;
	text-decoration: none;
}

.update-item__excerpt,
.archive-item .wp-block-post-excerpt {
	margin: 0;
}

.update-item__excerpt p,
.archive-item .wp-block-post-excerpt p {
	margin: 0;
}

.updates-empty {
	padding: 2rem;
}

.updates-empty h3 {
	margin-top: 0;
}

/* Organizing and action bands */
.organizing-split {
	padding: var(--campaign-section) var(--campaign-gutter);
	background: var(--campaign-paper);
}

.organizing-split__grid {
	min-height: 500px;
}

.donation-band {
	padding: clamp(3.5rem, 6vw, 5.5rem) var(--campaign-gutter);
}

.donation-band__inner,
.signup-band__inner {
	width: min(100%, var(--campaign-content));
	margin-inline: auto;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	gap: clamp(2rem, 7vw, 7rem);
	align-items: center;
}

.donation-band .campaign-eyebrow {
	color: var(--campaign-white);
}

.donation-band__title {
	max-width: 13ch;
	margin: 0;
	font-size: clamp(2.5rem, 4.8vw, 4.25rem);
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.donation-band__action {
	max-width: 30rem;
}

.donation-band__action > p {
	margin-top: 0;
}

.signup-band {
	padding: var(--campaign-section) var(--campaign-gutter);
}

.signup-band__copy > p:last-child {
	max-width: 32rem;
}

.signup-band__slot,
.form-integration-slot {
	padding: 2rem;
	border: 1px solid var(--campaign-navy);
	border-radius: 2px;
}

.integration-slot__label {
	color: var(--campaign-navy);
}

.integration-slot__help {
	max-width: 30rem;
	margin: 0 0 1.25rem;
}

/* Footer */
.site-footer {
	padding: var(--campaign-section) var(--campaign-gutter) 1.5rem;
}

.site-footer__columns {
	gap: clamp(2.5rem, 6vw, 6rem);
}

.site-footer__eyebrow {
	color: var(--campaign-pale-blue);
}

.site-footer__name {
	max-width: 10ch;
	margin: 0;
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.site-footer__name a,
.site-footer a {
	color: var(--campaign-white);
}

.site-footer__name a,
.footer-links a,
.footer-utility a {
	text-decoration: none;
}

.site-footer__district {
	margin: 1rem 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer-heading {
	margin: 0 0 1rem;
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.footer-links,
.footer-utility {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links li + li {
	margin-top: 0.5rem;
}

.footer-socials {
	margin-top: 1.25rem;
}

.footer-socials .wp-social-link {
	color: var(--campaign-navy);
	background: var(--campaign-white);
}

.site-footer__legal {
	margin-top: 4rem;
	padding-top: 1.25rem;
	gap: 1rem 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.legal-disclaimer {
	max-width: 48rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.72rem;
	line-height: 1.5;
}

.footer-utility {
	display: flex;
	gap: 1rem;
	font-size: 0.72rem;
}

/* Inner pages */
.page-masthead,
.article-masthead,
.archive-masthead {
	padding: clamp(4rem, 7vw, 6rem) var(--campaign-gutter);
}

.page-masthead .campaign-eyebrow,
.article-masthead .campaign-eyebrow {
	color: var(--campaign-pale-blue);
}

.page-title,
.article-title,
.archive-title,
.not-found-title {
	max-width: 15ch;
	margin: 0;
	font-size: clamp(2.75rem, 6vw, 5rem);
	font-weight: 650;
	letter-spacing: -0.05em;
	line-height: 1;
}

.page-masthead__inner > *,
.article-masthead__inner > *,
.archive-masthead__inner > *,
.not-found-inner > * {
	margin-right: auto !important;
	margin-left: 0 !important;
}

.article-title {
	max-width: 18ch;
}

.page-content-shell,
.article-content-shell,
.archive-content {
	padding: var(--campaign-section) var(--campaign-gutter);
}

.page-content-shell > .wp-block-post-content,
.article-content-shell > .wp-block-post-content {
	width: min(100%, var(--campaign-reading));
	margin-inline: auto;
}

.page-content-shell > .wp-block-post-content > :where(p, ul, ol) {
	max-width: var(--campaign-reading);
}

.article-meta {
	gap: 0.75rem 1.5rem;
	color: var(--campaign-pale-blue);
}

.article-meta > * {
	margin: 0;
}

.article-featured-image {
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.article-featured-image img {
	width: 100%;
	max-height: 680px;
	object-fit: cover;
	border-radius: 0;
}

.article-content-shell > .wp-block-post-content {
	font-size: 1.1rem;
}

.article-footer {
	width: min(100%, var(--campaign-reading));
	margin: 3rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--campaign-line);
}

.archive-description {
	max-width: 34rem;
	margin: 1.25rem 0 0;
}

.archive-content .archive-list {
	color: var(--campaign-ink);
	border-color: var(--campaign-navy);
}

.archive-content .archive-item {
	border-color: var(--campaign-line);
}

.archive-content .archive-item__meta,
.archive-content .archive-date {
	color: rgba(13, 11, 1, 0.65);
}

.archive-content .archive-item__meta a {
	color: var(--campaign-blue);
}

.wp-block-query-pagination {
	margin-top: 2rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.search-content .wp-block-search {
	max-width: var(--campaign-reading);
	margin: 0 0 3rem;
}

.not-found-main {
	min-height: 65vh;
	padding: clamp(5rem, 10vw, 9rem) var(--campaign-gutter);
}

.not-found-inner > p:not(.campaign-eyebrow) {
	max-width: 32rem;
}

.not-found-inner .wp-block-search {
	max-width: 32rem;
	margin-top: 2rem;
}

.donation-page-content,
.volunteer-page-content {
	width: min(100%, var(--campaign-reading));
	margin-inline: auto;
}

.donation-page-title {
	max-width: 12ch;
	margin: 0;
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	letter-spacing: -0.045em;
	line-height: 1.04;
}

.donation-page-intro {
	font-family: "Roboto Slab", Rockwell, Georgia, serif;
	font-size: 1.25rem;
	line-height: 1.45;
}

.donation-amounts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 2rem;
}

.donation-amounts .wp-block-button,
.donation-amounts .wp-block-button__link {
	width: 100%;
}

.donation-provider-button .wp-block-button__link {
	min-width: 220px;
}

.donation-disclaimer {
	margin-top: 2rem;
	padding-top: 1rem;
	color: rgba(13, 11, 1, 0.68);
	font-size: 0.72rem;
	line-height: 1.5;
	border-top: 1px solid var(--campaign-line);
}

.form-integration-slot {
	margin-block: 2rem;
}

/* Optional page patterns */
.endorsements-ledger,
.events-ledger {
	padding: var(--campaign-section) var(--campaign-gutter);
}

.endorsements-ledger__inner,
.events-ledger__inner {
	width: min(100%, var(--campaign-content));
	margin-inline: auto;
}

.endorsement-list,
.event-list {
	margin-top: 2.5rem;
	border-top: 1px solid var(--campaign-navy);
}

.endorsement-row {
	grid-template-columns: minmax(0, 1.55fr) minmax(190px, 0.45fr);
	gap: clamp(2rem, 7vw, 7rem);
	padding: clamp(1.75rem, 4vw, 3rem) 0;
	border-bottom: 1px solid var(--campaign-line);
}

.endorsement-quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.endorsement-quote p {
	margin: 0;
	font-family: "Roboto Slab", Rockwell, Georgia, serif;
	font-size: clamp(1.45rem, 2.8vw, 2.25rem);
	font-weight: 550;
	line-height: 1.25;
}

.endorsement-source {
	align-self: end;
}

.endorsement-source p {
	margin: 0;
}

.endorsement-source p + p {
	margin-top: 0.2rem;
	color: rgba(13, 11, 1, 0.64);
	font-size: 0.8rem;
}

.event-row {
	grid-template-columns: 100px minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--campaign-line);
}

.event-date p,
.event-date h3,
.event-details h3,
.event-details p {
	margin: 0;
}

.event-date p,
.event-details p {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.event-date h3 {
	font-size: 2.25rem;
	line-height: 1;
}

.event-details h3 {
	font-size: clamp(1.4rem, 2.3vw, 1.9rem);
	letter-spacing: -0.025em;
}

.event-details p {
	margin-top: 0.35rem;
	color: rgba(13, 11, 1, 0.64);
}

/* Plugin-neutral form treatment */
:where(.wpforms-container, .gform_wrapper, .wpcf7, .campaign-form) label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

:where(.wpforms-container, .gform_wrapper, .wpcf7, .campaign-form) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea),
.wp-block-search__input {
	width: 100%;
	min-height: 46px;
	padding: 0.7rem 0.85rem;
	color: var(--campaign-ink);
	background: var(--campaign-white);
	border: 1px solid var(--campaign-navy);
	border-radius: 2px;
	font: inherit;
}

:where(.wpforms-container, .gform_wrapper, .wpcf7, .campaign-form) textarea {
	min-height: 140px;
}

:where(.wpforms-container, .gform_wrapper, .wpcf7, .campaign-form) :where(.wpforms-error, .validation_message, .wpcf7-not-valid-tip) {
	color: var(--campaign-navy);
	font-weight: 600;
}

:where(.wpforms-container, .gform_wrapper, .wpcf7, .campaign-form) :where(.wpforms-confirmation-container, .gform_confirmation_message, .wpcf7-response-output) {
	padding: 1rem;
	background: var(--campaign-pale-blue);
	border: 1px solid var(--campaign-navy);
}

.wp-block-search__button {
	min-height: 46px;
	color: var(--campaign-navy);
	background: var(--campaign-coral);
	border: 0;
	border-radius: 999px;
	font: 700 0.75rem/1 "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Desktop navigation breakpoint */
@media (min-width: 941px) {
	.primary-navigation .wp-block-navigation__responsive-container {
		display: block !important;
		position: static;
		width: auto;
		height: auto;
		color: inherit;
		background: transparent;
	}

	.primary-navigation .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

@media (max-width: 1100px) {
	:root {
		--campaign-gutter: clamp(1.5rem, 3.5vw, 2.5rem);
	}

	.campaign-hero__grid {
		min-height: 570px;
	}

	.campaign-hero__copy {
		padding: 3.5rem 2.75rem;
	}

	.story-split__grid {
		gap: 3.5rem;
	}
}

@media (max-width: 940px) {
	.primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.primary-navigation .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		color: var(--campaign-white);
	}

	.primary-navigation .wp-block-navigation__responsive-container-open svg {
		width: 22px;
		height: 22px;
	}

	.primary-navigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		position: fixed;
		inset: 3px;
		z-index: 99990;
		display: flex !important;
		width: auto;
		height: auto;
		padding: clamp(1.5rem, 5vw, 3rem);
		color: var(--campaign-navy);
		background: var(--campaign-paper);
		overflow-y: auto;
		animation: campaign-menu-in 320ms var(--campaign-drawer) both;
	}

	.primary-navigation .wp-block-navigation__responsive-container.is-menu-open::after {
		position: absolute;
		right: clamp(1.5rem, 5vw, 3rem);
		bottom: 1.25rem;
		z-index: -1;
		color: rgba(22, 50, 90, 0.08);
		font-family: "Roboto Slab", Rockwell, Georgia, serif;
		font-size: clamp(4rem, 18vw, 10rem);
		font-weight: 700;
		letter-spacing: -0.08em;
		line-height: 0.8;
		content: "DISTRICT 2";
	}

	.primary-navigation .wp-block-navigation__responsive-container-close {
		top: 1.25rem;
		right: 1.25rem;
		display: grid;
		width: 44px;
		height: 44px;
		color: var(--campaign-navy);
		place-items: center;
	}

	.primary-navigation .wp-block-navigation__responsive-container-content {
		align-items: center !important;
		justify-content: center;
		min-height: calc(100vh - 6rem);
		padding-top: 4rem !important;
		text-align: center;
	}

	.primary-navigation .wp-block-navigation__container {
		align-items: center !important;
		gap: 0.45rem;
	}

	.primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 0.2rem;
		color: var(--campaign-navy);
		font-family: "Roboto Slab", Rockwell, Georgia, serif;
		font-size: clamp(2rem, 6vw, 3.75rem);
		font-weight: 650;
		letter-spacing: -0.04em;
		line-height: 1.08;
		text-transform: none;
	}

	.primary-navigation .mobile-menu-donate {
		display: block !important;
		margin-top: 1.25rem;
	}

	.primary-navigation .mobile-menu-donate .wp-block-navigation-item__content {
		min-width: 180px;
		padding: 0.8rem 1.5rem !important;
		color: var(--campaign-navy) !important;
		background: var(--campaign-coral);
		border-radius: 999px;
		font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
		font-size: 0.8rem !important;
		letter-spacing: 0.1em !important;
		text-transform: uppercase !important;
	}

	.primary-navigation .wp-block-navigation__responsive-container.is-menu-open .primary-navigation__socials {
		display: flex;
		margin-top: 1.5rem;
	}

	.header-actions {
		margin-left: 0;
	}

	.update-item,
	.archive-item {
		grid-template-columns: minmax(90px, 0.6fr) minmax(230px, 1.4fr) minmax(190px, 1fr);
		gap: 1.5rem;
	}
}

@keyframes campaign-menu-in {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 781px) {
	:root {
		--campaign-gutter: clamp(1.125rem, 5vw, 1.5rem);
		--campaign-section: clamp(2.75rem, 10vw, 4rem);
	}

	body::after {
		border-width: 3px;
	}

	.site-navigation__inner {
		min-height: 58px;
		gap: 0.75rem;
	}

	.site-brand__name {
		font-size: 0.84rem;
	}

	.site-brand__district {
		display: none;
	}

	.primary-navigation {
		margin-left: auto;
	}

	.header-donate .wp-block-button__link {
		min-width: 80px;
		min-height: 36px;
		padding-inline: 1rem;
		font-size: 0.68rem;
	}

	.campaign-hero {
		padding: 0 0 2.75rem;
	}

	.campaign-hero__grid,
	.media-split__grid,
	.organizing-split__grid {
		width: 100%;
		min-height: 0;
		flex-direction: column;
	}

	.campaign-hero__copy,
	.campaign-hero__media,
	.media-split__media,
	.media-split__copy,
	.organizing-split__copy,
	.organizing-split__media {
		flex-basis: auto !important;
		width: 100%;
	}

	.campaign-hero__media,
	.media-split__media,
	.organizing-split__media {
		flex-grow: 0 !important;
		min-height: 0;
		overflow: hidden;
	}

	.campaign-hero__copy {
		min-height: 430px;
		padding: 3.5rem var(--campaign-gutter);
	}

	.campaign-hero__title {
		font-size: clamp(2.9rem, 12vw, 4.5rem);
	}

	.campaign-hero__grid.wp-block-columns > .campaign-hero__media {
		flex: 0 1 min(112vw, 620px) !important;
		height: min(112vw, 620px);
	}

	.story-split__grid {
		gap: 2rem;
	}

	.story-split__heading,
	.story-split__body {
		flex-basis: auto !important;
	}

	.story-split__accent {
		width: calc(100% + var(--campaign-gutter));
		margin: 2rem 0 -5.5rem;
		transform: none;
	}

	.accent-callout {
		padding-top: 7rem;
	}

	.accent-callout__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.accent-callout__index,
	.accent-callout__title {
		flex-basis: auto;
	}

	.media-split,
	.organizing-split {
		padding-inline: 0;
	}

	.media-split__grid.wp-block-columns > .media-split__media,
	.organizing-split__grid.wp-block-columns > .organizing-split__media {
		flex: 0 1 min(72vw, 480px) !important;
		height: min(72vw, 480px);
	}

	.organizing-split__copy {
		order: 2;
	}

	.organizing-split__media {
		order: 1;
	}

	.media-split__copy,
	.organizing-split__copy {
		padding: var(--campaign-section) var(--campaign-gutter);
	}

	.section-heading-row {
		align-items: flex-start;
	}

	.priority-list .priority-row {
		display: grid !important;
		grid-template-columns: 2rem minmax(0, 1fr) 1.5rem;
		gap: 0.4rem 0.75rem;
		padding: 1.35rem 0;
	}

	.priority-number {
		grid-row: 1 / span 2;
	}

	.priority-title {
		grid-column: 2;
		flex: none;
	}

	.priority-description {
		grid-column: 2 / span 2;
	}

	.priority-arrow {
		grid-column: 3;
		grid-row: 1;
	}

	.update-item,
	.archive-item {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.6rem;
		padding: 1.5rem 0;
	}

	.update-item__meta,
	.archive-item__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}

	.donation-band__inner,
	.signup-band__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.endorsement-row {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.event-row {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 1rem;
	}

	.event-row > .wp-block-buttons {
		grid-column: 2;
	}

	.site-footer__columns {
		gap: 2.5rem;
	}

	.site-footer__columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.site-footer__legal {
		align-items: flex-start;
		flex-direction: column;
	}

	.page-content-shell,
	.article-content-shell,
	.archive-content {
		padding-inline: var(--campaign-gutter);
	}
}

@media (max-width: 480px) {
	.site-navigation__inner {
		gap: 0.4rem;
	}

	.site-brand__name {
		max-width: 10.5rem;
		font-size: 0.78rem;
		line-height: 1.1;
	}

	.primary-navigation .wp-block-navigation__responsive-container-open {
		width: 36px;
		height: 36px;
	}

	.header-donate .wp-block-button__link {
		min-width: 72px;
		padding-inline: 0.8rem;
	}

	.campaign-hero__copy {
		min-height: 400px;
		padding-block: 3rem;
	}

	.campaign-hero__title {
		font-size: clamp(2.65rem, 13vw, 3.6rem);
	}

	.campaign-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.campaign-hero__actions .wp-block-button,
	.campaign-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.editorial-heading {
		font-size: clamp(2.1rem, 10vw, 2.75rem);
	}

	.section-number {
		display: none;
	}

	.donation-amounts {
		grid-template-columns: 1fr;
	}

	.footer-utility {
		flex-wrap: wrap;
	}
}

@media (hover: hover) and (pointer: fine) {
	.priority-row {
		transition: padding-inline 180ms var(--campaign-ease-out), background-color 180ms ease;
	}

	.priority-row:hover {
		padding-inline: 1rem;
		background: var(--campaign-pale-blue);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wp-block-button__link:active {
		transform: none;
	}
}

@media print {
	body::after,
	.site-header,
	.site-footer,
	.wp-block-button,
	.primary-navigation {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
	}
}

/* Continuous campaign composition — version 2.1 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.site-navigation__inner {
	min-height: 58px;
	gap: clamp(0.75rem, 1.8vw, 1.5rem);
}

.site-brand__name {
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.primary-navigation .wp-block-navigation__container {
	gap: clamp(0.8rem, 1.6vw, 1.4rem);
}

.primary-navigation .wp-block-navigation-item__content {
	font-size: 0.68rem;
	letter-spacing: 0.09em;
}

.header-donate .wp-block-button__link {
	min-width: 104px;
	min-height: 38px;
}

.campaign-hero {
	position: relative;
	padding: 0;
	background: var(--campaign-navy);
}

.campaign-hero__grid {
	width: 100%;
	max-width: none !important;
	min-height: clamp(610px, calc(100svh - 86px), 760px);
}

.campaign-hero__copy {
	position: relative;
	z-index: 2;
	padding: clamp(3.5rem, 6vw, 6.25rem) clamp(2rem, 6.2vw, 6rem);
}

.campaign-identity {
	width: 100%;
	max-width: none !important;
	margin: 0 0 clamp(3.5rem, 8vh, 5.5rem);
}

.campaign-identity > * {
	margin-inline: 0 !important;
}

.campaign-identity__name {
	max-width: 12ch;
	margin: 0;
	font-family: "Roboto Slab", Rockwell, Georgia, serif;
	font-size: clamp(1.9rem, 3.1vw, 3.15rem);
	font-weight: 700;
	letter-spacing: -0.055em;
	line-height: 0.9;
}

.campaign-identity__office {
	margin: 0.7rem 0 0;
	color: var(--campaign-pale-blue);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.campaign-hero__title {
	max-width: 8.5ch;
	font-size: clamp(3.5rem, 5.4vw, 5.2rem);
	line-height: 0.94;
}

.campaign-hero__summary {
	max-width: 34rem;
	margin-top: 1.35rem;
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	line-height: 1.52;
}

.campaign-hero__actions {
	margin-top: 1.65rem;
}

.campaign-hero__media {
	position: relative;
	min-height: inherit;
	overflow: hidden;
}

.campaign-hero__media::after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(64px, 8vw, 116px);
	height: clamp(64px, 8vw, 116px);
	background: var(--campaign-coral);
	content: "";
	mix-blend-mode: multiply;
	opacity: 0.92;
	pointer-events: none;
}

.campaign-hero__image img {
	object-position: 50% 28%;
}

.biography-composition {
	position: relative;
	padding: 0;
}

.biography-composition__grid {
	width: 100%;
	max-width: none !important;
	min-height: 650px;
	margin: 0;
	gap: 0;
}

.biography-composition__media,
.biography-composition__image,
.biography-composition__image img {
	height: 100%;
}

.biography-composition__media {
	position: relative;
	min-height: 650px;
	overflow: hidden;
}

.biography-composition__media::after {
	position: absolute;
	right: -1px;
	top: clamp(3rem, 8vw, 7rem);
	width: clamp(42px, 7vw, 92px);
	height: clamp(150px, 24vw, 320px);
	background: var(--campaign-blue);
	content: "";
	pointer-events: none;
}

.biography-composition__image {
	margin: 0;
}

.biography-composition__image img {
	width: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

.biography-composition__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem);
}

.biography-composition__copy > * {
	width: 100%;
	max-width: 34rem !important;
}

.biography-composition__copy .editorial-heading {
	max-width: 11ch !important;
}

.biography-composition__lead {
	margin-top: 1.4rem;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.5;
}

.biography-composition__copy > p:not(.campaign-eyebrow):not(.biography-composition__lead) {
	margin-top: 1rem;
}

.biography-composition__copy .wp-block-buttons {
	margin-top: 1.5rem;
}

.priorities-section {
	padding: clamp(4rem, 7vw, 6rem) var(--campaign-gutter);
}

.priorities-inner {
	display: grid;
	grid-template-columns: minmax(240px, 0.7fr) minmax(420px, 1.3fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: start;
}

.priorities-intro {
	position: sticky;
	top: 2rem;
	width: 100%;
	max-width: none !important;
}

.priorities-title {
	max-width: 10ch !important;
}

.priority-list {
	width: 100%;
	max-width: none !important;
	margin: 0;
	border-top: 1px solid var(--campaign-navy);
}

.priority-row {
	min-height: 76px;
	padding: 0.95rem 0;
	gap: clamp(1rem, 2.5vw, 2rem);
	border-color: rgba(22, 50, 90, 0.32);
}

.priority-number {
	flex-basis: 2rem;
}

.priority-title {
	flex: 1 1 auto;
	font-size: clamp(1.35rem, 2.05vw, 1.9rem);
	line-height: 1.1;
}

.latest-updates {
	padding: clamp(4rem, 7vw, 6rem) var(--campaign-gutter);
}

.latest-updates__heading {
	margin-bottom: 2rem;
}

.updates-list.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.42);
}

.updates-list > li {
	margin: 0;
}

.update-item {
	display: block;
	min-height: 100%;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-right: 1px solid rgba(255, 255, 255, 0.25);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.updates-list > li:nth-child(even) .update-item {
	border-right: 0;
}

.update-item__image {
	margin: -0.5rem -0.5rem 1.5rem;
}

.update-item__image img {
	border-radius: 0;
}

.update-item__meta {
	display: flex;
	gap: 0.5rem 1rem;
	margin-bottom: 0.8rem;
}

.update-item__title {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}

.update-item__excerpt {
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.78);
}

.updates-empty {
	margin: 0;
	padding: 1.5rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.42);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.74);
}

.donation-band {
	padding: clamp(4rem, 7vw, 6rem) var(--campaign-gutter) 2rem;
}

.donation-band__inner {
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
	gap: clamp(2.5rem, 7vw, 7rem);
}

.donation-band__copy > p:not(.campaign-eyebrow) {
	max-width: 35rem;
	margin-top: 1.5rem;
	color: rgba(255, 255, 255, 0.83);
}

.donation-band__title {
	max-width: 11ch;
}

.donation-band__action {
	width: 100%;
	max-width: none;
}

.donation-band .donation-amounts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	width: 100%;
}

.donation-band .donation-amounts .wp-block-button,
.donation-band .donation-amounts .wp-block-button__link {
	width: 100%;
}

.donation-band .donation-amounts .wp-block-button__link {
	min-height: 52px;
	font-size: 0.8rem;
}

.donation-band > .donation-band__inner > .donation-disclaimer {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
	margin-top: clamp(2rem, 5vw, 4rem);
	padding-top: 1.25rem;
	border-color: rgba(255, 255, 255, 0.32);
	color: rgba(255, 255, 255, 0.7);
}

.campaign-contact {
	padding: 0;
}

.campaign-contact__grid {
	width: 100%;
	max-width: none !important;
	min-height: 570px;
	margin: 0;
	gap: 0;
}

.campaign-contact__media,
.campaign-contact__image,
.campaign-contact__image img {
	height: 100%;
}

.campaign-contact__media {
	min-height: 570px;
	overflow: hidden;
}

.campaign-contact__image {
	margin: 0;
}

.campaign-contact__image img {
	width: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

.campaign-contact__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 6vw, 6rem);
}

.campaign-contact__copy > * {
	width: 100%;
	max-width: 35rem !important;
}

.campaign-contact__copy > p:not(.campaign-eyebrow) {
	margin-top: 1.4rem;
}

.campaign-contact__copy .wp-block-buttons {
	margin-top: 1.5rem;
}

.campaign-form-slot:has(> .wp-block-shortcode:empty) {
	display: none;
}

.campaign-form-slot:empty {
	display: none;
}

.campaign-form-slot {
	margin-top: 1.5rem;
}

.site-footer {
	padding: clamp(3.5rem, 6vw, 5rem) var(--campaign-gutter) 1.5rem;
}

.site-footer__main {
	text-align: center;
}

.site-footer__eyebrow {
	color: var(--campaign-pale-blue);
}

.site-footer__name {
	max-width: none;
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 4.8rem);
	line-height: 0.96;
}

.footer-navigation {
	justify-content: center;
	margin-top: 2rem;
}

.footer-navigation .wp-block-navigation__container {
	justify-content: center;
	gap: 0.75rem clamp(1rem, 2vw, 1.8rem);
}

.footer-navigation .wp-block-navigation-item__content {
	color: var(--campaign-white);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.footer-socials {
	justify-content: center;
}

.site-footer .legal-disclaimer {
	max-width: 900px !important;
	margin: 3rem auto 0;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.32);
	text-align: center;
}

@media (max-width: 1100px) {
	.campaign-hero__grid {
		min-height: 590px;
	}

	.campaign-hero__copy {
		padding-inline: clamp(2.5rem, 5vw, 4rem);
	}

	.campaign-identity {
		margin-bottom: 3.25rem;
	}

	.biography-composition__grid,
	.biography-composition__media {
		min-height: 600px;
	}

	.priorities-inner {
		gap: clamp(2.5rem, 6vw, 5rem);
	}
}

@media (max-width: 940px) {
	.site-brand {
		order: 1;
		margin-right: auto;
	}

	.header-actions {
		order: 2;
	}

	.primary-navigation {
		order: 3;
		margin-left: 0;
	}

	.primary-navigation .wp-block-navigation__responsive-container-open {
		gap: 0.35rem;
		width: auto;
		padding-inline: 0.25rem;
	}

	.primary-navigation .wp-block-navigation__responsive-container-open::after {
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		content: "Menu";
		text-transform: uppercase;
	}

	.primary-navigation .wp-block-navigation__responsive-container.is-menu-open::after {
		right: auto;
		left: 50%;
		bottom: 1.5rem;
		width: 100%;
		transform: translateX(-50%);
		font-size: clamp(3.5rem, 13vw, 7rem);
		line-height: 0.82;
		text-align: center;
		white-space: pre;
		content: "JOHNNY AUSTIN\A THOMPSON";
	}

	.primary-navigation .wp-block-navigation__responsive-container-content {
		min-height: calc(100svh - 6rem);
	}

	.priorities-inner {
		grid-template-columns: minmax(220px, 0.75fr) minmax(360px, 1.25fr);
	}

	.donation-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
		gap: 3rem;
	}
}

@media (max-width: 781px) {
	.campaign-hero__grid,
	.biography-composition__grid,
	.campaign-contact__grid {
		width: 100%;
		min-height: 0;
		flex-direction: column;
	}

	.campaign-hero__copy,
	.campaign-hero__media,
	.biography-composition__media,
	.biography-composition__copy,
	.campaign-contact__media,
	.campaign-contact__copy {
		flex-basis: auto !important;
		width: 100%;
	}

	.campaign-hero__copy {
		min-height: 500px;
		padding: 3.5rem var(--campaign-gutter) 3.75rem;
	}

	.campaign-identity {
		margin-bottom: 3.5rem;
	}

	.campaign-hero__title {
		font-size: clamp(3.25rem, 13vw, 4.5rem);
	}

	.campaign-hero__grid.wp-block-columns > .campaign-hero__media {
		flex: 0 1 min(112vw, 590px) !important;
		height: min(112vw, 590px);
		min-height: 0;
	}

	.biography-composition__media {
		min-height: min(78vw, 520px);
	}

	.biography-composition__copy {
		padding: var(--campaign-section) var(--campaign-gutter);
	}

	.biography-composition__media::after {
		top: auto;
		right: var(--campaign-gutter);
		bottom: -2.5rem;
		width: 25vw;
		height: 5rem;
	}

	.priorities-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.priorities-intro {
		position: static;
	}

	.priority-list .priority-row {
		display: flex !important;
		min-height: 68px;
		padding: 0.9rem 0;
	}

	.priority-number,
	.priority-title {
		grid-column: auto;
		grid-row: auto;
	}

	.updates-list.wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.update-item {
		padding: 1.5rem 0;
		border-right: 0;
	}

	.update-item__image {
		margin: 0 0 1.25rem;
	}

	.donation-band {
		padding-bottom: 1.5rem;
	}

	.donation-band__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.donation-band > .donation-band__inner > .donation-disclaimer {
		grid-column: auto;
		margin-top: 1.5rem;
	}

	.campaign-contact__media {
		min-height: min(78vw, 500px);
	}

	.campaign-contact__copy {
		padding: var(--campaign-section) var(--campaign-gutter);
	}

	.footer-navigation .wp-block-navigation__container {
		flex-direction: row;
	}
}

@media (max-width: 480px) {
	.site-navigation__inner {
		gap: 0.5rem;
	}

	.site-brand__name {
		max-width: 8.5rem;
		font-size: 0.7rem;
	}

	.header-donate .wp-block-button__link {
		min-width: 70px;
		padding-inline: 0.75rem;
	}

	.campaign-hero__copy {
		min-height: 480px;
	}

	.campaign-identity__name {
		font-size: 1.85rem;
	}

	.campaign-hero__actions {
		align-items: flex-start;
		flex-direction: row;
	}

	.campaign-hero__actions .wp-block-button,
	.campaign-hero__actions .wp-block-button__link {
		width: auto;
	}

	.donation-band .donation-amounts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-navigation .wp-block-navigation__container {
		gap: 0.75rem 1.1rem;
	}

	.site-footer .legal-disclaimer {
		padding: 1rem;
		font-size: 0.65rem;
	}
}

/* Integrated hero navigation and campaign marks — version 2.2 */
:root {
	--campaign-frame: 4px;
	--campaign-nav-height: 58px;
}

.site-brand__logo {
	flex: 0 0 auto;
	width: 132px;
	max-width: 132px !important;
	margin: 0;
}

.site-brand__logo a,
.site-brand__logo img {
	display: block;
	width: 100% !important;
	height: auto;
}

.site-brand__logo a {
	line-height: 0;
}

.site-navigation__inner {
	justify-content: flex-start !important;
}

.primary-navigation {
	margin-left: auto !important;
}

.header-actions {
	margin-left: clamp(0.9rem, 1.8vw, 1.5rem) !important;
}

.campaign-hero__logo {
	width: min(100%, 33.75rem);
	max-width: none !important;
	margin: 0;
}

.campaign-hero__logo img {
	width: 100% !important;
	height: auto;
}

.campaign-hero__logo + .campaign-identity__office {
	margin-top: 1rem;
}

.campaign-hero__title.screen-reader-text {
	position: absolute;
}

.home .site-header {
	min-height: 0;
}

.home .wp-site-blocks > main.front-page {
	margin-top: 0 !important;
}

.home .site-navigation {
	position: absolute;
	top: var(--campaign-frame);
	right: var(--campaign-frame);
	left: var(--campaign-frame);
	z-index: 99980;
	width: auto;
	max-width: none !important;
	margin: 0;
	background: linear-gradient(180deg, rgba(22, 50, 90, 0.98) 0%, rgba(22, 50, 90, 0.72) 56%, rgba(22, 50, 90, 0) 100%) !important;
	border-bottom: 1px solid transparent;
	transition: background 180ms ease, border-color 180ms ease;
}

.home.is-campaign-nav-scrolled .site-navigation {
	position: fixed;
	top: var(--campaign-frame);
	background: var(--campaign-navy) !important;
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.home:not(.is-campaign-nav-scrolled) .primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
.home:not(.is-campaign-nav-scrolled) .primary-navigation .wp-block-navigation__responsive-container-open {
	color: var(--campaign-white);
}

.home.is-campaign-nav-scrolled .primary-navigation .wp-block-navigation-item__content,
.home.is-campaign-nav-scrolled .primary-navigation .wp-block-navigation__responsive-container-open {
	color: var(--campaign-white);
}

.home .campaign-hero__grid {
	min-height: clamp(650px, 100svh, 820px);
}

.home .campaign-hero__copy {
	padding-block: clamp(7.25rem, 10vw, 9rem) clamp(4rem, 6vw, 6rem);
}

.home .campaign-hero__summary {
	max-width: 31rem;
	margin-top: 2rem;
}

body.admin-bar.home.is-campaign-nav-scrolled .site-navigation {
	top: calc(32px + var(--campaign-frame));
}

@media (max-width: 1100px) {
	.site-brand__logo {
		width: 118px;
		max-width: 118px !important;
	}

	.home .campaign-hero__grid {
		min-height: 680px;
	}
}

@media (max-width: 781px) {
	:root {
		--campaign-frame: 3px;
	}

	.site-brand__logo {
		width: 106px;
		max-width: 106px !important;
	}

	.header-actions,
	.primary-navigation {
		margin-left: 0 !important;
	}

	.home:not(.is-campaign-nav-scrolled) .primary-navigation .wp-block-navigation__responsive-container-open {
		color: var(--campaign-white);
	}

	.home .campaign-hero__grid {
		min-height: 0;
	}

	.home .campaign-hero__copy {
		min-height: 520px;
		padding: 7.75rem var(--campaign-gutter) 3.75rem;
	}

	.campaign-hero__logo {
		width: min(100%, 31rem);
	}
}

@media (max-width: 782px) {
	body.admin-bar.home.is-campaign-nav-scrolled .site-navigation {
		top: calc(46px + var(--campaign-frame));
	}
}

@media (max-width: 480px) {
	.site-brand__logo {
		width: 92px;
		max-width: 92px !important;
	}

	.home .campaign-hero__copy {
		min-height: 480px;
		padding-top: 7rem;
	}

	.home .campaign-hero__summary {
		margin-top: 1.5rem;
	}
}

/* Campaign composition refinement — version 2.3 */

@media (min-width: 941px) {
	.primary-navigation .home-nav-item {
		display: none !important;
	}
}

.campaign-hero__stage {
	display: grid;
	grid-template-columns: minmax(0, 54%) minmax(0, 46%);
	grid-template-rows: minmax(510px, 1fr) auto;
	width: 100%;
	max-width: none !important;
	min-height: clamp(700px, 100svh, 820px);
	margin: 0;
}

.campaign-hero__stage > * {
	width: 100%;
	max-width: none !important;
	margin: 0;
}

.campaign-hero__stage .campaign-hero__copy {
	grid-column: 1;
	grid-row: 1;
	justify-content: center;
	min-height: 0;
	padding: clamp(7.5rem, 10vw, 9.5rem) clamp(2rem, 6.2vw, 6rem) clamp(2.5rem, 4vw, 3.5rem);
}

.campaign-hero__stage .campaign-hero__media {
	grid-column: 2;
	grid-row: 1 / 3;
	min-height: 700px;
}

.campaign-hero__stage .campaign-hero__engagement {
	position: relative;
	z-index: 3;
	grid-column: 1;
	grid-row: 2;
	padding: 1.25rem clamp(2rem, 6.2vw, 6rem) 1.4rem;
}

.campaign-hero__engagement::after {
	position: absolute;
	top: 0;
	right: -46px;
	width: 46px;
	height: 100%;
	background: var(--campaign-pale-blue);
	content: "";
	pointer-events: none;
}

.campaign-hero__engagement .wp-block-shortcode,
.campaign-form-slot .wp-block-shortcode {
	margin: 0;
}

.campaign-hero__summary {
	max-width: 31rem;
	margin-top: 2rem;
}

.campaign-form {
	width: 100%;
	max-width: none;
	margin: 0;
}

.campaign-form label,
.campaign-form legend {
	color: inherit;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

.campaign-form label {
	display: block;
	margin: 0;
}

.campaign-form input:not([type="radio"]):not([type="checkbox"]) {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 0.35rem;
	padding: 0.55rem 0.7rem;
	color: var(--campaign-ink);
	background: var(--campaign-white);
	border: 1px solid rgba(22, 50, 90, 0.65);
	border-radius: 2px;
	font: 400 1rem/1.2 "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
}

.campaign-form__compact-fields,
.campaign-form__name-fields,
.campaign-form__contact-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.campaign-form--hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 0.75rem 1rem;
}

.campaign-form--hero .campaign-form__compact-fields {
	grid-column: 1 / -1;
}

.campaign-form__volunteer-choice {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0;
	margin: 0;
	gap: 0.75rem;
	border: 0;
}

.campaign-form__volunteer-choice legend {
	float: left;
	max-width: 25rem;
	margin-right: auto;
}

.campaign-form__volunteer-choice label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
}

.campaign-form__volunteer-choice input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--campaign-coral);
}

.campaign-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	min-height: 42px;
	padding: 0.65rem 1.25rem;
	color: var(--campaign-navy);
	background: var(--campaign-coral);
	border: 0;
	border-radius: 999px;
	font: 700 0.72rem/1 "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.campaign-form__submit:disabled {
	opacity: 0.78;
	cursor: not-allowed;
}

.campaign-form--contact {
	display: grid;
	gap: 0.8rem;
}

.campaign-form--contact .campaign-form__submit {
	justify-self: start;
}

.campaign-form--plugin > :first-child {
	margin-top: 0;
}

.campaign-form--plugin > :last-child {
	margin-bottom: 0;
}

.biography-composition__media {
	overflow: hidden;
}

.biography-composition__media::after {
	display: none;
}

.biography-composition__image {
	overflow: hidden;
}

.biography-composition__accent {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	width: min(48%, 320px);
	padding: 1.5rem 1.75rem;
	color: var(--campaign-navy);
}

.biography-composition__accent > * {
	width: 100%;
	max-width: none !important;
}

.biography-composition__accent .campaign-eyebrow {
	margin-bottom: 0.6rem;
}

.biography-composition__accent-copy {
	margin: 0;
	font-family: "Roboto Slab", Rockwell, Georgia, serif;
	font-size: clamp(1.35rem, 2.1vw, 1.8rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.biography-composition__copy {
	background: var(--campaign-paper);
	padding-top: clamp(4rem, 7vw, 6rem);
	padding-left: clamp(3rem, 6vw, 6rem);
}

.priorities-section {
	scroll-margin-top: calc(var(--campaign-nav-height) + var(--campaign-frame));
}

.priority-row {
	min-height: 80px;
}

.priority-title {
	font-size: clamp(1.55rem, 2.25vw, 2.15rem);
}

.latest-updates__heading .editorial-heading {
	max-width: none;
}

.updates-list.wp-block-post-template {
	border: 0;
}

.update-item {
	display: flex;
	flex-direction: column;
	min-height: 350px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--campaign-navy);
	background: var(--campaign-paper);
	border: 0;
	border-right: 1px solid var(--campaign-navy);
}

.updates-list > li:nth-child(even) .update-item {
	color: var(--campaign-navy);
	background: var(--campaign-pale-blue);
	border-right: 0;
}

.update-item__image {
	width: calc(100% + 2 * clamp(1.75rem, 3vw, 2.5rem));
	margin: calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) 1.5rem;
}

.update-item__meta,
.archive-item__meta {
	color: rgba(22, 50, 90, 0.7);
}

.update-item__type,
.archive-item__type {
	margin: 0;
}

.update-item__title {
	margin-top: auto;
	font-size: clamp(1.9rem, 3vw, 2.65rem);
	line-height: 1.04;
}

.latest-updates .update-item a {
	color: var(--campaign-navy);
}

.updates-empty {
	padding: 1rem 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.archive-content .archive-item {
	display: grid;
	grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1.65fr);
	align-items: start;
	min-height: 180px;
	padding: 2rem 0;
}

.archive-content .archive-item__meta {
	display: grid;
	gap: 0.5rem;
}

.archive-content .archive-item__title {
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1.02;
}

.campaign-form-slot {
	display: block;
	margin-top: 1.75rem;
}

.campaign-contact__copy .campaign-form-slot {
	max-width: 42rem !important;
}

.campaign-contact__copy {
	padding-right: clamp(2rem, 5vw, 5rem);
	padding-left: clamp(2rem, 5vw, 5rem);
}

.site-footer .legal-disclaimer {
	padding: 1.25rem 0 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 1100px) {
	.campaign-hero__stage {
		grid-template-columns: minmax(0, 52%) minmax(0, 48%);
		min-height: 720px;
	}

	.campaign-hero__stage .campaign-hero__copy {
		padding-right: 3rem;
		padding-left: 2.5rem;
	}

	.campaign-hero__stage .campaign-hero__engagement {
		padding-right: 3rem;
		padding-left: 2.5rem;
	}

	.campaign-form__volunteer-choice {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.campaign-form__volunteer-choice legend {
		flex: 1 0 100%;
		margin-bottom: 0.35rem;
	}

	.biography-composition__copy {
		padding-left: 5.25rem;
	}
}

@media (max-width: 940px) {
	.primary-navigation .home-nav-item {
		display: block !important;
	}

	.campaign-hero__stage {
		grid-template-columns: minmax(0, 50%) minmax(0, 50%);
	}

	.campaign-form--hero {
		grid-template-columns: 1fr;
	}

	.campaign-form--hero .campaign-form__submit {
		justify-self: start;
	}
}

@media (max-width: 781px) {
	.campaign-hero__stage {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		min-height: 0;
	}

	.campaign-hero__stage .campaign-hero__copy {
		grid-column: 1;
		grid-row: 1;
		min-height: 500px;
		padding: 7.75rem var(--campaign-gutter) 3.25rem;
	}

	.campaign-hero__stage .campaign-hero__engagement {
		grid-column: 1;
		grid-row: 2;
		padding: 1.35rem var(--campaign-gutter) 1.5rem;
	}

	.campaign-hero__engagement::after {
		display: none;
	}

	.campaign-hero__stage .campaign-hero__media {
		grid-column: 1;
		grid-row: 3;
		height: min(105vw, 620px);
		min-height: min(105vw, 620px);
		overflow: hidden;
	}

	.campaign-form--hero {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.campaign-form__volunteer-choice {
		align-items: center;
		flex-wrap: nowrap;
	}

	.campaign-form__volunteer-choice legend {
		flex: initial;
		margin-bottom: 0;
	}

	.biography-composition__media {
		min-height: min(82vw, 540px);
	}

	.biography-composition__accent {
		top: auto;
		right: 0;
		bottom: 0;
		width: min(76vw, 300px);
	}

	.biography-composition__copy {
		padding: var(--campaign-section) var(--campaign-gutter);
	}

	.update-item {
		min-height: 300px;
		border-right: 0;
		border-bottom: 1px solid var(--campaign-navy);
	}

	.archive-content .archive-item {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.archive-content .archive-item__meta {
		display: flex;
	}
}

@media (max-width: 480px) {
	.campaign-hero__stage .campaign-hero__copy {
		min-height: 455px;
		padding-top: 7rem;
	}

	.campaign-form__compact-fields,
	.campaign-form__name-fields,
	.campaign-form__contact-fields {
		grid-template-columns: 1fr;
	}

	.campaign-form--hero {
		grid-template-columns: 1fr;
	}

	.campaign-form__volunteer-choice {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.campaign-form__volunteer-choice legend {
		flex: 1 0 100%;
		margin-bottom: 0.35rem;
	}

	.campaign-form--hero .campaign-form__submit,
	.campaign-form--contact .campaign-form__submit {
		width: 100%;
	}

	.campaign-hero__stage .campaign-hero__media {
		height: min(118vw, 530px);
		min-height: min(118vw, 530px);
	}

	.biography-composition__accent {
		width: min(82vw, 280px);
		padding: 1.25rem 1.4rem;
	}

	.biography-composition__copy {
		padding-top: var(--campaign-section);
	}
}

/* Canonical homepage hero — version 2.5
   This block intentionally lives at the end of theme.css so the Site Editor
   and the public front end use the same final hero rules. */

.campaign-hero {
    --hero-blue: #16325A;
    position: relative !important;
    isolation: isolate;
    min-height: clamp(590px, 70vh, 720px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--hero-blue) !important;
    background-image:
        linear-gradient(
            90deg,
            var(--hero-blue) 0%,
            var(--hero-blue) 30%,
            rgba(22, 50, 90, 0.98) 38%,
            rgba(22, 50, 90, 0.90) 46%,
            rgba(22, 50, 90, 0.70) 54%,
            rgba(22, 50, 90, 0.44) 61%,
            rgba(22, 50, 90, 0.20) 67%,
            rgba(22, 50, 90, 0.06) 72%,
            rgba(22, 50, 90, 0) 77%
        ),
        url("../images/hero-home.jpg") !important;
    background-size: 100% 100%, 73% auto !important;
    background-position: center, calc(100% + 70px) -24px !important;
    background-repeat: no-repeat !important;
}

.campaign-hero__stage {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: inherit !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

.campaign-hero__stage > * {
    max-width: none !important;
}

.campaign-hero__stage .campaign-hero__copy {
    position: absolute !important;
    z-index: 2 !important;
    left: clamp(42px, 6vw, 104px) !important;
    top: 50% !important;
    width: min(43vw, 690px) !important;
    max-width: 690px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-46%) !important;
    background: transparent !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

.campaign-hero__logo {
    width: 100% !important;
    max-width: 690px !important;
    margin: 0 0 18px !important;
}

.campaign-hero__logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.campaign-hero__logo + .campaign-identity__office,
.campaign-identity__office {
    width: 100% !important;
    margin: 0 0 30px !important;
    text-align: center !important;
}

.campaign-hero__summary {
    width: min(88%, 585px) !important;
    max-width: 585px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* The portrait is now a CSS background, so legacy hero media/form blocks stay out of layout. */
.campaign-hero__stage .campaign-hero__media,
.campaign-hero__stage .campaign-hero__engagement {
    display: none !important;
}

@media (max-width: 900px) {
    .campaign-hero {
        min-height: 620px !important;
        background-image:
            linear-gradient(
                90deg,
                var(--hero-blue) 0%,
                var(--hero-blue) 30%,
                rgba(22, 50, 90, 0.98) 40%,
                rgba(22, 50, 90, 0.88) 52%,
                rgba(22, 50, 90, 0.60) 64%,
                rgba(22, 50, 90, 0.25) 76%,
                rgba(22, 50, 90, 0) 88%
            ),
            url("../images/hero-home.jpg") !important;
        background-size: 100% 100%, 77% auto !important;
        background-position: center, calc(100% + 55px) -20px !important;
        background-repeat: no-repeat !important;
    }

    .campaign-hero__stage .campaign-hero__copy {
        left: clamp(28px, 5vw, 56px) !important;
        width: min(58vw, 620px) !important;
        max-width: 620px !important;
    }
}

@media (max-width: 640px) {
    .campaign-hero {
        min-height: 650px !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.04) 0%,
                rgba(22, 50, 90, 0.22) 34%,
                rgba(22, 50, 90, 0.72) 58%,
                rgba(22, 50, 90, 0.96) 76%,
                var(--hero-blue) 92%
            ),
            url("../images/hero-home.jpg") !important;
        background-size: 100% 100%, auto 88% !important;
        background-position: center, calc(100% + 20px) -14px !important;
        background-repeat: no-repeat !important;
    }

    .campaign-hero__stage .campaign-hero__copy {
        left: 24px !important;
        right: 24px !important;
        top: auto !important;
        bottom: 38px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    .campaign-hero__logo + .campaign-identity__office,
    .campaign-identity__office {
        text-align: left !important;
    }

    .campaign-hero__summary {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Canonical frame, header, and hero engagement — version 2.6 */

/* More breathing room around the site without making the navigation taller. */
:root {
	--campaign-frame: 10px;
	--campaign-gutter: clamp(2.5rem, 5vw, 5rem);
}

body::after {
	border-width: var(--campaign-frame) !important;
}

/* Keep the public header in the same visible overlay position as the Site Editor. */
.site-header {
	z-index: 100000 !important;
}

.home .site-header {
	position: absolute !important;
	top: var(--campaign-frame) !important;
	right: var(--campaign-frame) !important;
	left: var(--campaign-frame) !important;
	display: block !important;
	min-height: var(--campaign-nav-height) !important;
	margin: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.home .site-navigation {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.home.is-campaign-nav-scrolled .site-header {
	position: fixed !important;
}

.home.is-campaign-nav-scrolled .site-navigation {
	background: var(--campaign-navy) !important;
	border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

body.admin-bar.home .site-header {
	top: calc(32px + var(--campaign-frame)) !important;
}

.site-navigation__inner {
	width: min(calc(100% - 2 * var(--campaign-gutter)), 1440px) !important;
	min-height: 58px !important;
	gap: clamp(0.85rem, 1.35vw, 1.35rem) !important;
}

.site-brand__logo {
	width: 122px !important;
	max-width: 122px !important;
}

.primary-navigation .wp-block-navigation__container {
	gap: clamp(1rem, 1.65vw, 1.6rem) !important;
}

.primary-navigation .wp-block-navigation-item__content {
	padding-block: 0.45rem !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.075em !important;
}

.header-socials {
	flex: 0 0 auto;
	gap: 0.45rem !important;
	margin: 0 0 0 0.1rem !important;
}

.header-socials .wp-social-link {
	width: 30px;
	height: 30px;
	margin: 0 !important;
	background: transparent !important;
}

.header-socials .wp-social-link a {
	padding: 4px !important;
	color: var(--campaign-white) !important;
}

.header-actions {
	margin-left: 0.15rem !important;
}

.header-donate .wp-block-button__link {
	min-width: 118px !important;
	min-height: 42px !important;
	padding: 0.72rem 1.35rem !important;
	font-size: 0.84rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
}

/* Hero: keep the accepted portrait treatment, replace district/body copy with JOIN form. */
.campaign-hero__stage .campaign-hero__copy {
	top: 50% !important;
	width: min(46vw, 760px) !important;
	max-width: 760px !important;
	transform: translateY(-50%) !important;
}

.campaign-hero__join {
	width: min(100%, 720px) !important;
	max-width: 720px !important;
	margin: 1.5rem 0 0 !important;
}

.campaign-hero__join .wp-block-shortcode {
	margin: 0 !important;
}

.campaign-form--hero {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	align-items: end !important;
	gap: 0.75rem !important;
	width: 100% !important;
}

.campaign-form--hero .campaign-form__hero-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem 0.75rem;
	min-width: 0;
}

.campaign-form--hero label {
	color: var(--campaign-white) !important;
	font-size: 0.64rem !important;
	letter-spacing: 0.085em !important;
}

.campaign-form--hero input:not([type="radio"]):not([type="checkbox"]) {
	min-height: 42px !important;
	margin-top: 0.3rem !important;
	padding: 0.55rem 0.7rem !important;
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	background: rgba(255, 255, 255, 0.97) !important;
}

.campaign-form--hero .campaign-form__submit {
	min-width: 106px !important;
	min-height: 42px !important;
	padding: 0.7rem 1.2rem !important;
	font-size: 0.78rem !important;
}

/* The old district/summary classes should not occupy space if a saved template still contains them. */
.campaign-hero .campaign-identity__office,
.campaign-hero .campaign-hero__summary {
	display: none !important;
}

@media (max-width: 940px) {
	.site-brand__logo {
		width: 108px !important;
		max-width: 108px !important;
	}

	.header-socials {
		display: none !important;
	}

	.header-donate .wp-block-button__link {
		min-width: 102px !important;
		min-height: 40px !important;
		padding-inline: 1rem !important;
		font-size: 0.78rem !important;
	}

	.campaign-hero__stage .campaign-hero__copy {
		width: min(60vw, 650px) !important;
		max-width: 650px !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar.home .site-header {
		top: calc(46px + var(--campaign-frame)) !important;
	}
}

@media (max-width: 781px) {
	:root {
		--campaign-frame: 6px;
		--campaign-gutter: clamp(1.5rem, 5vw, 2rem);
	}

	.site-navigation__inner {
		width: calc(100% - 2 * var(--campaign-gutter)) !important;
	}

	.campaign-form--hero {
		grid-template-columns: 1fr !important;
	}

	.campaign-form--hero .campaign-form__submit {
		justify-self: start !important;
	}
}

@media (max-width: 640px) {
	.campaign-hero__stage .campaign-hero__copy {
		width: auto !important;
	}

	.campaign-hero__join {
		width: 100% !important;
		margin-top: 1.15rem !important;
	}

	.campaign-form--hero .campaign-form__hero-fields {
		grid-template-columns: 1fr !important;
		gap: 0.5rem !important;
	}

	.campaign-form--hero .campaign-form__submit {
		width: 100% !important;
	}
}

/* Frontend/editor header parity — version 2.7 */
/*
 * The block editor canvas does not carry the frontend body.home class.
 * Keep the homepage header in normal document flow so the editor and public
 * page render the same composition instead of using the legacy hero overlay.
 */
.site-header,
.home .site-header,
.home.is-campaign-nav-scrolled .site-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 100000 !important;
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.admin-bar.home .site-header,
body.admin-bar.home.is-campaign-nav-scrolled .site-header {
    top: auto !important;
}

.site-navigation,
.home .site-navigation,
.home.is-campaign-nav-scrolled .site-navigation {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: var(--campaign-navy) !important;
    border-bottom: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.site-navigation__inner {
    width: min(calc(100% - 2 * var(--campaign-gutter)), 1440px) !important;
    min-height: 76px !important;
    gap: clamp(0.85rem, 1.35vw, 1.35rem) !important;
}

.site-brand__logo {
    width: 78px !important;
    max-width: 78px !important;
}

.site-brand__logo img {
    width: 100% !important;
    height: auto !important;
}

.primary-navigation .wp-block-navigation-item__content {
    padding-block: 0.35rem !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
}

.header-socials .wp-social-link {
    width: 28px !important;
    height: 28px !important;
}

.header-donate .wp-block-button__link {
    min-width: 116px !important;
    min-height: 44px !important;
    padding: 0.68rem 1.3rem !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.075em !important;
}

@media (max-width: 940px) {
    .site-navigation__inner {
        min-height: 70px !important;
    }

    .site-brand__logo {
        width: 70px !important;
        max-width: 70px !important;
    }

    .header-donate .wp-block-button__link {
        min-width: 98px !important;
        min-height: 40px !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 781px) {
    .site-navigation__inner {
        min-height: 64px !important;
    }

    .site-brand__logo {
        width: 62px !important;
        max-width: 62px !important;
    }
}


/* ============================================================
   V8 CANONICAL FRONT PAGE
   Fresh theme slug + final frontend/editor parity overrides.
   ============================================================ */

:root {
    --campaign-frame-v8: 12px;
    --campaign-header-height-v8: 78px;
}

body {
    background: #ffffff !important;
}

body::after {
    display: none !important;
}

.wp-site-blocks {
    margin: var(--campaign-frame-v8) !important;
    overflow: hidden !important;
    background: var(--campaign-paper) !important;
}

/* Header: always normal flow; no homepage overlay/sticky enlargement. */
.site-header,
body.home .site-header,
body.home.is-campaign-nav-scrolled .site-header {
    position: relative !important;
    inset: auto !important;
    z-index: 1000 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.site-navigation,
body.home .site-navigation,
body.home.is-campaign-nav-scrolled .site-navigation {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: var(--campaign-navy) !important;
    border: 0 !important;
}

.site-navigation__inner {
    width: min(calc(100% - 2 * clamp(2rem, 4vw, 4.5rem)), 1480px) !important;
    min-height: var(--campaign-header-height-v8) !important;
    margin-inline: auto !important;
    padding: 0 !important;
    gap: clamp(1rem, 1.5vw, 1.5rem) !important;
}

.site-brand__logo {
    flex: 0 0 auto !important;
    width: 66px !important;
    max-width: 66px !important;
    margin: 0 !important;
}

.site-brand__logo a,
.site-brand__logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.site-navigation__right {
    margin-left: auto !important;
    gap: clamp(0.85rem, 1.2vw, 1.25rem) !important;
}

.primary-navigation {
    margin: 0 !important;
}

.primary-navigation .wp-block-navigation__container {
    gap: clamp(1.1rem, 1.7vw, 1.75rem) !important;
}

.primary-navigation .wp-block-navigation-item__content {
    padding: 0.4rem 0 !important;
    color: var(--campaign-white) !important;
    font-size: 0.91rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.075em !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.header-socials {
    flex: 0 0 auto !important;
    gap: 0.4rem !important;
    margin: 0 !important;
}

.header-socials .wp-social-link {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    background: transparent !important;
}

.header-socials .wp-social-link a {
    padding: 3px !important;
    color: var(--campaign-white) !important;
}

.header-actions {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.header-donate .wp-block-button__link {
    min-width: 126px !important;
    min-height: 44px !important;
    padding: 0.72rem 1.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
}

/* Hero: accepted photo scale/position, with form replacing the old copy. */
.front-page .campaign-hero {
    --hero-blue: #16325A;
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(590px, 70vh, 720px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--hero-blue) !important;
    background-image:
        linear-gradient(
            90deg,
            var(--hero-blue) 0%,
            var(--hero-blue) 30%,
            rgba(22, 50, 90, 0.98) 38%,
            rgba(22, 50, 90, 0.90) 46%,
            rgba(22, 50, 90, 0.70) 54%,
            rgba(22, 50, 90, 0.44) 61%,
            rgba(22, 50, 90, 0.20) 67%,
            rgba(22, 50, 90, 0.06) 72%,
            rgba(22, 50, 90, 0) 77%
        ),
        url("../images/hero-home.jpg") !important;
    background-size: 100% 100%, 73% auto !important;
    background-position: center, calc(100% + 70px) -24px !important;
    background-repeat: no-repeat !important;
}

.front-page .campaign-hero__stage {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: inherit !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

.front-page .campaign-hero__stage .campaign-hero__copy {
    position: absolute !important;
    z-index: 2 !important;
    left: clamp(48px, 6vw, 108px) !important;
    top: 50% !important;
    width: min(44vw, 710px) !important;
    max-width: 710px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
}

.front-page .campaign-hero__logo {
    width: 100% !important;
    max-width: 690px !important;
    margin: 0 !important;
}

.front-page .campaign-hero__logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Always suppress legacy text if a stale page/template happens to contain it. */
.front-page .campaign-identity__office,
.front-page .campaign-hero__summary,
.front-page .campaign-hero__eyebrow {
    display: none !important;
}

.campaign-hero-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 0.8rem 1rem !important;
    width: min(100%, 700px) !important;
    margin: 1.6rem 0 0 !important;
}

.campaign-hero-form__fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
    min-width: 0 !important;
}

.campaign-hero-form label {
    margin: 0 !important;
}

.campaign-hero-form input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0.72rem 0.9rem !important;
    color: var(--campaign-white) !important;
    background: rgba(22, 50, 90, 0.26) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    font: 500 1rem/1.1 "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

.campaign-hero-form input::placeholder {
    color: rgba(255, 255, 255, 0.82) !important;
    opacity: 1 !important;
}

.campaign-hero-form__submit {
    min-width: 118px !important;
    min-height: 48px !important;
    padding: 0.75rem 1.35rem !important;
    color: var(--campaign-navy) !important;
    background: var(--campaign-coral) !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    font: 700 0.92rem/1 "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

@media (max-width: 980px) {
    :root {
        --campaign-header-height-v8: 70px;
    }

    .site-brand__logo {
        width: 58px !important;
        max-width: 58px !important;
    }

    .primary-navigation .wp-block-navigation-item__content {
        font-size: 0.82rem !important;
    }

    .header-socials {
        display: none !important;
    }

    .header-donate .wp-block-button__link {
        min-width: 108px !important;
        min-height: 42px !important;
        font-size: 0.82rem !important;
    }

    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: clamp(32px, 5vw, 60px) !important;
        width: min(58vw, 640px) !important;
        max-width: 640px !important;
    }
}

@media (max-width: 781px) {
    .wp-site-blocks {
        margin: 6px !important;
    }

    .site-navigation__inner {
        width: calc(100% - 2.25rem) !important;
        min-height: 64px !important;
    }

    .site-brand__logo {
        width: 54px !important;
        max-width: 54px !important;
    }

    .header-actions {
        display: none !important;
    }

    .front-page .campaign-hero {
        min-height: 650px !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.04) 0%,
                rgba(22, 50, 90, 0.22) 34%,
                rgba(22, 50, 90, 0.72) 58%,
                rgba(22, 50, 90, 0.96) 76%,
                var(--hero-blue) 92%
            ),
            url("../images/hero-home.jpg") !important;
        background-size: 100% 100%, auto 88% !important;
        background-position: center, calc(100% + 20px) -14px !important;
    }

    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: 24px !important;
        right: 24px !important;
        top: auto !important;
        bottom: 34px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    .campaign-hero-form {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .campaign-hero-form__submit {
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .campaign-hero-form__fields {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   V9 HERO + STICKY HEADER REFINEMENT
   Final overrides for header alignment, gradient/sticky behavior,
   smaller hero lockup, and two-row join form.
   ============================================================ */

:root {
    --campaign-header-height-v9: 78px;
}

/* Sticky needs a viewport-scrolling ancestor. */
.wp-site-blocks {
    overflow: visible !important;
}

/*
 * At the top of the page the header overlays the hero and fades from
 * navy at the top into transparency. On scroll, it becomes solid navy.
 */
.site-header,
body.home .site-header,
body.home.is-campaign-nav-scrolled .site-header {
    position: sticky !important;
    top: var(--campaign-frame-v8) !important;
    z-index: 100000 !important;
    height: var(--campaign-header-height-v9) !important;
    min-height: var(--campaign-header-height-v9) !important;
    margin: 0 0 calc(-1 * var(--campaign-header-height-v9)) 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
}

body.admin-bar .site-header,
body.admin-bar.home .site-header,
body.admin-bar.home.is-campaign-nav-scrolled .site-header {
    top: calc(32px + var(--campaign-frame-v8)) !important;
}

.site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: calc(var(--campaign-header-height-v9) + 64px);
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(22, 50, 90, 1) 0%,
            rgba(22, 50, 90, 0.94) 34%,
            rgba(22, 50, 90, 0.66) 62%,
            rgba(22, 50, 90, 0.24) 82%,
            rgba(22, 50, 90, 0) 100%
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
    opacity: 1;
    transition:
        opacity 180ms ease,
        height 180ms ease;
}

.site-navigation,
body.home .site-navigation,
body.home.is-campaign-nav-scrolled .site-navigation {
    height: var(--campaign-header-height-v9) !important;
    min-height: var(--campaign-header-height-v9) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.site-navigation__inner {
    display: flex !important;
    align-items: center !important;
    height: var(--campaign-header-height-v9) !important;
    min-height: var(--campaign-header-height-v9) !important;
    padding-block: 0 !important;
}

.site-brand__logo,
.site-navigation__right,
.primary-navigation,
.primary-navigation .wp-block-navigation__responsive-container,
.primary-navigation .wp-block-navigation__responsive-container-content,
.primary-navigation .wp-block-navigation__container,
.header-socials,
.header-actions {
    align-self: center !important;
}

.site-navigation__right,
.primary-navigation .wp-block-navigation__responsive-container-content,
.primary-navigation .wp-block-navigation__container,
.header-socials,
.header-actions {
    align-items: center !important;
}

/* Solid sticky state. */
body.is-campaign-nav-scrolled .site-header::before {
    height: var(--campaign-header-height-v9);
    opacity: 0;
}

body.is-campaign-nav-scrolled .site-navigation {
    background: rgba(22, 50, 90, 0.985) !important;
    box-shadow:
        0 10px 24px rgba(15, 18, 70, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Make the campaign lockup about 40% smaller than v8. */
.front-page .campaign-hero__stage .campaign-hero__copy {
    width: min(52vw, 820px) !important;
    max-width: 820px !important;
}

.front-page .campaign-hero__logo {
    width: 60% !important;
    max-width: 430px !important;
    margin: 0 0 1.35rem !important;
}

/* Exact desktop form geometry:
   [First Name]   [Last Name]
   [Phone Number] [Email Address] [JOIN]
*/
.campaign-hero-form,
.campaign-form--hero.campaign-hero-form {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto !important;
    grid-template-areas:
        "first last ."
        "phone email submit" !important;
    align-items: stretch !important;
    column-gap: 0.8rem !important;
    row-gap: 0.72rem !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 !important;
}

.campaign-hero-form__first { grid-area: first !important; }
.campaign-hero-form__last { grid-area: last !important; }
.campaign-hero-form__phone { grid-area: phone !important; }
.campaign-hero-form__email { grid-area: email !important; }

.campaign-hero-form__submit {
    grid-area: submit !important;
    align-self: stretch !important;
    min-width: 108px !important;
    min-height: 48px !important;
    height: auto !important;
}

/* Legacy nested wrappers flatten into the same grid if encountered. */
.campaign-hero-form__fields,
.campaign-form--hero .campaign-form__hero-fields {
    display: contents !important;
}

/* Keep field names accessible but visually use placeholders only. */
.campaign-hero-form label,
.campaign-form--hero label {
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.campaign-hero-form label input,
.campaign-form--hero label input {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
}

@media (max-width: 980px) {
    :root {
        --campaign-header-height-v9: 70px;
    }

    .front-page .campaign-hero__stage .campaign-hero__copy {
        width: min(64vw, 700px) !important;
        max-width: 700px !important;
    }

    .front-page .campaign-hero__logo {
        width: 58% !important;
        max-width: 390px !important;
    }

    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        width: min(100%, 680px) !important;
    }
}

@media (max-width: 782px) {
    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: calc(46px + var(--campaign-frame-v8)) !important;
    }
}

@media (max-width: 781px) {
    :root {
        --campaign-header-height-v9: 64px;
    }

    .front-page .campaign-hero__logo {
        width: min(72%, 360px) !important;
        max-width: 360px !important;
    }

    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "first last"
            "phone email"
            "submit submit" !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .campaign-hero-form__submit {
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "first"
            "last"
            "phone"
            "email"
            "submit" !important;
    }
}

/* ============================================================
   V10 BRAND REFRESH
   Blue: #16325A
   Red:  #D03330
   White: #FFFFFF
   ============================================================ */

:root {
    --campaign-navy: #16325A;
    --campaign-blue: #16325A;
    --campaign-pale-blue: #ffffff;
    --campaign-paper: #ffffff;
    --campaign-coral: #D03330;
    --campaign-tan: #D03330;
    --campaign-white: #ffffff;
    --campaign-line: rgba(22, 50, 90, 0.24);
}

/* Supplied horizontal wordmark in the compact sticky header. */
.site-brand__logo {
    width: 170px !important;
    max-width: 170px !important;
}

.site-brand__logo img {
    width: 100% !important;
    height: auto !important;
}

/* Top-of-page blue glow. */
.site-header::before {
    background:
        linear-gradient(
            180deg,
            rgba(22, 50, 90, 1) 0%,
            rgba(22, 50, 90, 0.94) 34%,
            rgba(22, 50, 90, 0.66) 62%,
            rgba(22, 50, 90, 0.24) 82%,
            rgba(22, 50, 90, 0) 100%
        ) !important;
}

/* Solid sticky state. */
body.is-campaign-nav-scrolled .site-navigation {
    background: rgba(22, 50, 90, 0.985) !important;
    box-shadow:
        0 10px 24px rgba(0, 41, 84, 0.20),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Campaign action/accent color. */
.header-donate .wp-block-button__link,
.campaign-hero-form__submit,
.campaign-form__submit,
.wp-block-button:not(.is-style-secondary):not(.is-style-tertiary):not(.is-style-outline) > .wp-block-button__link {
    background: #D03330 !important;
    color: #ffffff !important;
}

.header-donate .wp-block-button__link:hover,
.campaign-hero-form__submit:hover,
.campaign-form__submit:hover,
.wp-block-button:not(.is-style-secondary):not(.is-style-tertiary):not(.is-style-outline) > .wp-block-button__link:hover {
    background: #b72b29 !important;
    color: #ffffff !important;
}

/* Hero blue treatment updated to the new brand blue. */
.front-page .campaign-hero {
    --hero-blue: #16325A !important;
    background-color: #16325A !important;
    background-image:
        linear-gradient(
            90deg,
            #16325A 0%,
            #16325A 30%,
            rgba(22, 50, 90, 0.98) 38%,
            rgba(22, 50, 90, 0.90) 46%,
            rgba(22, 50, 90, 0.70) 54%,
            rgba(22, 50, 90, 0.44) 61%,
            rgba(22, 50, 90, 0.20) 67%,
            rgba(22, 50, 90, 0.06) 72%,
            rgba(22, 50, 90, 0) 77%
        ),
        url("../images/hero-home.jpg") !important;
}

/* New logo is wider, so this keeps about the same approved visual height. */
.front-page .campaign-hero__logo {
    width: min(68%, 520px) !important;
    max-width: 520px !important;
    margin: 0 0 1.35rem !important;
}

/* Hero form remains white/blue with a red JOIN action. */
.campaign-hero-form input {
    color: #ffffff !important;
    background: rgba(22, 50, 90, 0.30) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
}

.campaign-hero-form input::placeholder {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Remove cream/tan surfaces from the previous palette. */
body,
.wp-site-blocks,
.biography-composition__copy,
.update-item,
.updates-list > li:nth-child(even) .update-item {
    background-color: #ffffff;
}

.campaign-eyebrow,
.editorial-link a,
.update-item__title a,
.archive-item__title a {
    color: #16325A;
}

a:hover {
    color: #D03330;
}

@media (max-width: 980px) {
    .site-brand__logo {
        width: 150px !important;
        max-width: 150px !important;
    }
}

@media (max-width: 781px) {
    .site-brand__logo {
        width: 136px !important;
        max-width: 136px !important;
    }

    .front-page .campaign-hero {
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.04) 0%,
                rgba(22, 50, 90, 0.22) 34%,
                rgba(22, 50, 90, 0.72) 58%,
                rgba(22, 50, 90, 0.96) 76%,
                #16325A 92%
            ),
            url("../images/hero-home.jpg") !important;
    }

    .front-page .campaign-hero__logo {
        width: min(78%, 460px) !important;
    }
}



/* ============================================================
   V11 HEADER RESTING GRADIENT FIX
   The navigation block no longer carries a WordPress background preset.
   At rest: transparent navigation over a #16325A glow.
   On scroll: compact solid #16325A sticky bar.
   ============================================================ */

.site-header,
body.home .site-header,
body.home:not(.is-campaign-nav-scrolled) .site-header {
    background: transparent !important;
}

.site-navigation,
.site-navigation.has-background,
body.home .site-navigation,
body.home:not(.is-campaign-nav-scrolled) .site-navigation {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.site-header::before,
body.home:not(.is-campaign-nav-scrolled) .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: calc(var(--campaign-header-height-v9) + 78px);
    pointer-events: none;
    opacity: 1;
    background: linear-gradient(
        180deg,
        rgba(22, 50, 90, 1) 0%,
        rgba(22, 50, 90, 0.96) 26%,
        rgba(22, 50, 90, 0.78) 48%,
        rgba(22, 50, 90, 0.46) 68%,
        rgba(22, 50, 90, 0.18) 84%,
        rgba(22, 50, 90, 0) 100%
    ) !important;
    transition: opacity 180ms ease, height 180ms ease;
}

body.is-campaign-nav-scrolled .site-header::before {
    opacity: 0 !important;
    height: var(--campaign-header-height-v9) !important;
}

body.is-campaign-nav-scrolled .site-navigation,
body.home.is-campaign-nav-scrolled .site-navigation {
    background: #16325A !important;
    background-color: #16325A !important;
    box-shadow:
        0 10px 24px rgba(0, 41, 84, 0.20),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================================
   V12 LANDING PAGE REFINEMENT
   - Brand blue: #16325A
   - Header stays fixed for the entire page.
   - Resting state uses a top glow; scrolled state becomes solid.
   - Instagram icon is larger and vertically centered.
   - Desktop hero fills the resting viewport and shows more portrait.
   ============================================================ */

:root {
    --campaign-header-height-v12: 78px;
    --campaign-blue-v12: #16325A;
}

/* Keep the header pinned to the viewport for the entire page, not just the hero. */
.site-header,
body.home .site-header,
body.home:not(.is-campaign-nav-scrolled) .site-header,
body.home.is-campaign-nav-scrolled .site-header {
    position: fixed !important;
    top: var(--campaign-frame-v8) !important;
    right: var(--campaign-frame-v8) !important;
    left: var(--campaign-frame-v8) !important;
    width: auto !important;
    height: var(--campaign-header-height-v12) !important;
    min-height: var(--campaign-header-height-v12) !important;
    margin: 0 !important;
    z-index: 100000 !important;
    overflow: visible !important;
    isolation: isolate !important;
}

body.admin-bar .site-header,
body.admin-bar.home .site-header,
body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
body.admin-bar.home.is-campaign-nav-scrolled .site-header {
    top: calc(32px + var(--campaign-frame-v8)) !important;
}

/* Resting header remains transparent over a blue-to-transparent glow. */
.site-header::before,
body.home:not(.is-campaign-nav-scrolled) .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto 0;
    height: calc(var(--campaign-header-height-v12) + 92px) !important;
    pointer-events: none;
    opacity: 1 !important;
    background: linear-gradient(
        180deg,
        rgba(22, 50, 90, 1) 0%,
        rgba(22, 50, 90, 0.97) 24%,
        rgba(22, 50, 90, 0.82) 48%,
        rgba(22, 50, 90, 0.52) 69%,
        rgba(22, 50, 90, 0.20) 85%,
        rgba(22, 50, 90, 0) 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
    transition: opacity 180ms ease, height 180ms ease !important;
}

.site-navigation,
.site-navigation.has-background,
body.home .site-navigation,
body.home:not(.is-campaign-nav-scrolled) .site-navigation {
    height: var(--campaign-header-height-v12) !important;
    min-height: var(--campaign-header-height-v12) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.site-navigation__inner {
    height: var(--campaign-header-height-v12) !important;
    min-height: var(--campaign-header-height-v12) !important;
    padding-block: 0 !important;
    align-items: center !important;
}

/* Once the user scrolls, collapse the glow and use a solid header. */
body.is-campaign-nav-scrolled .site-header::before {
    height: var(--campaign-header-height-v12) !important;
    opacity: 0 !important;
}

body.is-campaign-nav-scrolled .site-navigation,
body.home.is-campaign-nav-scrolled .site-navigation {
    background: var(--campaign-blue-v12) !important;
    background-color: var(--campaign-blue-v12) !important;
    box-shadow:
        0 10px 26px rgba(7, 17, 31, 0.22),
        inset 0 -1px 0 rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Instagram: larger hit area/icon and true vertical centering. */
.header-socials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: var(--campaign-header-height-v12) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.header-socials .wp-social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 0 !important;
}

.header-socials .wp-social-link a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 5px !important;
    line-height: 0 !important;
}

.header-socials .wp-social-link svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
}

/* Full resting landing page: the hero fills the viewport beneath the outer frame. */
.front-page .campaign-hero {
    --hero-blue: #16325A !important;
    min-height: calc(100svh + 24px) !important;
    background-color: #16325A !important;
    background-image:
        linear-gradient(
            90deg,
            #16325A 0%,
            #16325A 29%,
            rgba(22, 50, 90, 0.98) 37%,
            rgba(22, 50, 90, 0.90) 45%,
            rgba(22, 50, 90, 0.70) 53%,
            rgba(22, 50, 90, 0.44) 61%,
            rgba(22, 50, 90, 0.20) 68%,
            rgba(22, 50, 90, 0.06) 73%,
            rgba(22, 50, 90, 0) 78%
        ),
        url("../images/hero-home.jpg") !important;

    /* Slightly more zoomed out than v11 while preserving the approved horizontal placement. */
    background-size: 100% 100%, 68% auto !important;
    background-position: center, calc(100% + 70px) -24px !important;
    background-repeat: no-repeat !important;
}

.front-page .campaign-hero__stage {
    min-height: inherit !important;
}

/* Logged-in frontend: account for the WordPress admin toolbar when filling the viewport. */
body.admin-bar .front-page .campaign-hero {
    min-height: calc(100svh - 8px) !important;
}

@media (max-width: 980px) {
    :root {
        --campaign-header-height-v12: 70px;
    }

    .header-socials {
        height: var(--campaign-header-height-v12) !important;
    }

    .front-page .campaign-hero {
        background-size: 100% 100%, 72% auto !important;
        background-position: center, calc(100% + 55px) -20px !important;
    }
}

@media (max-width: 782px) {
    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: calc(46px + var(--campaign-frame-v8)) !important;
    }

    body.admin-bar .front-page .campaign-hero {
        min-height: calc(100svh - 22px) !important;
    }
}

@media (max-width: 781px) {
    :root {
        --campaign-header-height-v12: 64px;
    }

    .front-page .campaign-hero {
        min-height: calc(100svh + 36px) !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.04) 0%,
                rgba(22, 50, 90, 0.22) 34%,
                rgba(22, 50, 90, 0.72) 58%,
                rgba(22, 50, 90, 0.96) 76%,
                #16325A 92%
            ),
            url("../images/hero-home.jpg") !important;
        background-size: 100% 100%, auto 84% !important;
        background-position: center, calc(100% + 20px) -14px !important;
    }
}


/* ============================================================
   V14 DONATION CTA + STICKY FRAME REFINEMENT
   - Remove the top outer frame once the fixed header enters its
     solid/scrolled state.
   - Restore the initial-load donation CTA as an accessible modal.
   ============================================================ */

/* At rest, preserve the 12px site frame. Once scrolling starts, the
   fixed header snaps flush to the viewport top (or admin toolbar). */
.site-header,
body.home .site-header {
    transition: top 180ms ease, left 180ms ease, right 180ms ease !important;
}

body.is-campaign-nav-scrolled .site-header,
body.home.is-campaign-nav-scrolled .site-header {
    top: 0 !important;
}

body.admin-bar.is-campaign-nav-scrolled .site-header,
body.admin-bar.home.is-campaign-nav-scrolled .site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 46px !important;
    }
}

/* Donation modal */
body.is-donation-modal-open {
    overflow: hidden !important;
}

.campaign-donation-modal[hidden] {
    display: none !important;
}

.campaign-donation-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 48px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.campaign-donation-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.campaign-donation-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 15, 28, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.campaign-donation-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    max-height: calc(100svh - 48px);
    overflow: auto;
    box-sizing: border-box;
    padding: clamp(32px, 4vw, 48px);
    border-radius: 10px;
    background: #ffffff;
    color: #16325A;
    box-shadow: 0 30px 80px rgba(7, 17, 31, 0.34);
    outline: none;
    transform: translateY(10px) scale(0.985);
    transition: transform 180ms ease;
}

.campaign-donation-modal.is-visible .campaign-donation-modal__dialog {
    transform: translateY(0) scale(1);
}

.campaign-donation-modal__close {
    position: absolute;
    top: 16px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #16325A;
    font: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
}

.campaign-donation-modal__close:hover,
.campaign-donation-modal__close:focus-visible {
    opacity: 1;
}

.campaign-donation-modal__eyebrow {
    margin: 0 0 0.55rem;
    color: #D03330;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.campaign-donation-modal__title {
    max-width: 650px;
    margin: 0 2rem 1.2rem 0;
    color: #16325A;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
}

.campaign-donation-modal__copy {
    max-width: 650px;
    margin: 0 0 1.6rem;
    color: rgba(22, 50, 90, 0.82);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.5;
}

.campaign-donation-modal__amounts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.campaign-donation-modal__amounts a,
.campaign-donation-modal__primary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    box-sizing: border-box;
    border-radius: 4px;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
    transition: transform 140ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.campaign-donation-modal__amounts a {
    border: 2px solid rgba(22, 50, 90, 0.24);
    background: #ffffff;
    color: #16325A !important;
    font-size: 1.25rem;
}

.campaign-donation-modal__amounts a:hover,
.campaign-donation-modal__amounts a:focus-visible {
    border-color: #16325A;
    background: rgba(22, 50, 90, 0.06);
    transform: translateY(-1px);
}

.campaign-donation-modal__primary {
    width: 100%;
    margin-bottom: 1rem;
    border: 2px solid #D03330;
    background: #D03330;
    color: #ffffff !important;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.campaign-donation-modal__primary:hover,
.campaign-donation-modal__primary:focus-visible {
    background: #b92b29;
    border-color: #b92b29;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.campaign-donation-modal__dismiss {
    display: block;
    margin: 0.25rem auto 1.65rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: rgba(22, 50, 90, 0.78);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.campaign-donation-modal__dismiss:hover,
.campaign-donation-modal__dismiss:focus-visible {
    color: #16325A;
}

.campaign-donation-modal__disclaimer {
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(22, 50, 90, 0.16);
    color: rgba(22, 50, 90, 0.67);
    font-size: 0.8rem;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .campaign-donation-modal {
        padding: 14px;
    }

    .campaign-donation-modal__dialog {
        max-height: calc(100svh - 28px);
        padding: 30px 20px 24px;
    }

    .campaign-donation-modal__amounts {
        grid-template-columns: 1fr;
    }

    .campaign-donation-modal__amounts a,
    .campaign-donation-modal__primary {
        min-height: 52px;
    }
}


/* ============================================================
   V17 HERO HEIGHT — explicit extended landing canvas
   Keep this at the very end so older hero height rules cannot win.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        min-height: max(840px, 112svh) !important;
        height: auto !important;
        max-height: none !important;
    }

    body.home .front-page .campaign-hero__stage {
        min-height: inherit !important;
        height: 100% !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        min-height: max(760px, 108svh) !important;
        max-height: none !important;
    }
}


/* ============================================================
   V18.3 CANONICAL ANNOUNCEMENT / HEADER / FRAME OVERRIDES
   These rules intentionally live last and tolerate older saved
   Site Editor header markup.
   ============================================================ */

:root {
    --campaign-frame-v8: 12px;
    --campaign-frame-color-v18: #E9E7E3;
    --campaign-announcement-v18: #D03330;
}

/* Requested warm neutral outer frame. */
html,
body {
    background-color: var(--campaign-frame-color-v18) !important;
}

/* Keep the page canvas itself white so only the outer gutter/frame changes. */
.wp-site-blocks {
    background-color: #ffffff !important;
}

/* Hide a logo from either the current file header OR an older database-saved header. */
.site-header .site-brand,
.site-header .site-brand__logo,
.site-header .wp-block-site-logo {
    display: none !important;
}

/* Header row: nav/social left, Donate pinned right. */
.site-navigation__inner {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: min(calc(100% - 2 * clamp(2rem, 4vw, 4.5rem)), 1480px) !important;
    margin-inline: auto !important;
}

.site-navigation__left,
.site-navigation__right {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(1rem, 1.5vw, 1.5rem) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.primary-navigation {
    margin: 0 !important;
}

.primary-navigation .wp-block-navigation__container {
    justify-content: flex-start !important;
}

.header-socials {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.header-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* If Donate is still nested in an older .site-navigation__right group,
   margin-left:auto still pushes only that action to the far right. */
.site-navigation__right .header-actions {
    margin-left: auto !important;
}

/* Red announcement band in normal document flow directly AFTER the hero. */
.campaign-announcement {
    position: relative !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(1rem, 1.8vw, 1.4rem) clamp(2rem, 5vw, 5rem) !important;
    background: var(--campaign-announcement-v18) !important;
    color: #ffffff !important;
    text-align: center !important;
}

.campaign-announcement__inner {
    width: min(100%, 1480px) !important;
    margin: 0 auto !important;
}

.campaign-announcement__text {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.2rem, 1.65vw, 1.65rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em !important;
    font-weight: 500 !important;
}

.campaign-announcement__text strong {
    color: #ffffff !important;
    font-weight: 800 !important;
}

@media (max-width: 781px) {
    .site-navigation__inner,
    .site-navigation__left,
    .site-navigation__right {
        gap: 0.75rem !important;
    }

    .campaign-announcement {
        padding: 0.9rem 1.15rem !important;
    }

    .campaign-announcement__text {
        font-size: clamp(1rem, 4vw, 1.2rem) !important;
    }
}

/* ============================================================
   V19 HERO PROPORTION REFINEMENT
   Shorter desktop landing hero + smaller portrait rendering.
   Keep this block last so previous V17/V12 height rules cannot win.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        min-height: clamp(680px, 82svh, 760px) !important;
        height: auto !important;
        max-height: 760px !important;
        background-size: 100% 100%, 62% auto !important;
        background-position: center, calc(100% + 70px) -24px !important;
    }

    body.home .front-page .campaign-hero__stage {
        min-height: inherit !important;
        height: 100% !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        min-height: clamp(660px, 84svh, 740px) !important;
        height: auto !important;
        max-height: 740px !important;
        background-size: 100% 100%, 66% auto !important;
        background-position: center, calc(100% + 55px) -20px !important;
    }
}


/* ============================================================
   V20 HERO FORM POLISH
   - Focus keeps the same white stroke, simply thicker.
   - Volunteer opt-in sits below the four contact fields.
   - JOIN is nested on that same final row.
   ============================================================ */

.campaign-hero-form,
.campaign-form--hero.campaign-hero-form {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto !important;
    grid-template-areas:
        "first last ."
        "phone email ."
        "volunteer volunteer submit" !important;
    align-items: stretch !important;
    column-gap: 0.8rem !important;
    row-gap: 0.72rem !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 !important;
}

.campaign-hero-form__first { grid-area: first !important; }
.campaign-hero-form__last { grid-area: last !important; }
.campaign-hero-form__phone { grid-area: phone !important; }
.campaign-hero-form__email { grid-area: email !important; }
.campaign-hero-form__volunteer { grid-area: volunteer !important; }
.campaign-hero-form__submit { grid-area: submit !important; }

/* Text/tel/email focus: no separate red outline or halo. */
.campaign-hero-form input:not([type="checkbox"]):focus,
.campaign-hero-form input:not([type="checkbox"]):focus-visible,
.campaign-form--hero input:not([type="checkbox"]):focus,
.campaign-form--hero input:not([type="checkbox"]):focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border: 3px solid #ffffff !important;
    box-shadow: none !important;
}

/* Volunteer opt-in row. */
.campaign-hero-form .campaign-hero-form__volunteer,
.campaign-form--hero .campaign-hero-form__volunteer {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    color: #ffffff !important;
    font: 600 0.95rem/1.25 "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
}

.campaign-hero-form .campaign-hero-form__volunteer span,
.campaign-form--hero .campaign-hero-form__volunteer span {
    font: inherit !important;
    line-height: inherit !important;
}

.campaign-hero-form .campaign-hero-form__volunteer input[type="checkbox"],
.campaign-form--hero .campaign-hero-form__volunteer input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.campaign-hero-form .campaign-hero-form__volunteer input[type="checkbox"]:checked,
.campaign-form--hero .campaign-hero-form__volunteer input[type="checkbox"]:checked {
    background-color: #D03330 !important;
    border-color: #ffffff !important;
    box-shadow: inset 0 0 0 4px #D03330 !important;
    position: relative !important;
}

.campaign-hero-form .campaign-hero-form__volunteer input[type="checkbox"]:checked::after,
.campaign-form--hero .campaign-hero-form__volunteer input[type="checkbox"]:checked::after {
    content: "✓";
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #ffffff;
    font: 800 0.82rem/1 sans-serif;
}

.campaign-hero-form .campaign-hero-form__volunteer input[type="checkbox"]:focus-visible,
.campaign-form--hero .campaign-hero-form__volunteer input[type="checkbox"]:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

.campaign-hero-form__submit,
.campaign-form--hero .campaign-hero-form__submit {
    align-self: stretch !important;
    min-width: 108px !important;
    min-height: 48px !important;
    height: auto !important;
}

@media (max-width: 781px) {
    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "first last"
            "phone email"
            "volunteer submit" !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .campaign-hero-form__submit,
    .campaign-form--hero .campaign-hero-form__submit {
        width: auto !important;
        min-width: 108px !important;
    }
}

@media (max-width: 560px) {
    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "first"
            "last"
            "phone"
            "email"
            "volunteer"
            "submit" !important;
    }

    .campaign-hero-form__submit,
    .campaign-form--hero .campaign-hero-form__submit {
        width: 100% !important;
    }
}

/* ============================================================
   V22 HERO FORM REPAIR
   Explicitly restores the four contact fields, keeps JOIN beside
   the volunteer prompt, and places the SMS disclosure beneath.
   ============================================================ */

.campaign-hero-form,
.campaign-form--hero.campaign-hero-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
        "first last"
        "phone email"
        "actions actions"
        "disclaimer disclaimer" !important;
    column-gap: 0.8rem !important;
    row-gap: 0.72rem !important;
    align-items: stretch !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 !important;
}

.campaign-hero-form__first { grid-area: first !important; }
.campaign-hero-form__last { grid-area: last !important; }
.campaign-hero-form__phone { grid-area: phone !important; }
.campaign-hero-form__email { grid-area: email !important; }

.campaign-hero-form > label.campaign-hero-form__first,
.campaign-hero-form > label.campaign-hero-form__last,
.campaign-hero-form > label.campaign-hero-form__phone,
.campaign-hero-form > label.campaign-hero-form__email,
.campaign-form--hero > label.campaign-hero-form__first,
.campaign-form--hero > label.campaign-hero-form__last,
.campaign-form--hero > label.campaign-hero-form__phone,
.campaign-form--hero > label.campaign-hero-form__email {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.campaign-hero-form input:not([type="checkbox"]),
.campaign-form--hero input:not([type="checkbox"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0.72rem 0.9rem !important;
    color: #ffffff !important;
    background: rgba(22, 50, 90, 0.30) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    font: 500 1rem/1.1 "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

.campaign-hero-form input:not([type="checkbox"])::placeholder,
.campaign-form--hero input:not([type="checkbox"])::placeholder {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1 !important;
}

.campaign-hero-form input:not([type="checkbox"]):focus,
.campaign-hero-form input:not([type="checkbox"]):focus-visible,
.campaign-form--hero input:not([type="checkbox"]):focus,
.campaign-form--hero input:not([type="checkbox"]):focus-visible {
    outline: none !important;
    border: 3px solid #ffffff !important;
    box-shadow: none !important;
}

.campaign-hero-form__actions {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.85rem !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0.05rem 0 0 !important;
}

.campaign-hero-form__volunteer,
.campaign-hero-form__actions .campaign-hero-form__volunteer,
.campaign-form--hero .campaign-hero-form__volunteer {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font: 600 0.95rem/1.25 "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
}

.campaign-hero-form__volunteer span {
    display: inline !important;
    font: inherit !important;
    line-height: inherit !important;
}

.campaign-hero-form input[type="checkbox"],
.campaign-form--hero input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

.campaign-hero-form input[type="checkbox"]:checked,
.campaign-form--hero input[type="checkbox"]:checked {
    background: #D03330 !important;
    border-color: #ffffff !important;
    box-shadow: inset 0 0 0 4px #D03330 !important;
}

.campaign-hero-form__submit,
.campaign-hero-form__actions .campaign-hero-form__submit,
.campaign-form--hero .campaign-hero-form__submit {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 108px !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0.75rem 1.35rem !important;
    align-self: center !important;
}

.campaign-hero-form__disclaimer {
    grid-area: disclaimer !important;
    display: block !important;
    width: min(100%, 720px) !important;
    margin: 0.08rem 0 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font: 400 0.72rem/1.35 "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

@media (max-width: 700px) {
    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "first last"
            "phone email"
            "actions actions"
            "disclaimer disclaimer" !important;
    }

    .campaign-hero-form__actions {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 520px) {
    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "first"
            "last"
            "phone"
            "email"
            "actions"
            "disclaimer" !important;
    }

    .campaign-hero-form__actions {
        align-items: flex-start !important;
    }
}

/* ============================================================
   V23 HERO FORM SCALE + GROUP ALIGNMENT
   - Treat the logo/form/disclosure as one centered content group.
   - Contact fields are roughly half the previous desktop width.
   - Volunteer + JOIN stay centered beneath the contact fields.
   ============================================================ */

@media (min-width: 782px) {
    .front-page .campaign-hero__stage .campaign-hero__copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .front-page .campaign-hero__logo {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        width: 390px !important;
        max-width: 390px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-self: center !important;
    }

    .campaign-hero-form__actions {
        width: max-content !important;
        max-width: 620px !important;
        justify-self: center !important;
        align-self: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    .campaign-hero-form__volunteer,
    .campaign-hero-form__actions .campaign-hero-form__volunteer,
    .campaign-form--hero .campaign-hero-form__volunteer {
        white-space: nowrap !important;
        font-size: 0.88rem !important;
    }

    .campaign-hero-form__submit,
    .campaign-hero-form__actions .campaign-hero-form__submit,
    .campaign-form--hero .campaign-hero-form__submit {
        min-width: 92px !important;
        padding-inline: 1.05rem !important;
    }

    .campaign-hero-form__disclaimer {
        width: 520px !important;
        max-width: 520px !important;
        justify-self: center !important;
        text-align: center !important;
    }
}

/* ============================================================
   V217 — RESTORE THE APPROVED PRIORITY SCALE + WAVE OWNERSHIP
   The editable native list retains the prior visual hierarchy:
   large 01–05 markers, thin red ticks, and the centered shared
   list column.  Do not let the generic list fallback override it.
   ============================================================ */

/* Priority list: match the approved large desktop editorial treatment. */
body.home .front-page .campaign-priorities-section__list.wp-block-list {
    display: block !important;
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin: clamp(1.45rem, 2vw, 1.85rem) auto 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body.home .front-page .campaign-priorities-section__list.wp-block-list > li {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 1.5vw, 1.4rem) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(1rem, 1.35vw, 1.3rem) 0 !important;
    border-top: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.65rem, 2.15vw, 2.15rem) !important;
    line-height: 1.08 !important;
}

body.home .front-page .campaign-priorities-section__list.wp-block-list > li + li {
    border-top: 1px solid rgba(255,255,255,0.32) !important;
}

body.home .front-page .campaign-priorities-section__index {
    display: block !important;
    grid-column: 1 !important;
    position: relative !important;
    min-height: 1.05em !important;
    padding-left: 16px !important;
    border-left: 0 !important;
    color: rgba(255,255,255,0.96) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: inherit !important;
}

body.home .front-page .campaign-priorities-section__index::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 3px !important;
    height: 1.05em !important;
    background: #D03330 !important;
    transform: translateY(-50%) !important;
}

body.home .front-page .campaign-priorities-section__label {
    display: block !important;
    grid-column: 2 !important;
    color: #ffffff !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    letter-spacing: -0.018em !important;
    line-height: inherit !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__list.wp-block-list {
        width: min(100%, 680px) !important;
    }

    body.home .front-page .campaign-priorities-section__list.wp-block-list > li {
        grid-template-columns: 3.15ch minmax(0, 1fr) !important;
        gap: 0.8rem !important;
        padding: 1rem 0 !important;
        font-size: clamp(1.3rem, 6vw, 1.58rem) !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        padding-left: 11px !important;
    }
}

/* The red section owns its upper divider.  This avoids the hero stacking
   context hiding the wave at intermediate and ultrawide viewport widths. */
body.home .front-page .campaign-announcement {
    --campaign-announcement-top-wave: clamp(78px, 8vw, 118px);
}

body.home .front-page .campaign-announcement::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 9 !important;
    top: calc(var(--campaign-announcement-top-wave) * -1 + 1px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--campaign-announcement-top-wave) !important;
    pointer-events: none !important;
    background: url("../images/hero-section-wave.svg") center bottom / 100% 100% no-repeat !important;
}

/* Keep every subsequent divider above its adjoining solid color field. */
body.home .front-page .campaign-announcement::after {
    z-index: 12 !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section::before,
body.home .front-page .campaign-section-four.campaign-donation-section::after {
    display: block !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-announcement {
        --campaign-announcement-top-wave: clamp(58px, 14vw, 82px);
    }
}

@media (max-width: 781px) {
    .front-page .campaign-hero__stage .campaign-hero__copy {
        align-items: center !important;
    }

    .front-page .campaign-hero__logo {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .campaign-hero-form__disclaimer {
        text-align: center !important;
    }
}

/* ============================================================
   V24 HEADER SCROLL CLEANUP + HERO BALANCE + FORM ACTION STACK
   - Scrolled header is fully opaque with no resting glow bleed.
   - Scrolled header spans flush to the viewport edges at the top.
   - Volunteer prompt centers above JOIN.
   - Slightly reduce/right-shift portrait and nudge copy left to
     rebalance the hero composition.
   ============================================================ */

/* Clean, fully opaque scrolled header. */
body.is-campaign-nav-scrolled .site-header,
body.home.is-campaign-nav-scrolled .site-header {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #16325A !important;
    background-color: #16325A !important;
    overflow: hidden !important;
}

body.is-campaign-nav-scrolled .site-header::before,
body.home.is-campaign-nav-scrolled .site-header::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body.is-campaign-nav-scrolled .site-navigation,
body.home.is-campaign-nav-scrolled .site-navigation,
body.is-campaign-nav-scrolled .site-navigation.has-background,
body.home.is-campaign-nav-scrolled .site-navigation.has-background {
    background: #16325A !important;
    background-color: #16325A !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 20px rgba(7, 17, 31, 0.18), inset 0 -1px 0 rgba(255,255,255,0.10) !important;
}

body.admin-bar.is-campaign-nav-scrolled .site-header,
body.admin-bar.home.is-campaign-nav-scrolled .site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 46px !important;
    }
}

/* Volunteer question centered with JOIN directly underneath. */
.campaign-hero-form__actions {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
}

.campaign-hero-form__volunteer,
.campaign-hero-form__actions .campaign-hero-form__volunteer,
.campaign-form--hero .campaign-hero-form__volunteer {
    justify-content: center !important;
    text-align: center !important;
    min-height: 34px !important;
}

.campaign-hero-form__submit,
.campaign-hero-form__actions .campaign-hero-form__submit,
.campaign-form--hero .campaign-hero-form__submit {
    align-self: center !important;
    margin-inline: auto !important;
}

/* Subtle desktop balance adjustment: less visual weight on the right. */
@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 60% auto !important;
        background-position: center, calc(100% + 92px) -24px !important;
    }

    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: clamp(36px, 5vw, 88px) !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 64% auto !important;
        background-position: center, calc(100% + 72px) -20px !important;
    }

    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: clamp(28px, 4.5vw, 52px) !important;
    }
}

/* ============================================================
   V25 HERO HORIZONTAL REBALANCE
   - Move the entire hero content group farther left.
   - Move the portrait farther left while slightly reducing its
     scale so more of the image remains visible.
   ============================================================ */

@media (min-width: 982px) {
    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: clamp(16px, 3.25vw, 58px) !important;
    }

    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 58% auto !important;
        background-position: center, calc(100% + 12px) -24px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: clamp(18px, 3.5vw, 38px) !important;
    }

    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 62% auto !important;
        background-position: center, calc(100% + 8px) -20px !important;
    }
}

/* ============================================================
   V26 HERO LEFT SHIFT + TIGHTER FORM RHYTHM
   - Move the full logo/form group farther left on desktop/tablet.
   - Tighten spacing from fields -> volunteer -> JOIN -> disclaimer.
   ============================================================ */

@media (min-width: 982px) {
    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: clamp(0px, 1.25vw, 22px) !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    .front-page .campaign-hero__stage .campaign-hero__copy {
        left: clamp(8px, 1.75vw, 20px) !important;
    }
}

.campaign-hero-form,
.campaign-form--hero.campaign-hero-form {
    row-gap: 0.38rem !important;
}

.campaign-hero-form__actions {
    gap: 0.24rem !important;
    margin-top: 0 !important;
}

.campaign-hero-form__volunteer,
.campaign-hero-form__actions .campaign-hero-form__volunteer,
.campaign-form--hero .campaign-hero-form__volunteer {
    min-height: 28px !important;
    margin: 0 !important;
}

.campaign-hero-form__submit,
.campaign-hero-form__actions .campaign-hero-form__submit,
.campaign-form--hero .campaign-hero-form__submit {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.campaign-hero-form__disclaimer {
    margin-top: 0 !important;
}

/* ============================================================
   V27 SOFTER RESTING HEADER GLOW
   Resting state keeps the header transparent, but softens and
   lengthens the navy fade so it blends into the hero more gently.
   The existing solid scrolled state remains unchanged.
   ============================================================ */

body.home:not(.is-campaign-nav-scrolled) .site-header,
body:not(.is-campaign-nav-scrolled) .site-header {
    background: transparent !important;
    background-color: transparent !important;
}

body.home:not(.is-campaign-nav-scrolled) .site-navigation,
body.home:not(.is-campaign-nav-scrolled) .site-navigation.has-background,
body:not(.is-campaign-nav-scrolled) .site-navigation,
body:not(.is-campaign-nav-scrolled) .site-navigation.has-background {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.home:not(.is-campaign-nav-scrolled) .site-header::before,
body:not(.is-campaign-nav-scrolled) .site-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: calc(var(--campaign-header-height-v12) + 145px) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(22, 50, 90, 0.72) 0%,
        rgba(22, 50, 90, 0.60) 18%,
        rgba(22, 50, 90, 0.43) 38%,
        rgba(22, 50, 90, 0.27) 56%,
        rgba(22, 50, 90, 0.14) 72%,
        rgba(22, 50, 90, 0.05) 87%,
        rgba(22, 50, 90, 0) 100%
    ) !important;
    box-shadow: none !important;
    transition: opacity 180ms ease, height 180ms ease !important;
}

/* Preserve the clean, fully solid header once scrolling begins. */
body.is-campaign-nav-scrolled .site-header::before,
body.home.is-campaign-nav-scrolled .site-header::before {
    content: none !important;
    display: none !important;
}


/* ============================================================
   v28 — TIGHTER RESTING HEADER GLOW
   Keep the glow strong at the very top of the viewport, but
   make it fall off quickly instead of extending deep into hero.
   Scrolled state remains fully solid #16325A.
   ============================================================ */

body.home:not(.is-campaign-nav-scrolled) .site-header::before,
body:not(.is-campaign-nav-scrolled) .site-header::before {
    height: calc(var(--campaign-header-height-v12) + 42px) !important;
    background: linear-gradient(
        180deg,
        rgba(22, 50, 90, 0.96) 0%,
        rgba(22, 50, 90, 0.92) 14%,
        rgba(22, 50, 90, 0.72) 34%,
        rgba(22, 50, 90, 0.42) 56%,
        rgba(22, 50, 90, 0.16) 76%,
        rgba(22, 50, 90, 0.04) 90%,
        rgba(22, 50, 90, 0) 100%
    ) !important;
}

/* Once scrolling begins, remove the resting glow entirely. */
body.is-campaign-nav-scrolled .site-header::before,
body.home.is-campaign-nav-scrolled .site-header::before {
    content: none !important;
    display: none !important;
    background: none !important;
}


/* ============================================================
   V29 — HEADER STATE SWITCH + FRAME BOUNDS
   1) Remove the visible "in-between" scroll state:
      - no animated top/left/right/glow/background interpolation
      - resting -> solid switch happens immediately
   2) Keep the sticky header inside the left/right site frame.
   3) Remove only the TOP frame gap once scrolling starts.
   ============================================================ */

/* The resting header stays inside the frame. Do not animate its geometry. */
.site-header,
body.home .site-header,
body.home:not(.is-campaign-nav-scrolled) .site-header {
    left: var(--campaign-frame-v8) !important;
    right: var(--campaign-frame-v8) !important;
    width: auto !important;
    transition: none !important;
}

/* Resting glow should also switch off instantly, not fade during the threshold. */
body:not(.is-campaign-nav-scrolled) .site-header::before,
body.home:not(.is-campaign-nav-scrolled) .site-header::before {
    transition: none !important;
}

/* As soon as scrolling begins:
   - snap to the top
   - KEEP the left/right frame gutters
   - use only the solid navy header
*/
body.is-campaign-nav-scrolled .site-header,
body.home.is-campaign-nav-scrolled .site-header {
    top: 0 !important;
    left: var(--campaign-frame-v8) !important;
    right: var(--campaign-frame-v8) !important;
    width: auto !important;
    margin: 0 !important;
    background: #16325A !important;
    background-color: #16325A !important;
    transition: none !important;
    overflow: hidden !important;
}

/* WordPress admin toolbar offset, while preserving frame gutters. */
body.admin-bar.is-campaign-nav-scrolled .site-header,
body.admin-bar.home.is-campaign-nav-scrolled .site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 46px !important;
    }
}

/* Absolutely no resting glow survives in the solid state. */
body.is-campaign-nav-scrolled .site-header::before,
body.home.is-campaign-nav-scrolled .site-header::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Solid nav surface: no blur/translucency or animated bleed. */
body.is-campaign-nav-scrolled .site-navigation,
body.home.is-campaign-nav-scrolled .site-navigation,
body.is-campaign-nav-scrolled .site-navigation.has-background,
body.home.is-campaign-nav-scrolled .site-navigation.has-background {
    background: #16325A !important;
    background-color: #16325A !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}


/* ============================================================
   V38 — HERO / SECOND-SECTION WAVE DIVIDER
   Added to the stable V29 baseline. No header, hero-position,
   form, or sticky-scroll behavior is changed here.
   ============================================================ */

body.home .front-page .campaign-hero::after {
    content: "" !important;
    position: absolute !important;
    z-index: 8 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    display: block !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background-image: url("../images/hero-section-wave.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
}

/* The next section uses the exact same red so the SVG joins it seamlessly. */
body.home .front-page .campaign-announcement {
    background-color: #D03330 !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero::after {
        height: clamp(58px, 14vw, 82px) !important;
    }
}


/* ============================================================
   V39 — EXPANDED SECOND SECTION
   Content/hierarchy only. V38 wave + V29 header behavior remain intact.
   ============================================================ */

body.home .front-page .campaign-announcement {
    padding: clamp(3.5rem, 6vw, 5.75rem) clamp(2rem, 7vw, 7rem) clamp(4rem, 6.5vw, 6.25rem) !important;
}

body.home .front-page .campaign-announcement__inner {
    width: min(100%, 1080px) !important;
    margin: 0 auto !important;
}

body.home .front-page .campaign-announcement__title {
    margin: 0 0 clamp(1rem, 1.8vw, 1.35rem) !important;
    color: #ffffff !important;
    font-size: clamp(2.35rem, 4.5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

body.home .front-page .campaign-announcement__text {
    max-width: 900px !important;
    margin: 0 auto clamp(1.15rem, 2vw, 1.65rem) !important;
    color: #ffffff !important;
    font-size: clamp(1.3rem, 2vw, 1.9rem) !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em !important;
    text-align: center !important;
}

body.home .front-page .campaign-announcement__text strong {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.home .front-page .campaign-announcement__body {
    max-width: 880px !important;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: clamp(1.05rem, 1.4vw, 1.28rem) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: -0.005em !important;
    text-align: center !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-announcement {
        padding: 3.25rem 1.35rem 3.75rem !important;
    }

    body.home .front-page .campaign-announcement__title {
        font-size: clamp(2rem, 10vw, 3.15rem) !important;
        line-height: 0.98 !important;
    }

    body.home .front-page .campaign-announcement__text {
        font-size: clamp(1.15rem, 5.5vw, 1.45rem) !important;
    }

    body.home .front-page .campaign-announcement__body {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}


/* ============================================================
   V40 — PRIMARY TYPEFACE: SOURCE SANS 3
   Source Sans 3 is the current family name for the Source Sans Pro line.
   Roboto Slab remains only where the theme intentionally uses a serif accent.
   ============================================================ */

body,
button,
input,
select,
textarea,
.wp-site-blocks,
.site-header,
.site-footer,
.campaign-announcement,
.campaign-hero-form {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}


/* ============================================================
   V41 — FORCE SOURCE SANS 3 IN SECOND SECTION
   Explicit descendant rules are needed because heading styles
   elsewhere in the theme can override inherited font-family.
   ============================================================ */

body.home .front-page .campaign-announcement,
body.home .front-page .campaign-announcement__inner,
body.home .front-page .campaign-announcement__title,
body.home .front-page .campaign-announcement__text,
body.home .front-page .campaign-announcement__text strong,
body.home .front-page .campaign-announcement__body {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}


/* ============================================================
   V42 — SECOND SECTION LEFT RAIL
   - Left-align title, candidate-status line, and body copy.
   - Visually align the section rail with the hero logo on desktop.
   - Keep the candidate-status phrase bold + italic.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-announcement {
        padding-left: 0 !important;
        padding-right: clamp(2rem, 7vw, 7rem) !important;
    }

    body.home .front-page .campaign-announcement__inner {
        width: min(880px, calc(100% - clamp(118px, 10.25vw, 154px) - 48px)) !important;
        max-width: 880px !important;
        margin-left: clamp(118px, 10.25vw, 154px) !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-announcement {
        padding-left: 0 !important;
        padding-right: 2.5rem !important;
    }

    body.home .front-page .campaign-announcement__inner {
        width: min(760px, calc(100% - clamp(82px, 9vw, 108px) - 36px)) !important;
        max-width: 760px !important;
        margin-left: clamp(82px, 9vw, 108px) !important;
        margin-right: 0 !important;
    }
}

body.home .front-page .campaign-announcement__title,
body.home .front-page .campaign-announcement__text,
body.home .front-page .campaign-announcement__body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

body.home .front-page .campaign-announcement__text {
    max-width: 860px !important;
}

body.home .front-page .campaign-announcement__body {
    max-width: 820px !important;
}

body.home .front-page .campaign-announcement__text strong,
body.home .front-page .campaign-announcement__text strong em {
    font-style: italic !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-announcement {
        padding-left: 1.35rem !important;
        padding-right: 1.35rem !important;
    }

    body.home .front-page .campaign-announcement__inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}


/* ============================================================
   V43 — NARROWER SECOND-SECTION COPY COLUMN
   Leaves a substantial open area on the right for a future image.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-announcement__inner {
        width: min(620px, calc(100% - clamp(118px, 10.25vw, 154px) - 48px)) !important;
        max-width: 620px !important;
    }

    body.home .front-page .campaign-announcement__text {
        max-width: 620px !important;
    }

    body.home .front-page .campaign-announcement__body {
        max-width: 590px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-announcement__inner {
        width: min(560px, calc(100% - clamp(82px, 9vw, 108px) - 36px)) !important;
        max-width: 560px !important;
    }

    body.home .front-page .campaign-announcement__text,
    body.home .front-page .campaign-announcement__body {
        max-width: 100% !important;
    }
}


/* ============================================================
   V44 — SECOND-SECTION IMAGE
   Adds a right-side campaign photo with rounded corners and a
   subtle upward overlap into the hero/wave transition.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-announcement {
        position: relative !important;
        overflow: visible !important;
    }

    body.home .front-page .campaign-announcement__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 620px) minmax(320px, 460px) !important;
        align-items: start !important;
        column-gap: clamp(3rem, 5vw, 5.5rem) !important;
        width: min(1180px, calc(100% - clamp(118px, 10.25vw, 154px) - 48px)) !important;
        max-width: 1180px !important;
        margin-left: clamp(118px, 10.25vw, 154px) !important;
        margin-right: 0 !important;
    }

    body.home .front-page .campaign-announcement__copy {
        width: 100% !important;
        max-width: 620px !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: relative !important;
        z-index: 12 !important;
        align-self: start !important;
        width: 100% !important;
        max-width: 440px !important;
        margin: -92px 0 0 !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 42px rgba(8, 25, 48, 0.20) !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-announcement__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
        align-items: start !important;
        column-gap: 2.5rem !important;
        width: min(860px, calc(100% - clamp(82px, 9vw, 108px) - 36px)) !important;
        max-width: 860px !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: relative !important;
        z-index: 12 !important;
        width: 100% !important;
        margin: -68px 0 0 !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 34px rgba(8, 25, 48, 0.18) !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-announcement__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    body.home .front-page .campaign-announcement__media {
        order: -1 !important;
        width: min(100%, 420px) !important;
        margin: -54px auto 0 !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 18px !important;
        box-shadow: 0 12px 30px rgba(8, 25, 48, 0.18) !important;
    }
}


/* ============================================================
   V45 — NEW HERO PORTRAIT + SECTION 2->3 WAVE + BLUE SECTION 3
   Keeps the V29 sticky-header behavior and existing V38 first wave.
   ============================================================ */

/* --- Hero portrait: use the newly bundled portrait everywhere. --- */
body.home .front-page .campaign-hero,
body.home.admin-bar .front-page .campaign-hero {
    background-image:
        linear-gradient(
            90deg,
            #16325A 0%,
            #16325A 32%,
            rgba(22, 50, 90, 0.995) 40%,
            rgba(22, 50, 90, 0.96) 48%,
            rgba(22, 50, 90, 0.86) 57%,
            rgba(22, 50, 90, 0.68) 65%,
            rgba(22, 50, 90, 0.48) 72%,
            rgba(22, 50, 90, 0.30) 78%,
            rgba(22, 50, 90, 0.16) 83%,
            rgba(22, 50, 90, 0.07) 87%,
            rgba(22, 50, 90, 0) 92%
        ),
        url("../images/hero-home.jpg") !important;
    background-repeat: no-repeat !important;
}

/* The new portrait is taller/more centered than the old hero photo,
   so give it a slightly larger image layer while preserving the same
   general right-side composition. */
@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 52% auto !important;
        background-position: center, calc(100% + 2px) -10px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 58% auto !important;
        background-position: center, calc(100% + 4px) -8px !important;
    }
}

/* --- Section 2 / Section 3 transition --- */
body.home .front-page .campaign-announcement {
    position: relative !important;
    z-index: 3 !important;
    overflow: visible !important;
    padding-bottom: clamp(4.5rem, 7vw, 6.75rem) !important;
}

/* Blue wave visually cuts into the bottom of the red section. */
body.home .front-page .campaign-announcement::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: clamp(84px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

/* Blank Section 3 */
body.home .front-page .campaign-section-three {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: clamp(360px, 42vw, 560px) !important;
    margin: 0 !important;
    background: #16325A !important;
}

/* --- Desktop: the chamber image spans BOTH boundaries.
   It begins above Section 2 (into the hero) and continues below
   Section 2 (into Section 3) regardless of copy height. --- */
@media (min-width: 982px) {
    body.home .front-page .campaign-announcement__inner {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 560px) minmax(360px, 440px) !important;
        column-gap: clamp(3.5rem, 6vw, 6.5rem) !important;
        width: min(1160px, calc(100% - clamp(118px, 10.25vw, 154px) - 40px)) !important;
        max-width: 1160px !important;
        min-height: 400px !important;
    }

    body.home .front-page .campaign-announcement__copy {
        width: 100% !important;
        max-width: 560px !important;
        position: relative !important;
        z-index: 6 !important;
    }

    body.home .front-page .campaign-announcement__text {
        max-width: 560px !important;
    }

    body.home .front-page .campaign-announcement__body {
        max-width: 530px !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: absolute !important;
        z-index: 12 !important;
        top: -112px !important;
        right: 0 !important;
        bottom: -138px !important;
        width: min(430px, 37vw) !important;
        max-width: 430px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    body.home .front-page .campaign-announcement__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 26px !important;
        box-shadow: 0 20px 50px rgba(8, 25, 48, 0.24) !important;
    }
}

/* Tablet: still overlap both boundaries, but less aggressively. */
@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-announcement__inner {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 330px) !important;
        column-gap: 2.5rem !important;
        min-height: 390px !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: absolute !important;
        z-index: 12 !important;
        top: -76px !important;
        right: 0 !important;
        bottom: -96px !important;
        width: 320px !important;
        max-width: 38vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        border-radius: 22px !important;
        box-shadow: 0 16px 38px rgba(8, 25, 48, 0.22) !important;
    }
}

/* Mobile: keep the layout stable; image overlaps the top transition and
   nudges slightly into the blue section without becoming an absolute card. */
@media (max-width: 781px) {
    body.home .front-page .campaign-announcement {
        padding-bottom: 4.75rem !important;
    }

    body.home .front-page .campaign-announcement::after {
        height: clamp(64px, 15vw, 84px) !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: relative !important;
        z-index: 12 !important;
        order: -1 !important;
        width: min(100%, 400px) !important;
        margin: -58px auto -28px !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        border-radius: 20px !important;
    }

    body.home .front-page .campaign-section-three {
        min-height: 300px !important;
    }
}


/* ============================================================
   V46 — HERO PORTRAIT CROP + SECOND-SECTION BALANCE
   - Zoom/crop the new hero portrait more aggressively.
   - Reduce the candidate-status line size.
   - Shorten the red section enough for the photo to bridge
     cleanly into the blue third section.
   ============================================================ */

/* HERO: larger portrait with a tighter crop. */
@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 62% auto !important;
        background-position: center, calc(100% + 70px) -74px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 66% auto !important;
        background-position: center, calc(100% + 52px) -58px !important;
    }
}

/* SECTION 2: tighten copy hierarchy and keep the image moving through
   the red/blue transition instead of being visually trapped inside red. */
@media (min-width: 982px) {
    body.home .front-page .campaign-announcement {
        padding-top: clamp(3rem, 4.5vw, 4.4rem) !important;
        padding-bottom: clamp(3.7rem, 5vw, 4.8rem) !important;
    }

    body.home .front-page .campaign-announcement__inner {
        grid-template-columns: minmax(0, 540px) minmax(360px, 450px) !important;
        min-height: 330px !important;
    }

    body.home .front-page .campaign-announcement__copy {
        max-width: 540px !important;
    }

    body.home .front-page .campaign-announcement__text {
        max-width: 540px !important;
        margin-bottom: 1rem !important;
        font-size: clamp(1.02rem, 1.25vw, 1.28rem) !important;
        line-height: 1.28 !important;
    }

    body.home .front-page .campaign-announcement__body {
        max-width: 515px !important;
        font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
        line-height: 1.52 !important;
    }

    body.home .front-page .campaign-announcement__media {
        top: -104px !important;
        right: 0 !important;
        bottom: -84px !important;
        width: min(440px, 38vw) !important;
        max-width: 440px !important;
    }

    body.home .front-page .campaign-announcement__media img {
        border-radius: 26px !important;
        object-position: center center !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-announcement__inner {
        min-height: 350px !important;
    }

    body.home .front-page .campaign-announcement__text {
        font-size: clamp(1rem, 1.55vw, 1.18rem) !important;
        line-height: 1.28 !important;
    }

    body.home .front-page .campaign-announcement__media {
        top: -70px !important;
        bottom: -68px !important;
        width: 330px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-announcement__text {
        font-size: clamp(1rem, 4.7vw, 1.25rem) !important;
        line-height: 1.3 !important;
    }

    body.home .front-page .campaign-announcement__media {
        margin-top: -52px !important;
        margin-bottom: -22px !important;
    }
}


/* ============================================================
   V47 — MORE HERO CROP
   - Enlarge/crop the hero portrait further.
   ============================================================ */
@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 70% auto !important;
        background-position: center, calc(100% + 92px) -92px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 72% auto !important;
        background-position: center, calc(100% + 68px) -74px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, auto 91% !important;
        background-position: center, 108% 100% !important;
    }
}


/* ============================================================
   V48 — INVERSE SECTION 2/3 WAVE DIVIDER
   - Move the red/blue divider responsibility to Section 3 so the
     red second section keeps more consistent interior spacing.
   - Preserve the chamber image overlap into the blue third section.
   ============================================================ */

body.home .front-page .campaign-announcement {
    padding-bottom: clamp(2.75rem, 4.5vw, 4.1rem) !important;
}

/* Remove the old bottom-cut wave from the red section. */
body.home .front-page .campaign-announcement::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Let the blue third section push its own wavy top edge upward
   into the red section, which keeps the red section's spacing more consistent. */
body.home .front-page .campaign-section-three {
    --section-three-wave-height: clamp(84px, 8vw, 118px);
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: clamp(360px, 42vw, 560px) !important;
    background: #16325A !important;
}

body.home .front-page .campaign-section-three::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--section-three-wave-height) * -1) !important;
    width: 100% !important;
    height: var(--section-three-wave-height) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three {
        --section-three-wave-height: clamp(64px, 15vw, 84px);
    }
}


/* ============================================================
   V49 — HERO PORTRAIT CROPPED TIGHTER
   - Make Johnny read larger in the hero.
   - Keep the portrait anchored on the right while enlarging it.
   ============================================================ */
@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 77% auto !important;
        background-position: center, calc(100% + 88px) -116px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 80% auto !important;
        background-position: center, calc(100% + 62px) -94px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, auto 98% !important;
        background-position: center, 110% 100% !important;
    }
}


/* ============================================================
   V50 — PARALLEL / INVERSE SECOND WAVE
   The Section 2 -> Section 3 divider now uses the exact same
   curve geometry and height as the Hero -> Section 2 divider,
   with the colors reversed. This keeps the red band's visual
   thickness consistent across the page.
   ============================================================ */
body.home .front-page .campaign-section-three {
    --section-three-wave-height: clamp(78px, 8vw, 118px) !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three {
        --section-three-wave-height: clamp(58px, 14vw, 82px) !important;
    }
}


/* ============================================================
   V51 — ACTUAL VISIBLE SECTION 2 -> SECTION 3 WAVE
   The prior wave lived inside Section 3's lower stacking context,
   so the red Section 2 painted over it. Put the blue divider on
   Section 2 itself, above its red background, so it is guaranteed
   to be visible while preserving the overlapping photo.
   ============================================================ */

/* Disable the hidden Section 3 pseudo-wave. */
body.home .front-page .campaign-section-three::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Give Section 2 the actual visible blue divider. */
body.home .front-page .campaign-announcement {
    position: relative !important;
    z-index: 3 !important;
    overflow: visible !important;
    padding-bottom: clamp(4rem, 5.6vw, 5.25rem) !important;
}

body.home .front-page .campaign-announcement::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 8 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background-image: url("../images/section-two-wave.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
}

/* Section 3 starts directly under the divider. */
body.home .front-page .campaign-section-three {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    background: #16325A !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-announcement::after {
        height: clamp(58px, 14vw, 82px) !important;
    }
}


/* ============================================================
   V54 — SOFTER PARALLEL WAVES, NO EXTRA BAR
   Based directly on V51. Both SVG assets now use the same gentler
   curve. No clip-path masking is used, so there is no exposed red
   strip beneath the lower divider.
   ============================================================ */

body.home .front-page .campaign-hero::after,
body.home .front-page .campaign-announcement::after {
    height: clamp(72px, 7vw, 104px) !important;
    clip-path: none !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero::after,
    body.home .front-page .campaign-announcement::after {
        height: clamp(54px, 12vw, 74px) !important;
    }
}


/* ============================================================
   V55 — SECTION 3 DONATION + SECTION 4 WHY JOHNNY + HARSH WAVES
   ============================================================ */

/* Restore the stronger original wave depth from the V51 direction. */
body.home .front-page .campaign-hero::after,
body.home .front-page .campaign-announcement::after {
    height: clamp(78px, 8vw, 118px) !important;
    clip-path: none !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero::after,
    body.home .front-page .campaign-announcement::after {
        height: clamp(58px, 14vw, 82px) !important;
    }
}

/* ---------------- Section 3: centered donation ---------------- */
body.home .front-page .campaign-section-three.campaign-donation-section {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: clamp(500px, 48vw, 650px) !important;
    margin: 0 !important;
    padding: clamp(8rem, 11vw, 10.5rem) clamp(1.5rem, 5vw, 5rem) clamp(7rem, 9vw, 9rem) !important;
    background: #16325A !important;
    color: #ffffff !important;
    text-align: center !important;
    overflow: visible !important;
}

body.home .front-page .campaign-donation-section__inner {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.home .front-page .campaign-donation-section__eyebrow {
    margin: 0 0 0.75rem !important;
    color: rgba(255,255,255,0.76) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

body.home .front-page .campaign-donation-section__title {
    max-width: 700px !important;
    margin: 0 0 1rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.5rem, 4.5vw, 4.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.98 !important;
    text-align: center !important;
}

body.home .front-page .campaign-donation-section__body {
    max-width: 660px !important;
    margin: 0 0 1.75rem !important;
    color: rgba(255,255,255,0.9) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem) !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

body.home .front-page .campaign-donation-section__amounts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    width: min(100%, 560px) !important;
    margin: 0 0 0.75rem !important;
}

body.home .front-page .campaign-donation-section__amounts a,
body.home .front-page .campaign-donation-section__primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    border-radius: 5px !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease !important;
}

body.home .front-page .campaign-donation-section__amounts a {
    border: 2px solid rgba(255,255,255,0.85) !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
}

body.home .front-page .campaign-donation-section__amounts a:hover,
body.home .front-page .campaign-donation-section__amounts a:focus-visible {
    background: rgba(255,255,255,0.10) !important;
    transform: translateY(-1px) !important;
}

body.home .front-page .campaign-donation-section__primary {
    width: min(100%, 560px) !important;
    margin: 0 !important;
    border: 2px solid #D03330 !important;
    background: #D03330 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

body.home .front-page .campaign-donation-section__primary:hover,
body.home .front-page .campaign-donation-section__primary:focus-visible {
    transform: translateY(-1px) !important;
}

body.home .front-page .campaign-donation-section__disclaimer {
    max-width: 620px !important;
    margin: 1rem 0 0 !important;
    color: rgba(255,255,255,0.62) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.74rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
}

/* ---------------- Section 4: same red/wave structure as Section 2 ---------------- */
body.home .front-page .campaign-section-four {
    --campaign-section-four-wave: clamp(78px, 8vw, 118px);
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(5.25rem, 7vw, 7rem) clamp(2rem, 7vw, 7rem) clamp(6rem, 8vw, 8rem) !important;
    background: #D03330 !important;
    color: #ffffff !important;
    overflow: visible !important;
}

/* Red wave rises into Section 3. */
body.home .front-page .campaign-section-four::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--campaign-section-four-wave) * -1 + 1px) !important;
    width: 100% !important;
    height: var(--campaign-section-four-wave) !important;
    pointer-events: none !important;
    background: url("../images/hero-section-wave.svg") center bottom / 100% 100% no-repeat !important;
}

/* Blue wave at the bottom, matching Section 2's lower divider. */
body.home .front-page .campaign-section-four::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: var(--campaign-section-four-wave) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

body.home .front-page .campaign-section-four__inner {
    position: relative !important;
    z-index: 5 !important;
    width: min(100%, 900px) !important;
    margin-left: clamp(118px, 10.25vw, 154px) !important;
    margin-right: auto !important;
}

body.home .front-page .campaign-section-four__title {
    margin: 0 0 1.15rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.6rem, 4.6vw, 4.7rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.96 !important;
    text-align: left !important;
}

body.home .front-page .campaign-section-four__body {
    max-width: 790px !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.94) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.08rem, 1.45vw, 1.3rem) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* The next existing section is navy, so let the blue divider flow directly into it. */
body.home .front-page .campaign-section-four + .latest-updates {
    margin-top: 0 !important;
}

@media (max-width: 981px) and (min-width: 782px) {
    body.home .front-page .campaign-section-four__inner {
        width: min(100%, 760px) !important;
        margin-left: clamp(82px, 9vw, 108px) !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three.campaign-donation-section {
        min-height: 520px !important;
        padding: 6.5rem 1.35rem 6.5rem !important;
    }

    body.home .front-page .campaign-donation-section__amounts {
        width: min(100%, 420px) !important;
    }

    body.home .front-page .campaign-donation-section__primary {
        width: min(100%, 420px) !important;
    }

    body.home .front-page .campaign-section-four {
        --campaign-section-four-wave: clamp(58px, 14vw, 82px);
        padding: 4.5rem 1.35rem 5.5rem !important;
    }

    body.home .front-page .campaign-section-four__inner {
        width: 100% !important;
        margin: 0 !important;
    }

    body.home .front-page .campaign-section-four__title,
    body.home .front-page .campaign-section-four__body {
        text-align: left !important;
    }
}


/* ============================================================
   V56 — UPPERCASE SECTION TITLES + TIGHTER SECTION 3 TOP SPACING
   ============================================================ */

/* Keep section-heading treatment consistently uppercase. */
body.home .front-page .campaign-announcement__title,
body.home .front-page .campaign-donation-section__title,
body.home .front-page .campaign-section-four__title {
    text-transform: uppercase !important;
}

/* Section 3 had too much empty space above the centered donation content. */
body.home .front-page .campaign-section-three.campaign-donation-section {
    box-sizing: border-box !important;
    padding-top: clamp(4.5rem, 6vw, 5.75rem) !important;
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-section-three.campaign-donation-section {
        padding-top: 4.75rem !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three.campaign-donation-section {
        padding-top: 4.5rem !important;
    }
}


/* ============================================================
   V57 — SECTION 4 MATCHES SECTION 2 STRUCTURE
   Same left rail, copy width, spacing hierarchy, typography,
   red field and harsh wave treatment as the MEET JOHNNY section.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-section-four {
        box-sizing: border-box !important;
        min-height: 330px !important;
        padding:
            clamp(3rem, 4.5vw, 4.4rem)
            clamp(2rem, 7vw, 7rem)
            clamp(3.7rem, 5vw, 4.8rem)
            0 !important;
    }

    body.home .front-page .campaign-section-four__inner {
        position: relative !important;
        z-index: 5 !important;
        display: block !important;
        width: min(1160px, calc(100% - clamp(118px, 10.25vw, 154px) - 40px)) !important;
        max-width: 1160px !important;
        min-height: 330px !important;
        margin-left: clamp(118px, 10.25vw, 154px) !important;
        margin-right: 0 !important;
    }

    body.home .front-page .campaign-section-four__copy {
        width: 100% !important;
        max-width: 540px !important;
    }

    body.home .front-page .campaign-section-four__title {
        max-width: 540px !important;
        margin: 0 0 clamp(1rem, 1.8vw, 1.35rem) !important;
        font-size: clamp(2.35rem, 4.5vw, 4.5rem) !important;
        font-weight: 800 !important;
        line-height: 0.95 !important;
        letter-spacing: -0.025em !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    body.home .front-page .campaign-section-four__body {
        max-width: 515px !important;
        margin: 0 !important;
        font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
        font-weight: 400 !important;
        line-height: 1.52 !important;
        letter-spacing: -0.005em !important;
        text-align: left !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-section-four {
        min-height: 350px !important;
        padding: 3.5rem 2.5rem 4.25rem 0 !important;
    }

    body.home .front-page .campaign-section-four__inner {
        width: min(760px, calc(100% - clamp(82px, 9vw, 108px) - 36px)) !important;
        max-width: 760px !important;
        min-height: 350px !important;
        margin-left: clamp(82px, 9vw, 108px) !important;
        margin-right: 0 !important;
    }

    body.home .front-page .campaign-section-four__copy {
        max-width: 540px !important;
    }

    body.home .front-page .campaign-section-four__title {
        max-width: 540px !important;
        margin-bottom: 1.1rem !important;
        font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
        line-height: 0.97 !important;
    }

    body.home .front-page .campaign-section-four__body {
        max-width: 515px !important;
        font-size: clamp(1rem, 1.55vw, 1.18rem) !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-four {
        padding: 3.25rem 1.35rem 4.5rem !important;
    }

    body.home .front-page .campaign-section-four__inner {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    body.home .front-page .campaign-section-four__copy {
        width: 100% !important;
        max-width: none !important;
    }

    body.home .front-page .campaign-section-four__title {
        max-width: none !important;
        margin: 0 0 1rem !important;
        font-size: clamp(2rem, 10vw, 3.15rem) !important;
        line-height: 0.98 !important;
        text-align: left !important;
    }

    body.home .front-page .campaign-section-four__body {
        max-width: none !important;
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }
}


/* ============================================================
   V58 — TIGHTER SECTION 3 TOP SPACING
   Keep donation content horizontally centered, but stop vertically
   centering the whole block so the content can sit closer to the
   upper wave with a controlled top gap.
   ============================================================ */

body.home .front-page .campaign-section-three.campaign-donation-section {
    justify-content: flex-start !important;
    padding-top: clamp(2.25rem, 3vw, 3rem) !important;
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-section-three.campaign-donation-section {
        padding-top: 2.5rem !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three.campaign-donation-section {
        padding-top: 2.25rem !important;
    }
}


/* ============================================================
   V59 — SECTION 4 MEDIA / ESCAMBIA COUNTY AERIAL
   Mirror Section 2's two-column copy + image composition, including
   a rounded image that bridges the surrounding wave transitions.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-section-four {
        position: relative !important;
        overflow: visible !important;
        padding-top: clamp(3rem, 4.5vw, 4.4rem) !important;
        padding-bottom: clamp(4rem, 5.6vw, 5.25rem) !important;
    }

    body.home .front-page .campaign-section-four__inner {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 540px) minmax(360px, 450px) !important;
        column-gap: clamp(3.5rem, 6vw, 6.5rem) !important;
        width: min(1160px, calc(100% - clamp(118px, 10.25vw, 154px) - 40px)) !important;
        max-width: 1160px !important;
        min-height: 330px !important;
        margin-left: clamp(118px, 10.25vw, 154px) !important;
        margin-right: 0 !important;
    }

    body.home .front-page .campaign-section-four__copy {
        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        max-width: 540px !important;
    }

    body.home .front-page .campaign-section-four__media {
        position: absolute !important;
        z-index: 12 !important;
        top: -92px !important;
        right: 0 !important;
        bottom: -102px !important;
        width: min(440px, 38vw) !important;
        max-width: 440px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    body.home .front-page .campaign-section-four__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 26px !important;
        box-shadow: 0 20px 50px rgba(8, 25, 48, 0.24) !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-section-four__inner {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 330px) !important;
        column-gap: 2.5rem !important;
        min-height: 350px !important;
    }

    body.home .front-page .campaign-section-four__copy {
        max-width: 100% !important;
    }

    body.home .front-page .campaign-section-four__media {
        position: absolute !important;
        z-index: 12 !important;
        top: -64px !important;
        right: 0 !important;
        bottom: -76px !important;
        width: 320px !important;
        max-width: 38vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-section-four__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 22px !important;
        box-shadow: 0 16px 38px rgba(8, 25, 48, 0.22) !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-four__inner {
        display: flex !important;
        flex-direction: column !important;
    }

    body.home .front-page .campaign-section-four__media {
        position: relative !important;
        z-index: 12 !important;
        order: -1 !important;
        width: min(100%, 420px) !important;
        margin: -54px auto 1.75rem !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-section-four__media img {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 32px rgba(8, 25, 48, 0.20) !important;
    }
}


/* ============================================================
   V60 — HERO + SECTION 4 + NAV REFINEMENT
   - Enlarge/crop the hero portrait further.
   - Pull the navy blend off Johnny sooner so the portrait reads clearly.
   - Rework Section 4's aerial as a natural landscape card instead of
     stretching it through both wave boundaries.
   ============================================================ */

/* HERO: shorter/lighter left-to-right navy blend. */
body.home .front-page .campaign-hero,
body.home.admin-bar .front-page .campaign-hero {
    background-image:
        linear-gradient(
            90deg,
            #16325A 0%,
            #16325A 31%,
            rgba(22, 50, 90, 0.98) 37%,
            rgba(22, 50, 90, 0.88) 42%,
            rgba(22, 50, 90, 0.70) 47%,
            rgba(22, 50, 90, 0.50) 52%,
            rgba(22, 50, 90, 0.31) 57%,
            rgba(22, 50, 90, 0.16) 62%,
            rgba(22, 50, 90, 0.07) 67%,
            rgba(22, 50, 90, 0) 73%
        ),
        url("../images/hero-home.jpg") !important;
    background-repeat: no-repeat !important;
}

@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 88% auto !important;
        background-position: center, calc(100% + 112px) -168px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 88% auto !important;
        background-position: center, calc(100% + 76px) -122px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, auto 104% !important;
        background-position: center, 112% 100% !important;
    }
}

/* SECTION 4: keep the same red/wave language, but let the aerial behave
   like the landscape photograph it actually is. */
@media (min-width: 982px) {
    body.home .front-page .campaign-section-four {
        padding-top: clamp(4.75rem, 6vw, 6.25rem) !important;
        padding-bottom: clamp(5.25rem, 6.5vw, 6.75rem) !important;
    }

    body.home .front-page .campaign-section-four__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 500px) minmax(420px, 540px) !important;
        align-items: center !important;
        column-gap: clamp(3.75rem, 6vw, 6.5rem) !important;
        width: min(1180px, calc(100% - clamp(118px, 10.25vw, 154px) - 42px)) !important;
        max-width: 1180px !important;
        min-height: 360px !important;
        margin-left: clamp(118px, 10.25vw, 154px) !important;
        margin-right: 0 !important;
    }

    body.home .front-page .campaign-section-four__copy {
        width: 100% !important;
        max-width: 500px !important;
    }

    body.home .front-page .campaign-section-four__title {
        max-width: 500px !important;
        font-size: clamp(2.55rem, 4.1vw, 4.15rem) !important;
        line-height: 0.96 !important;
    }

    body.home .front-page .campaign-section-four__body {
        max-width: 490px !important;
        font-size: clamp(1rem, 1.13vw, 1.15rem) !important;
        line-height: 1.52 !important;
    }

    body.home .front-page .campaign-section-four__media {
        position: relative !important;
        z-index: 6 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: min(100%, 540px) !important;
        max-width: 540px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-4px) !important;
        pointer-events: none !important;
    }

    body.home .front-page .campaign-section-four__media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 3 / 2 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 42px rgba(8, 25, 48, 0.22) !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-section-four {
        padding-top: 4.5rem !important;
        padding-bottom: 5rem !important;
    }

    body.home .front-page .campaign-section-four__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
        align-items: center !important;
        column-gap: 2.25rem !important;
        min-height: 330px !important;
    }

    body.home .front-page .campaign-section-four__media {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 390px !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.home .front-page .campaign-section-four__media img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 2 !important;
        object-fit: cover !important;
        border-radius: 22px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-four__media {
        order: 0 !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 1.5rem auto 0 !important;
    }

    body.home .front-page .campaign-section-four__media img {
        aspect-ratio: 3 / 2 !important;
        object-fit: cover !important;
        border-radius: 18px !important;
    }
}


/* V60 injected HOME navigation item */
.primary-navigation .home-nav-item > .wp-block-navigation-item__content {
    color: #ffffff !important;
    font: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}


/* ============================================================
   V61 — HERO PORTRAIT UP + REAL HOME NAV LINK
   ============================================================ */

/* Move Johnny slightly upward while preserving the V60 crop and lighter blend. */
@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-position: center, calc(100% + 112px) -192px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-position: center, calc(100% + 76px) -142px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-position: center, 112% 94% !important;
    }
}

/* HOME is a server-rendered header link rather than relying on the saved menu entity. */
.header-home-link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    height: var(--campaign-header-height-v12, 72px) !important;
    margin: 0 clamp(0.95rem, 1.4vw, 1.35rem) 0 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.header-home-link:hover,
.header-home-link:focus-visible {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 0.22em !important;
}

@media (max-width: 781px) {
    .header-home-link {
        height: auto !important;
        margin-right: 0.65rem !important;
        font-size: 0.88rem !important;
    }
}


/* ============================================================
   V62 — RELIABLE HOME NAV + HIGHER HERO PORTRAIT
   ============================================================ */

/* Move the portrait materially higher while preserving the V60 scale
   and lighter left-to-right gradient. */
@media (min-width: 982px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-position: center, calc(100% + 112px) -276px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-position: center, calc(100% + 76px) -204px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-position: center, 112% 88% !important;
    }
}

/* HOME now lives inside .primary-navigation, matching the other links exactly. */
.primary-navigation .home-nav-item > .wp-block-navigation-item__content {
    color: #ffffff !important;
    font: inherit !important;
    font-weight: 800 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* Retire the separate v61 sibling link if an old cached template ever exposes it. */
.header-home-link {
    display: none !important;
}


/* ============================================================
   V63 — SECTION 3/4 SWAP + ALTERNATING NAVY/RED WAVES
   Preserves all V62 hero/header behavior above unchanged.
   ============================================================ */

/* Section 3 is now WHY IS JOHNNY RUNNING? — navy, with the same
   harsh wave geometry used throughout the approved homepage. */
body.home .front-page .campaign-section-three.campaign-running-section {
    --campaign-running-wave: clamp(78px, 8vw, 118px);
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(5rem, 6.5vw, 6.75rem) clamp(2rem, 7vw, 7rem) clamp(6.75rem, 8.5vw, 8.5rem) !important;
    background: #16325A !important;
    color: #ffffff !important;
    overflow: visible !important;
}

/* Section 2 already terminates in a navy wave, so do not stack a second
   divider at the top of the new navy Section 3. */
body.home .front-page .campaign-section-three.campaign-running-section::before {
    content: none !important;
    display: none !important;
}

/* Red divider rising from the next section visually closes Section 3. */
body.home .front-page .campaign-section-three.campaign-running-section::after {
    content: none !important;
    display: none !important;
}

body.home .front-page .campaign-running-section .campaign-section-four__inner {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr) !important;
    align-items: center !important;
    gap: clamp(2.5rem, 5vw, 5.5rem) !important;
    width: min(1180px, calc(100% - clamp(118px, 10.25vw, 154px) - 42px)) !important;
    max-width: 1180px !important;
    min-height: 330px !important;
    margin-left: clamp(118px, 10.25vw, 154px) !important;
    margin-right: 0 !important;
}

body.home .front-page .campaign-running-section .campaign-section-four__copy {
    width: 100% !important;
    max-width: 510px !important;
}

body.home .front-page .campaign-running-section .campaign-section-four__title {
    max-width: 520px !important;
    margin: 0 0 1.15rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.55rem, 4.1vw, 4.15rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.96 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

body.home .front-page .campaign-running-section .campaign-section-four__body {
    max-width: 500px !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.94) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.13vw, 1.15rem) !important;
    font-weight: 400 !important;
    line-height: 1.52 !important;
    text-align: left !important;
}

/* Integrate the aerial as a restrained landscape panel rather than a tall card. */
body.home .front-page .campaign-running-section .campaign-section-four__media {
    position: relative !important;
    z-index: 6 !important;
    width: min(100%, 590px) !important;
    max-width: 590px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-2px) !important;
    pointer-events: none !important;
}

body.home .front-page .campaign-running-section .campaign-section-four__media::before {
    content: "" !important;
    position: absolute !important;
    inset: 14px -14px -14px 14px !important;
    z-index: -1 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 20px !important;
}

body.home .front-page .campaign-running-section .campaign-section-four__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center 52% !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(4, 14, 29, 0.28) !important;
}

/* Section 4 is now the donation block — red and centered. */
body.home .front-page .campaign-section-four.campaign-donation-section {
    --campaign-donation-wave: clamp(78px, 8vw, 118px);
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: clamp(470px, 44vw, 610px) !important;
    margin: 0 !important;
    padding: clamp(4.75rem, 6vw, 6.25rem) clamp(1.5rem, 5vw, 5rem) clamp(6.5rem, 8vw, 8rem) !important;
    background: #D03330 !important;
    color: #ffffff !important;
    text-align: center !important;
    overflow: visible !important;
}

/* Harsh red wave rises into the navy Section 3. */
body.home .front-page .campaign-section-four.campaign-donation-section::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--campaign-donation-wave) * -1 + 1px) !important;
    width: 100% !important;
    height: var(--campaign-donation-wave) !important;
    pointer-events: none !important;
    background: url("../images/hero-section-wave.svg") center bottom / 100% 100% no-repeat !important;
}

/* Existing next section is navy, so terminate donation with the matching navy wave. */
body.home .front-page .campaign-section-four.campaign-donation-section::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: var(--campaign-donation-wave) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__inner {
    position: relative !important;
    z-index: 5 !important;
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__eyebrow {
    color: rgba(255,255,255,0.82) !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__title,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__body,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__disclaimer {
    color: #ffffff !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__body {
    color: rgba(255,255,255,0.94) !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__disclaimer {
    color: rgba(255,255,255,0.72) !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__amounts a {
    border: 2px solid rgba(255,255,255,0.94) !important;
    background: transparent !important;
    color: #ffffff !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__amounts a:hover,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__amounts a:focus-visible {
    background: #ffffff !important;
    color: #16325A !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary {
    border: 2px solid #ffffff !important;
    background: #ffffff !important;
    color: #16325A !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary:hover,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary:focus-visible {
    background: #16325A !important;
    border-color: #16325A !important;
    color: #ffffff !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section + .latest-updates {
    margin-top: 0 !important;
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-running-section .campaign-section-four__inner {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
        gap: 2.25rem !important;
        width: min(100%, calc(100% - clamp(82px, 9vw, 108px) - 36px)) !important;
        margin-left: clamp(82px, 9vw, 108px) !important;
    }

    body.home .front-page .campaign-running-section .campaign-section-four__media {
        width: 100% !important;
        max-width: 390px !important;
        transform: none !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three.campaign-running-section {
        --campaign-running-wave: clamp(58px, 14vw, 82px);
        padding: 4.25rem 1.35rem 6.25rem !important;
    }

    body.home .front-page .campaign-running-section .campaign-section-four__inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.75rem !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    body.home .front-page .campaign-running-section .campaign-section-four__copy {
        max-width: 100% !important;
    }

    body.home .front-page .campaign-running-section .campaign-section-four__media {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    body.home .front-page .campaign-running-section .campaign-section-four__media::before {
        inset: 9px -9px -9px 9px !important;
        border-radius: 16px !important;
    }

    body.home .front-page .campaign-running-section .campaign-section-four__media img {
        aspect-ratio: 16 / 9 !important;
        border-radius: 15px !important;
    }

    body.home .front-page .campaign-section-four.campaign-donation-section {
        --campaign-donation-wave: clamp(58px, 14vw, 82px);
        min-height: 500px !important;
        padding: 4.25rem 1.35rem 6.5rem !important;
    }
}


/* ============================================================
   V64 — SECTION 3 PRIORITIES + BLUE DONATION BUTTONS
   - Replace the former "Why is Johnny running?" panel with the
     supplied priorities content while preserving the navy/red
     alternating wave structure.
   - Keep v62 hero crop/header behavior untouched.
   - Donation content stays red; all donation CTAs use campaign navy.
   ============================================================ */

/* Section 3: priorities — navy surface with the existing harsh divider rhythm. */
body.home .front-page .campaign-section-three.campaign-priorities-section {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(5.25rem, 7vw, 7rem) clamp(2rem, 7vw, 7rem) clamp(8.25rem, 10vw, 10rem) !important;
    background: #16325A !important;
    color: #ffffff !important;
    overflow: visible !important;
}

/* Section 2 already paints the navy harsh wave into Section 3. */
body.home .front-page .campaign-section-three.campaign-priorities-section::before,
body.home .front-page .campaign-section-three.campaign-priorities-section::after {
    content: none !important;
    display: none !important;
}

body.home .front-page .campaign-priorities-section__inner {
    position: relative !important;
    z-index: 5 !important;
    width: min(100%, 1240px) !important;
    margin: 0 auto !important;
}

body.home .front-page .campaign-priorities-section__header {
    width: min(100%, 940px) !important;
    margin: 0 auto clamp(3.75rem, 5.5vw, 5.5rem) !important;
    text-align: center !important;
}

body.home .front-page .campaign-priorities-section__title {
    margin: 0 0 1.25rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.7rem, 4.65vw, 4.75rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    line-height: 0.98 !important;
}

body.home .front-page .campaign-priorities-section__intro {
    max-width: 880px !important;
    margin: 0 auto !important;
    color: rgba(255,255,255,0.93) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.15rem, 1.7vw, 1.55rem) !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
}

body.home .front-page .campaign-priorities-section__intro strong {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.home .front-page .campaign-priorities-section__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.32fr) !important;
    align-items: start !important;
    gap: clamp(3.25rem, 7vw, 7.25rem) !important;
}

body.home .front-page .campaign-priorities-section__copy {
    max-width: 470px !important;
}

body.home .front-page .campaign-priorities-section__eyebrow {
    margin: 0 !important;
    color: #8DC5FF !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    line-height: 1.1 !important;
}

body.home .front-page .campaign-priorities-section__rule {
    display: block !important;
    width: min(100%, 250px) !important;
    height: 2px !important;
    margin: 1.7rem 0 1.85rem !important;
    background: rgba(141,197,255,0.78) !important;
}

body.home .front-page .campaign-priorities-section__copy p:not(.campaign-priorities-section__eyebrow) {
    margin: 0 0 1.45rem !important;
    color: rgba(255,255,255,0.93) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.22vw, 1.16rem) !important;
    font-weight: 600 !important;
    line-height: 1.52 !important;
}

body.home .front-page .campaign-priorities-section__copy p:last-child {
    margin-bottom: 0 !important;
}

body.home .front-page .campaign-priorities-section__list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.home .front-page .campaign-priorities-section__list li {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 1.6vw, 1.45rem) !important;
    min-height: 94px !important;
    padding: 1.25rem 0 !important;
    border-bottom: 1px solid rgba(141,197,255,0.48) !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.45rem, 2.15vw, 2.1rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

body.home .front-page .campaign-priorities-section__list li:first-child {
    padding-top: 0 !important;
}

body.home .front-page .campaign-priorities-section__check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    border: 6px solid #8DC5FF !important;
    color: #ffffff !important;
    font-size: 2.65rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
}

/* Section 4 donation: campaign-blue buttons on the red surface. */
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__amounts a,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary {
    border: 2px solid #16325A !important;
    background: #16325A !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__amounts a:hover,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__amounts a:focus-visible,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary:hover,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary:focus-visible {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #16325A !important;
}

@media (min-width: 782px) and (max-width: 1050px) {
    body.home .front-page .campaign-section-three.campaign-priorities-section {
        padding-left: clamp(2.25rem, 5vw, 4rem) !important;
        padding-right: clamp(2.25rem, 5vw, 4rem) !important;
    }

    body.home .front-page .campaign-priorities-section__grid {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
        gap: 3rem !important;
    }

    body.home .front-page .campaign-priorities-section__list li {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        font-size: clamp(1.3rem, 2.25vw, 1.8rem) !important;
    }

    body.home .front-page .campaign-priorities-section__check {
        width: 46px !important;
        height: 46px !important;
        border-width: 5px !important;
        font-size: 2.2rem !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three.campaign-priorities-section {
        padding: 4.5rem 1.35rem 7.25rem !important;
    }

    body.home .front-page .campaign-priorities-section__header {
        margin-bottom: 3rem !important;
        text-align: left !important;
    }

    body.home .front-page .campaign-priorities-section__title {
        font-size: clamp(2.4rem, 11vw, 3.7rem) !important;
    }

    body.home .front-page .campaign-priorities-section__intro {
        font-size: 1.08rem !important;
    }

    body.home .front-page .campaign-priorities-section__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.75rem !important;
    }

    body.home .front-page .campaign-priorities-section__copy {
        max-width: 100% !important;
    }

    body.home .front-page .campaign-priorities-section__list {
        width: 100% !important;
    }

    body.home .front-page .campaign-priorities-section__list li {
        grid-template-columns: 47px minmax(0, 1fr) !important;
        gap: 1rem !important;
        min-height: 0 !important;
        padding: 1.15rem 0 !important;
        font-size: clamp(1.3rem, 6.2vw, 1.75rem) !important;
    }

    body.home .front-page .campaign-priorities-section__check {
        width: 42px !important;
        height: 42px !important;
        border-width: 4px !important;
        font-size: 1.95rem !important;
    }
}


/* ============================================================
   V65 — PRIORITIES TYPOGRAPHY + EDITORIAL NUMBERED ROWS
   - Keep the approved V62 hero/header behavior untouched.
   - All-caps Section 3 title.
   - Match Section 2 body-copy sizing for Section 3 body text.
   - Inline emphasis uses bold + italic.
   - Replace checkbox UI with restrained editorial priority rows.
   ============================================================ */
body.home .front-page .campaign-priorities-section__title {
    text-transform: uppercase !important;
}

body.home .front-page .campaign-priorities-section__intro,
body.home .front-page .campaign-priorities-section__copy p:not(.campaign-priorities-section__eyebrow) {
    font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
    line-height: 1.52 !important;
}

body.home .front-page .campaign-priorities-section__intro {
    max-width: 820px !important;
}

body.home .front-page .campaign-priorities-section__intro strong,
body.home .front-page .campaign-priorities-section__intro strong em {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-style: italic !important;
}

/* Compact eyebrow: no long rule, just a small campaign-red accent. */
body.home .front-page .campaign-priorities-section__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    color: #ffffff !important;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    line-height: 1.1 !important;
}

body.home .front-page .campaign-priorities-section__eyebrow::before {
    content: "" !important;
    display: inline-block !important;
    width: 34px !important;
    height: 4px !important;
    flex: 0 0 auto !important;
    background: #D03330 !important;
}

body.home .front-page .campaign-priorities-section__rule {
    display: none !important;
}

body.home .front-page .campaign-priorities-section__copy p:not(.campaign-priorities-section__eyebrow):first-of-type {
    margin-top: 1.65rem !important;
}

/* Editorial priority rows. The 01–05 markers are decorative rather than
   semantic ranking; the list remains an unordered list. */
body.home .front-page .campaign-priorities-section__list {
    position: relative !important;
    border-top: 1px solid rgba(255,255,255,0.3) !important;
}

body.home .front-page .campaign-priorities-section__list li {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(1.1rem, 1.8vw, 1.6rem) !important;
    min-height: 0 !important;
    padding: clamp(1.25rem, 1.7vw, 1.65rem) 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
}

body.home .front-page .campaign-priorities-section__list li:first-child {
    padding-top: clamp(1.25rem, 1.7vw, 1.65rem) !important;
}

body.home .front-page .campaign-priorities-section__index {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding-left: 16px !important;
    color: rgba(255,255,255,0.96) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.2rem, 1.55vw, 1.48rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
}

body.home .front-page .campaign-priorities-section__index::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 4px !important;
    height: 26px !important;
    background: #D03330 !important;
    transform: translateY(-50%) !important;
}

body.home .front-page .campaign-priorities-section__label {
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.38rem, 2vw, 1.95rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
    line-height: 1.08 !important;
}

body.home .front-page .campaign-priorities-section__check {
    display: none !important;
}

@media (min-width: 782px) and (max-width: 1050px) {
    body.home .front-page .campaign-priorities-section__list li {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-size: clamp(1.3rem, 2.2vw, 1.72rem) !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__intro,
    body.home .front-page .campaign-priorities-section__copy p:not(.campaign-priorities-section__eyebrow) {
        font-size: 1rem !important;
        line-height: 1.52 !important;
    }

    body.home .front-page .campaign-priorities-section__copy p:not(.campaign-priorities-section__eyebrow):first-of-type {
        margin-top: 1.35rem !important;
    }

    body.home .front-page .campaign-priorities-section__list li {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 0.95rem !important;
        padding: 1.15rem 0 !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        padding-left: 13px !important;
        font-size: 1.08rem !important;
    }

    body.home .front-page .campaign-priorities-section__index::before {
        width: 3px !important;
        height: 23px !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-size: clamp(1.24rem, 5.8vw, 1.58rem) !important;
        line-height: 1.12 !important;
    }
}

/* ============================================================
   V66 — PRIORITIES COLUMN BALANCE
   - Remove left-column eyebrow from markup.
   - Restore regular-weight explanatory copy.
   - Scale editorial priority rows to match left-column body size.
   ============================================================ */
body.home .front-page .campaign-priorities-section__copy p {
    font-weight: 400 !important;
}

body.home .front-page .campaign-priorities-section__copy p:first-child {
    margin-top: 0 !important;
}

body.home .front-page .campaign-priorities-section__list li {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: clamp(0.8rem, 1.25vw, 1.1rem) !important;
    padding: clamp(1rem, 1.3vw, 1.25rem) 0 !important;
}

body.home .front-page .campaign-priorities-section__index {
    min-height: 28px !important;
    padding-left: 12px !important;
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

body.home .front-page .campaign-priorities-section__index::before {
    width: 3px !important;
    height: 21px !important;
}

body.home .front-page .campaign-priorities-section__label {
    font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
}

@media (min-width: 782px) and (max-width: 1050px) {
    body.home .front-page .campaign-priorities-section__list li {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__copy p:first-child {
        margin-top: 0 !important;
    }

    body.home .front-page .campaign-priorities-section__list li {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 0.8rem !important;
        padding: 1rem 0 !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        padding-left: 11px !important;
        font-size: 0.9rem !important;
    }

    body.home .front-page .campaign-priorities-section__index::before {
        height: 20px !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
}


/* ============================================================
   V67 — PRIORITIES SECTION: SECTION-2-STYLE TWO-COLUMN LAYOUT
   - Place heading + all explanatory copy in the left column.
   - Keep body copy regular weight; only explicit emphasis is bold italic.
   - Match priority-label sizing to the explanatory body copy.
   - Preserve V62 hero/header behavior and V64 donation styling.
   ============================================================ */
body.home .front-page .campaign-priorities-section__inner {
    width: min(100%, 1120px) !important;
}

body.home .front-page .campaign-priorities-section__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(3.75rem, 6vw, 6rem) !important;
}

body.home .front-page .campaign-priorities-section__copy {
    max-width: none !important;
}

body.home .front-page .campaign-priorities-section__title {
    margin: 0 0 clamp(1.05rem, 1.5vw, 1.35rem) !important;
    color: #ffffff !important;
    font-size: clamp(2.35rem, 4.5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.025em !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

body.home .front-page .campaign-priorities-section__intro,
body.home .front-page .campaign-priorities-section__copy > p {
    max-width: 540px !important;
    margin: 0 0 1.25rem !important;
    color: rgba(255,255,255,0.93) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
    font-weight: 400 !important;
    line-height: 1.52 !important;
    letter-spacing: -0.005em !important;
    text-align: left !important;
}

body.home .front-page .campaign-priorities-section__copy > p:last-child {
    margin-bottom: 0 !important;
}

body.home .front-page .campaign-priorities-section__intro strong,
body.home .front-page .campaign-priorities-section__intro strong em {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-style: italic !important;
}

body.home .front-page .campaign-priorities-section__list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.30) !important;
}

body.home .front-page .campaign-priorities-section__list li,
body.home .front-page .campaign-priorities-section__list li:first-child {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.9rem !important;
    min-height: 0 !important;
    padding: 1.08rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.30) !important;
}

body.home .front-page .campaign-priorities-section__index {
    min-height: 24px !important;
    padding-left: 11px !important;
    color: rgba(255,255,255,0.92) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
}

body.home .front-page .campaign-priorities-section__index::before {
    width: 3px !important;
    height: 20px !important;
    background: #D03330 !important;
}

body.home .front-page .campaign-priorities-section__label {
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

@media (min-width: 782px) and (max-width: 1050px) {
    body.home .front-page .campaign-priorities-section__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: clamp(2.5rem, 4.5vw, 4rem) !important;
    }

    body.home .front-page .campaign-priorities-section__title {
        font-size: clamp(2.45rem, 5vw, 3.5rem) !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-size: clamp(1rem, 1.4vw, 1.12rem) !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.65rem !important;
    }

    body.home .front-page .campaign-priorities-section__title {
        font-size: clamp(2.35rem, 10vw, 3.35rem) !important;
        line-height: 0.98 !important;
    }

    body.home .front-page .campaign-priorities-section__intro,
    body.home .front-page .campaign-priorities-section__copy > p,
    body.home .front-page .campaign-priorities-section__label {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        padding: 1rem 0 !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        padding-left: 10px !important;
        font-size: 0.86rem !important;
    }
}

/* ============================================================
   V68 — PRIORITIES WEIGHT + COLUMN HEIGHT BALANCE
   - Match Section 2 body copy at regular 400 weight.
   - Keep only explicitly marked <strong><em> phrases bold + italic.
   - Stretch the five-priority stack to the full height of the left column.
   ============================================================ */
body.home .front-page .campaign-priorities-section__grid {
    align-items: stretch !important;
}

body.home .front-page .campaign-priorities-section__copy,
body.home .front-page .campaign-priorities-section__copy > p,
body.home .front-page .campaign-priorities-section__intro {
    font-weight: 400 !important;
}

body.home .front-page .campaign-priorities-section__copy > p *,
body.home .front-page .campaign-priorities-section__intro * {
    font-weight: inherit !important;
}

body.home .front-page .campaign-priorities-section__intro strong,
body.home .front-page .campaign-priorities-section__intro strong em {
    font-weight: 800 !important;
    font-style: italic !important;
}

body.home .front-page .campaign-priorities-section__list {
    align-self: stretch !important;
    display: grid !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    height: 100% !important;
}

body.home .front-page .campaign-priorities-section__list li,
body.home .front-page .campaign-priorities-section__list li:first-child {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: clamp(1.2rem, 1.65vw, 1.65rem) !important;
    padding-bottom: clamp(1.2rem, 1.65vw, 1.65rem) !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__list {
        display: block !important;
        height: auto !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child {
        height: auto !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ============================================================
   V69 — PRIORITIES STACK SCALE + TIGHTER SECTION TOP
   - Reduce Section 3 top padding while preserving the wave transition.
   - Increase priority-row typography so the five-row stack fills its
     matched column height with stronger visual balance.
   ============================================================ */
body.home .front-page .campaign-section-three.campaign-priorities-section {
    padding-top: clamp(4rem, 5vw, 5rem) !important;
}

body.home .front-page .campaign-priorities-section__label {
    font-size: clamp(1.16rem, 1.42vw, 1.34rem) !important;
    line-height: 1.28 !important;
}

body.home .front-page .campaign-priorities-section__index {
    font-size: clamp(0.98rem, 1.08vw, 1.06rem) !important;
}

@media (min-width: 782px) and (max-width: 1050px) {
    body.home .front-page .campaign-section-three.campaign-priorities-section {
        padding-top: clamp(3.75rem, 4.5vw, 4.5rem) !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-size: clamp(1.1rem, 1.7vw, 1.28rem) !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three.campaign-priorities-section {
        padding-top: 3.5rem !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-size: 1.08rem !important;
        line-height: 1.38 !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   V70 — PRIORITIES STACK: STRONGER DISPLAY SCALE
   - Make the five priorities read as a true visual counterweight
     to the left column rather than as small body-copy labels.
   - Preserve the v69 section spacing and matched-height stack.
   ============================================================ */
body.home .front-page .campaign-priorities-section__label {
    font-size: clamp(1.55rem, 1.95vw, 1.82rem) !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.012em !important;
}

body.home .front-page .campaign-priorities-section__index {
    font-size: clamp(1.04rem, 1.2vw, 1.16rem) !important;
    font-weight: 700 !important;
}

body.home .front-page .campaign-priorities-section__list li,
body.home .front-page .campaign-priorities-section__list li:first-child {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 1.05rem !important;
}

@media (min-width: 782px) and (max-width: 1050px) {
    body.home .front-page .campaign-priorities-section__label {
        font-size: clamp(1.38rem, 2.35vw, 1.62rem) !important;
        line-height: 1.16 !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        font-size: 1rem !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 0.9rem !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__label {
        font-size: clamp(1.22rem, 5.2vw, 1.48rem) !important;
        line-height: 1.2 !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        font-size: 0.94rem !important;
    }
}

/* ============================================================
   V71 — PRIORITIES ROW RHYTHM + TRUE HEIGHT BALANCE
   - Keep the priority stack equal to the full left-copy height.
   - Stop stretching each individual row to 1/5 of that height;
     instead distribute compact content-height rows across the stack.
   - Pull divider rules closer to their associated text.
   - Match 01–05 numeral size exactly to the priority-label size.
   ============================================================ */
@media (min-width: 782px) {
    body.home .front-page .campaign-priorities-section__grid {
        align-items: stretch !important;
    }

    body.home .front-page .campaign-priorities-section__list {
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: clamp(1rem, 1.25vw, 1.3rem) !important;
        padding: clamp(0.35rem, 0.45vw, 0.5rem) 0 clamp(0.55rem, 0.7vw, 0.75rem) !important;
        font-size: clamp(1.9rem, 2.35vw, 2.28rem) !important;
        line-height: 1.04 !important;
    }

    body.home .front-page .campaign-priorities-section__label,
    body.home .front-page .campaign-priorities-section__index {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        font-weight: 600 !important;
        letter-spacing: -0.018em !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        min-height: 1em !important;
        padding-left: 16px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
    }

    body.home .front-page .campaign-priorities-section__index::before {
        height: 1.05em !important;
    }
}

@media (min-width: 782px) and (max-width: 1050px) {
    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 0.95rem !important;
        font-size: clamp(1.55rem, 2.65vw, 1.92rem) !important;
        padding-top: 0.35rem !important;
        padding-bottom: 0.55rem !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__list {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child {
        height: auto !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 0.85rem !important;
        padding: 0.85rem 0 !important;
        font-size: clamp(1.3rem, 5.6vw, 1.58rem) !important;
        line-height: 1.16 !important;
    }

    body.home .front-page .campaign-priorities-section__label,
    body.home .front-page .campaign-priorities-section__index {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        min-height: 1em !important;
        padding-left: 12px !important;
        letter-spacing: -0.01em !important;
    }

    body.home .front-page .campaign-priorities-section__index::before {
        height: 1.05em !important;
    }
}

/* ============================================================
   V72 — CENTERED PRIORITIES + HOMEPAGE ENDS AFTER DONATION
   - Replace the two-column priorities composition with one centered flow.
   - Keep body copy regular weight; only explicit strong/em phrases are emphasized.
   - Keep the numbered priority list as a centered, single-column stack.
   - Homepage template now proceeds directly from donation to the footer.
   ============================================================ */
body.home .front-page .campaign-section-three.campaign-priorities-section {
    padding-top: clamp(3.6rem, 4.6vw, 4.6rem) !important;
}

body.home .front-page .campaign-priorities-section__inner {
    width: min(100%, 1120px) !important;
    margin-inline: auto !important;
}

body.home .front-page .campaign-priorities-section__centered {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
}

body.home .front-page .campaign-priorities-section__title {
    max-width: none !important;
    margin: 0 auto 1.1rem !important;
    text-align: center !important;
}

body.home .front-page .campaign-priorities-section__intro {
    max-width: 900px !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
    text-align: center !important;
}

body.home .front-page .campaign-priorities-section__intro strong,
body.home .front-page .campaign-priorities-section__intro strong em {
    font-weight: 800 !important;
    font-style: italic !important;
}

body.home .front-page .campaign-priorities-section__body {
    max-width: 900px !important;
    margin: clamp(2rem, 3vw, 2.75rem) auto 0 !important;
}

body.home .front-page .campaign-priorities-section__body p {
    margin: 0 0 1.25rem !important;
    color: rgba(255,255,255,0.93) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.22vw, 1.16rem) !important;
    font-weight: 400 !important;
    line-height: 1.52 !important;
    text-align: center !important;
}

body.home .front-page .campaign-priorities-section__body p:last-child {
    margin-bottom: 0 !important;
}

body.home .front-page .campaign-priorities-section__list {
    display: block !important;
    width: min(100%, 920px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: clamp(2.7rem, 4.2vw, 4rem) auto 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
}

body.home .front-page .campaign-priorities-section__list li,
body.home .front-page .campaign-priorities-section__list li:first-child {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 1.5vw, 1.4rem) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(1rem, 1.35vw, 1.3rem) 0 !important;
    border-top: 1px solid rgba(255,255,255,0.32) !important;
    border-bottom: 0 !important;
    font-size: clamp(1.65rem, 2.15vw, 2.15rem) !important;
    line-height: 1.08 !important;
}

body.home .front-page .campaign-priorities-section__list li:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.32) !important;
}

body.home .front-page .campaign-priorities-section__label,
body.home .front-page .campaign-priorities-section__index {
    font-size: inherit !important;
    line-height: inherit !important;
}

body.home .front-page .campaign-priorities-section__label {
    font-weight: 600 !important;
    letter-spacing: -0.018em !important;
}

body.home .front-page .campaign-priorities-section__index {
    position: relative !important;
    min-height: 1em !important;
    padding-left: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

body.home .front-page .campaign-priorities-section__index::before {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 5px !important;
    height: 1.05em !important;
    content: "" !important;
    background: #D03330 !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-three.campaign-priorities-section {
        padding-top: 3.25rem !important;
    }

    body.home .front-page .campaign-priorities-section__centered,
    body.home .front-page .campaign-priorities-section__title,
    body.home .front-page .campaign-priorities-section__intro,
    body.home .front-page .campaign-priorities-section__body p {
        text-align: left !important;
    }

    body.home .front-page .campaign-priorities-section__body {
        margin-top: 1.75rem !important;
    }

    body.home .front-page .campaign-priorities-section__list {
        margin-top: 2.35rem !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 0.9rem !important;
        padding: 0.95rem 0 !important;
        font-size: clamp(1.3rem, 6vw, 1.58rem) !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        padding-left: 12px !important;
    }
}

/* ============================================================
   V73 — CONDENSED CENTERED PRIORITIES
   - Pull the centered copy inward for a tighter editorial measure.
   - Center the priority stack in a narrower container.
   - Keep divider rules only BETWEEN priority rows (no outer rules).
   ============================================================ */
body.home .front-page .campaign-priorities-section__inner {
    width: min(100%, 980px) !important;
    margin-inline: auto !important;
}

body.home .front-page .campaign-priorities-section__centered {
    width: 100% !important;
    max-width: 920px !important;
    margin-inline: auto !important;
}

body.home .front-page .campaign-priorities-section__intro,
body.home .front-page .campaign-priorities-section__body {
    max-width: 720px !important;
    margin-inline: auto !important;
}

body.home .front-page .campaign-priorities-section__list {
    width: min(100%, 820px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.home .front-page .campaign-priorities-section__list li:first-child {
    border-top: 0 !important;
}

body.home .front-page .campaign-priorities-section__list li:last-child {
    border-bottom: 0 !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__inner,
    body.home .front-page .campaign-priorities-section__centered,
    body.home .front-page .campaign-priorities-section__intro,
    body.home .front-page .campaign-priorities-section__body,
    body.home .front-page .campaign-priorities-section__list {
        max-width: 100% !important;
    }
}

/* ============================================================
   V74 — TRUE CENTERED PRIORITY ROWS + INTERNAL DIVIDERS ONLY
   - Center each priority label within the stack.
   - Keep the 01–05 marker balanced with an equal trailing column.
   - Remove every outer list/row divider.
   - Draw rules only BETWEEN adjacent rows.
   ============================================================ */
body.home .front-page .campaign-priorities-section__list {
    border-top: 0 !important;
    border-bottom: 0 !important;
    text-align: center !important;
}

body.home .front-page .campaign-priorities-section__list li,
body.home .front-page .campaign-priorities-section__list li:first-child,
body.home .front-page .campaign-priorities-section__list li:last-child {
    grid-template-columns: 78px minmax(0, 1fr) 78px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Equal-width empty trailing column keeps the label truly centered
   across the full row while retaining the numbered marker on the left. */
body.home .front-page .campaign-priorities-section__list li::after {
    content: "" !important;
    display: block !important;
    width: 78px !important;
    height: 1px !important;
    grid-column: 3 !important;
}

body.home .front-page .campaign-priorities-section__list li + li {
    border-top: 1px solid rgba(255,255,255,0.32) !important;
}

body.home .front-page .campaign-priorities-section__index {
    grid-column: 1 !important;
    justify-self: center !important;
    text-align: center !important;
}

body.home .front-page .campaign-priorities-section__label {
    grid-column: 2 !important;
    width: 100% !important;
    text-align: center !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child,
    body.home .front-page .campaign-priorities-section__list li:last-child {
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
    }

    body.home .front-page .campaign-priorities-section__list li::after {
        width: 54px !important;
    }
}

/* ============================================================
   V75 — CENTER NUMBER + LABEL AS A SINGLE PRIORITY GROUP
   - Keep each 01–05 marker tucked directly beside its label.
   - Center the number/label pair as one visual unit per row.
   - Preserve only internal dividers, including between 04 and 05.
   ============================================================ */
body.home .front-page .campaign-priorities-section__list li,
body.home .front-page .campaign-priorities-section__list li:first-child,
body.home .front-page .campaign-priorities-section__list li:last-child {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.9rem, 1.35vw, 1.25rem) !important;
    position: relative !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Remove the balancing spacer introduced in v74; the number and label
   now form one naturally sized group that is centered as a unit. */
body.home .front-page .campaign-priorities-section__list li::after {
    content: none !important;
    display: none !important;
}

/* Internal rules only. This selector intentionally includes the final
   row so the divider between 04 and 05 remains visible. */
body.home .front-page .campaign-priorities-section__list li:not(:first-child) {
    border-top: 1px solid rgba(255,255,255,0.32) !important;
}

body.home .front-page .campaign-priorities-section__list li:first-child {
    border-top: 0 !important;
}

body.home .front-page .campaign-priorities-section__list li:last-child {
    border-bottom: 0 !important;
}

body.home .front-page .campaign-priorities-section__index {
    grid-column: auto !important;
    flex: 0 0 auto !important;
    justify-self: auto !important;
    width: auto !important;
    text-align: left !important;
}

body.home .front-page .campaign-priorities-section__label {
    grid-column: auto !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(100%, 720px) !important;
    text-align: left !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child,
    body.home .front-page .campaign-priorities-section__list li:last-child {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: center !important;
        gap: 0.8rem !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        width: auto !important;
        max-width: calc(100% - 72px) !important;
    }
}

/* ============================================================
   V76 — SHARED NUMBER AXIS + CONTENT-WIDTH DIVIDERS
   - Align 01–05 on one shared vertical axis.
   - Keep the number tucked close to the priority label.
   - Center the number/label system as one shared group.
   - Let divider rules follow that centered group's width rather
     than spanning the full list container.
   ============================================================ */
@media (min-width: 782px) {
    body.home .front-page .campaign-priorities-section__list {
        display: grid !important;
        grid-template-columns: max-content minmax(0, max-content) !important;
        justify-content: center !important;
        column-gap: clamp(0.8rem, 1.05vw, 1rem) !important;
        width: min(100%, 820px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child,
    body.home .front-page .campaign-priorities-section__list li:last-child {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: subgrid !important;
        justify-content: stretch !important;
        align-items: center !important;
        column-gap: clamp(0.8rem, 1.05vw, 1rem) !important;
        row-gap: 0 !important;
        width: auto !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    body.home .front-page .campaign-priorities-section__list li:not(:first-child) {
        border-top: 1px solid rgba(255,255,255,0.32) !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        grid-column: 1 !important;
        justify-self: start !important;
        width: auto !important;
        margin: 0 !important;
        text-align: left !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        grid-column: 2 !important;
        justify-self: start !important;
        width: auto !important;
        max-width: 720px !important;
        margin: 0 !important;
        text-align: left !important;
    }
}

/* Fallback for browsers without subgrid: preserve the same shared axis
   with a compact fixed number column while keeping the whole list centered. */
@media (min-width: 782px) {
    @supports not (grid-template-columns: subgrid) {
        body.home .front-page .campaign-priorities-section__list {
            display: block !important;
            width: min(100%, 780px) !important;
        }

        body.home .front-page .campaign-priorities-section__list li,
        body.home .front-page .campaign-priorities-section__list li:first-child,
        body.home .front-page .campaign-priorities-section__list li:last-child {
            display: grid !important;
            grid-template-columns: 3.1ch minmax(0, 1fr) !important;
            gap: clamp(0.8rem, 1.05vw, 1rem) !important;
            width: 100% !important;
        }
    }
}

/* ============================================================
   V77 — TIGHTER COPY-TO-STACK RHYTHM + MOBILE NUMBER ALIGNMENT
   - Pull the priority stack closer to the supporting body copy.
   - Keep 01–05 on one shared vertical axis at mobile widths too.
   - Preserve the centered, content-width desktop stack from v76.
   ============================================================ */
body.home .front-page .campaign-priorities-section__list {
    margin-top: clamp(1.45rem, 2vw, 1.85rem) !important;
}

body.home .front-page .campaign-priorities-section__index {
    font-variant-numeric: tabular-nums !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__list {
        display: block !important;
        width: min(100%, 680px) !important;
        max-width: 680px !important;
        margin: 1.4rem auto 0 !important;
        text-align: left !important;
    }

    body.home .front-page .campaign-priorities-section__list li,
    body.home .front-page .campaign-priorities-section__list li:first-child,
    body.home .front-page .campaign-priorities-section__list li:last-child {
        display: grid !important;
        grid-template-columns: 3.15ch minmax(0, 1fr) !important;
        justify-content: stretch !important;
        align-items: center !important;
        column-gap: 0.8rem !important;
        width: 100% !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        grid-column: 1 !important;
        justify-self: start !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        grid-column: 2 !important;
        justify-self: start !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        text-align: left !important;
    }
}

/* ============================================================
   V78 — DONATION TOP RHYTHM + CAMPAIGN-MARK FOOTER
   - Pull Section 4 donation content upward without changing the
     existing harsh wave transition from Section 3.
   - Replace the text-name footer lockup with the approved hero logo.
   - Center a compact footer navigation and social-icon row beneath it.
   - Keep the footer's bottom edge completely flat.
   ============================================================ */

/* Section 4: reduce excess space above the donation content. */
body.home .front-page .campaign-section-four.campaign-donation-section {
    padding-top: clamp(3.15rem, 4vw, 4rem) !important;
}

/* Footer: clean centered logo/navigation/social hierarchy. */
.site-footer {
    position: relative !important;
    margin: 0 !important;
    padding: clamp(3.75rem, 6vw, 5.5rem) var(--campaign-gutter) 1.5rem !important;
    border-radius: 0 !important;
    clip-path: none !important;
    overflow: visible !important;
}

.site-footer::before,
.site-footer::after {
    content: none !important;
    display: none !important;
}

.site-footer__main {
    width: min(100%, 980px) !important;
    margin-inline: auto !important;
    text-align: center !important;
}

.site-footer__logo {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    margin: 0 auto !important;
}

.site-footer__logo a,
.site-footer__logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.site-footer__logo a {
    line-height: 0 !important;
}

.site-footer .footer-navigation {
    width: 100% !important;
    margin: clamp(2rem, 3vw, 2.6rem) auto 0 !important;
    justify-content: center !important;
}

.site-footer .footer-navigation .wp-block-navigation__container {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.75rem clamp(1.35rem, 2.6vw, 2.5rem) !important;
}

.site-footer .footer-navigation .wp-block-navigation-item__content {
    padding: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.site-footer .footer-navigation .wp-block-navigation-item__content:hover,
.site-footer .footer-navigation .wp-block-navigation-item__content:focus-visible {
    color: #D03330 !important;
}

.site-footer .footer-socials {
    display: flex !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    margin: clamp(1.5rem, 2.4vw, 2rem) auto 0 !important;
    padding: 0 !important;
}

.site-footer .footer-socials .wp-social-link {
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #ffffff !important;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

.site-footer .footer-socials .wp-social-link a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 9px !important;
    color: inherit !important;
}

.site-footer .footer-socials .wp-social-link svg {
    width: 100% !important;
    height: 100% !important;
    fill: currentColor !important;
}

.site-footer .footer-socials .wp-social-link:hover,
.site-footer .footer-socials .wp-social-link:focus-within {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #16325A !important;
    transform: translateY(-1px) !important;
}

.site-footer .legal-disclaimer {
    max-width: 880px !important;
    margin: clamp(2.5rem, 4vw, 3.5rem) auto 0 !important;
    padding: 1.2rem 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.68) !important;
    font-size: 0.7rem !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-four.campaign-donation-section {
        padding-top: 3rem !important;
    }

    .site-footer {
        padding-top: 3.5rem !important;
    }

    .site-footer__logo {
        width: min(100%, 340px) !important;
    }

    .site-footer .footer-navigation .wp-block-navigation__container {
        gap: 0.8rem 1.25rem !important;
    }

    .site-footer .footer-navigation .wp-block-navigation-item__content {
        font-size: 0.76rem !important;
    }

    .site-footer .footer-socials {
        margin-top: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .site-footer__logo {
        width: min(100%, 290px) !important;
    }

    .site-footer .footer-navigation .wp-block-navigation__container {
        gap: 0.7rem 1rem !important;
    }

    .site-footer .footer-socials .wp-social-link {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================================
   V79 — COMPACT FOOTER RHYTHM + BARE SOCIAL ICONS
   - Pull the footer navigation closer to the campaign logo.
   - Pull the social row closer to the footer navigation.
   - Remove the circular border/background treatment from social icons.
   ============================================================ */

.site-footer .footer-navigation {
    margin-top: clamp(0.75rem, 1.2vw, 1rem) !important;
}

.site-footer .footer-socials {
    gap: 0.9rem !important;
    margin-top: clamp(0.55rem, 0.9vw, 0.75rem) !important;
}

.site-footer .footer-socials .wp-social-link {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.site-footer .footer-socials .wp-social-link a {
    padding: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.site-footer .footer-socials .wp-social-link:hover,
.site-footer .footer-socials .wp-social-link:focus-within {
    border: 0 !important;
    background: transparent !important;
    color: #D03330 !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 781px) {
    .site-footer .footer-navigation {
        margin-top: 0.75rem !important;
    }

    .site-footer .footer-socials {
        margin-top: 0.55rem !important;
    }
}

@media (max-width: 480px) {
    .site-footer .footer-socials .wp-social-link {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ============================================================
   V80 — SMALLER, CLEANER FOOTER
   - Reduce the campaign-mark scale.
   - Compress the footer's overall vertical footprint.
   - Remove the disclaimer divider line.
   ============================================================ */

.site-footer {
    padding: clamp(2.5rem, 4vw, 3.35rem) var(--campaign-gutter) 1rem !important;
}

.site-footer__main {
    width: min(100%, 900px) !important;
}

.site-footer__logo {
    width: min(100%, 350px) !important;
    max-width: 350px !important;
}

.site-footer .footer-navigation {
    margin-top: clamp(0.6rem, 0.9vw, 0.8rem) !important;
}

.site-footer .footer-socials {
    margin-top: clamp(0.4rem, 0.65vw, 0.55rem) !important;
}

.site-footer .legal-disclaimer {
    margin-top: clamp(1.35rem, 2.2vw, 1.8rem) !important;
    padding-top: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
}

@media (max-width: 781px) {
    .site-footer {
        padding-top: 2.35rem !important;
        padding-bottom: 0.9rem !important;
    }

    .site-footer__logo {
        width: min(100%, 285px) !important;
        max-width: 285px !important;
    }

    .site-footer .footer-navigation {
        margin-top: 0.55rem !important;
    }

    .site-footer .footer-socials {
        margin-top: 0.4rem !important;
    }

    .site-footer .legal-disclaimer {
        margin-top: 1.2rem !important;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding-top: 2rem !important;
        padding-bottom: 0.8rem !important;
    }

    .site-footer__logo {
        width: min(100%, 240px) !important;
        max-width: 240px !important;
    }
}

/* ============================================================
   V81 — HEADER FACEBOOK + DONATION BOTTOM RHYTHM
   - Add Facebook beside Instagram in the primary header social row.
   - Give Section 4 a little more breathing room below its content so
     its lower rhythm feels closer to the visible spacing above.
   ============================================================ */

/* Two header social icons should remain a compact, centered pair. */
.header-socials {
    gap: 0.42rem !important;
}

/* Section 4: preserve the approved tighter top, add modest lower space. */
body.home .front-page .campaign-section-four.campaign-donation-section {
    padding-bottom: clamp(7rem, 8.5vw, 8.5rem) !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-four.campaign-donation-section {
        padding-bottom: 7rem !important;
    }
}

/* ============================================================
   V82 — MEET JOHNNY COPY + IMAGE BALANCE EXPERIMENT
   - Narrow the Section 2 copy measure so the text occupies less width.
   - Enlarge the chamber image and let it extend a little farther through
     the red/blue divider into Section 3.
   - Keep mobile conservative for stability.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-announcement__inner {
        grid-template-columns: minmax(0, 475px) minmax(420px, 510px) !important;
        column-gap: clamp(3.25rem, 5vw, 5.75rem) !important;
        width: min(1180px, calc(100% - clamp(118px, 10.25vw, 154px) - 40px)) !important;
        max-width: 1180px !important;
        min-height: 340px !important;
    }

    body.home .front-page .campaign-announcement__copy {
        width: 100% !important;
        max-width: 475px !important;
    }

    body.home .front-page .campaign-announcement__text {
        max-width: 470px !important;
    }

    body.home .front-page .campaign-announcement__body {
        max-width: 445px !important;
    }

    body.home .front-page .campaign-announcement__media {
        top: -108px !important;
        right: 0 !important;
        bottom: -122px !important;
        width: min(500px, 41vw) !important;
        max-width: 500px !important;
    }

    body.home .front-page .campaign-announcement__media img {
        object-position: center center !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-announcement__inner {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 365px) !important;
        column-gap: 2.1rem !important;
        min-height: 355px !important;
    }

    body.home .front-page .campaign-announcement__copy {
        max-width: 430px !important;
    }

    body.home .front-page .campaign-announcement__text,
    body.home .front-page .campaign-announcement__body {
        max-width: 100% !important;
    }

    body.home .front-page .campaign-announcement__media {
        top: -74px !important;
        bottom: -86px !important;
        width: 360px !important;
        max-width: 39vw !important;
    }
}

/* ============================================================
   V83 — STRONGER MEET JOHNNY IMAGE / COPY CONTRAST
   - Narrow the Section 2 copy measure another step.
   - Increase the chamber image scale and lower bleed on desktop.
   - Keep tablet/mobile more conservative to avoid overflow.
   ============================================================ */

@media (min-width: 982px) {
    body.home .front-page .campaign-announcement__inner {
        grid-template-columns: minmax(0, 410px) minmax(500px, 560px) !important;
        column-gap: clamp(3rem, 4.5vw, 4.75rem) !important;
        width: min(1170px, calc(100% - clamp(96px, 8.5vw, 132px) - 32px)) !important;
        max-width: 1170px !important;
        min-height: 350px !important;
    }

    body.home .front-page .campaign-announcement__copy {
        width: 100% !important;
        max-width: 410px !important;
    }

    body.home .front-page .campaign-announcement__text {
        max-width: 405px !important;
    }

    body.home .front-page .campaign-announcement__body {
        max-width: 390px !important;
    }

    body.home .front-page .campaign-announcement__media {
        top: -122px !important;
        right: 0 !important;
        bottom: -154px !important;
        width: min(555px, 46vw) !important;
        max-width: 555px !important;
    }
}

@media (min-width: 782px) and (max-width: 981px) {
    body.home .front-page .campaign-announcement__inner {
        grid-template-columns: minmax(0, 0.92fr) minmax(325px, 395px) !important;
        column-gap: 1.9rem !important;
        min-height: 360px !important;
    }

    body.home .front-page .campaign-announcement__copy {
        max-width: 385px !important;
    }

    body.home .front-page .campaign-announcement__text,
    body.home .front-page .campaign-announcement__body {
        max-width: 100% !important;
    }

    body.home .front-page .campaign-announcement__media {
        top: -82px !important;
        bottom: -96px !important;
        width: 390px !important;
        max-width: 42vw !important;
    }
}

/* ============================================================
   V85 — RESPONSIVE STABILIZATION / MOBILE COMPOSITION
   - Revert the v84 About-page experiment by building from v83.
   - Keep the approved desktop homepage intact.
   - On compact viewports, make the header a true sticky flow item,
     let the hero grow with its form/disclaimer, and translate section
     overlap treatments into stable stacked layouts.
   ============================================================ */

/* Tablet/mobile navigation should feel attached to the page instead of
   floating over an unrelated slice of the hero image. */
@media (max-width: 940px) {
    :root {
        --campaign-frame-v8: 6px;
        --campaign-header-height-v12: 64px;
    }

    .wp-site-blocks {
        margin: 6px !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    .site-header,
    body.home .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.home.is-campaign-nav-scrolled .site-header {
        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        overflow: visible !important;
        background: #16325A !important;
        background-color: #16325A !important;
    }

    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 32px !important;
    }

    .site-header::before,
    body.home:not(.is-campaign-nav-scrolled) .site-header::before,
    body:not(.is-campaign-nav-scrolled) .site-header::before,
    body.is-campaign-nav-scrolled .site-header::before,
    body.home.is-campaign-nav-scrolled .site-header::before {
        content: none !important;
        display: none !important;
        height: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    .site-navigation,
    .site-navigation.has-background,
    body.home .site-navigation,
    body.home:not(.is-campaign-nav-scrolled) .site-navigation,
    body.home.is-campaign-nav-scrolled .site-navigation {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: var(--campaign-header-height-v12) !important;
        background: #16325A !important;
        background-color: #16325A !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .site-navigation__inner {
        width: calc(100% - 2rem) !important;
        height: auto !important;
        min-height: var(--campaign-header-height-v12) !important;
        margin-inline: auto !important;
        padding: 0 !important;
        gap: 0.75rem !important;
    }

    .site-navigation__left {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0.75rem !important;
    }

    .primary-navigation {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .header-socials {
        order: 1 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        height: auto !important;
        margin: 0 !important;
        gap: 0.35rem !important;
    }

    .header-socials .wp-social-link,
    .header-socials .wp-social-link a {
        width: 32px !important;
        height: 32px !important;
    }

    .header-socials .wp-social-link svg {
        width: 20px !important;
        height: 20px !important;
    }

    .header-actions {
        display: none !important;
    }

    /* Tablet hero: keep the approved desktop composition, but never cap
       the section below the height needed by its content. */
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        height: auto !important;
        min-height: clamp(700px, 88svh, 820px) !important;
        max-height: none !important;
    }
}

@media (max-width: 782px) {
    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 46px !important;
    }
}

/* Phone hero: content height is authoritative. The photo is still the
   hero background, but the form is no longer trapped inside a viewport
   height or absolutely positioned box. */
@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        position: relative !important;
        isolation: isolate !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background-color: #16325A !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.08) 0%,
                rgba(22, 50, 90, 0.18) 18%,
                rgba(22, 50, 90, 0.52) 32%,
                rgba(22, 50, 90, 0.86) 44%,
                rgba(22, 50, 90, 0.98) 54%,
                #16325A 62%,
                #16325A 100%
            ),
            url("../images/hero-home.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100%, auto clamp(390px, 112vw, 520px) !important;
        background-position: center, right -24px top !important;
    }

    body.home .front-page .campaign-hero__stage,
    body.home.admin-bar .front-page .campaign-hero__stage {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        position: relative !important;
        z-index: 3 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: min(100%, 560px) !important;
        max-width: 560px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: clamp(13.5rem, 60vw, 18.5rem) 1.15rem clamp(5.5rem, 16vw, 7rem) !important;
        transform: none !important;
        background: transparent !important;
    }

    .front-page .campaign-hero__logo {
        width: min(84%, 350px) !important;
        max-width: 350px !important;
        margin: 0 auto 0.95rem !important;
    }

    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "first last"
            "phone email"
            "actions actions"
            "disclaimer disclaimer" !important;
        width: min(100%, 430px) !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        column-gap: 0.6rem !important;
        row-gap: 0.55rem !important;
    }

    .campaign-hero-form input:not([type="checkbox"]),
    .campaign-form--hero input:not([type="checkbox"]) {
        min-height: 48px !important;
        padding: 0.7rem 0.82rem !important;
        font-size: 0.95rem !important;
    }

    .campaign-hero-form__actions {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.1rem auto 0 !important;
        gap: 0.35rem !important;
    }

    .campaign-hero-form__volunteer,
    .campaign-hero-form__actions .campaign-hero-form__volunteer,
    .campaign-form--hero .campaign-hero-form__volunteer {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        white-space: normal !important;
        font-size: 0.9rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .campaign-hero-form__submit,
    .campaign-hero-form__actions .campaign-hero-form__submit,
    .campaign-form--hero .campaign-hero-form__submit {
        width: min(100%, 220px) !important;
        min-width: 0 !important;
        min-height: 48px !important;
        height: 48px !important;
        margin-inline: auto !important;
    }

    .campaign-hero-form__disclaimer {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0.15rem auto 0 !important;
        font-size: clamp(0.68rem, 2.65vw, 0.76rem) !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    body.home .front-page .campaign-hero::after {
        z-index: 4 !important;
        bottom: -1px !important;
        height: clamp(58px, 14vw, 78px) !important;
    }

    /* MEET JOHNNY: copy first, photo second. Let the photo create the
       lower bleed toward Section 3 instead of colliding with the hero. */
    body.home .front-page .campaign-announcement {
        padding: clamp(3.5rem, 11vw, 4.5rem) 1.25rem clamp(5.5rem, 15vw, 7rem) !important;
        overflow: visible !important;
    }

    body.home .front-page .campaign-announcement__inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    body.home .front-page .campaign-announcement__copy {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home .front-page .campaign-announcement__title {
        font-size: clamp(2.35rem, 11vw, 3.25rem) !important;
        line-height: 0.95 !important;
    }

    body.home .front-page .campaign-announcement__text {
        max-width: 100% !important;
        font-size: clamp(1.05rem, 5vw, 1.28rem) !important;
        line-height: 1.3 !important;
    }

    body.home .front-page .campaign-announcement__body {
        max-width: 100% !important;
        font-size: 1rem !important;
        line-height: 1.52 !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: relative !important;
        z-index: 6 !important;
        order: 2 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: min(100%, 480px) !important;
        max-width: 480px !important;
        height: auto !important;
        margin: 1.75rem auto -3.4rem !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 18px !important;
    }

    body.home .front-page .campaign-announcement::after {
        height: clamp(58px, 14vw, 78px) !important;
    }

    /* Priorities: preserve the aligned numbered structure, but keep the
       entire composition inside the compact viewport. */
    body.home .front-page .campaign-priorities-section {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }

    body.home .front-page .campaign-priorities-section__inner,
    body.home .front-page .campaign-priorities-section__centered,
    body.home .front-page .campaign-priorities-section__body,
    body.home .front-page .campaign-priorities-section__list {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home .front-page .campaign-priorities-section__list li {
        min-width: 0 !important;
    }

    body.home .front-page .campaign-priorities-section__label {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    /* Donation controls should wrap rather than forcing horizontal scroll. */
    body.home .front-page .campaign-section-four.campaign-donation-section {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }

    body.home .front-page .campaign-donation-section__inner {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
    }

    body.home .front-page .campaign-donation-section__amounts {
        width: 100% !important;
        max-width: 520px !important;
        margin-inline: auto !important;
        flex-wrap: wrap !important;
    }

    /* Footer navigation is allowed to wrap cleanly at phone widths. */
    .site-footer .footer-navigation .wp-block-navigation__container {
        justify-content: center !important;
        flex-wrap: wrap !important;
        row-gap: 0.5rem !important;
        column-gap: 1rem !important;
    }
}

@media (max-width: 560px) {
    body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        padding-top: clamp(12.5rem, 61vw, 15.5rem) !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .front-page .campaign-hero__logo {
        width: min(88%, 330px) !important;
    }

    .campaign-hero-form,
    .campaign-form--hero.campaign-hero-form {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "first"
            "last"
            "phone"
            "email"
            "actions"
            "disclaimer" !important;
        width: min(100%, 390px) !important;
    }

    body.home .front-page .campaign-donation-section__amounts {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }

    body.home .front-page .campaign-donation-section__amounts a {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 390px) {
    .site-navigation__inner {
        width: calc(100% - 1.25rem) !important;
    }

    .header-socials {
        gap: 0.2rem !important;
    }

    .header-socials .wp-social-link,
    .header-socials .wp-social-link a {
        width: 29px !important;
        height: 29px !important;
    }

    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, auto 405px !important;
        background-position: center, right -38px top !important;
    }

    body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        padding-top: 12.25rem !important;
        padding-bottom: 5.25rem !important;
    }
}

/* ============================================================
   V86 — VIEWPORT SHRINKAGE / MOBILE HERO + SECTION 2
   - Phone hero portrait fills the full section width rather than
     preserving a fixed image height that leaves a navy side gutter.
   - Move MEET JOHNNY to the stacked composition at <= 940px so
     the copy never collapses into a narrow tablet column.
   - Give Section 2 copy a responsive readable measure and spacing.
   ============================================================ */

/* Intermediate/tablet widths: stop squeezing the approved desktop
   two-column composition. Copy first, image second, with a readable
   centered measure and enough width for natural paragraph wrapping. */
@media (max-width: 940px) {
    body.home .front-page .campaign-announcement {
        box-sizing: border-box !important;
        padding: clamp(3.25rem, 6vw, 4.5rem) clamp(1.35rem, 4.5vw, 2.5rem) clamp(5.75rem, 10vw, 7rem) !important;
        overflow: visible !important;
    }

    body.home .front-page .campaign-announcement__inner {
        display: flex !important;
        flex-direction: column !important;
        width: min(100%, 720px) !important;
        max-width: 720px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    body.home .front-page .campaign-announcement__copy {
        order: 1 !important;
        width: min(100%, 640px) !important;
        max-width: 640px !important;
        margin: 0 auto !important;
    }

    body.home .front-page .campaign-announcement__title,
    body.home .front-page .campaign-announcement__text,
    body.home .front-page .campaign-announcement__body {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    body.home .front-page .campaign-announcement__title {
        margin-bottom: clamp(0.9rem, 2.2vw, 1.25rem) !important;
        font-size: clamp(2.7rem, 7vw, 3.7rem) !important;
        line-height: 0.94 !important;
    }

    body.home .front-page .campaign-announcement__text {
        margin-bottom: clamp(1rem, 2.5vw, 1.35rem) !important;
        font-size: clamp(1.2rem, 3vw, 1.48rem) !important;
        line-height: 1.2 !important;
    }

    body.home .front-page .campaign-announcement__body {
        font-size: clamp(1.02rem, 2.15vw, 1.16rem) !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        letter-spacing: -0.005em !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: relative !important;
        z-index: 6 !important;
        order: 2 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: min(100%, 650px) !important;
        max-width: 650px !important;
        height: auto !important;
        margin: clamp(1.8rem, 4vw, 2.35rem) auto clamp(-4rem, -6vw, -3rem) !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 18px !important;
    }
}

/* Phones: the portrait itself now spans the entire hero width. It keeps
   its native aspect ratio instead of being sized by a fixed height, which
   eliminates the navy gutter visible in the narrow viewport capture. */
@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 100% auto !important;
        background-position: center top, center top !important;
    }

    body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        width: 100% !important;
        max-width: 560px !important;
        padding-top: clamp(20rem, 54vw, 26rem) !important;
    }

    body.home .front-page .campaign-announcement {
        padding-top: clamp(3.1rem, 10vw, 4rem) !important;
        padding-right: clamp(1.1rem, 5vw, 1.5rem) !important;
        padding-bottom: clamp(5.25rem, 15vw, 6.5rem) !important;
        padding-left: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    body.home .front-page .campaign-announcement__inner,
    body.home .front-page .campaign-announcement__copy {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home .front-page .campaign-announcement__title {
        font-size: clamp(2.35rem, 10vw, 3.1rem) !important;
    }

    body.home .front-page .campaign-announcement__text {
        font-size: clamp(1.14rem, 4.8vw, 1.38rem) !important;
        line-height: 1.22 !important;
    }

    body.home .front-page .campaign-announcement__body {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.5 !important;
    }

    body.home .front-page .campaign-announcement__media {
        width: min(100%, 560px) !important;
        max-width: 560px !important;
        margin-top: 1.65rem !important;
        margin-bottom: -3.25rem !important;
    }
}

/* Small phones need a little more photo breathing room before the logo,
   while preserving the full-width image behavior. */
@media (max-width: 560px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 100% auto !important;
        background-position: center top, center top !important;
    }

    body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        padding-top: clamp(18.5rem, 77vw, 22rem) !important;
    }

    body.home .front-page .campaign-announcement__media img {
        aspect-ratio: 4 / 3 !important;
    }
}

@media (max-width: 390px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 100% auto !important;
        background-position: center top, center top !important;
    }

    body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        padding-top: clamp(18rem, 78vw, 19.5rem) !important;
    }

    body.home .front-page .campaign-announcement {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
}

/* ============================================================
   V87 — SECTION 2 INTERMEDIATE VIEWPORT STRUCTURE
   - The v83 desktop image is intentionally large, but at narrower
     desktop/tablet widths it must stop sharing a row with the copy.
   - Between 941px and 1180px, stack the MEET JOHNNY copy and image so
     the photo cannot reserve width and squeeze the text column.
   - <=940px continues to use the dedicated v86 compact/mobile rules.
   ============================================================ */
@media (min-width: 941px) and (max-width: 1180px) {
    body.home .front-page .campaign-announcement {
        box-sizing: border-box !important;
        padding: clamp(3.5rem, 5.5vw, 4.4rem) clamp(2rem, 5vw, 3.5rem) clamp(6rem, 9vw, 7.25rem) !important;
        overflow: visible !important;
    }

    body.home .front-page .campaign-announcement__inner {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: min(100%, 780px) !important;
        max-width: 780px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    body.home .front-page .campaign-announcement__copy {
        order: 1 !important;
        width: min(100%, 700px) !important;
        max-width: 700px !important;
        margin: 0 auto !important;
    }

    body.home .front-page .campaign-announcement__title,
    body.home .front-page .campaign-announcement__text,
    body.home .front-page .campaign-announcement__body {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.home .front-page .campaign-announcement__media {
        position: relative !important;
        z-index: 6 !important;
        order: 2 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: min(100%, 720px) !important;
        max-width: 720px !important;
        height: auto !important;
        margin: clamp(1.9rem, 3.5vw, 2.4rem) auto -4.25rem !important;
        padding: 0 !important;
    }

    body.home .front-page .campaign-announcement__media img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 20px !important;
    }
}

/* ============================================================
   V93 — MOBILE HERO CROP RESET
   - Built from V87 to remove the failed V89–V92 crop experiments.
   - >=782px remains exactly as V87; the approved desktop composition
     and existing intermediate rules are not changed here.
   - <=781px keeps the portrait physically large instead of fitting it
     to viewport width, centers the PHOTO itself horizontally, and lifts
     it to one stable vertical focal position.
   - Narrower phones therefore crop the sides of the same composition
     instead of shrinking Johnny or drifting the image off-canvas.
   ============================================================ */
@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size:
            100% 100%,
            clamp(740px, 112vw, 875px) auto !important;
        background-position:
            center top,
            center -175px !important;
    }
}


/* ============================================================
   V94 — MID-VIEWPORT HERO CROP REFINEMENT + SECTION 2 PHOTO OVER WAVE
   - Keep the new mobile crop exactly as approved.
   - Smooth the portrait crop for 782px–1600px so it does not feel
     overly harsh or drift between common laptop/desktop widths.
   - Ensure the MEET JOHNNY photo visually rides over the lower wave
     instead of appearing tucked behind it.
   ============================================================ */

@media (min-width: 1181px) and (max-width: 1600px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 82% auto !important;
        background-position: center, calc(100% + 72px) -232px !important;
    }
}

@media (min-width: 782px) and (max-width: 1180px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 80% auto !important;
        background-position: center, calc(100% + 46px) -178px !important;
    }
}

body.home .front-page .campaign-announcement {
    isolation: isolate !important;
}

body.home .front-page .campaign-announcement__media,
body.home .front-page .campaign-announcement__media img {
    z-index: 20 !important;
}

body.home .front-page .campaign-announcement::after {
    z-index: 6 !important;
}



/* ============================================================
   V96 — RESTORE SECTION 2 IMAGE BLEED GEOMETRY
   - V94 incorrectly forced the chamber media to position:relative,
     overriding the approved desktop absolute overlap from V83.
   - Restore inherited breakpoint positioning; only raise stacking order.
   - Do not change Section 2/3 padding or wave geometry.
   ============================================================ */
body.home .front-page .campaign-announcement {
    isolation: isolate !important;
}

body.home .front-page .campaign-announcement__media {
    z-index: 20 !important;
}

body.home .front-page .campaign-announcement__media img {
    z-index: 1 !important;
}

body.home .front-page .campaign-announcement::after {
    z-index: 6 !important;
}

/* ============================================================
   V97 — ABOUT PAGE
   Dedicated /about/ composition. Homepage selectors are untouched.
   Section 1 mirrors the homepage MEET JOHNNY structure in navy,
   with the supplied legislative-journal image and a red harsh wave.
   Section 2 keeps the same campaign visual language on red with
   left-aligned copy and the supplied District 2 map on the right.
   ============================================================ */

.about-page {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.about-profile {
    position: relative;
    width: 100%;
    margin: 0;
    color: #ffffff;
    overflow: visible;
}

.about-profile--values {
    z-index: 3;
    min-height: clamp(620px, 52vw, 760px);
    padding: calc(var(--campaign-header-height-v12, 78px) + clamp(4.25rem, 6vw, 6rem)) clamp(2rem, 5vw, 5rem) clamp(7rem, 9vw, 9rem);
    background: #16325A;
    isolation: isolate;
}

.about-profile--values::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: clamp(78px, 8vw, 118px);
    pointer-events: none;
    background: url("../images/about-blue-to-red-wave.svg") center bottom / 100% 100% no-repeat;
}

.about-profile--meet {
    z-index: 1;
    min-height: clamp(560px, 47vw, 690px);
    padding: clamp(6rem, 8vw, 8rem) clamp(2rem, 5vw, 5rem) clamp(5.5rem, 7vw, 7rem);
    background: #D03330;
}

.about-profile__inner {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(420px, 560px);
    align-items: center;
    column-gap: clamp(4rem, 7vw, 7rem);
    width: min(1180px, calc(100% - 2rem));
    max-width: 1180px;
    min-height: 390px;
    margin: 0 auto;
}

.about-profile__copy {
    position: relative;
    z-index: 7;
    width: 100%;
    max-width: 500px;
    text-align: left;
}

.about-profile__title {
    max-width: 10.5ch;
    margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
    color: #ffffff;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: clamp(3rem, 4.8vw, 4.65rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.94;
    text-transform: uppercase;
}

.about-profile__body {
    max-width: 500px;
    margin: 0;
    color: #ffffff;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
    font-size: clamp(1.08rem, 1.24vw, 1.28rem);
    font-weight: 400;
    letter-spacing: -0.006em;
    line-height: 1.53;
}

.about-profile__media {
    position: relative;
    z-index: 10;
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.about-profile__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
    border-radius: 26px;
    box-shadow: 0 20px 50px rgba(8, 25, 48, 0.24);
}

/* First section inherits the homepage Section 2 idea: photo bridges the
   section boundary and remains above the wave. */
.about-profile--values .about-profile__media {
    transform: translateY(clamp(1.5rem, 3vw, 3rem));
}

/* The second section intentionally stays simpler: text left, image right,
   no artificial card stretch or extra decorative content. */
.about-profile--meet .about-profile__inner {
    align-items: center;
}

.about-profile--meet .about-profile__title {
    max-width: 11ch;
}

@media (min-width: 1181px) {
    .about-profile--values .about-profile__media {
        margin-bottom: clamp(-7rem, -7vw, -5rem);
    }
}

/* ============================================================
   V214 — NATIVE BLOCK VISUAL PARITY REPAIRS
   Restore the approved v207 visual behavior while retaining native
   WordPress text blocks for editing.
   ============================================================ */

/* Center every policy item from the same flex column. */
.about-page .about-medicaid__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.about-page .about-medicaid__title,
.about-page .about-medicaid__body,
.about-page .about-medicaid__veterans,
.about-page .about-medicaid__beginning {
    align-self: center !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.about-page .about-medicaid__body,
.about-page .about-medicaid__veterans {
    width: min(100%, 860px) !important;
}

.about-page .about-medicaid__beginning {
    width: min(100%, 760px) !important;
}

@media (max-width: 940px) {
    .about-page .about-medicaid__body,
    .about-page .about-medicaid__veterans {
        width: min(100%, 720px) !important;
    }
}

/* Let the chamber image overlap the lower divider in front of it. */
body.home .front-page,
body.home .front-page .campaign-announcement,
body.home .front-page .campaign-announcement__inner {
    overflow: visible !important;
}

body.home .front-page .campaign-announcement::after {
    z-index: 10 !important;
}

body.home .front-page .campaign-announcement__inner {
    z-index: 40 !important;
}

body.home .front-page .campaign-announcement__media {
    z-index: 50 !important;
    overflow: visible !important;
}

body.home .front-page .campaign-announcement__media img {
    display: block !important;
    overflow: visible !important;
    border-radius: 26px !important;
}

body.home .front-page .campaign-section-three {
    z-index: 1 !important;
}

/* Native Button blocks need the color on their link, not only the wrapper. */
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link {
    border: 2px solid #16325A !important;
    background: #16325A !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Stack before either image can squeeze the text column. */
@media (max-width: 1180px) {
    .about-profile--values {
        min-height: 0;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(3.5rem, 6vw, 4.75rem));
        padding-right: clamp(2rem, 6vw, 4rem);
        padding-bottom: clamp(7.25rem, 11vw, 9rem);
        padding-left: clamp(2rem, 6vw, 4rem);
    }

    .about-profile--meet {
        min-height: 0;
        padding: clamp(5.25rem, 8vw, 6.5rem) clamp(2rem, 6vw, 4rem) clamp(5.25rem, 8vw, 6.5rem);
    }

    .about-profile__inner {
        display: flex;
        flex-direction: column;
        width: min(100%, 760px);
        max-width: 760px;
        min-height: 0;
        margin: 0 auto;
        gap: 0;
    }

    .about-profile__copy {
        order: 1;
        width: min(100%, 680px);
        max-width: 680px;
        margin: 0 auto;
    }

    .about-profile__title,
    .about-profile__body {
        width: 100%;
        max-width: 100%;
    }

    .about-profile__title {
        max-width: 12ch;
        font-size: clamp(2.8rem, 7vw, 4rem);
    }

    .about-profile__body {
        font-size: clamp(1.05rem, 2.2vw, 1.18rem);
    }

    .about-profile__media,
    .about-profile--values .about-profile__media {
        order: 2;
        width: min(100%, 650px);
        max-width: 650px;
        margin: clamp(2rem, 4vw, 2.75rem) auto 0;
        transform: none;
    }

    .about-profile--values .about-profile__media {
        margin-bottom: clamp(-5rem, -7vw, -3.75rem);
    }
}

@media (max-width: 940px) {
    /* The global header is in normal sticky flow at this breakpoint, so
       do not reserve a second header-height worth of empty space. */
    .about-profile--values {
        padding-top: clamp(3.25rem, 8vw, 4.25rem);
    }

    .about-profile--values::after {
        height: clamp(64px, 12vw, 86px);
    }

    .about-profile--meet {
        padding-top: clamp(5rem, 10vw, 6rem);
    }
}

@media (max-width: 781px) {
    .about-profile--values {
        padding-right: clamp(1.1rem, 5vw, 1.5rem);
        padding-bottom: clamp(6rem, 17vw, 7.25rem);
        padding-left: clamp(1.1rem, 5vw, 1.5rem);
    }

    .about-profile--meet {
        padding: clamp(4.5rem, 12vw, 5.5rem) clamp(1.1rem, 5vw, 1.5rem) clamp(4.75rem, 13vw, 5.75rem);
    }

    .about-profile__inner,
    .about-profile__copy {
        width: 100%;
        max-width: 100%;
    }

    .about-profile__title {
        margin-bottom: 1.15rem;
        font-size: clamp(2.4rem, 10.8vw, 3.25rem);
        line-height: 0.96;
    }

    .about-profile__body {
        font-size: clamp(1rem, 4vw, 1.08rem);
        line-height: 1.52;
    }

    .about-profile__media,
    .about-profile--values .about-profile__media {
        width: min(100%, 560px);
        max-width: 560px;
        margin-top: 1.65rem;
    }

    .about-profile--values .about-profile__media {
        margin-bottom: -3.25rem;
    }

    .about-profile__media img {
        border-radius: 18px;
    }
}

@media (max-width: 560px) {
    .about-profile__title {
        font-size: clamp(2.2rem, 11vw, 2.85rem);
    }

    .about-profile__media img {
        border-radius: 16px;
    }
}

/* ============================================================
   V98 — DONATION POPUP NAVY REFINEMENT
   - Solid campaign navy panel with white type.
   - Remove any colored outer edge treatment.
   - Use restrained white-outline amount controls.
   - Remove the disclaimer divider line.
   ============================================================ */
.campaign-donation-modal__dialog {
    background: #16325A !important;
    color: #ffffff !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 30px 80px rgba(6, 15, 28, 0.42) !important;
}

.campaign-donation-modal__close,
.campaign-donation-modal__eyebrow,
.campaign-donation-modal__title,
.campaign-donation-modal__copy,
.campaign-donation-modal__dismiss,
.campaign-donation-modal__disclaimer {
    color: #ffffff !important;
}

.campaign-donation-modal__copy {
    color: rgba(255, 255, 255, 0.88) !important;
}

.campaign-donation-modal__disclaimer {
    padding-top: 0 !important;
    border-top: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.campaign-donation-modal__dismiss {
    color: rgba(255, 255, 255, 0.86) !important;
}

.campaign-donation-modal__dismiss:hover,
.campaign-donation-modal__dismiss:focus-visible,
.campaign-donation-modal__close:hover,
.campaign-donation-modal__close:focus-visible {
    color: #ffffff !important;
}

.campaign-donation-modal__amounts a {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background: transparent !important;
    color: #ffffff !important;
}

.campaign-donation-modal__amounts a:hover,
.campaign-donation-modal__amounts a:focus-visible {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #16325A !important;
}

.campaign-donation-modal__primary {
    border-color: #D03330 !important;
    background: #D03330 !important;
    color: #ffffff !important;
}

.campaign-donation-modal__primary:hover,
.campaign-donation-modal__primary:focus-visible {
    border-color: #b72b29 !important;
    background: #b72b29 !important;
    color: #ffffff !important;
}


/* ============================================================
   V99 — SECTION 2 DESKTOP COPY VERTICAL BALANCE
   - Keep the approved section height, wave, and chamber image geometry.
   - Lift only the MEET JOHNNY copy block on large desktop widths so
     the text is visually centered between the upper and lower barriers.
   ============================================================ */
@media (min-width: 1181px) {
    body.home .front-page .campaign-announcement__copy {
        transform: translateY(-48px) !important;
    }
}


/* ============================================================
   V100 — DONATION POPUP TYPOGRAPHY + DISMISS COPY
   - Force the entire initial-load donation modal to Source Sans 3.
   - Keep the dismiss action concise: "No thanks".
   ============================================================ */
.campaign-donation-modal__dialog,
.campaign-donation-modal__dialog * {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

/* ============================================================
   V101 — RELIABLE FIXED HEADER AT COMPACT VIEWPORTS
   - V85 switched <=940px to position:sticky, which can stop sticking
     because the WordPress site wrapper uses clipped overflow.
   - Keep the compact header fixed to the viewport instead, matching the
     reliable desktop behavior.
   - Reserve exactly one header-height in page flow so the visual layout
     remains the same as the previous in-flow sticky header.
   ============================================================ */
@media (max-width: 940px) {
    .site-header,
    body.home .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.home.is-campaign-nav-scrolled .site-header {
        position: fixed !important;
        top: var(--campaign-frame-v8, 6px) !important;
        right: var(--campaign-frame-v8, 6px) !important;
        left: var(--campaign-frame-v8, 6px) !important;
        width: auto !important;
        z-index: 100000 !important;
    }

    body.is-campaign-nav-scrolled .site-header,
    body.home.is-campaign-nav-scrolled .site-header {
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
    }

    /* A fixed header no longer occupies document flow. Recreate the same
       64px slot that the previous compact sticky header occupied. */
    .front-page,
    .about-page,
    .page-main,
    .article-main,
    .archive-main,
    .not-found-main {
        padding-top: var(--campaign-header-height-v12, 64px) !important;
    }

    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: calc(32px + var(--campaign-frame-v8, 6px)) !important;
    }

    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 32px !important;
    }
}

@media (max-width: 782px) {
    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: calc(46px + var(--campaign-frame-v8, 6px)) !important;
    }

    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 46px !important;
    }
}


/* ============================================================
   V102 — ABOUT PAGE REBUILD
   - Section 1 keeps the homepage Section 2 spirit on navy:
     text left, image right, image slightly bleeding through the wave.
   - Section 2 alternates the rhythm: image left, text right,
     text remains left-aligned, calmer image treatment.
   - Homepage selectors are untouched.
   ============================================================ */

.about-page {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.about-profile {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #ffffff !important;
}

.about-profile__inner {
    position: relative !important;
    z-index: 8 !important;
    display: grid !important;
    align-items: center !important;
    width: min(1160px, calc(100% - clamp(2rem, 5vw, 5rem))) !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
}

.about-profile__copy {
    position: relative !important;
    z-index: 9 !important;
    text-align: left !important;
}

.about-profile__title {
    margin: 0 0 clamp(1rem, 1.8vw, 1.45rem) !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.85rem, 4.45vw, 4.35rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
}

.about-profile__body {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.16vw, 1.18rem) !important;
    font-weight: 400 !important;
    line-height: 1.52 !important;
    letter-spacing: -0.004em !important;
}

.about-profile__media {
    position: relative !important;
    z-index: 12 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.about-profile__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(8, 25, 48, 0.24) !important;
}

.about-profile--values {
    z-index: 3 !important;
    min-height: clamp(620px, 50vw, 740px) !important;
    padding: calc(var(--campaign-header-height-v12, 78px) + clamp(4rem, 5.4vw, 5.25rem)) clamp(2rem, 5vw, 5rem) clamp(6.25rem, 8vw, 7.5rem) !important;
    background: #16325A !important;
    isolation: isolate !important;
}

.about-profile--values::after {
    content: "" !important;
    position: absolute !important;
    z-index: 5 !important;
    inset: auto 0 -1px 0 !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/about-blue-to-red-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.about-profile--values .about-profile__inner {
    grid-template-columns: minmax(0, 460px) minmax(420px, 540px) !important;
    column-gap: clamp(3.5rem, 6.5vw, 6.25rem) !important;
    min-height: 380px !important;
}

.about-profile--values .about-profile__copy {
    max-width: 460px !important;
}

.about-profile--values .about-profile__title {
    max-width: 10.4ch !important;
}

.about-profile--values .about-profile__body {
    max-width: 460px !important;
}

.about-profile--values .about-profile__media {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    justify-self: end !important;
    transform: translateY(clamp(1rem, 2.25vw, 2rem)) !important;
    margin-bottom: clamp(-6.4rem, -6.2vw, -4.6rem) !important;
}

.about-profile--meet {
    z-index: 1 !important;
    min-height: clamp(540px, 44vw, 640px) !important;
    padding: clamp(5.5rem, 7vw, 6.5rem) clamp(2rem, 5vw, 5rem) clamp(5rem, 7vw, 6rem) !important;
    background: #D03330 !important;
}

.about-profile--meet::after {
    content: "" !important;
    position: absolute !important;
    z-index: 5 !important;
    inset: auto 0 -1px 0 !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.about-profile--meet .about-profile__inner {
    grid-template-columns: minmax(380px, 500px) minmax(0, 470px) !important;
    column-gap: clamp(3.25rem, 5.5vw, 5.5rem) !important;
    min-height: 330px !important;
}

.about-profile--meet .about-profile__media {
    width: min(100%, 470px) !important;
    max-width: 470px !important;
    justify-self: start !important;
}

.about-profile--meet .about-profile__copy {
    max-width: 470px !important;
    justify-self: end !important;
}

.about-profile--meet .about-profile__title {
    max-width: 11.25ch !important;
}

.about-profile--meet .about-profile__body {
    max-width: 470px !important;
}

@media (max-width: 1180px) {
    .about-profile--values {
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(3.5rem, 5vw, 4.3rem)) !important;
        padding-right: clamp(2rem, 5vw, 3.5rem) !important;
        padding-bottom: clamp(6rem, 8vw, 7rem) !important;
        padding-left: clamp(2rem, 5vw, 3.5rem) !important;
    }

    .about-profile--meet {
        min-height: 0 !important;
        padding: clamp(5rem, 7vw, 6rem) clamp(2rem, 5vw, 3.5rem) clamp(5rem, 7vw, 6rem) !important;
    }

    .about-profile__inner,
    .about-profile--values .about-profile__inner,
    .about-profile--meet .about-profile__inner {
        display: flex !important;
        flex-direction: column !important;
        width: min(100%, 760px) !important;
        max-width: 760px !important;
        min-height: 0 !important;
        gap: 0 !important;
    }

    .about-profile--values .about-profile__copy {
        order: 1 !important;
        width: min(100%, 640px) !important;
        max-width: 640px !important;
        margin: 0 auto !important;
    }

    .about-profile--values .about-profile__media {
        order: 2 !important;
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        margin: clamp(1.8rem, 4vw, 2.5rem) auto clamp(-4.75rem, -6vw, -3.5rem) !important;
        transform: none !important;
    }

    .about-profile--meet .about-profile__media {
        order: 1 !important;
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        margin: 0 auto 2rem !important;
    }

    .about-profile--meet .about-profile__copy {
        order: 2 !important;
        width: min(100%, 640px) !important;
        max-width: 640px !important;
        margin: 0 auto !important;
        justify-self: auto !important;
    }

    .about-profile__title,
    .about-profile__body,
    .about-profile--meet .about-profile__body,
    .about-profile--values .about-profile__body {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-profile__title {
        font-size: clamp(2.75rem, 7vw, 3.85rem) !important;
    }
}

@media (max-width: 940px) {
    .about-profile--values {
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(2.75rem, 5vw, 3.35rem)) !important;
    }

    .about-profile--values::after,
    .about-profile--meet::after {
        height: clamp(64px, 12vw, 86px) !important;
    }
}

@media (max-width: 781px) {
    .about-profile--values {
        padding-right: clamp(1.1rem, 5vw, 1.5rem) !important;
        padding-bottom: clamp(5.6rem, 16vw, 6.8rem) !important;
        padding-left: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    .about-profile--meet {
        padding: clamp(4.35rem, 11vw, 5.1rem) clamp(1.1rem, 5vw, 1.5rem) clamp(4.5rem, 12vw, 5.35rem) !important;
    }

    .about-profile__title {
        font-size: clamp(2.35rem, 10.5vw, 3.15rem) !important;
        line-height: 0.96 !important;
        margin-bottom: 1.05rem !important;
    }

    .about-profile__body {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.52 !important;
    }

    .about-profile--values .about-profile__media {
        width: min(100%, 560px) !important;
        max-width: 560px !important;
        margin-top: 1.65rem !important;
        margin-bottom: -3.25rem !important;
    }

    .about-profile--meet .about-profile__media {
        width: min(100%, 460px) !important;
        max-width: 460px !important;
        margin-bottom: 1.65rem !important;
    }

    .about-profile__media img {
        border-radius: 18px !important;
    }
}

@media (max-width: 560px) {
    .about-profile__title {
        font-size: clamp(2.2rem, 11vw, 2.8rem) !important;
    }

    .about-profile__media img {
        border-radius: 16px !important;
    }
}

/* V103 — Donation popup headline weight */
.campaign-donation-modal__title {
    font-weight: 800 !important;
}


/* ============================================================
   V104 — ABOUT PAGE HERO REBUILD
   - Replace the first About section with a hero-like opening that
     uses the journal photo as the right-side background image.
   - Preserve the campaign navy/red/wave language.
   - Keep the second section flipped: image left, text right.
   - Homepage remains untouched.
   ============================================================ */

.about-page {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.about-hero {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-height: clamp(620px, 50vw, 720px) !important;
    margin: 0 !important;
    padding: calc(var(--campaign-header-height-v12, 78px) + clamp(3.5rem, 5.2vw, 4.75rem)) clamp(2rem, 5vw, 5rem) clamp(7rem, 8vw, 8rem) !important;
    color: #ffffff !important;
    background-color: #16325A !important;
    background-image:
        linear-gradient(
            90deg,
            #16325A 0%,
            #16325A 27%,
            rgba(22, 50, 90, 0.98) 34%,
            rgba(22, 50, 90, 0.90) 41%,
            rgba(22, 50, 90, 0.72) 48%,
            rgba(22, 50, 90, 0.48) 56%,
            rgba(22, 50, 90, 0.22) 64%,
            rgba(22, 50, 90, 0.04) 71%,
            rgba(22, 50, 90, 0) 76%
        ),
        url("../images/about-legislative-journal.png") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, 82% auto !important;
    background-position: center, calc(100% + 120px) -112px !important;
    overflow: visible !important;
}

.about-hero::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    inset: auto 0 -1px 0 !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/about-blue-to-red-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.about-hero__inner {
    position: relative !important;
    z-index: 6 !important;
    width: min(1160px, calc(100% - 2rem)) !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
}

.about-hero__copy {
    width: min(100%, 475px) !important;
    max-width: 475px !important;
    text-align: left !important;
}

.about-hero__title {
    margin: 0 0 clamp(1rem, 1.8vw, 1.35rem) !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(3rem, 4.55vw, 4.55rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    max-width: 10.2ch !important;
}

.about-hero__body {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.14vw, 1.16rem) !important;
    font-weight: 400 !important;
    line-height: 1.52 !important;
    letter-spacing: -0.004em !important;
    max-width: 455px !important;
}

.about-profile.about-profile--meet-flipped {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(5.6rem, 7vw, 6.6rem) clamp(2rem, 5vw, 5rem) clamp(5.15rem, 7vw, 6.1rem) !important;
    background: #D03330 !important;
    color: #ffffff !important;
    overflow: visible !important;
}

.about-profile.about-profile--meet-flipped::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    inset: auto 0 -1px 0 !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.about-profile.about-profile--meet-flipped .about-profile__inner {
    position: relative !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 470px) minmax(0, 500px) !important;
    align-items: center !important;
    column-gap: clamp(3rem, 5.5vw, 5.5rem) !important;
    width: min(1160px, calc(100% - 2rem)) !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
}

.about-profile.about-profile--meet-flipped .about-profile__media {
    width: min(100%, 450px) !important;
    max-width: 450px !important;
    margin: 0 !important;
    justify-self: start !important;
    z-index: 8 !important;
}

.about-profile.about-profile--meet-flipped .about-profile__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 44px rgba(8, 25, 48, 0.22) !important;
}

.about-profile.about-profile--meet-flipped .about-profile__copy {
    width: min(100%, 490px) !important;
    max-width: 490px !important;
    justify-self: end !important;
    text-align: left !important;
}

.about-profile.about-profile--meet-flipped .about-profile__title {
    margin: 0 0 clamp(1rem, 1.7vw, 1.35rem) !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.7rem, 4.05vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    max-width: 11ch !important;
}

.about-profile.about-profile--meet-flipped .about-profile__body {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.04rem, 1.1vw, 1.14rem) !important;
    font-weight: 400 !important;
    line-height: 1.52 !important;
    letter-spacing: -0.004em !important;
}

@media (min-width: 1280px) and (max-width: 1600px) {
    .about-hero {
        background-size: 100% 100%, 86% auto !important;
        background-position: center, calc(100% + 150px) -138px !important;
    }
}

@media (min-width: 941px) and (max-width: 1279px) {
    .about-hero {
        min-height: clamp(590px, 52vw, 680px) !important;
        background-size: 100% 100%, 92% auto !important;
        background-position: center, calc(100% + 165px) -88px !important;
    }

    .about-hero__copy {
        max-width: 440px !important;
    }
}

@media (max-width: 940px) {
    .about-hero {
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(2.75rem, 4vw, 3.2rem)) !important;
        padding-right: clamp(1.35rem, 5vw, 1.8rem) !important;
        padding-bottom: clamp(6rem, 11vw, 7rem) !important;
        padding-left: clamp(1.35rem, 5vw, 1.8rem) !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.10) 0%,
                rgba(22, 50, 90, 0.22) 17%,
                rgba(22, 50, 90, 0.58) 35%,
                rgba(22, 50, 90, 0.92) 52%,
                #16325A 64%,
                #16325A 100%
            ),
            url("../images/about-legislative-journal.png") !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: center, center top !important;
    }

    .about-hero::after,
    .about-profile.about-profile--meet-flipped::after {
        height: clamp(64px, 12vw, 86px) !important;
    }

    .about-hero__inner {
        width: 100% !important;
        max-width: 640px !important;
    }

    .about-hero__copy {
        width: min(100%, 640px) !important;
        max-width: 640px !important;
    }

    .about-profile.about-profile--meet-flipped {
        padding: clamp(4.9rem, 8vw, 5.6rem) clamp(1.35rem, 5vw, 1.8rem) clamp(4.75rem, 8vw, 5.35rem) !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__inner {
        display: flex !important;
        flex-direction: column !important;
        width: min(100%, 700px) !important;
        max-width: 700px !important;
        gap: 0 !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__media {
        order: 1 !important;
        width: min(100%, 480px) !important;
        max-width: 480px !important;
        margin: 0 auto 1.9rem !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__copy {
        order: 2 !important;
        width: min(100%, 640px) !important;
        max-width: 640px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 781px) {
    .about-hero {
        padding-right: 1.1rem !important;
        padding-left: 1.1rem !important;
        padding-bottom: clamp(5.75rem, 15vw, 6.6rem) !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: center, center top !important;
    }

    .about-hero__copy {
        max-width: 100% !important;
    }

    .about-hero__title {
        font-size: clamp(2.45rem, 10.4vw, 3.25rem) !important;
        line-height: 0.96 !important;
        margin-bottom: 1.05rem !important;
    }

    .about-hero__body {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.52 !important;
        max-width: 100% !important;
    }

    .about-profile.about-profile--meet-flipped {
        padding: clamp(4.35rem, 11vw, 5rem) 1.1rem clamp(4.5rem, 12vw, 5.2rem) !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__title {
        font-size: clamp(2.35rem, 10.1vw, 3rem) !important;
        line-height: 0.96 !important;
        margin-bottom: 1.05rem !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__body {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.52 !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__media {
        width: min(100%, 440px) !important;
        max-width: 440px !important;
        margin-bottom: 1.65rem !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__media img {
        border-radius: 18px !important;
    }
}

@media (max-width: 560px) {
    .about-hero {
        background-position: center, center top !important;
    }

    .about-hero__title,
    .about-profile.about-profile--meet-flipped .about-profile__title {
        font-size: clamp(2.2rem, 11vw, 2.78rem) !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__media img {
        border-radius: 16px !important;
    }
}


/* ============================================================
   V105 — ABOUT HEADER SCROLL STATE
   Header visual rules remain unchanged. navigation.js now treats the
   About hero as a valid scroll-state trigger, matching the homepage.
   ============================================================ */


/* ============================================================
   V106 — ABOUT PAGE SIMPLIFICATION
   Keep the hero-photo / flipped-biography structure, but reduce
   visual weight, empty space, and card-like treatment.
   Homepage remains untouched.
   ============================================================ */

.about-hero {
    min-height: clamp(520px, 43vw, 600px) !important;
    padding-top: calc(var(--campaign-header-height-v12, 78px) + clamp(2.75rem, 4vw, 3.6rem)) !important;
    padding-right: clamp(2rem, 5vw, 4.5rem) !important;
    padding-bottom: clamp(5.5rem, 7vw, 6.4rem) !important;
    padding-left: clamp(2rem, 5vw, 4.5rem) !important;
    background-image:
        linear-gradient(
            90deg,
            #16325A 0%,
            #16325A 31%,
            rgba(22, 50, 90, 0.93) 42%,
            rgba(22, 50, 90, 0.62) 54%,
            rgba(22, 50, 90, 0.24) 66%,
            rgba(22, 50, 90, 0) 77%
        ),
        url("../images/about-legislative-journal.png") !important;
    background-size: 100% 100%, 72% auto !important;
    background-position: center, calc(100% + 54px) center !important;
}

.about-hero::after,
.about-profile.about-profile--meet-flipped::after {
    height: clamp(72px, 6.6vw, 96px) !important;
}

.about-hero__inner {
    width: min(1080px, calc(100% - 1rem)) !important;
    max-width: 1080px !important;
}

.about-hero__copy {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
}

.about-hero__title {
    max-width: 10.5ch !important;
    margin-bottom: 1rem !important;
    font-size: clamp(2.65rem, 3.8vw, 3.75rem) !important;
    line-height: 0.97 !important;
    letter-spacing: -0.025em !important;
}

.about-hero__body {
    max-width: 420px !important;
    font-size: clamp(1rem, 1.02vw, 1.1rem) !important;
    line-height: 1.5 !important;
}

.about-profile.about-profile--meet-flipped {
    min-height: 0 !important;
    padding: clamp(4.65rem, 5.8vw, 5.6rem) clamp(2rem, 5vw, 4.5rem) clamp(4.8rem, 6vw, 5.7rem) !important;
}

.about-profile.about-profile--meet-flipped .about-profile__inner {
    grid-template-columns: minmax(340px, 420px) minmax(0, 455px) !important;
    column-gap: clamp(3rem, 4.5vw, 4.4rem) !important;
    width: min(1040px, calc(100% - 1rem)) !important;
    max-width: 1040px !important;
}

.about-profile.about-profile--meet-flipped .about-profile__media {
    width: min(100%, 410px) !important;
    max-width: 410px !important;
}

.about-profile.about-profile--meet-flipped .about-profile__media img {
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(8, 25, 48, 0.16) !important;
}

.about-profile.about-profile--meet-flipped .about-profile__copy {
    width: min(100%, 455px) !important;
    max-width: 455px !important;
}

.about-profile.about-profile--meet-flipped .about-profile__title {
    max-width: 11.5ch !important;
    margin-bottom: 1rem !important;
    font-size: clamp(2.45rem, 3.35vw, 3.35rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
}

.about-profile.about-profile--meet-flipped .about-profile__body {
    font-size: clamp(1rem, 1vw, 1.08rem) !important;
    line-height: 1.5 !important;
}

@media (max-width: 1120px) {
    .about-hero {
        background-size: 100% 100%, 78% auto !important;
        background-position: center, calc(100% + 78px) center !important;
    }
}

@media (max-width: 1040px) {
    .about-profile.about-profile--meet-flipped .about-profile__inner {
        display: flex !important;
        flex-direction: column !important;
        width: min(100%, 680px) !important;
        max-width: 680px !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__media {
        order: 1 !important;
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        margin: 0 auto 1.75rem !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__copy {
        order: 2 !important;
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 940px) {
    .about-hero {
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(2.2rem, 4vw, 2.8rem)) !important;
        padding-right: clamp(1.25rem, 5vw, 1.75rem) !important;
        padding-bottom: clamp(5.25rem, 10vw, 6.25rem) !important;
        padding-left: clamp(1.25rem, 5vw, 1.75rem) !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.08) 0%,
                rgba(22, 50, 90, 0.24) 22%,
                rgba(22, 50, 90, 0.74) 43%,
                #16325A 60%,
                #16325A 100%
            ),
            url("../images/about-legislative-journal.png") !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: center, center top !important;
    }

    .about-hero__inner,
    .about-hero__copy {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }

    .about-hero__copy {
        padding-top: clamp(12rem, 38vw, 17rem) !important;
    }

    .about-profile.about-profile--meet-flipped {
        padding: clamp(4.25rem, 8vw, 5rem) clamp(1.25rem, 5vw, 1.75rem) clamp(4.5rem, 8vw, 5.25rem) !important;
    }
}

@media (max-width: 781px) {
    .about-hero::after,
    .about-profile.about-profile--meet-flipped::after {
        height: clamp(58px, 13vw, 76px) !important;
    }

    .about-hero__copy {
        padding-top: clamp(11rem, 48vw, 15rem) !important;
    }

    .about-hero__title {
        font-size: clamp(2.25rem, 9.5vw, 2.95rem) !important;
    }

    .about-hero__body,
    .about-profile.about-profile--meet-flipped .about-profile__body {
        font-size: clamp(0.98rem, 4vw, 1.06rem) !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__title {
        font-size: clamp(2.2rem, 9.2vw, 2.8rem) !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__media {
        width: min(100%, 460px) !important;
        max-width: 460px !important;
        margin-bottom: 1.5rem !important;
    }

    .about-profile.about-profile--meet-flipped .about-profile__media img {
        border-radius: 16px !important;
    }
}


/* ============================================================
   V107 — ABOUT HERO USES SOLO JOHNNY PHOTO
   - Replace the journal-photo about hero with the new standing-room
     photo, styled like the homepage hero but mirrored.
   - Image on the LEFT, copy on the RIGHT.
   - Preserve existing second About section structure.
   ============================================================ */

.about-hero {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-height: clamp(620px, 48vw, 710px) !important;
    margin: 0 !important;
    padding: calc(var(--campaign-header-height-v12, 78px) + clamp(3.35rem, 4.7vw, 4.4rem)) clamp(2rem, 4.8vw, 5rem) clamp(7rem, 8vw, 8rem) !important;
    color: #ffffff !important;
    background-color: #16325A !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(22, 50, 90, 0.04) 0%,
            rgba(22, 50, 90, 0.10) 15%,
            rgba(22, 50, 90, 0.24) 28%,
            rgba(22, 50, 90, 0.50) 40%,
            rgba(22, 50, 90, 0.80) 52%,
            #16325A 62%,
            #16325A 100%
        ),
        url("../images/hero-about.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, auto 126% !important;
    background-position: center, left -56px center !important;
    overflow: visible !important;
}

.about-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 -1px 0 !important;
    z-index: 4 !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/about-blue-to-red-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.about-hero__inner {
    position: relative !important;
    z-index: 6 !important;
    width: min(1160px, calc(100% - 2rem)) !important;
    max-width: 1160px !important;
    min-height: inherit !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.about-hero__copy {
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    margin-left: auto !important;
    text-align: left !important;
}

.about-hero__title {
    margin: 0 0 1rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.85rem, 4.15vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    max-width: 10.5ch !important;
}

.about-hero__body {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.03rem, 1.06vw, 1.12rem) !important;
    font-weight: 400 !important;
    line-height: 1.54 !important;
    letter-spacing: -0.004em !important;
    max-width: 440px !important;
}

@media (min-width: 1400px) {
    .about-hero {
        background-size: 100% 100%, auto 132% !important;
        background-position: center, left -58px center !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        background-size: 100% 100%, auto 122% !important;
        background-position: center, left -52px center !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero {
        min-height: clamp(580px, 53vw, 670px) !important;
        background-size: 100% 100%, auto 114% !important;
        background-position: center, left -120px center !important;
        padding-top: calc(var(--campaign-header-height-v12, 78px) + clamp(3rem, 4vw, 3.6rem)) !important;
    }

    .about-hero__copy {
        width: min(100%, 400px) !important;
        max-width: 400px !important;
    }
}

@media (max-width: 940px) {
    .about-hero {
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(2.6rem, 4vw, 3rem)) !important;
        padding-right: clamp(1.35rem, 5vw, 1.8rem) !important;
        padding-bottom: clamp(5.85rem, 11vw, 6.8rem) !important;
        padding-left: clamp(1.35rem, 5vw, 1.8rem) !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.06) 0%,
                rgba(22, 50, 90, 0.16) 16%,
                rgba(22, 50, 90, 0.50) 34%,
                rgba(22, 50, 90, 0.86) 52%,
                #16325A 64%,
                #16325A 100%
            ),
            url("../images/hero-about.jpg") !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: center, center top !important;
    }

    .about-hero__inner {
        width: 100% !important;
        max-width: 680px !important;
        justify-content: flex-start !important;
        align-items: flex-end !important;
    }

    .about-hero__copy {
        width: min(100%, 640px) !important;
        max-width: 640px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 781px) {
    .about-hero {
        padding-right: 1.1rem !important;
        padding-left: 1.1rem !important;
        padding-bottom: clamp(5.75rem, 15vw, 6.5rem) !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: center, center top !important;
    }

    .about-hero__title {
        font-size: clamp(2.35rem, 10vw, 3rem) !important;
        line-height: 0.96 !important;
        margin-bottom: 0.95rem !important;
        max-width: 10ch !important;
    }

    .about-hero__body {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   V108 — ABOUT HERO CROPPING / HEIGHT REFINEMENT
   - Refine solo-photo framing.
   - Raise copy block.
   - Reduce overall hero height.
   ============================================================ */

.about-hero {
    min-height: clamp(520px, 39vw, 610px) !important;
    padding-top: calc(var(--campaign-header-height-v12, 78px) + clamp(2.2rem, 2.6vw, 2.85rem)) !important;
    padding-right: clamp(1.9rem, 4.2vw, 4.6rem) !important;
    padding-bottom: clamp(5.4rem, 5.8vw, 6.2rem) !important;
    padding-left: clamp(1.8rem, 4.1vw, 4.2rem) !important;
    background-size: 100% 100%, auto 116% !important;
    background-position: center, left -18px top 26% !important;
}

.about-hero__inner {
    align-items: flex-start !important;
}

.about-hero__copy {
    width: min(100%, 455px) !important;
    max-width: 455px !important;
    padding-top: clamp(1rem, 1.65vw, 1.5rem) !important;
}

.about-hero__title {
    margin-bottom: 0.9rem !important;
}

.about-hero__body {
    max-width: 455px !important;
}

@media (min-width: 1400px) {
    .about-hero {
        min-height: 610px !important;
        background-size: 100% 100%, auto 119% !important;
        background-position: center, left -8px top 24% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(520px, 41vw, 585px) !important;
        background-size: 100% 100%, auto 114% !important;
        background-position: center, left -28px top 25% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero {
        min-height: clamp(500px, 48vw, 560px) !important;
        padding-top: calc(var(--campaign-header-height-v12, 78px) + 2rem) !important;
        padding-bottom: clamp(5rem, 6.5vw, 5.7rem) !important;
        background-size: 100% 100%, auto 108% !important;
        background-position: center, left -86px top 22% !important;
    }

    .about-hero__copy {
        width: min(100%, 385px) !important;
        max-width: 385px !important;
        padding-top: 0.5rem !important;
    }

    .about-hero__body {
        max-width: 385px !important;
    }
}

@media (max-width: 940px) {
    .about-hero__copy {
        padding-top: 0 !important;
    }
}


/* ============================================================
   V109 — ABOUT HERO MORE ZOOM / SHORTER SECTION
   - Zoom the solo image in further.
   - Shift the image emphasis farther left.
   - Make the section noticeably shorter.
   ============================================================ */

.about-hero {
    min-height: clamp(470px, 35vw, 560px) !important;
    padding-top: calc(var(--campaign-header-height-v12, 78px) + clamp(1.9rem, 2.15vw, 2.4rem)) !important;
    padding-right: clamp(1.9rem, 4vw, 4.4rem) !important;
    padding-bottom: clamp(4.7rem, 5vw, 5.35rem) !important;
    padding-left: clamp(1.6rem, 3.7vw, 3.8rem) !important;
    background-size: 100% 100%, auto 128% !important;
    background-position: center, left -78px top 24% !important;
}

.about-hero__copy {
    width: min(100%, 445px) !important;
    max-width: 445px !important;
    padding-top: clamp(0.5rem, 1vw, 0.95rem) !important;
}

.about-hero__body {
    max-width: 445px !important;
}

@media (min-width: 1400px) {
    .about-hero {
        min-height: 560px !important;
        background-size: 100% 100%, auto 132% !important;
        background-position: center, left -58px top 22% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(470px, 37vw, 540px) !important;
        background-size: 100% 100%, auto 126% !important;
        background-position: center, left -88px top 24% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero {
        min-height: clamp(455px, 43vw, 515px) !important;
        padding-top: calc(var(--campaign-header-height-v12, 78px) + 1.75rem) !important;
        padding-bottom: clamp(4.55rem, 5.8vw, 5rem) !important;
        background-size: 100% 100%, auto 120% !important;
        background-position: center, left -126px top 20% !important;
    }

    .about-hero__copy {
        width: min(100%, 372px) !important;
        max-width: 372px !important;
        padding-top: 0.2rem !important;
    }

    .about-hero__body {
        max-width: 372px !important;
    }
}


/* ============================================================
   V110 — ABOUT HERO TIGHTER CROP + SEAMLESS FADE
   - Zoom the about hero image in further.
   - Shift it farther left.
   - Replace the hard vertical seam with a smoother fade to navy.
   - Preserve the mobile treatment that was already working better.
   ============================================================ */

.about-hero {
    min-height: clamp(455px, 33vw, 525px) !important;
    padding-top: calc(var(--campaign-header-height-v12, 78px) + clamp(1.75rem, 2vw, 2.1rem)) !important;
    padding-right: clamp(1.8rem, 3.9vw, 4.2rem) !important;
    padding-bottom: clamp(4.45rem, 4.8vw, 5rem) !important;
    padding-left: clamp(1.5rem, 3.5vw, 3.4rem) !important;
    background: #16325A !important;
    background-image: none !important;
    overflow: hidden !important;
}

.about-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(22, 50, 90, 0.00) 0%,
            rgba(22, 50, 90, 0.04) 18%,
            rgba(22, 50, 90, 0.10) 33%,
            rgba(22, 50, 90, 0.22) 45%,
            rgba(22, 50, 90, 0.42) 55%,
            rgba(22, 50, 90, 0.68) 64%,
            rgba(22, 50, 90, 0.88) 73%,
            #16325A 82%
        ),
        url("../images/hero-about.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, auto 138% !important;
    background-position: center, left -118px top 23% !important;
}

.about-hero__inner {
    position: relative !important;
    z-index: 6 !important;
}

.about-hero__copy {
    width: min(100%, 445px) !important;
    max-width: 445px !important;
    padding-top: 0 !important;
}

.about-hero__body {
    max-width: 445px !important;
}

@media (min-width: 1400px) {
    .about-hero {
        min-height: 525px !important;
    }

    .about-hero::before {
        background-size: 100% 100%, auto 142% !important;
        background-position: center, left -96px top 22% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(455px, 35vw, 505px) !important;
    }

    .about-hero::before {
        background-size: 100% 100%, auto 136% !important;
        background-position: center, left -132px top 23% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero {
        min-height: clamp(438px, 41vw, 490px) !important;
        padding-top: calc(var(--campaign-header-height-v12, 78px) + 1.55rem) !important;
        padding-bottom: clamp(4.2rem, 5.4vw, 4.75rem) !important;
    }

    .about-hero::before {
        background-size: 100% 100%, auto 130% !important;
        background-position: center, left -170px top 20% !important;
    }

    .about-hero__copy {
        width: min(100%, 370px) !important;
        max-width: 370px !important;
    }

    .about-hero__body {
        max-width: 370px !important;
    }
}

@media (max-width: 940px) {
    .about-hero::before {
        display: none !important;
    }

    .about-hero {
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.06) 0%,
                rgba(22, 50, 90, 0.16) 16%,
                rgba(22, 50, 90, 0.50) 34%,
                rgba(22, 50, 90, 0.86) 52%,
                #16325A 64%,
                #16325A 100%
            ),
            url("../images/hero-about.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: center, center top !important;
    }
}


/* ============================================================
   V112 — ABOUT PAGE MEDICAID SECTION
   - Remove the previous MEET JOHNNY/map section entirely.
   - Replace it with a simple, centered Medicaid policy section.
   - Preserve the navy -> red wave and red -> footer transition.
   ============================================================ */

.about-medicaid {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(5rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 4rem) clamp(6.25rem, 8vw, 7.5rem) !important;
    color: #ffffff !important;
    background: #D03330 !important;
    text-align: center !important;
    overflow: visible !important;
}

.about-medicaid::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    right: 0 !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.about-medicaid__inner {
    position: relative !important;
    z-index: 6 !important;
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin: 0 auto !important;
}

.about-medicaid__title {
    margin: 0 0 clamp(1.4rem, 2.4vw, 2rem) !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.85rem, 4.5vw, 4.35rem) !important;
    font-weight: 800 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.about-medicaid__body {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important;
    font-weight: 400 !important;
    line-height: 1.56 !important;
    letter-spacing: -0.004em !important;
    text-align: center !important;
}

.about-medicaid__body p {
    margin: 0 0 1.15rem !important;
}

.about-medicaid__body p:last-child {
    margin-bottom: 0 !important;
}

.about-medicaid__closing {
    margin-top: clamp(1.55rem, 2.5vw, 2.15rem) !important;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem) !important;
    font-weight: 800 !important;
    font-style: italic !important;
    letter-spacing: 0.01em !important;
}

@media (max-width: 940px) {
    .about-medicaid {
        padding-top: clamp(4.5rem, 9vw, 5.5rem) !important;
        padding-bottom: clamp(5.75rem, 11vw, 6.75rem) !important;
    }

    .about-medicaid::after {
        height: clamp(64px, 12vw, 86px) !important;
    }

    .about-medicaid__inner,
    .about-medicaid__body {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
    }
}

@media (max-width: 781px) {
    .about-medicaid {
        padding: clamp(4rem, 11vw, 4.8rem) 1.1rem clamp(5.25rem, 14vw, 6.2rem) !important;
    }

    .about-medicaid__title {
        font-size: clamp(2.35rem, 10vw, 3.1rem) !important;
        margin-bottom: 1.25rem !important;
    }

    .about-medicaid__body {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.52 !important;
    }

    .about-medicaid__closing {
        font-size: clamp(1.15rem, 4.8vw, 1.35rem) !important;
    }
}


/* ============================================================
   V115 — ABOUT HERO SEAMLESS PHOTO FADE + MEDICAID CLOSING SIZE
   - Extend the solo-photo layer farther beneath the navy overlay so
     the image edge can never appear as a visible vertical seam.
   - Keep the photo tightly cropped/zoomed while restoring a smooth
     left-photo -> navy transition.
   - Match the Medicaid closing line to the normal body-copy size,
     retaining bold italic emphasis.
   ============================================================ */

.about-hero::before {
    background-image:
        linear-gradient(
            90deg,
            rgba(22, 50, 90, 0.00) 0%,
            rgba(22, 50, 90, 0.03) 17%,
            rgba(22, 50, 90, 0.08) 27%,
            rgba(22, 50, 90, 0.18) 35%,
            rgba(22, 50, 90, 0.34) 41%,
            rgba(22, 50, 90, 0.56) 46%,
            rgba(22, 50, 90, 0.78) 50%,
            rgba(22, 50, 90, 0.93) 54%,
            #16325A 58%,
            #16325A 100%
        ),
        url("../images/hero-about.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, auto 166% !important;
    background-position: center, left -126px top 23% !important;
}

@media (min-width: 1400px) {
    .about-hero::before {
        background-size: 100% 100%, auto 170% !important;
        background-position: center, left -100px top 22% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-size: 100% 100%, auto 164% !important;
        background-position: center, left -138px top 23% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero::before {
        background-size: 100% 100%, auto 156% !important;
        background-position: center, left -168px top 20% !important;
    }
}

.about-medicaid__closing {
    font-size: inherit !important;
    font-weight: 800 !important;
    font-style: italic !important;
    line-height: inherit !important;
}

@media (max-width: 781px) {
    .about-medicaid__closing {
        font-size: inherit !important;
    }
}


/* ============================================================
   V116 — ABOUT HERO IMAGE NUDGE LEFT
   - Move the desktop/tablet hero photo slightly farther left.
   - Preserve crop, fade, section height, and mobile treatment.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-position: center, left -122px top 22% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-position: center, left -158px top 23% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero::before {
        background-position: center, left -194px top 20% !important;
    }
}


/* ============================================================
   V117 — ADD VETERANS POLICY COPY TO ABOUT RED SECTION
   - Keep this policy point inside the existing Medicaid section.
   - No visible title yet; user will choose one later.
   - Match the existing centered body-copy treatment.
   ============================================================ */

.about-medicaid__veterans {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin: clamp(2.6rem, 4vw, 3.5rem) auto 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important;
    font-weight: 400 !important;
    line-height: 1.56 !important;
    letter-spacing: -0.004em !important;
    text-align: center !important;
}

.about-medicaid__veterans p {
    margin: 0 0 1.15rem !important;
}

.about-medicaid__veterans p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 940px) {
    .about-medicaid__veterans {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
    }
}

@media (max-width: 781px) {
    .about-medicaid__veterans {
        margin-top: 2.25rem !important;
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.52 !important;
    }
}


/* V118 — About page reuses the existing homepage donation section; no additional CSS required. */


/* ============================================================
   V119 — VETERANS POLICY TITLE
   ============================================================ */

.about-medicaid__veterans-title {
    margin: 0 0 clamp(1rem, 1.5vw, 1.25rem) !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.9rem, 2.75vw, 2.75rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

@media (max-width: 781px) {
    .about-medicaid__veterans-title {
        font-size: clamp(1.75rem, 7.2vw, 2.2rem) !important;
        line-height: 1.02 !important;
    }
}


/* ============================================================
   V120 — ABOUT POLICY CLOSING LINE
   ============================================================ */
.about-medicaid__beginning {
    margin: clamp(1.7rem, 2.5vw, 2.3rem) auto 0 !important;
    max-width: 760px !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: inherit !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

.about-medicaid__beginning strong,
.about-medicaid__beginning em {
    font-weight: 800 !important;
    font-style: italic !important;
}


/* ============================================================
   V121 — ABOUT POLICY TYPOGRAPHY TWEAKS
   - Closing Medicaid line uses normal case.
   - Veterans heading matches the Medicaid heading size.
   ============================================================ */

.about-medicaid__veterans-title {
    font-size: clamp(2.85rem, 4.5vw, 4.35rem) !important;
}

@media (max-width: 781px) {
    .about-medicaid__veterans-title {
        font-size: clamp(2.35rem, 10vw, 3.1rem) !important;
    }
}

/* ============================================================
   V122 — ABOUT DONATION SECTION + POLICY WAVE FIX
   - The homepage donation styles were scoped to body.home, so the
     copied markup on About rendered as mostly unstyled HTML.
   - Apply the approved donation presentation to the About page.
   - Preserve and foreground the navy wave divider below Section 2.
   ============================================================ */

.about-medicaid {
    z-index: 5 !important;
}

.about-medicaid::after {
    z-index: 12 !important;
    display: block !important;
    opacity: 1 !important;
}

.about-page .campaign-section-four.campaign-donation-section {
    --campaign-donation-wave: clamp(78px, 8vw, 118px);
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: clamp(470px, 44vw, 610px) !important;
    margin: 0 !important;
    padding: clamp(3.15rem, 4vw, 4rem) clamp(1.5rem, 5vw, 5rem) clamp(7rem, 8.5vw, 8.5rem) !important;
    background: #D03330 !important;
    color: #ffffff !important;
    text-align: center !important;
    overflow: visible !important;
}

/* Section 2 already supplies the navy divider at this boundary. */
.about-page .campaign-section-four.campaign-donation-section::before {
    content: none !important;
    display: none !important;
}

/* Finish the donation section with the same navy wave used on Home. */
.about-page .campaign-section-four.campaign-donation-section::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: var(--campaign-donation-wave) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.about-page .campaign-donation-section__inner {
    position: relative !important;
    z-index: 5 !important;
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.about-page .campaign-donation-section__eyebrow {
    margin: 0 0 0.75rem !important;
    color: rgba(255,255,255,0.82) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.about-page .campaign-donation-section__title {
    max-width: 700px !important;
    margin: 0 0 1rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.5rem, 4.5vw, 4.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.98 !important;
    text-align: center !important;
}

.about-page .campaign-donation-section__body {
    max-width: 660px !important;
    margin: 0 0 1.75rem !important;
    color: rgba(255,255,255,0.94) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem) !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.about-page .campaign-donation-section__amounts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    width: min(100%, 560px) !important;
    margin: 0 0 0.75rem !important;
}

.about-page .campaign-donation-section__amounts a,
.about-page .campaign-donation-section__primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    border: 2px solid #16325A !important;
    border-radius: 5px !important;
    background: #16325A !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease !important;
}

.about-page .campaign-donation-section__amounts a {
    font-size: 1.2rem !important;
}

.about-page .campaign-donation-section__primary {
    width: min(100%, 560px) !important;
    margin: 0 !important;
    font-size: 1rem !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

.about-page .campaign-donation-section__amounts a:hover,
.about-page .campaign-donation-section__amounts a:focus-visible,
.about-page .campaign-donation-section__primary:hover,
.about-page .campaign-donation-section__primary:focus-visible {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #16325A !important;
    transform: translateY(-1px) !important;
}

.about-page .campaign-donation-section__disclaimer {
    max-width: 620px !important;
    margin: 1rem 0 0 !important;
    color: rgba(255,255,255,0.72) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.74rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
}

@media (max-width: 781px) {
    .about-page .campaign-section-four.campaign-donation-section {
        --campaign-donation-wave: clamp(58px, 14vw, 82px);
        min-height: 0 !important;
        padding: 3rem 1.2rem 7rem !important;
    }

    .about-page .campaign-donation-section__inner {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
    }

    .about-page .campaign-donation-section__title {
        font-size: clamp(2.15rem, 10vw, 3.2rem) !important;
    }

    .about-page .campaign-donation-section__amounts {
        width: 100% !important;
        max-width: 520px !important;
        gap: 0.55rem !important;
        margin-inline: auto !important;
    }

    .about-page .campaign-donation-section__amounts a {
        min-width: 0 !important;
        width: 100% !important;
    }
}


/* ============================================================
   V123 — ABOUT DONATION / FOOTER COLOR SWAP
   - About donation: navy field, white text, red buttons.
   - About footer: red field with the supplied white/blue logo.
   - Red lower wave bridges the blue donation section into footer.
   - Homepage donation/footer remain unchanged.
   ============================================================ */

.about-page .campaign-section-four.campaign-donation-section {
    background: #16325A !important;
    color: #ffffff !important;
}

.about-page .campaign-donation-section__eyebrow,
.about-page .campaign-donation-section__title,
.about-page .campaign-donation-section__body {
    color: #ffffff !important;
}

.about-page .campaign-donation-section__disclaimer {
    color: rgba(255,255,255,0.74) !important;
}

.about-page .campaign-donation-section__amounts a,
.about-page .campaign-donation-section__primary {
    border-color: #D03330 !important;
    background: #D03330 !important;
    color: #ffffff !important;
}

.about-page .campaign-donation-section__amounts a:hover,
.about-page .campaign-donation-section__amounts a:focus-visible,
.about-page .campaign-donation-section__primary:hover,
.about-page .campaign-donation-section__primary:focus-visible {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #D03330 !important;
}

/* Red wave into the About-specific red footer. */
.about-page .campaign-section-four.campaign-donation-section::after {
    background-image: url("../images/about-blue-to-red-wave.svg") !important;
}

.site-footer--about {
    background: #D03330 !important;
    color: #ffffff !important;
}

.site-footer--about.site-footer {
    background-color: #D03330 !important;
}

.site-footer--about .site-footer__logo {
    width: min(100%, 350px) !important;
    max-width: 350px !important;
}

.site-footer--about .footer-navigation .wp-block-navigation-item__content,
.site-footer--about .footer-socials .wp-social-link {
    color: #ffffff !important;
}

.site-footer--about .footer-navigation .wp-block-navigation-item__content:hover,
.site-footer--about .footer-navigation .wp-block-navigation-item__content:focus-visible,
.site-footer--about .footer-socials .wp-social-link:hover,
.site-footer--about .footer-socials .wp-social-link:focus-within {
    color: #16325A !important;
}

.site-footer--about .legal-disclaimer {
    color: rgba(255,255,255,0.74) !important;
}

@media (max-width: 781px) {
    .site-footer--about .site-footer__logo {
        width: min(100%, 285px) !important;
        max-width: 285px !important;
    }
}

@media (max-width: 480px) {
    .site-footer--about .site-footer__logo {
        width: min(100%, 240px) !important;
        max-width: 240px !important;
    }
}

/* ============================================================
   V124 — SITE-WIDE FIXED HEADER CLEANUP
   - Remove the hairline/drop-shadow separation beneath the solid
     scrolled header.
   - Ensure the solid state sits flush to the viewport top at every
     breakpoint (while respecting the WordPress admin toolbar).
   ============================================================ */

body.is-campaign-nav-scrolled .site-header,
body.home.is-campaign-nav-scrolled .site-header {
    top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body.is-campaign-nav-scrolled .site-navigation,
body.home.is-campaign-nav-scrolled .site-navigation,
body.is-campaign-nav-scrolled .site-navigation.has-background,
body.home.is-campaign-nav-scrolled .site-navigation.has-background {
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.is-campaign-nav-scrolled .site-header::before,
body.is-campaign-nav-scrolled .site-header::after,
body.home.is-campaign-nav-scrolled .site-header::before,
body.home.is-campaign-nav-scrolled .site-header::after,
body.is-campaign-nav-scrolled .site-navigation::before,
body.is-campaign-nav-scrolled .site-navigation::after,
body.home.is-campaign-nav-scrolled .site-navigation::before,
body.home.is-campaign-nav-scrolled .site-navigation::after {
    border: 0 !important;
    box-shadow: none !important;
}

body.admin-bar.is-campaign-nav-scrolled .site-header,
body.admin-bar.home.is-campaign-nav-scrolled .site-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: 46px !important;
    }
}

/* ============================================================
   V125 — WIP ROUTES + HEADER FACEBOOK HARDENING
   - Give Events and Updates simple centered WIP placeholders.
   - Keep both social icons visible in the primary header.
   ============================================================ */

.campaign-wip-page {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: clamp(480px, 68vh, 720px) !important;
    margin: 0 !important;
    padding: calc(var(--campaign-header-height-v12, 78px) + 4rem) 1.5rem 5rem !important;
    background: #16325A !important;
    color: #ffffff !important;
    text-align: center !important;
}

.campaign-wip-page__title {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(4rem, 12vw, 9rem) !important;
    font-weight: 800 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.045em !important;
    text-transform: uppercase !important;
}

/* Do not let responsive header rules collapse either social icon. */
.header-socials .wp-social-link-facebook,
.header-socials .wp-social-link-instagram {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
}

/* ============================================================
   V126 — ABOUT HERO SUBJECT SHIFT LEFT
   - Move the desktop/tablet About hero photo farther left.
   - Preserve existing crop/zoom, fade, section height, copy layout,
     and mobile treatment.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-position: center, left -156px top 22% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-position: center, left -192px top 23% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero::before {
        background-position: center, left -228px top 20% !important;
    }
}


/* ============================================================
   V127 — MATCH HEADER FACEBOOK ICON + FRAME WIP ROUTES
   - Header Facebook fallback clones the exact footer icon glyph.
   - Events/Updates keep the same warm-neutral outer frame as the
     Home and About pages, including around the solid fixed header.
   ============================================================ */

/* Events/Updates use a solid header, but it should remain inset inside
   the canonical site frame rather than stretching to viewport edges. */
body.has-campaign-wip-page .site-header,
body.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
    top: var(--campaign-frame-v8, 12px) !important;
    right: var(--campaign-frame-v8, 12px) !important;
    left: var(--campaign-frame-v8, 12px) !important;
    width: auto !important;
}

body.has-campaign-wip-page .wp-site-blocks {
    margin: var(--campaign-frame-v8, 12px) !important;
    background: #ffffff !important;
}

/* Preserve the same header-height reservation on compact WIP pages now
   that the header is fixed there. */
@media (max-width: 940px) {
    .campaign-wip-page {
        padding-top: calc(var(--campaign-header-height-v12, 64px) + 4rem) !important;
    }

    body.has-campaign-wip-page .site-header,
    body.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
        top: var(--campaign-frame-v8, 6px) !important;
        right: var(--campaign-frame-v8, 6px) !important;
        left: var(--campaign-frame-v8, 6px) !important;
    }
}

body.admin-bar.has-campaign-wip-page .site-header,
body.admin-bar.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
    top: calc(32px + var(--campaign-frame-v8, 12px)) !important;
}

@media (max-width: 782px) {
    body.admin-bar.has-campaign-wip-page .site-header,
    body.admin-bar.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
        top: calc(46px + var(--campaign-frame-v8, 6px)) !important;
    }
}

/* Keep both header glyphs bare and let WordPress's native SVG shape show. */
.header-socials .wp-social-link-facebook svg,
.header-socials .wp-social-link-instagram svg {
    fill: currentColor !important;
}

/* ============================================================
   V128 — HOME PRIORITIES PARAGRAPH SPACING
   - Make the gap between paragraph 1 and paragraph 2 match the
     1.25rem gap between paragraph 2 and paragraph 3.
   ============================================================ */
body.home .front-page .campaign-priorities-section__body {
    margin-top: 1.25rem !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__body {
        margin-top: 1.25rem !important;
    }
}

/* ============================================================
   V133 — ABOUT HERO RESPONSIVE COMPOSITION REBUILD
   Built directly from approved v128 baseline.
   - 782–940px: retain left-image/right-copy composition with a
     narrower, smaller text column so Johnny remains clearly visible.
   - <=781px: switch to a photo-first stacked hero, matching the
     site's existing compact/mobile convention rather than forcing
     copy over the subject.
   - Desktop (>940px) remains untouched.
   ============================================================ */

@media (min-width: 782px) and (max-width: 940px) {
    .about-hero {
        min-height: clamp(560px, 68vw, 650px) !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(2.1rem, 3vw, 2.8rem)) !important;
        padding-right: clamp(1.5rem, 3.6vw, 2.6rem) !important;
        padding-bottom: clamp(5.5rem, 8vw, 6.4rem) !important;
        padding-left: clamp(1.5rem, 3vw, 2.2rem) !important;
        background: #16325A !important;
        background-image: none !important;
        overflow: hidden !important;
    }

    .about-hero::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background-image:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.00) 0%,
                rgba(22, 50, 90, 0.03) 22%,
                rgba(22, 50, 90, 0.10) 34%,
                rgba(22, 50, 90, 0.28) 43%,
                rgba(22, 50, 90, 0.55) 50%,
                rgba(22, 50, 90, 0.82) 57%,
                rgba(22, 50, 90, 0.96) 63%,
                #16325A 69%,
                #16325A 100%
            ),
            url("../images/hero-about.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100%, auto 148% !important;
        background-position: center, left -126px top 18% !important;
    }

    .about-hero__inner {
        position: relative !important;
        z-index: 6 !important;
        width: min(100%, 860px) !important;
        max-width: 860px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }

    .about-hero__copy {
        width: 46% !important;
        max-width: 385px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .about-hero__title {
        max-width: 9.5ch !important;
        margin: 0 0 0.9rem !important;
        font-size: clamp(2.25rem, 5.15vw, 3rem) !important;
        line-height: 0.96 !important;
    }

    .about-hero__body {
        max-width: 385px !important;
        margin: 0 !important;
        font-size: clamp(0.93rem, 1.75vw, 1.02rem) !important;
        line-height: 1.48 !important;
    }
}

@media (max-width: 781px) {
    .about-hero {
        --about-photo-height: clamp(315px, 58vw, 430px);
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--about-photo-height) - 1rem) !important;
        padding-right: clamp(1.1rem, 5vw, 1.5rem) !important;
        padding-bottom: clamp(5.4rem, 13vw, 6.4rem) !important;
        padding-left: clamp(1.1rem, 5vw, 1.5rem) !important;
        background: #16325A !important;
        background-image: none !important;
        overflow: hidden !important;
    }

    .about-hero::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        height: calc(var(--campaign-header-height-v12, 70px) + var(--about-photo-height)) !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.04) 0%,
                rgba(22, 50, 90, 0.05) 52%,
                rgba(22, 50, 90, 0.22) 68%,
                rgba(22, 50, 90, 0.62) 82%,
                #16325A 100%
            ),
            url("../images/hero-about.jpg") !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100%, 100% auto !important;
        background-position: center, center top !important;
    }

    .about-hero__inner {
        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        display: block !important;
        min-height: 0 !important;
    }

    .about-hero__copy {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .about-hero__title {
        max-width: 10ch !important;
        margin: 0 0 0.95rem !important;
        font-size: clamp(2.2rem, 8.7vw, 2.85rem) !important;
        line-height: 0.96 !important;
    }

    .about-hero__body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: clamp(1rem, 3.8vw, 1.07rem) !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 560px) {
    .about-hero {
        --about-photo-height: clamp(285px, 74vw, 355px);
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--about-photo-height) - 0.6rem) !important;
    }

    .about-hero::before {
        background-size: 100% 100%, auto 100% !important;
        background-position: center, center top !important;
    }

    .about-hero__title {
        font-size: clamp(2.05rem, 10vw, 2.55rem) !important;
    }
}


/* ============================================================
   V134 — ABOUT HERO RESPONSIVE IMAGE LAYER
   - Replace fragile background-position cropping at <=1119px with
     a real image layer so Johnny cannot drift behind/out of view.
   - 782–1119px: dedicated left photo field + right copy.
   - <=781px: full-width square photo above copy using the complete
     source image, matching the site's framed/full-bleed convention.
   - >=1120px: preserve the approved desktop background treatment.
   ============================================================ */

.about-hero__responsive-photo {
    display: none !important;
}

@media (min-width: 782px) and (max-width: 1119px) {
    .about-hero {
        position: relative !important;
        min-height: clamp(540px, 58vw, 650px) !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(2rem, 3vw, 2.75rem)) !important;
        padding-right: clamp(1.5rem, 3.5vw, 2.75rem) !important;
        padding-bottom: clamp(5.3rem, 7vw, 6.2rem) !important;
        padding-left: clamp(1.5rem, 3vw, 2.25rem) !important;
        background: #16325A !important;
        background-image: none !important;
        overflow: hidden !important;
    }

    .about-hero::before {
        display: none !important;
        content: none !important;
    }

    .about-hero__responsive-photo {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 auto 0 0 !important;
        width: 62% !important;
        height: 100% !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .about-hero__responsive-photo::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        background:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.02) 0%,
                rgba(22, 50, 90, 0.04) 50%,
                rgba(22, 50, 90, 0.16) 66%,
                rgba(22, 50, 90, 0.48) 78%,
                rgba(22, 50, 90, 0.82) 90%,
                #16325A 100%
            ),
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.02) 0%,
                rgba(22, 50, 90, 0.04) 56%,
                rgba(22, 50, 90, 0.28) 76%,
                rgba(22, 50, 90, 0.76) 92%,
                #16325A 100%
            ) !important;
        pointer-events: none !important;
    }

    .about-hero__responsive-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 50% 34% !important;
    }

    .about-hero__inner {
        position: relative !important;
        z-index: 6 !important;
        width: min(100%, 980px) !important;
        max-width: 980px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        min-height: 0 !important;
    }

    .about-hero__copy {
        width: 42% !important;
        max-width: 390px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .about-hero__title {
        max-width: 9.4ch !important;
        margin: 0 0 0.9rem !important;
        font-size: clamp(2.2rem, 4.55vw, 3rem) !important;
        line-height: 0.96 !important;
    }

    .about-hero__body {
        width: 100% !important;
        max-width: 390px !important;
        margin: 0 !important;
        font-size: clamp(0.91rem, 1.55vw, 1.02rem) !important;
        line-height: 1.48 !important;
    }
}

@media (max-width: 781px) {
    .about-hero {
        --about-mobile-photo: calc(100vw - (2 * var(--campaign-frame-v8, 6px)));
        position: relative !important;
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--about-mobile-photo) - 0.25rem) !important;
        padding-right: clamp(1.1rem, 5vw, 1.5rem) !important;
        padding-bottom: clamp(5.4rem, 13vw, 6.4rem) !important;
        padding-left: clamp(1.1rem, 5vw, 1.5rem) !important;
        background: #16325A !important;
        background-image: none !important;
        overflow: hidden !important;
    }

    .about-hero::before {
        display: none !important;
        content: none !important;
    }

    .about-hero__responsive-photo {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--campaign-header-height-v12, 70px) + var(--about-mobile-photo)) !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .about-hero__responsive-photo::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        background: linear-gradient(
            180deg,
            rgba(22, 50, 90, 0.02) 0%,
            rgba(22, 50, 90, 0.02) 58%,
            rgba(22, 50, 90, 0.12) 70%,
            rgba(22, 50, 90, 0.40) 82%,
            rgba(22, 50, 90, 0.78) 92%,
            #16325A 100%
        ) !important;
        pointer-events: none !important;
    }

    .about-hero__responsive-photo img {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: var(--about-mobile-photo) !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .about-hero__inner {
        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        display: block !important;
        min-height: 0 !important;
    }

    .about-hero__copy {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .about-hero__title {
        max-width: 10ch !important;
        margin: 0 0 0.95rem !important;
        font-size: clamp(2.15rem, 8.7vw, 2.8rem) !important;
        line-height: 0.96 !important;
    }

    .about-hero__body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: clamp(0.98rem, 3.8vw, 1.06rem) !important;
        line-height: 1.5 !important;
    }
}

/* ============================================================
   V135 — ABOUT HERO COMPACT STACKED PHOTO
   - 561–781px: keep the photo-first stacked composition, but use a
     shorter landscape crop focused on Johnny's face and upper body.
   - Keep the photo full-width inside the site frame.
   - <=560px and >=782px retain the V134 behavior.
   ============================================================ */

@media (min-width: 561px) and (max-width: 781px) {
    .about-hero {
        --about-mobile-photo: clamp(330px, 56vw, 430px) !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--about-mobile-photo) - 0.25rem) !important;
    }

    .about-hero__responsive-photo {
        height: calc(var(--campaign-header-height-v12, 70px) + var(--about-mobile-photo)) !important;
    }

    .about-hero__responsive-photo img {
        width: 100% !important;
        height: var(--about-mobile-photo) !important;
        object-fit: cover !important;
        object-position: 50% 24% !important;
        transform: scale(1.16) !important;
        transform-origin: 50% 28% !important;
    }

    .about-hero__responsive-photo::after {
        background: linear-gradient(
            180deg,
            rgba(22, 50, 90, 0.01) 0%,
            rgba(22, 50, 90, 0.02) 52%,
            rgba(22, 50, 90, 0.10) 66%,
            rgba(22, 50, 90, 0.34) 78%,
            rgba(22, 50, 90, 0.72) 90%,
            #16325A 100%
        ) !important;
    }
}

/* ============================================================
   V136 — ABOUT HERO TRUE MOBILE CROP
   - <=560px: replace the square/full-body photo with a shorter,
     tighter portrait crop focused on Johnny's face and upper torso.
   - Keep the photo full-width inside the site frame.
   ============================================================ */

@media (max-width: 560px) {
    .about-hero {
        --about-mobile-photo: clamp(270px, 64vw, 340px) !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--about-mobile-photo) - 0.25rem) !important;
    }

    .about-hero__responsive-photo {
        height: calc(var(--campaign-header-height-v12, 70px) + var(--about-mobile-photo)) !important;
    }

    .about-hero__responsive-photo img {
        width: 100% !important;
        height: var(--about-mobile-photo) !important;
        object-fit: cover !important;
        object-position: 50% 28% !important;
        transform: scale(1.32) !important;
        transform-origin: 50% 30% !important;
    }

    .about-hero__responsive-photo::after {
        background: linear-gradient(
            180deg,
            rgba(22, 50, 90, 0.01) 0%,
            rgba(22, 50, 90, 0.02) 46%,
            rgba(22, 50, 90, 0.10) 60%,
            rgba(22, 50, 90, 0.34) 74%,
            rgba(22, 50, 90, 0.72) 88%,
            #16325A 100%
        ) !important;
    }
}

/* ============================================================
   V138 — COMPACT HEADER OFFSET FIX (V136 VISUALS PRESERVED)
   - Preserve the approved compact header appearance/layout from V136.
   - Replace brittle hardcoded 32px/46px admin-toolbar offsets with a
     runtime value that is 0 when the toolbar is hidden.
   - At rest the header remains inside the site frame; once scrolled it
     snaps to the visible top edge, exactly as before.
   ============================================================ */

:root {
    --campaign-admin-bar-offset: 0px;
}

@media (max-width: 940px) {
    .site-header,
    body.home .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.home.is-campaign-nav-scrolled .site-header,
    body.has-campaign-wip-page .site-header,
    body.has-campaign-wip-page.is-campaign-nav-scrolled .site-header,
    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header,
    body.admin-bar.has-campaign-wip-page .site-header,
    body.admin-bar.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
        top: calc(var(--campaign-admin-bar-offset, 0px) + var(--campaign-frame-v8, 6px)) !important;
    }

    body.is-campaign-nav-scrolled .site-header,
    body.home.is-campaign-nav-scrolled .site-header,
    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header {
        top: var(--campaign-admin-bar-offset, 0px) !important;
    }
}

/* ============================================================
   V139 — COPY HOME HEADER LOGIC SITE-WIDE AT COMPACT WIDTHS
   - Use the exact compact header proportions from the homepage on About.
   - Lock header/nav/inner row to the same 64px height.
   - Keep the same social icon and menu control sizing/alignment.
   - Preserve the V138 dynamic WordPress admin-bar top offset logic.
   ============================================================ */

@media (max-width: 940px) {
    :root {
        --campaign-header-height-v12: 64px;
    }

    .site-header,
    body.home .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.home.is-campaign-nav-scrolled .site-header,
    body.has-campaign-wip-page .site-header,
    body.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
        position: fixed !important;
        right: var(--campaign-frame-v8, 6px) !important;
        left: var(--campaign-frame-v8, 6px) !important;
        width: auto !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #16325A !important;
        background-color: #16325A !important;
        z-index: 100000 !important;
    }

    .site-navigation,
    .site-navigation.has-background,
    body.home .site-navigation,
    body.home:not(.is-campaign-nav-scrolled) .site-navigation,
    body.home.is-campaign-nav-scrolled .site-navigation {
        position: relative !important;
        width: 100% !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #16325A !important;
        background-color: #16325A !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .site-navigation__inner {
        box-sizing: border-box !important;
        width: calc(100% - 2rem) !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }

    .site-navigation__left {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        gap: 0.75rem !important;
    }

    .header-socials {
        order: 1 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        align-self: center !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0.35rem !important;
        line-height: 0 !important;
    }

    .header-socials .wp-social-link,
    .header-socials .wp-social-link a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-socials .wp-social-link svg {
        width: 20px !important;
        height: 20px !important;
    }

    .primary-navigation {
        order: 2 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 0.25rem !important;
        gap: 0.35rem !important;
        line-height: 1 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-open svg {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-open::after {
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: 0.08em !important;
    }

    .header-actions {
        display: none !important;
    }
}


/* ============================================================
   V140 — DEFINITIVE COMPACT HEADER GEOMETRY
   - One geometry for Home, About and utility pages at <=940px.
   - Never change header top/left/right when scroll state changes.
   - Prevent hero/page content from appearing above or behind the header.
   - Respect the WordPress admin bar only when it is actually visible.
   ============================================================ */

@media (max-width: 940px) {
    :root {
        --campaign-header-height-v12: 64px;
        --campaign-frame-v8: 6px;
    }

    .site-header,
    body.home .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.home.is-campaign-nav-scrolled .site-header,
    body:not(.home) .site-header,
    body.is-campaign-nav-scrolled .site-header,
    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header,
    body.has-campaign-wip-page .site-header,
    body.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
        box-sizing: border-box !important;
        position: fixed !important;
        top: calc(var(--campaign-admin-bar-offset, 0px) + var(--campaign-frame-v8, 6px)) !important;
        right: var(--campaign-frame-v8, 6px) !important;
        left: var(--campaign-frame-v8, 6px) !important;
        width: auto !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: visible !important;
        z-index: 100000 !important;
        background: #16325A !important;
        background-color: #16325A !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .site-header::before,
    .site-header::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .site-navigation,
    .site-navigation.has-background,
    body.home .site-navigation,
    body.home:not(.is-campaign-nav-scrolled) .site-navigation,
    body.home.is-campaign-nav-scrolled .site-navigation,
    body:not(.home) .site-navigation {
        box-sizing: border-box !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: #16325A !important;
        background-color: #16325A !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .site-navigation__inner {
        box-sizing: border-box !important;
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        align-items: center !important;
    }

    .site-navigation__left {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reserve exactly one header row in the document. The header is fixed,
       so without this slot the first hero can exist underneath it. */
    .front-page,
    .about-page,
    .page-main,
    .article-main,
    .archive-main,
    .not-found-main,
    .campaign-wip-page {
        box-sizing: border-box !important;
        padding-top: var(--campaign-header-height-v12) !important;
    }

    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero,
    .about-page .about-hero,
    body.admin-bar .about-page .about-hero {
        margin-top: 0 !important;
        top: auto !important;
    }
}

/* WordPress can leave the admin-bar body class and html top margin in place
   even when Studio hides the toolbar. JS marks that state explicitly. */
html.campaign-admin-bar-hidden {
    margin-top: 0 !important;
}

/* ============================================================
   V141 — REMOVE DUPLICATE HERO SPACER + HARD-ANCHOR COMPACT HEADER
   - Home and About heroes already reserve/underlap the compact header.
     Remove V140's second 64px document spacer that created the blue strip.
   - Keep one shared compact header geometry at <=940px.
   - Header top offset comes only from a genuinely visible WP admin bar.
   ============================================================ */

@media (max-width: 940px) {
    :root {
        --campaign-header-height-v12: 64px;
        --campaign-frame-v8: 6px;
    }

    .site-header,
    body.home .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.home.is-campaign-nav-scrolled .site-header,
    body:not(.home) .site-header,
    body.is-campaign-nav-scrolled .site-header,
    body.admin-bar .site-header,
    body.admin-bar.home .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header,
    body.has-campaign-wip-page .site-header,
    body.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
        position: fixed !important;
        top: calc(var(--campaign-admin-bar-offset, 0px) + var(--campaign-frame-v8, 6px)) !important;
        right: var(--campaign-frame-v8, 6px) !important;
        left: var(--campaign-frame-v8, 6px) !important;
        width: auto !important;
        height: var(--campaign-header-height-v12) !important;
        min-height: var(--campaign-header-height-v12) !important;
        max-height: var(--campaign-header-height-v12) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: #16325A !important;
        background-color: #16325A !important;
        border: 0 !important;
        box-shadow: none !important;
        z-index: 100000 !important;
    }

    /* Home + About are visual heroes that intentionally sit underneath the
       fixed header. Do not reserve a second header row in document flow. */
    .front-page,
    .about-page {
        padding-top: 0 !important;
    }

    /* Utility pages do not have an underlapping hero, so retain one row. */
    .page-main,
    .article-main,
    .archive-main,
    .not-found-main,
    .campaign-wip-page {
        padding-top: var(--campaign-header-height-v12) !important;
    }
}

/* ============================================================
   V142 — RESTORE APPROVED COMPACT STICKY/SCROLLED HEADER GEOMETRY
   - Match the older approved sticky-scroll state shown by the user.
   - At <=940px, the resting header stays inside the 6px site frame.
   - Once scrolled/solid, the header snaps flush to the viewport edges.
   - Keep the runtime WP admin-bar offset from V141 when genuinely visible.
   - Preserve compact 64px sizing, no divider/shadow.
   ============================================================ */
@media (max-width: 940px) {
    /* Resting compact state remains framed. */
    body:not(.is-campaign-nav-scrolled) .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar:not(.is-campaign-nav-scrolled) .site-header,
    body.admin-bar.home:not(.is-campaign-nav-scrolled) .site-header {
        position: fixed !important;
        top: calc(var(--campaign-admin-bar-offset, 0px) + var(--campaign-frame-v8, 6px)) !important;
        left: var(--campaign-frame-v8, 6px) !important;
        right: var(--campaign-frame-v8, 6px) !important;
        width: auto !important;
        height: var(--campaign-header-height-v12, 64px) !important;
        min-height: var(--campaign-header-height-v12, 64px) !important;
        max-height: var(--campaign-header-height-v12, 64px) !important;
        margin: 0 !important;
    }

    /* Approved older sticky-scroll state: fully attached to viewport. */
    body.is-campaign-nav-scrolled .site-header,
    body.home.is-campaign-nav-scrolled .site-header,
    body.admin-bar.is-campaign-nav-scrolled .site-header,
    body.admin-bar.home.is-campaign-nav-scrolled .site-header,
    body.has-campaign-wip-page.is-campaign-nav-scrolled .site-header {
        position: fixed !important;
        top: var(--campaign-admin-bar-offset, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: var(--campaign-header-height-v12, 64px) !important;
        min-height: var(--campaign-header-height-v12, 64px) !important;
        max-height: var(--campaign-header-height-v12, 64px) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #16325A !important;
        background-color: #16325A !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        z-index: 100000 !important;
    }

    body.is-campaign-nav-scrolled .site-navigation,
    body.home.is-campaign-nav-scrolled .site-navigation,
    body.is-campaign-nav-scrolled .site-navigation.has-background,
    body.home.is-campaign-nav-scrolled .site-navigation.has-background {
        height: var(--campaign-header-height-v12, 64px) !important;
        min-height: var(--campaign-header-height-v12, 64px) !important;
        max-height: var(--campaign-header-height-v12, 64px) !important;
        background: #16325A !important;
        background-color: #16325A !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.is-campaign-nav-scrolled .site-header::before,
    body.is-campaign-nav-scrolled .site-header::after,
    body.home.is-campaign-nav-scrolled .site-header::before,
    body.home.is-campaign-nav-scrolled .site-header::after,
    body.is-campaign-nav-scrolled .site-navigation::before,
    body.is-campaign-nav-scrolled .site-navigation::after,
    body.home.is-campaign-nav-scrolled .site-navigation::before,
    body.home.is-campaign-nav-scrolled .site-navigation::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* ============================================================
   V144 — HOME HERO LIVE-PREVIEW TABLET CROP FIX
   - Built from V142; V143 crop experiment intentionally discarded.
   - The deployed WordPress preview falls into the 782–940px band.
   - Preserve the approved tablet scale/horizontal placement, but stop
     lifting the portrait 178px upward, which clips Johnny's head.
   ============================================================ */
@media (min-width: 782px) and (max-width: 940px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        background-size: 100% 100%, 80% auto !important;
        background-position: center, calc(100% + 46px) -82px !important;
    }
}

/* ============================================================
   V145 — HOME HERO IMAGE EDGE MUST STAY UNDER THE WAVE
   - In the deployed 782–940px tablet band, the portrait layer could
     end before the hero did, exposing a hard horizontal image edge.
   - Size the portrait from hero HEIGHT rather than viewport width.
   - Anchor it below the hero bottom so its lower edge always sits
     beneath the existing red wave divider.
   - The wave remains the visible lower boundary of the portrait.
   ============================================================ */
@media (min-width: 782px) and (max-width: 940px) {
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        overflow: hidden !important;
        background-size:
            100% 100%,
            auto 122% !important;
        background-position:
            center,
            calc(100% + 46px) bottom -38px !important;
    }

    body.home .front-page .campaign-hero::after {
        z-index: 20 !important;
        bottom: -1px !important;
    }
}

/* ============================================================
   V146 — PRIORITIES BODY TYPE MATCHES MEET JOHNNY
   - Use the exact responsive body-copy sizing from the MEET JOHNNY
     paragraph for all explanatory copy in DELIVERING REAL SOLUTIONS.
   - Preserve existing bold/italic emphasis and paragraph spacing.
   ============================================================ */
body.home .front-page .campaign-priorities-section__intro,
body.home .front-page .campaign-priorities-section__body p {
    font-size: clamp(1.05rem, 1.4vw, 1.28rem) !important;
    line-height: 1.55 !important;
    letter-spacing: -0.005em !important;
}

@media (min-width: 982px) {
    body.home .front-page .campaign-priorities-section__intro,
    body.home .front-page .campaign-priorities-section__body p {
        font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
        line-height: 1.52 !important;
    }
}

@media (max-width: 940px) {
    body.home .front-page .campaign-priorities-section__intro,
    body.home .front-page .campaign-priorities-section__body p {
        font-size: clamp(1.02rem, 2.15vw, 1.16rem) !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__intro,
    body.home .front-page .campaign-priorities-section__body p {
        font-size: clamp(1rem, 4vw, 1.08rem) !important;
        line-height: 1.5 !important;
    }
}


/* ============================================================
   V147 — REBUILD COMPACT NAVIGATION OVERLAY
   - Replace the broken/blank WordPress mobile overlay with one
     deliberate campaign navigation panel.
   - Overlay sits above the fixed header instead of underneath it.
   - Navy background, white stacked links, red Donate CTA.
   - Remove the oversized decorative ghost wordmark.
   ============================================================ */
@media (max-width: 940px) {
    body.is-campaign-menu-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .primary-navigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
        box-sizing: border-box !important;
        position: fixed !important;
        top: var(--campaign-admin-bar-offset, 0px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 200000 !important;
        display: flex !important;
        width: 100vw !important;
        max-width: none !important;
        height: calc(100dvh - var(--campaign-admin-bar-offset, 0px)) !important;
        min-height: calc(100dvh - var(--campaign-admin-bar-offset, 0px)) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: #ffffff !important;
        background: #16325A !important;
        background-color: #16325A !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: campaign-menu-in 180ms ease-out both !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open::before,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open::after {
        content: none !important;
        display: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: clamp(1rem, 4vw, 1.5rem) !important;
        right: clamp(1rem, 4vw, 1.5rem) !important;
        z-index: 4 !important;
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        place-items: center !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-close svg {
        width: 30px !important;
        height: 30px !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-content {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 1 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: clamp(5.5rem, 14vh, 8rem) clamp(1.5rem, 7vw, 4rem) clamp(3rem, 8vh, 5rem) !important;
        text-align: center !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: min(100%, 680px) !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: clamp(0.3rem, 1.7vh, 0.85rem) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.15em 0.2em !important;
        color: #ffffff !important;
        background: transparent !important;
        font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
        font-size: clamp(2.35rem, 8vw, 4.7rem) !important;
        font-weight: 800 !important;
        letter-spacing: -0.035em !important;
        line-height: 0.98 !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
        color: #ffffff !important;
        text-decoration: underline !important;
        text-decoration-color: #D03330 !important;
        text-decoration-thickness: 0.09em !important;
        text-underline-offset: 0.14em !important;
        outline: 0 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate {
        display: block !important;
        width: min(100%, 340px) !important;
        margin-top: clamp(1.35rem, 3.5vh, 2.25rem) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 54px !important;
        padding: 0.85rem 1.75rem !important;
        color: #ffffff !important;
        background: #D03330 !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content:hover,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content:focus-visible {
        color: #16325A !important;
        background: #ffffff !important;
        text-decoration: none !important;
    }
}

@media (max-width: 520px) {
    .primary-navigation .wp-block-navigation__responsive-container-content {
        justify-content: flex-start !important;
        padding-top: clamp(5rem, 15vh, 6.5rem) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        font-size: clamp(2.1rem, 11vw, 3.2rem) !important;
    }
}


/* ============================================================
   V148 — COMPACT MOBILE NAV DROPDOWN
   - Replace full-screen takeover with a compact right-aligned panel.
   - Keep all primary navigation items visible at practical sizes.
   - Preserve navy/white/red campaign styling.
   ============================================================ */
@media (max-width: 940px) {
    body.is-campaign-menu-open {
        overflow: auto !important;
        overscroll-behavior: auto !important;
    }

    .primary-navigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
        box-sizing: border-box !important;
        position: fixed !important;
        top: calc(var(--campaign-admin-bar-offset, 0px) + var(--campaign-header-height-v12, 64px)) !important;
        right: var(--campaign-frame-v8, 6px) !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 200000 !important;
        display: block !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--campaign-admin-bar-offset, 0px) - var(--campaign-header-height-v12, 64px) - 12px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: #ffffff !important;
        background: #16325A !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        border-top: 0 !important;
        border-radius: 0 0 0 16px !important;
        box-shadow: 0 18px 38px rgba(5, 20, 43, 0.26) !important;
        animation: campaign-menu-compact-in 150ms ease-out both !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open::before,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open::after {
        content: none !important;
        display: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 0.7rem !important;
        right: 0.7rem !important;
        z-index: 5 !important;
        display: grid !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        place-items: center !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-close svg {
        width: 20px !important;
        height: 20px !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-content {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 3.35rem 1rem 1rem !important;
        text-align: left !important;
        overflow: visible !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0.2rem !important;
        overflow: visible !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        transform: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0.65rem 0.8rem !important;
        color: #ffffff !important;
        background: transparent !important;
        border-radius: 8px !important;
        font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
        font-size: 1.02rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.045em !important;
        line-height: 1.1 !important;
        text-align: left !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
        color: #ffffff !important;
        background: rgba(255,255,255,0.08) !important;
        text-decoration: none !important;
        outline: 1px solid rgba(255,255,255,0.24) !important;
        outline-offset: -1px !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate {
        display: block !important;
        width: 100% !important;
        margin: 0.55rem 0 0 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
        color: #ffffff !important;
        background: #D03330 !important;
        border-radius: 999px !important;
        font-size: 0.94rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content:hover,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content:focus-visible {
        color: #16325A !important;
        background: #ffffff !important;
        outline: 0 !important;
    }
}

@media (max-width: 520px) {
    .primary-navigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
        right: var(--campaign-frame-v8, 6px) !important;
        width: min(320px, calc(100vw - 18px)) !important;
        max-width: calc(100vw - 18px) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container-content {
        padding: 3.15rem 0.8rem 0.8rem !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        min-height: 43px !important;
        padding: 0.58rem 0.7rem !important;
        font-size: 0.96rem !important;
    }
}

@keyframes campaign-menu-compact-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   V150 — FULL-PAGE MOBILE MENU, ISOLATED TO OPEN STATE
   - Rebuilt from v148 after v149 leaked menu branding into the
     normal desktop/header DOM.
   - Ossoff-inspired composition using Johnny campaign branding.
   - Absolutely no menu-only element is visible while closed.
   ============================================================ */

/* Safety: menu-only cloned elements can never render outside an open overlay. */
.campaign-mobile-menu-socials {
    display: none !important;
}

@media (max-width: 940px) {
    body.is-campaign-menu-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .primary-navigation.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
        box-sizing: border-box !important;
        position: fixed !important;
        inset: var(--campaign-admin-bar-offset, 0px) 0 0 0 !important;
        z-index: 250000 !important;
        display: flex !important;
        width: 100vw !important;
        max-width: none !important;
        height: calc(100dvh - var(--campaign-admin-bar-offset, 0px)) !important;
        min-height: calc(100dvh - var(--campaign-admin-bar-offset, 0px)) !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: #ffffff !important;
        background: #16325A !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: campaign-menu-v150-in 160ms ease-out both !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open::before,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open::after {
        content: none !important;
        display: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: fixed !important;
        top: calc(var(--campaign-admin-bar-offset, 0px) + clamp(1rem, 3vw, 1.65rem)) !important;
        right: clamp(1rem, 3vw, 1.65rem) !important;
        z-index: 250010 !important;
        display: grid !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        place-items: center !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
        width: 28px !important;
        height: 28px !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 1 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: clamp(4.8rem, 8vh, 6.3rem) 1.4rem clamp(1.6rem, 4vh, 2.5rem) !important;
        text-align: center !important;
        overflow: visible !important;
    }

    /* Campaign wordmark appears only inside the OPEN overlay. */
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: min(58vw, 330px) !important;
        aspect-ratio: 2048 / 576 !important;
        margin: 0 auto clamp(1.45rem, 3.2vh, 2.15rem) !important;
        background: url("../images/campaign-logo-header.png") center / contain no-repeat !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        box-sizing: border-box !important;
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: min(100%, 600px) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0.08rem !important;
        overflow: visible !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        transform: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0.1em 0.2em !important;
        color: #ffffff !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
        font-size: clamp(1.85rem, 5.2vw, 2.85rem) !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        line-height: 1.04 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
        color: #D03330 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
        color: #D03330 !important;
        background: transparent !important;
        outline: 0 !important;
        text-decoration: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate {
        display: block !important;
        width: min(72vw, 360px) !important;
        margin: clamp(1rem, 2.4vh, 1.5rem) 0 0 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content {
        display: flex !important;
        width: 100% !important;
        min-height: 58px !important;
        padding: 0.85rem 1.5rem !important;
        color: #ffffff !important;
        background: #D03330 !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.07em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content:hover,
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content:focus-visible {
        color: #16325A !important;
        background: #ffffff !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .campaign-mobile-menu-socials {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.1rem !important;
        margin: clamp(1.45rem, 3.2vh, 2rem) 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .campaign-mobile-menu-socials .wp-block-social-link {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .campaign-mobile-menu-socials .wp-block-social-link a {
        display: grid !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        color: #ffffff !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        place-items: center !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .campaign-mobile-menu-socials .wp-block-social-link svg {
        width: 25px !important;
        height: 25px !important;
        fill: currentColor !important;
    }
}

@media (max-width: 520px) {
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        justify-content: center !important;
        padding: 4.25rem 1rem 1.3rem !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
        width: min(68vw, 285px) !important;
        margin-bottom: 1.2rem !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        font-size: clamp(1.7rem, 8.4vw, 2.35rem) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate {
        width: min(80vw, 330px) !important;
        margin-top: 0.9rem !important;
    }
}

@keyframes campaign-menu-v150-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   V151 — FULLSCREEN MENU COMPOSITION REFINEMENT
   - Hide the header's original social row inside the open overlay.
   - Keep the cloned social row below Donate.
   - Tighten logo -> navigation spacing.
   - Narrow the Donate pill.
   - Shift the full menu composition slightly upward.
   ============================================================ */

@media (max-width: 940px) {
    /* The header socials can be carried into WP's responsive content.
       Hide that original row so only the dedicated bottom clone renders. */
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .header-socials {
        display: none !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        justify-content: center !important;
        padding-top: clamp(3.8rem, 6vh, 5rem) !important;
        padding-bottom: clamp(4.8rem, 10vh, 7.5rem) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
        width: min(55vw, 315px) !important;
        margin-bottom: clamp(0.55rem, 1.3vh, 0.9rem) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        gap: 0 !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate {
        width: min(52vw, 270px) !important;
        margin-top: clamp(0.75rem, 1.5vh, 1rem) !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate .wp-block-navigation-item__content {
        min-height: 54px !important;
        padding-inline: 1.25rem !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .campaign-mobile-menu-socials {
        order: 99 !important;
        margin-top: clamp(0.85rem, 1.8vh, 1.2rem) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 520px) {
    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 3.8rem !important;
        padding-bottom: 4.6rem !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
        width: min(64vw, 270px) !important;
        margin-bottom: 0.55rem !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .mobile-menu-donate {
        width: min(62vw, 250px) !important;
        margin-top: 0.7rem !important;
    }

    .primary-navigation .wp-block-navigation__responsive-container.is-menu-open .campaign-mobile-menu-socials {
        margin-top: 0.8rem !important;
    }
}

/* ============================================================
   V152 — RESTORE HOME LINK IN STANDARD HEADER
   - An old desktop-only rule from the early composition pass was
     still hiding .home-nav-item at >= 941px.
   - Keep HOME visible alongside ABOUT / EVENTS / UPDATES across
     the normal desktop/tablet header.
   ============================================================ */

@media (min-width: 941px) {
    .primary-navigation .home-nav-item {
        display: flex !important;
        align-items: center !important;
    }
}


/* ============================================================
   V153 — NORMALIZE HOME NAV TYPOGRAPHY
   - HOME had legacy special-case typography (`font: inherit` + 800)
     that made it render larger/heavier than sibling nav items.
   - Make HOME use the exact same typography as the standard nav links.
   ============================================================ */

.primary-navigation .home-nav-item > .wp-block-navigation-item__content {
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.91rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.075em !important;
}

@media (min-width: 941px) and (max-width: 980px) {
    .primary-navigation .home-nav-item > .wp-block-navigation-item__content {
        font-size: 0.82rem !important;
    }
}

/* ============================================================
   V154 — ABOUT DESKTOP HERO PHOTO ZOOM
   - Increase Johnny's visual presence in the About hero on desktop.
   - Keep copy, hero height, gradient, wave, and <=1119px responsive
     image-layer behavior unchanged.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-size: 100% 100%, auto 166% !important;
        background-position: center, left -214px top 18% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-size: 100% 100%, auto 158% !important;
        background-position: center, left -246px top 19% !important;
    }
}

/* ============================================================
   V155 — ABOUT HERO DESKTOP CROP PUSH
   - Previous crop was too subtle.
   - Significantly zoom the standing photo on desktop widths.
   - Preserve hero height, wave, copy structure, and mobile/tablet behavior.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        background-size: 100% 100%, auto 156% !important;
        background-position: center, left -150px top 18% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        background-size: 100% 100%, auto 148% !important;
        background-position: center, left -132px top 20% !important;
    }
}

/* ============================================================
   V156 — ABOUT HERO ACTUAL DESKTOP PHOTO LAYER ZOOM
   - The visible desktop photo lives on .about-hero::before.
   - Apply a genuinely aggressive upper-body crop to that layer.
   - Keep hero geometry, copy, gradient, wave, and <=1119px behavior unchanged.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-size: 100% 100%, auto 240% !important;
        background-position: center, left -400px top 18% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-size: 100% 100%, auto 225% !important;
        background-position: center, left -365px top 18% !important;
    }
}

/* ============================================================
   V157 — ABOUT HERO DESKTOP ZOOM BALANCE
   - Back off v156's aggressive crop to a middle ground.
   - Keep the actual ::before photo layer targeted.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-size: 100% 100%, auto 205% !important;
        background-position: center, left -300px top 18% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-size: 100% 100%, auto 195% !important;
        background-position: center, left -285px top 18% !important;
    }
}

/* ============================================================
   V159 — ABOUT HERO DIVIDER ALIGNMENT
   Built from V157; V158 wave-offset experiment intentionally discarded.
   - Keep the wave at its normal bottom:-1px placement.
   - Extend the desktop About hero so its divider lands at the same
     visual height as the Home hero without disturbing Section 2.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 568px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(498px, 38vw, 548px) !important;
    }
}

/* ============================================================
   V160 — ABOUT DIVIDER FINAL 10PX CORRECTION
   - V159 placed the About divider slightly lower than Home.
   - Reduce only the desktop About hero height by ~10px.
   - Preserve the wave's normal bottom anchoring and Section 2 flow.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 558px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(488px, calc(38vw - 10px), 538px) !important;
    }
}

/* ============================================================
   V161 — ABOUT DIVIDER 5PX DOWNWARD NUDGE
   - V160 landed slightly too high.
   - Add 5px back to the desktop About hero height only.
   - Keep wave anchoring, Section 2 flow, photo crop, and copy unchanged.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 563px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(493px, calc(38vw - 5px), 543px) !important;
    }
}

/* ============================================================
   V162 — ABOUT HERO TRUE DESKTOP HEIGHT MATCH
   - 100% browser zoom exposed a much larger mismatch than prior
     5–10px tuning suggested.
   - Shorten the About hero itself by ~85px on desktop so the wave
     lands with the Home hero.
   - Keep the wave bottom-anchored; do not offset the divider or
     disturb Section 2.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 478px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(413px, calc(38vw - 85px), 458px) !important;
    }
}

/* ============================================================
   V163 — ABOUT DIVIDER SMALL DOWNWARD CORRECTION
   - V162 landed slightly too high.
   - Add 12px back to the desktop About hero height.
   - Keep the divider bottom-anchored and Section 2 untouched.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 490px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(425px, calc(38vw - 73px), 470px) !important;
    }
}

/* ============================================================
   V164 — ABOUT DIVIDER VERIFIED DOWNWARD CORRECTION
   - V162 removed 85px from the desktop About hero.
   - V163 restored only 12px; divider remained too high.
   - Restore 20px more hero height from V163.
   - Keep wave bottom-anchored; do not alter Section 2 or photo/copy geometry.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 510px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(445px, calc(38vw - 53px), 490px) !important;
    }
}

/* ============================================================
   V165 — ABOUT DIVIDER MIDPOINT CORRECTION
   - V163 was too high; V164 was slightly too low.
   - Split the 20px difference exactly: raise divider 10px from V164.
   - Keep wave bottom-anchored and all other About geometry unchanged.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 500px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(435px, calc(38vw - 63px), 480px) !important;
    }
}

/* ============================================================
   V166 — ABOUT DIVIDER FINAL 2PX DOWNWARD NUDGE
   - V165 is effectively aligned, but the About divider remains
     about 1–2px too high.
   - Add exactly 2px of desktop About hero height.
   - Leave wave anchoring, photo crop, text, Section 2, and all
     responsive behavior otherwise unchanged.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero {
        min-height: 502px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero {
        min-height: clamp(437px, calc(38vw - 61px), 482px) !important;
    }
}


/* ============================================================
   V167 — ABOUT HERO NEW PHOTO CROPPING RELAXED
   - The replacement About image was too tightly zoomed.
   - Reduce the crop so more of the full scene is visible while
     keeping the central subject prominent.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-size: 100% 100%, auto 138% !important;
        background-position: center, left -138px top 10% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-size: 100% 100%, auto 132% !important;
        background-position: center, left -118px top 10% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero::before {
        background-size: 100% 100%, auto 120% !important;
        background-position: center, left -108px top 10% !important;
    }
}

/* ============================================================
   V170 — ABOUT VOTE PHOTO CROP + SEAM FIX
   - Ensure the photo edge disappears beneath fully opaque navy.
   - Use explicit negative Y offsets so the image actually shifts up.
   - Keep the crop wider than the older standing-photo treatment.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-image:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.00) 0%,
                rgba(22, 50, 90, 0.03) 18%,
                rgba(22, 50, 90, 0.10) 30%,
                rgba(22, 50, 90, 0.28) 39%,
                rgba(22, 50, 90, 0.56) 46%,
                rgba(22, 50, 90, 0.82) 51%,
                rgba(22, 50, 90, 0.96) 55%,
                #16325A 58%,
                #16325A 100%
            ),
            url("../images/hero-about.jpg") !important;
        background-size: 100% 100%, auto 146% !important;
        background-position: center, left -138px top -72px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-image:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.00) 0%,
                rgba(22, 50, 90, 0.03) 18%,
                rgba(22, 50, 90, 0.10) 30%,
                rgba(22, 50, 90, 0.28) 39%,
                rgba(22, 50, 90, 0.56) 46%,
                rgba(22, 50, 90, 0.82) 51%,
                rgba(22, 50, 90, 0.96) 55%,
                #16325A 58%,
                #16325A 100%
            ),
            url("../images/hero-about.jpg") !important;
        background-size: 100% 100%, auto 140% !important;
        background-position: center, left -118px top -58px !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero::before {
        background-image:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.00) 0%,
                rgba(22, 50, 90, 0.04) 17%,
                rgba(22, 50, 90, 0.12) 29%,
                rgba(22, 50, 90, 0.32) 38%,
                rgba(22, 50, 90, 0.62) 45%,
                rgba(22, 50, 90, 0.86) 50%,
                #16325A 56%,
                #16325A 100%
            ),
            url("../images/hero-about.jpg") !important;
        background-size: 100% 100%, auto 126% !important;
        background-position: center, left -105px top -42px !important;
    }
}

/* ============================================================
   V171 — ABOUT HERO IMAGE RAISED FURTHER
   - Keep the current zoom/crop balance.
   - Move the vote-signs photo upward more on desktop/tablet.
   - Preserve the seam-hiding fade and section height.
   ============================================================ */

.about-hero::before {
    background-position: center, left -126px top 18% !important;
}

@media (min-width: 1400px) {
    .about-hero::before {
        background-position: center, left -122px top 16% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-position: center, left -158px top 17% !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero::before {
        background-position: center, left -194px top 15% !important;
    }
}

/* ============================================================
   V172 — ABOUT VOTE PHOTO SUBSTANTIAL UPWARD SHIFT
   - V171 accidentally overrode the working negative-pixel offsets
     with percentage positions, making the image appear nearly unchanged.
   - Keep V170 zoom/crop/seam treatment and move the actual image layer
     substantially upward with explicit negative pixel offsets.
   ============================================================ */

@media (min-width: 1400px) {
    .about-hero::before {
        background-position: center, left -138px top -145px !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .about-hero::before {
        background-position: center, left -118px top -122px !important;
    }
}

@media (min-width: 941px) and (max-width: 1119px) {
    .about-hero::before {
        background-position: center, left -105px top -92px !important;
    }
}


/* ============================================================
   V173 — ABOUT RESPONSIVE PHOTO SOURCE + CROP UPDATE
   - Use the new vote-sign photo in the actual responsive <img> layer.
   - Re-tune tablet/mobile cropping for the square group photo instead
     of inheriting the old standing-room portrait's aggressive zoom.
   ============================================================ */

@media (min-width: 782px) and (max-width: 1119px) {
    .about-hero__responsive-photo img {
        object-position: 50% 38% !important;
        transform: none !important;
        transform-origin: center center !important;
    }
}

@media (min-width: 561px) and (max-width: 781px) {
    .about-hero__responsive-photo img {
        object-position: 50% 34% !important;
        transform: scale(1.04) !important;
        transform-origin: 50% 38% !important;
    }
}

@media (max-width: 560px) {
    .about-hero__responsive-photo img {
        object-position: 50% 32% !important;
        transform: scale(1.06) !important;
        transform-origin: 50% 36% !important;
    }
}

/* ============================================================
   V175 — EVENTS PAGE: TRUE HOME/ABOUT HERO CONVENTIONS
   - Events hero is a real .campaign-hero so header behavior matches Home.
   - Hero height + wave geometry match the Home hero.
   - Gradient matches Home's approved left-to-right navy fade.
   - Title/body typography exactly matches About hero desktop conventions.
   - Only the image/content differ.
   ============================================================ */

/* Events is a visual hero page just like Home/About; do not reserve an extra
   compact-header row in document flow. */
@media (max-width: 940px) {
    .events-page {
        padding-top: 0 !important;
    }
}

.events-page .campaign-hero.events-hero {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    min-height: clamp(680px, 82svh, 760px) !important;
    height: auto !important;
    max-height: 760px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #16325A !important;
    background-image:
        linear-gradient(
            90deg,
            #16325A 0%,
            #16325A 31%,
            rgba(22, 50, 90, 0.98) 37%,
            rgba(22, 50, 90, 0.88) 42%,
            rgba(22, 50, 90, 0.70) 47%,
            rgba(22, 50, 90, 0.50) 52%,
            rgba(22, 50, 90, 0.31) 57%,
            rgba(22, 50, 90, 0.16) 62%,
            rgba(22, 50, 90, 0.07) 67%,
            rgba(22, 50, 90, 0) 73%
        ),
        url("../images/hero-events.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, auto 146% !important;
    background-position: center, right -34px top -160px !important;
}

/* Use the exact visible Home hero divider geometry. */
.events-page .campaign-hero.events-hero::after {
    content: "" !important;
    position: absolute !important;
    z-index: 20 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    display: block !important;
    width: 100% !important;
    height: clamp(78px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/hero-section-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.events-page .events-hero .campaign-hero__stage {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: inherit !important;
    height: 100% !important;
    margin: 0 !important;
}

.events-page .events-hero__copy {
    position: absolute !important;
    z-index: 6 !important;
    left: clamp(118px, 10.25vw, 154px) !important;
    top: 50% !important;
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-45%) !important;
    text-align: left !important;
}

/* Exact About hero title/body type conventions. */
.events-page .events-hero__title {
    max-width: 10.5ch !important;
    margin: 0 0 1rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.85rem, 4.15vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
}

.events-page .events-hero__body {
    max-width: 440px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.03rem, 1.06vw, 1.12rem) !important;
    font-weight: 400 !important;
    line-height: 1.54 !important;
    letter-spacing: -0.004em !important;
}

/* Section 2 follows the same red section language as Home. */
.events-page .campaign-announcement.events-announcement {
    position: relative !important;
    z-index: 3 !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(4rem, 5.8vw, 5rem) clamp(2rem, 7vw, 7rem) clamp(5.6rem, 7vw, 6.5rem) !important;
    background: #D03330 !important;
    color: #ffffff !important;
}

.events-page .events-announcement__inner {
    width: min(100%, 1080px) !important;
    margin: 0 auto !important;
}

.events-page .events-announcement__title {
    margin: 0 0 1rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.35rem, 4.5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
}

.events-page .events-announcement__body {
    max-width: 760px !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.92) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.05rem, 1.4vw, 1.28rem) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: -0.005em !important;
}

@media (min-width: 782px) and (max-width: 981px) {
    .events-page .campaign-hero.events-hero {
        min-height: clamp(660px, 84svh, 740px) !important;
        max-height: 740px !important;
        background-size: 100% 100%, auto 138% !important;
        background-position: center, right -74px top -126px !important;
    }

    .events-page .events-hero__copy {
        left: clamp(82px, 9vw, 108px) !important;
        width: min(46vw, 410px) !important;
        max-width: 410px !important;
    }

    .events-page .events-hero__title {
        font-size: clamp(2.25rem, 5.15vw, 3rem) !important;
        line-height: 0.96 !important;
    }

    .events-page .events-hero__body {
        font-size: clamp(0.93rem, 1.75vw, 1.02rem) !important;
        line-height: 1.48 !important;
    }
}

@media (max-width: 781px) {
    .events-page .campaign-hero.events-hero {
        height: auto !important;
        min-height: 650px !important;
        max-height: none !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.08) 0%,
                rgba(22, 50, 90, 0.18) 18%,
                rgba(22, 50, 90, 0.52) 32%,
                rgba(22, 50, 90, 0.86) 44%,
                rgba(22, 50, 90, 0.98) 54%,
                #16325A 62%,
                #16325A 100%
            ),
            url("../images/hero-events.jpg") !important;
        background-size: 100% 100%, auto 102% !important;
        background-position: center, center -128px !important;
    }

    .events-page .campaign-hero.events-hero::after {
        height: clamp(58px, 14vw, 82px) !important;
    }

    .events-page .events-hero__copy {
        position: absolute !important;
        right: clamp(1.1rem, 5vw, 1.5rem) !important;
        bottom: clamp(5rem, 13vw, 6.2rem) !important;
        left: clamp(1.1rem, 5vw, 1.5rem) !important;
        top: auto !important;
        width: auto !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .events-page .events-hero__title {
        max-width: 10ch !important;
        font-size: clamp(2.15rem, 8.7vw, 2.8rem) !important;
        line-height: 0.96 !important;
    }

    .events-page .events-hero__body {
        max-width: 100% !important;
        font-size: clamp(0.98rem, 3.8vw, 1.06rem) !important;
        line-height: 1.5 !important;
    }

    .events-page .campaign-announcement.events-announcement {
        padding: 3.25rem 1.35rem 4rem !important;
    }

    .events-page .events-announcement__title {
        font-size: clamp(2rem, 10vw, 3.15rem) !important;
        line-height: 0.98 !important;
    }

    .events-page .events-announcement__body {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================================
   V176 — EVENTS HERO PHOTO + COPY ALIGNMENT
   - Move the Events hero photo substantially downward in its crop.
   - Center the copy block exactly like the About hero's vertical logic.
   - Preserve Home-derived hero height, gradient, wave, and header behavior.
   ============================================================ */

.events-page .campaign-hero.events-hero {
    background-position: center, right -34px top -70px !important;
}

.events-page .events-hero__copy {
    transform: translateY(-50%) !important;
}

@media (min-width: 782px) and (max-width: 981px) {
    .events-page .campaign-hero.events-hero {
        background-position: center, right -74px top -54px !important;
    }
}

@media (max-width: 781px) {
    .events-page .campaign-hero.events-hero {
        background-position: center, center -64px !important;
    }

    .events-page .events-hero__copy {
        transform: none !important;
    }
}

/* ============================================================
   V177 — EVENTS RESPONSIVE HERO COVER + HEAD SAFETY
   - Prevent navy side gutters at tablet/mobile widths by using
     true cover sizing for the photo layer.
   - Anchor the source photo at the top so Johnny's full head stays
     visible throughout responsive breakpoints.
   - Leave the approved larger-desktop hero unchanged.
   ============================================================ */

@media (min-width: 782px) and (max-width: 981px) {
    .events-page .campaign-hero.events-hero {
        background-size: 100% 100%, cover !important;
        background-position: center, center top !important;
    }
}

@media (max-width: 781px) {
    .events-page .campaign-hero.events-hero {
        background-size: 100% 100%, cover !important;
        background-position: center, center top !important;
    }
}

/* ============================================================
   V178 — EVENTS SECTION 2: THREE-COLUMN EVENT LISTING
   - Replace temporary Section 2 copy with one row of three events.
   - Event images bleed upward through the hero divider, echoing the
     overlapping-photo treatment used on the Home page.
   - Keep placeholder event information intentionally generic.
   ============================================================ */

.events-page .campaign-announcement.events-announcement {
    position: relative !important;
    z-index: 3 !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(7.25rem, 9vw, 9rem) !important;
    background: #D03330 !important;
    color: #ffffff !important;
}

/* Carry the Home Section 2 -> navy transition through to the footer. */
.events-page .campaign-announcement.events-announcement::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: clamp(84px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.events-page .events-listing {
    position: relative !important;
    z-index: 24 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.4rem, 2.2vw, 2.25rem) !important;
    width: min(100%, 1260px) !important;
    margin: 0 auto !important;
    transform: translateY(clamp(-118px, -7vw, -92px)) !important;
}

.events-page .events-listing__item {
    min-width: 0 !important;
    color: #ffffff !important;
}

.events-page .events-listing__media {
    position: relative !important;
    z-index: 25 !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 0 clamp(1.25rem, 2vw, 1.7rem) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(8, 25, 48, 0.22) !important;
    background: #16325A !important;
}

.events-page .events-listing__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.events-page .events-listing__content {
    padding: 0 0.2rem !important;
}

.events-page .events-listing__meta {
    margin: 0 0 0.55rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(0.78rem, 0.8vw, 0.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.events-page .events-listing__title {
    margin: 0 0 0.55rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.75rem, 2.25vw, 2.55rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.98 !important;
    text-transform: uppercase !important;
}

.events-page .events-listing__body {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.1vw, 1.12rem) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

@media (min-width: 782px) and (max-width: 1050px) {
    .events-page .events-listing {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 820px) !important;
        transform: translateY(-78px) !important;
    }

    .events-page .events-listing__item:nth-child(3) {
        grid-column: 1 / -1 !important;
        width: min(100%, 390px) !important;
        justify-self: center !important;
    }
}

@media (max-width: 781px) {
    .events-page .campaign-announcement.events-announcement {
        padding: 0 1.25rem 6.5rem !important;
    }

    .events-page .campaign-announcement.events-announcement::after {
        height: clamp(58px, 14vw, 82px) !important;
    }

    .events-page .events-listing {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2.5rem !important;
        width: min(100%, 520px) !important;
        transform: translateY(-54px) !important;
    }

    .events-page .events-listing__item:nth-child(3) {
        grid-column: auto !important;
        width: auto !important;
        justify-self: stretch !important;
    }

    .events-page .events-listing__media {
        border-radius: 18px !important;
    }
}

/* ============================================================
   V179 — EVENTS CARD IMAGES SQUARE
   - Keep the existing event-grid sizing, bleed, spacing, and copy.
   - Make every event image a true 1:1 square crop.
   ============================================================ */

.events-page .events-listing__media {
    aspect-ratio: 1 / 1 !important;
}

.events-page .events-listing__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ============================================================
   V180 — EVENTS PLACEHOLDER MEDIA
   - Replace the temporary event photos with clean white placeholder blocks.
   - Preserve the exact square crop, bleed, spacing, and card layout.
   ============================================================ */

.events-page .events-listing__media--placeholder {
    background: #ffffff !important;
}

/* ============================================================
   V181 — EVENTS SECTION 2 BOTTOM SPACING
   Tighten the excess space beneath the event cards while preserving
   the lower wave and its transition into the footer.
   ============================================================ */
.events-page .campaign-announcement.events-announcement {
    padding-bottom: clamp(4.25rem, 5.5vw, 5.5rem) !important;
}

@media (max-width: 781px) {
    .events-page .campaign-announcement.events-announcement {
        padding-bottom: 4.75rem !important;
    }
}

/* ============================================================
   V182 — EVENTS DONATION SECTION
   - Add the same navy donation treatment used on About.
   - Red buttons, white type, centered geometry.
   - Section 2 already supplies the red-to-navy wave above.
   - Keep the standard navy Events footer, so no lower wave is needed.
   ============================================================ */

.events-page .events-donation.campaign-donation-section {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: clamp(470px, 44vw, 610px) !important;
    margin: 0 !important;
    padding: clamp(3.15rem, 4vw, 4rem) clamp(1.5rem, 5vw, 5rem) clamp(4.75rem, 6vw, 6rem) !important;
    background: #16325A !important;
    color: #ffffff !important;
    text-align: center !important;
    overflow: visible !important;
}

.events-page .events-donation.campaign-donation-section::before,
.events-page .events-donation.campaign-donation-section::after {
    content: none !important;
    display: none !important;
}

.events-page .events-donation .campaign-donation-section__inner {
    position: relative !important;
    z-index: 5 !important;
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.events-page .events-donation .campaign-donation-section__eyebrow {
    margin: 0 0 0.75rem !important;
    color: rgba(255,255,255,0.82) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.events-page .events-donation .campaign-donation-section__title {
    max-width: 700px !important;
    margin: 0 0 1rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.5rem, 4.5vw, 4.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.98 !important;
    text-align: center !important;
}

.events-page .events-donation .campaign-donation-section__body {
    max-width: 660px !important;
    margin: 0 0 1.75rem !important;
    color: rgba(255,255,255,0.94) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem) !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.events-page .events-donation .campaign-donation-section__amounts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    width: min(100%, 560px) !important;
    margin: 0 0 0.75rem !important;
}

.events-page .events-donation .campaign-donation-section__amounts a,
.events-page .events-donation .campaign-donation-section__primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    border: 2px solid #D03330 !important;
    border-radius: 5px !important;
    background: #D03330 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease !important;
}

.events-page .events-donation .campaign-donation-section__amounts a {
    font-size: 1.2rem !important;
}

.events-page .events-donation .campaign-donation-section__primary {
    width: min(100%, 560px) !important;
    margin: 0 !important;
    font-size: 1rem !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}

.events-page .events-donation .campaign-donation-section__amounts a:hover,
.events-page .events-donation .campaign-donation-section__amounts a:focus-visible,
.events-page .events-donation .campaign-donation-section__primary:hover,
.events-page .events-donation .campaign-donation-section__primary:focus-visible {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #D03330 !important;
    transform: translateY(-1px) !important;
}

.events-page .events-donation .campaign-donation-section__disclaimer {
    max-width: 620px !important;
    margin: 1rem 0 0 !important;
    color: rgba(255,255,255,0.74) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.74rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
}

@media (max-width: 781px) {
    .events-page .events-donation.campaign-donation-section {
        min-height: 0 !important;
        padding: 3rem 1.2rem 4.75rem !important;
    }

    .events-page .events-donation .campaign-donation-section__inner {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
    }

    .events-page .events-donation .campaign-donation-section__title {
        font-size: clamp(2.15rem, 10vw, 3.2rem) !important;
    }

    .events-page .events-donation .campaign-donation-section__amounts {
        width: 100% !important;
        max-width: 520px !important;
        gap: 0.55rem !important;
        margin-inline: auto !important;
    }

    .events-page .events-donation .campaign-donation-section__amounts a {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   V183 — EVENTS RED FOOTER MATCH
   - Match the About page ending: navy donation -> red wave -> red footer.
   - The Events template now uses footer-about.
   ============================================================ */

.events-page .events-donation.campaign-donation-section {
    --events-donation-wave: clamp(78px, 8vw, 118px);
    padding-bottom: clamp(6.5rem, 8vw, 8rem) !important;
}

.events-page .events-donation.campaign-donation-section::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: var(--events-donation-wave) !important;
    pointer-events: none !important;
    background: url("../images/about-blue-to-red-wave.svg") center bottom / 100% 100% no-repeat !important;
}

@media (max-width: 781px) {
    .events-page .events-donation.campaign-donation-section {
        --events-donation-wave: clamp(58px, 14vw, 82px);
        padding-bottom: 6rem !important;
    }
}

/* ============================================================
   V184 — EVENTS COPY + GUARANTEED RED FOOTER
   - Events hero now uses Johnny Austin Thompson's full name.
   - Events footer is rendered directly by page-events.html rather
     than relying on a template part that may have a saved WP override.
   ============================================================ */

.site-footer.site-footer--events,
.site-footer--events.wp-block-group,
footer.site-footer--events {
    background: #D03330 !important;
    background-color: #D03330 !important;
    color: #ffffff !important;
}

.site-footer--events .footer-navigation .wp-block-navigation-item__content,
.site-footer--events .footer-socials .wp-social-link,
.site-footer--events .legal-disclaimer {
    color: #ffffff !important;
}

.site-footer--events .footer-navigation .wp-block-navigation-item__content:hover,
.site-footer--events .footer-navigation .wp-block-navigation-item__content:focus-visible,
.site-footer--events .footer-socials .wp-social-link:hover,
.site-footer--events .footer-socials .wp-social-link:focus-within {
    color: #16325A !important;
}

/* ============================================================
   V186 — UPDATES PAGE / ABOUT-PAGE FORMAT
   - Reuse the approved About hero typography, height, wave, and
     right-column copy positioning without inventing a photo.
   - Use the About red editorial section for the dynamic post feed.
   - Reuse the About navy donation section + red footer treatment.
   ============================================================ */

.updates-page .updates-hero {
    background: #16325A !important;
    background-image: none !important;
}

/* No placeholder photography until campaign imagery is supplied. */
.updates-page .updates-hero::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Preserve the About hero's approved right-side copy rail on larger screens. */
.updates-page .updates-hero .about-hero__copy {
    position: relative !important;
    z-index: 6 !important;
}

/* The Updates title naturally wraps to two lines at the same measure as About. */
.updates-page .updates-hero .about-hero__title {
    max-width: 9.5ch !important;
}

/* Without a mobile hero photo, remove the photo-reservation space while
   retaining the About typography, wave, and site-header clearance. */
@media (max-width: 781px) {
    .updates-page .updates-hero {
        --about-mobile-photo: 0px !important;
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + clamp(3.15rem, 10vw, 4.6rem)) !important;
        padding-right: 1.1rem !important;
        padding-bottom: clamp(5.75rem, 15vw, 6.5rem) !important;
        padding-left: 1.1rem !important;
        background: #16325A !important;
        background-image: none !important;
    }

    .updates-page .updates-hero .about-hero__inner {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .updates-page .updates-hero .about-hero__copy {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }
}

/* ---------------- Updates listing inside About-style Section 2 ---------------- */
.updates-page .updates-feed .updates-feed__intro {
    width: min(100%, 760px) !important;
    margin: -0.35rem auto clamp(2.5rem, 4vw, 3.5rem) !important;
    color: rgba(255,255,255,0.92) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.02rem, 1.2vw, 1.15rem) !important;
    line-height: 1.52 !important;
    text-align: center !important;
}

.updates-page .updates-feed__query,
.updates-page .updates-feed__query .wp-block-post-template {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.updates-page .updates-feed__query .wp-block-post-template {
    display: block !important;
    list-style: none !important;
}

.updates-page .updates-feed__item {
    width: min(100%, 860px) !important;
    margin: 0 auto !important;
    padding: clamp(1.65rem, 2.8vw, 2.35rem) 0 !important;
    border-top: 1px solid rgba(255,255,255,0.38) !important;
    text-align: center !important;
}

.updates-page .updates-feed__query .wp-block-post:first-child .updates-feed__item {
    border-top: 0 !important;
    padding-top: 0 !important;
}

.updates-page .updates-feed__date {
    margin: 0 0 0.55rem !important;
    color: rgba(255,255,255,0.76) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.updates-page .updates-feed__post-title {
    margin: 0 auto 0.75rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.updates-page .updates-feed__post-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.updates-page .updates-feed__post-title a:hover,
.updates-page .updates-feed__post-title a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 0.12em !important;
}

.updates-page .updates-feed__excerpt {
    width: min(100%, 700px) !important;
    margin: 0 auto !important;
    color: rgba(255,255,255,0.92) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.12vw, 1.1rem) !important;
    line-height: 1.52 !important;
    text-align: center !important;
}

.updates-page .updates-feed__excerpt p {
    margin: 0 !important;
}

.updates-page .updates-feed__excerpt .wp-block-post-excerpt__more-link {
    display: inline-block !important;
    margin-top: 0.8rem !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-decoration: underline !important;
    text-underline-offset: 0.12em !important;
    text-transform: uppercase !important;
}

.updates-page .updates-feed__empty {
    margin: 0 auto !important;
    color: rgba(255,255,255,0.92) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.02rem, 1.2vw, 1.15rem) !important;
    line-height: 1.52 !important;
    text-align: center !important;
}

@media (max-width: 781px) {
    .updates-page .updates-feed .updates-feed__intro {
        margin-bottom: 2.25rem !important;
        font-size: 1rem !important;
    }

    .updates-page .updates-feed__item {
        padding: 1.65rem 0 !important;
    }

    .updates-page .updates-feed__post-title {
        font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
    }
}

/* ============================================================
   V187 — EVENTS HERO TOP-BOUND ALIGNMENT + SEPT. 16 UPDATE
   - Align the Events hero copy start to the approved About/Updates
     hero copy top bound instead of vertically centering it.
   - Preserve the Events photo crop, gradient, wave, and hero height.
   - Add a featured September 16 update treatment to Updates.
   ============================================================ */

/* Desktop: About/Updates begin their copy at the hero content top after
   header clearance. Events now uses the same vertical start point. */
@media (min-width: 1120px) {
    .events-page .events-hero__copy {
        top: calc(var(--campaign-header-height-v12, 78px) + clamp(1.75rem, 2vw, 2.1rem)) !important;
        transform: none !important;
    }
}

/* Tablet: mirror the active About hero's responsive content top bound. */
@media (min-width: 782px) and (max-width: 1119px) {
    .events-page .events-hero__copy {
        top: calc(var(--campaign-header-height-v12, 70px) + clamp(2rem, 3vw, 2.75rem)) !important;
        bottom: auto !important;
        transform: none !important;
    }
}

/* Featured campaign update supplied by the campaign. */
.updates-page .updates-featured {
    width: min(100%, 960px) !important;
    margin: 0 auto clamp(2.4rem, 4vw, 3.5rem) !important;
    padding: 0 0 clamp(2.2rem, 4vw, 3.25rem) !important;
    border-bottom: 1px solid rgba(255,255,255,0.38) !important;
    text-align: center !important;
}

.updates-page .updates-featured__media {
    width: min(100%, 420px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto clamp(1.4rem, 2.8vw, 2rem) !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(8, 25, 48, 0.20) !important;
}

.updates-page .updates-featured__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.updates-page .updates-featured__date {
    margin: 0 0 0.6rem !important;
    color: rgba(255,255,255,0.76) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.updates-page .updates-featured__title {
    width: min(100%, 760px) !important;
    margin: 0 auto 0.8rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2rem, 3.3vw, 3.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.98 !important;
    text-transform: uppercase !important;
}

.updates-page .updates-featured__body {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    color: rgba(255,255,255,0.94) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.18vw, 1.12rem) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

@media (max-width: 781px) {
    .updates-page .updates-featured {
        margin-bottom: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }

    .updates-page .updates-featured__media {
        width: min(100%, 360px) !important;
        border-radius: 14px !important;
    }

    .updates-page .updates-featured__title {
        font-size: clamp(1.8rem, 8.5vw, 2.45rem) !important;
    }

    .updates-page .updates-featured__body {
        font-size: 1rem !important;
    }
}

/* ============================================================
   V188 — COMPACT UPDATES SECTION
   - Keep the approved Updates layout and content.
   - Scale down the Section 2 heading, intro, featured media,
     update title/body, and vertical spacing for a tighter,
     more editorial presentation.
   - Hero, donation section, footer, and Events page untouched.
   ============================================================ */

.updates-page .updates-feed {
    padding-top: clamp(3.75rem, 5vw, 4.6rem) !important;
    padding-bottom: clamp(5.1rem, 6.6vw, 6rem) !important;
}

.updates-page .updates-feed .updates-feed__title {
    margin-bottom: clamp(1rem, 1.7vw, 1.35rem) !important;
    font-size: clamp(2.55rem, 3.75vw, 3.55rem) !important;
    line-height: 0.97 !important;
}

.updates-page .updates-feed .updates-feed__intro {
    width: min(100%, 680px) !important;
    margin: -0.1rem auto clamp(1.9rem, 2.8vw, 2.5rem) !important;
    font-size: clamp(0.98rem, 1.05vw, 1.08rem) !important;
    line-height: 1.48 !important;
}

.updates-page .updates-featured {
    width: min(100%, 820px) !important;
    margin-bottom: clamp(1.75rem, 2.8vw, 2.4rem) !important;
    padding-bottom: clamp(1.7rem, 2.8vw, 2.35rem) !important;
}

.updates-page .updates-featured__media {
    width: min(100%, 340px) !important;
    margin-bottom: clamp(1.05rem, 1.8vw, 1.4rem) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(8, 25, 48, 0.18) !important;
}

.updates-page .updates-featured__date {
    margin-bottom: 0.45rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.115em !important;
}

.updates-page .updates-featured__title {
    width: min(100%, 650px) !important;
    margin-bottom: 0.65rem !important;
    font-size: clamp(1.75rem, 2.65vw, 2.6rem) !important;
    line-height: 1 !important;
}

/* V216 — the Section 2 photo crosses a wave, so clip the rendered layer
   itself rather than relying on a radius alone.  This protects all four
   corners when the card overlaps the navy section below it. */
@media (min-width: 782px) {
    body.home .front-page figure.campaign-announcement__media {
        border-radius: 26px !important;
        overflow: hidden !important;
        clip-path: inset(0 round 26px) !important;
        -webkit-clip-path: inset(0 round 26px) !important;
        transform: translateZ(0) !important;
    }

    body.home .front-page figure.campaign-announcement__media > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 26px !important;
        clip-path: inset(0 round 26px) !important;
        -webkit-clip-path: inset(0 round 26px) !important;
    }
}

.updates-page .updates-featured__body {
    width: min(100%, 700px) !important;
    font-size: clamp(0.98rem, 1.05vw, 1.06rem) !important;
    line-height: 1.5 !important;
}

.updates-page .updates-feed__item {
    width: min(100%, 800px) !important;
    padding: clamp(1.35rem, 2vw, 1.8rem) 0 !important;
}

.updates-page .updates-feed__date {
    font-size: 0.78rem !important;
}

.updates-page .updates-feed__post-title {
    margin-bottom: 0.6rem !important;
    font-size: clamp(1.65rem, 2.5vw, 2.35rem) !important;
}

.updates-page .updates-feed__excerpt {
    width: min(100%, 660px) !important;
    font-size: clamp(0.97rem, 1.02vw, 1.04rem) !important;
    line-height: 1.5 !important;
}

.updates-page .updates-feed__empty {
    font-size: clamp(0.96rem, 1.02vw, 1.04rem) !important;
}

@media (max-width: 781px) {
    .updates-page .updates-feed {
        padding-top: 3.4rem !important;
        padding-bottom: 5.1rem !important;
    }

    .updates-page .updates-feed .updates-feed__title {
        margin-bottom: 1rem !important;
        font-size: clamp(2.15rem, 9vw, 2.75rem) !important;
    }

    .updates-page .updates-feed .updates-feed__intro {
        margin-bottom: 1.75rem !important;
        font-size: 0.96rem !important;
    }

    .updates-page .updates-featured {
        margin-bottom: 1.8rem !important;
        padding-bottom: 1.8rem !important;
    }

    .updates-page .updates-featured__media {
        width: min(100%, 290px) !important;
        margin-bottom: 1rem !important;
        border-radius: 13px !important;
    }

    .updates-page .updates-featured__title {
        font-size: clamp(1.65rem, 7.5vw, 2.15rem) !important;
    }

    .updates-page .updates-featured__body {
        font-size: 0.97rem !important;
    }

    .updates-page .updates-feed__post-title {
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
    }
}

/* ============================================================
   V190 — EVENTS HERO FLUID BACKGROUND FIX
   - Revert the broken v189 partial-width image-panel approach.
   - Keep the established Events hero markup from v188.
   - Scale the actual photo continuously with the hero width (100% auto)
     so the browser never progressively chops the left edge as the
     viewport narrows.
   - Anchor top-center so Johnny's full head remains available at every
     viewport while the existing gradient handles text readability.
   ============================================================ */

.events-page .campaign-hero.events-hero {
    background-size: 100% 100%, 100% auto !important;
    background-position: center center, center top !important;
    background-repeat: no-repeat !important;
}

@media (min-width: 782px) and (max-width: 1119px) {
    .events-page .campaign-hero.events-hero {
        background-size: 100% 100%, 100% auto !important;
        background-position: center center, center top !important;
    }
}

@media (max-width: 781px) {
    .events-page .campaign-hero.events-hero {
        background-size: 100% 100%, 100% auto !important;
        background-position: center center, center top !important;
    }
}


/* ============================================================
   V191 — EVENTS DESKTOP/TABLET SUBJECT-FOCUS RESTORE
   - Mobile (<=781px) is intentionally left exactly as v190.
   - Restore the approved tighter v176/v188 subject scale on larger
     viewports instead of stretching the square source photo full-width.
   - Smoothly interpolate scale, horizontal focal position, and vertical
     crop through tablet / smaller-desktop widths so the composition
     does not abruptly jump as the viewport narrows.
   ============================================================ */

/* Tablet: transition continuously from a nearly full-frame image at
   782px toward the established tighter desktop crop by 981px. */
@media (min-width: 782px) and (max-width: 981px) {
    .events-page .campaign-hero.events-hero {
        background-size:
            100% 100%,
            auto clamp(118%, calc(39.8% + 10vw), 138%) !important;
        background-position:
            center center,
            clamp(50%, calc(-145.5% + 25vw), 100%)
            top clamp(-54px, calc(211px - 27vw), 0px) !important;
    }
}

/* Smaller desktop: continue that same movement into the original
   large-desktop crop rather than snapping between two compositions. */
@media (min-width: 982px) and (max-width: 1119px) {
    .events-page .campaign-hero.events-hero {
        background-size:
            100% 100%,
            auto clamp(138%, calc(80.66% + 5.84vw), 146%) !important;
        background-position:
            center center,
            right clamp(-34px, calc(243.7px - 24.82vw), 0px)
            top clamp(-70px, calc(60.7px - 11.68vw), -54px) !important;
    }
}

/* Large desktop: restore the previously approved subject-focused crop. */
@media (min-width: 1120px) {
    .events-page .campaign-hero.events-hero {
        background-size: 100% 100%, auto 146% !important;
        background-position: center center, right -34px top -70px !important;
    }
}

/* ============================================================
   V192 — EVENTS HERO RIGHT-ANCHOR CORRECTION
   - The square source photo is intentionally kept at the tighter,
     subject-focused scale instead of being stretched to full hero width.
   - Crucially, its RIGHT edge is now locked to the hero's right edge using
     unambiguous 100% X positioning, so no navy strip can appear on the right.
   - Any unused width lives under the navy gradient on the LEFT, as intended.
   - Tablet scale/Y crop interpolate smoothly; mobile remains v190/v191.
   ============================================================ */

/* Tablet: smoothly increase subject scale while keeping the image right-anchored. */
@media (min-width: 782px) and (max-width: 981px) {
    .events-page .campaign-hero.events-hero {
        background-size:
            100% 100%,
            auto clamp(118%, calc(39.8% + 10vw), 138%) !important;
        background-position:
            center center,
            100% clamp(-54px, calc(212px - 27.1vw), 0px) !important;
    }
}

/* Smaller desktop: preserve the established crop and continue the Y movement. */
@media (min-width: 982px) and (max-width: 1119px) {
    .events-page .campaign-hero.events-hero {
        background-size:
            100% 100%,
            auto clamp(138%, calc(80.66% + 5.84vw), 146%) !important;
        background-position:
            center center,
            100% clamp(-70px, calc(60.7px - 11.68vw), -54px) !important;
    }
}

/* Large desktop: same subject-focused crop, explicitly locked to right edge. */
@media (min-width: 1120px) {
    .events-page .campaign-hero.events-hero {
        background-size: 100% 100%, auto 146% !important;
        background-position: center center, 100% -70px !important;
    }
}

/* ============================================================
   V193 — UPDATES HERO PHOTO + ULTRAWIDE STABILIZATION
   1) Add campaign-provided Updates hero photo using the same
      left-photo / right-copy system as the About hero.
   2) Cap the designed site canvas at 1920 CSS px on ultrawide
      displays so full-width sections and viewport-driven hero
      geometry do not keep stretching indefinitely.
   ============================================================ */

/* ---------- Updates hero: campaign-provided image ---------- */
.updates-page .updates-hero {
    position: relative !important;
    background: #16325A !important;
    background-image: none !important;
}

/* Desktop photo layer: same fade language as About, new source image. */
@media (min-width: 1120px) {
    .updates-page .updates-hero::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background-image:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.00) 0%,
                rgba(22, 50, 90, 0.03) 18%,
                rgba(22, 50, 90, 0.10) 30%,
                rgba(22, 50, 90, 0.28) 39%,
                rgba(22, 50, 90, 0.56) 46%,
                rgba(22, 50, 90, 0.82) 51%,
                rgba(22, 50, 90, 0.96) 55%,
                #16325A 59%,
                #16325A 100%
            ),
            url("../images/hero-updates-v201.jpg") !important;
        background-repeat: no-repeat !important;
    }
}

@media (min-width: 1400px) {
    .updates-page .updates-hero::before {
        background-size: 100% 100%, auto 142% !important;
        background-position: center center, left -10px top 34% !important;
    }
}

@media (min-width: 1120px) and (max-width: 1399px) {
    .updates-page .updates-hero::before {
        background-size: 100% 100%, auto 136% !important;
        background-position: center center, left -18px top 35% !important;
    }
}

/* Re-enable the real responsive image layer that the About hero uses. */
@media (min-width: 782px) and (max-width: 1119px) {
    .updates-page .updates-hero::before {
        content: none !important;
        display: none !important;
    }

    .updates-page .updates-hero .about-hero__responsive-photo {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 auto 0 0 !important;
        width: 62% !important;
        height: 100% !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .updates-page .updates-hero .about-hero__responsive-photo::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        background:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.02) 0%,
                rgba(22, 50, 90, 0.04) 50%,
                rgba(22, 50, 90, 0.16) 66%,
                rgba(22, 50, 90, 0.48) 78%,
                rgba(22, 50, 90, 0.82) 90%,
                #16325A 100%
            ),
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.02) 0%,
                rgba(22, 50, 90, 0.04) 56%,
                rgba(22, 50, 90, 0.28) 76%,
                rgba(22, 50, 90, 0.76) 92%,
                #16325A 100%
            ) !important;
    }

    .updates-page .updates-hero .about-hero__responsive-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 50% 34% !important;
        transform: none !important;
    }
}

@media (max-width: 781px) {
    .updates-page .updates-hero {
        --updates-mobile-photo: clamp(320px, 72vw, 430px);
        --about-mobile-photo: var(--updates-mobile-photo) !important;
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--updates-mobile-photo) - 0.25rem) !important;
        padding-right: clamp(1.1rem, 5vw, 1.5rem) !important;
        padding-bottom: clamp(5.4rem, 13vw, 6.4rem) !important;
        padding-left: clamp(1.1rem, 5vw, 1.5rem) !important;
        background: #16325A !important;
        background-image: none !important;
    }

    .updates-page .updates-hero .about-hero__responsive-photo {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--campaign-header-height-v12, 70px) + var(--updates-mobile-photo)) !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .updates-page .updates-hero .about-hero__responsive-photo::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        background: linear-gradient(
            180deg,
            rgba(22, 50, 90, 0.02) 0%,
            rgba(22, 50, 90, 0.02) 56%,
            rgba(22, 50, 90, 0.14) 70%,
            rgba(22, 50, 90, 0.42) 82%,
            rgba(22, 50, 90, 0.80) 92%,
            #16325A 100%
        ) !important;
    }

    .updates-page .updates-hero .about-hero__responsive-photo img {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: var(--updates-mobile-photo) !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 50% 24% !important;
        transform: none !important;
    }

    /* Override v186's photo-less mobile layout. */
    .updates-page .updates-hero .about-hero__inner,
    .updates-page .updates-hero .about-hero__copy {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }
}

/* ---------- Global ultrawide canvas stabilization ---------- */
@media (min-width: 1945px) {
    :root {
        --campaign-ultrawide-canvas: 1920px;
        --campaign-ultrawide-edge: calc((100vw - var(--campaign-ultrawide-canvas)) / 2);
    }

    /* Stop every full-width section from stretching across 3K/4K monitors. */
    .wp-site-blocks {
        width: var(--campaign-ultrawide-canvas) !important;
        max-width: var(--campaign-ultrawide-canvas) !important;
        margin: var(--campaign-frame-v8, 12px) auto !important;
    }

    /* Fixed header must follow the centered canvas, not the physical monitor edges. */
    .site-header,
    body.home .site-header,
    body.home:not(.is-campaign-nav-scrolled) .site-header,
    body.home.is-campaign-nav-scrolled .site-header,
    body.is-campaign-nav-scrolled .site-header {
        left: var(--campaign-ultrawide-edge) !important;
        right: var(--campaign-ultrawide-edge) !important;
        width: auto !important;
    }

    /* The homepage was intentionally viewport-height driven at normal desktop sizes.
       Freeze it on ultrawide displays so 21:9 / 32:9 monitors do not create an
       enormous hero or push the accepted crop out of composition. */
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero {
        min-height: 880px !important;
        height: 880px !important;
        max-height: 880px !important;
    }

    body.home .front-page .campaign-hero__stage {
        min-height: 880px !important;
        height: 880px !important;
    }

    /* Lock the established large-desktop About/Updates hero geometry once the
       canvas has reached its maximum width. */
    .about-hero,
    .updates-page .updates-hero {
        min-height: 502px !important;
        max-height: none !important;
    }

    /* Events already has a 760px cap; make the intended ceiling explicit. */
    .events-page .campaign-hero.events-hero {
        min-height: 760px !important;
        height: 760px !important;
        max-height: 760px !important;
    }
}

/* ============================================================
   V195 — STANDARDIZED HERO MEDIA SYSTEM
   All hero source images are standardized 4:3 (2048 × 1536).
   Shared responsive bands:
     Desktop: >= 1120px
     Tablet:  782px–1119px
     Mobile:  <= 781px
   Scaling behavior is shared; only focal points vary by page.
   Older page-specific crop overrides remain in the file for history,
   but these final rules intentionally win the cascade.
   ============================================================ */

/* ---------- Shared page focal points ---------- */
body.home .front-page .campaign-hero {
    --hero-focus-x: 52%;
    --hero-focus-y: 30%;
}

.events-page .campaign-hero.events-hero {
    --hero-focus-x: 50%;
    --hero-focus-y: 28%;
}

.about-hero {
    --hero-focus-x: 50%;
    --hero-focus-y: 42%;
}

.updates-page .updates-hero {
    --hero-focus-x: 52%;
    --hero-focus-y: 42%;
}

/* ---------- HOME + EVENTS: full-bleed background-photo heroes ----------
   Both pages now use the same image-sizing rule at every viewport:
   cover the hero continuously and keep a stable focal point.
   No more image-scale jumps at 982 / 1120 / 1400 etc.
*/
body.home .front-page .campaign-hero,
body.home.admin-bar .front-page .campaign-hero {
    background-size: 100% 100%, cover !important;
    background-position:
        center center,
        var(--hero-focus-x) var(--hero-focus-y) !important;
}

.events-page .campaign-hero.events-hero {
    background-size: 100% 100%, cover !important;
    background-position:
        center center,
        var(--hero-focus-x) var(--hero-focus-y) !important;
}

/* ---------- ABOUT + UPDATES: shared left-photo / right-copy system ----------
   Use the real responsive image layer at desktop and tablet instead of
   swapping between pseudo-element backgrounds and <img> layers.
*/
.about-hero::before,
.updates-page .updates-hero::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

@media (min-width: 782px) {
    .about-hero__responsive-photo,
    .updates-page .updates-hero .about-hero__responsive-photo {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 auto 0 0 !important;
        width: 62% !important;
        height: 100% !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .about-hero__responsive-photo::after,
    .updates-page .updates-hero .about-hero__responsive-photo::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        background:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.01) 0%,
                rgba(22, 50, 90, 0.03) 48%,
                rgba(22, 50, 90, 0.15) 64%,
                rgba(22, 50, 90, 0.44) 77%,
                rgba(22, 50, 90, 0.78) 89%,
                #16325A 100%
            ),
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.01) 0%,
                rgba(22, 50, 90, 0.03) 58%,
                rgba(22, 50, 90, 0.24) 77%,
                rgba(22, 50, 90, 0.70) 93%,
                #16325A 100%
            ) !important;
    }

    .about-hero__responsive-photo img,
    .updates-page .updates-hero .about-hero__responsive-photo img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: var(--hero-focus-x) var(--hero-focus-y) !important;
        transform: none !important;
        transform-origin: center center !important;
    }
}

/* ---------- MOBILE: one shared photo-first treatment ---------- */
@media (max-width: 781px) {
    .about-hero,
    .updates-page .updates-hero {
        --hero-mobile-photo: clamp(310px, 64vw, 420px);
        --about-mobile-photo: var(--hero-mobile-photo) !important;
        --updates-mobile-photo: var(--hero-mobile-photo) !important;
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--hero-mobile-photo) - 0.25rem) !important;
        background: #16325A !important;
        background-image: none !important;
        overflow: hidden !important;
    }

    .about-hero__responsive-photo,
    .updates-page .updates-hero .about-hero__responsive-photo {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--campaign-header-height-v12, 70px) + var(--hero-mobile-photo)) !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .about-hero__responsive-photo::after,
    .updates-page .updates-hero .about-hero__responsive-photo::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        background: linear-gradient(
            180deg,
            rgba(22, 50, 90, 0.01) 0%,
            rgba(22, 50, 90, 0.02) 56%,
            rgba(22, 50, 90, 0.13) 70%,
            rgba(22, 50, 90, 0.40) 82%,
            rgba(22, 50, 90, 0.78) 92%,
            #16325A 100%
        ) !important;
    }

    .about-hero__responsive-photo img,
    .updates-page .updates-hero .about-hero__responsive-photo img {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        display: block !important;
        width: 100% !important;
        height: var(--hero-mobile-photo) !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: var(--hero-focus-x) var(--hero-focus-y) !important;
        transform: none !important;
    }

    /* Home/Events use the same full-bleed cover rule on mobile too;
       only their existing gradient directions remain page-specific. */
    body.home .front-page .campaign-hero,
    body.home.admin-bar .front-page .campaign-hero,
    .events-page .campaign-hero.events-hero {
        background-size: 100% 100%, cover !important;
        background-position:
            center center,
            var(--hero-focus-x) var(--hero-focus-y) !important;
    }
}

/* ============================================================
   V196 — TRUE STANDARDIZED HERO MEDIA ARCHITECTURE
   ------------------------------------------------------------
   V195 standardized the source images and breakpoint labels, but
   Home/Events were still rendered as CSS backgrounds while
   About/Updates used real <img> layers. That preserved two separate
   crop systems. V196 removes hero photography from CSS backgrounds
   entirely and gives all four page heroes the same real-image layer.

   Shared behavior:
     • one real <img> media layer
     • object-fit: cover
     • one continuous desktop/tablet system (>=782px)
     • one mobile boundary (<=781px)
     • page-specific focal points only
     • no legacy background-size/background-position can affect photos
   ============================================================ */

/* ---- Shared focal variables ---- */
body.home .front-page .campaign-hero {
    --std-hero-focus-x: 52%;
    --std-hero-focus-y: 42%;
    --std-hero-media-width: 66%;
}

.events-page .campaign-hero.events-hero {
    --std-hero-focus-x: 52%;
    --std-hero-focus-y: 31%;
    --std-hero-media-width: 66%;
}

.about-hero {
    --std-hero-focus-x: 50%;
    --std-hero-focus-y: 48%;
    --std-hero-media-width: 62%;
}

.updates-page .updates-hero {
    --std-hero-focus-x: 52%;
    --std-hero-focus-y: 48%;
    --std-hero-media-width: 62%;
}

/* ---- Kill every legacy hero-photo background/pseudo layer ---- */
html body.home .front-page .campaign-hero,
html body.home.admin-bar .front-page .campaign-hero,
html body .events-page .campaign-hero.events-hero {
    background-color: #16325A !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
}

html body .about-hero,
html body .updates-page .updates-hero {
    background-color: #16325A !important;
    background-image: none !important;
}

html body .about-hero::before,
html body .updates-page .updates-hero::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* ---- Shared media layer ---- */
.standard-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.standard-hero-media img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: var(--std-hero-focus-x) var(--std-hero-focus-y) !important;
    transform: none !important;
    transform-origin: center center !important;
}

/* Text/content always lives above media. */
html body.home .front-page .campaign-hero__stage,
html body .events-page .events-hero .campaign-hero__stage,
html body .about-hero__inner,
html body .updates-page .updates-hero .about-hero__inner {
    position: relative !important;
    z-index: 4 !important;
}

/* ---- DESKTOP + TABLET: same continuous panel model ---- */
@media (min-width: 782px) {
    .standard-hero-media--right {
        right: 0 !important;
        left: auto !important;
        width: var(--std-hero-media-width) !important;
    }

    .standard-hero-media--left {
        left: 0 !important;
        right: auto !important;
        width: var(--std-hero-media-width) !important;
    }

    /* Right-photo pages: navy-to-photo fade lives on the photo panel itself. */
    .standard-hero-media--right::after {
        content: "" !important;
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 !important;
        pointer-events: none !important;
        background:
            linear-gradient(
                90deg,
                #16325A 0%,
                rgba(22, 50, 90, 0.98) 9%,
                rgba(22, 50, 90, 0.86) 20%,
                rgba(22, 50, 90, 0.60) 33%,
                rgba(22, 50, 90, 0.30) 48%,
                rgba(22, 50, 90, 0.10) 62%,
                rgba(22, 50, 90, 0.00) 76%
            ),
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.02) 0%,
                rgba(22, 50, 90, 0.02) 72%,
                rgba(22, 50, 90, 0.14) 84%,
                rgba(22, 50, 90, 0.42) 94%,
                rgba(22, 50, 90, 0.68) 100%
            ) !important;
    }

    /* Left-photo pages: mirror the same fade into navy copy area. */
    .standard-hero-media--left::after {
        content: "" !important;
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 !important;
        pointer-events: none !important;
        background:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.00) 0%,
                rgba(22, 50, 90, 0.03) 48%,
                rgba(22, 50, 90, 0.16) 64%,
                rgba(22, 50, 90, 0.48) 77%,
                rgba(22, 50, 90, 0.82) 89%,
                #16325A 100%
            ),
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.01) 0%,
                rgba(22, 50, 90, 0.03) 60%,
                rgba(22, 50, 90, 0.20) 79%,
                rgba(22, 50, 90, 0.66) 94%,
                #16325A 100%
            ) !important;
    }
}

/* ---- MOBILE ----
   Home/Events keep a full-bleed hero photo behind their existing copy.
   About/Updates keep their approved photo-first stacked composition.
*/
@media (max-width: 781px) {
    body.home .front-page .campaign-hero,
    .events-page .campaign-hero.events-hero {
        --std-hero-media-width: 100%;
    }

    body.home .front-page .standard-hero-media--right,
    .events-page .standard-hero-media--right {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    body.home .front-page .standard-hero-media--right::after,
    .events-page .standard-hero-media--right::after {
        content: "" !important;
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 !important;
        background:
            linear-gradient(
                90deg,
                rgba(22, 50, 90, 0.95) 0%,
                rgba(22, 50, 90, 0.82) 38%,
                rgba(22, 50, 90, 0.42) 68%,
                rgba(22, 50, 90, 0.12) 100%
            ),
            linear-gradient(
                180deg,
                rgba(22, 50, 90, 0.08) 0%,
                rgba(22, 50, 90, 0.08) 52%,
                rgba(22, 50, 90, 0.48) 78%,
                #16325A 100%
            ) !important;
    }

    /* Keep the established About/Updates mobile geometry, but force the
       standardized image layer to be the sole photo source. */
    .about-hero,
    .updates-page .updates-hero {
        --hero-mobile-photo: clamp(310px, 64vw, 420px);
        --about-mobile-photo: var(--hero-mobile-photo) !important;
        --updates-mobile-photo: var(--hero-mobile-photo) !important;
        min-height: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--hero-mobile-photo) - 0.25rem) !important;
        overflow: hidden !important;
    }

    .about-hero .standard-hero-media--left,
    .updates-page .updates-hero .standard-hero-media--left {
        display: block !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--campaign-header-height-v12, 70px) + var(--hero-mobile-photo)) !important;
    }

    .about-hero .standard-hero-media--left img,
    .updates-page .updates-hero .standard-hero-media--left img {
        top: auto !important;
        bottom: 0 !important;
        height: var(--hero-mobile-photo) !important;
    }

    .about-hero .standard-hero-media--left::after,
    .updates-page .updates-hero .standard-hero-media--left::after {
        content: "" !important;
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 !important;
        background: linear-gradient(
            180deg,
            rgba(22, 50, 90, 0.01) 0%,
            rgba(22, 50, 90, 0.02) 56%,
            rgba(22, 50, 90, 0.13) 70%,
            rgba(22, 50, 90, 0.40) 82%,
            rgba(22, 50, 90, 0.78) 92%,
            #16325A 100%
        ) !important;
    }
}

/* ============================================================
   V197 — UNIFIED MOBILE HERO COMPOSITION
   ------------------------------------------------------------
   Home and Events now use the same photo-first stacked mobile
   composition as About and Updates:
     solid compact header -> dedicated photo block -> vertical fade
     -> navy content block -> wave divider.

   Desktop/tablet geometry is intentionally unchanged.
   ============================================================ */

@media (max-width: 781px) {
    /* One shared mobile photo-height system across all four heroes. */
    body.home .front-page .campaign-hero,
    .events-page .campaign-hero.events-hero,
    .about-hero,
    .updates-page .updates-hero {
        --hero-mobile-photo: clamp(310px, 64vw, 420px) !important;
    }

    /* HOME + EVENTS: stop treating the image as a full-height backdrop. */
    html body.home .front-page .campaign-hero,
    html body.home.admin-bar .front-page .campaign-hero,
    html body .events-page .campaign-hero.events-hero {
        position: relative !important;
        isolation: isolate !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding-top: calc(var(--campaign-header-height-v12, 70px) + var(--hero-mobile-photo) - 0.25rem) !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        overflow: hidden !important;
        background: #16325A !important;
        background-image: none !important;
    }

    /* Their standardized media layer becomes the same discrete photo block
       already used by About / Updates. */
    html body.home .front-page .standard-hero-media--right,
    html body .events-page .standard-hero-media--right {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(var(--campaign-header-height-v12, 70px) + var(--hero-mobile-photo)) !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    html body.home .front-page .standard-hero-media--right img,
    html body .events-page .standard-hero-media--right img {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--hero-mobile-photo) !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: var(--std-hero-focus-x) var(--std-hero-focus-y) !important;
        transform: none !important;
    }

    /* Match the About / Updates bottom fade exactly. */
    html body.home .front-page .standard-hero-media--right::after,
    html body .events-page .standard-hero-media--right::after {
        content: "" !important;
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 !important;
        pointer-events: none !important;
        background: linear-gradient(
            180deg,
            rgba(22, 50, 90, 0.01) 0%,
            rgba(22, 50, 90, 0.02) 56%,
            rgba(22, 50, 90, 0.13) 70%,
            rgba(22, 50, 90, 0.40) 82%,
            rgba(22, 50, 90, 0.78) 92%,
            #16325A 100%
        ) !important;
    }

    /* HOME: logo/form now sit in their own navy content block below photo. */
    html body.home .front-page .campaign-hero__stage,
    html body.home.admin-bar .front-page .campaign-hero__stage {
        position: relative !important;
        z-index: 6 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    html body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        position: relative !important;
        z-index: 6 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: min(100%, 560px) !important;
        max-width: 560px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: clamp(1.6rem, 5vw, 2.1rem) 1.15rem clamp(5.7rem, 15vw, 6.8rem) !important;
        transform: none !important;
        background: #16325A !important;
        box-sizing: border-box !important;
    }

    /* EVENTS: same stacked flow; title/body no longer overlay the image. */
    html body .events-page .events-hero .campaign-hero__stage {
        position: relative !important;
        z-index: 6 !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .events-page .events-hero__copy {
        position: relative !important;
        z-index: 6 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        padding: clamp(1.65rem, 5vw, 2.15rem) clamp(1.1rem, 5vw, 1.5rem) clamp(5.7rem, 15vw, 6.8rem) !important;
        transform: none !important;
        text-align: left !important;
        background: #16325A !important;
        box-sizing: border-box !important;
    }

    /* Preserve the approved mobile type sizes while matching the About/
       Updates content start directly after the photo fade. */
    html body .events-page .events-hero__title {
        max-width: 10ch !important;
        margin: 0 0 0.95rem !important;
        font-size: clamp(2.15rem, 8.7vw, 2.8rem) !important;
        line-height: 0.96 !important;
    }

    html body .events-page .events-hero__body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: clamp(0.98rem, 3.8vw, 1.06rem) !important;
        line-height: 1.5 !important;
    }

    /* Keep both wave dividers attached to the true bottom of the new,
       content-driven hero height. */
    html body.home .front-page .campaign-hero::after,
    html body .events-page .campaign-hero.events-hero::after {
        bottom: -1px !important;
        height: clamp(58px, 14vw, 82px) !important;
    }
}

/* Phones use the exact same composition; only reduce the photo block in
   the same way About/Updates are treated at the narrowest widths. */
@media (max-width: 560px) {
    body.home .front-page .campaign-hero,
    .events-page .campaign-hero.events-hero,
    .about-hero,
    .updates-page .updates-hero {
        --hero-mobile-photo: clamp(270px, 64vw, 340px) !important;
    }

    html body.home .front-page .campaign-hero__stage .campaign-hero__copy,
    html body.home.admin-bar .front-page .campaign-hero__stage .campaign-hero__copy {
        padding-top: 1.5rem !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
}

/* ============================================================
   V200 — REAL EVENT + UPDATES CARD GRID
   - Populate the first Events card with the recurring Saturday canvass.
   - Rebuild Updates Section 2 in the same visual language as Events:
     square media, meta, title, body, red field, overlap, lower navy wave.
   ============================================================ */

.updates-page .campaign-announcement.updates-announcement {
    position: relative !important;
    z-index: 3 !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(4.25rem, 5.5vw, 5.5rem) !important;
    background: #D03330 !important;
    color: #ffffff !important;
}

.updates-page .campaign-announcement.updates-announcement::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: clamp(84px, 8vw, 118px) !important;
    pointer-events: none !important;
    background: url("../images/section-two-wave.svg") center bottom / 100% 100% no-repeat !important;
}

.updates-page .updates-listing {
    position: relative !important;
    z-index: 24 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(1.5rem, 2.4vw, 2.4rem) !important;
    width: min(100%, 860px) !important;
    margin: 0 auto !important;
    transform: translateY(clamp(-118px, -7vw, -92px)) !important;
}

.updates-page .updates-listing__item {
    min-width: 0 !important;
    color: #ffffff !important;
}

.updates-page .updates-listing__media {
    position: relative !important;
    z-index: 25 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 clamp(1.25rem, 2vw, 1.7rem) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(8, 25, 48, 0.22) !important;
    background: #ffffff !important;
}

.updates-page .updates-listing__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.updates-page .updates-listing__media--contain img {
    object-fit: contain !important;
}

.updates-page .updates-listing__content {
    padding: 0 0.2rem !important;
}

.updates-page .updates-listing__meta {
    margin: 0 0 0.55rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(0.78rem, 0.8vw, 0.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.updates-page .updates-listing__title {
    margin: 0 0 0.55rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.7rem, 2.1vw, 2.35rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.98 !important;
    text-transform: uppercase !important;
}

.updates-page .updates-listing__body {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.08vw, 1.1rem) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

@media (max-width: 781px) {
    .updates-page .campaign-announcement.updates-announcement {
        padding: 0 1.25rem 4.75rem !important;
    }

    .updates-page .campaign-announcement.updates-announcement::after {
        height: clamp(58px, 14vw, 82px) !important;
    }

    .updates-page .updates-listing {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2.5rem !important;
        width: min(100%, 520px) !important;
        transform: translateY(-54px) !important;
    }

    .updates-page .updates-listing__media {
        border-radius: 18px !important;
    }

    .updates-page .updates-listing__title {
        font-size: clamp(1.65rem, 7.5vw, 2.15rem) !important;
    }
}


/* ============================================================
   V205 — TWO-CARD EVENTS ROW
   - Phone-a-Thon first, canvassing second.
   - Remove unused placeholder event.
   - Balance the two remaining cards across Section 2.
   ============================================================ */

.events-page .events-listing.events-listing--two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 860px) !important;
}

@media (max-width: 781px) {
    .events-page .events-listing.events-listing--two {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 520px) !important;
    }
}

/* ============================================================
   V211 — NATIVE BLOCK CARD ALIGNMENT
   The Site Editor adds a flow-layout sibling margin to its native
   Group blocks. In the two-card Events grid that made only the
   second card sit lower. Let the grid's own gap control spacing.
   ============================================================ */
.events-page .events-listing.events-listing--two > .events-listing__item {
    margin-block-start: 0 !important;
    align-self: start !important;
}

/* ============================================================
   V212 — ABOUT POLICY COLUMN CENTERING
   Native constrained Group blocks can retain an editor-side offset.
   Use one explicit centered grid column for all policy content.
   ============================================================ */
.about-page .about-medicaid__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.about-page .about-medicaid__inner > * {
    justify-self: center !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.about-page .about-medicaid__title,
.about-page .about-medicaid__body,
.about-page .about-medicaid__veterans,
.about-page .about-medicaid__beginning {
    width: 100% !important;
    text-align: center !important;
}

.about-page .about-medicaid__body,
.about-page .about-medicaid__veterans {
    max-width: 860px !important;
}

.about-page .about-medicaid__beginning {
    max-width: 760px !important;
}

@media (max-width: 940px) {
    .about-page .about-medicaid__body,
    .about-page .about-medicaid__veterans {
        max-width: 720px !important;
    }
}

/* ============================================================
   V213 — HOME SECTION 2 ULTRAWIDE ANCHORING
   Keep the approved two-column composition, but use the broad
   campaign rail so the chamber image is anchored near the right
   side of the canvas instead of an old narrow content cap.
   ============================================================ */
@media (min-width: 1181px) {
    body.home .front-page .campaign-announcement__inner {
        width: min(1600px, calc(100% - clamp(64px, 8vw, 160px))) !important;
        max-width: 1600px !important;
        grid-template-columns: minmax(0, 460px) minmax(0, 1fr) !important;
        min-height: 420px !important;
    }

    body.home .front-page .campaign-announcement__copy {
        max-width: 460px !important;
        transform: translateY(-34px) !important;
    }

    body.home .front-page .campaign-announcement__text {
        max-width: 455px !important;
    }

    body.home .front-page .campaign-announcement__body {
        max-width: 440px !important;
    }

    body.home .front-page .campaign-announcement__media {
        top: -118px !important;
        right: 0 !important;
        bottom: -148px !important;
        width: min(720px, 42vw) !important;
        max-width: 720px !important;
    }
}

/* V210 — native Gutenberg editing compatibility. */
.campaign-priorities-section__list.wp-block-list {
    list-style: none !important;
    counter-reset: campaign-priority !important;
    padding-left: 0 !important;
}

.campaign-priorities-section__list.wp-block-list > li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 1.25rem 0 1.25rem clamp(4.1rem, 8vw, 7.2rem) !important;
    border-top: 1px solid rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
    counter-increment: campaign-priority !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.25rem, 1.75vw, 1.85rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
}

.campaign-priorities-section__list.wp-block-list > li::before {
    content: counter(campaign-priority, decimal-leading-zero) !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding-left: 0.8rem !important;
    border-left: 4px solid #D03330 !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
}

.campaign-donation-section__primary .wp-block-button,
.campaign-donation-section__primary .wp-block-button__link {
    width: 100% !important;
}

.campaign-donation-section__primary .wp-block-button__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    border: inherit !important;
    border-radius: inherit !important;
    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.campaign-donation-section__amounts .wp-block-button,
.campaign-donation-section__amounts .wp-block-button__link {
    width: 100% !important;
}

/* ============================================================
   V215 — FINAL NATIVE-BLOCK PARITY LAYER
   This must remain after the generic Gutenberg compatibility rules.
   ============================================================ */

/* About policy copy: one genuinely centered column. */
.about-page .about-medicaid__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(100%, 980px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.about-page .about-medicaid__title {
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

.about-page .about-medicaid__body,
.about-page .about-medicaid__veterans {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

.about-page .about-medicaid__beginning {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

@media (max-width: 940px) {
    .about-page .about-medicaid__body,
    .about-page .about-medicaid__veterans {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
    }
}

/* Home Section 2 image: restore the rounded media card. */
body.home .front-page .campaign-announcement__media {
    overflow: hidden !important;
    border-radius: 26px !important;
}

body.home .front-page .campaign-announcement__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;
}

/* Use the original independent number and label treatment. */
body.home .front-page .campaign-priorities-section__list.wp-block-list {
    list-style: none !important;
    counter-reset: none !important;
    padding-left: 0 !important;
}

body.home .front-page .campaign-priorities-section__list.wp-block-list > li {
    display: grid !important;
    grid-template-columns: 3.15ch minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(0.8rem, 1.05vw, 1rem) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(1rem, 1.55vw, 1.25rem) 0 !important;
    border-top: 0 !important;
    color: #ffffff !important;
    counter-increment: none !important;
}

body.home .front-page .campaign-priorities-section__list.wp-block-list > li + li {
    border-top: 1px solid rgba(255,255,255,0.32) !important;
}

body.home .front-page .campaign-priorities-section__list.wp-block-list > li::before {
    content: none !important;
    display: none !important;
}

body.home .front-page .campaign-priorities-section__index {
    display: block !important;
    grid-column: 1 !important;
    padding-left: 0.8rem !important;
    border-left: 4px solid #D03330 !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body.home .front-page .campaign-priorities-section__label {
    display: block !important;
    grid-column: 2 !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.25rem, 1.75vw, 1.85rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
}

/* Home’s full-width CTA keeps the approved navy treatment and readable size. */
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link {
    min-height: 58px !important;
    border: 2px solid #16325A !important;
    border-radius: 4px !important;
    background: #16325A !important;
    color: #ffffff !important;
    font-size: clamp(1rem, 1.1vw, 1.15rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
}

/* ============================================================
   V217 — FINAL PRIORITIES + WAVE LAYER
   This placement is deliberate: it follows every legacy and
   native-block compatibility rule above.
   ============================================================ */

body.home .front-page .campaign-priorities-section__list.wp-block-list {
    display: block !important;
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin: clamp(1.45rem, 2vw, 1.85rem) auto 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body.home .front-page .campaign-priorities-section__list.wp-block-list > li {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(1rem, 1.5vw, 1.4rem) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(1rem, 1.35vw, 1.3rem) 0 !important;
    border-top: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.65rem, 2.15vw, 2.15rem) !important;
    line-height: 1.08 !important;
}

body.home .front-page .campaign-priorities-section__list.wp-block-list > li + li {
    border-top: 1px solid rgba(255,255,255,0.32) !important;
}

body.home .front-page .campaign-priorities-section__index {
    display: block !important;
    grid-column: 1 !important;
    position: relative !important;
    min-height: 1.05em !important;
    padding-left: 16px !important;
    border-left: 0 !important;
    color: rgba(255,255,255,0.96) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: inherit !important;
}

body.home .front-page .campaign-priorities-section__index::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 3px !important;
    height: 1.05em !important;
    background: #D03330 !important;
    transform: translateY(-50%) !important;
}

body.home .front-page .campaign-priorities-section__label {
    display: block !important;
    grid-column: 2 !important;
    color: #ffffff !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    letter-spacing: -0.018em !important;
    line-height: inherit !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-priorities-section__list.wp-block-list {
        width: min(100%, 680px) !important;
    }

    body.home .front-page .campaign-priorities-section__list.wp-block-list > li {
        grid-template-columns: 3.15ch minmax(0, 1fr) !important;
        gap: 0.8rem !important;
        padding: 1rem 0 !important;
        font-size: clamp(1.3rem, 6vw, 1.58rem) !important;
    }

    body.home .front-page .campaign-priorities-section__index {
        padding-left: 11px !important;
    }
}

/* Draw the hero-to-red wave from the red section itself.  This prevents
   the adjacent section's stacking context from hiding it at mid-widths. */
body.home .front-page .campaign-announcement {
    --campaign-announcement-top-wave: clamp(78px, 8vw, 118px);
}

body.home .front-page .campaign-announcement::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 9 !important;
    top: calc(var(--campaign-announcement-top-wave) * -1 + 1px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--campaign-announcement-top-wave) !important;
    pointer-events: none !important;
    background: url("../images/hero-section-wave.svg") center bottom / 100% 100% no-repeat !important;
}

body.home .front-page .campaign-announcement::after {
    z-index: 12 !important;
}

body.home .front-page .campaign-section-four.campaign-donation-section::before,
body.home .front-page .campaign-section-four.campaign-donation-section::after {
    display: block !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-announcement {
        --campaign-announcement-top-wave: clamp(58px, 14vw, 82px);
    }
}


/* ============================================================
   V218 — HARD CLIP + ABOUT POLICY LOCK
   - Force the Home Section 2 photo to paint through a rounded clipping
     surface at every zoom/desktop scale so no square corner can leak.
   - Put both About policy items on the exact same explicit content rail;
     no Gutenberg constrained-layout offset is allowed to move one block.
   ============================================================ */

/* HOME SECTION 2 IMAGE — hard clipping on the rendered figure itself. */
body.home .front-page figure.wp-block-image.campaign-announcement__media {
    --campaign-announcement-card-radius: 28px;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: var(--campaign-announcement-card-radius) !important;
    clip-path: inset(0.5px round var(--campaign-announcement-card-radius)) !important;
    -webkit-clip-path: inset(0.5px round var(--campaign-announcement-card-radius)) !important;
    contain: paint !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    backface-visibility: hidden !important;
}

body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    object-fit: cover !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

@media (min-width: 782px) and (max-width: 1180px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        --campaign-announcement-card-radius: 22px;
    }
}

@media (max-width: 781px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        --campaign-announcement-card-radius: 18px;
    }
}

/* ABOUT POLICY SECTION — one shared 860px rail, same origin, same center. */
.about-page .about-medicaid__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.about-page .about-medicaid__policy,
.about-page .about-medicaid__body,
.about-page .about-medicaid__veterans {
    box-sizing: border-box !important;
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
}

.about-page .about-medicaid__policy--medicaid {
    margin-top: 0 !important;
}

.about-page .about-medicaid__body {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-top: 0 !important;
}

.about-page .about-medicaid__veterans {
    margin-top: clamp(2.6rem, 4vw, 3.5rem) !important;
}

.about-page .about-medicaid__title,
.about-page .about-medicaid__veterans-title {
    box-sizing: border-box !important;
    display: block !important;
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
}

.about-page .about-medicaid__beginning {
    box-sizing: border-box !important;
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
}

@media (max-width: 940px) {
    .about-page .about-medicaid__policy,
    .about-page .about-medicaid__body,
    .about-page .about-medicaid__veterans,
    .about-page .about-medicaid__beginning {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
    }

    .about-page .about-medicaid__body,
    .about-page .about-medicaid__title,
    .about-page .about-medicaid__veterans-title {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
    }
}

/* ============================================================
   V219 — HOME SECTION 2 IMAGE: DIRECT FOUR-CORNER CLIP
   V218 zeroed the radius on the actual <img> and depended on the
   figure's composited clip. At fractional browser zoom that can leave
   the lower bitmap corners visibly square. Clip BOTH paint surfaces.
   ============================================================ */
body.home .front-page figure.wp-block-image.campaign-announcement__media {
    --campaign-announcement-card-radius: 28px;
    overflow: hidden !important;
    border-radius: var(--campaign-announcement-card-radius) !important;
    clip-path: inset(0 round var(--campaign-announcement-card-radius)) !important;
    -webkit-clip-path: inset(0 round var(--campaign-announcement-card-radius)) !important;
    contain: paint !important;
    isolation: isolate !important;
    /* Avoid a separate transformed compositor surface at fractional zoom. */
    transform: none !important;
    -webkit-mask-image: none !important;
    backface-visibility: visible !important;
}

body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--campaign-announcement-card-radius) !important;
    clip-path: inset(0 round var(--campaign-announcement-card-radius)) !important;
    -webkit-clip-path: inset(0 round var(--campaign-announcement-card-radius)) !important;
    object-fit: cover !important;
    transform: none !important;
    backface-visibility: visible !important;
}

@media (min-width: 782px) and (max-width: 1180px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        --campaign-announcement-card-radius: 22px;
    }
}

@media (max-width: 781px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        --campaign-announcement-card-radius: 18px;
    }
}

/* ============================================================
   V220 — HOME SECTION 2 BOTTOM-CORNER FAILSAFE
   The chamber photo now has transparent lower corner pixels baked into
   the PNG itself. These rules retain the normal radius visually, but the
   lower corners no longer depend on browser clipping/compositing at all.
   ============================================================ */
body.home .front-page figure.wp-block-image.campaign-announcement__media,
body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
    border-radius: 28px !important;
}

body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
    /* The PNG's alpha channel is the authoritative lower-corner mask. */
    clip-path: none !important;
    -webkit-clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

@media (min-width: 782px) and (max-width: 1180px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media,
    body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
        border-radius: 22px !important;
    }
}

@media (max-width: 781px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media,
    body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
        border-radius: 18px !important;
    }
}

/* ============================================================
   V221 — ZOOM-OUT BOTTOM-CORNER PAINT FIX
   At wide/fractional zoom levels the chamber card is a non-square box
   while its source PNG is square. The image is painted with object-fit:
   cover, so source-level transparent corner pixels can be cropped away.
   Do not rely on source alpha or figure clipping for the lower corners.

   The top corners already render correctly from the IMG border-radius.
   The two lower corners are now explicitly painted over with the navy
   section color using quarter-circle cutouts on the figure itself. This
   remains round even if browser zoom changes the object-fit crop.
   ============================================================ */
@media (min-width: 782px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        --campaign-announcement-bottom-radius: 28px;
        /* Let the generated corner caps paint outside any unreliable clip. */
        overflow: visible !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
        position: relative !important;
        z-index: 1 !important;
        border-radius: var(--campaign-announcement-bottom-radius) !important;
    }

    body.home .front-page figure.wp-block-image.campaign-announcement__media::before,
    body.home .front-page figure.wp-block-image.campaign-announcement__media::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 999 !important;
        bottom: -0.5px !important;
        width: calc(var(--campaign-announcement-bottom-radius) + 1px) !important;
        height: calc(var(--campaign-announcement-bottom-radius) + 1px) !important;
        pointer-events: none !important;
    }

    /* Bottom-left: retain a quarter circle of photo and paint only the
       outside corner navy. The 0.75px blend prevents a light seam at
       fractional browser zoom levels. */
    body.home .front-page figure.wp-block-image.campaign-announcement__media::before {
        left: -0.5px !important;
        background: radial-gradient(
            circle at 100% 0%,
            transparent 0,
            transparent calc(var(--campaign-announcement-bottom-radius) - 1px),
            rgba(22, 50, 90, 0.65) calc(var(--campaign-announcement-bottom-radius) - 0.25px),
            #16325A calc(var(--campaign-announcement-bottom-radius) + 0.5px)
        ) !important;
    }

    /* Bottom-right mirror. */
    body.home .front-page figure.wp-block-image.campaign-announcement__media::after {
        right: -0.5px !important;
        background: radial-gradient(
            circle at 0% 0%,
            transparent 0,
            transparent calc(var(--campaign-announcement-bottom-radius) - 1px),
            rgba(22, 50, 90, 0.65) calc(var(--campaign-announcement-bottom-radius) - 0.25px),
            #16325A calc(var(--campaign-announcement-bottom-radius) + 0.5px)
        ) !important;
    }
}

@media (min-width: 782px) and (max-width: 1180px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        --campaign-announcement-bottom-radius: 22px;
    }
}

/* ============================================================
   V223 — HOME PHOTO: GEOMETRIC FOUR-CORNER CLIP

   IMPORTANT: do not wrap/remove/replace the IMG. V222 did that and could
   collapse the media rendering path. Keep the original v221 markup intact.

   The zoomed-out failure is now handled with an explicit polygon clip on the
   FIGURE itself. This does not depend on border-radius rasterization, source
   PNG alpha, pseudo-elements, or object-fit preserving source corners.
   ============================================================ */

/* Remove the V221 painted-corner experiment. */
body.home .front-page figure.wp-block-image.campaign-announcement__media::before,
body.home .front-page figure.wp-block-image.campaign-announcement__media::after {
    content: none !important;
    display: none !important;
}

/* Tablet / narrower desktop: ~22px geometric radius. */
@media (min-width: 782px) and (max-width: 1180px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        z-index: 50 !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        -webkit-clip-path: polygon(
            0 22px, 0.84px 16.30px, 3.22px 11px, 6.45px 6.45px, 11px 3.22px, 16.30px 0.84px, 22px 0,
            calc(100% - 22px) 0, calc(100% - 16.30px) 0.84px, calc(100% - 11px) 3.22px, calc(100% - 6.45px) 6.45px, calc(100% - 3.22px) 11px, calc(100% - 0.84px) 16.30px, 100% 22px,
            100% calc(100% - 22px), calc(100% - 0.84px) calc(100% - 16.30px), calc(100% - 3.22px) calc(100% - 11px), calc(100% - 6.45px) calc(100% - 6.45px), calc(100% - 11px) calc(100% - 3.22px), calc(100% - 16.30px) calc(100% - 0.84px), calc(100% - 22px) 100%,
            22px 100%, 16.30px calc(100% - 0.84px), 11px calc(100% - 3.22px), 6.45px calc(100% - 6.45px), 3.22px calc(100% - 11px), 0.84px calc(100% - 16.30px), 0 calc(100% - 22px)
        ) !important;
        clip-path: polygon(
            0 22px, 0.84px 16.30px, 3.22px 11px, 6.45px 6.45px, 11px 3.22px, 16.30px 0.84px, 22px 0,
            calc(100% - 22px) 0, calc(100% - 16.30px) 0.84px, calc(100% - 11px) 3.22px, calc(100% - 6.45px) 6.45px, calc(100% - 3.22px) 11px, calc(100% - 0.84px) 16.30px, 100% 22px,
            100% calc(100% - 22px), calc(100% - 0.84px) calc(100% - 16.30px), calc(100% - 3.22px) calc(100% - 11px), calc(100% - 6.45px) calc(100% - 6.45px), calc(100% - 11px) calc(100% - 3.22px), calc(100% - 16.30px) calc(100% - 0.84px), calc(100% - 22px) 100%,
            22px 100%, 16.30px calc(100% - 0.84px), 11px calc(100% - 3.22px), 6.45px calc(100% - 6.45px), 3.22px calc(100% - 11px), 0.84px calc(100% - 16.30px), 0 calc(100% - 22px)
        ) !important;
        contain: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* Wide / zoomed-out desktop: explicit ~28px geometric radius. */
@media (min-width: 1181px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        z-index: 50 !important;
        overflow: hidden !important;
        border-radius: 28px !important;
        -webkit-clip-path: polygon(
            0 28px, 1.07px 20.75px, 4.10px 14px, 8.20px 8.20px, 14px 4.10px, 20.75px 1.07px, 28px 0,
            calc(100% - 28px) 0, calc(100% - 20.75px) 1.07px, calc(100% - 14px) 4.10px, calc(100% - 8.20px) 8.20px, calc(100% - 4.10px) 14px, calc(100% - 1.07px) 20.75px, 100% 28px,
            100% calc(100% - 28px), calc(100% - 1.07px) calc(100% - 20.75px), calc(100% - 4.10px) calc(100% - 14px), calc(100% - 8.20px) calc(100% - 8.20px), calc(100% - 14px) calc(100% - 4.10px), calc(100% - 20.75px) calc(100% - 1.07px), calc(100% - 28px) 100%,
            28px 100%, 20.75px calc(100% - 1.07px), 14px calc(100% - 4.10px), 8.20px calc(100% - 8.20px), 4.10px calc(100% - 14px), 1.07px calc(100% - 20.75px), 0 calc(100% - 28px)
        ) !important;
        clip-path: polygon(
            0 28px, 1.07px 20.75px, 4.10px 14px, 8.20px 8.20px, 14px 4.10px, 20.75px 1.07px, 28px 0,
            calc(100% - 28px) 0, calc(100% - 20.75px) 1.07px, calc(100% - 14px) 4.10px, calc(100% - 8.20px) 8.20px, calc(100% - 4.10px) 14px, calc(100% - 1.07px) 20.75px, 100% 28px,
            100% calc(100% - 28px), calc(100% - 1.07px) calc(100% - 20.75px), calc(100% - 4.10px) calc(100% - 14px), calc(100% - 8.20px) calc(100% - 8.20px), calc(100% - 14px) calc(100% - 4.10px), calc(100% - 20.75px) calc(100% - 1.07px), calc(100% - 28px) 100%,
            28px 100%, 20.75px calc(100% - 1.07px), 14px calc(100% - 4.10px), 8.20px calc(100% - 8.20px), 4.10px calc(100% - 14px), 1.07px calc(100% - 20.75px), 0 calc(100% - 28px)
        ) !important;
        contain: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* The figure owns the clip. The IMG stays completely normal and visible. */
@media (min-width: 782px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        object-fit: cover !important;
    }
}

/* Make the actual GIVE ANY AMOUNT text materially larger. */
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
body .about-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
body.page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link {
    font-size: clamp(1.35rem, 1.7vw, 1.6rem) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
    body .about-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
    body.page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link {
        font-size: 1.25rem !important;
    }
}

/* ============================================================
   V224 — HOME SECTION 2 PHOTO: ELEMENT-BACKGROUND RENDERING

   The persistent zoom-out issue is caused by the visible bitmap being a
   child <img> that Chrome/Safari can rasterize on a different compositing
   surface from the rounded FIGURE. At fractional zoom, the top corners can
   survive while the lower bitmap edge is painted square.

   Do not clip the child bitmap at all. Instead, keep the real IMG in the DOM
   for semantics and sizing, make it transparent, and paint the same photo as
   the FIGURE'S OWN background. CSS backgrounds are painted inside the
   element's border-radius, so there is no separate child edge that can escape
   at the lower corners. The crop remains the same: cover + center center.
   ============================================================ */
@media (min-width: 782px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        /* Neutralize every previous child/clip-path experiment. */
        overflow: visible !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        contain: none !important;
        transform: none !important;

        /* The FIGURE itself now paints the photo. */
        border: 0 !important;
        border-radius: 28px !important;
        background-image: url("../images/johnny-chamber-panel-v220.png") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
        background-origin: border-box !important;
        background-clip: border-box !important;
        box-shadow: 0 20px 50px rgba(8, 25, 48, 0.24) !important;
    }

    body.home .front-page figure.wp-block-image.campaign-announcement__media::before,
    body.home .front-page figure.wp-block-image.campaign-announcement__media::after {
        content: none !important;
        display: none !important;
    }

    body.home .front-page figure.wp-block-image.campaign-announcement__media > img {
        /* Preserve the exact box dimensions, but remove the independently
           rasterized bitmap from the visible paint path. */
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        box-shadow: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }
}

@media (min-width: 782px) and (max-width: 1180px) {
    body.home .front-page figure.wp-block-image.campaign-announcement__media {
        border-radius: 22px !important;
        box-shadow: 0 16px 38px rgba(8, 25, 48, 0.22) !important;
    }
}

/* ============================================================
   V227 — GIVE ANY AMOUNT TYPE SIZE ONLY
   Based directly on V224. No layout, image, navigation, editor,
   or section-spacing changes. This only reduces the CTA text
   to a midpoint between V225 (too large) and V226 (too small).
   ============================================================ */
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
body .about-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
body.page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link {
    font-size: clamp(1.025rem, 1.1vw, 1.125rem) !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
    body .about-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link,
    body.page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link {
        font-size: 1.025rem !important;
    }
}

/* ============================================================
   V228 — UPDATES CARD TOP ALIGNMENT ONLY
   WordPress flow-layout global styles can add margin-block-start
   to later Group children. In the two-column updates grid that
   nudges the second card down even though both media boxes share
   identical dimensions. Reset only the direct update-card items
   so both cards begin on the same horizontal line.
   ============================================================ */
.updates-page .updates-listing {
    align-items: start !important;
}

.updates-page .updates-listing > .updates-listing__item,
.updates-page .updates-listing > article.updates-listing__item {
    align-self: start !important;
    margin: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
}

.updates-page .updates-listing > .updates-listing__item > .updates-listing__media,
.updates-page .updates-listing > article.updates-listing__item > figure.updates-listing__media {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}


/* ============================================================
   V229 — WORDPRESS-NATIVE CAMPAIGN FORM STATUS
   No layout changes are applied until a visitor submits the form.
   ============================================================ */
.campaign-hero-form__status,
.campaign-form__status {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0 !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.campaign-hero-form__status {
    color: #ffffff !important;
}

.campaign-form__status.is-error,
.campaign-hero-form__status.is-error {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}


/* ============================================================
   V230 — HOMEPAGE FORM CONFIRMATION PLACEMENT
   Keep the success/error message directly beneath the JOIN row
   and above the consent disclaimer. The additional grid row is
   introduced only while a message is actually present, so the
   resting form spacing is unchanged.
   ============================================================ */
.campaign-hero-form__status,
.campaign-form__status {
    grid-area: status !important;
    margin: 0.05rem 0 0 !important;
    width: 100% !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.campaign-hero-form__status:empty,
.campaign-form__status:empty {
    display: none !important;
}

.campaign-hero-form.has-status,
.campaign-form--hero.campaign-hero-form.has-status {
    grid-template-areas:
        "first last"
        "phone email"
        "actions actions"
        "status status"
        "disclaimer disclaimer" !important;
}

@media (max-width: 700px) {
    .campaign-hero-form__status,
    .campaign-form__status {
        font-size: 0.78rem !important;
    }
}


/* ============================================================
   V233 — UPDATES: THREE-COLUMN, NEWEST-FIRST GRID
   Desktop updates are presented in rows of three. Card order is
   controlled by the template/render fallback so the newest endorsements
   occupy the upper-left positions. Tablet remains two columns; mobile one.
   ============================================================ */
@media (min-width: 1100px) {
    .updates-page .updates-listing {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: min(100%, 1240px) !important;
        gap: clamp(1.5rem, 2vw, 2.15rem) !important;
    }

    .updates-page .updates-listing__title {
        font-size: clamp(1.5rem, 1.65vw, 2rem) !important;
    }
}

@media (min-width: 782px) and (max-width: 1099px) {
    .updates-page .updates-listing {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 860px) !important;
    }
}
/* Legal links: sit naturally within the SMS disclosure and below footer socials. */
.campaign-hero-form__legal-links {
    display: inline !important;
    margin: 0 !important;
    font: inherit !important;
    color: inherit !important;
}

.footer-legal-links {
    margin: 0.9rem 0 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.7rem !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.campaign-hero-form__legal-links a,
.footer-legal-links a {
    color: inherit !important;
    text-decoration: none !important;
}

.campaign-hero-form__disclaimer a {
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
}

.campaign-hero-form__disclaimer a:hover,
.campaign-hero-form__disclaimer a:focus-visible,
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
    color: #ffffff !important;
}

.campaign-hero-form__disclaimer {
    width: min(100%, 850px) !important;
    max-width: 850px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
    text-wrap: balance;
}

/* Legal pages retain the campaign frame while keeping long policy text easy to read. */
.legal-page {
    background: #E9E7E3 !important;
    padding-bottom: clamp(2.75rem, 6vw, 5rem) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

.legal-page__masthead {
    /* Match the vertical start of the About and Updates page headings. */
    padding: calc(var(--campaign-header-height-v12, 78px) + clamp(2.2rem, 2.6vw, 2.85rem)) var(--campaign-gutter) clamp(3.8rem, 5.6vw, 5.25rem) !important;
    text-align: center !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

.legal-page__masthead-inner {
    width: min(100%, 900px) !important;
    margin: 0 auto !important;
}

.legal-page__eyebrow,
.legal-page__date {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.legal-page__title {
    margin: 0.65rem 0 0.8rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.65rem, 4.15vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
}

.legal-page__date {
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.legal-page__content {
    width: min(100%, 980px) !important;
    margin: clamp(-2.2rem, -3vw, -3rem) auto 0 !important;
    padding: 0 var(--campaign-gutter) !important;
    position: relative !important;
    z-index: 2 !important;
}

.legal-page__document {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: clamp(2rem, 5vw, 4.25rem) clamp(1.3rem, 5vw, 5rem) !important;
    color: #16325A !important;
    background: #ffffff !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 44px rgba(22, 50, 90, 0.12) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

.legal-page__document .wp-block-post-content {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

.legal-page__document p,
.legal-page__document address {
    margin: 0 0 1.15rem !important;
    color: rgba(22, 50, 90, 0.86) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.65 !important;
}

.legal-page__document h2 {
    margin: clamp(2.2rem, 5vw, 3.5rem) 0 0.9rem !important;
    color: #D03330 !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1.25rem, 2.1vw, 1.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
}

.legal-page__document h2:first-child {
    margin-top: 0 !important;
}

.legal-page__document strong {
    color: #16325A !important;
}

.legal-page__document a {
    color: #D03330 !important;
    text-decoration: none !important;
}

.legal-page__document a:hover,
.legal-page__document a:focus-visible {
    color: #16325A !important;
}

@media (max-width: 700px) {
    .legal-page__masthead {
        padding-top: calc(var(--campaign-header-height-v12, 70px) + 2.15rem) !important;
        padding-bottom: 3.25rem !important;
    }

    .legal-page__content {
        margin-top: -1.6rem !important;
    }

    .legal-page__document {
        border-radius: 16px !important;
    }
}

.campaign-hero-form__legal-links a:hover,
.campaign-hero-form__legal-links a:focus-visible,
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
    color: #ffffff !important;
}

.site-footer .footer-legal-links {
    margin-top: 0.9rem !important;
}

.site-footer .legal-disclaimer {
    margin-top: 0.12rem !important;
}

/* ============================================================
   V234 — HOMEPAGE MESSAGE SECTION + RED FOOTER
   The homepage continues its red / navy rhythm after the donation
   section. Messages are stored with the theme's existing campaign
   submissions, but have their own focused, no-SMS form treatment.
   ============================================================ */
body.home .front-page .campaign-message-section {
    --campaign-message-wave: clamp(78px, 8vw, 118px);
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(2.75rem, 4vw, 4.25rem) var(--campaign-gutter) clamp(7.25rem, 9vw, 9rem) !important;
    overflow: visible !important;
    color: #ffffff !important;
    background: #16325A !important;
}

body.home .front-page .campaign-message-section::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    right: 0 !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--campaign-message-wave) !important;
    pointer-events: none !important;
    background: url("../images/about-blue-to-red-wave.svg") center bottom / 100% 100% no-repeat !important;
}

body.home .front-page .campaign-message-section__inner {
    position: relative !important;
    z-index: 4 !important;
    width: min(100%, 720px) !important;
    margin: 0 auto !important;
    text-align: center !important;
}

body.home .front-page .campaign-message-section__eyebrow {
    margin: 0 0 0.7rem !important;
    color: rgba(255, 255, 255, 0.76) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

body.home .front-page .campaign-message-section__title {
    margin: 0 0 0.95rem !important;
    color: #ffffff !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(2.5rem, 4.5vw, 4.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 0.96 !important;
    text-transform: uppercase !important;
}

body.home .front-page .campaign-message-section__body {
    max-width: 570px !important;
    margin: 0 auto 1.8rem !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: clamp(1rem, 1.3vw, 1.16rem) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

body.home .front-page .campaign-message-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
    width: min(100%, 620px) !important;
    margin: 0 auto !important;
    text-align: left !important;
}

body.home .front-page .campaign-message-form__name-fields {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
}

body.home .front-page .campaign-message-form label {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.home .front-page .campaign-message-form__email,
body.home .front-page .campaign-message-form__message,
body.home .front-page .campaign-message-form__submit,
body.home .front-page .campaign-message-form .campaign-form__status {
    grid-column: 1 / -1 !important;
}

body.home .front-page .campaign-message-form input,
body.home .front-page .campaign-message-form textarea {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 2px !important;
    outline: 0 !important;
    color: #ffffff !important;
    background: rgba(22, 50, 90, 0.30) !important;
    box-shadow: none !important;
    font: 500 1rem/1.1 "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
}

body.home .front-page .campaign-message-form input {
    min-height: 48px !important;
    padding: 0.72rem 0.9rem !important;
}

body.home .front-page .campaign-message-form textarea {
    min-height: 146px !important;
    padding: 0.72rem 0.9rem !important;
    resize: vertical !important;
    line-height: 1.45 !important;
}

body.home .front-page .campaign-message-form input::placeholder,
body.home .front-page .campaign-message-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1 !important;
}

body.home .front-page .campaign-message-form input:focus,
body.home .front-page .campaign-message-form textarea:focus {
    border: 3px solid #ffffff !important;
}

body.home .front-page .campaign-message-form__submit {
    min-height: 52px !important;
    margin-top: 0.1rem !important;
    padding: 0.75rem 1.3rem !important;
    border: 2px solid #D03330 !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    background: #D03330 !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.055em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 140ms ease, color 140ms ease, background-color 140ms ease, border-color 140ms ease !important;
}

body.home .front-page .campaign-message-form__submit:hover,
body.home .front-page .campaign-message-form__submit:focus-visible {
    border-color: #ffffff !important;
    color: #16325A !important;
    background: #ffffff !important;
    transform: translateY(-1px) !important;
}

body.home .front-page .campaign-message-form .campaign-form__status {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    margin: 0.1rem 0 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

body.home .front-page .campaign-message-form .campaign-form__status[hidden] {
    display: none !important;
}

body.home .site-footer,
body.home footer.site-footer {
    color: #ffffff !important;
    background: #D03330 !important;
    background-color: #D03330 !important;
}

body.home .site-footer .footer-navigation .wp-block-navigation-item__content,
body.home .site-footer .footer-socials .wp-social-link,
body.home .site-footer .legal-disclaimer {
    color: #ffffff !important;
}

body.home .site-footer .footer-navigation .wp-block-navigation-item__content:hover,
body.home .site-footer .footer-navigation .wp-block-navigation-item__content:focus-visible,
body.home .site-footer .footer-socials .wp-social-link:hover,
body.home .site-footer .footer-socials .wp-social-link:focus-within {
    color: #16325A !important;
}

@media (max-width: 781px) {
    body.home .front-page .campaign-message-section {
        --campaign-message-wave: clamp(58px, 14vw, 82px);
        padding: 3rem 1.2rem 7rem !important;
    }

    body.home .front-page .campaign-message-section__title {
        font-size: clamp(2.15rem, 10vw, 3.2rem) !important;
    }
}

@media (max-width: 560px) {
    body.home .front-page .campaign-message-form__name-fields {
        grid-template-columns: 1fr !important;
    }
}

/* The native button link owns the visible surface, so match the dollar buttons
   on the link itself as well as its wrapper. */
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary:hover .wp-block-button__link,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary:focus-within .wp-block-button__link,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link:hover,
body.home .front-page .campaign-section-four.campaign-donation-section .campaign-donation-section__primary .wp-block-button__link:focus-visible {
    border-color: #ffffff !important;
    color: #16325A !important;
    background: #ffffff !important;
}