/* =============================================================
   Estancia Tanamá — main stylesheet
   ============================================================= */

:root {
	/* Brand palette */
	--c-navy: #242c38;
	--c-navy-soft: #2d371b;
	--c-cyan: #19c7f7;
	--c-lime: #cbe896;
	--c-blue: #2e86cd;
	--c-purple: #8d85c3;
	--c-cream: #fff7f1;
	--c-orange: #ff7f12;
	--c-grey-100: #f5f5f5;
	--c-grey-300: #d9d9d9;
	--c-grey-500: #b0b0b0;
	--c-grey-700: #797979;
	--c-white: #ffffff;
	--c-black: #000000;
	--c-error: #c0392b;

	/* Type */
	--font-sans: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-script: 'Caveat', 'Quicksand', cursive;

	/* Layout */
	--container-max: 1280px;
	--container-pad: clamp(20px, 4vw, 50px);
	--radius-sm: 5px;
	--radius-md: 15px;
	--radius-lg: 20px;

	/* Shadows */
	--shadow-text: 0 4px 4px var(--c-navy-soft);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 400;
	color: var(--c-navy);
	background: var(--c-white);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0 0 1em; }

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.eyebrow {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.84px;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--c-navy);
}
.eyebrow--light { color: var(--c-white); }
.eyebrow--with-icon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.eyebrow__icon { width: 18px; height: auto; display: block; transform-origin: center bottom; }
/* Eyebrow paw "presses" in when its eyebrow scrolls into view (main.js adds
   .is-visible) — drops from above, squashes on impact, settles. */
.eyebrow--with-icon:not(.is-visible) .eyebrow__icon { opacity: 0; }
.eyebrow--with-icon.is-visible .eyebrow__icon {
	animation: eyebrow-paw-stamp 0.6s cubic-bezier(0.34, 1.45, 0.5, 1) both;
}
@keyframes eyebrow-paw-stamp {
	0%   { opacity: 0; transform: translateY(-13px) scale(1.55); }
	55%  { opacity: 1; transform: translateY(2px)   scale(0.82); }
	100% { opacity: 1; transform: translateY(0)     scale(1); }
}
/* Eyebrow text fades + rises in just after the paw lands. */
.eyebrow--with-icon span {
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.eyebrow--with-icon:not(.is-visible) span { opacity: 0; transform: translateY(8px); }
.eyebrow--with-icon.is-visible span { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
	.eyebrow--with-icon .eyebrow__icon { opacity: 1 !important; animation: none !important; }
	.eyebrow--with-icon span { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Homepage scroll-reveal: section headings + body text fade/rise in as they
   enter the viewport (main.js toggles .is-visible). Gated on `.js` so the text
   is always visible without JavaScript. */
html.js :is(
	.who .section-title, .who__body,
	.split__title, .split__body,
	.sanctuary__title, .sanctuary__body,
	.stories .section-title, .stories__intro,
	.about-belief__title, .about-belief__body,
	.about-cta__title, .about-cta__body,
	.crisis-moment__title, .crisis-moment__body,
	.mission-help__title, .mission-help__body,
	.mission-quote__text, .mission-quote__cite,
	.mission-statement__title, .mission-statement__body,
	.mission-vision__title, .mission-vision__body,
	.mission-sanctuary__title, .mission-sanctuary__text,
	.mission-tools__title, .mission-tool__title, .mission-tool__body,
	.hearts-intro__title, .hearts-intro__body,
	.hearts-founder__role, .hearts-founder__name, .hearts-founder__bio,
	.hearts-team__title, .hearts-team__lede,
	.donate-support__heading, .donate-support__body,
	.donate-timeline__heading,
	.donate-progress__eyebrow, .donate-progress__breakdown-heading,
	.donate-be-part__heading, .donate-be-part__body,
	.vol-work__heading, .vol-work__body,
	.vol-roles__heading, .vol-roles__intro,
	.vol-join__heading, .vol-join__body,
	.foster-intro__heading, .foster-intro__body,
	.foster-steps__heading, .foster-steps__intro,
	.foster-join__heading, .foster-join__body,
	.newsletter__title, .newsletter__body
) {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
html.js :is(
	.who .section-title, .who__body,
	.split__title, .split__body,
	.sanctuary__title, .sanctuary__body,
	.stories .section-title, .stories__intro,
	.about-belief__title, .about-belief__body,
	.about-cta__title, .about-cta__body,
	.crisis-moment__title, .crisis-moment__body,
	.mission-help__title, .mission-help__body,
	.mission-quote__text, .mission-quote__cite,
	.mission-statement__title, .mission-statement__body,
	.mission-vision__title, .mission-vision__body,
	.mission-sanctuary__title, .mission-sanctuary__text,
	.mission-tools__title, .mission-tool__title, .mission-tool__body,
	.hearts-intro__title, .hearts-intro__body,
	.hearts-founder__role, .hearts-founder__name, .hearts-founder__bio,
	.hearts-team__title, .hearts-team__lede,
	.donate-support__heading, .donate-support__body,
	.donate-timeline__heading,
	.donate-progress__eyebrow, .donate-progress__breakdown-heading,
	.donate-be-part__heading, .donate-be-part__body,
	.vol-work__heading, .vol-work__body,
	.vol-roles__heading, .vol-roles__intro,
	.vol-join__heading, .vol-join__body,
	.foster-intro__heading, .foster-intro__body,
	.foster-steps__heading, .foster-steps__intro,
	.foster-join__heading, .foster-join__body,
	.newsletter__title, .newsletter__body
).is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js :is(
		.who .section-title, .who__body,
		.split__title, .split__body,
		.sanctuary__title, .sanctuary__body,
		.stories .section-title, .stories__intro,
		.about-belief__title, .about-belief__body,
		.about-cta__title, .about-cta__body,
		.crisis-moment__title, .crisis-moment__body,
		.mission-help__title, .mission-help__body,
		.mission-quote__text, .mission-quote__cite,
		.mission-statement__title, .mission-statement__body,
		.mission-vision__title, .mission-vision__body,
		.mission-sanctuary__title, .mission-sanctuary__text,
		.mission-tools__title, .mission-tool__title, .mission-tool__body,
		.hearts-intro__title, .hearts-intro__body,
		.hearts-founder__role, .hearts-founder__name, .hearts-founder__bio,
		.hearts-team__title, .hearts-team__lede,
		.donate-support__heading, .donate-support__body,
		.donate-timeline__heading,
		.donate-progress__eyebrow, .donate-progress__breakdown-heading,
		.donate-be-part__heading, .donate-be-part__body,
		.vol-work__heading, .vol-work__body,
		.vol-roles__heading, .vol-roles__intro,
		.vol-join__heading, .vol-join__body,
		.foster-intro__heading, .foster-intro__body,
		.foster-steps__heading, .foster-steps__intro,
		.foster-join__heading, .foster-join__body,
		.newsletter__title, .newsletter__body
	) { opacity: 1; transform: none; transition: none; }
}

.section-title {
	font-size: clamp(28px, 4vw, 35px);
	letter-spacing: 2.45px;
	font-weight: 500;
	margin: 0 0 16px;
}
.section-title__medium { font-weight: 500; }
.section-title__bold { font-weight: 700; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--c-navy);
	color: #fff;
	padding: 12px 16px;
	border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* =============================================================
   Buttons
   ============================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.98px;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); opacity: 0.92; }
/* Allow long labels (e.g. Spanish CTAs) to wrap on small screens instead of
   overflowing their container. */
@media (max-width: 480px) {
	.btn { white-space: normal; text-align: center; }
}
.btn:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.btn--outline-light:focus-visible { outline-color: var(--c-white); }

/* Primary (filled) + secondary (outline/ghost/white) buttons — hover lifts with
   a small bounce + a drop shadow underneath, so the button reads as floating.
   The overshoot easing gives the subtle "bounce" on the way up. Secondary
   buttons keep their existing colour-change hover on top of this. */
.btn--cyan,
.btn--purple,
.btn--orange,
.btn--navy,
.btn--outline-dark,
.btn--outline-light,
.btn--ghost-bordered,
.btn--white {
	transition: transform 0.28s cubic-bezier(0.34, 1.6, 0.5, 1),
	            box-shadow 0.28s ease, background 0.15s ease, color 0.15s ease,
	            border-color 0.15s ease;
}
.btn--cyan:hover,
.btn--purple:hover,
.btn--orange:hover,
.btn--navy:hover,
.btn--outline-dark:hover,
.btn--outline-light:hover,
.btn--ghost-bordered:hover,
.btn--white:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px -6px rgba(36, 44, 56, 0.45);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.btn--cyan:hover,
	.btn--purple:hover,
	.btn--orange:hover,
	.btn--navy:hover,
	.btn--outline-dark:hover,
	.btn--outline-light:hover,
	.btn--ghost-bordered:hover,
	.btn--white:hover {
		transform: none;
	}
}

.btn--cyan { background: var(--c-cyan); color: var(--c-white); }
.btn--purple { background: var(--c-purple); color: var(--c-white); border-color: var(--c-purple); }
.btn--white { background: var(--c-white); }
.btn--blue-text { color: var(--c-blue); }
.btn--purple-text { color: var(--c-purple); }
.btn--outline-dark { background: transparent; border-color: var(--c-navy); color: var(--c-navy); font-weight: 600; }
.btn--outline-dark:hover { background: var(--c-navy); color: var(--c-white); opacity: 1; }
.btn--outline-light { background: transparent; border-color: var(--c-white); color: var(--c-white); font-weight: 600; }
.btn--outline-light:hover { background: var(--c-white); color: var(--c-navy); opacity: 1; }
.btn--ghost-bordered {
	background: transparent;
	border: 1px solid currentColor;
	font-size: 11.4px;
	padding: 6px 9px;
	border-radius: 4px;
}
.story-card--blue .btn--ghost-bordered:hover { background: var(--c-white); color: var(--c-blue); border-color: var(--c-white); opacity: 1; }
.story-card--lime .btn--ghost-bordered:hover { background: var(--c-navy); color: var(--c-lime); border-color: var(--c-navy); opacity: 1; }

/* =============================================================
   Site header
   ============================================================= */
.site-header {
	position: relative;
	z-index: 10;
	padding: clamp(12px, 1.4vw, 22px) clamp(16px, 2vw, 30px);
	/* Same navy texture as the heroes so the pattern carries all the way up to
	   the top of the screen instead of starting below the nav. */
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

.site-header__inner {
	position: relative;
	max-width: var(--container-max);
	margin-inline: auto;
	background: var(--c-white);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 13px 32px 13px 32px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c-navy);
}
.site-brand__mark { width: 48px; height: auto; }
.site-brand__lockup { width: 152px; height: auto; display: block; }
.site-brand--footer .site-brand__lockup { width: 168px; }
.site-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand__name {
	font-weight: 500;
	font-size: 15.23px;
	letter-spacing: 1.07px;
}
.site-brand__tagline {
	font-weight: 400;
	font-size: 9.27px;
	letter-spacing: 0.65px;
	margin-left: 28px;
}

.site-nav {
	display: flex;
	align-items: flex-end;
	gap: 30px;
	margin-right: 0;
	margin-left: auto;
}
.site-nav .btn--donate {
	margin-bottom: -8px;
	margin-left: clamp(24px, 3vw, 50px);
}

.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-end;
	gap: clamp(32px, 4vw, 72px);
}
/* Spanish nav labels are noticeably longer — tighten the gap and tracking so the
   row stays on one line further down before it wraps. English keeps its airy
   spacing. */
.et-lang-es .nav-menu { gap: clamp(20px, 2.6vw, 52px); }
.et-lang-es .nav-menu a { letter-spacing: 0.4px; }
.nav-menu a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	letter-spacing: 0.98px;
	font-weight: 400;
	color: var(--c-navy);
	text-decoration: none;
}
.nav-menu .menu-item.is-current > a,
.nav-menu .menu-item.current-menu-item > a,
.nav-menu .menu-item.current-menu-ancestor > a,
.nav-menu .menu-item.current-menu-parent > a { font-weight: 600; }
.nav-menu .menu-icon {
	display: block;
	height: 28px;
	width: 28px;
	overflow: hidden;
}
.nav-menu .menu-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: translateY(32px);
	opacity: 0;
	transition: transform 220ms ease, opacity 220ms ease;
}
.nav-menu .menu-item:hover .menu-icon img,
.nav-menu .menu-item:focus-within .menu-icon img,
.nav-menu .menu-item.is-current .menu-icon img,
.nav-menu .menu-item.current-menu-item .menu-icon img,
.nav-menu .menu-item.current-menu-ancestor .menu-icon img,
.nav-menu .menu-item.current-menu-parent .menu-icon img {
	transform: translateY(0);
	opacity: 1;
}
.nav-menu .menu-label {
	display: inline-block;
	text-align: center;
	line-height: 1.25;
}
.nav-menu .menu-caret {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	color: currentColor;
}
/* Bold on hover. The nav is horizontal, so a real font-weight change would
   widen the item and shove its neighbours; text-stroke thickens the glyphs in
   place (no reflow, no jitter) and plays nice with the dropdown carets. */
.nav-menu a:hover .menu-label,
.nav-menu a:focus-visible .menu-label {
	opacity: 1;
	-webkit-text-stroke: 0.5px currentColor;
}

.nav-menu .menu-item { position: relative; }
/* Keep the dropdown label + its caret on one line so the caret never drops
   below the label (which threw off the row alignment in Spanish). */
.nav-menu .menu-item-has-children > a .menu-label { white-space: nowrap; }
.nav-menu .menu-item-has-children > a .menu-label::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}
.nav-menu .sub-menu .menu-label::after { display: none; }
.nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 220px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background: var(--c-white);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(36, 44, 56, 0.14);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease;
	z-index: 50;
}
.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.nav-menu .sub-menu li { padding: 0; }
.nav-menu .sub-menu a {
	display: block;
	flex-direction: row;
	padding: 8px 22px;
	font-size: 14px;
	letter-spacing: 0.98px;
	white-space: nowrap;
	color: var(--c-navy);
}
.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:focus-visible { background: var(--c-grey-100); font-weight: 700; }

.btn--donate { padding: 8px 22px; font-size: 14px; }
.btn--orange { background: var(--c-orange); color: var(--c-white); border-color: var(--c-orange); font-weight: 700; }

.lang-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--c-cream);
	border-radius: 0 15px 0 5px;
	width: 159px;
	height: 41px;
	padding: 0 14px;
}
.lang-toggle__switch {
	position: relative;
	flex-shrink: 0;
	width: 54px;
	height: 25px;
	background: var(--c-lime);
	border: 1px solid var(--c-navy);
	border-radius: 18px;
	margin: 0 6px;
	padding: 0;
	cursor: pointer;
}
.lang-toggle__switch:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 3px;
}
.lang-toggle__knob {
	position: absolute;
	top: 50%;
	left: 2px;
	width: 21px;
	height: 21px;
	background: var(--c-navy);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: left 200ms ease;
}
.lang-toggle.is-es .lang-toggle__knob { left: calc(100% - 23px); }
.lang-toggle__option {
	background: transparent;
	border: 0;
	color: var(--c-navy);
	font-size: 16px;
	letter-spacing: 1.14px;
	font-weight: 500;
	padding: 0;
	cursor: pointer;
	line-height: 1;
}
.lang-toggle__option.is-active { font-weight: 700; }

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: 0;
	padding: 8px;
}
.nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--c-navy);
}
/* Drawer close button + backdrop: hidden on desktop, shown only in the mobile
   drawer (see the max-width: 1024px block). */
.site-nav__close,
.site-nav__backdrop,
.submenu-toggle { display: none; }
body.nav-open { overflow: hidden; }

@media (max-width: 1100px) {
	.nav-menu { gap: 22px; }
	.nav-menu a { font-size: 14px; }
	.site-nav { gap: 18px; }
}

@media (max-width: 1024px) {
	.nav-toggle { display: inline-flex; order: 3; }
	.site-header__inner { padding: 12px 16px; gap: 12px; justify-content: flex-start; }
	/* Take the lang pill out of the top-right corner so it no longer overlaps
	   the hamburger; sit it in-flow just left of the toggle. */
	.lang-toggle {
		position: static;
		order: 2;
		margin-left: auto;
		width: auto;
		height: 38px;
		border-radius: 999px;
	}
	/* Mobile nav = drawer sliding in from the right. */
	.site-nav {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		background: var(--c-white);
		border-radius: 0;
		padding: 76px 26px 32px;
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		overflow-y: auto;
		box-shadow: -14px 0 34px rgba(0, 0, 0, 0.18);
		transform: translateX(100%);
		transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 60;
	}
	.site-nav.is-open { transform: translateX(0); }
	.site-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 14px;
		right: 14px;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		background: transparent;
		font-size: 30px;
		line-height: 1;
		color: var(--c-navy);
		cursor: pointer;
	}
	/* Dim overlay behind the drawer; tap to close (handled in main.js). */
	.site-nav__backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 50;
	}
	body.nav-open .site-nav__backdrop {
		display: block;
		opacity: 1;
		visibility: visible;
	}
	.nav-menu { flex-direction: column; align-items: stretch; gap: 12px; }
	.nav-menu li { padding: 6px 0; border-bottom: 1px solid var(--c-grey-100); }

	/* Show the item icons in the drawer, laid out as icon + label in a row
	   (the desktop hover-reveal never fires on touch, so force them visible). */
	.nav-menu > .menu-item > a {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 12px;
	}
	.nav-menu .menu-icon { flex: none; }
	.nav-menu .menu-icon img { opacity: 1; transform: none; }

	/* Donate button: full width + centered in the drawer. Resets the desktop
	   margin-left that was shifting it to the right. */
	.site-nav .btn--donate {
		align-self: stretch;
		width: auto;
		margin: 14px 0 0;
		justify-content: center;
		text-align: center;
	}

	/* Dropdown parents: label stays a link (visits the page); a caret button on
	   the far right expands/collapses the inline submenu. */
	.nav-menu > .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.nav-menu > .menu-item-has-children > a { flex: 1 1 auto; min-width: 0; }
	/* The inline ::after caret is replaced by the button caret on mobile. */
	.nav-menu .menu-item-has-children > a .menu-label::after { display: none; }
	.submenu-toggle {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 48px;
		align-self: stretch;
		min-height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--c-navy);
		cursor: pointer;
	}
	.submenu-toggle__caret {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid currentColor;
		transition: transform 0.25s ease;
	}
	.menu-item-has-children.is-expanded > .submenu-toggle .submenu-toggle__caret {
		transform: rotate(180deg);
	}
	/* Submenu drops to its own full-width row below the label + caret. */
	.nav-menu > .menu-item-has-children > .sub-menu { flex-basis: 100%; }
	.nav-menu .sub-menu {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		min-width: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
	}
	/* Neutralise the desktop hover/focus reveal on touch — critically resetting
	   its translateX(-50%), which otherwise shoves the open submenu off-screen
	   (so it looked empty). Only .is-expanded reveals it on mobile. */
	.nav-menu .menu-item-has-children:hover > .sub-menu,
	.nav-menu .menu-item-has-children:focus-within > .sub-menu {
		transform: none;
	}
	/* Height is animated to the exact content height via JS (main.js) for a
	   smooth open/close — no fixed max-height "dead time". */
	.nav-menu .menu-item-has-children.is-expanded > .sub-menu,
	.nav-menu .menu-item-has-children.is-expanded:hover > .sub-menu,
	.nav-menu .menu-item-has-children.is-expanded:focus-within > .sub-menu {
		transform: none;
	}
	.nav-menu .menu-item-has-children.is-expanded > .sub-menu { padding: 8px 0 12px; }
	.nav-menu .sub-menu li { padding: 0; border-bottom: 0; }
	.nav-menu .sub-menu li + li { margin-top: 6px; }
	.nav-menu .sub-menu a { padding: 14px 0 14px 20px; }
}

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

/* On phones the white header box spans full width (no navy inset above/left/
   right), and the EN/ES toggle drops beneath it, flush right, on the navy.
   main.js relocates the toggle out of the white box for this layout. */
@media (max-width: 768px) {
	.site-header {
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	.site-header__inner {
		max-width: none;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.nav-toggle { margin-left: auto; }
	.lang-toggle {
		align-self: flex-end;
		/* Flush to the right edge and up against the nav box (no navy gap);
		   square except a 10px rounded bottom-left. */
		margin: 0 0 12px;
		border-radius: 0 0 0 10px;
	}
}

/* =============================================================
   1. HERO
   ============================================================= */
.hero {
	position: relative;
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	overflow: hidden;
	padding: clamp(10px, 2vw, 24px) 0 clamp(20px, 3vw, 40px);
}
.hero__bg { display: none; }

/* Hero decorative SVGs */
.hero__deco {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	display: block;
}
/* Inline trail SVG — JS animates its mask to reveal dashes along the path.
   Base rule only; each hero positions/sizes the SVG via its own trail class
   (e.g. .about-hero__trail). Homepage specifics live under `.hero .hero-flight`. */
.hero-flight {
	position: absolute;
	height: auto;
	pointer-events: none;
	overflow: visible;
}
.hero .hero-flight {
	top: 22%;
	left: 16%;
	width: 68%;
	aspect-ratio: 706 / 378;
	z-index: 2;
}
/* A butterfly that flies a hero-flight path is driven entirely by JS transforms,
   so neutralise any perched offsets from its per-hero class (keep the size). */
.et-butterfly.hero-flight__butterfly {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	z-index: 5;
}
/* The flight SVG must keep its own viewBox aspect ratio. If a trail wrapper
   stretched/letterboxed it, the path would no longer fill the SVG box and the
   JS-positioned butterfly would drift off the visible trail. */
svg.hero-flight {
	height: auto;
}
/* =============================================================
   Butterfly — fluttering wings
   Technique adapted from jaron.nl/articles/animate-butterfly.
   The illustration (butterfly.svg) is drawn twice and clipped into a
   left and a right half. With perspective on the container, each half
   rotates about the central body axis (50%) to flap up and down in 3D.
   Page-specific classes (.hero-butterfly, .about-hero__butterfly, …)
   handle position + size on the .et-butterfly container.
   ============================================================= */
.et-butterfly {
	position: relative;
	display: inline-block;
	aspect-ratio: 104 / 76; /* matches butterfly.svg viewBox */
	perspective: 240px;
	pointer-events: none;
}
.et-butterfly__wing {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	transform-origin: 50% 50%; /* the body seam between the wings */
	backface-visibility: hidden;
	will-change: transform;
}
.et-butterfly__wing--left {
	clip-path: inset(0 50% 0 0); /* keep the left half */
	animation: et-flutter-left 280ms ease-in-out infinite alternate;
}
.et-butterfly__wing--right {
	clip-path: inset(0 0 0 50%); /* keep the right half */
	animation: et-flutter-right 280ms ease-in-out infinite alternate;
}
@keyframes et-flutter-left {
	from { transform: rotateY(-6deg); }
	to   { transform: rotateY(-46deg); }
}
@keyframes et-flutter-right {
	from { transform: rotateY(6deg); }
	to   { transform: rotateY(46deg); }
}
@media (prefers-reduced-motion: reduce) {
	.et-butterfly__wing { animation: none; transform: none; }
}

/* Butterfly — positioned via JS in pixel coordinates */
.hero-butterfly {
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: auto;
	z-index: 4;
	pointer-events: none;
	transform-origin: center center;
	will-change: transform;
}
/* Hide the hero butterfly until JS positions it — otherwise it flashes at the
   top-left corner on first paint, before the flight starts. JS reveals it. */
html.js .hero .et-butterfly { opacity: 0; transition: opacity 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
	#et-flight-mask-path { stroke-dashoffset: 0 !important; }
}
/* Small purple paw near subtitle */
.hero__deco--paw {
	top: 25%;
	right: 18%;
	width: 32px;
}
/* Orange bone bottom-left */
.hero__deco--bone {
	bottom: 8%;
	left: 6%;
	width: 64px;
}
/* House + paw bottom-right */
.hero__deco--house {
	bottom: 6%;
	right: 5%;
	width: 110px;
}
.hero__inner { position: relative; }
.hero__cards { position: relative; }
.hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}
.hero__title {
	font-family: var(--font-sans);
	font-weight: 500;
	letter-spacing: 3.5px;
	text-transform: capitalize;
	text-shadow: var(--shadow-text);
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 auto 14px;
	max-width: 900px;
	line-height: 1.05;
}
.hero__title-soft {
	font-size: clamp(26px, 5vw, 50px);
	font-weight: 500;
}
.hero__title-loud {
	color: var(--c-lime);
	font-weight: 700;
	font-size: clamp(34px, 6.5vw, 65px);
	line-height: 1.18;
}
.hero__lede {
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	max-width: 720px;
	margin: 0 auto 18px;
	line-height: 1.5;
}
.hero__lede strong { font-weight: 700; }
.hero__cta { padding: 10px 18px; min-width: 145px; }

.hero__cards {
	margin-top: clamp(14px, 2.2vw, 28px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 3vw, 36px);
	max-width: 920px;
	margin-inline: auto;
}
.hero__card {
	--card-y: 0px;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 1;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	opacity: 0;
	transform: translateY(calc(var(--card-y) + 80px));
	transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__card.is-visible {
	opacity: 1;
	transform: translateY(var(--card-y));
}
.hero__card img { width: 100%; height: 100%; object-fit: cover; }
/* Layering for trail weave: trail (z:2) goes above L/R (z:1), under middle (z:3) */
.hero__card--left   { --card-y: -30px; z-index: 1; }
.hero__card--center { --card-y:  40px; z-index: 3; }
.hero__card--right  { --card-y: -50px; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.hero__card { opacity: 1; transform: translateY(var(--card-y)) scale(1); }
}

@media (max-width: 760px) {
	/* More breathing room so the hero doesn't feel cramped on phones. */
	.hero { padding: clamp(32px, 9vw, 52px) 0 clamp(36px, 10vw, 56px); }
	.hero__title { margin-bottom: 18px; }
	.hero__lede { margin-bottom: 26px; }
	/* Three images across, with the middle one taller + a touch wider (per the
	   design). Tops/bottoms centre so the taller middle reads cleanly. */
	.hero__cards {
		grid-template-columns: 1fr 1.22fr 1fr;
		align-items: center;
		max-width: 420px;
		gap: 10px;
		margin-top: 32px;
	}
	.hero__card { --card-y: 0px; transform: none; aspect-ratio: 1; }
	.hero__card--center { aspect-ratio: 3 / 4; }
	.hero__card { opacity: 1; }
	/* Hide the animated flight trail, but keep a static butterfly by the title. */
	.hero .hero-flight { display: none; }
	.hero .et-butterfly {
		display: block;
		top: 19%;
		left: auto;
		right: 7%;
		width: 46px;
		transform: none !important;
	}
	/* The purple paw isn't part of the mobile composition. */
	.hero__deco--paw { display: none; }
}
@media (max-width: 400px) {
	.hero__cards { gap: 6px; }
}

/* =============================================================
   2. WHO WE ARE
   ============================================================= */
.who {
	background: var(--c-white);
	color: var(--c-navy);
	padding: clamp(64px, 9vw, 100px) 0;
}
.who__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}
.who__copy { max-width: 520px; }
.who__body {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.12px;
	color: var(--c-navy);
}
.who__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.who__media {
	position: relative;
	min-height: 460px;
}
.who__media-back {
	display: block;
	width: 78%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 18px;
	transform: rotate(7deg);
	transform-origin: center;
}
.who__media-front {
	position: absolute;
	right: 4%;
	top: 22%;
	width: 45%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 6px solid var(--c-white);
	border-radius: 18px;
	transform: rotate(2deg);
}
.who__paw {
	position: absolute;
	height: auto;
	pointer-events: none;
}
.who__paw--purple { width: 48px; right: 6%;  bottom: 8%; --paw-rot: -12deg; transform: rotate(var(--paw-rot)); }
.who__paw--orange { width: 32px; right: 14%; bottom: -2%; --paw-rot: 8deg;   transform: rotate(var(--paw-rot)); }

/* --- Who We Are reveal: the two images rise from the bottom (back first, then
   front), then the paw prints "stamp" down like a paw pressing. Driven by
   `.is-visible` on `.who__media` (added by main.js when it scrolls into view). --- */
.who__media-back,
.who__media-front {
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
}
.who__media:not(.is-visible) .who__media-back  { opacity: 0; transform: translateY(54px) rotate(7deg); }
.who__media:not(.is-visible) .who__media-front { opacity: 0; transform: translateY(54px) rotate(2deg); }
.who__media:not(.is-visible) .who__paw { opacity: 0; }
.who__media.is-visible .who__media-back  { transition-delay: 0.1s; }
.who__media.is-visible .who__media-front { transition-delay: 0.45s; }
.who__media.is-visible .who__paw { animation: who-paw-stamp 0.8s cubic-bezier(0.34, 1.45, 0.5, 1) both; }
.who__media.is-visible .who__paw--purple { animation-delay: 0.95s; }
.who__media.is-visible .who__paw--orange { animation-delay: 1.2s; }
/* Paw press: drops in from above, overshoots into a squash on "impact", settles. */
@keyframes who-paw-stamp {
	0%   { opacity: 0; transform: translateY(-18px) scale(1.5)  rotate(var(--paw-rot)); }
	55%  { opacity: 1; transform: translateY(3px)   scale(0.88) rotate(var(--paw-rot)); }
	100% { opacity: 1; transform: translateY(0)     scale(1)    rotate(var(--paw-rot)); }
}
@media (prefers-reduced-motion: reduce) {
	.who__media-back,
	.who__media-front,
	.who__paw {
		opacity: 1 !important;
		animation: none !important;
		transition: none !important;
	}
	.who__media:not(.is-visible) .who__media-back  { transform: rotate(7deg); }
	.who__media:not(.is-visible) .who__media-front { transform: rotate(2deg); }
}

@media (max-width: 860px) {
	.who__inner { grid-template-columns: 1fr; }
	/* Centre + cap the collage so the images don't balloon on wider phones. */
	.who__media { min-height: 0; max-width: 420px; margin-inline: auto; }
	.who__media-back { width: 88%; transform: none; }
	.who__media-front { width: 44%; right: 0; top: 26%; }
	.who__media:not(.is-visible) .who__media-back { transform: translateY(48px); }
}

/* =============================================================
   3. SPLIT (Crisis / Work)
   ============================================================= */
.split { width: 100%; }
.split__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 496px;
	color: var(--c-white);
}
.split { display: grid; grid-auto-rows: 1fr; }
.split__row--blue { background: var(--c-blue); }
.split__row--blue .split__copy,
.split__row--purple .split__copy { align-items: center; text-align: center; }
.split__row--blue .split__copy .btn,
.split__row--purple .split__copy .btn { align-self: center; }
.split__row--purple { background: var(--c-purple); }
.split__row--reverse .split__media { order: 2; }
.split__row--reverse .split__copy { order: 1; }

.split__media { position: relative; overflow: hidden; min-height: 320px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 60px);
	max-width: 620px;
	margin-inline: auto;
}
.split__title {
	font-size: clamp(22px, 2.5vw, 25px);
	letter-spacing: 1.75px;
	font-weight: 500;
}
.split__title strong { font-weight: 700; }
.split__body {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.12px;
}
.split__body strong { font-weight: 700; }
.split__body em { font-style: normal; font-weight: 600; }
.split__body sup { font-size: 0.65em; font-weight: 300; }
.split__copy .btn { align-self: flex-start; }
/* Stat sources footnote under the crisis copy (muted, on the blue band). */
.split__sources {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.72);
}
.split__sources-label { font-weight: 700; }
.split__source { display: inline-block; margin: 0 5px; }
.split__source sup { font-size: 0.72em; margin-right: 1px; }
.split__source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.split__source a:hover { color: var(--c-white); }

@media (max-width: 860px) {
	/* Stack media over copy and drop the fixed 496px height so the copy isn't
	   clipped at the bottom. */
	.split__row { grid-template-columns: 1fr; height: auto; }
	.split__row--reverse .split__media { order: 1; }
	.split__row--reverse .split__copy { order: 2; }
	/* Give the media a defined (capped) height so the image is cropped to a
	   banner instead of rendering at full size now the row height is auto. */
	.split__media { min-height: 0; aspect-ratio: 16 / 10; max-height: 320px; }
}

/* =============================================================
   4. SANCTUARY
   ============================================================= */
.sanctuary {
	position: relative;
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	padding: clamp(64px, 9vw, 110px) 0 clamp(80px, 10vw, 120px);
	overflow: hidden;
}
.sanctuary__bg { display: none; }
.sanctuary__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(24px, 4vw, 60px);
	row-gap: 0;
	align-items: start;
}

.sanctuary__header { grid-column: 1; max-width: 580px; margin-bottom: 32px; }
.sanctuary__title {
	font-size: clamp(28px, 4vw, 35px);
	letter-spacing: 2.45px;
	font-weight: 600;
}

.sanctuary__content {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 32px;
}
.sanctuary__figure { grid-column: 1 / -1; }
.sanctuary__body {
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 1.5;
	max-width: 540px;
}
.sanctuary__content .btn { align-self: start; }

.sanctuary__figure {
	position: relative;
	/* Break out of the container so the render spans the full viewport width. */
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.sanctuary__figure img { width: 100%; height: auto; display: block; aspect-ratio: 1081 / 459; object-fit: cover; }
.sanctuary__figure img[hidden] { display: none; }
.sanctuary__credit {
	position: absolute;
	right: 16px;
	bottom: 12px;
	font-family: var(--font-script);
	font-size: 18px;
	letter-spacing: 1.05px;
	color: var(--c-white);
	text-align: right;
	line-height: 1.1;
}

.view-toggle {
	display: inline-flex;
	margin: 28px auto 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	width: fit-content;
}
.view-toggle__tab {
	background: transparent;
	border: 1px solid var(--c-lime);
	color: var(--c-lime);
	padding: 10px 18px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.98px;
	min-width: 152px;
}
.view-toggle__tab:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.view-toggle__tab:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }
.view-toggle__tab.is-active { background: var(--c-lime); color: var(--c-navy); }

.sanctuary .view-toggle {
	display: flex;
	justify-content: center;
	grid-column: 1 / -1;
	margin-top: 28px;
}

@media (max-width: 860px) {
	.sanctuary__inner { grid-template-columns: 1fr; }
	.sanctuary__header, .sanctuary__content { grid-column: 1; }
}

/* =============================================================
   5. STORIES
   ============================================================= */
.stories {
	background: var(--c-white);
	padding: clamp(60px, 8vw, 90px) 0;
}
.stories__header { margin-bottom: 32px; }
.stories__intro-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: 16px;
}
.stories__intro-row .stories__intro { margin: 0; max-width: 720px; }
.stories__intro-row .btn { flex-shrink: 0; align-self: flex-end; }
/* Mobile only: centre the copy and stack the CTA beneath it (above the cards). */
@media (max-width: 860px) {
	.stories__header { text-align: center; }
	.stories__header .eyebrow--with-icon { justify-content: center; }
	.stories__intro-row { flex-direction: column; align-items: center; gap: 20px; }
	.stories__intro-row .stories__intro { margin: 0 auto; }
	.stories__intro-row .btn { align-self: center; }
}
.stories__heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.stories__intro {
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 1.5;
	max-width: 620px;
	margin-top: 12px;
}

.stories__grid {
	display: flex;
	gap: clamp(20px, 3vw, 34px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	margin-bottom: clamp(48px, 7vw, 80px);
	/* Hide the native scrollbar — navigation is via the arrows/dots. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.stories__grid::-webkit-scrollbar { display: none; }
/* Two cards per view on desktop, snapping into place. */
.stories__grid .story-card {
	flex: 0 0 calc((100% - clamp(20px, 3vw, 34px)) / 2);
	scroll-snap-align: start;
}
@media (max-width: 860px) {
	/* One card per view (with a peek of the next) on phones/tablets. */
	.stories__grid .story-card { flex-basis: 84%; }
}

.story-card {
	display: grid;
	grid-template-columns: 235px 1fr;
	border-radius: 9.78px;
	overflow: hidden;
	min-height: 316px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.story-card--blue { background: var(--c-blue); color: var(--c-white); }
.story-card--lime { background: var(--c-lime); color: var(--c-navy); }
.story-card__copy {
	padding: 35px 19px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.story-card__tag {
	display: inline-block;
	background: var(--c-white);
	color: var(--c-navy);
	font-size: 8.94px;
	font-weight: 600;
	letter-spacing: 0.63px;
	padding: 3px 12px;
	border-radius: 999px;
	text-transform: uppercase;
	width: fit-content;
}
.story-card__meta {
	margin: 0;
	font-size: 9.29px;
	letter-spacing: 0.65px;
	font-weight: 400;
	text-transform: uppercase;
}
.story-card__title {
	font-size: 16.25px;
	letter-spacing: 1.14px;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.story-card__excerpt {
	font-size: 11.37px;
	letter-spacing: 0.8px;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.story-card .btn--ghost-bordered { margin-top: auto; align-self: flex-start; flex-shrink: 0; }
/* Image fills its cell via absolute positioning so it never dictates the card
   height — the copy column drives the height (and the button stays visible). */
.story-card__media { position: relative; overflow: hidden; }
.story-card__media img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%; object-fit: cover;
}

.stories__controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: 36px;
}
.stories__dots { display: inline-flex; gap: 6px; grid-column: 2; justify-self: center; }
.stories__arrows { grid-column: 3; justify-self: end; }
.dot {
	width: 10px; height: 10px;
	background: var(--c-grey-300);
	border-radius: 50%;
	cursor: pointer;
	border: 0;
	padding: 0;
}
.dot.is-active { background: var(--c-grey-500); }
.stories__arrows { display: inline-flex; gap: 12px; }
.arrow-btn {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--c-purple);
	background: var(--c-purple);
	color: var(--c-white);
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.arrow-btn { cursor: pointer; }
.arrow-btn:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }

/* =============================================================
   How You Can Help page
   ============================================================= */
.help-hero {
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	/* Padding scales with viewport width to match the trail (≈20% of width tall),
	   so the centred wave never outgrows the band on large screens. */
	padding: clamp(60px, 8vw, 220px) 0 clamp(110px, 14vw, 380px);
	text-align: center;
	position: relative;
	overflow: hidden; /* keep the flight trail within the navy band */
}
.help-hero__inner { position: relative; z-index: 2; }
.help-hero__title {
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: 3.5px;
	font-weight: 600;
	margin: 0;
}
.help-hero__trail-wrap {
	position: absolute;
	left: -13%;
	top: 50%;
	transform: translateY(-50%); /* centre the wave so it stays inside the band */
	width: 102%;
	aspect-ratio: 1315 / 260;
	z-index: 1;
	pointer-events: none;
	line-height: 0;
}
.help-hero__trail {
	width: 100%;
	height: 100%;
	display: block;
}
.help-hero__butterfly {
	position: absolute;
	left: 99.16%;
	top: 19.97%;
	transform: translate(-50%, -50%);
	width: clamp(34px, 4vw, 56px);
	height: auto;
	z-index: 3;
}

.help-cards {
	background: var(--c-navy);
	color: var(--c-white);
	padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
	position: relative;
	z-index: 2;
}
.help-cards__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(40px, 5vw, 80px) clamp(30px, 4vw, 60px);
}
.help-card { display: flex; flex-direction: column; gap: 14px; }
/* Each help card rises in from the bottom on scroll (main.js toggles
   .is-visible). Gated on .js with a reduced-motion fallback. */
html.js .help-card {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
html.js .help-card:nth-child(even) { transition-delay: 0.12s; }
html.js .help-card.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js .help-card { opacity: 1; transform: none; transition: none; }
}
.help-card__visual {
	position: relative;
	aspect-ratio: 583 / 434;
	margin-bottom: 16px;
}
.help-card__frame {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% - 28px);
	height: calc(100% - 27px);
	border-radius: 15px;
	z-index: 1;
	display: block;
}
.help-card__image {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(100% - 17px);
	height: calc(100% - 17px);
	object-fit: cover;
	border-radius: 15px;
	z-index: 2;
	display: block;
}
.help-card__title {
	font-size: clamp(26px, 3vw, 35px);
	font-weight: 700;
	letter-spacing: 2.45px;
	margin: 0;
}
.help-card__body {
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 1.35;
	max-width: 540px;
	margin: 0;
}
.help-card .btn { align-self: flex-start; margin-top: 8px; }

@media (max-width: 860px) {
	.help-cards__inner { grid-template-columns: 1fr; }
}

/* =============================================================
   ABOUT — Hero
   ============================================================= */
.about-hero {
	position: relative;
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	overflow: hidden;
	padding: clamp(60px, 7vw, 87px) 0 clamp(80px, 9vw, 110px);
}
.about-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(360px, 34vw, 432px);
	gap: clamp(40px, 6vw, 80px);
	align-items: end;
	min-height: clamp(420px, 48vw, 560px);
}
.about-hero__copy {
	position: relative;
	z-index: 2;
	max-width: 533px;
	padding-bottom: clamp(20px, 4vw, 60px);
}
.about-hero__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 4vw, 50px);
	letter-spacing: 3.5px;
	line-height: 1.1;
	margin: 0 0 18px;
	color: var(--c-white);
}
.about-hero__title--semibold { font-weight: 600; }
.about-hero__lede {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.33;
	margin: 0;
	max-width: 410px;
	color: var(--c-white);
}
.about-hero__media {
	position: relative;
	z-index: 2;
	align-self: start;
	aspect-ratio: 432 / 476;
	border-radius: 15px;
	overflow: visible;
}
.about-hero__media > img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
	display: block;
}
.about-hero__butterfly {
	position: absolute;
	top: -22px;
	right: -18px;
	width: clamp(48px, 5vw, 64px);
	height: auto;
	z-index: 3;
}
.about-hero__trail {
	position: absolute;
	pointer-events: none;
	z-index: 3; /* above the photo (.about-hero__media is z-index 2) */
	right: clamp(180px, 22vw, 280px);
	top: clamp(4px, 2vw, 32px);
	width: clamp(520px, 58vw, 760px);
	height: auto;
}
.about-hero__trail--mission {
	left: -20%;
	right: auto;
	top: clamp(8px, 5vw, 64px);
	width: clamp(820px, 97vw, 1244px);
}
/* Foster hero: lime loop trail sized for trail-foster.svg (549x176), sitting
   on the left above the "Foster" title. */
.about-hero__trail--foster {
	left: clamp(20px, 3vw, 60px);
	right: auto;
	top: clamp(40px, 7vw, 96px);
	width: clamp(380px, 44vw, 600px);
}
/* Crisis hero: lift the flight above the photo and higher in the band. */
.about-hero--crisis .about-hero__trail {
	z-index: 4;
	top: clamp(20px, 3vw, 40px);
}
/* Widen the copy so "Crisis in Puerto Rico" fits on one line (no orphaned "Rico"). */
.about-hero--crisis .about-hero__copy {
	max-width: 640px;
}

/* =============================================================
   MISSION — Pull quote
   ============================================================= */
.mission-quote {
	background: var(--c-cyan);
	color: var(--c-white);
	padding: clamp(48px, 6vw, 76px) 24px clamp(60px, 8vw, 100px);
	position: relative;
	overflow: hidden;
}
.mission-quote__inner {
	position: relative;
	max-width: 1100px;
}
.mission-quote__mark {
	position: absolute;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: clamp(140px, 18vw, 240px);
	line-height: 0.6;
	color: rgba(255, 255, 255, 0.45);
	user-select: none;
	pointer-events: none;
}
.mission-quote__mark--open {
	top: clamp(0px, 0.5vw, 8px);
	left: clamp(8px, 2.5vw, 36px);
}
.mission-quote__mark--close {
	top: clamp(60px, 8vw, 140px);
	bottom: auto;
	right: clamp(8px, 2.5vw, 36px);
}
.mission-quote__block {
	margin: 0 auto;
	max-width: 700px;
	text-align: center;
	position: relative;
	z-index: 1;
}
.mission-quote__text {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: clamp(20px, 2.5vw, 30px);
	letter-spacing: 2.1px;
	line-height: 1.3;
	margin: 0;
}
.mission-quote__cite {
	display: block;
	margin-top: 26px;
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
	letter-spacing: 1.26px;
}
@media (max-width: 860px) {
	/* No room to flank the near-full-width text, so stack the quote marks in
	   flow (open above, close below) instead of overlapping the sides. */
	.mission-quote__mark {
		position: static;
		display: block;
		text-align: center;
		font-size: clamp(96px, 24vw, 150px);
		line-height: 0.7;
	}
	.mission-quote__mark--open { margin-bottom: -6px; }
	.mission-quote__mark--close { margin-top: 22px; }
}

/* =============================================================
   MISSION — Statement (photo + offset purple frame, copy)
   ============================================================= */
.mission-statement {
	background: var(--c-white);
	padding: clamp(48px, 6vw, 80px) 0;
}
.mission-statement__inner {
	display: grid;
	grid-template-columns: minmax(360px, 1fr) 1fr;
	gap: clamp(40px, 8vw, 119px);
	align-items: center;
}
.mission-statement__visual {
	position: relative;
	aspect-ratio: 492 / 494;
	max-width: 568px;
	width: 100%;
}
.mission-statement__frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 52.6%;
	height: 100%;
	background: var(--c-purple);
	border-radius: 15px;
	display: block;
}
.mission-statement__photo {
	position: absolute;
	left: 6.1%;
	top: 4.25%;
	width: 93.9%;
	height: 90.9%;
	object-fit: cover;
	border-radius: 15px;
}
.mission-statement__copy {
	max-width: 510px;
}
.mission-statement__icon {
	width: clamp(48px, 5vw, 64px);
	height: auto;
	margin-bottom: 18px;
	display: block;
}
.mission-statement__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 35px);
	letter-spacing: 2.45px;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.mission-statement__lead {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 23px;
	color: var(--c-navy);
	margin: 0 0 18px;
	max-width: 506px;
}
.mission-statement__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 23px;
	color: var(--c-navy);
	margin: 0;
	max-width: 506px;
}

@media (max-width: 860px) {
	.mission-statement__inner { grid-template-columns: 1fr; }
	.mission-statement__visual { margin: 0 auto; }
}

/* =============================================================
   MISSION — Vision (navy bg, photo + offset lime frame)
   ============================================================= */
.mission-vision {
	background: var(--c-navy);
	color: var(--c-white);
	padding: clamp(48px, 6vw, 80px) 0;
}
.mission-vision__inner {
	display: grid;
	grid-template-columns: 1fr minmax(360px, 1fr);
	gap: clamp(40px, 7vw, 90px);
	align-items: center;
}
.mission-vision__copy {
	max-width: 510px;
}
.mission-vision__icon {
	width: clamp(48px, 5vw, 64px);
	height: auto;
	margin-bottom: 18px;
	display: block;
}
.mission-vision__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 35px);
	letter-spacing: 2.45px;
	color: var(--c-white);
	margin: 0 0 18px;
}
.mission-vision__lead {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 23px;
	color: var(--c-white);
	margin: 0 0 18px;
	max-width: 506px;
}
.mission-vision__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 23px;
	color: var(--c-white);
	margin: 0;
	max-width: 506px;
}
.mission-vision__visual {
	position: relative;
	aspect-ratio: 527 / 444;
	max-width: 600px;
	width: 100%;
}
.mission-vision__frame {
	position: absolute;
	left: 24.1%;
	top: 0;
	width: 75.9%;
	height: 48.2%;
	background: var(--c-lime);
	border-radius: 15px;
	display: block;
}
.mission-vision__photo {
	position: absolute;
	left: 0;
	top: 5.4%;
	width: 95.3%;
	height: 94.6%;
	object-fit: cover;
	border-radius: 15px;
}

@media (max-width: 860px) {
	.mission-vision__inner { grid-template-columns: 1fr; }
	.mission-vision__visual { margin: 0 auto; }
}

/* =============================================================
   MISSION — Sanctuary (split: copy left / peach panel right)
   ============================================================= */
.mission-sanctuary {
	background: var(--c-white);
}
.mission-sanctuary__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}
.mission-sanctuary__copy {
	padding-top: clamp(60px, 6vw, 80px);
	padding-bottom: clamp(60px, 6vw, 80px);
	padding-right: clamp(40px, 5vw, 90px);
	padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
	margin-left: 0;
	width: 100%;
}
.mission-sanctuary__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 28px);
	letter-spacing: 1.96px;
	line-height: 1.2;
	color: var(--c-navy);
	margin: 0 0 28px;
	max-width: 505px;
}
.mission-sanctuary__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 24px;
	color: var(--c-navy);
	margin: 0 0 18px;
	max-width: 504px;
}
.mission-sanctuary__body:last-child { margin-bottom: 0; }

.mission-sanctuary__cards {
	background: #fffaf6;
	padding: clamp(60px, 6vw, 80px) clamp(20px, 5vw, 80px);
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-height: 100%;
	justify-content: center;
}
.mission-sanctuary__eyebrow {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 1.4px;
	color: var(--c-navy);
	margin: 0;
}
.mission-sanctuary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 500px;
	width: 100%;
}
.mission-sanctuary__card {
	border-radius: 6px;
	padding: 18px 22px;
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 81px;
}
.mission-sanctuary__card--cyan  { background: var(--c-cyan); }
.mission-sanctuary__card--lilac { background: var(--c-purple); }
.mission-sanctuary__card--lime  { background: var(--c-lime); }
.mission-sanctuary__icon {
	width: 38px;
	height: 32px;
	flex-shrink: 0;
	object-fit: contain;
}
.mission-sanctuary__text {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.12px;
	color: var(--c-navy);
}

@media (max-width: 860px) {
	.mission-sanctuary__inner { grid-template-columns: 1fr; }
	.mission-sanctuary__copy { margin: 0 auto; max-width: 600px; }
	.mission-sanctuary__cards { align-items: center; }
}

/* =============================================================
   MISSION — Image carousel (ACF gallery)
   ============================================================= */
.mission-carousel {
	background: var(--c-white);
	padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 5vw, 72px);
}
.mission-carousel__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}
.mission-carousel__viewport {
	position: relative;
	width: 100%;
	max-width: none;
	aspect-ratio: 1322 / 499;
	/* Stays full-width, but capped so it doesn't dominate ultra-wide screens. */
	max-height: 720px;
	border-radius: 0;
	overflow: hidden;
	background: var(--c-grey-100);
}
.mission-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
}
.mission-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 400ms ease;
	pointer-events: none;
}
.mission-carousel__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.mission-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mission-carousel__dots {
	display: flex;
	align-items: center;
	gap: 6px;
}
.mission-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	background: var(--c-grey-300);
	padding: 0;
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease;
}
.mission-carousel__dot:hover { background: var(--c-grey-500); }
.mission-carousel__dot.is-active {
	background: var(--c-grey-500);
	transform: scale(1.05);
}
.mission-carousel__dot:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 3px;
}

/* =============================================================
   MISSION — Help Us Get There (image left, copy right)
   ============================================================= */
.mission-help {
	background: #fffaf6;
}
.mission-help__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 500px;
}
.mission-help__media {
	position: relative;
	overflow: hidden;
}
.mission-help__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mission-help__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 80px) clamp(24px, 6vw, 84px);
}
.mission-help__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.15;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.mission-help__rule {
	display: block;
	width: 351px;
	max-width: 100%;
	height: 3px;
	background: var(--c-orange, #ff7f12);
	border-radius: 2px;
	margin-bottom: 22px;
}
.mission-help__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 24px;
	color: var(--c-navy);
	margin: 0 0 28px;
	max-width: 473px;
}
.mission-help__cta {
	font-size: 14px;
	letter-spacing: 0.98px;
	padding: 8px 14px;
	align-self: flex-start;
}

@media (max-width: 860px) {
	.mission-help__inner { grid-template-columns: 1fr; }
	.mission-help__copy { padding: 48px 24px; }
	.mission-help__media { aspect-ratio: 622 / 501; order: -1; }
}

/* =============================================================
   MISSION — Tools for Taking Action (3 cards)
   ============================================================= */
.mission-tools {
	background: var(--c-white);
	padding: clamp(48px, 6vw, 80px) 0;
}
.mission-tools__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 35px);
	letter-spacing: 2.45px;
	color: var(--c-navy);
	text-align: center;
	margin: 0 0 clamp(40px, 5vw, 64px);
}
.mission-tools__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 40px);
}
.mission-tool {
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	padding: 26px;
	min-height: 453px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--c-white);
}
.mission-tool__icon {
	width: 97px;
	height: 97px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mission-tool__icon img {
	width: 56%;
	height: 56%;
	object-fit: contain;
	display: block;
}
.mission-tool__icon--cyan  { background: var(--c-cyan); }
.mission-tool__icon--lilac { background: var(--c-purple); }
.mission-tool__icon--lime  { background: var(--c-lime); }

.mission-tool__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 25px;
	letter-spacing: 1.75px;
	line-height: 1.2;
	color: var(--c-navy);
	margin: 0;
}
.mission-tool__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 24px;
	color: var(--c-navy);
	margin: 0;
	flex: 1;
}
.mission-tool__cta {
	align-self: flex-start;
	font-size: 14px;
	letter-spacing: 0.98px;
	padding: 8px 14px;
	margin-top: 8px;
}

@media (max-width: 900px) {
	/* 3-up → 2-up on tablets (avoids the abrupt jump straight to one column). */
	.mission-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mission-tool { min-height: 0; }
}
@media (max-width: 600px) {
	.mission-tools__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* =============================================================
   CRISIS — Stats band + intro card (single section, layered)
   ============================================================= */
.crisis-band {
	background: var(--c-white);
	padding-bottom: clamp(48px, 6vw, 80px);
}
.crisis-band__blue {
	background: var(--c-blue);
	color: var(--c-white);
	padding: clamp(48px, 6vw, 72px) 0 clamp(140px, 13vw, 200px);
}
.crisis-stats__list {
	list-style: none;
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 4vw, 60px);
	align-items: start;
}
.crisis-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(12px, 2vw, 22px);
}
.crisis-stat__value {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(30px, 3.6vw, 40px);
	letter-spacing: 2.8px;
	line-height: 1;
	color: var(--c-white);
}
.crisis-stat__label {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.84px;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--c-white);
	max-width: 220px;
}

@media (max-width: 720px) {
	.crisis-stats__list { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}

.crisis-intro__wrap {
	padding: 0 clamp(20px, 4vw, 50px);
	margin-top: -120px;
	position: relative;
	z-index: 2;
}
.crisis-intro__card {
	background: var(--c-cream);
	border-radius: 20px;
	padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 80px);
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	/* Pops in from below when scrolled into view (JS adds .is-visible). */
	opacity: 0;
	transform: translateY(56px);
	transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crisis-intro__card.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.crisis-intro__card { opacity: 1; transform: none; transition: none; }
}
.crisis-intro__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.2;
	color: var(--c-navy);
	margin: 0 0 22px;
}
.crisis-intro__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 24px;
	color: var(--c-navy);
	margin: 0 auto 18px;
	max-width: 880px;
}
.crisis-intro__body:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.about-hero__inner {
		grid-template-columns: 1fr;
		align-items: stretch;
	}
	.about-hero__media {
		order: -1;
		max-width: 360px;
		margin: 0 auto;
		width: 100%;
	}
	.about-hero__copy { padding-bottom: 0; text-align: center; }
	.about-hero__lede { margin-left: auto; margin-right: auto; padding-inline: clamp(16px, 6vw, 40px); }
	/* Hide the trail AND its butterfly — the butterfly is a sibling, so hiding
	   only the SVG would leave it stranded in the corner (JS parks it at 0,0). */
	.about-hero__trail,
	.about-hero__butterfly { display: none; }
}

/* =============================================================
   ABOUT — Belief band (scalloped bottom)
   ============================================================= */
.about-belief {
	position: relative;
	background-color: #cbe896;
	text-align: center;
	padding: clamp(60px, 7vw, 75px) 24px clamp(80px, 10vw, 130px);
	--scallop-w: 72px;
	--scallop-h: 36px;
	-webkit-mask:
		linear-gradient(#000 0 0) top/100% calc(100% - var(--scallop-h)) no-repeat,
		radial-gradient(circle at 36px 0, #000 35.5px, transparent 36px) bottom/var(--scallop-w) var(--scallop-h) repeat-x;
	        mask:
		linear-gradient(#000 0 0) top/100% calc(100% - var(--scallop-h)) no-repeat,
		radial-gradient(circle at 36px 0, #000 35.5px, transparent 36px) bottom/var(--scallop-w) var(--scallop-h) repeat-x;
}
.about-belief__inner {
	max-width: 760px;
	margin: 0 auto;
}
.about-belief__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.5vw, 30px);
	letter-spacing: 2.1px;
	line-height: 1.2;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.about-belief__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 28px;
	color: #000;
	margin: 0 auto;
	max-width: 707px;
}

/* =============================================================
   ABOUT — Pillars (tabbed)
   ============================================================= */
.about-pillars {
	background: var(--c-white);
	padding: clamp(48px, 6vw, 72px) 0;
}
.about-pillars__inner {
	display: grid;
	grid-template-columns: minmax(320px, 431px) 1fr;
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
}
.about-pillars__tabs {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.about-pillars__tab {
	appearance: none;
	border: 0;
	background: #f5f5f5;
	color: var(--c-navy);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(20px, 1.9vw, 28px);
	letter-spacing: 1.96px;
	line-height: 1.25;
	text-align: left;
	padding: 28px 36px;
	border-radius: 10px;
	min-height: 144px;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: background-color 180ms ease, font-weight 0s;
}
.about-pillars__tab:hover { background: #ececec; }
.about-pillars__tab:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 2px;
}
.about-pillars__tab.is-active { font-weight: 700; }
.about-pillars__tab--lime.is-active  { background: #cbe896; }
.about-pillars__tab--blue.is-active  { background: #2e86cd; }
.about-pillars__tab--lilac.is-active { background: #8d85c3; }
.about-pillars__tab--cyan.is-active  { background: #19c7f7; }

.about-pillars__panels { position: relative; }
.about-pillars__panel {
	display: grid;
	gap: clamp(20px, 2.5vw, 32px);
}
.about-pillars__panel[hidden] { display: none; }
.about-pillars__media {
	width: 100%;
	aspect-ratio: 719 / 421;
	border-radius: 6px;
	overflow: hidden;
	background: #f5f5f5;
}
.about-pillars__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.about-pillars__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}
.about-pillars__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 24px;
	color: var(--c-navy);
	margin: 0;
	max-width: 720px;
}
.about-pillars__cta {
	font-size: 14px;
	letter-spacing: 0.98px;
	padding: 8px 14px;
	margin-top: 4px;
}

/* Desktop uses the tab rail; the select is the mobile control only. */
.about-pillars__select { display: none; }

@media (max-width: 860px) {
	.about-pillars__inner { grid-template-columns: 1fr; }
	.about-pillars__tab {
		min-height: 0;
		padding: 18px 24px;
		font-size: 18px;
	}
	/* Swap the tab rail for a select dropdown on mobile. */
	.about-pillars__tabs { display: none; }
	.about-pillars__select {
		display: block;
		width: 100%;
		margin-bottom: 24px;
		appearance: none;
		-webkit-appearance: none;
		font-family: 'Quicksand', sans-serif;
		font-weight: 600;
		font-size: 18px;
		letter-spacing: 1px;
		color: var(--c-navy);
		background-color: #f5f5f5;
		border: 0;
		border-radius: 10px;
		padding: 16px 46px 16px 20px;
		cursor: pointer;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23242c38' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 18px center;
		background-size: 14px;
	}
	.about-pillars__select:focus-visible {
		outline: 2px solid var(--c-navy);
		outline-offset: 2px;
	}
}

/* =============================================================
   ABOUT — Be Part of What Comes Next
   ============================================================= */
.about-cta {
	background: #fff7f1;
}
.about-cta__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp(380px, 40vw, 501px);
}
.about-cta__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px) clamp(48px, 6vw, 80px) clamp(24px, 8vw, 111px);
}
.about-cta__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.15;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.about-cta__rule {
	display: block;
	width: 329px;
	max-width: 100%;
	height: 3px;
	background: var(--c-orange, #f08a3e);
	border-radius: 2px;
	margin-bottom: 22px;
}
.about-cta__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 24px;
	color: var(--c-navy);
	margin: 0 0 28px;
	max-width: 417px;
}
.about-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.about-cta__btn {
	font-size: 14px;
	letter-spacing: 0.98px;
	padding: 8px 14px;
}
.btn--navy {
	background: var(--c-navy);
	color: #fff7f1;
	border-color: var(--c-navy);
	font-weight: 600;
}
.btn--navy:hover { background: #1a212c; color: #fff7f1; opacity: 1; }
.about-cta__media {
	position: relative;
	overflow: hidden;
}
.about-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 860px) {
	.about-cta__inner { grid-template-columns: 1fr; }
	.about-cta__copy { padding: 48px 24px; }
	.about-cta__media { aspect-ratio: 622 / 501; }
}

@media (max-width: 900px) {
	.stories__grid { grid-template-columns: 1fr; }
	.story-card { grid-template-columns: 1fr; }
	.story-card__media { order: -1; min-height: 200px; }
}

/* =============================================================
   6. ACTION TILES
   ============================================================= */
.action-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	min-height: 516px;
}
.action-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--c-white);
	min-height: 360px;
	text-decoration: none;
}
.action-tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.4s ease;
}
.action-tile:hover .action-tile__image { transform: scale(1.04); }
.action-tile:hover, .action-tile:focus { outline: none; text-decoration: none; }
.action-tile:focus-visible { outline: 2px solid var(--c-white); outline-offset: -4px; }
.action-tile__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	z-index: 1;
}
.action-tile__label {
	position: relative;
	z-index: 2;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 35px);
	letter-spacing: 2.43px;
	text-align: center;
	padding: 0 24px;
}

@media (max-width: 860px) {
	.action-tiles { grid-template-columns: 1fr; }
}

/* =============================================================
   7. NEWSLETTER
   ============================================================= */
.newsletter {
	background: linear-gradient(to bottom, var(--c-white) 0%, var(--c-white) 22%, var(--c-cyan) 22%, var(--c-cyan) 100%);
	padding: clamp(40px, 6vw, 70px) 0 clamp(50px, 6vw, 70px);
	position: relative;
}
/* On the navy "How You Can Help" page, the top strip is navy so the dark hero/
   cards flow straight into the cyan band (no white gap). */
.newsletter--on-dark {
	background: linear-gradient(to bottom, var(--c-navy) 0%, var(--c-navy) 22%, var(--c-cyan) 22%, var(--c-cyan) 100%);
}
.newsletter__inner {
	display: grid;
	grid-template-columns: 414px 1fr;
	gap: clamp(40px, 5vw, 70px);
	align-items: end;
}
.newsletter__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	width: 414px;
	max-width: 100%;
	aspect-ratio: 414 / 477;
	position: relative;
	z-index: 1;
}
.newsletter__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
}
.newsletter__copy {
	color: var(--c-white);
	align-self: center;
	/* The image overhangs up into the white strip, so the grid-row centre sits
	   above the blue box centre — nudge the copy down to centre it in the blue. */
	transform: translateY(clamp(24px, 5vw, 56px));
}
.newsletter__title {
	font-size: clamp(26px, 3.5vw, 35px);
	letter-spacing: 2.45px;
	font-weight: 600;
	max-width: 500px;
}
.newsletter__title strong { font-weight: 700; }
.newsletter__body {
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.27;
	max-width: 490px;
	margin: 14px 0 24px;
}
.newsletter__form {
	display: grid;
	grid-template-columns: 1fr auto;
	background: var(--c-white);
	border-radius: 6.19px;
	max-width: 500px;
	height: 47px;
	align-items: center;
	position: relative;
}
/* Inline success/error message under the signup field (sits on the cyan band). */
.newsletter__message {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--c-navy);
}
.newsletter__message.is-error { color: #9c1f1f; }
.newsletter__input {
	border: 0;
	background: transparent;
	padding: 0 18px;
	font-size: 18px;
	letter-spacing: 1.26px;
	color: var(--c-navy);
	width: 100%;
	font-family: inherit;
	font-weight: 300;
}
.newsletter__input::placeholder { color: var(--c-grey-700); font-weight: 300; }
.newsletter__input:focus { outline: none; }
.newsletter__input:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; border-radius: var(--radius-sm); }
.newsletter__submit {
	background: var(--c-navy);
	color: var(--c-white);
	border: 0;
	padding: 0 22px;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 1.26px;
	border-radius: 6.19px;
	height: 100%;
	min-width: 140px;
}
.newsletter__submit:hover { opacity: 0.92; }
.newsletter__submit:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

.newsletter__paws {
	position: absolute;
	right: 6%;
	bottom: 22%;
	width: 160px;
	height: 200px;
	pointer-events: none;
}
.newsletter__paw {
	position: absolute;
	height: auto;
	filter: brightness(0) invert(1);
}
.newsletter__paw--small {
	width: 40px;
	top: 0;
	right: 30px;
	opacity: 0.45;
	--paw-rot: -8deg;
	transform: rotate(var(--paw-rot));
}
.newsletter__paw--large {
	width: 110px;
	bottom: 0;
	left: 10px;
	opacity: 0.45;
	--paw-rot: 6deg;
	transform: rotate(var(--paw-rot));
}
/* Paws "stamp" in (drop, squash on impact, settle) when the newsletter scrolls
   into view — same press effect as the eyebrow/Who-We-Are paws. Gated on .js. */
html.js .newsletter__paws .newsletter__paw { opacity: 0; }
html.js .newsletter__paws.is-visible .newsletter__paw--small {
	animation: newsletter-paw-stamp 0.7s cubic-bezier(0.34, 1.45, 0.5, 1) both;
}
html.js .newsletter__paws.is-visible .newsletter__paw--large {
	animation: newsletter-paw-stamp 0.7s cubic-bezier(0.34, 1.45, 0.5, 1) 0.18s both;
}
@keyframes newsletter-paw-stamp {
	0%   { opacity: 0;    transform: translateY(-16px) scale(1.5)  rotate(var(--paw-rot)); }
	55%  { opacity: 0.45; transform: translateY(3px)   scale(0.88) rotate(var(--paw-rot)); }
	100% { opacity: 0.45; transform: translateY(0)     scale(1)    rotate(var(--paw-rot)); }
}
@media (prefers-reduced-motion: reduce) {
	html.js .newsletter__paws .newsletter__paw { opacity: 0.45; animation: none; }
}

@media (max-width: 860px) {
	.newsletter__inner { grid-template-columns: 1fr; text-align: center; }
	.newsletter__media { margin-inline: auto; width: 100%; max-width: 300px; }
	.newsletter__copy { transform: none; }
	.newsletter__paws { display: none; }
}

/* =============================================================
   Site footer
   ============================================================= */
.site-footer {
	background: var(--c-navy);
	color: var(--c-white);
	padding: clamp(50px, 7vw, 80px) 0 30px;
	position: relative;
}
.site-footer__line {
	position: absolute;
	left: clamp(-30px, 1vw, 40px);
	top: -315px;
	width: 313px;
	height: auto;
	pointer-events: none;
	z-index: 2;
}
@media (max-width: 860px) {
	.site-footer__line { display: none; }
}
.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 50px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
}
.site-brand--footer { color: var(--c-white); }
.site-brand--footer .site-brand__name,
.site-brand--footer .site-brand__tagline { color: var(--c-white); }

.site-footer__about {
	font-size: 12px;
	letter-spacing: 0.84px;
	line-height: 17px;
	margin: 24px 0 12px;
	max-width: 261px;
	color: var(--c-white);
	font-weight: 400;
}

.social-list {
	list-style: none;
	margin: -6px 0 0;
	padding: 0;
	display: inline-flex;
	gap: 6px;
	color: var(--c-white);
	margin-top: 20px;
}
.social-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--c-white);
	transition: transform 0.28s cubic-bezier(0.34, 1.6, 0.5, 1), filter 0.28s ease;
}
.social-list a svg { width: 34px; height: 34px; }
/* Hover: small bounce up + a drop shadow shaped to the icon (drop-shadow, not
   box-shadow, since the icons have no box). */
.social-list a:hover {
	text-decoration: none;
	transform: translateY(-4px);
	filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.45));
}
@media (prefers-reduced-motion: reduce) {
	.social-list a:hover { transform: none; }
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.footer-col__heading {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 1.4px;
	margin: 0 0 18px;
	color: var(--c-white);
}
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.footer-menu a {
	font-size: 16px;
	letter-spacing: 1.12px;
	color: var(--c-white);
	font-weight: 400;
}
.footer-menu a:hover { font-weight: 700; text-decoration: none; }

.site-footer__legal {
	max-width: var(--container-max);
	margin: 50px auto 0;
	padding: 30px 50px 0;
	border-top: 1px solid rgba(255,255,255,0.18);
	text-align: center;
}
.site-footer__legal p {
	font-size: 15px;
	letter-spacing: 1.05px;
	margin: 0 0 4px;
	color: var(--c-white);
	font-weight: 400;
}

@media (max-width: 860px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		padding: 0 24px;
		gap: 40px;
		justify-items: center;
		text-align: center;
	}
	.site-brand--footer { justify-content: center; }
	.site-footer__about { margin-inline: auto; }
	.social-list { justify-content: center; }
	.site-footer__columns { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.site-footer__legal { padding-inline: 24px; }
}

@media (max-width: 480px) {
	.site-footer__columns { grid-template-columns: 1fr; }
}

/* =============================================================
   Generic page / archive (fallback templates)
   ============================================================= */
.single-page, .generic-archive {
	/* padding-block only — using the `padding: X 0` shorthand here zeroed out the
	   horizontal gutters (overriding the .container class), which made the cart
	   and other page.php pages sit flush to the screen edges on mobile. */
	padding-block: clamp(40px, 6vw, 80px);
	padding-inline: var(--container-pad);
	max-width: 820px;
	margin-inline: auto;
}
.page-header { margin-bottom: 28px; }
.page-title {
	font-size: clamp(28px, 4vw, 42px);
	letter-spacing: 2px;
	font-weight: 700;
}
.post-card {
	padding: 24px 0;
	border-bottom: 1px solid var(--c-grey-100);
}
.post-card__title { margin: 12px 0; }

/* =============================================================
   CRISIS — Timeline
   ============================================================= */
.crisis-timeline {
	background: var(--c-white);
	padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px);
	position: relative;
	overflow: hidden;
}
.crisis-timeline__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--container-pad);
	position: relative;
}
.crisis-timeline__entry {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(36px, 6vw, 110px);
	position: relative;
	z-index: 1;
	padding: clamp(28px, 4vw, 56px) 0;
	align-items: start;
}
.crisis-timeline__text {
	text-align: right;
	padding-right: clamp(8px, 1.5vw, 28px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.crisis-timeline__entry--reverse .crisis-timeline__text {
	order: 2;
	text-align: left;
	padding-right: 0;
	padding-left: clamp(8px, 1.5vw, 28px);
	align-items: flex-start;
}
.crisis-timeline__entry--reverse .crisis-timeline__photo {
	order: 1;
}
.crisis-timeline__year {
	display: inline-block;
	background: var(--c-navy);
	color: var(--c-white);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(15px, 1.6vw, 20px);
	letter-spacing: 1.4px;
	padding: 7px 26px;
	border-radius: 30px;
	margin-bottom: clamp(20px, 3vw, 36px);
	text-transform: none;
}
.crisis-timeline__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.15;
	color: var(--c-black);
	margin: 0 0 clamp(16px, 2.5vw, 26px);
}
.crisis-timeline__body p {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 24px;
	color: var(--c-black);
	margin: 0 0 14px;
}
.crisis-timeline__body p:last-child { margin-bottom: 0; }
.crisis-timeline__photo {
	position: relative;
}
.crisis-timeline__frame {
	--off: clamp(16px, 2.4vw, 26px);
	--off-y: clamp(13px, 2vw, 24px);
	position: absolute;
	/* Sized to match the image (same aspect) and shifted down-right, so the blue
	   hugs the photo instead of stretching down past the credit line. Scales with
	   the viewport to read the same at every breakpoint. */
	top: var(--off-y);
	left: var(--off);
	width: 100%;
	aspect-ratio: 425 / 302;
	background: var(--c-blue);
	border-radius: 15px;
	z-index: 0;
}
.crisis-timeline__photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 425 / 302;
	object-fit: cover;
	border-radius: 15px;
}
.crisis-timeline__embed {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 425 / 302;
	border-radius: 15px;
	overflow: hidden;
	background: var(--c-navy);
}
.crisis-timeline__embed > * {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	border: 0;
}
.crisis-timeline__embed iframe { display: block; }
.crisis-timeline__credit {
	position: relative;
	z-index: 1;
	/* Clear the blue offset card, which now peeks below the image. */
	margin: clamp(24px, 3vw, 36px) 0 0;
	font-family: 'Quicksand', sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.91px;
	color: var(--c-black);
}
/* Vertical dashed line: full height of the content. The faint track shows the
   whole path; the navy fill (a matching dashed line) grows from the top as you
   scroll. Node dots light up as the fill passes them. */
.crisis-timeline__line {
	position: absolute;
	left: 50%;
	top: clamp(40px, 5vw, 72px);
	bottom: clamp(40px, 5vw, 72px);
	width: 3px;
	transform: translateX(-50%);
	background-image: linear-gradient(to bottom, var(--c-grey-500) 50%, transparent 50%);
	background-size: 3px 24px;
	background-repeat: repeat-y;
	pointer-events: none;
	z-index: 0;
}
.crisis-timeline__line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-image: linear-gradient(to bottom, var(--c-navy) 50%, transparent 50%);
	background-size: 3px 24px;
	background-repeat: repeat-y;
}
.crisis-timeline__dot {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--c-white);
	border: 3px solid rgba(36, 44, 56, 0.3);
	pointer-events: none;
	z-index: 2;
	transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.crisis-timeline.is-anim .crisis-timeline__entry.is-visible .crisis-timeline__dot {
	background: var(--c-navy);
	border-color: var(--c-navy);
	transform: translate(-50%, -50%) scale(1.15);
}

/* Scrubbed reveal: entries rise + fade as the line's fill reaches them.
   The hidden state is gated on .is-anim (added by JS) so the timeline renders
   fully visible without JS or when reduced motion is requested. */
.crisis-timeline.is-anim .crisis-timeline__entry {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.crisis-timeline.is-anim .crisis-timeline__entry.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.crisis-timeline.is-anim .crisis-timeline__entry {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 860px) {
	.crisis-timeline__entry {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-left: 46px;
	}
	.crisis-timeline__text,
	.crisis-timeline__entry--reverse .crisis-timeline__text {
		order: 2;
		text-align: left;
		align-items: flex-start;
		padding: 0;
	}
	.crisis-timeline__photo,
	.crisis-timeline__entry--reverse .crisis-timeline__photo {
		order: 1;
	}
	/* The line lives in __inner (inside the container padding); the dots live in
	   each entry (which starts after that padding). Add the padding to the line's
	   offset so both land on the same x and the dots sit on the line. */
	.crisis-timeline__line { left: calc(var(--container-pad) + 22px); transform: translateX(-50%); }
	.crisis-timeline__dot { left: 22px; }
}

/* =============================================================
   CRISIS — This Moment Matters (split image + copy)
   ============================================================= */
.crisis-moment {
	background: var(--c-cream);
}
.crisis-moment__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	min-height: clamp(380px, 42vw, 540px);
}
.crisis-moment__media {
	align-self: stretch;
}
.crisis-moment__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: clamp(380px, 42vw, 540px);
}
.crisis-moment__copy {
	padding: clamp(36px, 5vw, 72px) clamp(40px, 6vw, 96px) clamp(36px, 5vw, 72px) clamp(40px, 5vw, 76px);
	max-width: 620px;
	justify-self: start;
}
.crisis-moment__title {
	display: inline-block;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.15;
	color: var(--c-navy);
	margin: 0 0 32px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--c-orange);
}
.crisis-moment__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 24px;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.crisis-moment__body:last-of-type { margin-bottom: 30px; }
.crisis-moment__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-navy);
	border-radius: 5px;
	padding: 8px 22px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.98px;
	color: var(--c-navy);
	text-decoration: none;
	background: transparent;
	transition: background-color 150ms ease, color 150ms ease;
}
.crisis-moment__btn:hover,
.crisis-moment__btn:focus {
	background: var(--c-navy);
	color: var(--c-white);
	text-decoration: none;
}

@media (max-width: 860px) {
	.crisis-moment__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.crisis-moment__media img {
		aspect-ratio: 622 / 501;
		min-height: 0;
	}
	.crisis-moment__copy {
		padding: clamp(28px, 6vw, 48px) var(--container-pad);
		max-width: none;
	}
}

/* =============================================================
   Hearts Behind the Rescue page
   ============================================================= */

.hearts-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	padding: clamp(56px, 8vw, 100px) 0 clamp(56px, 8vw, 90px);
}
/* Trail overlays the photo row and weaves through it (z-index 1, between the
   alternating photo z-indexes below). */
.hearts-hero__trail-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 118%;
	aspect-ratio: 1086 / 296;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1;
	line-height: 0;
}
.hearts-hero__trail { width: 100%; height: 100%; display: block; }
.hearts-hero__butterfly {
	width: clamp(34px, 4vw, 56px);
	height: auto;
	z-index: 5;
}
.hearts-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(48px, 7vw, 88px);
	text-align: center;
}
.hearts-hero__title {
	font-size: clamp(32px, 5vw, 50px);
	font-weight: 600;
	letter-spacing: 3.5px;
	margin: 0;
	max-width: 892px;
}
.hearts-hero__photos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2.5vw, 28px);
	width: 100%;
	max-width: 1180px;
}
.hearts-hero__photo {
	aspect-ratio: 264 / 278;
	border-radius: 14px;
	overflow: hidden;
	background: var(--c-navy-soft);
}
.hearts-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Weave the trail (z-index 1) through the row: behind #1, over #2, under #3,
   over #4 — by alternating each photo's z-index above/below the trail. */
.hearts-hero__photo--1 { transform: rotate(-3deg); z-index: 2; }
.hearts-hero__photo--2 { transform: rotate(2deg) translateY(40px); z-index: 0; }
.hearts-hero__photo--3 { transform: rotate(-1deg); z-index: 2; }
.hearts-hero__photo--4 { transform: rotate(3deg) translateY(40px); z-index: 0; }

/* Photos fade in as the butterfly weaves across them (main.js toggles
   .is-visible). Opacity-only so each photo keeps its rotation. Gated on .js. */
html.js .hearts-hero__photo { opacity: 0; transition: opacity 0.6s ease; }
html.js .hearts-hero__photo.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	html.js .hearts-hero__photo { opacity: 1; transition: none; }
}

@media (max-width: 860px) {
	.hearts-hero__photos { grid-template-columns: repeat(2, 1fr); }
	.hearts-hero__photo--2,
	.hearts-hero__photo--4 { transform: none; }
}

/* ---- Intro band ---- */
.hearts-intro {
	padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 6vw, 64px);
	text-align: center;
}
.hearts-intro__inner { max-width: 880px; }
.hearts-intro__title {
	font-size: clamp(26px, 3.4vw, 35px);
	font-weight: 700;
	letter-spacing: 2.45px;
	margin: 0 0 28px;
}
.hearts-intro__body {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.12px;
	color: var(--c-navy);
	margin: 0 auto;
	max-width: 752px;
}

/* ---- Founder spotlight ---- */
.hearts-founder {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 96px) 0;
}
.hearts-founder__trail-wrap {
	position: absolute;
	left: clamp(-70px, -4vw, -36px);
	/* Keep the top-right end (where the butterfly rests) below the section's top
	   edge, otherwise overflow:hidden clips the butterfly. */
	top: clamp(34px, 4vw, 62px);
	width: clamp(460px, 52vw, 760px);
	aspect-ratio: 584 / 487;
	z-index: 3;
	pointer-events: none;
	line-height: 0;
}
.hearts-founder__trail { width: 100%; height: 100%; display: block; }
.hearts-founder__butterfly {
	width: clamp(38px, 4vw, 58px);
	height: auto;
	z-index: 5;
}
.hearts-founder__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.hearts-founder__media {
	position: relative;
	min-height: 519px;
}
.hearts-founder__photo {
	width: 100%;
	height: 519px;
	object-fit: cover;
	border-radius: 15px;
}
.hearts-founder__accent {
	position: absolute;
	right: -30px;
	bottom: -40px;
	width: 244px;
	height: 251px;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid var(--c-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	z-index: 2;
}
.hearts-founder__copy { padding-top: clamp(0px, 3vw, 32px); }
.hearts-founder__role {
	font-size: 12px;
	letter-spacing: 0.84px;
	text-transform: uppercase;
	margin: 0 0 24px;
	color: var(--c-navy);
}
.hearts-founder__name {
	font-size: clamp(26px, 3.4vw, 35px);
	font-weight: 700;
	letter-spacing: 2.45px;
	margin: 0 0 28px;
	color: var(--c-navy);
}
.hearts-founder__bio {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.12px;
	color: var(--c-navy);
}
.hearts-founder__bio p { margin: 0 0 1em; }
.hearts-founder__bio p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.hearts-founder__inner { grid-template-columns: 1fr; }
	.hearts-founder__media { min-height: 0; }
	.hearts-founder__photo { height: auto; aspect-ratio: 469 / 519; }
	.hearts-founder__accent {
		position: relative;
		right: auto;
		left: auto;
		bottom: auto;
		transform: none;
		margin: -60px auto 0;
		display: block;
	}
}

/* ---- Board cards (2-up) ---- */
.hearts-board {
	padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 7vw, 96px);
}
.hearts-board__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(24px, 3vw, 40px);
}
.hearts-board-card {
	display: flex;
	flex-direction: column;
}
/* Board cards (VP / Treasurer) rise in from the bottom on scroll (main.js
   toggles .is-visible). Gated on .js with a reduced-motion fallback. */
html.js .hearts-board-card {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
html.js .hearts-board-card:nth-child(2) { transition-delay: 0.12s; }
html.js .hearts-board-card.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js .hearts-board-card { opacity: 1; transform: none; transition: none; }
}
.hearts-board-card__frame {
	position: relative;
	background: var(--c-grey-100);
	border-radius: 15px;
	overflow: hidden;
}
.hearts-board-card__media {
	position: relative;
	aspect-ratio: 1 / 1; /* match the square source photos so heads aren't cropped */
	overflow: hidden;
}
.hearts-board-card__pet {
	position: absolute;
	right: 6%;
	bottom: 24px;
	width: 32%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	background: #fff;
}
.hearts-board-card__pet img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hearts-board-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* anchor to the top so heads are never cropped */
}
.hearts-board-card__band {
	background: var(--c-cyan);
	color: var(--c-navy);
	padding: 18px 22px;
}
/* Cycle the band colour like the team cards: cyan → purple → lime. */
.hearts-board-card:nth-child(3n + 2) .hearts-board-card__band { background: var(--c-purple); }
.hearts-board-card:nth-child(3n + 3) .hearts-board-card__band { background: var(--c-lime); }
.hearts-board-card__name {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: 2.1px;
	margin: 0 0 6px;
	color: var(--c-navy);
}
.hearts-board-card__role {
	font-size: 12px;
	letter-spacing: 0.84px;
	text-transform: uppercase;
	margin: 0;
	color: rgba(36, 44, 56, 0.7);
	font-weight: 400;
}
.hearts-board-card__bio {
	padding: 20px 22px 28px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.12px;
	color: var(--c-navy);
}
.hearts-board-card__bio p { margin: 0 0 1em; }
.hearts-board-card__bio p:last-child { margin: 0; }

@media (max-width: 720px) {
	.hearts-board__grid { grid-template-columns: 1fr; }
}

/* ---- Team grid (4-up) ---- */
.hearts-team {
	padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
}
.hearts-team__heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: clamp(40px, 6vw, 80px);
	align-items: start;
	margin-bottom: clamp(40px, 6vw, 64px);
}
.hearts-team__title {
	position: relative;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: 2.1px;
	margin: 0;
	color: var(--c-navy);
}
.hearts-team__paw {
	position: absolute;
	top: -6px;
	right: 4px;
	width: clamp(28px, 3.2vw, 38px);
	height: auto;
	transform: rotate(8deg);
	pointer-events: none;
}
.hearts-team__lede {
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.4;
	color: var(--c-navy);
	margin: 0;
}
.hearts-team__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.5vw, 32px);
}
.hearts-tm {
	display: flex;
	flex-direction: column;
}
.hearts-tm__frame {
	position: relative;
}
.hearts-tm__media {
	background: var(--c-grey-100);
	border-radius: 9px 9px 0 0;
	aspect-ratio: 1 / 1; /* match the square source photos so heads aren't cropped */
	overflow: hidden;
}
.hearts-tm__pet {
	position: absolute;
	right: 8%;
	bottom: 14px;
	width: 34%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
	background: #fff;
}
.hearts-tm__pet img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hearts-tm__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* anchor to the top so heads are never cropped */
}
.hearts-tm__band {
	background: var(--c-cyan);
	color: var(--c-navy);
	border-radius: 0 0 9px 9px;
	padding: 12px 18px 14px;
	text-align: center;
}
/* Cycle the band colour: cyan → purple → lime across the row. */
.hearts-tm:nth-child(3n + 2) .hearts-tm__band { background: var(--c-purple); }
.hearts-tm:nth-child(3n + 3) .hearts-tm__band { background: var(--c-lime); }
.hearts-tm__name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1.14px;
	margin: 0 0 4px;
	color: var(--c-navy);
}
.hearts-tm__role {
	font-size: 10px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	font-weight: 300;
	margin: 0;
	color: rgba(36, 44, 56, 0.7);
}
.hearts-tm__bio {
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: 0.82px;
	color: var(--c-navy);
	text-align: center;
}

@media (max-width: 1024px) {
	.hearts-team__heading { grid-template-columns: 1fr; }
	.hearts-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.hearts-team__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   FAQs page
   ============================================================= */
.faqs-hero {
	background: var(--c-navy);
	color: var(--c-white);
	position: relative;
	overflow: hidden; /* keep the flight trail within the navy band */
	padding: clamp(48px, 7vw, 130px) 0;
	text-align: center;
}
.faqs-hero__inner { position: relative; z-index: 2; }
/* Title with the flight trail tucked to its left, per the Figma hero. */
.faqs-hero__titlewrap {
	position: relative;
	display: inline-block;
}
.faqs-hero__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: 3.5px;
	line-height: 1.15;
	color: var(--c-white);
	margin: 0;
}
/* Trail sits just left of the title; the reversed flight parks the butterfly at
   the trail's top-right corner — i.e. at the title's top-left. */
.faqs-hero__trail-wrap {
	position: absolute;
	right: calc(100% + 4px);
	top: -10px;
	width: clamp(240px, 34vw, 540px);
	aspect-ratio: 563 / 158;
	z-index: 1;
	pointer-events: none;
	line-height: 0;
}
.faqs-hero__trail { width: 100%; height: 100%; display: block; }
.faqs-hero__butterfly {
	width: clamp(34px, 3.8vw, 52px);
	height: auto;
	z-index: 5;
}

@media (max-width: 720px) {
	/* Trail would run off the left of the centred title on small screens. */
	.faqs-hero__trail-wrap { display: none; }
}

.faqs-main {
	background: var(--c-white);
	padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 9vw, 120px);
	position: relative;
}
.faqs-main__inner {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.faq-cats {
	background: linear-gradient(180deg, var(--c-cream) 0%, #fef0e3 100%);
	border: 1px solid rgba(36, 44, 56, 0.06);
	border-radius: var(--radius-md);
	padding: 28px 24px;
	position: sticky;
	top: 24px;
	box-shadow: 0 2px 0 rgba(36, 44, 56, 0.04);
}
.faq-cats__heading {
	font-family: 'Quicksand', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-navy);
	margin: 0 0 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	opacity: 0.7;
	line-height: 1;
}
.faq-cats__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.faq-cats__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 11px 16px;
	border-radius: 999px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1.05px;
	line-height: 1.2;
	color: var(--c-navy);
	text-align: left;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.faq-cats__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-grey-300);
	flex: 0 0 8px;
	transition: background 0.18s ease, transform 0.18s ease;
}
.faq-cats__item:hover {
	background: rgba(36, 44, 56, 0.06);
}
.faq-cats__item:hover .faq-cats__dot {
	background: var(--c-cyan);
	transform: scale(1.4);
}
.faq-cats__item:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 2px;
}
.faq-cats__item.is-active {
	background: var(--c-navy);
	color: var(--c-lime);
	box-shadow: 0 6px 18px -8px rgba(36, 44, 56, 0.5);
}
.faq-cats__item.is-active .faq-cats__dot {
	background: var(--c-lime);
	transform: scale(1.4);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
	width: 100%;
}
.faq-list__empty {
	color: var(--c-grey-700);
	font-style: italic;
	margin: 0;
}
.faq-row {
	background: var(--c-white);
	border: 1px solid rgba(36, 44, 56, 0.08);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}
.faq-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--c-cyan);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.faq-row:hover {
	border-color: rgba(36, 44, 56, 0.16);
	box-shadow: 0 8px 24px -16px rgba(36, 44, 56, 0.3);
}
.faq-row.is-open {
	border-color: var(--c-navy);
	box-shadow: 0 14px 32px -20px rgba(36, 44, 56, 0.45);
}
.faq-row.is-open::before { opacity: 1; background: var(--c-lime); }
.faq-row[hidden] { display: none; }
.faq-row__toggle {
	width: 100%;
	min-height: 68px;
	display: grid;
	grid-template-columns: 1fr 36px;
	align-items: center;
	gap: 16px;
	padding: 16px 20px 16px 24px;
	background: transparent;
	border: 0;
	color: var(--c-navy);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(15px, 1.45vw, 18px);
	letter-spacing: 0.9px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.faq-row__toggle:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: -2px;
	border-radius: 14px;
}
.faq-row__question { color: var(--c-navy); }
.faq-row__icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-navy);
	color: var(--c-lime);
	border-radius: 50%;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	transition: transform 0.25s ease, background 0.2s ease;
}
.faq-row__toggle:hover .faq-row__icon {
	background: var(--c-cyan);
	color: var(--c-white);
}
.faq-row.is-open .faq-row__icon {
	background: var(--c-lime);
	color: var(--c-navy);
	transform: rotate(180deg);
}
.faq-row__body {
	padding: 4px 24px 22px;
	color: var(--c-navy);
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: 0.3px;
	border-top: 1px dashed rgba(36, 44, 56, 0.1);
	margin-top: 0;
}
.faq-row__body[hidden] { display: none; }
.faq-row__body > :first-child { margin-top: 14px; }
.faq-row__body > :last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.faqs-hero__paw--left,
	.faqs-hero__paw--right { display: none; }
	.faqs-main__inner { grid-template-columns: 1fr; }
	.faq-cats {
		position: static;
		padding: 16px;
	}
	.faq-cats__heading { font-size: 22px; margin-bottom: 10px; }
	.faq-cats__list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}
	.faq-cats__item {
		flex: 0 0 auto;
		font-size: 13px;
		padding: 8px 14px;
		background: var(--c-white);
		white-space: nowrap;
	}
	.faq-list { max-width: none; }
}

/* =============================================================
   Adoption Resources page
   ============================================================= */

/* ---- Hero band ---------------------------------------------- */
.ar-hero {
	background: var(--c-navy);
	color: var(--c-white);
	position: relative;
	overflow: hidden;
	padding: clamp(44px, 6vw, 80px) 0 clamp(64px, 8vw, 110px);
}
.ar-hero__inner {
	position: relative;
	z-index: 3;
	text-align: left;
}
.ar-hero__eyebrow { margin-bottom: 16px; }
.ar-hero__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: 3.5px;
	line-height: 1.15;
	color: var(--c-white);
	margin: 0;
}
.ar-hero__trail-wrap {
	position: absolute;
	left: -15%;
	top: 25%;
	width: 110%;
	aspect-ratio: 1315 / 260;
	z-index: 1;
	pointer-events: none;
	line-height: 0;
}
.ar-hero__trail { width: 100%; height: 100%; display: block; }
.ar-hero__butterfly {
	position: absolute;
	left: 99.16%;
	top: 19.97%;
	transform: translate(-50%, -50%);
	width: clamp(34px, 4vw, 56px);
	height: auto;
	z-index: 3;
}
.ar-hero__texture {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.08;
	mix-blend-mode: multiply;
	z-index: 2;
	pointer-events: none;
}
.ar-hero__paw {
	position: absolute;
	right: 6%;
	bottom: 8%;
	width: clamp(80px, 9vw, 120px);
	height: auto;
	opacity: 0.14;
	transform: rotate(-12deg);
	z-index: 2;
	pointer-events: none;
}

/* ---- Start Here intro --------------------------------------- */
.ar-intro {
	background: var(--c-white);
	padding: clamp(56px, 7vw, 96px) 0;
	position: relative;
	overflow: hidden;
}
.ar-intro__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.ar-intro__trail {
	position: absolute;
	left: -20px;
	top: -10px;
	width: 140px;
	height: auto;
	opacity: 0.18;
	z-index: 0;
	pointer-events: none;
}
.ar-intro__paw {
	position: absolute;
	right: 0;
	top: -10px;
	width: 60px;
	height: auto;
	opacity: 0.22;
	z-index: 0;
	pointer-events: none;
}
.ar-intro__heading-col {
	position: relative;
	z-index: 1;
}
.ar-intro__heading {
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ar-intro__heading-line--soft { font-weight: 600; }
.ar-intro__heading-line--bold { font-weight: 700; }
.ar-intro__rule {
	display: block;
	width: 56px;
	height: 3px;
	background: var(--c-lime);
	margin-top: 12px;
}
.ar-intro__body-col {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ar-intro__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.33;
	color: var(--c-navy);
	max-width: 540px;
	margin: 0;
}

/* ---- Resource cards grid ------------------------------------ */
.ar-resources {
	background: var(--c-cream);
	padding: clamp(64px, 8vw, 120px) 0;
	scroll-margin-top: 80px;
}
.ar-resources__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3.5vw, 48px);
}
.ar-resources__empty {
	font-family: 'Quicksand', sans-serif;
	font-style: italic;
	color: var(--c-grey-700);
	text-align: center;
	font-size: 18px;
	margin: 0;
}

.ar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 320px;
	background: var(--c-white);
	border-radius: 15px;
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 8px 24px -12px rgba(36, 44, 56, 0.18);
	padding: 28px 26px 22px;
	text-decoration: none;
	color: var(--c-navy);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: visible;
}
.ar-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -14px rgba(36, 44, 56, 0.28);
	text-decoration: none;
	opacity: 1;
}
.ar-card:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 4px;
}

.ar-card__pill {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	line-height: 1.4;
	z-index: 3;
}
.ar-card--orange .ar-card__pill { background: #f17a3d; }
.ar-card--purple .ar-card__pill { background: #8e63b8; }
.ar-card--mauve  .ar-card__pill { background: #d9c2e0; }
.ar-card--green  .ar-card__pill { background: var(--c-lime); }
.ar-card__pill--light-text { color: var(--c-white); }
.ar-card__pill--dark-text  { color: var(--c-navy); }

.ar-card__visual {
	position: relative;
	width: 108px;
	height: 108px;
	margin-bottom: 20px;
	flex: 0 0 auto;
}
.ar-card__frame {
	position: absolute;
	left: 12px;
	top: 12px;
	width: 96px;
	height: 96px;
	border-radius: 12px;
	display: block;
	z-index: 0;
	transition: transform 0.2s ease;
}
.ar-card__logo {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 12px;
	background: var(--c-white);
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid rgba(36, 44, 56, 0.08);
	z-index: 1;
	display: block;
}
.ar-card__logo--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 36px;
	color: var(--c-navy);
	letter-spacing: 0;
	padding: 0;
}
.ar-card:hover .ar-card__frame { transform: translate(2px, 2px); }

.ar-card__name {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 1.05px;
	line-height: 1.25;
	color: var(--c-navy);
	margin: 0 0 8px;
}
.ar-card__desc {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-grey-700);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ar-card__cta {
	margin-top: auto;
	padding-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ar-card__cta-label {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--c-navy);
}
.ar-card__arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c-cyan);
	color: var(--c-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
	flex: 0 0 auto;
}
.ar-card:hover .ar-card__arrow {
	background: var(--c-navy);
	transform: translateX(2px);
}

/* ---- Pagination --------------------------------------------- */
.ar-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(40px, 5vw, 64px);
	flex-wrap: wrap;
}
.ar-page {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--c-white);
	border: 1px solid rgba(36, 44, 56, 0.12);
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--c-navy);
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ar-page:hover {
	background: rgba(36, 44, 56, 0.06);
	transform: translateY(-1px);
	text-decoration: none;
	opacity: 1;
}
.ar-page:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 2px;
}
.ar-page--active {
	background: var(--c-navy);
	color: var(--c-lime);
	border-color: transparent;
	box-shadow: 0 6px 18px -8px rgba(36, 44, 56, 0.5);
}
.ar-page--active:hover {
	background: var(--c-navy);
	color: var(--c-lime);
}
.ar-page--disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ---- Why It Matters navy moment ----------------------------- */
.ar-why {
	background: var(--c-navy);
	color: var(--c-white);
	position: relative;
	overflow: hidden;
	padding: clamp(72px, 9vw, 120px) 0;
}
.ar-why__texture {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.08;
	mix-blend-mode: multiply;
	z-index: 1;
	pointer-events: none;
}
.ar-why__paw {
	position: absolute;
	left: 4%;
	bottom: 4%;
	width: clamp(180px, 22vw, 280px);
	height: auto;
	opacity: 0.12;
	transform: rotate(15deg);
	z-index: 1;
	pointer-events: none;
}
.ar-why__butterfly {
	position: absolute;
	top: 8%;
	right: 8%;
	width: 56px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	z-index: 2;
	pointer-events: none;
}
.ar-why__inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.ar-why__eyebrow { margin-bottom: 18px; }
.ar-why__heading {
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(28px, 3.6vw, 38px);
	letter-spacing: 2.45px;
	line-height: 1.2;
	color: var(--c-white);
	margin: 0;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ar-why__heading-line--soft { font-weight: 600; }
.ar-why__heading-line--bold { font-weight: 700; }
.ar-why__heading strong { font-weight: 700; }
.ar-why__rule {
	display: block;
	width: 56px;
	height: 3px;
	background: var(--c-lime);
	margin-top: 16px;
}
.ar-why__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 24px;
	max-width: 560px;
}
.ar-why__cta {
	padding: 12px 22px;
	font-size: 14px;
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 900px) {
	.ar-hero {
		padding: 64px 0 96px;
	}
	.ar-hero__inner { text-align: left; }
	.ar-hero__trail-wrap { left: -25%; }
	.ar-hero__butterfly { left: auto; right: 8%; transform: translate(0, -50%); }

	.ar-intro__inner { grid-template-columns: 1fr; }
	.ar-intro__heading-col { padding-bottom: 24px; }

	.ar-resources__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

	.ar-why__inner { grid-template-columns: 1fr; }
	.ar-why__butterfly { top: 24px; right: 16px; }
	.ar-why__paw { width: 180px; }
}

@media (max-width: 540px) {
	.ar-resources__grid { grid-template-columns: 1fr; }
	.ar-card__pill {
		font-size: 10px;
		padding: 3px 10px;
	}
}

/* =============================================================
   Contact page
   ============================================================= */

.contact-section {
	background: var(--c-white);
	position: relative;
	padding: clamp(56px, 7vw, 96px) 0;
	overflow: hidden;
}
.contact-section__trail {
	position: absolute;
	top: 24px;
	left: -8px;
	width: 140px;
	opacity: 0.18;
	pointer-events: none;
}

/* ---- Intro band -------------------------------------------- */
.contact-intro {
	position: relative;
	max-width: 720px;
	margin: 0 0 48px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.contact-intro__butterfly {
	position: absolute;
	top: -10px;
	right: 0;
	width: clamp(34px, 4vw, 56px);
	opacity: 0.9;
	transform: rotate(-8deg);
	pointer-events: none;
}
.contact-intro__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.84px;
	text-transform: uppercase;
	color: var(--c-navy);
	margin: 0 0 16px;
}
.contact-intro__heading {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: 3.5px;
	color: var(--c-navy);
	margin: 0 0 22px;
	padding-bottom: 8px;
	line-height: 1.05;
	border-bottom: 3px solid var(--c-lime);
}
.contact-intro__rule {
	display: none;
}
.contact-intro__body {
	font-family: var(--font-sans);
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.55;
	color: var(--c-navy);
	max-width: 540px;
	margin: 0;
}

/* ---- Inquiry picker (dropdown) ----------------------------- */
.contact-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 32px 0 24px;
}
.contact-picker__label {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 1.4px;
	color: var(--c-navy);
}
.contact-picker__select-wrap {
	position: relative;
	display: inline-block;
}
.contact-picker__select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 280px;
	height: 48px;
	padding: 0 44px 0 18px;
	background: var(--c-white);
	border: 1px solid var(--c-navy);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.05px;
	color: var(--c-navy);
	cursor: pointer;
}
.contact-picker__select:focus {
	outline: 2px solid var(--c-cyan);
	outline-offset: 2px;
}
.contact-picker__caret {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	color: var(--c-navy);
	pointer-events: none;
}

/* ---- Grid layout (desktop default) ------------------------- */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px 290px;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}
.contact-grid--no-panel {
	grid-template-columns: minmax(0, 1fr) 240px;
}

/* ---- Form -------------------------------------------------- */
.contact-form-col {
	min-width: 0;
}
.contact-form__alert {
	background: #fdf3f1;
	border: 1px solid var(--c-error);
	border-radius: 5px;
	padding: 12px 16px;
	color: var(--c-navy);
	font-family: var(--font-sans);
	font-size: 14px;
	margin: 0 0 16px;
}
.contact-form__alert[hidden] { display: none; }

.contact-form__grid {
	display: grid;
	gap: 18px 16px;
	grid-template-columns: 1fr 1fr;
}
.contact-field--half { grid-column: span 1; }
.contact-field--full { grid-column: 1 / -1; }

.contact-field { display: flex; flex-direction: column; min-width: 0; }
.contact-field__label {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.05px;
	text-transform: uppercase;
	color: var(--c-navy);
	margin: 0 0 6px;
}
.contact-field__req {
	color: var(--c-orange);
	margin-left: 3px;
}
.contact-field input,
.contact-field textarea,
.contact-field select {
	width: 100%;
	background: var(--c-grey-100);
	border: 1px solid rgba(36, 44, 56, 0.12);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font: 400 16px/1.3 var(--font-sans);
	letter-spacing: 0.5px;
	color: var(--c-navy);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.contact-field select { cursor: pointer; }
/* Volunteer & Foster field group: participates in the form grid when shown,
   fully removed when hidden. */
.contact-form__vf { display: contents; }
.contact-form__vf[hidden] { display: none; }
.contact-field input:hover,
.contact-field textarea:hover {
	border-color: rgba(36, 44, 56, 0.24);
}
.contact-field input:focus,
.contact-field textarea:focus {
	outline: none;
	border-color: var(--c-cyan);
	box-shadow: 0 0 0 3px rgba(25, 199, 247, 0.18);
	background: var(--c-white);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: var(--c-grey-700);
	font-weight: 300;
}
.contact-field textarea {
	min-height: 180px;
	resize: vertical;
	font-family: var(--font-sans);
}
.contact-field.is-invalid input,
.contact-field.is-invalid textarea {
	border-color: var(--c-error);
	background: #fdf3f1;
}
.contact-field__error {
	margin-top: 6px;
	color: var(--c-error);
	font-size: 13px;
	letter-spacing: 0.4px;
}
.contact-field__error[hidden] { display: none; }

/* ---- Submit row -------------------------------------------- */
.contact-form__submit-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
}
.contact-form__submit {
	padding: 14px 28px;
	font-size: 15px;
	min-width: 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.contact-form__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 247, 241, 0.4);
	border-top-color: var(--c-lime);
	border-radius: 50%;
	animation: et-spin 0.7s linear infinite;
}
.contact-form.is-submitting .contact-form__submit {
	opacity: 0.7;
	cursor: progress;
}
.contact-form.is-submitting .contact-form__spinner {
	display: inline-block;
}
.contact-form__legal {
	font-size: 11px;
	color: var(--c-grey-700);
	line-height: 1.5;
	margin: 0;
}
.contact-form__legal a {
	color: var(--c-grey-700);
	text-decoration: underline;
}
.contact-form__legal a:hover { color: var(--c-cyan); }

@keyframes et-spin { to { transform: rotate(360deg); } }

/* ---- Success state ----------------------------------------- */
.contact-success {
	background: var(--c-cream);
	border: 1px solid var(--c-lime);
	border-radius: var(--radius-md);
	padding: clamp(28px, 4vw, 44px);
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	align-items: start;
}
.contact-success[hidden] { display: none; }
.contact-success__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-cyan);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
}
.contact-success__heading {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 22px;
	color: var(--c-navy);
	margin: 0 0 8px;
	letter-spacing: 0.8px;
}
.contact-success__body {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.contact-success__reset { font-size: 13px; padding: 8px 18px; }

/* ---- Sidebar tabs ------------------------------------------ */
.contact-tabs {
	background: linear-gradient(180deg, var(--c-cream) 0%, #fef0e3 100%);
	border: 1px solid rgba(36, 44, 56, 0.06);
	border-radius: var(--radius-md);
	padding: 24px 20px;
	position: sticky;
	top: 24px;
	box-shadow: 0 2px 0 rgba(36, 44, 56, 0.04);
}
.contact-tabs__heading {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--c-navy);
	margin: 0 0 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	opacity: 0.7;
	line-height: 1;
}
.contact-tabs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.contact-tabs__item {
	/* Inherits .faq-cats__item geometry via shared class on the markup. */
}
.contact-tabs__urgent {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	display: inline-block;
}

/* ---- Right panel ------------------------------------------- */
.contact-panel-col {
	min-width: 0;
	position: relative;
}
.contact-panel {
	position: sticky;
	top: 24px;
	background: var(--c-cream);
	border: 1px solid rgba(36, 44, 56, 0.08);
	border-radius: var(--radius-md);
	padding: clamp(20px, 3vw, 32px);
	box-shadow: 0 2px 0 rgba(36, 44, 56, 0.04);
}
.contact-panel[hidden] { display: none; }
.contact-panel__deco {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 28px;
	opacity: 0.18;
	pointer-events: none;
}
.contact-panel__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--c-orange);
	color: var(--c-white);
	font: 700 11px/1 var(--font-sans);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.contact-panel__heading {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 20px;
	color: var(--c-navy);
	letter-spacing: 1.4px;
	margin: 0 0 8px;
}
.contact-panel__intro {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(36, 44, 56, 0.78);
	margin: 0 0 18px;
}
.contact-panel__items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.contact-panel__item {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 10px;
	align-items: start;
}
.contact-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--c-cyan);
	margin-top: 2px;
}
.contact-panel__item-body { min-width: 0; }
.contact-panel__item-label {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba(36, 44, 56, 0.7);
	margin: 0 0 2px;
}
.contact-panel__item-value {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-navy);
	letter-spacing: 0.5px;
}
.contact-panel__item a {
	color: var(--c-navy);
	text-decoration: none;
	transition: color 0.18s ease;
}
.contact-panel__item a:hover {
	color: var(--c-cyan);
	text-decoration: underline;
}
.contact-panel__item a:focus-visible {
	outline: 2px solid var(--c-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}
.contact-panel__cta {
	margin-top: 20px;
	align-self: start;
	padding: 12px 22px;
}
.contact-panel--urgent {
	border-left: 4px solid var(--c-orange);
}

/* ---- Responsive -------------------------------------------- */
@media (min-width: 768px) {
	.contact-picker { justify-content: flex-start; }
}

@media (max-width: 1023px) {
	.contact-grid,
	.contact-grid--no-panel {
		grid-template-columns: 1fr;
	}
	.contact-tabs {
		position: static;
		padding: 16px;
		order: -1; /* tabs above form */
	}
	.contact-tabs__heading { font-size: 13px; margin-bottom: 10px; }
	.contact-tabs__list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}
	.contact-tabs__item.faq-cats__item {
		flex: 0 0 auto;
		background: var(--c-white);
		white-space: nowrap;
		font-size: 13px;
		padding: 8px 14px;
	}
	.contact-panel,
	.contact-panel-col { position: static; }
}

@media (max-width: 767px) {
	.contact-picker { justify-content: flex-start; }
	.contact-picker__label { font-size: 18px; }
	.contact-tabs { display: none; }
	.contact-form__grid { grid-template-columns: 1fr; }
	.contact-field--half { grid-column: 1 / -1; }
	.contact-form__submit {
		width: 100%;
		min-width: 0;
	}
	.contact-form__submit-row { align-items: stretch; }
	.contact-panel__cta { width: 100%; }
}

/* reCAPTCHA badge position override scope (apply via body class on the contact template if needed):
   body.page-template-template-contact .grecaptcha-badge { bottom: 80px !important; }
*/

/* =============================================================
   Volunteer page
   ============================================================= */

/* ---- Hero (navy, photo right, copy bottom-left) ------------- */
.vol-hero {
	position: relative;
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	overflow: hidden;
}
.vol-hero__inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 432px);
	gap: clamp(28px, 4vw, 72px);
	align-items: end;
	padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 87px);
}
.vol-hero__copy {
	display: flex;
	flex-direction: column;
}
.vol-hero__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: 3.5px;
	line-height: 1.15;
	color: var(--c-white);
	margin: 0;
}
.vol-hero__lede {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.33;
	color: rgba(255, 255, 255, 0.88);
	margin: 16px 0 0;
	max-width: 420px;
}
.vol-hero__media {
	position: relative;
	z-index: 4;
}
.vol-hero__photo {
	display: block;
	width: 100%;
	aspect-ratio: 432 / 476;
	object-fit: cover;
	border-radius: var(--radius-md);
}
.vol-hero__trail-wrap {
	position: absolute;
	left: -25.2%;
	top: 46.9%;
	width: 80.2%;
	aspect-ratio: 1030 / 123;
	z-index: 1;
	pointer-events: none;
	line-height: 0;
}
.vol-hero__trail { width: 100%; height: 100%; display: block; }
.vol-hero__butterfly {
	width: clamp(34px, 4vw, 56px);
	height: auto;
	z-index: 5;
}

/* ---- The Work is Already Underway --------------------------- */
.vol-work {
	background: var(--c-white);
	padding: clamp(64px, 8vw, 110px) 0;
	position: relative;
	overflow: hidden;
}
.vol-work__paw {
	position: absolute;
	right: 4%;
	top: 8%;
	width: 60px;
	height: auto;
	opacity: 0.22;
	z-index: 0;
	pointer-events: none;
}
.vol-work__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.vol-work__copy {
	display: flex;
	flex-direction: column;
}
.vol-work__eyebrow {
	margin: 0 0 16px;
}
.vol-work__heading {
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.vol-work__heading-line--soft { font-weight: 600; }
.vol-work__heading-line--bold {
	font-weight: 700;
	display: inline-block;
	align-self: flex-start;
}
.vol-work__heading strong { font-weight: 700; }
.vol-work__rule {
	display: block;
	height: 0;
	margin: 14px 0 0;
}
.vol-work__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.45;
	color: var(--c-navy);
	max-width: 520px;
	margin: 0 0 28px;
}
.vol-work__cta {
	align-self: flex-start;
	padding: 12px 22px;
	font-size: 14px;
	background: var(--c-blue);
	color: var(--c-white);
}

/* Image with offset colored frame — mirrors .help-card__visual. */
.vol-work__visual {
	position: relative;
	aspect-ratio: 583 / 434;
	width: 100%;
}
/* The framed photo pops in (scale + overshoot) on scroll (main.js toggles
   .is-visible). Gated on .js with a reduced-motion fallback. */
html.js .vol-work__visual {
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: opacity, transform;
}
html.js .vol-work__visual.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js .vol-work__visual { opacity: 1; transform: none; transition: none; }
}
.vol-work__frame {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% - 28px);
	height: calc(100% - 27px);
	border-radius: var(--radius-md);
	z-index: 1;
	display: block;
}
.vol-work__image {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(100% - 17px);
	height: calc(100% - 17px);
	object-fit: cover;
	border-radius: var(--radius-md);
	z-index: 2;
	display: block;
}

/* ---- Roles grid --------------------------------------------- */
.vol-roles {
	background: var(--c-cream);
	padding: clamp(72px, 9vw, 120px) 0 0;
}
.vol-roles__head {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.vol-roles__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0;
}
.vol-roles__rule {
	display: block;
	height: 0;
	margin: 8px auto 28px;
}
.vol-roles__intro {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.45;
	color: var(--c-navy);
	max-width: 540px;
	margin: 0 auto;
}
.vol-roles__grid {
	list-style: none;
	padding: 0;
	margin: clamp(40px, 5vw, 64px) 0 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

/* Role cards fade in on scroll (main.js toggles .is-visible). Opacity-only so
   the hover-lift transform stays intact. Gated on .js + reduced-motion. */
html.js .vol-role { opacity: 0; transition: opacity 0.7s ease; }
/* Cascade in left→right (the cards share a row, so a per-card delay sequences them). */
html.js .vol-role:nth-child(2) { transition-delay: 0.24s; }
html.js .vol-role:nth-child(3) { transition-delay: 0.48s; }
html.js .vol-role:nth-child(4) { transition-delay: 0.72s; }
html.js .vol-role:nth-child(5) { transition-delay: 0.96s; }
html.js .vol-role:nth-child(6) { transition-delay: 1.20s; }
html.js .vol-role.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	html.js .vol-role { opacity: 1; transition: none; transition-delay: 0s; }
}
.vol-role {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	min-height: 220px;
	padding: 32px 24px 28px;
	background: var(--c-white);
	border-radius: var(--radius-md);
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 8px 24px -12px rgba(36, 44, 56, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vol-role:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -14px rgba(36, 44, 56, 0.28);
}
.vol-role:hover .vol-role__icon { filter: saturate(1.15); }

.vol-role__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	box-shadow: 0 4px 10px -4px rgba(36, 44, 56, 0.35);
	transition: filter 0.2s ease;
	flex: 0 0 auto;
}
.vol-role__icon svg { display: block; }
.vol-role--orange .vol-role__icon { background: var(--c-orange); }
.vol-role--cyan   .vol-role__icon { background: var(--c-cyan); }
.vol-role--purple .vol-role__icon { background: var(--c-purple); }
.vol-role--lime   .vol-role__icon { background: var(--c-lime); color: var(--c-navy); }

.vol-role__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 1.4px;
	line-height: 1.25;
	color: var(--c-navy);
	margin: 0;
	max-width: 180px;
}
.vol-role__desc {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-navy);
	margin: 0;
}

/* ---- Join Us card (extends the cream section) --------------- */
.vol-join {
	background: var(--c-cream);
	padding: clamp(48px, 6vw, 72px) 0 clamp(80px, 10vw, 120px);
}
.vol-join__inner {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	background: var(--c-white);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 12px 36px -18px rgba(36, 44, 56, 0.25);
	padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
	text-align: center;
	overflow: hidden;
}
.vol-join__inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--c-cyan);
}
.vol-join__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0 0 16px;
	position: relative;
	z-index: 1;
}
.vol-join__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 1.45;
	color: var(--c-navy);
	max-width: 540px;
	margin: 0 auto 28px;
	position: relative;
	z-index: 1;
}
.vol-join__cta {
	padding: 12px 26px;
	font-size: 14px;
	position: relative;
	z-index: 1;
}
.vol-join__paw {
	position: absolute;
	right: -18px;
	bottom: -22px;
	width: 110px;
	height: auto;
	opacity: 0.08;
	transform: rotate(15deg);
	pointer-events: none;
}
.vol-join__butterfly {
	position: absolute;
	left: 18px;
	top: 18px;
	width: 32px;
	height: auto;
	opacity: 0.5;
	pointer-events: none;
}

/* ---- Responsive (mirrors .ar-* breakpoints) ----------------- */
@media (max-width: 900px) {
	.vol-hero__inner {
		grid-template-columns: 1fr;
		align-items: stretch;
		gap: clamp(28px, 6vw, 40px);
		padding: clamp(48px, 9vw, 72px) 0;
	}
	/* Match the other heroes on mobile: photo on top, copy centered. */
	.vol-hero__media { order: -1; max-width: 360px; margin: 0 auto; width: 100%; }
	.vol-hero__copy { text-align: center; align-items: center; }
	.vol-hero__lede { margin-left: auto; margin-right: auto; padding-inline: clamp(16px, 6vw, 40px); }
	/* Hide the animated trail + butterfly (both live inside the wrap). */
	.vol-hero__trail-wrap { display: none; }

	.vol-work__inner { grid-template-columns: 1fr; }
	.vol-work__visual { order: -1; max-width: 480px; margin: 0 auto; }
	.vol-work__paw { width: 48px; right: 6%; top: 4%; }

	.vol-roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.vol-join__inner { padding: 36px 22px; }
	.vol-join__heading { font-size: 28px; }
}

@media (max-width: 600px) {
	.vol-roles__grid { grid-template-columns: 1fr; }
	.vol-role { min-height: 0; padding: 28px 22px 24px; }
}

@media (max-width: 540px) {
	.vol-hero__lede { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.vol-role,
	.vol-role:hover {
		transition: none;
		transform: none;
	}
}

/* =============================================================
   Foster page
   ============================================================= */

/* ---- Hero (navy, clones .vol-hero 1:1, NO eyebrow) ---------- */
.foster-hero {
	background: var(--c-navy);
	color: var(--c-white);
	position: relative;
	overflow: hidden;
	padding: clamp(70px, 9vw, 130px) 0 clamp(88px, 11vw, 150px);
}
.foster-hero__inner {
	position: relative;
	z-index: 3;
	text-align: left;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: end;
}
.foster-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 18px;
}
.foster-hero__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(36px, 5.4vw, 58px);
	letter-spacing: 3.5px;
	line-height: 1.15;
	color: var(--c-white);
	margin: 0;
}
.foster-hero__lede {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	margin: 20px 0 0;
	max-width: 520px;
}
/* Lime trail loops in from the left; butterfly rests upper-centre-left. */
.foster-hero__trail-wrap {
	position: absolute;
	left: -3%;
	top: 12%;
	width: clamp(300px, 32vw, 480px);
	aspect-ratio: 549 / 176;
	z-index: 1;
	pointer-events: none;
	line-height: 0;
}
.foster-hero__trail { width: 100%; height: 100%; display: block; }
.foster-hero__butterfly {
	width: clamp(34px, 4vw, 54px);
	height: auto;
	z-index: 5;
}
.foster-hero__paw {
	position: absolute;
	right: 6%;
	bottom: 8%;
	width: clamp(80px, 9vw, 120px);
	height: auto;
	opacity: 0.14;
	transform: rotate(-12deg);
	z-index: 2;
	pointer-events: none;
}

/* ---- Intro (white, centered) -------------------------------- */
.foster-intro {
	background: var(--c-white);
	padding: clamp(64px, 8vw, 110px) 0;
}
.foster-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 960px;
	margin-inline: auto;
}
.foster-intro__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* With an intro image: two columns — image left, copy right (left-aligned). */
.foster-intro--has-image .foster-intro__inner {
	flex-direction: row;
	align-items: center;
	text-align: left;
	max-width: 1180px;
	gap: clamp(32px, 5vw, 72px);
}
.foster-intro--has-image .foster-intro__copy {
	align-items: flex-start;
	flex: 1 1 auto;
}
/* Intro image pops in (scale + overshoot) on scroll. */
html.js .foster-intro__media {
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	will-change: opacity, transform;
}
html.js .foster-intro__media.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.js .foster-intro__media { opacity: 1; transform: none; transition: none; }
}
.foster-intro__media {
	flex: 0 0 42%;
}
.foster-intro__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}
@media (max-width: 760px) {
	.foster-intro--has-image .foster-intro__inner {
		flex-direction: column;
		text-align: center;
	}
	.foster-intro--has-image .foster-intro__copy { align-items: center; }
	.foster-intro__media {
		flex: 0 0 auto;
		width: 100%;
		max-width: 420px;
	}
}
.foster-intro__eyebrow { margin: 0 0 16px; }
.foster-intro__heading {
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}
.foster-intro__heading-line--soft { font-weight: 600; }
.foster-intro__heading-line--bold {
	font-weight: 700;
	display: inline-block;
}
.foster-intro--has-image .foster-intro__heading { align-items: flex-start; }
.foster-intro__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.45;
	color: var(--c-navy);
	max-width: 620px;
	margin: 18px 0 28px;
}
.foster-intro__cta {
	padding: 12px 26px;
	font-size: 14px;
	background: var(--c-blue);
	color: var(--c-white);
}

/* ---- Two-up panels (cream) ---------------------------------- */
.foster-panels {
	background: var(--c-cream);
	padding: clamp(72px, 9vw, 120px) 0;
}
.foster-panels__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	max-width: 1040px;
	margin-inline: auto;
}
/* Panels fade in on scroll (opacity-only — keeps the hover lift). */
html.js .foster-panel { opacity: 0; transition: opacity 0.6s ease; }
html.js .foster-panel:nth-child(even) { transition-delay: 0.14s; }
html.js .foster-panel.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	html.js .foster-panel { opacity: 1; transition: none; transition-delay: 0s; }
}
.foster-panel {
	background: var(--c-white);
	border-radius: var(--radius-md);
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 8px 24px -12px rgba(36, 44, 56, 0.18);
	padding: clamp(32px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.foster-panel:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -14px rgba(36, 44, 56, 0.28);
}
.foster-panel__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	flex: 0 0 auto;
	box-shadow: 0 4px 10px -4px rgba(36, 44, 56, 0.35);
	transition: filter 0.2s ease;
}
.foster-panel__icon svg { display: block; }
.foster-panel:hover .foster-panel__icon { filter: saturate(1.15); }
.foster-panel--orange .foster-panel__icon { background: var(--c-orange); }
.foster-panel--cyan   .foster-panel__icon { background: var(--c-cyan); }
.foster-panel--purple .foster-panel__icon { background: var(--c-purple); }
.foster-panel--lime   .foster-panel__icon { background: var(--c-lime); color: var(--c-navy); }
.foster-panel__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 25px;
	letter-spacing: 1.75px;
	line-height: 1.2;
	color: var(--c-navy);
	margin: 0;
}
.foster-panel__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 1.5;
	color: var(--c-navy);
	margin: 0;
}

/* ---- How it Will Work (white, left-aligned head) ------------ */
.foster-steps {
	background: var(--c-white);
	padding: clamp(64px, 8vw, 110px) 0;
}
.foster-steps__head {
	max-width: 720px;
	text-align: left;
}
.foster-steps__eyebrow { margin: 0 0 16px; }
.foster-steps__heading {
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.foster-steps__heading-line--soft { font-weight: 600; }
.foster-steps__heading-line--bold {
	font-weight: 700;
	display: inline-block;
	align-self: flex-start;
}
.foster-steps__intro {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.5;
	color: var(--c-navy);
	max-width: 560px;
	margin: 16px 0 0;
}
.foster-steps__grid {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	margin: clamp(40px, 5vw, 64px) 0 0;
	position: relative;
}
/* Steps cascade in left→right on scroll (opacity-only — keeps the hover lift). */
html.js .foster-step { opacity: 0; transition: opacity 0.7s ease; }
html.js .foster-step:nth-child(2) { transition-delay: 0.24s; }
html.js .foster-step:nth-child(3) { transition-delay: 0.48s; }
html.js .foster-step:nth-child(4) { transition-delay: 0.72s; }
html.js .foster-step:nth-child(5) { transition-delay: 0.96s; }
html.js .foster-step.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	html.js .foster-step { opacity: 1; transition: none; transition-delay: 0s; }
}
.foster-step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 28px 24px;
	background: var(--c-white);
	border-radius: var(--radius-md);
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 8px 24px -12px rgba(36, 44, 56, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}
.foster-step:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -14px rgba(36, 44, 56, 0.28);
}
.foster-step__num {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--c-white);
	flex: 0 0 auto;
}
.foster-step--orange .foster-step__num { background: var(--c-orange); }
.foster-step--cyan   .foster-step__num { background: var(--c-cyan); }
.foster-step--purple .foster-step__num { background: var(--c-purple); }
.foster-step--lime   .foster-step__num { background: var(--c-lime); color: var(--c-navy); }
.foster-step__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 1.4px;
	line-height: 1.25;
	color: var(--c-navy);
	margin: 0;
}
.foster-step__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-navy);
	margin: 0;
}
.foster-step__arrow {
	position: absolute;
	right: calc(-1 * clamp(20px, 2.4vw, 32px) / 2);
	top: 54px;
	transform: translateX(50%);
	pointer-events: none;
}

/* ---- Join card (cream, mirrors .vol-join verbatim) ---------- */
.foster-join {
	background: var(--c-cream);
	padding: clamp(48px, 6vw, 72px) 0 clamp(80px, 10vw, 120px);
}
.foster-join__inner {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	background: var(--c-white);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 12px 36px -18px rgba(36, 44, 56, 0.25);
	padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
	text-align: center;
	overflow: hidden;
}
.foster-join__inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--c-cyan);
}
.foster-join__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0 0 16px;
	position: relative;
	z-index: 1;
}
.foster-join__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1.12px;
	line-height: 1.45;
	color: var(--c-navy);
	max-width: 540px;
	margin: 0 auto 28px;
	position: relative;
	z-index: 1;
}
.foster-join__cta {
	padding: 12px 26px;
	font-size: 14px;
	position: relative;
	z-index: 1;
}
.foster-join__paw {
	position: absolute;
	right: -18px;
	bottom: -22px;
	width: 110px;
	height: auto;
	opacity: 0.08;
	transform: rotate(15deg);
	pointer-events: none;
}
.foster-join__butterfly {
	position: absolute;
	left: 18px;
	top: 18px;
	width: 32px;
	height: auto;
	opacity: 0.5;
	pointer-events: none;
}

/* ---- Responsive --------------------------------------------- */
/* Tier map: ≥1024 steps 4-col / panels 2-col · 769–1023 steps 2-col /
   panels 2-col · 601–768 steps 2-col / panels 1-col · ≤600 both 1-col. */
@media (max-width: 1023px) {
	.foster-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foster-step__arrow { display: none; }
}

@media (max-width: 900px) {
	.foster-hero { padding: 64px 0 76px; }
	.foster-hero__inner { grid-template-columns: 1fr; align-items: start; }
	.foster-hero__media { order: -1; max-width: 460px; }
	.foster-hero__trail-wrap { left: -10%; top: 6%; width: clamp(240px, 56vw, 380px); }
}

@media (max-width: 768px) {
	.foster-panels__grid { grid-template-columns: 1fr; }
	.foster-intro,
	.foster-steps { padding: clamp(48px, 9vw, 72px) 0; }
}

@media (max-width: 600px) {
	.foster-steps__grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
	.foster-hero__lede { font-size: 16px; }
	.foster-join__inner { padding: 36px 22px; }
	.foster-join__heading { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.foster-panel,
	.foster-step,
	.foster-panel:hover,
	.foster-step:hover {
		transition: none;
		transform: none;
	}
}

/* =========================================================
 * Stories & Updates page (template-stories.php)
 * Compact intro → featured carousel → filter bar →
 * paginated archive grid → newsletter.
 * Reuses .ar-pagination / .ar-page chips verbatim.
 * ========================================================= */

/* ---- A. Compact intro band ------------------------------ */
.stories-intro {
	background: var(--c-cream);
	padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
}
.stories-intro__inner {
	max-width: 720px;
	text-align: left;
}
.stories-intro__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: 3.5px;
	line-height: 1.1;
	color: var(--c-navy);
	margin: 12px 0 0;
}
.stories-intro__rule {
	display: block;
	width: 56px;
	height: 3px;
	background: var(--c-lime);
	margin: 18px 0 0;
}
.stories-intro__lede {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.55;
	color: var(--c-navy);
	max-width: 540px;
	margin: 20px 0 0;
}

/* ---- B. Featured carousel -------------------------------- */
.stories-featured {
	background: var(--c-cream);
	padding: clamp(20px, 2.5vw, 32px) 0 clamp(64px, 7vw, 96px);
}
.stories-featured__banner {
	position: relative;
	background: var(--c-white);
	border: 1px solid rgba(36, 44, 56, 0.08);
	border-radius: var(--radius-md);
	padding: clamp(20px, 2.8vw, 32px) clamp(28px, 3.6vw, 48px);
	margin-bottom: clamp(28px, 3.6vw, 44px);
	box-shadow: 0 6px 18px -14px rgba(36, 44, 56, 0.25);
	overflow: hidden;
}
.stories-featured__banner::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--c-cyan);
}
.stories-featured__banner-paw {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(14deg);
	width: clamp(48px, 5vw, 72px);
	opacity: 0.14;
	pointer-events: none;
}
.stories-featured__banner-title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: 1.9px;
	line-height: 1.2;
	color: var(--c-navy);
	margin: 0;
}

.stories-featured__grid {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: clamp(28px, 3.6vw, 48px);
	align-items: stretch;
}
.stories-featured__slide[hidden] { display: none; }
.stories-featured__copy {
	background: var(--c-white);
	border: 1px solid rgba(36, 44, 56, 0.08);
	border-radius: var(--radius-md);
	padding: clamp(32px, 4vw, 48px);
	box-shadow: 0 8px 24px -16px rgba(36, 44, 56, 0.22);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	min-width: 0;
}
.stories-featured__type {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.4px;
	line-height: 1.4;
	text-transform: uppercase;
	margin: 0;
	background: var(--c-grey-300);
	color: var(--c-navy);
}
.stories-featured__slide--orange .stories-featured__type { background: #f17a3d; color: var(--c-white); }
.stories-featured__slide--purple .stories-featured__type { background: #8e63b8; color: var(--c-white); }
.stories-featured__slide--mauve  .stories-featured__type { background: #d9c2e0; color: var(--c-navy); }
.stories-featured__slide--green  .stories-featured__type { background: var(--c-lime); color: var(--c-navy); }
.stories-featured__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(24px, 2.4vw, 32px);
	letter-spacing: 1.9px;
	line-height: 1.2;
	color: var(--c-navy);
	margin: 0;
}
.stories-featured__excerpt {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.55;
	color: var(--c-navy);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.stories-featured__cta {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--c-navy);
	text-decoration: none;
	align-self: flex-start;
	transition: opacity 0.18s ease;
}
.stories-featured__cta:hover { opacity: 0.85; text-decoration: none; }
.stories-featured__cta-arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c-cyan);
	color: var(--c-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
	flex: 0 0 auto;
}
.stories-featured__cta:hover .stories-featured__cta-arrow {
	background: var(--c-navy);
	transform: translateX(2px);
}

.stories-featured__visual {
	position: relative;
	aspect-ratio: 800 / 489;
	width: 100%;
	max-width: 798px;
	margin-left: auto;
}
.stories-featured__frame {
	position: absolute;
	inset: 12px -12px -12px 12px;
	width: auto;
	height: auto;
	border-radius: 15px;
	display: block;
	z-index: 0;
	object-fit: cover;
}
.stories-featured__image-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 12px 36px -16px rgba(36, 44, 56, 0.32);
	z-index: 1;
}
.stories-featured__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.stories-featured__image-placeholder {
	width: 100%;
	height: 100%;
	background: var(--c-cream);
	display: flex;
	align-items: center;
	justify-content: center;
}
.stories-featured__image-placeholder img {
	width: 64px;
	height: 64px;
	opacity: 0.35;
}

.stories-featured__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(28px, 3.5vw, 44px);
}
.stories-featured__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(36, 44, 56, 0.25);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.stories-featured__dot.is-active {
	background: var(--c-navy);
	transform: scale(1.2);
}
.stories-featured__dot:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 3px;
}

/* ---- C. Filter / sort bar ------------------------------- */
.stories-controls {
	background: var(--c-blue);
	padding: clamp(18px, 2vw, 24px) 0;
	color: var(--c-white);
}
.stories-controls__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.stories-filter,
.stories-sort {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.stories-filter__label,
.stories-sort__label {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.05px;
	color: var(--c-white);
	white-space: nowrap;
}
.stories-controls .contact-picker__select { min-width: 280px; }
.stories-sort .contact-picker__select { min-width: 200px; }

/* Custom dropdown widget (replaces native select inside .stories-controls) */
.story-dd {
	position: relative;
	display: inline-block;
	min-width: 280px;
}
.stories-sort .story-dd { min-width: 200px; }
.story-dd__native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
.story-dd__trigger {
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--c-white);
	border: 2px solid var(--c-white);
	border-radius: var(--radius-sm);
	color: var(--c-navy);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.05px;
	padding: 0 20px;
	cursor: pointer;
	box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.25);
	transition: border-color 0.18s ease, border-radius 0.18s ease, box-shadow 0.18s ease;
	text-align: left;
}
.story-dd__trigger:hover { border-color: var(--c-lime); }
.story-dd__trigger:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 3px;
}
.story-dd.is-open .story-dd__trigger {
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	box-shadow: none;
	border-bottom-color: rgba(36, 44, 56, 0.08);
}
.story-dd__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.story-dd__caret {
	flex: 0 0 auto;
	color: var(--c-navy);
	transition: transform 0.18s ease;
}
.story-dd.is-open .story-dd__caret { transform: rotate(180deg); }
.story-dd__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin: 0;
	padding: 6px 0;
	background: var(--c-white);
	border: 2px solid var(--c-white);
	border-top: 0;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	list-style: none;
	box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.45);
	z-index: 20;
	max-height: 320px;
	overflow-y: auto;
}
.story-dd__option {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.6px;
	color: var(--c-navy);
	padding: 10px 20px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.story-dd__option:hover {
	background: rgba(46, 134, 205, 0.12);
	font-weight: 700;
}
.story-dd__option.is-selected {
	background: var(--c-navy);
	color: var(--c-lime);
	font-weight: 600;
}
.story-dd__option.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.story-dd__option.is-disabled:hover {
	background: transparent;
	font-weight: 500;
}

/* Contact inquiry picker + shop sort dropdown use the same widget but sit on a
   light background, so give the trigger + panel a visible navy outline (the
   Stories version uses a white border because it sits on the blue filter bar). */
.contact-picker .story-dd__trigger,
.contact-picker .story-dd__panel,
.shop-main .story-dd__trigger,
.shop-main .story-dd__panel { border-color: var(--c-navy); }
.contact-picker .story-dd.is-open .story-dd__trigger,
.shop-main .story-dd.is-open .story-dd__trigger { border-bottom-color: rgba(36, 44, 56, 0.08); }

/* Block interaction during fetch but no visual change */
.stories-grid.is-loading,
.stories-empty.is-loading {
	pointer-events: none;
}

/* Custom pill-style dropdowns scoped to the Stories filter bar */
.stories-controls .contact-picker__select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.stories-controls .contact-picker__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: var(--c-white);
	border: 2px solid var(--c-white);
	border-radius: 999px;
	color: var(--c-navy);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.05px;
	padding: 10px 44px 10px 20px;
	height: 44px;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
	box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.25);
}
.stories-controls .contact-picker__select:hover {
	border-color: var(--c-lime);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.35);
}
.stories-controls .contact-picker__select:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 3px;
	border-color: var(--c-white);
}
.stories-controls .contact-picker__caret {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c-navy);
	pointer-events: none;
	transition: transform 0.18s ease;
}
.stories-controls .contact-picker__select:hover + .contact-picker__caret,
.stories-controls .contact-picker__select-wrap:hover .contact-picker__caret {
	transform: translateY(-50%) translateY(1px);
}

/* ---- D. Archive grid ------------------------------------ */
.stories-grid-section {
	background: var(--c-white);
	padding: clamp(48px, 6vw, 80px) 0;
	scroll-margin-top: 80px;
}
.stories-grid , .post-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 40px);
}
.stories-empty {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-style: italic;
	font-size: 18px;
	color: var(--c-grey-700);
	text-align: center;
	padding: clamp(64px, 8vw, 120px) 0;
	margin: 0;
}

.stories-grid .story-card , .post-related__grid .story-card {
	display: flex;
	flex-direction: column;
	min-height: 420px;
	background: var(--c-white);
	border-radius: 15px;
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 8px 24px -12px rgba(36, 44, 56, 0.18);
	padding: 0 0 22px;
	overflow: hidden;
	color: var(--c-navy);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stories-grid .story-card:hover , .post-related__grid .story-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -14px rgba(36, 44, 56, 0.28);
	text-decoration: none;
	opacity: 1;
}
.stories-grid .story-card:focus-visible , .post-related__grid .story-card:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 4px;
}

.stories-grid .story-card__visual , .post-related__grid .story-card__visual {
	position: relative;
	aspect-ratio: 324 / 188;
	overflow: hidden;
}
.stories-grid .story-card__frame , .post-related__grid .story-card__frame {
	position: absolute;
	inset: 8px -8px -8px 8px;
	width: auto;
	height: auto;
	display: block;
	z-index: 0;
	object-fit: cover;
	transition: transform 0.2s ease;
}
.stories-grid .story-card__image , .post-related__grid .story-card__image {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}
.stories-grid .story-card__image-placeholder , .post-related__grid .story-card__image-placeholder {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--c-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.stories-grid .story-card__image-placeholder img , .post-related__grid .story-card__image-placeholder img {
	width: 48px;
	height: 48px;
	opacity: 0.35;
}
.stories-grid .story-card:hover .story-card__frame,
.post-related__grid .story-card:hover .story-card__frame { transform: translate(2px, 2px); }

.stories-grid .story-card__pill , .post-related__grid .story-card__pill {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	line-height: 1.4;
	z-index: 3;
}
.stories-grid .story-card--orange .story-card__pill,
.post-related__grid .story-card--orange .story-card__pill { background: #f17a3d; color: var(--c-white); }
.stories-grid .story-card--purple .story-card__pill,
.post-related__grid .story-card--purple .story-card__pill { background: #8e63b8; color: var(--c-white); }
.stories-grid .story-card--mauve  .story-card__pill,
.post-related__grid .story-card--mauve  .story-card__pill { background: #d9c2e0; color: var(--c-navy); }
.stories-grid .story-card--green  .story-card__pill,
.post-related__grid .story-card--green  .story-card__pill { background: var(--c-lime); color: var(--c-navy); }

.stories-grid .story-card__body , .post-related__grid .story-card__body {
	padding: 22px 24px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
.stories-grid .story-card__title , .post-related__grid .story-card__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 1.6vw, 22px);
	letter-spacing: 1.05px;
	line-height: 1.25;
	color: var(--c-navy);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.stories-grid .story-card__excerpt , .post-related__grid .story-card__excerpt {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-grey-700);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: normal;
	overflow-wrap: anywhere;
}
.stories-grid .story-card__meta , .post-related__grid .story-card__meta {
	margin-top: auto;
	padding: 18px 24px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.stories-grid .story-card__date , .post-related__grid .story-card__date {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(36, 44, 56, 0.6);
}
.stories-grid .story-card__arrow , .post-related__grid .story-card__arrow {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--c-cyan);
	color: var(--c-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
	flex: 0 0 auto;
}
.stories-grid .story-card:hover .story-card__arrow , .post-related__grid .story-card:hover .story-card__arrow {
	background: var(--c-navy);
	transform: translateX(2px);
}

/* ---- Responsive ----------------------------------------- */
@media (max-width: 1023px) {
	.stories-featured__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		gap: clamp(28px, 3.5vw, 48px);
	}
	.stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
	.stories-featured__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.stories-featured__visual { order: -1; margin-left: 0; }
	.stories-featured__dots { justify-content: center; }
	.stories-controls__inner { flex-direction: column; align-items: stretch; gap: 16px; }
	.stories-filter,
	.stories-sort { width: 100%; flex-wrap: wrap; }
	.stories-controls .contact-picker__select,
	.stories-sort .contact-picker__select { width: 100%; min-width: 0; }
	.contact-picker__select-wrap { width: 100%; display: block; }
}
@media (max-width: 539px) {
	.stories-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Single Post template
   Sections:
     A. .post-hero       — navy title band
     B. .post-thumb      — featured image
     C. .post-body       — content + sticky author sidebar
     D. .post-related    — "Similar Articles" (reuses .story-card)
   Newsletter band reuses .newsletter* unchanged.
   ============================================================ */

/* A. Navy title band -------------------------------------------------- */
.post-hero {
	position: relative;
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-white);
	padding: clamp(28px, 3.5vw, 48px) 0 clamp(32px, 4vw, 56px);
}
.post-hero__deco {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	display: block;
}
.post-hero__deco--butterfly {
	width: 64px;
	height: auto;
	top: clamp(16px, 3vw, 32px);
	right: clamp(16px, 3vw, 48px);
}
.post-hero__deco--trail {
	width: min(60%, 520px);
	height: auto;
	bottom: 0;
	left: 0;
	opacity: 0.18;
	transform: translateY(20%);
}
.post-hero__deco--paw {
	width: 96px;
	height: 96px;
	bottom: clamp(12px, 2vw, 24px);
	right: clamp(12px, 2vw, 24px);
	opacity: 0.18;
}
.post-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-pad);
}
.post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
}
.post-hero__pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.78px;
	text-transform: uppercase;
	line-height: 1.4;
}
.post-hero__pill--orange { background: #f17a3d; color: var(--c-white); }
.post-hero__pill--purple { background: #8e63b8; color: var(--c-white); }
.post-hero__pill--mauve  { background: #d9c2e0; color: var(--c-navy); }
.post-hero__pill--green  { background: var(--c-lime); color: var(--c-navy); }
.post-hero__date {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.91px;
	color: rgba(255, 255, 255, 0.78);
}
.post-hero__title {
	margin: 0;
	max-width: 880px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(28px, 4.5vw, 46px);
	letter-spacing: 2.45px;
	line-height: 1.18;
	color: var(--c-white);
}

/* B. Featured image -------------------------------------------------- */
.post-thumb {
	background: var(--c-white);
	padding: clamp(40px, 5vw, 72px) 0 0;
}
.post-thumb__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-pad);
}
.post-thumb__image {
	margin: 0;
}
.post-thumb__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1080 / 448;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(36, 44, 56, 0.08);
	box-shadow: 0 12px 28px -16px rgba(36, 44, 56, 0.35);
}
.post-thumb__placeholder {
	width: 100%;
	aspect-ratio: 1080 / 448;
	border-radius: 10px;
	background: var(--c-cream);
	border: 1px solid rgba(36, 44, 56, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}
.post-thumb__placeholder img {
	width: 96px;
	height: 96px;
	opacity: 0.45;
}

/* C. Body + sidebar -------------------------------------------------- */
.post-body {
	background: var(--c-white);
	padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 9vw, 120px);
}
.post-body__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	column-gap: clamp(40px, 5vw, 72px);
	align-items: start;
}
.post-body__content { min-width: 0; }
.post-body__lede {
	margin: 0 0 32px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.55;
	letter-spacing: 1.26px;
	color: var(--c-navy);
}

/* Block-content styles, scoped to .post-body__content */
.post-body__content p {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.post-body__content h2 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 28px);
	letter-spacing: 1.6px;
	line-height: 1.25;
	color: var(--c-navy);
	margin: 40px 0 14px;
}
.post-body__content h3 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 1.2px;
	color: var(--c-navy);
	margin: 30px 0 10px;
}
.post-body__content h4 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 1px;
	color: var(--c-navy);
	margin: 24px 0 8px;
}
.post-body__content a {
	color: var(--c-cyan);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}
.post-body__content a:hover {
	color: var(--c-navy);
	text-decoration-thickness: 2px;
}
.post-body__content strong { font-weight: 700; }
.post-body__content em { font-style: italic; }
.post-body__content ul,
.post-body__content ol {
	padding-left: 1.5em;
	margin: 0 0 18px;
}
.post-body__content li { margin-bottom: 6px; }
.post-body__content ul li::marker { color: var(--c-cyan); }
.post-body__content blockquote {
	border-left: 3px solid var(--c-lime);
	padding: 6px 0 6px 20px;
	margin: 28px 0;
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(36, 44, 56, 0.9);
}
.post-body__content img,
.post-body__content .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 28px 0;
}
.post-body__content figure figcaption {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 13px;
	color: rgba(36, 44, 56, 0.65);
	margin: 8px 0 0;
	text-align: center;
}
.post-body__content hr {
	border: none;
	border-top: 1px solid rgba(36, 44, 56, 0.12);
	margin: 36px 0;
}
.post-body__content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: var(--c-cream);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.92em;
}
.post-body__content pre {
	background: var(--c-cream);
	border: 1px solid rgba(36, 44, 56, 0.08);
	border-radius: 8px;
	padding: 18px;
	overflow-x: auto;
	margin: 24px 0;
}
.post-body__content pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
}
.post-body__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
}
.post-body__content th,
.post-body__content td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(36, 44, 56, 0.1);
	text-align: left;
}
.post-body__content th {
	background: var(--c-cream);
	font-weight: 600;
}

/* Author sidebar */
.post-author {
	background: var(--c-white);
	border: 1px solid #ececec;
	border-radius: 10px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.18);
	padding: 28px 24px;
	text-align: center;
	position: sticky;
	top: 24px;
}
.post-author__avatar {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	margin: 0 auto 16px;
}
.post-author__avatar--placeholder {
	background: var(--c-cream);
	display: flex;
	align-items: center;
	justify-content: center;
}
.post-author__avatar--placeholder img {
	width: 40px;
	height: 40px;
	opacity: 0.5;
}
.post-author__eyebrow {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.84px;
	text-transform: uppercase;
	color: rgba(36, 44, 56, 0.6);
	margin: 0 0 6px;
}
.post-author__name {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 1.4px;
	line-height: 1.3;
	color: var(--c-navy);
	margin: 0 0 10px;
	text-align: center;
	overflow-wrap: anywhere;
}
.post-author__bio {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(36, 44, 56, 0.8);
	margin: 0;
}

/* D. Similar Articles ------------------------------------------------ */
.post-related {
	background: var(--c-blue);
	padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 64px);
	color: var(--c-white);
}
.post-related__heading {
	margin: 0 0 clamp(24px, 3vw, 36px);
	font-family: 'Quicksand', sans-serif;
	font-size: clamp(28px, 3.6vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.2;
	color: var(--c-white);
}
.post-related__heading .vol-work__heading-line--bold {
	border-bottom-color: var(--c-lime);
}
.post-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 40px);
}

/* Responsive --------------------------------------------------------- */
@media (max-width: 1023px) {
	.post-body__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
	.post-author {
		position: static;
		max-width: 420px;
		margin: 32px auto 0;
	}
	.post-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539px) {
	.post-related__grid { grid-template-columns: 1fr; }
}

/* =============================================================
 * Donate page (template-donate.php)
 *
 * Sections (alternation):
 *   A. .donate-hero       — navy texture + photo card, white text
 *   B. .donate-support    — white, centered "Where Your Support Goes"
 *   C. .donate-timeline   — orange band, scalloped top + bottom, phase pills
 *   D. .donate-progress   — cream, "Phase 1 Raised" + breakdown bars
 *   E. .donate-resources  — white, 3-up "Ways to Give" cards
 *   F. .donate-be-part    — cream-soft (#fffaf6), photo + copy (photo bleeds left)
 *   G. .newsletter        — shared
 * ============================================================= */

/* ---- A. Hero (light textured, photo card on right) ---------- */
.donate-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	min-height: clamp(400px, 40vw, 520px);
	padding: clamp(32px, 4.5vw, 56px) 0 clamp(32px, 4.5vw, 56px);
}
.donate-hero__trail-wrap {
	position: absolute;
	z-index: 1;
	left: -4%;
	bottom: 42%;
	width: clamp(460px, 58vw, 720px);
	aspect-ratio: 729 / 282;
	pointer-events: none;
	line-height: 0;
}
.donate-hero__trail { width: 100%; height: 100%; display: block; }
.donate-hero__butterfly {
	width: clamp(34px, 4vw, 56px);
	height: auto;
	z-index: 5;
}
.donate-hero__inner {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 432px);
	grid-template-rows: 1fr auto;
	align-items: end;
	gap: clamp(24px, 4vw, 60px);
}
.donate-hero__copy {
	grid-column: 1;
	grid-row: 2;
	max-width: 560px;
	align-self: end;
	padding-bottom: clamp(12px, 2vw, 32px);
}
.donate-hero__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 5vw, 50px);
	letter-spacing: 3.5px;
	line-height: 1.1;
	color: var(--c-white);
	margin: 0;
}
.donate-hero__tagline {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: clamp(15px, 1.5vw, 18px);
	letter-spacing: 1.26px;
	line-height: 1.33;
	color: rgba(255, 255, 255, 0.88);
	max-width: 470px;
	margin: 20px 0 0;
}
.donate-hero__photo {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	width: 100%;
	max-width: 432px;
	aspect-ratio: 432 / 476;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 18px 48px -20px rgba(36, 44, 56, 0.35);
	position: relative;
	z-index: 2;
}
.donate-hero__photo-img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.donate-hero__photo-fallback {
	width: 100%;
	height: 100%;
	background: var(--c-cream);
	border: 1px solid rgba(36, 44, 56, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}
.donate-hero__photo-fallback img {
	width: 40%;
	height: auto;
	opacity: 0.85;
	display: block;
}

@media (max-width: 900px) {
	.donate-hero {
		min-height: auto;
		padding: clamp(60px, 10vw, 90px) 0 clamp(56px, 12vw, 80px);
	}
	.donate-hero__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		align-items: start;
	}
	.donate-hero__copy {
		grid-column: 1;
		grid-row: 2;
		max-width: 100%;
		padding-bottom: 0;
	}
	.donate-hero__photo {
		grid-column: 1;
		grid-row: 1;
		order: -1;
		max-width: 320px;
		margin-inline: auto;
	}
	.donate-hero__trail-wrap {
		width: 118%;
		left: -10%;
		opacity: 0.7;
	}
}

/* ---- B. Support (white, centered, single column) ------------ */
.donate-support {
	position: relative;
	background: var(--c-white);
	padding: clamp(56px, 7vw, 96px) 0;
}
.donate-support__trail {
	position: absolute;
	top: 25%;
	right: 5.31%;
	width: clamp(60px, 8vw, 110px);
	height: auto;
	opacity: 0.55;
	pointer-events: none;
}
.donate-support__inner {
	max-width: 766px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.donate-support__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 35px);
	letter-spacing: 0.07em;
	line-height: 1.18;
	color: var(--c-navy);
	margin: 0;
	text-align: center;
}
.donate-support__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.07em;
	color: var(--c-navy);
	margin: 0;
	max-width: 766px;
	text-align: center;
}
.donate-support__cta {
	margin-top: clamp(24px, 3vw, 36px);
	align-self: center;
}

/* ---- C. Timeline (orange, scalloped) ------------------------ */
.donate-timeline {
	position: relative;
	background: var(--c-orange);
	padding: clamp(96px, 11vw, 140px) 0;
}
.donate-timeline__scallop {
	position: absolute;
	left: 0;
	right: 0;
	height: clamp(40px, 5vw, 60px);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 60' preserveAspectRatio='none'><path d='M0,60 L0,35 A35,35 0 0 1 70,35 L70,60 Z M70,60 L70,35 A35,35 0 0 1 140,35 L140,60 Z' fill='%23ff7f12'/></svg>");
	background-repeat: repeat-x;
	background-size: clamp(80px, 11vw, 140px) 100%;
	pointer-events: none;
}
.donate-timeline__scallop--top {
	top: 0;
	transform: translateY(-100%);
}
.donate-timeline__scallop--bottom {
	bottom: 0;
	transform: translateY(100%) scaleY(-1);
}
.donate-timeline__inner {
	max-width: 1240px;
	margin-inline: auto;
	text-align: center;
}
.donate-timeline__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: clamp(24px, 3vw, 32px);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-white);
	margin: 0 0 clamp(28px, 4vw, 48px);
}
.donate-timeline__phases {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	justify-content: center;
	align-items: stretch;
	max-width: 880px;
	margin-inline: auto;
}
/* Butterfly perched on the top-right corner of the progress bar. */
.donate-timeline__butterfly {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(46px, 5.5vw, 70px);
	transform: translate(18%, -56%);
	z-index: 3;
}
.donate-phase {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 1.4vw, 18px);
	background: transparent;
	border: 0;
	color: var(--c-white);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(13px, 1.3vw, 15px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.donate-phase::before {
	content: "";
	display: block;
	width: 100%;
	height: clamp(40px, 4.5vw, 56px);
	background: #f5f5f5;
	border: 1px solid #f5f5f5;
	border-left-width: 0;
	border-right-width: 0;
}
.donate-timeline__phases .donate-phase:first-child::before {
	border-radius: 6.5px 0 0 6.5px;
	border-left-width: 1px;
}
.donate-timeline__phases .donate-phase:last-child::before {
	border-radius: 0 6.5px 6.5px 0;
	border-right-width: 1px;
}
.donate-phase--current::before {
	background: var(--c-navy);
	border-color: var(--c-white);
	border-left-width: 1px;
	border-right-width: 1px;
}
/* Small divider lines between the phase segments. */
.donate-timeline__phases .donate-phase:not(:first-child)::before {
	border-left: 1px solid #d0d0d0;
}
.donate-timeline__caption {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-white);
	text-align: center;
	margin: clamp(16px, 2vw, 24px) 0 0;
}

/* ---- D. Progress + Breakdown (cream, 2-col) ----------------- */
.donate-progress {
	background: var(--c-cream);
	padding: clamp(72px, 8vw, 110px) 0;
}
.donate-progress__grid {
	max-width: 1240px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.donate-progress__left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.donate-progress__eyebrow {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-navy);
	margin: 0;
}
.donate-progress__amount-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.donate-progress__amount {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(40px, 6vw, 60px);
	letter-spacing: 0.07em;
	line-height: 1;
	color: var(--c-navy);
}
.donate-progress__goal {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: clamp(18px, 2.2vw, 25px);
	letter-spacing: 0.07em;
	color: var(--c-navy);
}
.donate-progress__breakdown-heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 25px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-navy);
	text-align: left;
	margin: 0;
}
.donate-progress__divider {
	height: 1px;
	background: rgba(36, 44, 56, 0.15);
	border: 0;
	margin: 16px 0 24px;
}
.donate-progress__bars {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.donate-bar {
	display: grid;
	grid-template-columns: minmax(60px, 60%) 1fr;
	align-items: center;
	gap: 16px;
}
.donate-bar__fill {
	height: 60px;
	width: var(--pct);
	min-width: 60px;
	display: flex;
	align-items: center;
	padding-left: 14px;
	border-radius: 4px;
	color: #fff;
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.07em;
	box-sizing: border-box;
}
.donate-bar--cyan   .donate-bar__fill { background: var(--c-cyan); }
.donate-bar--orange .donate-bar__fill { background: var(--c-orange); }
.donate-bar--lime   .donate-bar__fill { background: var(--c-lime); color: var(--c-navy); }
.donate-bar--purple .donate-bar__fill { background: var(--c-purple); }
.donate-bar__label {
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-navy);
}
.donate-progress__updated,
.donate-progress__contact {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.07em;
	color: var(--c-navy);
	margin: clamp(24px, 3vw, 40px) 0 0;
}
.donate-progress__contact a {
	color: var(--c-navy);
	text-decoration: underline;
}
.donate-progress__contact a:hover { color: var(--c-cyan); }

/* ---- E. Resources / Ways to Give (white, 3-up cards) -------- */
.donate-resources {
	background: var(--c-white);
	padding: clamp(72px, 8vw, 110px) 0;
}
.donate-resources__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 35px);
	letter-spacing: 0.07em;
	color: var(--c-navy);
	text-align: left;
	margin: 0 0 clamp(32px, 4vw, 56px);
}
.donate-resources__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
}
/* Resource cards rise in from the bottom on scroll (main.js toggles
   .is-visible). Gated on .js with a reduced-motion fallback. */
html.js .donate-resource {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
html.js .donate-resource:nth-child(even) { transition-delay: 0.1s; }
html.js .donate-resource.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js .donate-resource { opacity: 1; transform: none; transition: none; }
}
.donate-resource {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	padding: 26px;
	min-height: 453px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-sizing: border-box;
}
.donate-resource__icon {
	width: 97px;
	height: 97px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	flex: 0 0 auto;
}
.donate-resource__icon svg {
	display: block;
	width: 36px;
	height: 36px;
}
.donate-resource--cyan   .donate-resource__icon { background: var(--c-cyan); }
.donate-resource--purple .donate-resource__icon { background: var(--c-purple); }
.donate-resource--lime   .donate-resource__icon { background: var(--c-lime); color: var(--c-navy); }
.donate-resource--orange .donate-resource__icon { background: var(--c-orange); }
.donate-resource__title {
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: 0.07em;
	color: var(--c-navy);
	margin: 0;
}
.donate-resource__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.07em;
	color: var(--c-navy);
	margin: 0;
}
.donate-resource__cta {
	margin-top: auto;
	align-self: flex-start;
}
.donate-resource__cta--disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}
.donate-resources__disclaimer {
	font-family: 'Quicksand', sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 13px;
	color: rgba(36, 44, 56, 0.6);
	margin: clamp(28px, 3vw, 40px) 0 0;
	text-align: center;
}

/* ---- F. Be Part of Our Work (cream-soft, photo bleeds left) - */
.donate-be-part {
	background: #fffaf6;
}
.donate-be-part__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp(380px, 40vw, 501px);
}
.donate-be-part__photo {
	position: relative;
	overflow: hidden;
}
.donate-be-part__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.donate-be-part__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(48px, 6vw, 80px) clamp(24px, 8vw, 111px) clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px);
}
.donate-be-part__heading {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3vw, 35px);
	letter-spacing: 2.45px;
	line-height: 1.15;
	color: var(--c-navy);
	/* Shrink to the text so the underline below spans only the heading width. */
	align-self: flex-start;
	margin: 0 0 28px;
}
.donate-be-part__heading::after {
	content: "";
	display: block;
	height: 3px;
	margin-top: 16px;
	background: var(--c-orange, #f08a3e);
	border-radius: 2px;
}
.donate-be-part__body {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 1.26px;
	line-height: 1.55;
	color: var(--c-navy);
	margin: 0 0 18px;
}
.donate-be-part__body:last-of-type { margin-bottom: 0; }
.donate-be-part__cta {
	margin-top: clamp(24px, 3vw, 32px);
	align-self: flex-start;
	font-size: 14px;
	letter-spacing: 0.98px;
	padding: 8px 14px;
}

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 900px) {
	.donate-progress__grid { grid-template-columns: 1fr; }
	.donate-resources__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.donate-be-part__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.donate-be-part__photo {
		min-height: 320px;
	}
}
@media (max-width: 768px) {
	.donate-support__trail { display: none; }
	.donate-timeline__scallop { display: none; }
	.donate-timeline__phases {
		padding: 0 12px;
	}
	.donate-phase {
		font-size: 12px;
	}
}
@media (max-width: 600px) {
	.donate-resources__grid { grid-template-columns: 1fr; }
	.donate-resource { min-height: 0; }
}

/* =============================================================
 * GiveWP donation lightbox — the modal launcher lives hidden in
 * the footer; branded "Donate" buttons trigger it via main.js.
 * Keep it in the DOM (so its click handler stays wired) but
 * visually hidden. The form modal itself is position:fixed, so
 * it still covers the viewport when opened.
 * ============================================================= */
.et-donate-embed .js-give-embed-form-modal-launcher-wrap,
.et-donate-embed .givewp-donation-form-modal__open,
.et-donate-embed .js-give-embed-form-modal-opener {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}
.et-donate-trigger { cursor: pointer; }

/* Pin the GiveWP donation lightbox to the top so it doesn't recenter / jump
   when the form's height changes (e.g. choosing a different amount). Covers
   both the React modal overlay and the iframe (.modal) overlay. */
.givewp-donation-form-modal__overlay,
.modal {
	justify-content: flex-start !important;
	padding-top: clamp(16px, 5vh, 64px) !important;
	padding-bottom: clamp(16px, 5vh, 64px) !important;
	overflow-y: auto !important;
}
/* .modal-content is a row flex — its vertical alignment is align-items, so
   top-align there (not justify-content) to stop the iframe modal recentering. */
.modal-content {
	align-items: flex-start !important;
}

/* Donation lightbox close button — pin it to the top-right corner of the 600px
   centered form card (not the viewport), and make it clearly visible (GiveWP's
   default is a faint grey circle that's easy to miss). The card's right edge is
   (50vw - 300px) from the viewport's right; we sit ~16px inside that, clamping
   to the screen edge on narrow viewports where the card goes full-width. */
.givewp-donation-form-modal__close,
.give-modal .close-btn,
.modal .close-btn,
.close-btn,
.give-modal .mfp-close {
	top: calc(46px + clamp(16px, 5vh, 64px)) !important;
	right: max(16px, calc(50vw - 286px)) !important;
	left: auto !important;
	background: #fff !important;
	color: var(--c-navy) !important;
	border: 1px solid rgba(36, 44, 56, 0.15) !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3) !important;
	opacity: 1 !important;
	z-index: 2148482500 !important;
}
/* Force the "×" navy whether it's drawn with fill, stroke, currentColor or text. */
.givewp-donation-form-modal__close svg, .givewp-donation-form-modal__close svg *,
.give-modal .close-btn svg, .give-modal .close-btn svg *,
.modal .close-btn svg, .modal .close-btn svg *,
.close-btn svg, .close-btn svg * {
	color: var(--c-navy) !important;
	fill: var(--c-navy) !important;
	stroke: var(--c-navy) !important;
}

/* =============================================================
   SHOP / WOOCOMMERCE
   Branded store layout — markup comes from WooCommerce + woocommerce.php.
   ============================================================= */

/* ---- Shop hero (navy textured band, matches the other page heroes) ---- */
.shop-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--c-navy);
	background-image: url('../images/hero_texture.png');
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: var(--c-white);
	text-align: center;
	/* Band grows with the viewport so the (viewport-scaled) trail wave never
	   outgrows it and gets clipped on wide screens. */
	padding: clamp(48px, 7vw, 116px) 0 clamp(44px, 6vw, 104px);
}
.shop-hero__inner { position: relative; z-index: 2; }
/* Animated flight trail behind the centred title. */
.shop-hero__trail-wrap {
	position: absolute;
	/* Trail enters off-screen left and the butterfly lands ~78% (just right of
	   the title), per the Figma; right side stays empty navy. */
	left: -22%;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	aspect-ratio: 1243 / 164;
	z-index: 1;
	pointer-events: none;
	line-height: 0;
}
.shop-hero__trail { width: 100%; height: 100%; display: block; }
.shop-hero__butterfly {
	width: clamp(34px, 4vw, 54px);
	height: auto;
	z-index: 5;
}
.shop-hero__eyebrow {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 700;
	font-size: 13px;
	color: var(--c-lime);
}
.shop-hero__title {
	margin: 0 0 14px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 52px);
	letter-spacing: 1px;
	text-shadow: var(--shadow-text);
}
.shop-hero__subtitle {
	max-width: 620px;
	margin: 0 auto;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}
.shop-hero__paw {
	position: absolute;
	z-index: 1;
	height: auto;
	opacity: 0.85;
	pointer-events: none;
}
.shop-hero__paw--1 { width: 56px; left: 7%;  top: 24%;    transform: rotate(-14deg); }
.shop-hero__paw--2 { width: 40px; right: 9%; bottom: 18%; transform: rotate(10deg); }
@media (max-width: 700px) { .shop-hero__paw { display: none; } }

/* ---- Store body ---- */
.shop-main {
	background: var(--c-cream);
	padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 8vw, 92px);
}

/* Toolbar: result count (left) + ordering (right) */
.shop-main .woocommerce-result-count {
	margin: 0 0 24px;
	color: var(--c-grey-700);
	font-size: 14px;
	line-height: 40px;
}
.shop-main .woocommerce-ordering { margin: 0 0 24px; }
/* Match the site's custom dropdown (.contact-picker__select): navy outline,
   Quicksand 600 navy text, and a custom chevron in place of the native arrow. */
.shop-main .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-width: 240px;
	height: 48px;
	padding: 0 44px 0 18px;
	background-color: var(--c-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7l6-5.5' stroke='%23242c38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	border: 1px solid var(--c-navy);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.05px;
	color: var(--c-navy);
	cursor: pointer;
}
.shop-main .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--c-cyan);
	outline-offset: 2px;
}

/* ---- Product grid ---- */
.shop-main ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 36px);
	margin: 0 !important;
	padding: 0;
	clear: both;
	list-style: none;
}
.shop-main ul.products::before,
.shop-main ul.products::after { content: none !important; display: none !important; }
.shop-main ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 14px 14px 22px !important;
	float: none !important;
	background: var(--c-white);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 26px -16px rgba(36, 44, 56, 0.45);
	text-align: center;
	transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.28s ease;
}
.shop-main ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 34px -16px rgba(36, 44, 56, 0.55);
}
.shop-main ul.products li.product a img {
	margin: 0 0 14px;
	border-radius: var(--radius-sm);
}
.shop-main ul.products li.product .woocommerce-loop-product__title {
	padding: 0 0 6px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	color: var(--c-navy);
}
.shop-main ul.products li.product .price {
	color: var(--c-navy);
	font-weight: 700;
	font-size: 16px;
}
.shop-main ul.products li.product .price del { color: var(--c-grey-500); font-weight: 500; opacity: 1; }
.shop-main ul.products li.product .price ins { color: var(--c-orange); text-decoration: none; }
.shop-main ul.products li.product .star-rating { margin: 6px auto 4px; color: var(--c-orange); }
/* Colour variant swatches on the product card */
.shop-main ul.products li.product .loop-swatches {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 10px 0 2px;
	padding: 0;
	list-style: none;
}
.shop-main ul.products li.product .loop-swatch {
	width: 16px;
	height: 16px;
	margin: 0;
	border-radius: 50%;
	background: var(--sw, #d9d9d9);
	box-shadow: inset 0 0 0 1px rgba(36, 44, 56, 0.2);
	list-style: none;
}
.shop-main ul.products li.product .loop-swatch__more {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	color: var(--c-grey-700);
	list-style: none;
}

/* Sale badge */
.shop-main span.onsale {
	top: 12px;
	left: 12px;
	min-width: auto;
	min-height: auto;
	margin: 0;
	padding: 4px 13px;
	border-radius: 999px;
	background: var(--c-orange);
	color: var(--c-white);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.5;
}

/* ---- Buttons (add to cart, etc.) — brand orange with the bounce hover ---- */
.shop-main a.button,
.shop-main button.button,
.shop-main .button,
.shop-main a.added_to_cart,
.shop-main #respond input#submit {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--c-orange);
	color: var(--c-white);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.28s cubic-bezier(0.34, 1.6, 0.5, 1), box-shadow 0.28s ease, background 0.15s ease;
}
.shop-main a.button:hover,
.shop-main button.button:hover,
.shop-main .button:hover,
.shop-main a.added_to_cart:hover,
.shop-main #respond input#submit:hover {
	background: var(--c-orange);
	color: var(--c-white);
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -6px rgba(36, 44, 56, 0.45);
}
@media (prefers-reduced-motion: reduce) {
	.shop-main ul.products li.product:hover,
	.shop-main .button:hover,
	.shop-main a.button:hover,
	.shop-main button.button:hover { transform: none; }
}

/* ---- Pagination ---- */
.shop-main nav.woocommerce-pagination ul { border: none; margin-top: clamp(32px, 5vw, 56px); }
.shop-main nav.woocommerce-pagination ul li { border: none; margin: 0 4px; }
.shop-main nav.woocommerce-pagination ul li a,
.shop-main nav.woocommerce-pagination ul li span {
	min-width: 40px;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--c-navy);
	background: var(--c-white);
}
.shop-main nav.woocommerce-pagination ul li span.current {
	background: var(--c-navy);
	color: var(--c-white);
}
.shop-main nav.woocommerce-pagination ul li a:hover { background: var(--c-navy); color: var(--c-white); }

/* ---- "Added to cart" notices ---- */
.shop-main .woocommerce-message,
.shop-main .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 15px 20px;
	border-top-width: 3px;
	border-top-color: var(--c-cyan);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	color: var(--c-navy);
	background: var(--c-white);
	list-style: none;
}
.shop-main .woocommerce-message::before,
.shop-main .woocommerce-info::before {
	position: static;
	top: auto;
	left: auto;
	margin: 0;
	flex: 0 0 auto;
	color: var(--c-cyan);
}
.shop-main .woocommerce-message .button,
.shop-main .woocommerce-info .button {
	float: none;
	flex: 0 0 auto;
	margin: 0 0 0 auto;
}

/* ---- In-shop cart link (top-right of the shop hero, never in the global nav) ---- */
.shop-cart {
	position: absolute;
	top: clamp(18px, 3vw, 30px);
	right: clamp(20px, 4vw, 50px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--c-white);
	transition: transform 0.28s cubic-bezier(0.34, 1.6, 0.5, 1), filter 0.28s ease;
}
.shop-cart:hover {
	color: var(--c-white);
	text-decoration: none;
	transform: translateY(-3px);
	filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.4));
}
.shop-cart__icon { display: block; }
.shop-cart__count {
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-orange);
	color: var(--c-white);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
}

/* ---- Responsive grid ---- */
@media (max-width: 860px) { .shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shop-main ul.products { grid-template-columns: 1fr; } }

/* =============================================================
   SINGLE PRODUCT — summary (title, price, variations, cart, meta)
   ============================================================= */
.shop-main div.product .product_title {
	font-family: var(--font-sans);
	font-weight: 700;
	color: var(--c-navy);
	margin: 0 0 6px;
	line-height: 1.1;
}
.shop-main div.product p.price,
.shop-main div.product .summary > .price {
	color: var(--c-navy);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px);
	margin: 0 0 22px;
}
.shop-main div.product .price del { color: var(--c-grey-500); font-weight: 500; opacity: 1; }
.shop-main div.product .price ins { color: var(--c-orange); text-decoration: none; }
.shop-main div.product .woocommerce-product-details__short-description {
	color: var(--c-navy);
	line-height: 1.6;
	margin: 0 0 24px;
}

/* Variations table → clean label + branded select rows */
.shop-main table.variations {
	width: auto;
	margin: 0 0 18px;
	border: 0;
	background: transparent;
}
.shop-main table.variations tbody,
.shop-main table.variations tr { display: block; }
.shop-main table.variations tr {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 14px;
}
.shop-main table.variations th.label,
.shop-main table.variations td.value {
	padding: 0;
	border: 0;
	background: transparent;
}
.shop-main table.variations th.label {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1px;
	color: var(--c-navy);
}
.shop-main table.variations td.value {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.shop-main .variations select,
.shop-main .single-product-variation-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-width: 240px;
	height: 48px;
	margin: 0;
	padding: 0 44px 0 18px;
	background-color: var(--c-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7l6-5.5' stroke='%23242c38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	border: 1px solid var(--c-navy);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.05px;
	color: var(--c-navy);
	cursor: pointer;
}
.shop-main .variations select:focus-visible {
	outline: 2px solid var(--c-cyan);
	outline-offset: 2px;
}
.shop-main .reset_variations {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--c-grey-700);
}

/* Variation price shown after a selection */
.shop-main .woocommerce-variation-price .price { margin: 0 0 4px; }
.shop-main .woocommerce-variation-availability { margin: 0 0 8px; color: var(--c-grey-700); }

/* Quantity + Add to cart on one aligned row */
.shop-main form.cart,
.shop-main .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 6px 0 26px;
}
.shop-main .quantity { margin: 0; }
.shop-main .quantity input.qty {
	width: 74px;
	height: 50px;
	text-align: center;
	margin: 0;
	background: var(--c-white);
	border: 1px solid var(--c-grey-300);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 16px;
	color: var(--c-navy);
	-moz-appearance: textfield;
}
.shop-main button.single_add_to_cart_button,
.shop-main button.single_add_to_cart_button.alt {
	height: 50px;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0 26px;
	background: var(--c-orange);
	color: var(--c-white);
}
.shop-main button.single_add_to_cart_button:hover {
	background: var(--c-orange);
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -6px rgba(36, 44, 56, 0.45);
}

/* Product meta (SKU / Category) */
.shop-main .product_meta {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(36, 44, 56, 0.12);
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--c-grey-700);
}
.shop-main .product_meta > span { display: block; margin-bottom: 6px; }
.shop-main .product_meta > span:last-child { margin-bottom: 0; }
.shop-main .product_meta a { color: var(--c-navy); }
.shop-main .product_meta a:hover { color: var(--c-orange); }

/* Related / up-sell sections: space the heading off the cards + the section off
   the product above it. */
.shop-main .related.products,
.shop-main .up-sells.products {
	margin-top: clamp(48px, 7vw, 80px);
	clear: both;
}
.shop-main .related.products > h2,
.shop-main .up-sells.products > h2,
.shop-main .cross-sells > h2 {
	font-family: var(--font-sans);
	font-weight: 700;
	color: var(--c-navy);
	margin: 0 0 clamp(22px, 3vw, 36px);
}

/* Cart "Back to Shop" button */
.shop-main .et-back-to-shop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: clamp(20px, 3vw, 30px);
}

/* Product tabs (Description / Additional information) — now inside the summary,
   under the add-to-cart. Restyle WooCommerce's default tabs to a clean
   underline row. */
.shop-main .woocommerce-tabs {
	margin-top: clamp(24px, 3.5vw, 36px);
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid rgba(36, 44, 56, 0.12);
}
.shop-main .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 16px;
	padding: 0 0 10px;
	list-style: none;
	border-bottom: 1px solid rgba(36, 44, 56, 0.15);
}
.shop-main .woocommerce-tabs ul.tabs::before,
.shop-main .woocommerce-tabs ul.tabs::after { content: none; display: none; }
.shop-main .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.shop-main .woocommerce-tabs ul.tabs li::before,
.shop-main .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.shop-main .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0 0 3px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--c-grey-700);
	border-bottom: 2px solid transparent;
}
.shop-main .woocommerce-tabs ul.tabs li.active a,
.shop-main .woocommerce-tabs ul.tabs li a:hover {
	color: var(--c-navy);
	border-bottom-color: var(--c-orange);
}
.shop-main .woocommerce-tabs .woocommerce-Tabs-panel {
	font-family: var(--font-sans);
	color: var(--c-navy);
	line-height: 1.6;
}
.shop-main .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
}
.shop-main .woocommerce-tabs .shop_attributes {
	margin: 0;
	border: 0;
}
.shop-main .woocommerce-tabs .shop_attributes th,
.shop-main .woocommerce-tabs .shop_attributes td {
	padding: 8px 12px 8px 0;
	border: 0;
	border-bottom: 1px solid rgba(36, 44, 56, 0.08);
	font-family: var(--font-sans);
	color: var(--c-navy);
	text-align: left;
}

/* ---- Cart page: keep clear side margins on mobile -----------------------
   The cart renders through page.php (.single-page). If the Cart block uses a
   full-width (negative-margin) alignment it can still run edge-to-edge, so rein
   any such wrapper back inside the padded container. Cart page + mobile only. */
@media (max-width: 768px) {
	.woocommerce-cart .single-page .alignfull,
	.woocommerce-cart .single-page .alignwide,
	.woocommerce-cart .wp-block-woocommerce-cart,
	.woocommerce-cart .wc-block-cart,
	.woocommerce-cart .wc-block-components-sidebar-layout {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: auto;
	}
}