/* ==========================================================================
   The 22 Project: main stylesheet
   Breakpoints: mobile ≤767px · tablet 768–1199px · desktop ≥1200px (designs at 1728 / 393)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
	--t22-red: #b42033;
	--t22-red-on-dark: #ff6b7a;
	--t22-red-dark: #7a0808;
	--t22-navy: #1a224c;
	--t22-navy-deep: #121835;
	--t22-blue: #2a52be; /* 1.5.4: Trinity label chips (white text 6.9:1) */
	--t22-blue-bright: #3461d6; /* hover / selected chip (white text 5.5:1) */
	--t22-black: #222222;
	--t22-coolgray-90: #21272a;
	--t22-white: #ffffff;
	--t22-light: #f2f2f2;
	--t22-placeholder: #dde1e6;
	--t22-border: #cccccc;
	--t22-border-strong: #b3b3b3;
	--t22-muted: #636363;
	--t22-glass: rgba(255, 255, 255, 0.08);
	--t22-glass-border: rgba(255, 255, 255, 0.45);

	--t22-font-display: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
	--t22-font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
	--t22-font-ui: "Roboto", system-ui, sans-serif;

	--t22-fs-h1: clamp(30px, 1.6rem + 1.8vw, 50px);
	--t22-fs-h2: clamp(24px, 1.1rem + 1.4vw, 40px);
	--t22-fs-h3: clamp(20px, 1rem + 0.7vw, 30px);
	--t22-fs-sub: clamp(18px, 1rem + 0.4vw, 24px);
	--t22-fs-lead: 18px;
	--t22-fs-body: 16px;
	--t22-fs-small: 14px;

	--t22-space-1: 4px;
	--t22-space-2: 8px;
	--t22-space-3: 16px;
	--t22-space-4: 24px;
	--t22-space-5: 32px;
	--t22-space-6: 48px;
	--t22-space-7: 64px;
	--t22-space-8: 80px;
	--t22-space-9: 120px;
	--t22-space-10: 160px;

	--t22-container: 1328px;
	--t22-gutter: 16px;
	--t22-section-y: 48px;

	--t22-radius-sm: 6px;
	--t22-radius: 16px;
	--t22-radius-lg: 24px;
	--t22-shadow-btn: 0 4px 8px rgba(0, 0, 0, 0.25);
	--t22-shadow-card: 0 12px 40px rgba(0, 0, 0, 0.12);
	--t22-bar-w: 40px;
	--t22-bar-h: 8px;
	--t22-header-h: 68px;
	--t22-ease-out: cubic-bezier(.22, .61, .36, 1);
	--t22-ease-io: cubic-bezier(.65, 0, .35, 1);
	--t22-dur-1: .2s;
	--t22-dur-2: .45s;
	--t22-dur-3: .7s;
	--t22-action-bar-h: 0px;
}

@media (min-width: 768px) {
	:root { --t22-gutter: 32px; --t22-section-y: 80px; --t22-header-h: 84px; }
}

@media (min-width: 1200px) {
	:root { --t22-gutter: 48px; --t22-section-y: 120px; --t22-header-h: 100px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: var(--t22-font-body);
	font-size: var(--t22-fs-body);
	line-height: 1.6;
	color: var(--t22-black);
	background: var(--t22-white);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--t22-red); text-underline-offset: 2px; }
a:hover { color: var(--t22-red-dark); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; }
h1, h2 { font-family: var(--t22-font-display); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: var(--t22-fs-h1); }
h2 { font-size: var(--t22-fs-h2); }
h3 { font-family: var(--t22-font-body); font-size: var(--t22-fs-h3); }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 100000; top: 8px; left: 8px;
	background: var(--t22-white); color: var(--t22-navy); padding: 12px 18px; font-weight: 700; border-radius: var(--t22-radius-sm);
}
.site-main:focus { outline: none; }
.t22-red { color: var(--t22-red); }
.t22-bg-dark .t22-red, .t22-bg-navy .t22-red, .t22-program-teaser .t22-red, .t22-bg-dark strong.t22-red, .t22-bg-navy strong.t22-red { color: var(--t22-red-on-dark); }
.t22-container { width: min(var(--t22-container), 100% - 2 * var(--t22-gutter)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.t22-btn,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 50px; padding: 12px 32px;
	font-family: var(--t22-font-display); font-weight: 700; font-size: 16px; line-height: 1.2;
	text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
	border: 2px solid transparent; border-radius: var(--t22-radius-sm);
	background: var(--t22-red); color: var(--t22-white);
	box-shadow: var(--t22-shadow-btn); cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
@media (min-width: 1200px) { .t22-btn, .wp-block-button__link { min-height: 56px; } }
.t22-btn:hover, .wp-block-button__link:hover { transform: translateY(-1px); }
.t22-btn--primary, .is-style-t22-primary .wp-block-button__link { background: var(--t22-red); color: var(--t22-white); border-color: var(--t22-red); }
.t22-btn--primary:hover, .is-style-t22-primary .wp-block-button__link:hover { background: #961a2a; border-color: #961a2a; color: var(--t22-white); }
.t22-btn--navy, .is-style-t22-navy .wp-block-button__link { background: var(--t22-navy); color: var(--t22-white); border-color: var(--t22-navy); }
.t22-btn--navy:hover, .is-style-t22-navy .wp-block-button__link:hover { background: var(--t22-navy-deep); color: var(--t22-white); }
.is-style-t22-outline .wp-block-button__link { background: var(--t22-white); color: var(--t22-navy); border-color: var(--t22-navy); }
.is-style-t22-outline .wp-block-button__link:hover { background: var(--t22-navy); color: var(--t22-white); }
.is-style-t22-outline-light .wp-block-button__link { background: transparent; color: var(--t22-white); border-color: var(--t22-white); box-shadow: none; }
.is-style-t22-outline-light .wp-block-button__link:hover { background: var(--t22-white); color: var(--t22-navy); }
.t22-btn--white, .is-style-t22-white .wp-block-button__link { background: var(--t22-white); color: var(--t22-navy); border-color: var(--t22-white); }
.t22-btn--white:hover, .is-style-t22-white .wp-block-button__link:hover { background: var(--t22-light); color: var(--t22-navy); }
.t22-btn--block { width: 100%; }
.wp-block-buttons { gap: 16px 32px; margin-top: var(--t22-space-5); }
.t22-buttons-wide .wp-block-button__link { min-width: 200px; }
@media (max-width: 767px) {
	.t22-buttons-wide { flex-direction: column; align-items: stretch !important; }
	.t22-buttons-wide .wp-block-button, .t22-buttons-wide .wp-block-button__link { width: 100%; }
}

/* ---------- Headings with accent bar ---------- */
.is-style-t22-bar::before,
.is-style-t22-bar.has-text-align-center::after,
.t22-bar-center::after {
	content: ""; display: block; width: var(--t22-bar-w); height: var(--t22-bar-h); background: var(--t22-red);
}
.is-style-t22-bar::before { margin-bottom: 16px; }
.is-style-t22-bar.has-text-align-center::before { display: none; }
.is-style-t22-bar.has-text-align-center::after,
.t22-bar-center::after { margin: 16px auto 0; }
.t22-bg-red .is-style-t22-bar::before,
.t22-bg-red .is-style-t22-bar::after,
.t22-info-card--red .is-style-t22-bar::after { background: var(--t22-white); }
.t22-h-sans { font-family: var(--t22-font-body); font-weight: 700; font-size: clamp(22px, 1rem + 0.9vw, 32px); letter-spacing: 0; }

/* ---------- Sections ---------- */
.t22-section { padding: var(--t22-section-y) var(--t22-gutter); position: relative; margin: 0; }
.t22-section > *,
.t22-landing-content > .wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--t22-container); margin-left: auto; margin-right: auto;
}
.t22-landing-content > * { margin-top: 0; margin-bottom: 0; }
.t22-landing-content { overflow-x: clip; }
.t22-section > * + * { margin-top: var(--t22-space-5); }
.t22-section > .wp-block-columns + .wp-block-columns,
.t22-section > .wp-block-columns + .wp-block-heading,
.t22-section > .wp-block-group + .wp-block-heading { margin-top: var(--t22-space-9); }
.t22-bg-white { background: var(--t22-white); }
.t22-bg-light { background: var(--t22-light); }
.t22-bg-dark { background: var(--t22-black); color: var(--t22-white); }
.t22-bg-navy { background: var(--t22-navy); color: var(--t22-white); }
.t22-bg-red { background: radial-gradient(120% 90% at 50% 20%, var(--t22-red) 35%, var(--t22-red-dark) 100%); color: var(--t22-white); }
.t22-bg-navy a:not(.wp-block-button__link):not(.t22-btn), .t22-bg-dark a:not(.wp-block-button__link):not(.t22-btn) { color: var(--t22-white); }
.t22-lead { font-size: var(--t22-fs-lead); max-width: 1006px; margin-left: auto !important; margin-right: auto !important; }
.t22-subhead { font-style: italic; font-size: var(--t22-fs-sub); line-height: 1.4; margin-bottom: 16px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--t22-white); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--t22-header-h); }
.site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
/* Logo heights follow the Figma header: 52px in the 100px desktop bar, 30px in the 68px mobile bar. */
.site-logo img { display: block; height: 40px; width: auto; }
@media (min-width: 1200px) { .site-logo img { height: 52px; } }
.primary-nav { margin-left: auto; }
.primary-nav__menu, .primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav__menu { display: flex; gap: 8px 28px; align-items: center; }
.primary-nav a {
	font-family: var(--t22-font-display); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em;
	color: var(--t22-black); text-decoration: none; padding: 10px 0; display: inline-block; border-bottom: 2px solid transparent;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav [aria-current="page"] { border-bottom-color: var(--t22-red); color: var(--t22-black); }
.primary-nav .sub-menu { display: none; position: absolute; background: var(--t22-white); padding: 12px 16px; box-shadow: var(--t22-shadow-card); border-radius: var(--t22-radius-sm); }
.primary-nav li { position: relative; }
.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { display: block; }
.site-header__donate { min-height: 44px; padding: 10px 24px; }
.nav-toggle { display: none; }

/* 1.3.1: the mobile header (logo, Donate, menu button) at every screen size */
.site-header__inner { gap: 12px; }
.site-header__donate { margin-left: auto; min-height: 44px; padding: 8px 16px; font-size: 13px; box-shadow: none; }
.nav-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px;
	background: transparent; border: 0; color: var(--t22-black); cursor: pointer; border-radius: var(--t22-radius-sm);
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }
.primary-nav {
	display: none; position: absolute; left: 0; right: 0; top: 100%;
	background: var(--t22-white); border-top: 1px solid var(--t22-light); box-shadow: 0 16px 24px rgba(0,0,0,.12);
	padding: 8px var(--t22-gutter) 24px; max-height: calc(100vh - var(--t22-header-h)); overflow-y: auto;
}
.primary-nav.is-open { display: block; }
.primary-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
.primary-nav a { display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--t22-light); }
.primary-nav .sub-menu { position: static; display: block; box-shadow: none; padding: 0 0 0 16px; }
@media (max-width: 767px) { .site-logo img { height: 30px; } }
@media (max-width: 359px) {
	.site-header__inner { gap: 8px; }
	.site-logo img { height: 28px; }
	.site-header__donate { padding: 8px 12px; }
}

/* Header "Apply" link (menu item pointing at #apply): outlined companion to the Donate button. */
.primary-nav .t22-menu-apply > a { color: var(--t22-navy); font-weight: 700; }
.primary-nav .t22-menu-apply > a {
	display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; padding: 10px 16px;
	border: 2px solid var(--t22-navy); border-radius: var(--t22-radius-sm);
}
.primary-nav .t22-menu-apply > a:hover { background: var(--t22-navy); color: var(--t22-white); }

/* ---------- Cover / heroes ---------- */
.wp-block-cover { margin: 0; }
.t22-hero-placeholder .wp-block-cover__background {
	background:
		radial-gradient(60% 70% at 78% 30%, rgba(214, 120, 40, .55), transparent 70%),
		linear-gradient(180deg, #2b2a2a 0%, #151515 100%) !important;
	opacity: 1 !important;
}
/* Home hero photo (1.1.6, added at render time when the Cover has no image of its own). Darker on the left where the
   headline panel sits and along the bottom behind the pillars; the soldiers stay right of the panel on wide screens. */
.t22-home-hero--photo .wp-block-cover__background,
.t22-home-hero--photo.t22-hero-placeholder .wp-block-cover__background {
	background:
		linear-gradient(90deg, rgba(10, 10, 12, .72) 0%, rgba(10, 10, 12, .5) 45%, rgba(10, 10, 12, .22) 75%, rgba(10, 10, 12, .3) 100%),
		linear-gradient(0deg, rgba(10, 10, 12, .6) 0%, rgba(10, 10, 12, 0) 40%) !important;
	opacity: 1 !important;
}
/* Wide screens show the whole width: the lead soldier sits right of the headline panel. Below 820px the panel spans
   nearly the full width, so the frame centres on the lead soldier instead of cropping him at the edge. */
/* 1.2.0: Customize > The 22 Project > Home hero > Focal point sets these variables. Unset, the bundled photo keeps
   0% 15% (68% 50% below 820px); a photo of your own is centred, and on phones it follows the desktop focal point. */
.t22-home-hero__bg { object-position: var(--t22-hh-fp, 50% 50%); }
.t22-home-hero__bg[src*="/home-hero"] { object-position: var(--t22-hh-fp, 0% 15%); }
@media (max-width: 819px) {
	.t22-home-hero__bg { object-position: var(--t22-hh-mfp, var(--t22-hh-fp, 50% 50%)); }
	.t22-home-hero__bg[src*="/home-hero"] { object-position: var(--t22-hh-mfp, 68% 50%); }
}
@media (max-width: 767px) {
	.t22-home-hero--photo .wp-block-cover__background,
	.t22-home-hero--photo.t22-hero-placeholder .wp-block-cover__background { background: linear-gradient(180deg, rgba(10, 10, 12, .62) 0%, rgba(10, 10, 12, .48) 45%, rgba(10, 10, 12, .62) 100%) !important; }
}
.wp-block-cover.t22-page-hero { min-height: 420px; padding: 120px var(--t22-gutter) 64px; align-items: flex-end; }
.t22-page-hero .wp-block-cover__inner-container { width: 100%; color: var(--t22-white); }
.t22-page-hero__title { color: var(--t22-white); margin-bottom: 24px; }
.t22-page-hero__text { max-width: 640px; font-size: var(--t22-fs-lead); }
.t22-page-hero .wp-block-buttons { margin-top: 24px; }
@media (min-width: 1200px) { .wp-block-cover.t22-page-hero { min-height: 550px; padding-top: 140px; padding-bottom: 100px; align-items: center; } }
/* 1.2.0: past the design's 1728px frame the hero keeps the design's proportions (550/1728) instead of a fixed 550px,
   so wide screens don't crop group photos down to a thin strip across people's heads. */
@media (min-width: 1729px) { .wp-block-cover.t22-page-hero { min-height: clamp(550px, 31.83vw, 760px); } }
@media (max-width: 767px) { .wp-block-cover.t22-page-hero { min-height: 360px; padding-bottom: 40px; } }
/* Focal points (1.2.0). Cover photos: the block's focal point (inline object-position; bundled photos get a default from
   inc/focal.php). Image blocks: the theme's focal point picker sets --t22-fp on the figure. Both blocks can set a
   separate phone focal point (--t22-mfp), which wins on screens up to 767px. */
.wp-block-image[style*="--t22-fp"] img { object-position: var(--t22-fp); }
@media (max-width: 767px) {
	.wp-block-image[style*="--t22-mfp"] img,
	.wp-block-cover[style*="--t22-mfp"] > .wp-block-cover__image-background { object-position: var(--t22-mfp) !important; }
}

/* simple header used by blog/search/404 */
.t22-page-hero--simple { background: var(--t22-navy); color: var(--t22-white); padding: 96px 0 72px; }
.t22-page-hero--simple .t22-page-hero__title::before { content: ""; display: block; width: var(--t22-bar-w); height: var(--t22-bar-h); background: var(--t22-red); margin-bottom: 16px; }
.t22-page-hero--simple .t22-page-hero__text { opacity: .9; margin: 0; }

/* Home hero */
.t22-home-hero { min-height: 640px; padding: 64px var(--t22-gutter); align-items: center; }
.t22-home-hero .wp-block-cover__inner-container { width: 100%; color: var(--t22-white); }
.t22-home-hero__panel {
	max-width: 680px; padding: 40px 32px; border-radius: var(--t22-radius);
	background: rgba(20, 20, 20, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.t22-home-hero__title { color: var(--t22-white); font-weight: 700; margin-bottom: 24px; }
.t22-home-hero__text { font-size: var(--t22-fs-lead); }
.t22-home-hero__pillars {
	margin-top: 64px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 24px 32px; align-items: center;
	padding: 24px 32px; border: 1px solid var(--t22-glass-border); border-radius: var(--t22-radius-lg);
	background: var(--t22-glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.t22-home-hero__pillars > * { margin: 0 !important; }
.t22-pillar__icon img { width: 24px; height: 24px; display: block; }
.t22-pillar__icon { margin: 0 0 8px !important; }
.t22-pillar__title { font-size: 20px; color: var(--t22-white); margin: 0 0 4px; font-weight: 500; }
.t22-pillar__text { font-size: 14px; margin: 0; line-height: 1.35; opacity: .95; }
@media (min-width: 1200px) { .t22-home-hero { min-height: 848px; } }
@media (max-width: 1199px) { .t22-home-hero__pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t22-home-hero__pillars .t22-badges { grid-column: 1 / -1; } }
@media (max-width: 767px) {
	.t22-home-hero { min-height: 0; padding-top: 32px; padding-bottom: 32px; }
	.t22-home-hero__panel { padding: 24px 16px; background: transparent; backdrop-filter: none; }
	.t22-home-hero__pillars { grid-template-columns: 1fr; margin-top: 24px !important; padding: 16px; background: rgba(0,0,0,.35); }
	.t22-pillar { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; }
	.t22-pillar__icon { grid-row: span 2; }
}

/* ---------- Badges ---------- */
.t22-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; align-items: center; }
.t22-badges img { display: block; height: 72px; width: auto; border-radius: 2px; background: var(--t22-white); }
.t22-home-hero .t22-badges img { height: 64px; }
.t22-badge-box { display: inline-block; padding: 12px 16px; border: 1px solid var(--t22-glass-border); border-radius: var(--t22-radius); margin-top: 24px !important; }
.t22-badge-box .t22-badges img { height: 48px; }

/* ---------- Intro / stats / quote band ---------- */
.t22-intro { text-align: center; }
.t22-intro .wp-block-heading { max-width: 900px; margin-left: auto; margin-right: auto; }
.t22-intro .t22-lead { max-width: 1240px; }
@media (min-width: 1200px) { .t22-intro { padding-top: 160px; padding-bottom: 120px; } }
.t22-stats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.t22-stat { text-align: center; }
.t22-stat > * { margin: 0 !important; }
.t22-stat .is-style-t22-icon { margin: 0 auto 16px !important; }
.t22-stat__num { font-family: var(--t22-font-display); font-weight: 700; font-size: clamp(36px, 1.5rem + 1.6vw, 48px); line-height: 1.1; margin-bottom: 8px !important; }
.t22-stat__label { font-size: 16px; }
@media (max-width: 767px) {
	.t22-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
	.t22-stats__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.t22-stat__label { font-size: 15px; line-height: 1.35; }
}
@media (min-width: 768px) and (max-width: 1199px) { .t22-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.is-style-t22-icon { width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; background: var(--t22-red); display: flex; align-items: center; justify-content: center; }
.is-style-t22-icon img { width: 52%; height: 52%; object-fit: contain; }
@media (max-width: 767px) { .is-style-t22-icon { width: 80px; height: 80px; } }

.t22-quote-band { padding-top: 72px; padding-bottom: 72px; }
.t22-quote-band__text { font-size: clamp(18px, 1rem + .5vw, 24px); line-height: 1.5; max-width: 1180px; margin-inline: auto !important; }
@media (min-width: 1200px) { .t22-quote-band { padding-top: 112px; padding-bottom: 112px; } }

/* ---------- Offer triad ---------- */
.t22-offer .wp-block-heading { color: var(--t22-white); }
.t22-on-dark { color: var(--t22-white); }
.t22-triad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 48px !important; }
.t22-triad__ring { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; margin-bottom: 40px; }
.t22-triad__ring::before { content: ""; position: absolute; inset: 14%; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; }
.t22-triad__circle {
	position: absolute; border-radius: 50%; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--t22-red);
	box-shadow: 0 0 0 6px var(--t22-red), 0 0 0 8px rgba(255,255,255,.9); transition: transform .3s, width .3s, height .3s, top .3s, left .3s, right .3s, box-shadow .3s;
}
.t22-triad__circle:focus-visible { outline: 3px solid var(--t22-white); outline-offset: 10px; }
.t22-triad__circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t22-triad__circle--a { width: 30%; aspect-ratio: 1; top: 0; left: 35%; }
.t22-triad__circle--b { width: 30%; aspect-ratio: 1; top: 52%; left: 0; }
.t22-triad__circle--c { width: 30%; aspect-ratio: 1; top: 52%; right: 0; }
.t22-triad__circle.is-active { width: 44%; z-index: 2; }
.t22-triad__circle--c.is-active { top: 44%; right: 6%; }
.t22-triad__circle--a.is-active { left: 28%; }
.t22-triad__circle--b.is-active { top: 44%; }
.t22-triad__circle:hover { transform: scale(1.04); }
.t22-triad__label { position: absolute; font-size: 14px; color: var(--t22-white); }
.t22-triad__label--medical { top: 34%; left: 6%; transform: rotate(-70deg); }
.t22-triad__label--recreation { top: 30%; right: 6%; transform: rotate(70deg); }
.t22-triad__label--fellowship { bottom: 6%; left: 42%; }
/* Caption sits below the ring so the enlarged active circle can never cover it. */
.t22-triad__hint { position: absolute; top: calc(100% + 12px); left: 0; right: 0; text-align: center; font-size: 14px; line-height: 1.4; color: var(--t22-white); opacity: .85; margin: 0; }
.t22-triad__panel { padding: 48px 40px; border-radius: var(--t22-radius-lg); border: 1px solid var(--t22-glass-border); background: rgba(255,255,255,.07); }
.t22-triad__item h3 { font-family: var(--t22-font-display); font-weight: 500; font-size: var(--t22-fs-h2); color: var(--t22-white); }
.t22-triad__item p { margin: 0; }
.t22-triad__item.is-entering { animation: t22-triad-fade .25s ease-out; }
@keyframes t22-triad-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.t22-triad__circle { transition: none; }
	.t22-triad__circle:hover { transform: none; }
	.t22-triad__item.is-entering { animation: none; }
}
@media (max-width: 767px) {
	.t22-triad { grid-template-columns: 1fr; gap: 32px; }
	.t22-triad__panel { padding: 24px; }
}

/* ---------- Offer triad: "Light on the Path" ambient animation (layers added by initOfferLight in main.js) ----------
 * Layers: a warm light orb travels the ring and each window warms as it passes; a soft breathing glow at the center;
 * a high-window light beam from the top-right corner; light particles drawn into the windows and onto the ring (DOM specks, CSS motion).
 * Master loop 14.4s (orb lap 7.2s), and every period divides it, so the whole scene repeats seamlessly.
 * Only transform/opacity are animated. Paused offscreen / in a hidden tab (.t22-lit-paused). Static under reduced motion. */
.t22-lit-section { overflow-x: clip; isolation: isolate; }
.t22-lit .t22-triad__ring { isolation: isolate; }
.t22-lit .t22-triad__circle { overflow: visible; }
.t22-lit .t22-triad__circle img { border-radius: 50%; }

/* (a) high-window light: a wide soft beam plus two brighter shafts, aimed at the ring by JS (--t22-lit-a) */
.t22-lit-window { position: absolute; inset: 0; max-width: none; margin: 0 !important; overflow: hidden; pointer-events: none; z-index: -1; }
.t22-lit-beam, .t22-lit-shafts { position: absolute; top: -12%; right: -8%; width: 190%; height: 190%; transform-origin: 100% 0; }
.t22-lit-beam {
	background: conic-gradient(from calc(var(--t22-lit-a, 245deg) - 20deg) at 100% 0, rgba(255, 236, 196, 0) 0deg, rgba(255, 236, 196, .05) 8deg, rgba(255, 241, 214, .11) 20deg, rgba(255, 236, 196, .05) 32deg, rgba(255, 236, 196, 0) 40deg, rgba(255, 236, 196, 0) 360deg);
	-webkit-mask: radial-gradient(farthest-corner at 100% 0, rgba(0, 0, 0, .55) 0, #000 10%, rgba(0, 0, 0, .7) 26%, transparent 50%);
	mask: radial-gradient(farthest-corner at 100% 0, rgba(0, 0, 0, .55) 0, #000 10%, rgba(0, 0, 0, .7) 26%, transparent 50%);
}
.t22-lit-shafts {
	background: conic-gradient(from calc(var(--t22-lit-a, 245deg) - 9deg) at 100% 0, rgba(255, 244, 220, 0) 0deg, rgba(255, 244, 220, .07) 2.5deg, rgba(255, 244, 220, 0) 5deg, rgba(255, 244, 220, 0) 11deg, rgba(255, 244, 220, .06) 13.5deg, rgba(255, 244, 220, 0) 16deg, rgba(255, 244, 220, 0) 360deg);
	-webkit-mask: radial-gradient(farthest-corner at 100% 0, rgba(0, 0, 0, .3) 0, #000 10%, rgba(0, 0, 0, .5) 22%, transparent 44%);
	mask: radial-gradient(farthest-corner at 100% 0, rgba(0, 0, 0, .3) 0, #000 10%, rgba(0, 0, 0, .5) 22%, transparent 44%);
}

/* half-strength breathing glow at the heart of the three */
.t22-lit-glow { position: absolute; inset: 20%; border-radius: 50%; z-index: 0; pointer-events: none; opacity: .4;
	background: radial-gradient(circle, rgba(255, 249, 232, .6) 0, rgba(255, 230, 178, .26) 32%, rgba(255, 220, 160, .08) 55%, transparent 70%); }

/* (b) light particles drawn into the windows and onto the ring. Pure CSS motion (polar: a rotating carrier + a
 * translating speck), so it runs on the compositor like everything else. Units are cqw of the ring (ring width = 100cqw).
 * Window centers/radii in cqw; :has() follows the selected (larger) window. */
.t22-lit .t22-triad__ring { container-type: inline-size;
	--a-x: 50; --a-y: 15; --a-r: 15; --b-x: 15; --b-y: 67; --b-r: 15; --c-x: 85; --c-y: 67; --c-r: 15; --act-x: 72; --act-y: 66; --act-r: 22; }
.t22-lit .t22-triad__ring:has(.t22-triad__circle--a.is-active) { --a-y: 22; --a-r: 22; --act-x: 50; --act-y: 22; }
.t22-lit .t22-triad__ring:has(.t22-triad__circle--b.is-active) { --b-x: 22; --b-y: 66; --b-r: 22; --act-x: 22; --act-y: 66; }
.t22-lit .t22-triad__ring:has(.t22-triad__circle--c.is-active) { --c-x: 72; --c-y: 66; --c-r: 22; --act-x: 72; --act-y: 66; }
.t22-lit-field { position: absolute; left: -12%; right: -6%; top: -12%; bottom: -16%; z-index: 0; pointer-events: none;
	-webkit-mask: linear-gradient(to right, transparent, #000 9%, #000 86%, transparent), linear-gradient(transparent, #000 8%, #000 88%, transparent);
	-webkit-mask-composite: source-in;
	mask: linear-gradient(to right, transparent, #000 9%, #000 86%, transparent), linear-gradient(transparent, #000 8%, #000 88%, transparent);
	mask-composite: intersect; }
.t22-lit-to { position: absolute; left: 12cqw; top: 12cqw; width: 0; height: 0; transition: transform .3s;
	transform: translate(calc(var(--tx) * 1cqw), calc(var(--ty) * 1cqw)); }
.t22-lit-to--a { --tx: var(--a-x); --ty: var(--a-y); --tr: var(--a-r); }
.t22-lit-to--b { --tx: var(--b-x); --ty: var(--b-y); --tr: var(--b-r); }
.t22-lit-to--c { --tx: var(--c-x); --ty: var(--c-y); --tr: var(--c-r); }
.t22-lit-to--act { --tx: var(--act-x); --ty: var(--act-y); --tr: var(--act-r); }
.t22-lit-to--ring { --tx: 50; --ty: 50; --tr: 36; }
.t22-lit-p { position: absolute; left: 0; top: 0; transform: rotate(var(--am)); }
.t22-lit-p > b { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
	background: radial-gradient(closest-side, #fff, rgba(255, 248, 226, .95) 18%, rgba(255, 226, 160, .35) 40%, rgba(255, 214, 140, 0));
	transform: translateX(calc(var(--rm) * 1cqw)); opacity: calc(var(--o) * .7); }
@container (max-width: 439px) { .t22-lit-p--d { display: none; } }
@media (prefers-reduced-motion: reduce) { .t22-lit-p--d { display: none; } }

/* the traveling light and its trail along the ring */
.t22-lit-orbit { position: absolute; inset: 14%; border-radius: 50%; pointer-events: none; z-index: 0; }
.t22-lit-orbit::before {
	content: ""; position: absolute; inset: -3px; border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 210deg, rgba(255, 228, 170, 0) 210deg, rgba(255, 242, 210, .95) 357deg, transparent 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1px), transparent 100%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1px), transparent 100%);
}
.t22-lit-orb { position: absolute; top: 0; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
	background: radial-gradient(circle, #fff 0 9%, rgba(255, 246, 222, .95) 14%, rgba(255, 226, 160, .45) 30%, rgba(255, 214, 140, .12) 50%, rgba(255, 214, 140, 0) 70%); }

/* windows warm as the light passes: light wash over the photo plus a gold halo outside the rim */
.t22-lit .t22-triad__circle::before,
.t22-lit .t22-triad__circle::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; }
.t22-lit .t22-triad__circle::before { inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255, 248, 230, .62), rgba(255, 236, 200, .18) 55%, transparent 75%); }
.t22-lit .t22-triad__circle::after { inset: -26px; z-index: -1; background: radial-gradient(closest-side, rgba(255, 236, 190, 0) 60%, rgba(255, 238, 196, .75) 72%, rgba(255, 236, 190, 0) 100%); }
.t22-lit .t22-triad__circle.is-active::after { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
	.t22-lit-orbit::before { opacity: .5; }
	.t22-lit-shafts { opacity: .8; }
}
@media (prefers-reduced-motion: no-preference) {
	.t22-lit-beam { animation: t22-lit-sway 14.4s ease-in-out infinite; }
	.t22-lit-shafts { animation: t22-lit-sway-b 7.2s ease-in-out infinite; }
	.t22-lit-glow { animation: t22-lit-breathe 7.2s ease-in-out infinite; }
	.t22-lit-orbit { animation: t22-lit-spin 7.2s linear infinite; }
	.t22-lit-orb { animation: t22-lit-flicker 2.4s ease-in-out infinite; }
	.t22-lit .t22-triad__circle::before, .t22-lit .t22-triad__circle::after { animation: t22-lit-pass 7.2s linear infinite; }
	.t22-lit .t22-triad__circle.is-active::after { animation-name: t22-lit-pass-active; }
	.t22-lit-p { animation: t22-lit-p-turn var(--d) cubic-bezier(.5, 0, .8, .6) var(--dl) infinite; }
	.t22-lit-p > b { opacity: 0; animation: var(--k) var(--d) linear var(--dl) infinite; }
	.t22-lit-p--ring { animation-name: t22-lit-r-turn; animation-timing-function: linear; }
	/* the orb starts at the top (Medical) and moves clockwise: Recreation (lower right) at 120deg (2.4s), Fellowship (lower left) at 240deg (4.8s) */
	.t22-lit .t22-triad__circle--c::before, .t22-lit .t22-triad__circle--c::after { animation-delay: -4.8s; }
	.t22-lit .t22-triad__circle--b::before, .t22-lit .t22-triad__circle--b::after { animation-delay: -2.4s; }
}
@keyframes t22-lit-sway { 0%, 100% { transform: rotate(-1.6deg); opacity: .7; } 50% { transform: rotate(1.6deg); opacity: 1; } }
@keyframes t22-lit-sway-b { 0%, 100% { transform: rotate(1deg); opacity: .55; } 50% { transform: rotate(-1deg); opacity: 1; } }
@keyframes t22-lit-breathe { 0%, 100% { transform: scale(.84); opacity: .28; } 50% { transform: scale(1.08); opacity: .5; } }
@keyframes t22-lit-p-turn { from { transform: rotate(var(--a0)); } to { transform: rotate(var(--a1)); } }
/* drawn in from a distance, settles into orbit just outside the window rim, then slips under it (absorbed). --k picks when the flight starts. */
@keyframes t22-lit-in-0 { 0% { transform: translateX(calc((var(--tr) + 2 + var(--dd)) * 1cqw)); opacity: 0; animation-timing-function: ease-in-out; }
	20% { opacity: var(--o); } 88% { transform: translateX(calc((var(--tr) + 2) * 1cqw)); opacity: var(--o); animation-timing-function: ease-in; }
	100% { transform: translateX(calc(var(--tr) * .7cqw)) scale(.5); opacity: 0; } }
@keyframes t22-lit-in-30 { 0%, 30% { transform: translateX(calc((var(--tr) + 2 + var(--dd)) * 1cqw)); opacity: 0; animation-timing-function: ease-in-out; }
	44% { opacity: var(--o); } 88% { transform: translateX(calc((var(--tr) + 2) * 1cqw)); opacity: var(--o); animation-timing-function: ease-in; }
	100% { transform: translateX(calc(var(--tr) * .7cqw)) scale(.5); opacity: 0; } }
@keyframes t22-lit-in-50 { 0%, 50% { transform: translateX(calc((var(--tr) + 2 + var(--dd)) * 1cqw)); opacity: 0; animation-timing-function: ease-in-out; }
	62% { opacity: var(--o); } 90% { transform: translateX(calc((var(--tr) + 2) * 1cqw)); opacity: var(--o); animation-timing-function: ease-in; }
	100% { transform: translateX(calc(var(--tr) * .7cqw)) scale(.5); opacity: 0; } }
/* ring specks: land just behind the traveling light (timed by --dl), then ride the ring with it and fade */
@keyframes t22-lit-r-turn { 0% { transform: rotate(var(--a0)); animation-timing-function: cubic-bezier(.3, .2, .6, 1); } 80% { transform: rotate(var(--a1)); } 100% { transform: rotate(calc(var(--a1) + 72deg)); } }
@keyframes t22-lit-r-in { 0% { transform: translateX(calc(var(--r0) * 1cqw)); opacity: 0; animation-timing-function: ease-in-out; }
	22% { opacity: var(--o); } 80% { transform: translateX(36cqw); } 88% { opacity: var(--o); } 100% { transform: translateX(36cqw) scale(.6); opacity: 0; } }
@keyframes t22-lit-spin { to { transform: rotate(360deg); } }
@keyframes t22-lit-flicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes t22-lit-pass { 0% { opacity: 1; } 14% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes t22-lit-pass-active { 0% { opacity: 1; } 14% { opacity: .35; } 92% { opacity: .35; } 100% { opacity: 1; } }
.t22-lit-paused *, .t22-lit-paused *::before, .t22-lit-paused *::after { animation-play-state: paused !important; }

/* ---------- Why HBOT panel ---------- */
.t22-why-hbot { padding-left: 0; padding-right: 0; }
.t22-why-hbot > .t22-why-hbot__panel { max-width: none; }
.t22-why-hbot__panel { background: var(--t22-light); border-radius: 0 0 320px 0; padding: var(--t22-section-y) var(--t22-gutter); margin-right: 25% !important; position: relative; }
.t22-why-hbot__cols { max-width: var(--t22-container); margin: 0 auto !important; gap: 48px; }
.t22-why-hbot__text { flex-basis: 62% !important; }
.t22-why-hbot__media { flex-basis: 38% !important; }
.t22-legacy-stats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; margin: 40px 0 !important; }
.t22-legacy-stat > * { margin: 0 !important; }
.t22-legacy-stat__num { font-weight: 700; font-size: 24px; color: var(--t22-red); padding-bottom: 6px; margin-bottom: 8px !important; border-bottom: 3px solid var(--t22-black); display: inline-block; }
.t22-legacy-stat__label { font-size: 14px; line-height: 1.3; }
.t22-photo-cluster { position: relative; min-height: 420px; }
.t22-circle-photo { position: absolute; margin: 0; }
.t22-circle-photo img { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 8px var(--t22-white); }
.t22-circle-photo--1 { width: 52%; top: 0; right: 0; }
.t22-circle-photo--2 { width: 46%; top: 22%; left: 0; }
.t22-circle-photo--3 { width: 40%; top: 58%; right: 8%; }
@media (min-width: 1200px) { .t22-why-hbot__panel { margin-right: 18% !important; padding-left: max(var(--t22-gutter), (100vw - var(--t22-container)) / 2); } .t22-why-hbot__cols { margin: 0 !important; } }
@media (max-width: 1199px) { .t22-why-hbot__panel { margin-right: 0 !important; border-radius: 0; } .t22-legacy-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.t22-legacy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--t22-border); }
	.t22-legacy-stat { padding: 16px; border: 1px solid var(--t22-border); text-align: center; background: var(--t22-white); }
	.t22-legacy-stat__num { border-bottom: 0; }
	.t22-photo-cluster { min-height: 300px; }
	.t22-why-hbot__media { order: -1; }
}

/* ---------- Pinned / framed boxes ---------- */
.is-style-t22-pinned { position: relative; border: 1px solid currentColor; border-radius: var(--t22-radius-lg); padding: 24px; }
.t22-bg-navy .is-style-t22-pinned, .t22-program-teaser .is-style-t22-pinned { border-color: rgba(255,255,255,.75); }
.is-style-t22-pinned::before, .is-style-t22-pinned::after {
	content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--t22-white); box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.is-style-t22-pinned::before { top: -7px; right: 48px; }
.is-style-t22-pinned::after { bottom: -7px; left: 48px; }
.t22-framed-media { max-width: 900px !important; margin: 48px auto 0 !important; }
.t22-framed-media .wp-block-image { margin: 0; }
.t22-survey, .t22-approach { padding: 56px 48px; }
.t22-survey__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: 48px !important; }
.t22-survey__title { font-size: 20px; color: var(--t22-white); }
.t22-survey__item p { font-size: 15px; margin: 0; }
.t22-approach { max-width: 1328px; text-align: center; }
@media (max-width: 1199px) { .t22-survey__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .t22-survey, .t22-approach { padding: 32px 20px; } .t22-survey__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Program teaser cover ---------- */
.t22-program-teaser, .t22-about-teaser { padding: var(--t22-section-y) var(--t22-gutter); min-height: 0; }
.t22-program-teaser .wp-block-cover__inner-container, .t22-about-teaser .wp-block-cover__inner-container { color: var(--t22-white); width: 100%; max-width: var(--t22-container); margin: 0 auto; }
.t22-program-teaser .wp-block-cover__image-background[src*="/faded-soldiers"] { filter: grayscale(1) contrast(1.4); }
/* 1.1.7: the design's navy-toned soldiers art already carries its tint, so the saved 80% navy layer is lightened over it. */
.t22-program-teaser:has(.wp-block-cover__image-background[src*="/program-teaser"]) .wp-block-cover__background { opacity: .45; }
.t22-about-teaser { min-height: 560px; }
@media (min-width: 1200px) { .t22-about-teaser { min-height: 773px; } }

/* ---------- Split (image + text) ---------- */
.t22-split { gap: 48px 64px; align-items: center; }
.t22-split > .wp-block-column { flex-basis: 50%; }
.t22-split .wp-block-heading { margin-bottom: 16px; }
.t22-media { margin: 0; }
.t22-media img { width: 100%; border-radius: var(--t22-radius); display: block; aspect-ratio: 624 / 462; object-fit: cover; }
.t22-media--card img { background: var(--t22-white); object-fit: contain; padding: 8px; }
.t22-media--tall img { aspect-ratio: 663 / 777; }
.t22-split + .t22-split { margin-top: var(--t22-space-9) !important; }
@media (max-width: 781px) {
	.t22-split--reverse { flex-direction: column-reverse; }
	.t22-split { gap: 32px; }
}

/* ---------- Cards rows (5-up; horizontal slider on mobile) ---------- */
.t22-card-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 48px !important; }
.t22-card { border: 1px solid var(--t22-border-strong); border-radius: var(--t22-radius); padding: 16px 16px 20px; text-align: center; background: transparent; }
.t22-bg-navy .t22-card { border-color: rgba(255,255,255,.75); }
.t22-card > * { margin: 0 !important; }
.t22-card .wp-block-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.t22-card__label { margin-top: 20px !important; font-size: 15px; }
@media (max-width: 1199px) {
	.t22-card-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; gap: 16px; -webkit-overflow-scrolling: touch; }
	.t22-card { flex: 0 0 min(260px, 78%); scroll-snap-align: start; }
}

/* ---------- Icon rows ---------- */
.t22-icon-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin-top: 40px !important; }
.t22-icon-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t22-icon-item > * { margin: 0 !important; }
.t22-icon-item .is-style-t22-icon { width: 72px; height: 72px; margin: 0 auto 20px !important; }
.t22-icon-item__label { font-weight: 700; font-size: 16px; }
@media (max-width: 767px) { .t22-icon-row, .t22-icon-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }

/* ---------- Resource library ---------- */
.t22-resources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 40px !important; }
.t22-resource { border: 1px solid rgba(255,255,255,.75); border-radius: var(--t22-radius); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.t22-resource > * { margin: 0 !important; }
.t22-resource__title { font-size: 15px; line-height: 1.3; }
.t22-resource__link { margin-top: 8px !important; }
.t22-resource__link a { color: var(--t22-red) !important; font-weight: 700; text-transform: uppercase; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.t22-bg-navy .t22-resource__link a, .t22-bg-dark .t22-resource__link a { color: var(--t22-red-on-dark) !important; }
.t22-resource__link a:hover { text-decoration: underline; }
@media (max-width: 1199px) { .t22-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Two cards ---------- */
.t22-two-cards { gap: 24px; margin-top: var(--t22-space-9) !important; }
.t22-info-card { border: 1px solid var(--t22-border-strong); border-radius: var(--t22-radius); padding: 48px 40px; height: 100%; }
.t22-info-card--red { background: var(--t22-red); color: var(--t22-white); border-color: var(--t22-red); }
.t22-info-card .wp-block-heading { font-size: 26px; }
@media (max-width: 767px) { .t22-info-card { padding: 32px 20px; } }

/* ---------- Partners ---------- */
.t22-partners__title { font-weight: 700; font-size: 20px; margin: 24px 0 12px !important; }
.t22-partners { display: flex; gap: 16px; align-items: center; }
.t22-partners .wp-block-image { margin: 0; }
.t22-partners img { height: 72px; width: auto; border-radius: 12px; }

/* ---------- Testimonial carousel ---------- */
.t22-testimonials .wp-block-heading { margin-bottom: 0; }
.t22-carousel { position: relative; margin-top: 48px !important; max-width: none !important; }
.t22-carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 24px 0 24px; overscroll-behavior-x: contain; }
.t22-carousel__viewport::-webkit-scrollbar { display: none; }
.t22-carousel__viewport:focus-visible { outline-offset: -3px; }
.t22-carousel__track { list-style: none; margin: 0; padding: 0 calc(50% - min(460px, 40vw)); display: flex; gap: 24px; }
.t22-tcard {
	flex: 0 0 min(920px, 80vw); scroll-snap-align: center; display: grid; grid-template-columns: 1.3fr 1fr; background: var(--t22-white);
	border-radius: var(--t22-radius-lg); box-shadow: var(--t22-shadow-card); overflow: hidden; opacity: .9; transform: scale(.92);
	transition: opacity var(--t22-dur-2) var(--t22-ease-out), transform var(--t22-dur-2) var(--t22-ease-out); scroll-margin-top: calc(var(--t22-header-h) + 24px);
}
.t22-tcard.is-active { opacity: 1; transform: none; }
.t22-tcard__body { margin: 0; padding: 40px 32px; display: flex; flex-direction: column; }
.t22-tcard__body .t22-svg--quote { color: var(--t22-red); margin-bottom: 24px; }
.t22-tcard__quote { margin: 0 0 32px; font-size: 16px; line-height: 1.7; }
.t22-tcard__quote p:last-child { margin: 0; }
.t22-carousel--carousel .t22-tcard__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.t22-tcard__cite { margin-top: auto; display: flex; flex-direction: column; }
.t22-tcard__name { font-weight: 700; }
.t22-tcard__role { font-size: 14px; color: var(--t22-muted); }
.t22-tcard__more { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-weight: 700; color: var(--t22-red); text-decoration: underline; text-underline-offset: 3px; }
.t22-tcard__more::after { content: "→"; margin-left: 6px; text-decoration: none; display: inline-block; transition: transform var(--t22-dur-1) var(--t22-ease-out); }
.t22-tcard__more:hover::after { transform: translateX(3px); }
/* The photo fills the card's height without setting it (portraits would otherwise stretch the card); faces sit high in the frame. */
.t22-tcard__media { position: relative; min-height: 320px; }
.t22-tcard__media img, .t22-tcard__media .t22-photo-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.t22-tcard:target, .t22-tcard.is-target { box-shadow: 0 0 0 3px var(--t22-red), var(--t22-shadow-card); }
.t22-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.t22-carousel__btn {
	width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; border: 0; background: var(--t22-red); color: var(--t22-white);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--t22-shadow-btn);
	transition: background-color var(--t22-dur-1), transform var(--t22-dur-1) var(--t22-ease-out);
}
.t22-carousel__btn:hover { background: #961a2a; }
.t22-carousel__btn:active { transform: scale(.94); }
.t22-carousel__btn[disabled] { opacity: .4; cursor: default; }
.t22-carousel__dots { display: flex; justify-content: center; gap: 0; }
.t22-carousel__dot { position: relative; width: 24px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; transition: width .2s; }
.t22-carousel__dot::before { content: ""; position: absolute; left: 7px; right: 7px; top: 17px; height: 10px; border-radius: 10px; background: var(--t22-navy); transition: background-color .2s; }
.t22-carousel__dot[aria-current="true"] { width: 46px; }
.t22-carousel__dot[aria-current="true"]::before { background: var(--t22-red); }
.t22-carousel.is-static .t22-carousel__controls { display: none; }
/* Wide screens, centred carousel: arrows sit in the gutters beside the active card, clear of the text. */
@media (min-width: 1024px) {
	.t22-carousel--carousel .t22-carousel__btn { position: absolute; top: calc(50% - 46px); z-index: 2; }
	.t22-carousel--carousel .t22-carousel__btn--prev { left: max(8px, calc(50% - min(460px, 40vw) - 64px)); }
	.t22-carousel--carousel .t22-carousel__btn--next { right: max(8px, calc(50% - min(460px, 40vw) - 64px)); }
}
@media (max-width: 767px) {
	.t22-tcard { grid-template-columns: 1fr; flex-basis: 86vw; }
	.t22-tcard__media { display: none; }
	.t22-carousel__track { padding: 0 7vw; gap: 12px; }
	.t22-tcard__body { padding: 32px 24px; }
}
/* "cards" style: tall quote cards (Success Stories) */
.t22-carousel--cards .t22-carousel__track { padding: 0 2px; gap: 24px; }
.t22-carousel--cards .t22-tcard { flex: 0 0 300px; grid-template-columns: 1fr; opacity: 1; transform: none; scroll-snap-align: start; border: 1px solid var(--t22-border); }
.t22-carousel--cards .t22-tcard__quote { font-size: 15px; }
@media (max-width: 767px) { .t22-carousel--cards .t22-tcard { flex-basis: 86%; } }
/* When every story card fits (wide screens), centre the row under the centred heading. */
.t22-carousel--cards.is-static .t22-carousel__track { justify-content: center; }
/* Without JavaScript the controls can't work: keep their space (no layout shift) but hide them. The scroll fallback
   gets spacer elements instead of track padding, which scroll containers ignore at the end, so the last card can centre. */
.t22-carousel:not(.is-ready) .t22-carousel__controls { visibility: hidden; }
.t22-carousel--carousel:not(.t22-carousel--loop) .t22-carousel__track { padding: 0; }
.t22-carousel--carousel:not(.t22-carousel--loop) .t22-carousel__track::before,
.t22-carousel--carousel:not(.t22-carousel--loop) .t22-carousel__track::after { content: ""; flex: 0 0 calc(50% - min(460px, 40vw) - 24px); }
@media (max-width: 767px) {
	.t22-carousel--carousel:not(.t22-carousel--loop) .t22-carousel__track::before,
	.t22-carousel--carousel:not(.t22-carousel--loop) .t22-carousel__track::after { flex-basis: calc(7vw - 12px); }
}
/* 1.1.9 looping carousel (Home; JS adds .t22-carousel--loop): the active card is always centred with the previous and
   next cards beside it, wrapping around. Cards are stacked in one grid cell and moved with transforms (--d = position
   relative to the active card), so every slide centres, including the last. Arrows sit in the gap between the active
   card and its neighbours (>= 1024px) or below the card, so they never cover a photo. */
.t22-carousel--loop { --t22-tc-gap: 24px; --t22-tc-w: min(920px, calc(100% - 160px)); --t22-tc-scale: .92; }
/* Full bleed inside a section, so the neighbour cards run off the screen edge as in the design. */
.t22-section > .t22-carousel--loop { margin-left: calc(-1 * var(--t22-gutter)); margin-right: calc(-1 * var(--t22-gutter)); }
/* clip (not hidden): the viewport must never be scrollable, or focus/scroll anchoring could shift the centred card. */
.t22-carousel--loop .t22-carousel__viewport { overflow: hidden; overflow-x: clip; overflow-y: visible; scroll-snap-type: none; touch-action: pan-y; }
.t22-carousel--loop .t22-carousel__track { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
.t22-carousel--loop .t22-tcard {
	--d: 0; grid-area: 1 / 1; justify-self: center; width: var(--t22-tc-w); flex: none; scroll-snap-align: none; cursor: pointer;
	transform: translateX(calc(var(--d) * (100% + var(--t22-tc-gap)) + var(--t22-drag, 0px))) scale(var(--t22-tc-scale)); opacity: .9;
	transition: transform var(--t22-dur-2) var(--t22-ease-out), opacity var(--t22-dur-2) var(--t22-ease-out), visibility 0s linear 0s;
}
.t22-carousel--loop .t22-tcard.is-active { transform: translateX(var(--t22-drag, 0px)) scale(1); opacity: 1; cursor: auto; }
.t22-carousel--loop .t22-tcard.is-far { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, var(--t22-dur-2); }
.t22-carousel--loop .t22-tcard.is-jump, .t22-carousel--loop .t22-carousel__track.is-dragging .t22-tcard { transition: none; }
.t22-carousel--loop .t22-tcard.is-jump { opacity: 0; }
@media (min-width: 768px) and (max-width: 1023px) {
	.t22-carousel--loop { --t22-tc-gap: 32px; --t22-tc-w: min(920px, calc(100% - 144px)); }
}
@media (min-width: 1024px) {
	/* gap 96 = 48px arrow + 24px clear space each side; 48px of each neighbour stays visible at 1024px. */
	.t22-carousel--loop { --t22-tc-gap: 96px; --t22-tc-w: min(920px, calc(100% - 288px)); }
	.t22-carousel--loop .t22-carousel__btn { position: absolute; top: calc(50% - 50px); z-index: 2; }
	.t22-carousel--loop .t22-carousel__btn--prev { left: calc(50% - var(--t22-tc-w) / 2 - var(--t22-tc-gap) / 2 - 24px); right: auto; }
	.t22-carousel--loop .t22-carousel__btn--next { right: calc(50% - var(--t22-tc-w) / 2 - var(--t22-tc-gap) / 2 - 24px); left: auto; }
}
@media (max-width: 767px) {
	.t22-carousel--loop { --t22-tc-gap: 12px; --t22-tc-w: calc(100% - 64px); --t22-tc-scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.t22-carousel--loop .t22-tcard { transition: none; }
}

/* ---------- Faded photo sections ---------- */
.t22-faded { background: #f6f6f6 url(../images/faded-soldiers.jpg) center / cover no-repeat; background-image: image-set(url(../images/faded-soldiers-1280w.webp) type("image/webp"), url(../images/faded-soldiers.jpg) type("image/jpeg")); }
@media (min-width: 768px) { .t22-faded { background-image: image-set(url(../images/faded-soldiers-1920w.webp) type("image/webp"), url(../images/faded-soldiers.jpg) type("image/jpeg")); } }
@media (min-width: 1440px) and (min-resolution: 1.5dppx) { .t22-faded { background-image: image-set(url(../images/faded-soldiers-2560w.webp) type("image/webp"), url(../images/faded-soldiers.jpg) type("image/jpeg")); } }
.t22-bigquote { font-weight: 700; font-size: clamp(22px, 1rem + 1.2vw, 36px); max-width: 1000px; margin-left: auto; margin-right: auto; }
.t22-bigquote__cite { color: var(--t22-muted); font-size: 15px; margin-top: 16px !important; }
.t22-success-quote .t22-carousel { margin-top: 64px !important; }
.t22-who-serve { background: #ecebe8 url(../images/faded-tanks.jpg) right center / auto 100% no-repeat; background-image: image-set(url(../images/faded-tanks-1280w.webp) type("image/webp"), url(../images/faded-tanks.jpg) type("image/jpeg")); }
.t22-who-serve__text { max-width: var(--t22-container); }
.t22-who-serve__text > * { max-width: 560px; }
/* Quote variant: quote, red bar and credit share one left edge (no centering inside the column). */
.t22-who-serve .t22-bigquote { margin-left: 0 !important; margin-right: 0 !important; overflow-wrap: break-word; }
.t22-who-serve .t22-bigquote + .t22-bigquote__cite { margin-top: 20px !important; text-align: left; }
@media (max-width: 767px) { .t22-who-serve { background-size: cover; background-position: 70% center; } }
/* Tablet and up: the photo owns the right half and the text owns the left half, so text can never run over the photo. */
@media (min-width: 768px) {
	.t22-who-serve { position: relative; isolation: isolate; background: #ecebe8; }
	.t22-who-serve::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 50%; z-index: -1; background: url(../images/faded-tanks.jpg) center / cover no-repeat; background-image: image-set(url(../images/faded-tanks-1280w.webp) type("image/webp"), url(../images/faded-tanks.jpg) type("image/jpeg")); }
	@media (min-width: 1440px) { .t22-who-serve::before { background-image: image-set(url(../images/faded-tanks-1726w.webp) type("image/webp"), url(../images/faded-tanks.jpg) type("image/jpeg")); } }
	.t22-who-serve__text > * { max-width: min(560px, calc(50vw - var(--t22-gutter) - 56px)); }
}

/* ---------- Video testimonies ---------- */
.t22-videos__grid { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.t22-vcard { border: 1px solid #e5e7eb; border-radius: var(--t22-radius); overflow: hidden; background: var(--t22-white); display: flex; flex-direction: column; }
.t22-vcard[hidden] { display: none; }
.t22-vcard__media { position: relative; aspect-ratio: 432 / 263; background: var(--t22-placeholder); }
.t22-vcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t22-video-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #eef0f3; background: var(--t22-placeholder); }
.t22-vcard__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--t22-white); background: rgba(0,0,0,.15); }
.t22-vcard__play:hover { background: rgba(0,0,0,.35); color: var(--t22-white); }
.t22-vcard__body { padding: 24px 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
.t22-vcard__name { font-size: 22px; margin-bottom: 8px; }
.t22-vcard__role { font-size: 14px; font-weight: 700; color: var(--t22-muted); margin: -4px 0 8px; }
.t22-vcard__excerpt { font-size: 14px; margin-bottom: 20px; }
.t22-vcard__date { font-size: 13px; margin: auto 0 0; color: var(--t22-black); }
.t22-videos__more { text-align: center; margin-top: 32px; }
@media (max-width: 1199px) { .t22-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .t22-videos__grid { grid-template-columns: 1fr; } }

/* ---------- Team ---------- */
.t22-team__group + .t22-team__group { margin-top: 32px; }
.t22-team__heading { text-align: center; font-size: 16px; font-weight: 700; margin: 40px 0 32px; }
.t22-team__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.t22-person { text-align: center; }
.t22-person__photo img, .t22-photo-placeholder { width: 100%; aspect-ratio: 308 / 408; object-fit: cover; display: block; background: var(--t22-light); }
.t22-photo-placeholder { display: flex; align-items: flex-end; justify-content: center; color: #c8ccd2; overflow: hidden; }
.t22-photo-placeholder svg { width: 70%; height: auto; }
.t22-person__name { font-weight: 700; margin: 16px 0 0; }
.t22-person__role { color: var(--t22-muted); margin: 0; font-size: 15px; }
@media (max-width: 1199px) { .t22-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .t22-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ---------- About ---------- */
.t22-why .t22-lead { color: var(--t22-white); }
.t22-mvp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.t22-mvp__item > * { margin: 0 !important; }
.is-style-t22-circle { margin: 0 auto 32px !important; width: min(100%, 300px); }
.is-style-t22-circle img { border-radius: 50%; width: 100%; aspect-ratio: 1; object-fit: cover; display: block; box-shadow: 0 0 0 8px var(--t22-red), 0 0 0 10px rgba(255,255,255,.9); }
.t22-mvp__title { font-size: 28px; color: var(--t22-white); margin-bottom: 16px !important; }
.t22-mvp__item p { max-width: 340px; margin-inline: auto !important; }
@media (max-width: 767px) { .t22-mvp { grid-template-columns: 1fr; gap: 56px; } }
.t22-mission-values__cols { gap: 64px; }
.t22-outline-card { border: 1px solid rgba(255,255,255,.6); border-radius: var(--t22-radius-lg); padding: 40px; }
.t22-outline-card .t22-media, .t22-mission-values .t22-media { margin-bottom: 48px !important; }
.t22-outline-card .t22-media img, .t22-mission-values .t22-media img { aspect-ratio: 520 / 584; }
.t22-values { display: grid; gap: 24px; }
.t22-value { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: center; }
.t22-value > * { margin: 0 !important; }
.t22-value .is-style-t22-icon { width: 56px; height: 56px; }
.t22-value__title { font-size: 18px; color: var(--t22-white); margin: 0 0 2px !important; }
.t22-value__text p { margin: 0; font-size: 15px; }
@media (max-width: 767px) { .t22-outline-card { padding: 24px 16px; } }

/* ---------- Donate ---------- */
.t22-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1060px !important; margin-top: 40px !important; }
.t22-tile { min-height: 320px; border-radius: var(--t22-radius); overflow: hidden; }
.t22-tile .wp-block-cover__background { opacity: .72; }
.t22-tile__title { font-size: 28px; color: var(--t22-white); margin: 0; }
.t22-tile__title a { color: var(--t22-white) !important; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px; }
.t22-tile__title a::after { content: ""; position: absolute; inset: 0; }
.t22-tile:hover .wp-block-cover__background { opacity: .85; }
@media (max-width: 767px) { .t22-tiles { grid-template-columns: 1fr; } .t22-tile { min-height: 200px; } }
.t22-levels > * { margin: 0 0 10px !important; }
.t22-level strong { color: var(--t22-red-on-dark); font-size: 22px; font-family: var(--t22-font-body); }
.t22-browser { position: relative; border: 1px solid var(--t22-border); border-radius: var(--t22-radius); padding-top: 36px; overflow: hidden; background: var(--t22-white); }
.t22-browser::before { content: ""; position: absolute; top: 12px; left: 14px; width: 40px; height: 10px; background: radial-gradient(circle, var(--t22-red) 4px, transparent 5px) 0 0 / 14px 10px repeat-x; }
.t22-browser .t22-media img { border-radius: 0; }
/* 1.1.7: the American flag photo from the Figma design, under the design's navy wash (rgba(31,36,77,.72) measured from the Figma export). */
.t22-ways-give { background: linear-gradient(rgba(26,34,76,.72), rgba(26,34,76,.72)), url(../images/ways-give-flag.jpg) center / cover no-repeat, var(--t22-navy); background-image: linear-gradient(rgba(26,34,76,.72), rgba(26,34,76,.72)), image-set(url(../images/ways-give-flag-1280w.webp) type("image/webp"), url(../images/ways-give-flag.jpg) type("image/jpeg")); color: var(--t22-white); }
@media (min-width: 1024px) { .t22-ways-give { background-position: 50% 30%; background-image: linear-gradient(rgba(26,34,76,.72), rgba(26,34,76,.72)), image-set(url(../images/ways-give-flag-1366w.webp) type("image/webp"), url(../images/ways-give-flag.jpg) type("image/jpeg")); } }
/* 1.2.0: Customize > The 22 Project > Section backgrounds > Ways to Give background: focal point. */
.t22-ways-give { background-position: var(--t22-give-fp, 50% 50%); }
@media (min-width: 1024px) { .t22-ways-give { background-position: var(--t22-give-fp, 50% 30%); } }
.t22-give__item a { color: var(--t22-white); text-decoration: underline; }
.t22-give { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 48px !important; }
.t22-give__item > * { margin: 0 0 12px !important; }
.t22-give__icon { margin: 0 auto 16px !important; width: 64px; }
.t22-give__item h3 { font-size: 20px; color: var(--t22-white); }
.t22-give__item p { font-size: 15px; }
@media (max-width: 1199px) { .t22-give { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .t22-give { grid-template-columns: 1fr; } }

/* ---------- Donors ---------- */
.t22-logo-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 48px; margin-top: 48px !important; }
.t22-logo-wall .wp-block-image { margin: 0; flex: 0 0 auto; }
.t22-logo-wall img { height: 90px; width: auto; max-width: 260px; object-fit: contain; display: block; }
@media (max-width: 767px) { .t22-logo-wall { gap: 20px 24px; } .t22-logo-wall img { height: 48px; max-width: 140px; } }

/* ---------- FAQ ---------- */
.t22-faq-group { max-width: 900px !important; }
.t22-faq-group + .t22-faq-group { margin-top: var(--t22-space-9) !important; }
.t22-faq-group .wp-block-heading { margin-bottom: 40px; }
.t22-faq { border: 1px solid #e3e3e3; margin: 0 0 12px !important; background: var(--t22-white); }
.t22-faq summary {
	list-style: none; cursor: pointer; padding: 14px 48px 14px 16px; position: relative; font-weight: 700; font-size: 16px; line-height: 1.4;
}
.t22-faq summary::-webkit-details-marker { display: none; }
.t22-faq summary { min-height: 52px; display: flex; align-items: center; }
.t22-faq summary::after {
	content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--t22-dur-1) var(--t22-ease-out);
}
.t22-faq[open] summary::after { transform: translateY(4px) rotate(225deg); }
.t22-faq[hidden], .t22-faq-group[hidden] { display: none !important; }
.t22-faq mark { background: #ffe58a; color: inherit; padding: 0 1px; }
.t22-faq summary:hover { background: #fafafa; }
.t22-faq > p { padding: 0 16px 16px; margin: 0; }

/* ---------- Contact ---------- */
.t22-contact__cols { gap: 64px; }
.t22-contact .t22-media { margin-top: 32px !important; }
.t22-form { display: grid; gap: 16px; }
.t22-form p { margin: 0; }
.t22-form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .t22-form__row--2 { grid-template-columns: 1fr; } }
.t22-field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.t22-field input, .t22-field select, .t22-field textarea, .t22-search__input {
	width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--t22-border-strong); border-radius: var(--t22-radius-sm); background: var(--t22-white); color: var(--t22-black);
}
.t22-field input:focus, .t22-field select:focus, .t22-field textarea:focus, .t22-search__input:focus { border-color: var(--t22-navy); outline: 3px solid rgba(26,34,76,.25); outline-offset: 0; }
.t22-check { display: flex; gap: 12px; align-items: center; font-size: 15px; min-height: 44px; }
.t22-check input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--t22-red); }
.t22-check label { padding: 10px 0; cursor: pointer; }
.t22-form__note { font-size: 13px; color: var(--t22-muted); }
.t22-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.t22-notice { padding: 14px 16px; border-radius: var(--t22-radius-sm); font-weight: 700; }
.t22-notice--success { background: #e7f6ec; color: #145c2c; border: 1px solid #9fd5b1; }
.t22-notice--error { background: #fdecee; color: #8a1323; border: 1px solid #f2a7b1; }
.t22-contact-details { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.t22-contact-details__icon { width: 88px; height: 88px; padding: 20px; border-radius: 50%; background: var(--t22-red); margin-bottom: 16px; }
.t22-contact-details h3 { font-family: var(--t22-font-display); font-weight: 500; font-size: 26px; }
.t22-contact-details p { margin: 0; }
@media (max-width: 767px) { .t22-contact-details { grid-template-columns: 1fr; } }

/* ---------- Newsletter banner ---------- */
.t22-newsletter { background: var(--t22-red); color: var(--t22-white); padding: 48px 0; }
@media (min-width: 1200px) { .t22-newsletter { padding: 56px 0; min-height: 250px; display: flex; align-items: center; } .t22-newsletter > .t22-container { width: min(var(--t22-container), 100% - 2 * var(--t22-gutter)); } }
.t22-newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.t22-newsletter__title { font-family: var(--t22-font-display); font-weight: 500; font-size: clamp(22px, 1rem + .7vw, 28px); color: var(--t22-white); margin-bottom: 8px; }
.t22-newsletter__text p { margin: 0; font-size: 15px; }
.t22-newsletter__form { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.t22-newsletter__input {
	min-height: 50px; min-width: 240px; padding: 0 20px; font: inherit; font-family: var(--t22-font-display); font-weight: 700; text-transform: uppercase; font-size: 16px;
	background: transparent; color: var(--t22-white); border: 2px solid var(--t22-white); border-radius: var(--t22-radius-sm);
}
.t22-newsletter__input::placeholder { color: var(--t22-white); opacity: 1; }
.t22-newsletter__input:focus { outline: 3px solid #f0b400; }
.t22-newsletter__msg, .t22-newsletter__err { flex-basis: 100%; margin: 0; font-weight: 700; }
.t22-newsletter__msg:focus { outline: none; }
.t22-newsletter__err { background: var(--t22-white); color: #8a1323; padding: 8px 12px; border-radius: var(--t22-radius-sm); }
.t22-newsletter__privacy { flex-basis: 100%; margin: 0; font-size: 14px; opacity: .95; }
.t22-newsletter__input--name { min-width: 180px; }
.t22-newsletter__form.is-done .t22-newsletter__input, .t22-newsletter__form.is-done button { display: none; }
.t22-newsletter__form.is-done .t22-newsletter__msg { font-size: 18px; padding: 12px 0; }
.t22-newsletter__form.is-busy button { opacity: .7; pointer-events: none; }
.t22-newsletter__form .t22-newsletter__msg::before { content: "✓ "; }
@media (max-width: 767px) {
	.t22-newsletter__inner { flex-direction: column; align-items: stretch; text-align: center; }
	.t22-newsletter__form { flex-direction: column; }
	.t22-newsletter__input { min-width: 0; width: 100%; }
}

/* ---------- Bottom CTA ---------- */
.t22-bottom-cta { position: relative; overflow: hidden; color: var(--t22-white); text-align: center; padding: 120px 0; background: var(--t22-navy); }
@media (min-width: 1200px) { .t22-bottom-cta { min-height: 773px; display: flex; align-items: flex-end; padding-bottom: 160px; } .t22-bottom-cta__inner { width: min(var(--t22-container), 100% - 2 * var(--t22-gutter)); } }
.t22-bottom-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Boat photo (1.1.5): keep the crew, not the hull, in frame on narrow screens. */
/* Boat photo default 55% 45% keeps the crew, not the hull, in frame. 1.2.0: Customize > The 22 Project > Bottom call to action > Focal point (unset = the defaults above / centre). */
.t22-bottom-cta__bg { object-position: var(--t22-cta-fp, 50% 50%); }
.t22-bottom-cta__bg[src*="bottom-cta-boat"] { object-position: var(--t22-cta-fp, 55% 45%); }
@media (max-width: 767px) {
	.t22-bottom-cta__bg { object-position: var(--t22-cta-mfp, var(--t22-cta-fp, 50% 50%)); }
	.t22-bottom-cta__bg[src*="bottom-cta-boat"] { object-position: var(--t22-cta-mfp, var(--t22-cta-fp, 55% 45%)); }
}
.t22-bottom-cta::after { content: ""; position: absolute; inset: 0; background: rgba(26,34,76,.72); }
.t22-bottom-cta__inner { position: relative; z-index: 1; }
.t22-bottom-cta__title { color: var(--t22-white); max-width: 1000px; margin: 0 auto 24px; }
.t22-bottom-cta__text { max-width: 860px; margin: 0 auto 32px; font-size: var(--t22-fs-lead); }

/* ---------- Marquee ---------- */
.t22-marquee { background: var(--t22-black); color: var(--t22-white); overflow: hidden; white-space: nowrap; padding: 22px 0; font-style: italic; font-size: 16px; }
.t22-marquee__track { display: inline-flex; animation: t22-marquee 60s linear infinite; }
.t22-marquee__track span { padding-right: 120px; }
.t22-marquee { position: relative; }
.t22-marquee:hover .t22-marquee__track, .t22-marquee:focus-within .t22-marquee__track, .t22-marquee.is-paused .t22-marquee__track { animation-play-state: paused; }
/* Edge fade: masks only the text viewport, so the text fades into the dark bar itself (the bar's own background is never masked, so no white shows through). */
.t22-marquee__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.t22-marquee__toggle {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.5); background: var(--t22-black); color: var(--t22-white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.t22-marquee__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.t22-marquee__toggle::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.t22-marquee__toggle[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.t22-marquee:has(.t22-marquee__toggle:not([hidden])) .t22-marquee__viewport { margin-right: 60px; }
@keyframes t22-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.t22-marquee { white-space: normal; text-align: center; padding: 22px var(--t22-gutter); }
	.t22-marquee__viewport { -webkit-mask-image: none !important; mask-image: none !important; margin-right: 0 !important; }
	.t22-marquee__toggle { display: none; }
	.t22-marquee__track { animation: none; display: block; }
	.t22-marquee__track span { padding: 0; }
	.t22-marquee__track span + span { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--t22-white); padding: 64px 0 32px; font-size: 15px; }
@media (min-width: 1200px) { .site-footer { padding-top: 120px; } }
.site-footer__logo { display: flex; justify-content: center; padding-bottom: 40px; border-bottom: 1px solid var(--t22-border-strong); }
.site-logo--footer img { height: 56px; }
@media (min-width: 1200px) { .site-logo--footer img { height: 80px; } }
/* Bundled logo: Figma footer sizes (315px wide on phones, 366px on desktop). Custom logos use the heights above. */
.site-logo--footer.site-logo--default { width: min(315px, 100%); }
.site-logo--footer .site-logo__img { width: 100%; height: auto; }
@media (min-width: 768px) { .site-logo--footer.site-logo--default { width: 330px; } }
@media (min-width: 1200px) { .site-logo--footer.site-logo--default { width: 366px; } }
.site-footer__columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding: 48px 0 56px; border-bottom: 1px solid var(--t22-border-strong); align-items: start; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-menu a, .legal-menu a { color: var(--t22-black); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer-menu a:hover, .legal-menu a:hover { color: var(--t22-red); text-decoration: underline; }
.site-footer__social-title { font-weight: 700; font-size: 18px; margin: 20px 0 8px; }
.t22-social { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.t22-social a { color: var(--t22-black); display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.t22-social a:hover { color: var(--t22-red); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; padding-top: 32px; flex-wrap: wrap; }
.site-footer__bottom p { margin: 0; }
.legal-menu, .legal-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
@media (max-width: 767px) {
	.site-footer__columns { grid-template-columns: 1fr 1fr; text-align: center; gap: 24px 12px; }
	.site-footer__trust { grid-column: 1 / -1; }
	.footer-menu { justify-items: center; }
	.site-footer__trust { display: flex; flex-direction: column; align-items: center; }
	.t22-badges { justify-content: center; }
	.site-footer__bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- Blog ---------- */
.t22-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
@media (max-width: 1199px) { .t22-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .t22-post-grid { grid-template-columns: 1fr; } }
.t22-post-card { border: 1px solid #e5e7eb; border-radius: var(--t22-radius); overflow: hidden; display: flex; flex-direction: column; background: var(--t22-white); }
.t22-post-card__media { display: block; aspect-ratio: 432 / 263; background: var(--t22-placeholder); }
.t22-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t22-post-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.t22-post-card__cat { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--t22-red); margin-bottom: 6px; letter-spacing: .04em; }
.t22-post-card__title { font-family: var(--t22-font-body); font-weight: 700; font-size: 22px; }
.t22-post-card__title a { color: var(--t22-black); text-decoration: none; display: inline-block; padding-block: 9px; margin-block: -9px; }
.t22-post-card__title a:hover { color: var(--t22-red); }
.t22-post-card__excerpt { font-size: 15px; }
.t22-post-card__date { margin-top: auto; font-size: 13px; color: var(--t22-muted); }
.navigation.pagination { margin-top: 48px; }
.nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--t22-border); border-radius: var(--t22-radius-sm); text-decoration: none; color: var(--t22-navy); font-weight: 700; }
.page-numbers.current { background: var(--t22-navy); color: var(--t22-white); border-color: var(--t22-navy); }
.t22-prose-wrap { padding: var(--t22-section-y) 0; }
.t22-prose { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.75; }
.t22-prose h2 { font-size: 30px; margin-top: 1.5em; }
.t22-prose h3 { font-size: 24px; margin-top: 1.4em; }
.t22-prose img { border-radius: var(--t22-radius-sm); }
.t22-prose blockquote { border-left: 4px solid var(--t22-red); margin: 1.5em 0; padding: .25em 0 .25em 1.25em; font-style: italic; }
.t22-single__image { max-width: 1000px; margin: 0 auto 48px; }
.t22-single__image img { width: 100%; border-radius: var(--t22-radius); }
.t22-single__cat a { color: var(--t22-white); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .05em; }
.t22-single__meta { opacity: .85; margin: 0; }
.t22-single__tags { max-width: 760px; margin: 32px auto 0; }
.t22-single__tags a { display: inline-block; padding: 4px 10px; border: 1px solid var(--t22-border); border-radius: 20px; text-decoration: none; font-size: 14px; margin: 0 6px 6px 0; }
.post-navigation { max-width: 760px; margin: 48px auto 0; border-top: 1px solid var(--t22-border); padding-top: 24px; }
.post-navigation .nav-links { justify-content: space-between; }
.post-navigation a { text-decoration: none; color: var(--t22-navy); font-weight: 700; display: inline-block; min-height: 44px; padding-block: 4px; }
.post-navigation .nav-label { display: block; font-size: 13px; text-transform: uppercase; color: var(--t22-muted); }
.t22-comments { max-width: 760px; margin: 48px auto 0; }
.t22-empty { text-align: center; max-width: 640px; margin: 0 auto; }
.t22-empty__actions { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.t22-search { display: flex; gap: 8px; max-width: 520px; margin: 24px auto 0; }
.t22-search__btn { min-height: 48px; padding: 0 18px; box-shadow: none; }
.t22-search-again { padding-top: 32px; }

/* WordPress core alignment helpers */
.alignwide { max-width: 1528px; }
.alignfull { max-width: none; }
.wp-caption-text, figcaption { font-size: 14px; color: var(--t22-muted); }

/* ---------- Editor tweaks ---------- */
.editor-styles-wrapper .t22-triad__item[hidden] { display: block; opacity: .5; }

/* ---------- Mobile refinements (from design comparison) ---------- */
@media (max-width: 767px) {
	.t22-home-hero__pillars { grid-template-columns: 1fr; justify-items: center; }
	.t22-home-hero__pillars .t22-pillar { display: none; }
	.t22-stats .is-style-t22-icon { width: 72px; height: 72px; }
	.t22-stats .is-style-t22-icon img { width: 50%; height: 50%; }
	.t22-tcard { opacity: 1; transform: none; }
	.site-footer__columns { gap: 12px; }
}

/* ---------- Comments ---------- */
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { border-bottom: 1px solid var(--t22-light); padding: 16px 0; }
.comment-meta { font-size: 14px; color: var(--t22-muted); }
.comment-author .avatar { border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.comment-form p { margin: 0 0 16px; }
.comment-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; max-width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--t22-border-strong); border-radius: var(--t22-radius-sm);
}
.comment-form .comment-form-cookies-consent { display: flex; gap: 12px; align-items: center; min-height: 44px; }
.comment-form .comment-form-cookies-consent input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--t22-red); }
.comment-form .comment-form-cookies-consent label { display: inline; font-weight: 400; margin: 0; padding: 10px 0; }
.comment-form .submit { font-family: var(--t22-font-display); font-weight: 700; text-transform: uppercase; background: var(--t22-red); color: var(--t22-white); border: 0; border-radius: var(--t22-radius-sm); padding: 14px 28px; cursor: pointer; }
@media (max-width: 767px) {
	.t22-survey__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 12px; }
	.t22-survey__item { flex: 0 0 85%; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.6); border-radius: var(--t22-radius); padding: 20px; }
}

/* ==========================================================================
   v1.1: navigation, conversion and trust components
   ========================================================================== */

.t22-btn--outline { background: var(--t22-white); color: var(--t22-navy); border-color: var(--t22-navy); }
.t22-btn--outline:hover { background: var(--t22-navy); color: var(--t22-white); }
.t22-placeholder-note { color: var(--t22-muted); font-style: italic; }
.t22-anchor-top { position: absolute; top: 0; }

/* ---------- Mobile menu: scroll lock, backdrop ---------- */
.t22-nav-backdrop { display: none; }
body.t22-nav-open { overflow: hidden; }
.t22-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(10, 14, 32, .55); }
.primary-nav { overscroll-behavior: contain; }
@media (prefers-reduced-motion: no-preference) {
	.t22-nav-backdrop:not([hidden]) { animation: t22-fade-in var(--t22-dur-1) var(--t22-ease-out); }
	.primary-nav.is-open { animation: t22-drop var(--t22-dur-2) var(--t22-ease-out); }
}
@keyframes t22-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes t22-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Breadcrumbs ---------- */
.site-main { position: relative; }
.t22-breadcrumbs { font-size: 14px; padding: 8px 0 0; width: min(var(--t22-container), 100% - 2 * var(--t22-gutter)); margin-inline: auto; }
.t22-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.t22-breadcrumbs li { display: inline-flex; align-items: center; }
.t22-breadcrumbs li + li::before { content: "/"; margin: 0 8px; opacity: .7; }
.t22-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.t22-breadcrumbs [aria-current] { font-weight: 700; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
/* Over a dark page header: white, overlaid at the top of the hero. */
.site-main:has(> .t22-landing-content > .wp-block-cover:first-child) > .t22-breadcrumbs,
.site-main:has(> .t22-page-hero--simple:first-of-type) > .t22-breadcrumbs,
.site-main:has(> article > .t22-page-hero--simple:first-child) > .t22-breadcrumbs,
.site-main:has(> article > .t22-event-hero:first-child) > .t22-breadcrumbs {
	position: absolute; top: 0; left: 0; right: 0; z-index: 3; color: var(--t22-white); text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.site-main:has(> .t22-landing-content > .wp-block-cover:first-child) > .t22-breadcrumbs a:focus-visible { outline-color: #f0b400; }

/* ---------- Our Program jump links ---------- */
.t22-jump {
	position: sticky; top: var(--t22-header-h); z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--t22-border);
	box-shadow: 0 6px 16px rgba(0,0,0,.06); backdrop-filter: saturate(1.4) blur(6px); -webkit-backdrop-filter: saturate(1.4) blur(6px);
}
.admin-bar .t22-jump { top: calc(var(--t22-header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .t22-jump { top: var(--t22-header-h); } }
.t22-jump__list {
	list-style: none; margin: 0 auto; padding: 8px var(--t22-gutter); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
	max-width: calc(var(--t22-container) + 2 * var(--t22-gutter)); scroll-snap-type: x proximity;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.t22-jump__list::-webkit-scrollbar { display: none; }
.t22-jump__list li { flex: 0 0 auto; scroll-snap-align: start; }
.t22-jump__list li:last-child { padding-right: 24px; }
.t22-jump__link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--t22-border-strong);
	font-family: var(--t22-font-display); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; color: var(--t22-navy); text-decoration: none;
	transition: background-color var(--t22-dur-1), color var(--t22-dur-1), border-color var(--t22-dur-1);
}
.t22-jump__link:hover { border-color: var(--t22-navy); color: var(--t22-navy); }
.t22-jump__link.is-current { background: var(--t22-navy); border-color: var(--t22-navy); color: var(--t22-white); }
.t22-jump__link--cta { background: var(--t22-red); border-color: var(--t22-red); color: var(--t22-white); }
.t22-jump__link--cta:hover, .t22-jump__link--cta.is-current { background: #961a2a; border-color: #961a2a; color: var(--t22-white); }
@media (min-width: 1200px) { .t22-jump__list { justify-content: center; -webkit-mask-image: none; mask-image: none; } }
[id^="program-"], #apply-for-hbot, #legacy-report, #wall-of-honor, #give, #contact-form, #newsletter { scroll-margin-top: calc(var(--t22-header-h) + 72px); }

/* ---------- Apply for HBOT ---------- */
.t22-apply__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px !important; }
.t22-apply__card { background: var(--t22-white); border-radius: var(--t22-radius); padding: 32px 28px; border-top: 6px solid var(--t22-red); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.t22-apply__card > * { margin-top: 0; }
.t22-apply__card-title { font-size: 22px; margin-bottom: 16px; }
.t22-apply__note { font-size: 14px; color: var(--t22-muted); margin: 16px 0 0; }
.t22-checklist, .t22-steps { margin: 0; padding: 0; list-style: none; }
.t22-checklist li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.t22-checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--t22-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.t22-steps { counter-reset: t22-step; }
.t22-steps li { counter-increment: t22-step; position: relative; padding-left: 52px; margin-bottom: 20px; min-height: 36px; }
.t22-steps li::before { content: counter(t22-step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--t22-navy); color: var(--t22-white); font-family: var(--t22-font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.t22-apply .wp-block-buttons { margin-top: 40px !important; }
@media (max-width: 1023px) { .t22-apply__grid { grid-template-columns: 1fr; max-width: 640px !important; } }

/* ---------- Donation picker ---------- */
.t22-give-section .t22-lead { margin-bottom: 0; }
.t22-give-picker { max-width: 720px !important; margin-top: 40px !important; background: var(--t22-white); border: 1px solid var(--t22-border); border-radius: var(--t22-radius-lg); padding: 32px; box-shadow: var(--t22-shadow-card); text-align: center; }
.t22-give-picker fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.t22-give-picker__freq { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--t22-light); margin-bottom: 24px !important; }
.t22-seg { position: relative; }
.t22-seg input, .t22-amt input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.t22-seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; border-radius: 999px; font-weight: 700; color: var(--t22-navy); transition: background-color var(--t22-dur-1), color var(--t22-dur-1); }
.t22-seg input:checked + span { background: var(--t22-navy); color: var(--t22-white); }
.t22-seg input:focus-visible + span, .t22-amt input:focus-visible + span { outline: 3px solid #f0b400; outline-offset: 2px; }
.t22-give-picker__legend { font-family: var(--t22-font-display); font-weight: 500; font-size: 18px; margin: 0 auto 16px; padding: 0; text-align: center; }
.t22-give-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.t22-amt { position: relative; display: block; }
.t22-amt span {
	display: flex; align-items: center; justify-content: center; min-height: 56px; border: 2px solid var(--t22-border-strong); border-radius: var(--t22-radius-sm);
	font-family: var(--t22-font-display); font-weight: 700; font-size: 20px; color: var(--t22-navy); background: var(--t22-white);
	transition: border-color var(--t22-dur-1), background-color var(--t22-dur-1), color var(--t22-dur-1), transform var(--t22-dur-1) var(--t22-ease-out);
}
.t22-amt input:hover + span { border-color: var(--t22-navy); }
.t22-amt input:checked + span { border-color: var(--t22-red); background: var(--t22-red); color: var(--t22-white); }
.t22-amt input:active + span { transform: scale(.97); }
.t22-give-picker__other { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.t22-give-picker__other[hidden] { display: none; }
.t22-give-picker__other label { font-weight: 700; flex-basis: 100%; }
.t22-give-picker__currency { font-weight: 700; font-size: 20px; }
.t22-give-picker__other input { width: 160px; min-height: 48px; font: inherit; font-size: 18px; padding: 8px 12px; border: 2px solid var(--t22-border-strong); border-radius: var(--t22-radius-sm); }
.t22-give-picker__note { margin: 20px auto 0; min-height: 3.2em; max-width: 520px; font-size: 17px; }
.t22-give-picker__note strong { color: var(--t22-red); }
.t22-give-picker__cta { margin-top: 16px; min-width: min(100%, 320px); }
.t22-give-picker__secure { font-size: 14px; color: var(--t22-muted); margin: 16px 0 0; }
.t22-give-picker__secure::before { content: "🔒 "; }
@media (max-width: 767px) {
	.t22-give-picker { padding: 24px 16px; }
	.t22-give-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.t22-give-picker__cta { width: 100%; }
}

/* ---------- Wall of Honor ---------- */
.t22-tributes { list-style: none; margin: 40px auto 0 !important; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.t22-tribute { background: var(--t22-white); border-radius: var(--t22-radius); padding: 28px 24px; border-left: 6px solid var(--t22-navy); box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.t22-tribute--memory { border-left-color: var(--t22-red); }
.t22-tribute > * { margin: 0; }
.t22-tribute__type { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--t22-muted); }
.t22-tribute__name { font-size: 22px; margin: 6px 0 12px; }
.t22-tribute__msg { font-style: italic; }
.t22-tribute__from { margin-top: 12px; color: var(--t22-muted); font-size: 15px; }
.t22-tributes__note { text-align: center; font-size: 14px; color: var(--t22-muted); margin-top: 16px !important; }
.t22-wall-of-honor .wp-block-buttons { justify-content: center; }
@media (max-width: 1023px) { .t22-tributes { grid-template-columns: 1fr; max-width: 640px; } }

/* ---------- FAQ tools and help card ---------- */
.t22-faq-tools { max-width: 900px !important; margin-bottom: 64px !important; }
.t22-faq-tools[hidden] { display: none; }
.t22-faq-tools__search { margin: 0 0 16px; }
.t22-faq-tools__search label { display: block; font-weight: 700; margin-bottom: 8px; }
.t22-faq-tools__field { position: relative; display: block; }
.t22-faq-tools__field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--t22-muted); pointer-events: none; }
.t22-faq-tools__field input { width: 100%; min-height: 52px; padding: 12px 16px 12px 48px; font: inherit; font-size: 16px; border: 2px solid var(--t22-border-strong); border-radius: var(--t22-radius-sm); }
.t22-faq-tools__field input:focus { border-color: var(--t22-navy); outline: 3px solid rgba(26,34,76,.25); outline-offset: 0; }
.t22-faq-tools__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.t22-chip {
	min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--t22-border-strong); background: var(--t22-white); color: var(--t22-navy);
	font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color var(--t22-dur-1), color var(--t22-dur-1), border-color var(--t22-dur-1);
}
.t22-chip:hover { border-color: var(--t22-navy); }
.t22-chip[aria-pressed="true"] { background: var(--t22-navy); border-color: var(--t22-navy); color: var(--t22-white); }
.t22-faq-tools__count { font-size: 14px; color: var(--t22-muted); margin: 12px 0 0; min-height: 1.4em; }
.t22-faq-tools__empty { margin: 16px 0 0; padding: 16px; background: var(--t22-light); border-radius: var(--t22-radius-sm); }
.t22-faq-tools.is-filtering ~ .t22-faq-group + .t22-faq-group { margin-top: 48px !important; }
.t22-faq-help { padding-top: 0 !important; }
.t22-help-card { max-width: 900px; margin: 0 auto; background: var(--t22-navy); color: var(--t22-white); border-radius: var(--t22-radius-lg); padding: 40px; text-align: center; }
.t22-help-card__title { color: var(--t22-white); }
.t22-help-card__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; margin: 24px 0 0; }
.t22-help-card .t22-btn--navy { background: transparent; border-color: var(--t22-white); box-shadow: none; }
@media (max-width: 767px) { .t22-help-card { padding: 32px 20px; } .t22-help-card__actions .t22-btn { width: 100%; } }

/* ---------- Stats "as of" line ---------- */
.t22-stats__meta { text-align: center; font-size: 14px; opacity: .9; margin-top: 40px !important; }
.t22-stats__meta a { color: var(--t22-white); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Program swipe rows: controls ---------- */
.t22-scroller { position: relative; }
.t22-scroller-nav { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 12px !important; }
.t22-scroller-nav button {
	width: 48px; height: 48px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.t22-scroller-nav button[disabled] { opacity: .35; cursor: default; }
.t22-scroller-nav__count { font-family: var(--t22-font-display); font-weight: 700; min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.t22-scroller-nav.is-active { display: flex; }
.t22-scroller-row.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.t22-scroller-row.is-scrollable.is-end { -webkit-mask-image: none; mask-image: none; }
.t22-scroller-row:focus-visible { outline: 3px solid #f0b400; outline-offset: 4px; }

/* ---------- Video modal ---------- */
.t22-vcard__play { cursor: pointer; }
.t22-vcard__play svg { transition: transform var(--t22-dur-1) var(--t22-ease-out); }
.t22-vcard__play:hover svg { transform: scale(1.08); }
.t22-vcard__soon { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 4px; background: rgba(26,34,76,.92); color: var(--t22-white); font-size: 13px; font-weight: 700; }
.t22-video-modal { width: min(960px, 100vw - 32px); max-width: none; padding: 0; border: 0; background: #000; border-radius: var(--t22-radius); overflow: visible; }
.t22-video-modal::backdrop { background: rgba(5, 8, 20, .85); }
.t22-video-modal__frame { position: relative; aspect-ratio: 16 / 9; }
.t22-video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--t22-radius); }
.t22-video-modal__close {
	position: absolute; top: -56px; right: 0; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--t22-white); background: transparent; color: var(--t22-white);
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.t22-video-modal__title { position: absolute; top: -48px; left: 0; right: 64px; margin: 0; color: var(--t22-white); font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
	.t22-video-modal[open] { animation: t22-pop-in var(--t22-dur-2) var(--t22-ease-out); }
	.t22-video-modal[open]::backdrop { animation: t22-fade-in var(--t22-dur-2) var(--t22-ease-out); }
}
@keyframes t22-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Footer trust block ---------- */
.t22-trust { margin-bottom: 56px; }
.t22-trust__inner { display: grid; grid-template-columns: 1fr auto auto; gap: 24px 40px; align-items: center; background: var(--t22-light); border-radius: var(--t22-radius-lg); padding: 32px 40px; }
.t22-trust__title { font-family: var(--t22-font-display); font-weight: 500; font-size: 24px; margin: 0 0 8px; }
.t22-trust__ratio { font-weight: 700; font-size: 18px; margin: 0 0 6px; color: var(--t22-navy); }
.t22-trust__ein { margin: 0; font-size: 14px; color: #4a4a4a; }
.t22-trust .t22-badges img { height: 64px; }
.t22-trust .t22-badges a { display: block; border-radius: 4px; transition: transform var(--t22-dur-1) var(--t22-ease-out); }
@media (hover: hover) { .t22-trust .t22-badges a:hover { transform: translateY(-2px); } }
@media (max-width: 1023px) { .t22-trust__inner { grid-template-columns: 1fr; text-align: center; padding: 28px 20px; justify-items: center; } }

/* ---------- Sticky mobile action bar + back to top ---------- */
.t22-action-bar { display: none; }
@media (max-width: 767px) {
	.t22-action-bar {
		display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.98); box-shadow: 0 -6px 20px rgba(0,0,0,.14);
		transform: translateY(110%); transition: transform var(--t22-dur-2) var(--t22-ease-out); visibility: hidden;
	}
	.t22-action-bar.is-visible { transform: none; visibility: visible; }
	body.t22-nav-open .t22-action-bar { transform: translateY(110%); visibility: hidden; }
	.t22-has-action-bar.t22-bar-on { --t22-action-bar-h: 64px; }
}
.t22-action-bar__btn {
	display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--t22-radius-sm); border: 2px solid var(--t22-red);
	font-family: var(--t22-font-display); font-weight: 700; font-size: 15px; text-transform: uppercase; text-decoration: none; letter-spacing: .02em;
}
.t22-action-bar__btn--donate { background: var(--t22-red); color: var(--t22-white); }
.t22-action-bar__btn--apply { background: var(--t22-white); color: var(--t22-navy); border-color: var(--t22-navy); }
.t22-action-bar__btn:hover { color: inherit; }
.t22-action-bar__btn--donate:hover { color: var(--t22-white); }
.t22-to-top {
	position: fixed; right: 16px; bottom: calc(16px + var(--t22-action-bar-h) + env(safe-area-inset-bottom)); z-index: 55; width: 48px; height: 48px; border-radius: 50%;
	background: var(--t22-navy); color: var(--t22-white); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--t22-shadow-btn);
	opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--t22-dur-2) var(--t22-ease-out), transform var(--t22-dur-2) var(--t22-ease-out), bottom var(--t22-dur-2) var(--t22-ease-out);
}
.t22-to-top[hidden] { display: none; }
.t22-to-top svg { transform: rotate(90deg); }
.t22-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.t22-to-top:hover { background: var(--t22-navy-deep); color: var(--t22-white); }
@media (min-width: 1200px) { .t22-to-top { right: 24px; bottom: 24px; } }

/* ==========================================================================
   v1.1 motion system. Everything animated lives inside prefers-reduced-motion:
   no-preference, and hidden start states only apply once JS adds html.t22-motion
   (so content is always visible without JS).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

	/* 2. Reveal + stagger */
	.t22-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--t22-dur-3) var(--t22-ease-out), transform var(--t22-dur-3) var(--t22-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
	.t22-motion [data-reveal="fade"] { transform: none; }
	.t22-motion [data-reveal].is-in { opacity: 1; transform: none; }

	/* 1. Heading bar draw-in */
	.t22-motion .is-style-t22-bar[data-bar]::before, .t22-motion .is-style-t22-bar[data-bar]::after, .t22-motion .t22-bar-center[data-bar]::after { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--t22-ease-io) .15s; }
	.t22-motion .is-style-t22-bar.has-text-align-center[data-bar]::after, .t22-motion .t22-bar-center[data-bar]::after { transform-origin: center; }
	.t22-motion [data-bar].is-drawn::before, .t22-motion [data-bar].is-drawn::after { transform: none; }

	/* 3. Hero entrance (title moves only: no opacity change, so LCP is not delayed) */
	.t22-motion .t22-home-hero__title, .t22-motion .t22-page-hero__title { animation: t22-rise-t .8s var(--t22-ease-out) both; }
	.t22-motion .t22-home-hero__text, .t22-motion .t22-page-hero__text { animation: t22-rise .8s var(--t22-ease-out) .12s both; }
	.t22-motion .t22-home-hero__panel .wp-block-buttons, .t22-motion .t22-page-hero .wp-block-buttons { animation: t22-rise .8s var(--t22-ease-out) .24s both; }
	.t22-motion .t22-home-hero__pillars { animation: t22-fade-in .8s var(--t22-ease-out) .4s both; }

	/* 4-5. Stat icons pop with the count */
	.t22-motion .t22-stat[data-reveal] .is-style-t22-icon { transform: scale(.6); opacity: 0; }
	.t22-motion .t22-stat.is-in .is-style-t22-icon { animation: t22-pop .6s var(--t22-ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }

	/* 6. Header: shadow + height ease after 40px of scroll (desktop). Margin keeps page flow constant (no layout shift). */
	.site-header { transition: box-shadow .3s var(--t22-ease-out), margin-bottom .3s var(--t22-ease-out); }
	.site-header__inner { transition: min-height .3s var(--t22-ease-out); }
	.site-logo img { transition: height .3s var(--t22-ease-out); }

	/* 8. Pinned-box corner dots slide in */
	.t22-motion .is-style-t22-pinned[data-reveal]::before { transform: translateX(28px); opacity: 0; transition: transform .4s var(--t22-ease-out) .3s, opacity .4s .3s; }
	.t22-motion .is-style-t22-pinned[data-reveal]::after { transform: translateX(-28px); opacity: 0; transition: transform .4s var(--t22-ease-out) .3s, opacity .4s .3s; }
	.t22-motion .is-style-t22-pinned.is-in::before, .t22-motion .is-style-t22-pinned.is-in::after { transform: none; opacity: 1; }

	/* 9. Triad ring draws on reveal */
	.t22-motion .t22-triad__ring[data-draw]::before { -webkit-mask: conic-gradient(#000 var(--t22-ring), transparent 0); mask: conic-gradient(#000 var(--t22-ring), transparent 0); --t22-ring: 0deg; transition: --t22-ring 1s var(--t22-ease-io); }
	.t22-motion .t22-triad__ring[data-draw].is-drawn::before { --t22-ring: 360deg; }

	/* 10. Map: one slow pulse over Boca Raton, two iterations */
	.t22-map-pulse { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; opacity: 0; }
	.t22-map-pulse::before, .t22-map-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--t22-red); }
	.t22-map.is-in .t22-map-pulse { opacity: 1; }
	.t22-map.is-in .t22-map-pulse::before { animation: t22-pulse 2s var(--t22-ease-out) .9s 2 both; }
	.t22-map.is-in .t22-map-pulse::after { animation: t22-pulse 2s var(--t22-ease-out) 1.5s 2 both; }

	/* 14. FAQ accordion height animation (progressive enhancement) */
	:root { interpolate-size: allow-keywords; }
	.t22-faq::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--t22-ease-out), content-visibility .3s allow-discrete; }
	.t22-faq[open]::details-content { block-size: auto; }
}
@property --t22-ring { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes t22-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes t22-rise-t { from { transform: translateY(20px); } to { transform: none; } }
@keyframes t22-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes t22-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
.t22-map { position: relative; }
.t22-count { font-variant-numeric: tabular-nums; display: inline-block; }

/* 6. Header shadow once scrolled (1.3.1: the menu-button header keeps its height) */
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* 7. Buttons and cards on hover-capable devices */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.t22-btn, .wp-block-button__link { transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--t22-ease-out), box-shadow .2s var(--t22-ease-out); }
	.t22-btn:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(180, 32, 51, .28); }
	.is-style-t22-outline-light .wp-block-button__link:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
	.t22-btn:active, .wp-block-button__link:active { transform: scale(.98); box-shadow: var(--t22-shadow-btn); }
	.t22-card, .t22-vcard, .t22-post-card, .t22-tribute, .t22-apply__card { transition: transform .4s var(--t22-ease-out), box-shadow .4s var(--t22-ease-out); }
	.t22-card:hover, .t22-vcard:hover, .t22-post-card:hover, .t22-tribute:hover, .t22-apply__card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.14); }
	.t22-card .wp-block-image, .t22-post-card__media, .t22-vcard__media { overflow: hidden; }
	.t22-card .wp-block-image { border-radius: 12px; }
	.t22-card .wp-block-image img, .t22-post-card__media img, .t22-vcard__media img { transition: transform .4s var(--t22-ease-out); }
	.t22-card:hover .wp-block-image img, .t22-post-card:hover .t22-post-card__media img, .t22-vcard:hover .t22-vcard__media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.t22-btn:hover, .wp-block-button__link:hover { transform: none; }
	.t22-tcard { transition: none; }
	.t22-action-bar, .t22-to-top { transition: none; }
}

/* =====================================================================================================================
 * Trinity (from the Trinity Hero variant 1.3.0): the Offer Trinity (.t22-offer). In this theme it is the section after the
 * Home photo hero, navy (see the 1.4.0 block at the end).
 * Layout modes are set on <html data-t22-tri> by an inline head script and refined by initTrinity() in main.js:
 *   center: messages appear inside the ring (default when the longest message fits)
 *   side:   wide but short windows; messages beside the ring
 *   below:  narrow windows (and no-JS); heading above, messages under the ring
 * --t22-tri-r is the ring's diameter. Everything inside the hero scales with it.
 * ================================================================================================================== */
.admin-bar { --t22-ab: 32px; }
@media (max-width: 782px) { .admin-bar { --t22-ab: 46px; } }
.t22-trinity .t22-offer {
	--t22-tri-avail: calc(100svh - var(--t22-header-h) - var(--t22-ab, 0px));
	/* 1.5.4: room above the Medical label/orb glow and below the lower orbs for the scroll cue. */
	--t22-tri-pad: clamp(64px, 8vh, 120px);
	--t22-tri-r: clamp(280px, min(calc(100vw - 2 * var(--t22-gutter)), calc(var(--t22-tri-avail) - 2 * var(--t22-tri-pad) - 80px)), 640px);
	padding: var(--t22-tri-pad) var(--t22-gutter) var(--t22-tri-pad);
}
[data-t22-tri="center"] .t22-trinity .t22-offer,
[data-t22-tri="side"] .t22-trinity .t22-offer {
	/* Leave headroom for the pad + Medical label overhang above the ring. */
	--t22-tri-r: clamp(320px, min(calc(100vw - 2 * var(--t22-gutter)), calc(var(--t22-tri-avail) - 2 * var(--t22-tri-pad) - 48px)), 1100px);
}
.t22-trinity .t22-offer > .wp-block-heading { font-size: clamp(28px, 1.1rem + 2vw, 46px); line-height: 1.15; max-width: 22ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.t22-trinity .t22-offer .t22-triad { display: block; margin-top: 24px !important; max-width: none; }
.t22-trinity .t22-offer .t22-triad__ring { width: var(--t22-tri-r); max-width: 100%; margin: 0 auto; }
.t22-trinity .t22-offer .t22-triad__ring > .t22-triad__hint { display: none; }

/* windows ("looking glasses") sit on the ring line, so the centre stays clear for the message */
.t22-trinity .t22-offer .t22-triad__circle,
.t22-trinity .t22-offer .t22-triad__circle.is-active { width: 24%; right: auto; transform-origin: var(--t22-tri-o, 50% 50%);
	box-shadow: 0 0 0 clamp(4px, calc(var(--t22-tri-r) * .008), 8px) var(--t22-navy-deep), 0 0 0 clamp(6px, calc(var(--t22-tri-r) * .011), 11px) rgba(255, 255, 255, .9); }
.t22-trinity .t22-offer .t22-triad__circle--a,
.t22-trinity .t22-offer .t22-triad__circle--a.is-active { top: 2%; left: 38%; --t22-tri-o: 50% 100%; }
.t22-trinity .t22-offer .t22-triad__circle--b,
.t22-trinity .t22-offer .t22-triad__circle--b.is-active { top: 56%; left: 6.8231%; --t22-tri-o: 93.3013% 25%; }
.t22-trinity .t22-offer .t22-triad__circle--c,
.t22-trinity .t22-offer .t22-triad__circle--c.is-active { top: 56%; left: 69.1769%; --t22-tri-o: 6.6987% 25%; }
.t22-trinity .t22-offer .t22-triad__circle:hover { transform: scale(1.05); }
.t22-trinity .t22-offer .t22-triad__circle.is-active { transform: scale(1.12); z-index: 2; }
.t22-trinity .t22-offer .t22-triad__circle:focus-visible { outline-offset: clamp(10px, calc(var(--t22-tri-r) * .02), 18px); }
.t22-trinity .t22-offer .t22-triad__label { font-size: clamp(13px, calc(var(--t22-tri-r) * .021), 20px); letter-spacing: .04em; }
/* light particle targets follow the new window positions (units: % of the ring, see the "Light on the Path" block) */
.t22-trinity .t22-lit .t22-triad__ring { --a-x: 50; --a-y: 14; --a-r: 12; --b-x: 18.82; --b-y: 68; --b-r: 12; --c-x: 81.18; --c-y: 68; --c-r: 12; --act-x: 50; --act-y: 14; --act-r: 12; }
.t22-trinity .t22-lit .t22-triad__ring:has(.t22-triad__circle--a.is-active) { --a-y: 12.6; --a-r: 13.4; --act-x: 50; --act-y: 12.6; --act-r: 13.4; }
.t22-trinity .t22-lit .t22-triad__ring:has(.t22-triad__circle--b.is-active) { --b-x: 17.57; --b-y: 68.72; --b-r: 13.4; --act-x: 17.57; --act-y: 68.72; --act-r: 13.4; }
.t22-trinity .t22-lit .t22-triad__ring:has(.t22-triad__circle--c.is-active) { --c-x: 82.43; --c-y: 68.72; --c-r: 13.4; --act-x: 82.43; --act-y: 68.72; --act-r: 13.4; }

/* messages */
.t22-trinity .t22-offer .t22-triad__panel { max-width: 640px; margin: 24px auto 0; padding: 24px; text-align: center; }
.t22-trinity .t22-offer .t22-triad__item :is(h2, h3) { font-family: var(--t22-font-display); font-weight: 500; color: var(--t22-white); letter-spacing: 0; font-size: clamp(24px, 1rem + 1.2vw, 34px); line-height: 1.15; margin: 0 0 .45em; }
.t22-trinity .t22-offer .t22-triad__item p { margin: 0; }
.t22-trinity .t22-offer .t22-triad__more { margin-top: 1em !important; }
.t22-trinity .t22-offer .t22-triad__link { color: var(--t22-white); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.t22-trinity .t22-offer .t22-triad__link::after { content: " \2192"; }
.t22-trinity .t22-offer .t22-triad__link:hover { text-decoration-thickness: 3px; }
.t22-trinity .t22-offer .t22-triad__link:focus-visible { outline: 3px solid var(--t22-white); outline-offset: 4px; border-radius: 2px; }
.t22-trinity .t22-offer .t22-triad__hint { position: static; font-size: clamp(14px, calc(var(--t22-tri-r) * .022), 19px); font-style: italic; opacity: .92; margin: 0; }
.t22-js .t22-trinity .t22-offer .t22-triad__item { transition: opacity .2s ease, visibility 0s linear .2s; }
.t22-js .t22-trinity .t22-offer .t22-triad__item:not(.is-shown) { opacity: 0; visibility: hidden; }
.t22-js .t22-trinity .t22-offer .t22-triad__item.is-shown { opacity: 1; visibility: visible; transition: opacity .3s ease .2s, visibility 0s linear .2s; }
.t22-js .t22-trinity .t22-offer .t22-triad__item.is-entering { animation: none; }
.t22-js .t22-trinity .t22-offer > .wp-block-heading { transition: opacity .3s ease .2s; }

/* below: heading above the ring, one message at a time under it */
.t22-js[data-t22-tri="below"] .t22-trinity .t22-offer .t22-triad__item:not(.is-shown) { display: none; }
.t22-js[data-t22-tri="below"] .t22-trinity .t22-offer .t22-triad__item.is-shown { animation: t22-triad-fade .3s ease-out; }
.t22-js[data-t22-tri="below"] .t22-trinity .t22-offer .t22-triad__item--intro.is-shown { animation: none; }
.t22-js[data-t22-tri="below"] .t22-trinity .t22-offer .t22-triad__panel:has(.t22-triad__item--intro.is-shown) { border-color: transparent; background: none; padding-block: 8px; }

/* center + side: the hero fills the first screen; the heading and hint sit in the middle of the ring */
[data-t22-tri="center"] .t22-trinity .t22-offer,
[data-t22-tri="side"] .t22-trinity .t22-offer {
	display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; justify-items: center;
	min-height: var(--t22-tri-avail); padding: var(--t22-tri-pad) var(--t22-gutter) var(--t22-tri-pad);
}
[data-t22-tri="center"] .t22-trinity .t22-offer > *,
[data-t22-tri="side"] .t22-trinity .t22-offer > * { margin: 0 !important; max-width: none; }
[data-t22-tri="center"] .t22-trinity .t22-offer .t22-triad,
[data-t22-tri="center"] .t22-trinity .t22-offer .t22-triad__panel,
[data-t22-tri="side"] .t22-trinity .t22-offer .t22-triad,
[data-t22-tri="side"] .t22-trinity .t22-offer .t22-triad__panel { display: contents; }
[data-t22-tri="center"] .t22-trinity .t22-offer .t22-triad__ring,
[data-t22-tri="side"] .t22-trinity .t22-offer .t22-triad__ring { grid-area: 1 / 1 / 5 / 2; align-self: center; margin: 0; }
[data-t22-tri="center"] .t22-trinity .t22-offer > .wp-block-heading,
[data-t22-tri="side"] .t22-trinity .t22-offer > .wp-block-heading {
	grid-area: 2 / 1; align-self: end; z-index: 3; width: calc(var(--t22-tri-r) * .5); max-width: none; pointer-events: none;
	font-size: clamp(24px, calc(var(--t22-tri-r) * .052), 54px);
	text-shadow: 0 1px 18px rgba(6, 9, 26, .55);
}
[data-t22-tri="center"] .t22-trinity .t22-offer > .wp-block-heading::after,
[data-t22-tri="side"] .t22-trinity .t22-offer > .wp-block-heading::after { margin-top: calc(var(--t22-tri-r) * .022); }
[data-t22-tri="center"] .t22-trinity .t22-offer .t22-triad__item--intro,
[data-t22-tri="side"] .t22-trinity .t22-offer .t22-triad__item--intro {
	grid-area: 3 / 1; align-self: start; z-index: 3; width: calc(var(--t22-tri-r) * .42); text-align: center; pointer-events: none;
	margin-top: calc(var(--t22-tri-r) * .02) !important; text-shadow: 0 1px 12px rgba(6, 9, 26, .6);
}
[data-t22-tri="center"] .t22-trinity .t22-offer .t22-triad__item:not(.t22-triad__item--intro) {
	grid-area: 2 / 1 / 4 / 2; align-self: center; z-index: 3; position: relative; width: calc(var(--t22-tri-r) * .37); text-align: center;
	font-size: var(--t22-tri-fs, clamp(13px, calc(var(--t22-tri-r) * .0195), 19px)); line-height: 1.45;
	text-shadow: 0 1px 10px rgba(6, 9, 26, .7);
}
[data-t22-tri="center"] .t22-trinity .t22-offer .t22-triad__item:not(.t22-triad__item--intro) :is(h2, h3) { font-size: 1.85em; }
/* a soft dark wash behind the message keeps it readable over the centre glow and the light specks */
[data-t22-tri="center"] .t22-trinity .t22-offer .t22-triad__item:not(.t22-triad__item--intro)::before {
	content: ""; position: absolute; inset: -16% -10%; z-index: -1; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(14, 19, 46, .82), rgba(14, 19, 46, .62) 55%, rgba(14, 19, 46, 0));
}
/* the page's h1: opacity 0 only (visibility: hidden would take the only h1 out of the accessibility tree) */
[data-t22-tri="center"] .t22-trinity .t22-offer.t22-tri-engaged > .wp-block-heading { opacity: 0; transition: opacity .2s ease; }

/* side: messages beside the ring (wide windows too short for the text to fit inside it) */
[data-t22-tri="side"] .t22-trinity .t22-offer { grid-template-columns: minmax(0, 1fr) var(--t22-tri-r) minmax(0, 1fr); column-gap: 40px; }
[data-t22-tri="side"] .t22-trinity .t22-offer .t22-triad__ring { grid-column: 2; }
[data-t22-tri="side"] .t22-trinity .t22-offer > .wp-block-heading,
[data-t22-tri="side"] .t22-trinity .t22-offer .t22-triad__item--intro { grid-column: 2; }
[data-t22-tri="side"] .t22-trinity .t22-offer .t22-triad__item:not(.t22-triad__item--intro) {
	grid-area: 1 / 3 / 5 / 4; align-self: center; justify-self: start; max-width: 400px; text-align: left; font-size: 16px; line-height: 1.55;
	padding: 28px; border-radius: var(--t22-radius-lg); border: 1px solid var(--t22-glass-border); background: rgba(10, 14, 36, .45);
}

/* scroll cue */
.t22-tri-cue { position: absolute; left: 50%; bottom: max(14px, calc(var(--t22-tri-pad, 64px) * .28 - 8px)); z-index: 4; width: 48px; height: 48px; margin: 0 !important; translate: -50% 0; display: grid; place-items: center; border-radius: 50%; color: var(--t22-white); opacity: .85; }
.t22-tri-cue::before { content: ""; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.t22-tri-cue:hover { opacity: 1; }
.t22-tri-cue:focus-visible { outline: 3px solid var(--t22-white); outline-offset: 2px; }
[data-t22-tri="below"] .t22-tri-cue { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.t22-tri-cue::before { animation: t22-tri-bob 2.4s ease-in-out infinite; }
}
@keyframes t22-tri-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@media (prefers-reduced-motion: reduce) {
	.t22-js .t22-trinity .t22-offer .t22-triad__item,
	.t22-js .t22-trinity .t22-offer .t22-triad__item.is-shown,
	.t22-js .t22-trinity .t22-offer > .wp-block-heading { transition: none; }
	.t22-js[data-t22-tri="below"] .t22-trinity .t22-offer .t22-triad__item.is-shown { animation: none; }
}

/* =====================================================================================================================
 * Menu-button header (from the Trinity Hero variant 1.3.1): logo, Apply, Donate and the menu button at every screen size.
 * ================================================================================================================== */
@media (min-width: 1200px) { :root { --t22-header-h: 88px; } }
.nav-toggle__text { display: none; }
.nav-toggle:hover { color: var(--t22-red); }
@media (min-width: 768px) {
	.site-header__inner { gap: 16px; }
	.site-header__donate { font-size: 14px; padding: 10px 22px; }
	.nav-toggle {
		width: auto; flex: 0 0 auto; gap: 10px; padding: 0 14px 0 10px; border: 2px solid transparent;
		font-family: var(--t22-font-display); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
	}
	.nav-toggle__text { display: inline; }
	.nav-toggle[aria-expanded="true"] { border-color: currentColor; }
}
@media (min-width: 1200px) {
	.site-logo img { height: 48px; }
	.site-header__inner { gap: 20px; }
	.site-header__donate { min-height: 48px; padding: 12px 28px; font-size: 15px; }
	.nav-toggle { height: 48px; font-size: 15px; }
}

/* menu panel: a card under the right end of the header from tablet up (full-width drop-down on phones) */
@media (min-width: 768px) {
	.primary-nav {
		left: auto; right: max(var(--t22-gutter), calc((100% - var(--t22-container)) / 2)); top: calc(100% + 10px);
		width: min(420px, calc(100% - 2 * var(--t22-gutter))); padding: 12px 32px 32px; border: 0; border-radius: var(--t22-radius-lg);
		box-shadow: 0 24px 60px rgba(10, 14, 32, .32); max-height: calc(100vh - var(--t22-header-h) - var(--t22-ab, 0px) - 32px);
	}
	.primary-nav a { padding: 16px 4px; font-size: 18px; letter-spacing: .04em; transition: color .2s, padding-left .2s; }
	.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--t22-red); padding-left: 10px; }
	.primary-nav .current-menu-item > a, .primary-nav [aria-current="page"] { color: var(--t22-red); border-bottom-color: var(--t22-light); }
	.primary-nav .current-menu-item > a::before, .primary-nav [aria-current="page"]::before { content: ""; display: inline-block; width: 16px; height: 4px; margin: 0 12px 0 0; vertical-align: middle; background: var(--t22-red); }
	.primary-nav .t22-menu-apply > a { margin-top: 24px; min-height: 56px; font-size: 16px; padding-left: 16px; }
	.primary-nav .t22-menu-apply > a:hover, .primary-nav .t22-menu-apply > a:focus-visible { padding-left: 16px; color: var(--t22-white); background: var(--t22-navy); }
}
@media (min-width: 1200px) {
	.primary-nav { width: 440px; padding: 16px 40px 40px; }
	.primary-nav a { font-size: 20px; padding-block: 18px; }
}

@media (min-width: 1600px) { .site-logo img { height: 54px; } }

/* =====================================================================================================================
 * Light dust (from the Trinity Hero variant 1.3.2): specks across the whole Trinity section (built by initTrinityDust in main.js).
 * Default: a quiet field drifting toward the windows and the ring. A highlighted window gets its own swarm that spirals
 * in from all over the hero (the default field dims); swarms crossfade, so nothing jumps. transform/opacity only.
 * ================================================================================================================== */
.t22-trinity .t22-offer { position: relative; }
.t22-dust { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; margin: 0 !important; max-width: none !important; }
.t22-dust__def, .t22-dust__hi { position: absolute; inset: 0; transition: opacity 1.1s ease; }
.t22-dust__hi { display: none; opacity: 0; }
.t22-dust__hi.is-live { display: block; }
.t22-dust__hi.is-on { opacity: 1; }
.t22-dust.is-gathering .t22-dust__def { opacity: .3; }
.t22-dust__sw { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* a warm gathering glow around the highlighted window */
.t22-dust__glow { position: absolute; left: 0; top: 0; width: calc(var(--ro) * 4); height: calc(var(--ro) * 4); margin: calc(var(--ro) * -2) 0 0 calc(var(--ro) * -2); border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 240, 205, .32), rgba(255, 228, 175, .14) 55%, rgba(255, 220, 160, 0)); }
.t22-dust i { position: absolute; left: 0; top: 0; transform: rotate(var(--a0)); }
.t22-dust b { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
	background: radial-gradient(closest-side, #fff, rgba(255, 248, 226, .9) 20%, rgba(255, 226, 160, .3) 45%, rgba(255, 214, 140, 0));
	transform: translateX(calc(var(--r1) + (var(--r0) - var(--r1)) * .55)); opacity: calc(var(--o) * .35); }
/* keep the centred heading and messages clear */
[data-t22-tri="center"] .t22-dust {
	-webkit-mask: radial-gradient(ellipse calc(var(--t22-tri-r) * .34) calc(var(--t22-tri-r) * .25) at var(--cx, 50%) var(--cy, 50%), rgba(0, 0, 0, .08) 55%, #000 100%);
	mask: radial-gradient(ellipse calc(var(--t22-tri-r) * .34) calc(var(--t22-tri-r) * .25) at var(--cx, 50%) var(--cy, 50%), rgba(0, 0, 0, .08) 55%, #000 100%);
}
@media (prefers-reduced-motion: no-preference) {
	.t22-dust i { animation: t22-dust-turn var(--d) cubic-bezier(.45, 0, .9, .55) var(--dl) infinite; }
	.t22-dust b { opacity: 0; animation: t22-dust-in var(--d) linear var(--dl) infinite; }
	.t22-dust__hi i { animation-timing-function: linear; }
	.t22-dust__hi b { animation-name: t22-dust-gather; }
}
@media (prefers-reduced-motion: reduce) {
	.t22-dust__hi { display: none !important; }
	.t22-dust.is-gathering .t22-dust__def { opacity: 1; }
}
@keyframes t22-dust-turn { from { transform: rotate(var(--a0)); } to { transform: rotate(var(--a1)); } }
/* drift in (accelerating), brighten and swell at the window's rim, then slip in and fade; the loop respawns it out in the hero */
@keyframes t22-dust-in {
	0% { transform: translateX(var(--r0)) scale(.7); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
	14% { opacity: var(--o); }
	80% { opacity: var(--o); }
	90% { transform: translateX(calc(var(--r1) * 1.12)) scale(1.3); opacity: calc(var(--o) + .25); animation-timing-function: ease-in; }
	100% { transform: translateX(calc(var(--r1) * .8)) scale(.4); opacity: 0; }
}
/* highlighted window: glide in quickly, then circle the rim as a glowing halo before slipping in */
@keyframes t22-dust-gather {
	0% { transform: translateX(var(--r0)) scale(.7); opacity: 0; animation-timing-function: cubic-bezier(.25, .1, .45, 1); }
	12% { opacity: var(--o); }
	42% { transform: translateX(calc(var(--r1) * 1.45)) scale(1); opacity: var(--o); animation-timing-function: linear; }
	90% { transform: translateX(calc(var(--r1) * 1.04)) scale(1.25); opacity: calc(var(--o) + .25); animation-timing-function: ease-in; }
	100% { transform: translateX(calc(var(--r1) * .86)) scale(.4); opacity: 0; }
}

/* =====================================================================================================================
 * Alignment (from the Trinity Hero variant 1.3.3)
 * Windows sit exactly on the ring line, 120deg apart (90, 210, 330deg). Each label sits just outside its own window on the
 * line from the ring centre, written along the ring (tangent), the same distance from every window. The labels move out a
 * little when their window grows (hover / selected), so the gap stays the same.
 * ================================================================================================================== */
/* the ring line: the middle of the 3px stroke is exactly 36% of the ring from its centre */
.t22-trinity .t22-offer .t22-triad__ring::before { inset: calc(14% - 1.5px); }
.t22-trinity .t22-offer .t22-triad__label {
	--ux: 0; --uy: -1; --rot: 0deg; --g: 0;
	/* window edge (36% + 12% radius, plus its growth) + gap + half the label's height */
	--d: calc(48% + var(--g) * 2.88% + clamp(5px, calc(var(--t22-tri-r) * .012), 12px) + .6em);
	left: calc(50% + var(--ux) * var(--d)); top: calc(50% + var(--uy) * var(--d)); right: auto; bottom: auto;
	translate: -50% -50%; transform: none; rotate: var(--rot); line-height: 1.2; white-space: nowrap; pointer-events: none; z-index: 1;
	transition: left .3s, top .3s;
}
.t22-trinity .t22-offer .t22-triad__label[data-pos="b"],
.t22-trinity .t22-offer .t22-triad__label--fellowship:not([data-pos]) { --ux: -.8660254; --uy: .5; --rot: 60deg; }
.t22-trinity .t22-offer .t22-triad__label[data-pos="c"],
.t22-trinity .t22-offer .t22-triad__label--recreation:not([data-pos]) { --ux: .8660254; --uy: .5; --rot: -60deg; }
.t22-trinity .t22-offer .t22-triad__label[data-pos="a"],
.t22-trinity .t22-offer .t22-triad__label--medical:not([data-pos]) { --ux: 0; --uy: -1; --rot: 0deg; }
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--a:hover) .t22-triad__label[data-pos="a"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--b:hover) .t22-triad__label[data-pos="b"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--c:hover) .t22-triad__label[data-pos="c"] { --g: .4167; }
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--a.is-active) .t22-triad__label[data-pos="a"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--b.is-active) .t22-triad__label[data-pos="b"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--c.is-active) .t22-triad__label[data-pos="c"] { --g: 1; }
/* below: room above the ring for the top label */
[data-t22-tri="below"] .t22-trinity .t22-offer .t22-triad__ring,
html:not([data-t22-tri]) .t22-trinity .t22-offer .t22-triad__ring { margin-top: calc(clamp(13px, calc(var(--t22-tri-r) * .021), 20px) * 1.2 + var(--t22-tri-r) * .02 + 10px); }
@media (prefers-reduced-motion: reduce) { .t22-trinity .t22-offer .t22-triad__label { transition: none; } }

/* =====================================================================================================================
 * 1.4.0
 * ================================================================================================================== */
/* Header: logo, Apply, Donate and the menu button at every size (Apply sits on the bar, so its menu item is hidden). */
.site-header__apply { margin-left: auto; min-height: 44px; padding: 8px 14px; font-size: 13px; box-shadow: none; white-space: nowrap; }
.site-header__donate { margin-left: 0; white-space: nowrap; }
.primary-nav .t22-menu-apply { display: none; }
@media (min-width: 768px) { .site-header__apply { font-size: 14px; padding: 10px 20px; } }
@media (min-width: 1200px) { .site-header__apply { min-height: 48px; padding: 12px 24px; font-size: 15px; } }
@media (max-width: 399px) {
	.site-header__inner { gap: 8px; }
	.site-logo img { height: 26px; }
	.site-header__apply, .site-header__donate { font-size: 12px; padding: 8px 10px; letter-spacing: 0; }
	.nav-toggle { width: 40px; flex-basis: 40px; }
}
@media (max-width: 359px) { .site-logo img { height: 22px; } .site-header__apply, .site-header__donate { padding: 8px 8px; } }

/* The Trinity, in navy, right under the photo hero: about one screen tall (capped), centred. */
.t22-trinity .t22-offer.t22-bg-navy { background: radial-gradient(120% 90% at 50% 30%, #26306a 0%, var(--t22-navy) 45%, var(--t22-navy-deep) 100%); color: var(--t22-white); }
.t22-bg-navy .is-style-t22-bar::before, .t22-bg-navy .is-style-t22-bar::after { background: var(--t22-white); }
.t22-trinity .t22-offer { --t22-tri-avail: min(calc(100svh - var(--t22-header-h) - var(--t22-ab, 0px)), 1200px); }
.t22-trinity .t22-offer .t22-triad__circle { background: var(--t22-navy-deep); }

/* Spin on reveal (main.js adds t22-tri-prespin, then t22-tri-spinning when the ring scrolls into view). */
.t22-tri-prespin .t22-triad__ring { rotate: -360deg; opacity: 0; }
.t22-tri-prespin .t22-triad__label, .t22-tri-spinning .t22-triad__label { opacity: 0; }
.t22-tri-spinning .t22-triad__ring { animation: t22-tri-spin 1.8s cubic-bezier(.16, 1, .3, 1) both; }
.t22-tri-spinning .t22-triad__circle img { animation: t22-tri-unspin 1.8s cubic-bezier(.16, 1, .3, 1) both; }
.t22-triad[data-t22-spun] .t22-triad__label { opacity: 1; transition: opacity .6s ease, left .3s, top .3s; }
@keyframes t22-tri-spin { from { rotate: -360deg; opacity: 0; } 25% { opacity: 1; } to { rotate: 0deg; opacity: 1; } }
@keyframes t22-tri-unspin { from { rotate: 360deg; } to { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) {
	.t22-tri-prespin .t22-triad__ring { rotate: none; opacity: 1; }
	.t22-tri-spinning .t22-triad__ring, .t22-tri-spinning .t22-triad__circle img { animation: none; }
	.t22-tri-prespin .t22-triad__label, .t22-tri-spinning .t22-triad__label { opacity: 1; }
}

/* Newsletter: a button to the sign-up form (it lives on Neon CRM and cannot be posted to from another site). */
.t22-newsletter__form--link { margin: 0; display: flex; align-items: center; }
.t22-newsletter__cta { min-height: 50px; padding: 12px 32px; }

/* =====================================================================================================================
 * 1.5.0 Events
 * ================================================================================================================== */
/* cards */
.t22-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin-top: 32px; }
@media (max-width: 1023px) { .t22-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .t22-event-grid { grid-template-columns: 1fr; gap: 24px; } }
.t22-event-card { position: relative; display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: var(--t22-radius); overflow: hidden; background: var(--t22-white); box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.t22-event-card__media { display: block; aspect-ratio: 432 / 263; background: var(--t22-placeholder); overflow: hidden; }
.t22-event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.t22-event-card:hover .t22-event-card__media img { transform: scale(1.03); }
.t22-event-card__badge { position: absolute; top: 16px; left: 16px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 8px 10px 6px;
	background: var(--t22-white); color: var(--t22-navy); border-radius: var(--t22-radius-sm); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); line-height: 1; text-align: center; }
.t22-event-card__month { font-family: var(--t22-font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--t22-red); }
.t22-event-card__day { font-family: var(--t22-font-display); font-weight: 700; font-size: 28px; margin-top: 4px; }
.t22-event-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.t22-event-card__cat { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--t22-red); letter-spacing: .04em; }
.t22-event-card__title { margin: 0 0 4px; font-family: var(--t22-font-body); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.t22-event-card__title a { color: var(--t22-black); text-decoration: none; display: inline-block; padding-block: 9px; margin-block: -9px; }
.t22-event-card__title a:hover { color: var(--t22-red); text-decoration: underline; }
.t22-event-card__meta { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: #444; }
.t22-event-card__meta .t22-svg { flex: 0 0 auto; margin-top: 2px; color: var(--t22-navy); }
.t22-event-card__actions { margin: auto 0 0; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.t22-event-card__reg { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.t22-event-card__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--t22-navy); text-decoration: underline; text-underline-offset: 3px; }
.t22-event-card__more::after { content: " \2192"; white-space: pre; }
.t22-event-card.is-past .t22-event-card__media img { filter: grayscale(.6); }

/* Home / pattern section */
.t22-events-home__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.t22-events-home__head h2 { margin: 0; }
.t22-events-home__text { margin: 12px 0 0; max-width: 60ch; }
.t22-events-home__all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--t22-navy); text-decoration: underline; text-underline-offset: 3px; }
.t22-events-home__all::after { content: " \2192"; white-space: pre; }
.t22-events-none { margin-top: 24px; font-size: 18px; max-width: 60ch; }

/* single event: hero */
.t22-event-hero { position: relative; isolation: isolate; background: var(--t22-navy); color: var(--t22-white); padding: 96px 0 56px; overflow: hidden; }
.t22-event-hero.has-image { min-height: clamp(460px, 56vh, 620px); display: flex; align-items: flex-end; padding-top: 96px; }
/* phones: room for a long title, so a late web font cannot push the page down (no layout shift) */
@media (max-width: 767px) { .t22-event-hero.has-image { min-height: 560px; } }
.t22-event-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.t22-event-hero.has-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 14, 36, .15) 0%, rgba(10, 14, 36, .55) 45%, rgba(10, 14, 36, .9) 100%); }
.t22-event-hero__kicker { margin: 0 0 12px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 8px; flex-wrap: wrap; }
.t22-event-hero__kicker a { color: var(--t22-white); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.t22-event-hero__kicker span { display: inline-flex; align-items: center; }
.t22-event-hero__title { max-width: 22ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.t22-event-hero__title::before { content: ""; display: block; width: var(--t22-bar-w); height: var(--t22-bar-h); background: var(--t22-red); margin-bottom: 16px; }
.t22-event-hero__when { margin: 12px 0 0; display: flex; gap: 10px; align-items: flex-start; font-size: clamp(16px, .9rem + .4vw, 20px); font-weight: 700; }
.t22-event-hero__when .t22-svg { flex: 0 0 auto; margin-top: 3px; }

/* single event: layout + details card */
.t22-event__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; padding: var(--t22-section-y) 0; align-items: start; }
.t22-event__main { grid-column: 1; grid-row: 1; min-width: 0; }
.t22-event-card-details { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--t22-header-h) + 24px); background: var(--t22-white); border: 1px solid #e5e7eb; border-top: 6px solid var(--t22-red); border-radius: var(--t22-radius); padding: 28px; box-shadow: 0 12px 40px rgba(0, 0, 0, .08); }
@media (max-width: 1023px) {
	.t22-event__layout { grid-template-columns: 1fr; gap: 32px; }
	.t22-event-card-details { grid-column: 1; position: static; }
	.t22-event__main { grid-row: 2; }
}
.t22-event-card-details__title { font-family: var(--t22-font-body); font-weight: 700; font-size: 22px; letter-spacing: 0; margin: 0 0 16px; }
.t22-event-past { margin: 0 0 16px; padding: 12px 14px; background: #fdf2f3; color: #8a1323; border-left: 4px solid var(--t22-red); border-radius: var(--t22-radius-sm); font-weight: 700; }
.t22-event-dl { margin: 0; display: grid; gap: 16px; }
.t22-event-dl > div { display: grid; gap: 4px; }
.t22-event-dl dt { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--t22-navy); }
.t22-event-dl dd { margin: 0 0 0 28px; line-height: 1.5; }
.t22-event-dl__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--t22-red); }
.t22-event-card-details__reg { margin: 24px 0 0; }
.t22-event-card-details__reg .t22-btn { width: 100%; }
.t22-event-card-details__cal-label { margin: 24px 0 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--t22-navy); }
.t22-event-card-details__cal { margin: 0; display: grid; gap: 10px; }
.t22-event-card-details__cal .t22-btn { width: 100%; min-height: 44px; padding: 8px 14px; font-size: 13px; box-shadow: none; }
.t22-event .t22-prose { max-width: 72ch; }

/* share links */
.t22-share { margin-top: 40px; padding-top: 24px; border-top: 1px solid #e5e7eb; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.t22-share__label { margin: 0; font-weight: 700; }
.t22-share__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.t22-share__list a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--t22-border-strong); color: var(--t22-navy); }
.t22-share__list a:hover { background: var(--t22-navy); color: var(--t22-white); border-color: var(--t22-navy); }

/* popup */
.t22-popup-open, .t22-popup-open body { overflow: hidden; }
.t22-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.t22-popup__backdrop { position: absolute; inset: 0; background: rgba(10, 14, 36, .66); opacity: 0; transition: opacity .25s ease; }
.t22-popup__dialog { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--t22-white); color: var(--t22-black); border-radius: var(--t22-radius-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
	opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
.t22-popup.is-open .t22-popup__backdrop, .t22-popup.is-open .t22-popup__dialog { opacity: 1; transform: none; }
.t22-popup__dialog:focus { outline: none; }
.t22-popup__dialog:focus-visible { outline: none; } /* the container takes focus first; its buttons show focus rings */
.t22-popup__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--t22-white); color: var(--t22-black); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.t22-popup__close:hover { color: var(--t22-red); }
.t22-popup__close:focus-visible { outline: 3px solid var(--t22-navy); outline-offset: 2px; }
.t22-popup__media { aspect-ratio: 16 / 8; background: var(--t22-placeholder); }
.t22-popup__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t22-popup__body { padding: 28px 32px 32px; display: grid; gap: 10px; }
.t22-popup__dialog:not(.has-image) .t22-popup__body { padding-top: 40px; }
.t22-popup__kicker { margin: 0; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--t22-red); }
.t22-popup__title { margin: 0 48px 4px 0; font-size: clamp(24px, 1rem + 1.4vw, 32px); line-height: 1.15; }
.t22-popup__dialog.has-image .t22-popup__title { margin-right: 0; }
.t22-popup__meta { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-weight: 700; color: var(--t22-navy); }
.t22-popup__meta .t22-svg { flex: 0 0 auto; margin-top: 3px; }
.t22-popup__text { margin: 6px 0 0; }
.t22-popup__actions { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.t22-popup__actions .t22-btn { flex: 1 1 180px; }
@media (max-width: 479px) {
	.t22-popup { padding: 12px; align-items: flex-end; }
	.t22-popup__body { padding: 22px 20px 24px; }
	.t22-popup__dialog { max-height: calc(100dvh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
	.t22-popup__backdrop, .t22-popup__dialog, .t22-event-card__media img { transition: none; }
	.t22-popup__dialog { transform: none; }
	.t22-event-card:hover .t22-event-card__media img { transform: none; }
}

/* breadcrumbs: one line (a long current title is cut with an ellipsis instead of wrapping, so nothing shifts) */
.t22-breadcrumbs ol { flex-wrap: nowrap; min-width: 0; }
.t22-breadcrumbs li { flex: 0 0 auto; }
.t22-breadcrumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.t22-breadcrumbs li:last-child [aria-current] { display: block; line-height: 44px; max-width: min(40ch, 100%); }

/* ---------- 1.5.1 Share actions ---------- */
.t22-share__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t22-share__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--t22-border-strong); border-radius: 22px; background: var(--t22-white); color: var(--t22-navy); font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; }
.t22-share__btn:hover { background: var(--t22-navy); color: var(--t22-white); border-color: var(--t22-navy); }
.t22-share__btn:focus-visible { outline: 3px solid var(--t22-navy); outline-offset: 2px; }
.t22-share__btn[hidden] { display: none; }
.t22-share__btn.is-copied { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.t22-share__status { font-size: 0.9375rem; font-weight: 700; color: #1f7a4d; min-width: 1px; }
@media (max-width: 599px) { .t22-share__actions { width: 100%; } }

/* ---------- 1.5.3 Trinity block in the editor (static, like the site; no spin or particles) ---------- */
.t22-trinity-block-edit, .t22-trinity-block-edit > div, .t22-trinity-block-edit .components-placeholder { display: contents; }
.t22-editor-canvas .t22-offer .t22-triad__item:not(.t22-triad__item--intro) { display: none; }
.t22-editor-canvas .t22-offer .t22-triad__circle { pointer-events: none; }
.t22-editor-canvas .t22-offer .t22-triad__label { opacity: 1; }
.t22-anchor-alias { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================================================================
 * 1.5.4 Trinity labels (client pick: option 2, blue): upright chips centred on each window's vertical axis. Medical sits
 * above the top window; Fellowship and Recreation below the lower ones. They live inside the ring, which comes to rest at
 * 0deg after the spin, and stay hidden until data-t22-spun as before, so they never turn with it.
 * Window growth (--g: 0 rest, .4167 hover, 1 selected) moves the chip out by the window's growth on that side.
 * ================================================================================================================== */
.t22-trinity .t22-offer .t22-triad__label,
.t22-trinity .t22-offer .t22-triad__label[data-pos] {
	--g: 0; --t22-lab-gap: clamp(12px, calc(var(--t22-tri-r) * .022), 22px);
	rotate: 0deg; transform: none; right: auto; bottom: auto;
	font-family: var(--t22-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
	font-size: clamp(12px, calc(var(--t22-tri-r) * .02), 17px); line-height: 1.2; white-space: nowrap;
	color: var(--t22-white); background: var(--t22-blue); padding: .45em .9em; border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 6px 18px rgba(6, 9, 26, .45); text-shadow: none;
	transition: opacity .6s ease, top .3s, left .3s, background-color .2s, border-color .2s, box-shadow .2s;
}
.t22-trinity .t22-offer .t22-triad__label[data-pos="a"],
.t22-trinity .t22-offer .t22-triad__label--medical:not([data-pos]) {
	left: 50%; top: calc(2% - var(--g) * 2.88% - var(--t22-lab-gap)); translate: -50% -100%;
}
.t22-trinity .t22-offer .t22-triad__label[data-pos="b"],
.t22-trinity .t22-offer .t22-triad__label--fellowship:not([data-pos]) {
	left: calc(18.8231% - var(--g) * 1.247%); top: calc(80% + var(--g) * 2.16% + var(--t22-lab-gap)); translate: -50% 0;
}
.t22-trinity .t22-offer .t22-triad__label[data-pos="c"],
.t22-trinity .t22-offer .t22-triad__label--recreation:not([data-pos]) {
	left: calc(81.1769% + var(--g) * 1.247%); top: calc(80% + var(--g) * 2.16% + var(--t22-lab-gap)); translate: -50% 0;
}
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--a:hover) .t22-triad__label[data-pos="a"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--b:hover) .t22-triad__label[data-pos="b"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--c:hover) .t22-triad__label[data-pos="c"] { --g: .4167; }
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--a.is-active) .t22-triad__label[data-pos="a"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--b.is-active) .t22-triad__label[data-pos="b"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--c.is-active) .t22-triad__label[data-pos="c"] { --g: 1; }
/* gentle state for the hovered / selected window's chip */
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--a:is(:hover, .is-active, :focus-visible)) .t22-triad__label[data-pos="a"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--b:is(:hover, .is-active, :focus-visible)) .t22-triad__label[data-pos="b"],
.t22-trinity .t22-offer .t22-triad__ring:has(.t22-triad__circle--c:is(:hover, .is-active, :focus-visible)) .t22-triad__label[data-pos="c"] {
	background: var(--t22-blue-bright); border-color: var(--t22-white); box-shadow: 0 0 0 1px var(--t22-white), 0 8px 22px rgba(6, 9, 26, .5);
}
/* narrow phones: tighter chips so the lower ones stay clear of the ring line */
@media (max-width: 479px) {
	.t22-trinity .t22-offer .t22-triad__label,
	.t22-trinity .t22-offer .t22-triad__label[data-pos] { font-size: 11px; letter-spacing: .06em; padding: .4em .65em; }
}
/* below (phones): room above the ring for the Medical chip */
[data-t22-tri="below"] .t22-trinity .t22-offer .t22-triad__ring,
html:not([data-t22-tri]) .t22-trinity .t22-offer .t22-triad__ring {
	margin-top: calc(clamp(12px, calc(var(--t22-tri-r) * .02), 17px) * 2.2 + clamp(12px, calc(var(--t22-tri-r) * .022), 22px) + 6px);
	margin-bottom: 8px;
}