/* InnerView Guidance — Clove-inspired local theme */

:root {
	--iv-slate: #3f4a49;
	--iv-slate-dark: #2f3736;
	--iv-terracotta: #d4967d;
	--iv-terracotta-dark: #c17f63;
	--iv-terracotta-darker: #8a5943;
	--iv-cream: #e5e3df;
	--iv-text: #55605e;
	--iv-gold: #cfae5f;
	--iv-max: 800px;
	--iv-header-h: 92px;
	--iv-logo-h: 44px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

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

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: var(--iv-text);
	font-size: 18px;
	line-height: 1.75;
	background: #fff;
}

body:not(.has-hero) .iv-site-content {
	padding-top: var(--iv-header-h);
}

h1, h2, h3, h4 {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-optical-sizing: auto;
	color: var(--iv-slate);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

p, h1, h2, h3, h4, h5, h6, li, blockquote {
	text-wrap: pretty;
}

a {
	color: var(--iv-slate);
}

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

/* ---------- Buttons ---------- */

.iv-btn {
	display: inline-block;
	background: var(--iv-terracotta-darker);
	color: #fff;
	border: none;
	padding: 18px 40px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background .2s ease;
}

.iv-btn:hover {
	background: var(--iv-terracotta-dark);
	color: #fff;
}

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

.iv-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid rgba(63, 74, 73, .1);
	transition: background .25s ease, border-color .25s ease;
}

body.has-hero .iv-site-header {
	background: transparent;
	border-bottom-color: transparent;
}

body.has-hero .iv-site-header.is-scrolled {
	background: #fff;
	border-bottom-color: rgba(63, 74, 73, .1);
}

body.has-hero .iv-site-header.is-scrolled .iv-logo,
body.has-hero .iv-site-header.is-scrolled .iv-nav-list > li:not(.nav_btn) > a,
body.has-hero .iv-site-header.is-scrolled .iv-nav-toggle {
	color: var(--iv-slate);
}

.iv-site-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 32px;
}

.iv-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	line-height: 1;
}

.iv-logo-mark {
	display: flex;
	height: var(--iv-logo-h);
}

.iv-logo-icon {
	display: block;
	height: 100%;
	width: auto;
}

.iv-logo-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	height: var(--iv-logo-h);
}

.iv-logo-title {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	color: var(--iv-gold);
}

.iv-logo-tagline {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.03em;
	color: var(--iv-slate);
}

body.has-hero .iv-logo-tagline { color: rgba(255, 255, 255, .85); }

body.has-hero .iv-site-header.is-scrolled .iv-logo-tagline { color: var(--iv-slate); }

.iv-nav-list {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 30px;
	margin: 0;
	padding: 0;
}

.iv-nav-list li {
	position: relative;
}

.iv-nav-list a {
	color: var(--iv-slate);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.iv-nav-list .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	margin-bottom: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
}

.iv-nav-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 14px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(47, 55, 54, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease;
	z-index: 50;
}

.iv-nav-list li:hover > .sub-menu,
.iv-nav-list li.iv-submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.iv-nav-list .sub-menu li { width: 100%; }

.iv-nav-list .sub-menu a {
	display: block;
	padding: 10px 24px;
	color: var(--iv-slate) !important;
	white-space: nowrap;
}

.iv-nav-list .sub-menu a:hover {
	color: var(--iv-terracotta) !important;
	background: rgba(212, 150, 125, .08);
}

body.has-hero .iv-nav-list a { color: #fff; }

.iv-nav-list a:hover { color: var(--iv-terracotta); }

.iv-nav-list > li.nav_btn > a {
	background: var(--iv-terracotta-darker);
	color: #fff !important;
	padding: 12px 22px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.iv-nav-list > li.nav_btn > a:hover { background: var(--iv-terracotta-dark); }

.iv-nav-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--iv-slate);
	font-size: 24px;
	cursor: pointer;
}

body.has-hero .iv-nav-toggle { color: #fff; }

/* Pre-scroll header sits directly on the hero photo with no background,
   so light/busy patches in the image can wash out the white/gold text.
   A soft drop shadow keeps it legible without needing a scrim. */
body.has-hero .iv-site-header:not(.is-scrolled) .iv-logo-icon {
	filter: drop-shadow(0 1px 4px rgba(20, 14, 8, .4));
}

body.has-hero .iv-site-header:not(.is-scrolled) .iv-logo-title,
body.has-hero .iv-site-header:not(.is-scrolled) .iv-logo-tagline,
body.has-hero .iv-site-header:not(.is-scrolled) .iv-nav-list > li > a,
body.has-hero .iv-site-header:not(.is-scrolled) .iv-nav-toggle {
	text-shadow: 0 1px 4px rgba(20, 14, 8, .45), 0 1px 2px rgba(20, 14, 8, .3);
}

@media (max-width: 900px) {
	.iv-primary-nav {
		display: none;
		width: 100%;
		order: 3;
	}

	/* Opening the mobile menu on a hero page forces the header to its
	   solid "scrolled" look (white bar, dark logo/icon) even at the very
	   top of the page — otherwise the logo/tagline sit unreadable over
	   the transparent header on top of the hero photo. */
	body.has-hero .iv-site-header:has(.iv-primary-nav.is-open) {
		background: #fff;
		border-bottom-color: rgba(63, 74, 73, .1);
	}
	body.has-hero .iv-site-header:has(.iv-primary-nav.is-open) .iv-logo,
	body.has-hero .iv-site-header:has(.iv-primary-nav.is-open) .iv-nav-toggle {
		color: var(--iv-slate);
	}
	body.has-hero .iv-site-header:has(.iv-primary-nav.is-open) .iv-logo-tagline {
		color: var(--iv-slate);
	}

	.iv-primary-nav.is-open {
		display: block;
		background: #fff;
		margin-top: 16px;
		padding: 8px 0;
	}
	.iv-primary-nav.is-open .iv-nav-list a { color: var(--iv-slate) !important; }
	.iv-nav-list { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0; }
	.iv-site-header-inner { flex-wrap: wrap; }
	.iv-nav-toggle { display: block; }

	/* Bigger, taller tap targets for the open mobile menu. */
	.iv-nav-list a { font-size: 18px; }
	.iv-nav-list > li { width: 100%; }
	.iv-nav-list > li > a { display: block; padding: 10px 0; }

	.iv-nav-list .sub-menu {
		position: static;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		transition: max-height .2s ease;
	}

	.iv-nav-list li.iv-submenu-open > .sub-menu {
		max-height: 400px;
		padding: 8px 0 0;
	}

	.iv-nav-list .sub-menu a { padding: 12px 0 12px 18px; }
}

/* ---------- Hero ---------- */

.iv-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--iv-slate);
	background-size: cover;
	background-position: center;
	color: #fff;
	display: flex;
	align-items: flex-end;
	min-height: 640px;
	/* Photo stays edge-to-edge; the quote inside aligns to the same
	   1280 column (plus the header's own 32px inset) as the rest of
	   the page's content. */
	padding: 0 max(32px, calc((100% - 1280px) / 2 + 32px)) 90px;
}

.iv-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.iv-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(180deg, rgba(20,14,8,.02) 0%, rgba(20,14,8,.08) 45%, rgba(20,14,8,.42) 100%);
}

.iv-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
}

.iv-hero-quote {
	margin: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: italic;
	font-weight: 600;
	font-size: 1.1em;
	line-height: 1.3;
	color: #fff;
	text-shadow: 0 0 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .7), 0 2px 14px rgba(0, 0, 0, .6);
}

.iv-hero-quote cite {
	display: block;
	margin-top: 18px;
	font-size: 1em;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 0 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .7), 0 2px 14px rgba(0, 0, 0, .6);
}

.iv-hero-quote cite::before {
	content: '\2014';
	margin-right: 10px;
}

.iv-hero-title {
	margin: 0;
	font-size: 2.4em;
	line-height: 1.15;
	color: #fff;
	text-shadow: 0 0 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .7), 0 2px 14px rgba(0, 0, 0, .6);
}

/* Hero fallback when a post has no featured image: the same default
   card graphic, filled to the hero and tinted like a photo hero so the
   white title stays readable. */
.iv-hero-default { background: var(--iv-cream); }

.iv-hero-default .iv-musing-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.iv-hero-default::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(3, 34, 92, .55);
}

/* ---------- Page content ---------- */

.iv-page-content {
	max-width: var(--iv-max);
	margin: 0 auto;
	padding: 90px 32px;
}

.iv-page-title {
	max-width: 1280px;
	margin: 0 auto;
	padding: 90px 32px 0;
	text-align: center;
	font-size: 2.4em;
}

.iv-page-title + .iv-page-content {
	padding-top: 0;
}

.iv-page-content h1 { text-align: center; font-size: 2.4em; margin-top: 0; }
.iv-page-content h2 { text-align: left; font-size: 1.5em; margin-top: 0; }

.iv-page-content p { margin: 1.2em 0; }

.iv-text-block { margin: 0 0 1.5em; }

/* ---------- Image gallery -> 4Fold slider ---------- */

.image-gallery-wrapper {
	position: relative;
	max-width: 620px;
	margin: 56px auto;
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.image-gallery-wrapper:active {
	cursor: grabbing;
}

.image-gallery-wrapper img {
	width: 100%;
	display: none;
	-webkit-user-drag: none;
}

.image-gallery-wrapper .iv-slider-track {
	display: flex;
	align-items: flex-start;
}

.image-gallery-wrapper .iv-slider-track > img {
	display: block;
	flex: 0 0 100%;
	width: 100%;
}

.iv-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--iv-terracotta-darker);
	color: #fff;
	border: none;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iv-slider-btn:hover { background: var(--iv-terracotta-dark); }
.iv-slider-btn.prev { left: -60px; }
.iv-slider-btn.next { right: -60px; }

@media (max-width: 700px) {
	.iv-slider-btn.prev { left: 4px; }
	.iv-slider-btn.next { right: 4px; }
}

.iv-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.iv-slider-dots button {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background: var(--iv-cream);
	padding: 0;
	cursor: pointer;
}

.iv-slider-dots button.is-active {
	background: var(--iv-slate);
}

/* ---------- Generic content slider (testimonials, practice questions) ---------- */

.iv-slider {
	position: relative;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
}

.iv-slider:active {
	cursor: grabbing;
}

.iv-slider > .iv-slide {
	display: none;
}

.iv-slider-track {
	display: flex;
	align-items: stretch;
}

.iv-slider-track > .iv-slide {
	display: flex;
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
}

.iv-slider-track > .iv-slide > .iv-text-block {
	max-width: 1280px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0 32px;
	box-sizing: border-box;
}

.iv-slider > .iv-slider-btn {
	background: none;
	color: var(--iv-slate);
	border-radius: 0;
	width: auto;
	height: auto;
	padding: 8px;
	font-size: 30px;
}

.iv-slider > .iv-slider-btn:hover {
	background: none;
	color: var(--iv-terracotta);
}

.iv-slider > .iv-slider-btn.prev { left: 12px; }
.iv-slider > .iv-slider-btn.next { right: 12px; }

@media (max-width: 700px) {
	.iv-slider > .iv-slider-btn.prev { left: 0; }
	.iv-slider > .iv-slider-btn.next { right: 0; }
}

/* ---------- Background image panel (text over a faded photo, mid-page) ---------- */

.iv-bg-panel {
	position: relative;
	background-size: cover;
	background-position: center;
	color: #fff;
	margin: 90px calc(50% - 50vw) 0;
	padding: 90px 32px;
	overflow: hidden;
	isolation: isolate;
}

/* Blur the photo itself (not the text) via a scaled-up pseudo-layer,
   so a lower-res/upscaled background doesn't read as pixelated. */
.iv-bg-panel::before {
	content: "";
	position: absolute;
	inset: -20px;
	background: inherit;
	filter: blur(6px);
	z-index: -1;
}

.iv-bg-panel .iv-text-block {
	max-width: var(--iv-max);
	margin: 0 auto;
}

.iv-bg-panel h2 {
	color: #fff;
}

.iv-bg-panel a {
	color: #fff;
}

.iv-icon-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 40px;
	text-align: center;
}

@media (max-width: 700px) {
	.iv-icon-grid { grid-template-columns: 1fr; }
}

.iv-icon-grid-item p {
	margin: 0;
}

.iv-icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--iv-terracotta);
	color: #fff;
	font-size: 22px;
	margin: 0 auto 18px;
}

/* ---------- Split row (alternating image/text CTA) ---------- */

.iv-split-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 1280px;
	transform: translateX(-50%);
}

/* Portrait photos (e.g. headshots) don't need half the row — give the
   text more room and keep the ratio correct regardless of which side
   the image is on. Scoped to desktop so it can't outrank the mobile
   single-column override below (its :has() raises specificity). */
@media (min-width: 781px) {
	.iv-split-row:has(> .iv-split-row-image.is-portrait:first-child) {
		grid-template-columns: 3fr 7fr;
	}

	.iv-split-row:has(> .iv-split-row-image.is-portrait:last-child) {
		grid-template-columns: 7fr 3fr;
	}
}

@media (max-width: 780px) {
	.iv-split-row { grid-template-columns: 1fr; }
	/* Always show the image first on mobile, regardless of which side
	   it's on at desktop width (alternating rows put it first or second
	   in the markup so the sides swap on desktop). */
	.iv-split-row-image { order: -1; }
}

.iv-split-row-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 70px 80px;
}

@media (max-width: 780px) {
	.iv-split-row-text { padding: 50px 32px; }
}

.iv-split-row-text h3 {
	text-align: left;
	font-size: 1.7em;
	margin: 0 0 16px;
}

.iv-split-row-text p {
	margin: 0 0 28px;
}

.iv-split-row-image {
	container-type: inline-size;
	display: flex;
	align-items: flex-start;
	/* Extra top padding nudges the photo down to roughly meet the
	   heading's baseline on the text side, instead of sitting flush
	   with the row's very top edge. */
	padding: calc(48px + 1em) 48px 48px;
}

@media (max-width: 780px) {
	.iv-split-row-image { padding: 32px; }
}

.iv-split-row-image img {
	width: 100%;
	height: auto;
	/* Fits to the column's width at its natural, uncropped ratio.
	   1:1 is only a ceiling: a landscape photo (shorter than it is
	   wide) renders untouched; only a photo taller than it is wide
	   would ever get capped/cropped down to a square. */
	max-height: 100cqw;
	object-fit: cover;
	object-position: top;
	display: block;
	border-radius: 6px;
	box-shadow: 0 24px 40px -16px rgba(20, 20, 20, .3);
}

/* Portrait variant: for photos that aren't wide enough to fill the full
   column (e.g. headshots) — sized naturally and centered/aligned with
   the text instead of stretched to cover the whole column. */
.iv-split-row-image.is-portrait {
	align-items: center;
	justify-content: center;
}

/* Top-align instead of the is-portrait default of centering — for rows
   where the text is much taller than the photo (e.g. a course listing),
   so the image lines up with the heading instead of floating mid-row. */
.iv-split-row-image.is-portrait.is-top {
	align-items: flex-start;
}

.iv-split-row-image.is-portrait img {
	width: auto;
	height: auto;
	max-width: 280px;
	min-height: 0;
}

/* Video thumbnail: a play button pinned to a corner (not the center) so
   it doesn't sit over a person's face in a portrait/headshot photo. */
.iv-video-thumb {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.iv-play-btn {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(20, 14, 8, .65);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	transition: background .2s ease, transform .2s ease;
}

.iv-play-btn i { margin-left: 3px; }

.iv-video-thumb:hover .iv-play-btn {
	background: var(--iv-terracotta-darker);
	transform: scale(1.08);
}

/* ---------- Video modal (in-site YouTube playback) ---------- */

.iv-video-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.iv-video-modal[hidden] { display: none; }

.iv-video-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 14, 8, .85);
}

.iv-video-modal-box {
	position: relative;
	width: 100%;
	max-width: 960px;
}

.iv-video-modal-frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background: #000;
	box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6);
}

.iv-video-modal-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.iv-video-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}

.iv-video-modal-close:hover { background: var(--iv-terracotta-darker); }

/* ---------- Feature band (4Fold compass points) ---------- */

.iv-feature-band {
	background: var(--iv-slate);
	color: #fff;
	text-align: center;
	padding: 90px 32px;
	margin: 90px calc(50% - 50vw);
	/* So an anchor jump to this section doesn't land underneath the
	   fixed header. */
	scroll-margin-top: calc(var(--iv-header-h) + 24px);
}

/* Highlighted term that anchor-links down to its matching dark-band
   description elsewhere on the page. */
.iv-term-link {
	color: var(--iv-gold);
	font-weight: 700;
	text-decoration: none;
}

.iv-term-link:hover {
	text-decoration: underline;
}

.iv-feature-band h2 {
	/* Explicit: the sitewide .iv-page-content h2 rule left-aligns
	   headings, which would otherwise win over this one's inherited
	   center alignment since inheritance always loses to an explicit
	   rule, regardless of specificity. .iv-feature-band is only used
	   on this page, so this stays scoped here. */
	text-align: center;
	color: #fff;
	font-size: 2.2em;
	margin: 0 0 60px;
}

.iv-feature-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.iv-feature-item h3 {
	color: #fff;
	font-size: 1.3em;
	margin: 24px 0 12px;
}

.iv-feature-item p {
	font-size: .8em;
	line-height: 1.6;
	color: rgba(255,255,255,.85);
	margin: 0;
}

.iv-feature-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--iv-terracotta);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iv-feature-icon svg { width: 60%; height: 60%; }

.iv-feature-icon i { font-size: 22px; }

@media (max-width: 800px) {
	.iv-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
}

/* ---------- CARE steps (subtler than the feature band: light tint
   icons inline on the page background, not a dark full-bleed band) ---------- */

.iv-care-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 40px;
	margin: 40px 0;
	text-align: left;
}

.iv-care-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 260px;
}

.iv-care-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(212, 150, 125, .15);
	color: var(--iv-terracotta-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.iv-care-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.iv-care-text strong {
	color: var(--iv-slate);
	font-size: .95em;
}

.iv-care-text span {
	font-style: italic;
	font-size: .85em;
	color: var(--iv-text);
}

/* ---------- Pull quote (standalone quote in page content) ---------- */

.iv-pull-quote {
	max-width: 780px;
	margin: 90px auto;
	text-align: center;
}

.iv-pull-quote p {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.3em;
	line-height: 1.5;
	color: var(--iv-slate);
	margin: 0 0 22px;
}

.iv-pull-quote cite {
	display: inline-block;
	font-style: italic;
	font-size: 1em;
	color: var(--iv-slate);
}

.iv-pull-quote cite::before {
	content: '\2014';
	margin-right: 10px;
	color: var(--iv-terracotta);
}

.iv-pull-quote cite span {
	display: block;
	font-style: normal;
	font-size: .7em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--iv-text);
	margin-top: 6px;
}

/* ---------- Bios / profile blocks ---------- */

.iv-bio {
	display: flex;
	align-items: center;
	gap: 56px;
	margin: 70px 0;
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 1280px;
	transform: translateX(-50%);
	padding: 0 32px;
	box-sizing: border-box;
}

/* The "photo shorter than its bio text" case (e.g. a single paragraph
   next to a portrait photo) leaves dead air below the centered photo
   before the bio's own bottom margin even starts. Tighten just the
   bottom margin when a .iv-form-row follows directly, without touching
   .iv-bio's normal spacing when several bios stack in a row (e.g. the
   Directors page). */
.iv-bio:has(+ .iv-form-row) {
	margin-bottom: 24px;
}

.iv-bio:nth-child(even) {
	flex-direction: row-reverse;
}

.iv-bio-photo {
	flex: 0 0 260px;
}

.iv-bio-photo img {
	border-radius: 3px;
}

.iv-bio-text { flex: 1; }

.iv-bio-text h2 {
	text-align: left;
	margin-top: 0;
	font-size: 1.7em;
}

@media (max-width: 700px) {
	.iv-bio, .iv-bio:nth-child(even) {
		flex-direction: column;
		gap: 24px;
	}
	.iv-bio-photo { flex-basis: auto; width: 100%; max-width: 320px; }
	.iv-bio-text h2 { text-align: center; }
}

.iv-form-row {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	margin: 50px 0;
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 1280px;
	transform: translateX(-50%);
	padding: 0 32px;
	box-sizing: border-box;
}

.iv-form-row-form {
	/* Matches the embedded ActiveCampaign form's own hardcoded
	   max-width (300px, with 20px padding baked into its inline
	   styles) so the column doesn't leave dead space beside it. */
	flex: 0 0 300px;
}

.iv-form-row-form h3 {
	text-align: left;
	margin-top: 0;
	font-size: 1.3em;
}

.iv-form-row-text {
	flex: 1;
}

.iv-form-row-text p:first-child {
	margin-top: 0;
}

@media (max-width: 700px) {
	.iv-form-row {
		flex-direction: column;
		gap: 24px;
	}
	.iv-form-row-form { flex-basis: auto; width: 100%; }
}

/* ---------- Testimonials ---------- */

.iv-testimonial-list { margin-top: 40px; }

.iv-testimonial {
	background: var(--iv-cream);
	text-align: center;
	padding: 70px 100px;
	margin: 0 calc(50% - 50vw) 4px;
}

@media (max-width: 700px) {
	.iv-testimonial { padding: 60px 48px; }
}

.iv-testimonial p {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-style: italic;
	font-size: 1.5em;
	line-height: 1.45;
	color: var(--iv-slate);
	max-width: 780px;
	margin: 0 auto;
}

@media (max-width: 700px) {
	/* Match the hero quote's size instead of the desktop 1.5em. */
	.iv-testimonial p { font-size: 1.3em; }
}

/* ---------- Card grid (publications, blog) ---------- */

.iv-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-top: 30px;
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 1280px;
	transform: translateX(-50%);
	padding: 0 32px;
	box-sizing: border-box;
}

@media (max-width: 1000px) {
	.iv-card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.iv-card-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.iv-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(63, 74, 73, .08);
}

.iv-card-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--iv-cream);
	overflow: hidden;
}

.iv-card-thumb img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	display: block;
	transition: transform .3s ease;
}

.iv-card-thumb:hover img {
	transform: scale(1.04);
}

.iv-card-body {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.iv-card .iv-card-title {
	text-align: left;
	font-size: 1.5em;
	margin: 0 0 10px;
}

.iv-card-title a {
	color: inherit;
	text-decoration: none;
}

.iv-card-title a:hover {
	color: var(--iv-terracotta);
}

.iv-card-excerpt {
	color: var(--iv-text);
	font-size: .95em;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.iv-card-excerpt p { margin: 0; }

.iv-card-cta {
	align-self: flex-start;
	margin-top: auto;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--iv-slate);
	text-decoration: none;
}

.iv-card-cta:hover {
	color: var(--iv-terracotta);
}

.iv-publication-citations {
	margin-top: 90px;
	padding-top: 60px;
	border-top: 1px solid var(--iv-cream);
}

.iv-publication-citations p { font-size: .95em; }

/* Single publication: full cover at archive-card width, title below it */
.iv-publication-cover {
	max-width: 274px;
	margin: 0 auto;
	padding: 90px 32px 0;
	box-sizing: content-box;
}

.iv-publication-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(63, 74, 73, .15);
}

.iv-publication-cover + .iv-page-title {
	padding-top: 40px;
}

.iv-single-publication .iv-page-title + .iv-page-content {
	padding-top: 30px;
}

/* ---------- Musings (blog) ---------- */

.iv-musing-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 40px;
}

.iv-musing-filter {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--iv-cream);
	color: var(--iv-text);
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.iv-musing-filter:hover {
	border-color: var(--iv-terracotta);
}

.iv-musing-filter.is-active {
	background: var(--iv-slate);
	border-color: var(--iv-slate);
	color: #fff;
}

.iv-musing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 1280px;
	transform: translateX(-50%);
	padding: 0 32px;
	box-sizing: border-box;
}

@media (max-width: 1000px) {
	.iv-musing-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.iv-musing-grid { grid-template-columns: repeat(2, 1fr); }
}

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

@media (max-width: 900px) {
	.iv-musing-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* "More Musings" block below a single post: always 3 columns at desktop
   width (the smaller-breakpoint rules above still apply as-is). */
.iv-musing-grid-related {
	grid-template-columns: repeat(3, 1fr);
}

.iv-musing-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(63, 74, 73, .08);
}

@keyframes iv-musing-card-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.iv-musing-card.is-animating-in {
	animation: iv-musing-card-in .45s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.iv-musing-card.is-animating-in {
		animation: none;
	}
}

.iv-musing-card.is-hidden {
	display: none;
}

.iv-musing-card-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.iv-musing-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.iv-musing-card-thumb:hover .iv-musing-card-img {
	transform: scale(1.05);
}

.iv-musing-card-body {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.iv-musing-card-tag {
	align-self: flex-start;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--iv-terracotta-dark);
	margin-bottom: 10px;
}

.iv-musing-card-title {
	text-align: left;
	font-size: 1.5em;
	margin: 0 0 10px;
}

.iv-musing-card-title a {
	color: inherit;
	text-decoration: none;
}

.iv-musing-card-title a:hover {
	color: var(--iv-terracotta);
}

.iv-musing-card-excerpt {
	color: var(--iv-text);
	font-size: .95em;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.iv-musing-card-excerpt p { margin: 0; }

.iv-musing-card-cta {
	align-self: flex-start;
	margin-top: auto;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--iv-slate);
	text-decoration: none;
}

.iv-musing-card-cta:hover {
	color: var(--iv-terracotta);
}

.iv-musing-empty {
	text-align: center;
	color: var(--iv-text);
}

/* ---------- Q&A accordion ---------- */

.iv-qa {
	max-width: var(--iv-max);
	margin: 40px auto 0;
}

.iv-qa-item {
	display: grid;
	grid-template-rows: auto 0fr;
	transition: grid-template-rows .3s ease;
	border-bottom: 1px solid var(--iv-cream);
}

.iv-qa-item[open] {
	grid-template-rows: auto 1fr;
}

.iv-qa-item > summary {
	grid-row: 1;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 4px;
	font-weight: 700;
	color: var(--iv-slate);
	cursor: pointer;
	transition: color .2s ease;
}

.iv-qa-item > summary::-webkit-details-marker {
	display: none;
}

.iv-qa-item > summary:hover {
	color: var(--iv-terracotta);
}

.iv-qa-item > summary::after {
	content: '+';
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--iv-terracotta);
	transition: transform .3s ease;
}

.iv-qa-item[open] > summary::after {
	transform: rotate(135deg);
}

.iv-qa-answer {
	display: block;
	overflow: hidden;
	min-height: 0;
}

.iv-qa-answer p {
	margin: 0 0 20px;
	padding-right: 34px;
	color: var(--iv-text);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity .25s ease, transform .3s ease;
}

.iv-qa-item[open] .iv-qa-answer p {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .05s;
}

/* ---------- Prefooter (voluntary contributions) ---------- */

.iv-prefooter {
	background: var(--iv-terracotta);
	color: #fff;
	padding: 40px 32px;
}

.iv-prefooter-inner {
	max-width: 1024px; /* 80% of the 1280 column */
	margin: 0 auto;
}

.iv-prefooter h3 {
	color: #fff;
	font-size: 1.2em;
	margin: 0 0 10px;
}

.iv-prefooter p {
	font-size: .95em;
}

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

.iv-site-footer {
	background: var(--iv-terracotta-darker);
	color: rgba(255, 255, 255, .85);
	display: flex;
	flex-direction: column;
}

/* ---------- Footer: full-height signup panel (left) + stacked content (right) ---------- */

.iv-footer-main {
	display: flex;
	align-items: stretch;
}

.iv-footer-signup {
	flex: 0 0 34%;
	min-width: 300px;
	background-size: cover;
	background-position: center;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
}

.iv-footer-right {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.iv-footer-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 32px;
	padding: 40px 40px 24px;
}

.iv-footer-signup-inner {
	width: 100%;
	max-width: 320px;
	text-align: right;
}

.iv-footer-signup-inner h2 {
	color: #fff;
	font-size: 1.1em;
	line-height: 1.25;
	margin: 0 0 14px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.iv-footer-form {
	display: block;
	width: 100%;
	text-align: left;
}

/* First/Last share a row (each half the width of the Email field,
   right-aligned as a pair); Email and the submit button each get
   their own full-width row below. */
.iv-footer-form ._form-content {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.iv-footer-form ._form_element {
	margin-bottom: 0 !important;
}

.iv-footer-form ._form_element:nth-of-type(1) {
	flex: 0 0 108px;
	margin-left: auto;
}

.iv-footer-form ._form_element:nth-of-type(2) {
	flex: 0 0 108px;
}

.iv-footer-form ._form_element:nth-of-type(3) {
	flex: 0 0 100%;
}

.iv-footer-form ._form-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.iv-footer-form input[type="text"] {
	padding: 8px 10px !important;
	font-size: 12px !important;
	width: 224px !important;
	margin-left: auto !important;
	background: rgba(255, 255, 255, .88) !important;
}

.iv-footer-form ._form_element:nth-of-type(1) input,
.iv-footer-form ._form_element:nth-of-type(2) input {
	width: 100% !important;
}

.iv-footer-form ._button-wrapper {
	/* The AC form's own ._full_width class forces width:100% via an ID
	   selector; override so the button sits at its natural width
	   instead of stretching the full column. */
	width: auto !important;
	flex: 0 0 100%;
	text-align: right;
}

@media (max-width: 700px) {
	.iv-footer-form ._form_element:nth-of-type(1),
	.iv-footer-form ._form_element:nth-of-type(2) {
		flex: 0 0 100%;
		margin-left: 0;
	}
	.iv-footer-form ._form_element:nth-of-type(1) input,
	.iv-footer-form ._form_element:nth-of-type(2) input {
		width: 224px !important;
	}
}

.iv-footer-form ._submit {
	padding: 9px 20px !important;
	font-size: 10.5px !important;
}

/* Both footer CTAs sit on the same terracotta-darker background as
   .iv-btn's own fill, which made them disappear. Invert to a light
   button so they read clearly against the footer. */
.iv-footer-donate,
.iv-footer-form ._submit {
	background: var(--iv-cream) !important;
	color: var(--iv-terracotta-darker) !important;
	line-height: 1.4 !important;
}

.iv-footer-donate:hover,
.iv-footer-form ._submit:hover {
	background: #fff !important;
	color: var(--iv-terracotta-darker) !important;
}

.iv-footer-block {
	text-align: left;
}

.iv-footer-block h3 {
	color: #fff;
	font-size: 1em;
	margin: 0 0 8px;
}

.iv-footer-block p {
	margin: 0 0 12px;
	font-size: .85em;
}


.iv-footer-block a {
	color: #fff;
	text-decoration: underline;
}

.iv-footer-block a.iv-footer-donate,
.iv-footer-block a.iv-footer-donate:hover {
	text-decoration: none;
}

.iv-footer-donate {
	display: inline-block;
	padding: 9px 20px;
	font-size: 10.5px;
}

/* Logo, merged into the Contact & Terms block */

.iv-footer-legal a.iv-footer-logo,
.iv-footer-legal a.iv-footer-logo:hover {
	text-decoration: none;
}

.iv-footer-logo {
	--iv-logo-h: 44px;
	gap: 14px;
	display: inline-flex;
	margin-bottom: 18px;
}

.iv-footer-logo .iv-logo-tagline {
	color: rgba(255, 255, 255, .75);
}

.iv-footer-logo .iv-logo-title { font-size: 24px; }
.iv-footer-logo .iv-logo-tagline { font-size: 11px; }

/* Pinned to the bottom of the right-hand column via margin-top:auto,
   so it lines up with the base of the full-height signup panel. */
.iv-footer-copyright {
	margin-top: auto;
	font-size: .72em;
	opacity: .6;
	text-align: left;
	padding: 14px 40px 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 900px) {
	.iv-footer-main { flex-direction: column; }
	.iv-footer-signup { flex-basis: auto; min-width: 0; }
}

@media (max-width: 700px) {
	.iv-footer-columns {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 32px 24px 16px;
	}
	.iv-footer-copyright { padding: 14px 24px 20px; }
}

@media (max-width: 560px) {
	.iv-footer-signup { padding: 36px 24px; }
}