/*
 * Pathway Forward — frontend styles.
 *
 * Tokens (colors, type, spacing) come from theme.json presets; this file
 * handles the classic-template chrome (header/footer), block-style variants,
 * and the handful of composed pieces native blocks can't express alone.
 */

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
	/* Clears the sticky header when it slides in during upward travel. */
	scroll-padding-top: 7rem;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 200;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
}

.skip-link:focus {
	top: 1rem;
	width: auto;
	height: auto;
	clip: auto;
}

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

.site-header {
	background: var(--wp--preset--color--cream);
	padding: 1.75rem clamp(1.25rem, 2.5vw, 2.5rem);
}

/* Scroll-linked sticky header: main.js fixes it and moves it with the
   actual scroll delta — scrolling down pushes it off pixel-for-pixel,
   scrolling up drags it back — so there is no timed hide/show animation.
   Only the surface (cream at page top vs white mid-page) transitions. */
.site-header--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	will-change: transform;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header--raised {
	background: var(--wp--preset--color--white);
	box-shadow: 0 6px 24px rgba(33, 54, 77, 0.1);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-header__logo {
	display: block;
	line-height: 0;
	flex-shrink: 0;
}

.site-header__logo img {
	width: clamp(200px, 22vw, 286px);
	height: auto;
}

.site-nav__list,
.site-footer__list {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a,
.site-footer__list a {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.55;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.site-nav__list a:hover,
.site-footer__list a:hover {
	border-bottom-color: transparent;
}

li.pf-nav-cta a {
	padding: 0.5rem 1.5rem 0.55rem;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 18.5px;
	background: var(--wp--preset--color--navy);
	line-height: 1.25;
	color: var(--wp--preset--color--cream);
}

li.pf-nav-cta a:hover {
	border-color: var(--wp--preset--color--navy);
	background: transparent;
	color: var(--wp--preset--color--navy);
}

.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 44px;
	height: 44px;
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__toggle-bar {
	display: block;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--navy);
	transition: transform 0.2s ease;
}

@media (max-width: 900px) {
	.site-header__toggle {
		display: flex;
	}

	.site-header .site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		background: var(--wp--preset--color--cream);
		padding: 1rem 1.5rem 1.5rem;
		box-shadow: 0 12px 24px rgba(33, 54, 77, 0.12);
	}

	/* Anchor the dropdown without knocking out the JS sticky header:
	   only the no-JS fallback needs relative positioning. */
	.site-header:not(.site-header--sticky) {
		position: relative;
	}

	.site-header.is-open .site-nav {
		display: block;
	}

	/* The button's first child is the screen-reader label, so the two
	   bars are matched from the end: nth-last-child(2) and last-child. */
	.site-header.is-open .site-header__toggle-bar:nth-last-child(2) {
		transform: translateY(5px) rotate(45deg);
	}

	.site-header.is-open .site-header__toggle-bar:last-child {
		transform: translateY(-5px) rotate(-45deg);
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.site-nav__list a {
		border-bottom-width: 0;
		padding-bottom: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.site-footer {
	background: var(--wp--preset--color--gold);
	/* Top padding absorbs the sky panel that overhangs into the footer,
	   keeping the comp's ~150px from footer top to the logo. */
	padding: clamp(8rem, 11vw, 9.5rem) clamp(1.25rem, 6.9vw, 6.25rem) clamp(2rem, 5vw, 4rem);
}

/* Footer content shares the sections' 1240px centered column, so the
   logo left-aligns with the sky panel above it. */
.site-footer__inner {
	max-width: 1240px;
	margin: 0 auto;
}

.site-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.site-footer__logo {
	width: clamp(280px, 40vw, 578px);
	height: auto;
}

.site-footer__list {
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

.site-footer__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-top: clamp(3rem, 8vw, 7rem);
	flex-wrap: wrap;
}

/* Arrows point up over the Back to Top button (comp node 2245:58:
   icon centered above the button, 27px apart). */
.site-footer__totop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 27px;
}

.site-footer__icon {
	width: clamp(64px, 8vw, 93px);
	height: auto;
	transform: rotate(-90deg);
}

.site-footer__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.site-footer__btn {
	display: inline-block;
	padding: 0.5rem 1.75rem 0.55rem;
	border-radius: 18.5px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	text-align: center;
}

.site-footer__btn--outline {
	border: 2px solid var(--wp--preset--color--navy);
}

.site-footer__btn--solid {
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
}

.site-footer__btn:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
}

/* Newsletter row (comp node 2272:59): white signup card on the left, the
   footer nav top-aligned with it on the right. */
.site-footer__mid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: clamp(3rem, 6vw, 5.5rem);
}

.site-footer__signup {
	flex: 0 1 715px;
	background: var(--wp--preset--color--white);
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4.7vw, 4.25rem) clamp(2.25rem, 4.5vw, 3.75rem);
}

.site-footer__signup-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.site-footer__signup-sub {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
}

/* Lay the Gravity Forms email field and Submit out on one pill row. */
.site-footer__signup .gform_wrapper {
	margin-top: 2.875rem;
}

.site-footer__signup form {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.site-footer__signup .gform-body {
	flex: 1 1 260px;
}

.site-footer__signup .gform_fields {
	display: block;
}

.site-footer__signup .gfield_label {
	display: none;
}

.site-footer__signup input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 37px;
	padding: 0 1.25rem;
	background: #eaeaea;
	border: 0;
	border-radius: 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--navy);
}

.site-footer__signup input[type="email"]::placeholder {
	color: var(--wp--preset--color--navy);
	opacity: 1;
}

.site-footer__signup .gform_footer {
	margin: 0;
	padding: 0;
}

.site-footer__signup .gform_footer input[type="submit"],
.site-footer__signup .gform_footer button {
	height: 37px;
	padding: 0 2.25rem;
	background: transparent;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.site-footer__signup .gform_footer input[type="submit"]:hover,
.site-footer__signup .gform_footer button:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
}

.site-footer__signup .gform_validation_errors {
	margin-bottom: 1rem;
}

.site-footer__signup .gform_confirmation_wrapper {
	margin-top: 2.875rem;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------------------ */
/* Stay Informed modal (comp node 2266:171)                            */
/* ------------------------------------------------------------------ */

.pf-modal-open {
	overflow: hidden;
}

.pf-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	/* Faded out until JS adds is-open; the card drifts up as it fades in. */
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* display:flex above would otherwise defeat the hidden attribute. */
.pf-modal[hidden] {
	display: none;
}

.pf-modal .pf-modal__card {
	transform: translateY(20px);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-modal.is-open {
	opacity: 1;
}

.pf-modal.is-open .pf-modal__card {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.pf-modal,
	.pf-modal .pf-modal__card {
		transition: none;
	}
}

.pf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(33, 54, 77, 0.5);
}

.pf-modal__card {
	position: relative;
	width: min(488px, 100%);
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	background: var(--wp--preset--color--gold);
	padding: clamp(5rem, 16vw, 9.5rem) clamp(1.75rem, 4.3vw, 3.875rem) clamp(3.5rem, 12vw, 7rem);
	color: var(--wp--preset--color--navy);
}

.pf-modal__close {
	position: absolute;
	top: 22px;
	right: 22px;
	padding: 0.5rem;
	background: none;
	border: 0;
	line-height: 0;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.pf-modal__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1;
}

.pf-modal__sub {
	margin: 1.5rem 0 0;
	max-width: 20ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

/* Stacked pills: full-width white email field, Submit beneath it. */
.pf-modal .gform_wrapper {
	margin-top: 4rem;
}

.pf-modal .gfield_label {
	display: none;
}

.pf-modal input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 39px;
	padding: 0 1.25rem;
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--navy);
}

.pf-modal input[type="email"]::placeholder {
	color: var(--wp--preset--color--navy);
	opacity: 1;
}

.pf-modal .gform_footer {
	margin: 1.625rem 0 0;
	padding: 0;
}

.pf-modal .gform_footer input[type="submit"],
.pf-modal .gform_footer button {
	height: 39px;
	padding: 0 2.25rem;
	background: transparent;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.pf-modal .gform_footer input[type="submit"]:hover,
.pf-modal .gform_footer button:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
}

.pf-modal .gform_validation_errors {
	margin-bottom: 1rem;
}

.pf-modal .gform_confirmation_wrapper {
	margin-top: 4rem;
	font-size: var(--wp--preset--font-size--lead);
}

/* ------------------------------------------------------------------ */
/* Buttons / block-style variants                                      */
/* ------------------------------------------------------------------ */

.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Solid white pill — used on gold/sky panels where outline reads weak. */
.is-style-pill-solid .wp-block-button__link {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

.is-style-pill-solid .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

/* Label chip ("Why Now?", "The Partnership", …). Background color is set
   per-instance from the palette in the editor. */
p.is-style-badge {
	display: inline-block;
	padding: 0.25rem 1.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.55;
}

/* White content card. */
.is-style-card {
	background: var(--wp--preset--color--white);
	position: relative;
}

/* Cards inside a stretched column fill it, and their button row pins to
   the bottom so all cards in a row share one baseline (per the comp). */
.wp-block-column > .is-style-card {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* In the flex-column card, the constrained-layout auto margins would
   center-shrink every child (core sets them with !important, so this
   must match); pin children back to full width. aligncenter images keep
   their centering. */
.wp-block-column > .is-style-card > :not(.aligncenter) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wp-block-column > .is-style-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Pathway step slider                                                 */
/* ------------------------------------------------------------------ */

/* Without JS the slides simply stack; main.js adds .pf-slider--ready
   and drives the active card. Per the comp (node 2245:50): X ornament
   flush to the card's top-right corner, body copy pinned to the card
   bottom. The -2.1px offsets cancel the transparent margin baked into
   the PNG export (8px on a 600px canvas, at 158px wide). */
.pf-slide {
	position: relative;
}

.pf-slide__body {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.pf-slide__body > p:last-child {
	margin-top: auto;
}

.pf-slide__icon {
	position: absolute;
	top: -2.1px;
	right: -2.1px;
	margin: 0;
}

@media (min-width: 782px) {
	.pf-slide {
		min-height: 567px;
	}
}

/* Slides are stacked in a single grid cell rather than shown one at a
   time with display:none. Hiding collapses the slider to whichever slide
   is active, so the card resizes as you page through -- with the copy
   varying by org, that is a visible jump. Stacking sizes the slider to
   its tallest slide once, and every card then shares that height, which
   also lines the shelter blocks up across slides.

   visibility:hidden (not display:none) keeps the inactive slides
   contributing height while still taking them out of the tab order and
   the accessibility tree.

   Core's layout rules also give the first child margin-block-start:0 and
   every later sibling 24px, which used to drag a 24px offset in behind
   slides 2+. Zero it -- the :where() core uses carries no specificity. */
.pf-slider--ready {
	display: grid;
}

.pf-slider--ready .pf-slide {
	grid-area: 1 / 1;
	display: flex;
	visibility: hidden;
	margin-block-start: 0;
}

.pf-slider--ready .pf-slide.is-active {
	visibility: visible;
	animation: pf-slide-in 0.35s ease;
}

@keyframes pf-slide-in {
	from {
		opacity: 0;
		transform: translateX(1rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-slider--ready .pf-slide.is-active {
		animation: none;
	}
}

/* The pathway cards run body-beside-ornament, which is why an active
   slide is display:flex at all. The partnership cards instead stack
   logo / title / copy / byline, so they flip the axis. */
.pf-slider--partners .pf-slide {
	flex-direction: column;
}

.pf-slide__logo {
	margin-top: 0;
}

/* "Services" / "Shelter" labels sit tight to the copy they introduce.
   Core's flow layout would otherwise put a full 24px between them, which
   leaves each label floating midway between two blocks instead of
   reading as a heading for the paragraph beneath it. */
.pf-slide__label {
	margin-bottom: 0;
}

.pf-slide__label + p {
	margin-block-start: 0.4rem;
}

/* The shelter block is pinned to the card foot with a rule above it, so
   all three slides align and the card height does not jump between them.
   The auto margin on the label carries its copy down with it, and needs
   the flex context above -- without JS the block simply follows the copy. */
.pf-slide__label--shelter {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--navy);
}

/* On the tallest slide there is no free space left, so the auto margin
   above resolves to 0 and the rule lands hard against the services copy.
   This keeps clearance there regardless of how long the copy runs. */
.pf-slide__services {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Prev/next arrows straddle the card's left and right edges, half on and
   half off, centred on the card. The nav is absolutely positioned so the
   empty container adds no height of its own, and lets clicks through
   everywhere except the buttons themselves. */
.pf-slider {
	position: relative;
}

/* inset:0 alone is not enough: core's flow layout puts a 24px
   margin-block-start on the nav, and margins still shift an absolutely
   positioned box away from its inset, dropping the arrows below centre. */
.pf-slider__nav {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
}

.pf-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
	cursor: pointer;
	pointer-events: auto;
}

.pf-slider__arrow--prev {
	left: -20px;
}

.pf-slider__arrow--next {
	right: -20px;
}

/* Two solid triangles put the chevron's mass about 8% left of its own
   bounding box, so centring it by geometry reads as off-centre. Nudge it
   toward the apex by that 8% (1.4px at 17.5px). On --prev the mirror is
   applied after the nudge, so the same positive value shifts it left. */
.pf-slider__arrow svg {
	display: block;
	width: 17.5px;
	height: 17.5px;
	fill: currentColor;
	transform: translateX(1.4px);
}

.pf-slider__arrow--prev svg {
	transform: scaleX(-1) translateX(1.4px);
}

.pf-slider__arrow:hover {
	background: var(--wp--preset--color--green);
}

/* The pathway section sits on green, so a green hover bleeds into the
   background. Light blue is the furthest palette colour from it. */
.pf-slider--pathway .pf-slider__arrow:hover {
	background: var(--wp--preset--color--light-blue);
}

.pf-slider__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* Dots: 10px circles, 45px center-to-center per the comp. Filled navy
   when active, white otherwise. Hidden until JS builds the buttons. */
.pf-slider-dots {
	display: flex;
	gap: 35px;
}

.pf-slider-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.pf-slider-dots button[aria-current="true"] {
	background: var(--wp--preset--color--navy);
}

.pf-slider-dots button:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Funding progress bars                                               */
/* ------------------------------------------------------------------ */

.pf-progress {
	height: 31px;
	background: var(--wp--preset--color--cream);
	overflow: hidden;
}

/* main.js holds each fill collapsed (.pf-progress--pending) until the
   bar scrolls into view; dropping the class sweeps it out to its inline
   width. scaleX rather than width so the inline style stays untouched.
   Without JS the class never exists and bars render full. */
.pf-progress__fill {
	height: 100%;
	transform-origin: left;
	transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.35, 1);
}

.pf-progress--pending .pf-progress__fill {
	transform: scaleX(0);
}

.pf-progress__fill--green {
	background: var(--wp--preset--color--green);
}

.pf-progress__fill--sage {
	background: var(--wp--preset--color--sage);
}

.pf-progress__fill--light-blue {
	background: var(--wp--preset--color--light-blue);
}

/* Raised-amount line: colored figure + smaller "of $X goal". */
.pf-progress-amount {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	font-weight: 700;
}

.pf-progress-amount__raised {
	font-size: 1.5rem;
}

.pf-progress-amount__goal {
	font-size: 1rem;
}

/* ------------------------------------------------------------------ */
/* Section helpers                                                     */
/* ------------------------------------------------------------------ */

/* Top-level sections are alignfull groups; give them the 100px gutters
   from the comp (collapsing on small screens). Constrained layout centers
   inner content at contentSize. */
.site-main > .wp-block-group.alignfull {
	padding-left: clamp(1.25rem, 6.9vw, 6.25rem);
	padding-right: clamp(1.25rem, 6.9vw, 6.25rem);
}

/* Visual crops from the comp — CSS aspect-ratio, uncropped sources. */
.pf-crop img {
	width: 100%;
	object-fit: cover;
}

.pf-crop--portrait img {
	aspect-ratio: 400 / 581;
}

.pf-crop--card img {
	aspect-ratio: 400 / 478;
}

.pf-crop--partner img {
	aspect-ratio: 471 / 391;
}

.pf-crop--feature img {
	aspect-ratio: 694 / 409;
}

.pf-crop--banner img {
	aspect-ratio: 1240 / 441;
	/* Comp crops the kitchen photo near the top of the frame, not center. */
	object-position: center 9%;
}

/* Short rules between the partner logos in the intro card. The element
   selector outranks the generic `.wp-block-separator { width: 100% }`. */
hr.pf-logo-rule {
	width: 158px;
	flex-shrink: 1;
	margin: 0;
}

/* Support panel: uniform pill widths per the comp. */
.pf-button-stack .wp-block-button__link {
	min-width: 190px;
	box-sizing: border-box;
}

/* Intro card: stacked pills centered in their column, equal width. */
.pf-button-stack--equal {
	align-items: center;
}

.pf-button-stack--equal .wp-block-button {
	width: 13.875rem;
}

.pf-button-stack--equal .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* Gold CTA panel hangs ~70px into the terracotta section below it (its
   parent section has no bottom padding to allow this). Doubled class beats
   the core layout-support `> * { margin-block-end: 0 }` rule, which is
   printed after this sheet and would otherwise cancel the pull. */
.wp-block-group.pf-overhang.pf-overhang {
	position: relative;
	z-index: 1;
	margin-block-end: -4.5rem;
}

/* Icons sitting in flex rows keep their size; the text flexes instead. */
.wp-block-group.is-layout-flex > .wp-block-image {
	flex-shrink: 0;
}

/* Browser-default heading/paragraph top margins leak through on the
   first child of flow containers (core only zeroes subsequent gaps);
   without this, an h2 opening a group sits ~0.8em too low. */
.is-layout-flow > :first-child,
.is-layout-constrained > :first-child {
	margin-block-start: 0;
}

/* Decorative images: hide from small screens where they crowd content. */
@media (max-width: 781px) {
	.pf-decorative {
		display: none;
	}
}

/* Hero rule + partner line: separator rendered as a solid navy line. */
.wp-block-separator {
	border: 0;
	border-top: 2px solid var(--wp--preset--color--navy);
	width: 100%;
}

/* Quote section icon collage (comp node 2245:57): six icons per side,
   vertically centered, columns aligned to the 1240px content wrapper
   (same edges as "The Pathway" badge and the slider card's X). */
.pf-quote {
	position: relative;
}

.pf-quote .pf-quote__icons {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Core's block-gap margin on `* + *` children would shift the second
	   (right) rail 24px below the first; keep both rails margin-free. */
	margin-block: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: clamp(56px, 6vw, 85px);
}

.pf-quote .pf-quote__icons img {
	display: block;
	width: 100%;
}

.pf-quote .pf-quote__icons--left {
	left: max(var(--wp--style--root--padding-left, 2rem), calc(50% - 620px));
}

.pf-quote .pf-quote__icons--right {
	right: max(var(--wp--style--root--padding-right, 2rem), calc(50% - 620px));
}

/* Text column stays between the icon rails (quote 865px, kicker ~500px
   in the comp). */
.pf-quote .wp-block-heading {
	max-width: 865px;
	margin-top: 4.5rem;
	margin-bottom: 4.5rem;
}

.pf-quote > p:first-of-type {
	max-width: 560px;
}

@media (max-width: 900px) {
	.pf-quote .pf-quote__icons {
		display: none;
	}
}

/* Roadmap phase tabs: rows toggle the panel on the right (main.js). */
.pf-phase--inactive {
	opacity: 0.2;
}

.pf-phase {
	display: flex;
	align-items: center;
	gap: 2rem;
	transition: opacity 0.2s ease;
}

.pf-phases--ready .pf-phase {
	cursor: pointer;
}

.pf-phases--ready .pf-phase--inactive:hover {
	opacity: 0.5;
}

.pf-phases--ready .pf-phase:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 4px;
}

.pf-phase__icon {
	width: 54px;
	flex-shrink: 0;
}

/* Panels: all stacked without JS; one at a time once tabs are wired. */
.pf-phase-panels--ready .pf-phase-panel {
	display: none;
}

.pf-phase-panels--ready .pf-phase-panel.is-active {
	display: block;
	animation: pf-slide-in 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.pf-phase-panels--ready .pf-phase-panel.is-active {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Scroll fade-ins                                                     */
/* ------------------------------------------------------------------ */

/* main.js tags section-level blocks with .pf-fade and reveals them via
   .is-inview as they scroll into view. Without JS (or with reduced
   motion) nothing is ever tagged, so all content stays visible. */
.pf-fade {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.pf-fade.is-inview {
	opacity: 1;
	transform: none;
}