/* =================================================================
   Living Heritage Homeschool — main.css
   Hand-edited. filemtime() cache-busted via inc/enqueue.php.
   ================================================================= */

:root {
	/* Brand (Living Heritage) */
	--lh-primary:        #31577C;  /* Heritage Blue */
	--lh-primary-dark:   #1F3A57;
	--lh-primary-soft:   #E6ECF3;
	--lh-secondary:      #B0871F;  /* Aged Gold — editorial accent (eyebrows, premium badge) */
	--lh-secondary-dark: #8E6B17;
	--lh-green:          #4a8b2c;  /* Heritage Green (from the LH tree mark) — accent for
	                                  tree icons, list bullets, check marks, growth cues */
	--lh-green-dark:     #356720;
	--lh-green-soft:     #E2EEDB;  /* Tinted bg for green accents on light surfaces */
	--lh-accent:         #B89466;  /* Warm Tan kept from PMBC palette */
	--lh-white:          #FFFFFF;
	--lh-cream:          #F7F4EE;
	--lh-divider:        #E2DED4;
	--lh-ink:            #21252F;
	--lh-muted:          #4C5A66;

	/* Type families */
	--lh-font-serif: 'Lora', Georgia, serif;
	--lh-font-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	/* Type scale — trimmed from the original PMBC sizes (110/64/46/32) since
	   curriculum copy is denser than worship copy and large hero headings
	   were pushing content below the fold. */
	--lh-fs-display: clamp(40px, 2rem + 3.5vw, 80px);
	--lh-fs-h2:      clamp(30px, 1.5rem + 1.6vw, 48px);
	--lh-fs-h3:      clamp(24px, 1.4rem + 0.8vw, 36px);
	--lh-fs-h4:      clamp(20px, 1.2rem + 0.4vw, 28px);
	--lh-fs-large:   clamp(18px, 1.125rem + 0.2vw, 20px);
	--lh-fs-body:    16px;
	--lh-fs-small:   clamp(15px, 0.9375rem + 0.1vw, 16px);
	--lh-fs-eyebrow: clamp(13px, 0.8125rem + 0.05vw, 14px);

	/* Line-heights (brief: tiny 1.1, small 1.3, medium 1.6, normal 1.9, large 2.1) */
	--lh-lh-tiny:   1.1;
	--lh-lh-small:  1.3;
	--lh-lh-medium: 1.6;
	--lh-lh-normal: 1.9;
	--lh-lh-large:  2.1;

	/* Layout widths (brief: content 992, wide 1280) */
	--lh-container-max:    1280px;
	--lh-container-narrow: 992px;
	--lh-container-prose:  720px;

	/* Spacing (brief scale: 30/38/48/64/70/80/96/120) */
	--lh-s-30:  30px;
	--lh-s-38:  38px;
	--lh-s-48:  48px;
	--lh-s-64:  64px;
	--lh-s-70:  70px;
	--lh-s-80:  80px;
	--lh-s-96:  96px;
	--lh-s-120: 120px;
	/* Section vertical padding rhythm */
	--lh-section-y: clamp(64px, 2.65rem + 4.5vw, 100px);

	/* Radii (brief: xs 2, lg 15, xl 24, full 32 for buttons) */
	--lh-radius-xs:     2px;
	--lh-radius-md:     15px;
	--lh-radius-lg:     24px;
	--lh-radius-pill:   32px;

	/* Shadows (flat material: soft + minimal) */
	--lh-shadow-sm: 0 1px 2px rgba(33, 37, 47, 0.06), 0 1px 3px rgba(33, 37, 47, 0.04);
	--lh-shadow-md: 0 4px 16px rgba(33, 37, 47, 0.08);
	--lh-shadow-lg: 0 12px 36px rgba(33, 37, 47, 0.10);
}

/* ---------- Reset & base ---------- */

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

/* scroll-behavior is intentionally NOT smooth: native smooth scrolling
   stalls on the deployed site (anchor jumps never move / can hang the
   renderer). In-page anchor navigation is handled instantly in main.js. */
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--lh-font-sans);
	font-size: var(--lh-fs-body);
	line-height: var(--lh-lh-normal);
	color: var(--lh-muted);
	background: var(--lh-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

/* Defensive mobile-overflow protection: long URLs, German compound words,
 * uninterrupted ad-tracking strings can blow out a narrow viewport. Apply
 * conservative wrapping to text containers. */
p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, td, dd, dt {
	overflow-wrap: anywhere;
	word-break: break-word;
}

h1, h2, h3, h4 {
	font-family: var(--lh-font-serif);
	font-weight: 400;
	margin: 0 0 0.5em;
	color: var(--lh-ink);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--lh-fs-display); line-height: var(--lh-lh-tiny);  letter-spacing: -0.015em; }
h2 { font-size: var(--lh-fs-h2);      line-height: var(--lh-lh-small); }
h3 { font-size: var(--lh-fs-h3);      line-height: var(--lh-lh-small); }
h4 { font-size: var(--lh-fs-h4);      line-height: var(--lh-lh-small); font-weight: 500; }

p { margin: 0 0 1em; line-height: var(--lh-lh-normal); }

a {
	color: var(--lh-primary);
	text-decoration: none;
	transition: color 160ms ease;
}
a:hover, a:focus-visible { color: var(--lh-secondary); }

/* Body-content hyperlinks — darker Aged Gold + bold so they stand out from body
 * text AND meet WCAG AA color contrast (4.5:1) against a white background.
 * --lh-secondary itself (#B0871F) is only ~3.3:1 vs white, so we use a darker
 * burnt-gold variant for the actual link color. Aged Gold proper is kept for
 * eyebrows, decorative borders, and similar non-text-readability uses.
 *
 * Buttons that happen to live inside <p>/<li> are protected by selector specificity:
 * `.lh-button { color/font-weight }` (0,1,0) beats `p a` (0,0,2). */
p a,
li a,
.lh-pav-faq__a a,
.lh-pav-welcome a,
.lh-lede a,
.lh-event-row__desc a,
.lh-event-row__title a,
figcaption a,
blockquote a {
	color: #876419;
	font-weight: 600;
}
p a:hover,
p a:focus-visible,
li a:hover,
li a:focus-visible,
.lh-pav-faq__a a:hover,
.lh-pav-welcome a:hover,
.lh-lede a:hover,
.lh-event-row__desc a:hover,
.lh-event-row__title a:hover,
figcaption a:hover,
blockquote a:hover {
	color: var(--lh-primary);
}

/* On dark bands, body links flip to white + bold; gold on hover. */
.lh-section--dark p a,
.lh-section--dark li a,
.lh-section--dark figcaption a,
.lh-section--dark blockquote a {
	color: var(--lh-white);
	font-weight: 600;
}
.lh-section--dark p a:hover,
.lh-section--dark li a:hover,
.lh-section--dark figcaption a:hover,
.lh-section--dark blockquote a:hover {
	color: var(--lh-accent, #B0871F);
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--lh-accent);
	outline-offset: 3px;
	border-radius: var(--lh-radius-md);
}

/* Eyebrow text — brand burgundy by default, override on dark backgrounds */
.lh-eyebrow {
	display: inline-block;
	margin: 0 0 1.1rem;
	font-family: var(--lh-font-sans);
	font-size: var(--lh-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	line-height: var(--lh-lh-tiny);
}
.lh-eyebrow--light  { color: rgba(255,255,255,0.85); }
.lh-eyebrow--accent { color: var(--lh-accent); }
/* Eyebrows in dark sections default to a readable light tone (overrideable). */
.lh-section--dark .lh-eyebrow:not(.lh-eyebrow--accent):not(.lh-eyebrow--light) { color: rgba(255,255,255,0.85); }

.lh-lede {
	font-size: var(--lh-fs-large);
	line-height: var(--lh-lh-medium);
	color: var(--lh-muted);
	max-width: 60ch;
}

.lh-text-center { text-align: center; }
.lh-text-center .lh-eyebrow,
.lh-text-center .lh-lede { margin-left: auto; margin-right: auto; }

/* ---------- A11y ---------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	word-wrap: normal !important;
}
.lh-skip-link:focus {
	position: fixed; top: 0.5rem; left: 0.5rem;
	background: var(--lh-primary); color: var(--lh-white);
	padding: 0.5rem 0.75rem; z-index: 9999;
	clip: auto; clip-path: none; width: auto; height: auto;
	border-radius: var(--lh-radius-md);
}

/* ---------- Layout primitives ---------- */

.lh-container {
	width: 100%;
	max-width: var(--lh-container-max);
	margin: 0 auto;
	padding: 0 max(1.25rem, env(safe-area-inset-left));
	padding-right: max(1.25rem, env(safe-area-inset-right));
}
.lh-container--narrow { max-width: var(--lh-container-narrow); }

.lh-section { padding-block: clamp(64px, 3rem + 4vw, 120px); position: relative; }
.lh-section--cream { background: var(--lh-cream); }
.lh-section--dark  { background: var(--lh-primary-dark); color: var(--lh-white); }

/* When two adjacent sections share the same background, collapse the duplicate
   padding between them so the visual block reads as one. */
.lh-section--dark  + .lh-section--dark,
.lh-section--cream + .lh-section--cream { padding-top: 0; }
.lh-section--dark:has(+ .lh-section--dark),
.lh-section--cream:has(+ .lh-section--cream) { padding-bottom: clamp(32px, 1.5rem + 2vw, 56px); }

/* Sermons landing: intro CTA + latest sermon + optional content all share the
   default white background. Collapse the duplicated padding so they read as
   one stacked column instead of three widely-separated blocks. */
.lh-sermons-landing .lh-section + .lh-section:not(.lh-section--dark):not(.lh-section--cream) {
	padding-top: 0;
}
.lh-sermons-landing .lh-section:has(+ .lh-section:not(.lh-section--dark):not(.lh-section--cream)) {
	padding-bottom: clamp(24px, 1rem + 1.5vw, 40px);
}
.lh-section--dark h1,
.lh-section--dark h2,
.lh-section--dark h3,
.lh-section--dark h4 { color: var(--lh-white); }
.lh-section--page-hero {
	padding-top: clamp(4rem, 4vw + 3rem, 7rem);
	padding-bottom: clamp(1.5rem, 1vw + 1rem, 2.5rem);
}

/* ---------- Buttons (pill style) ---------- */

.lh-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lh-font-sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 40px;
	border-radius: var(--lh-radius-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
	line-height: 1;
	white-space: nowrap;
}
.lh-button:hover {
	transform: translateY(-1px);
}
.lh-button--primary {
	background: var(--lh-primary);
	color: var(--lh-white);
	border-color: var(--lh-primary);
}
.lh-button--primary:hover,
.lh-button--primary:focus-visible {
	background: var(--lh-primary-dark);
	border-color: var(--lh-primary-dark);
	color: var(--lh-white);
}
.lh-button--ghost {
	background: transparent;
	color: var(--lh-primary);
	border-color: var(--lh-primary);
}
.lh-button--ghost:hover {
	background: var(--lh-primary);
	color: var(--lh-white);
}
.lh-button--ghost-light {
	background: transparent;
	color: var(--lh-white);
	border-color: rgba(255,255,255,0.7);
}
.lh-button--ghost-light:hover {
	background: var(--lh-white);
	color: var(--lh-primary);
	border-color: var(--lh-white);
}
.lh-button--soft {
	background: var(--lh-cream);
	color: var(--lh-ink);
	border-color: var(--lh-cream);
}
.lh-button--soft:hover { background: var(--lh-white); border-color: var(--lh-divider); }

/* Small variant — the base button's 18px / 40px padding is calibrated
   for prose-width CTAs, not for stretched-to-100% buttons in narrow
   2-up grids (e.g. the Find Your Fit Buy-Cycle row, the Plans page
   cycle buttons). At full width the chunky padding plus 0.14em
   letter-spacing crowded the pill curves with no breathing room.
   --sm trims padding, font, and tracking proportionally. */
.lh-button--sm {
	padding: 12px 22px;
	font-size: 13px;
	letter-spacing: 0.1em;
}

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

.lh-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent;
	transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease, top 0ms;
	border-bottom: 1px solid transparent;
}
/* When logged in, push the sticky header below the WordPress admin bar. */
.admin-bar .lh-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .lh-header { top: 46px; }
}
.lh-header.is-scrolled,
.lh-header.is-opaque {
	background: #1e3b57;
	border-bottom-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 18px rgba(12, 38, 64, 0.18);
}
.lh-header__inner {
	max-width: none;
	margin: 0;
	padding: 1.25rem clamp(1.25rem, 1rem + 2vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 88px;
}
.lh-site-logo {
	display: inline-block;
	line-height: 0;
	position: relative;
	/* The two logos have very different aspects — wide white wordmark (~7:1)
	   vs square color SVG (~1:1). The container reserves enough width for the
	   wide one at its natural ratio so it never squishes. The square color
	   logo simply left-aligns inside this wider footprint. */
	height: clamp(40px, 1.2vw + 28px, 52px);
	width:  clamp(290px, 28vw + 96px, 380px);
}
.lh-site-logo img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
	transition: opacity 220ms ease;
}

/* Phones: keep the wordmark legible but trim it so the hamburger has room. */
@media (max-width: 600px) {
	.lh-site-logo {
		height: 36px;
		width:  240px;
	}
}
.lh-site-logo__color {
	position: absolute;
	top: 0; left: 0;
}
.lh-site-logo__white {
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
	pointer-events: none;
	/* Soft drop shadow lifts the white wordmark off busy hero photography. */
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)) drop-shadow(0 4px 14px rgba(0,0,0,0.25));
}

/* When over hero (not scrolled), show the white logo and invert nav for legibility */
.lh-header .lh-site-logo__color { opacity: 0; }
.lh-header .lh-site-logo__white { opacity: 1; }

/* Top-level menu items: white over hero, navy after scroll.
   Sub-menu items keep their own (navy) color regardless. */
.lh-header .lh-menu > li > a {
	color: var(--lh-white);
	/* Top-level menu labels must never break mid-word — the global
	   li { word-break: break-word } would otherwise wrap them ("CURRICU LUM"). */
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}
.lh-header .lh-menu > li > a:hover {
	color: rgba(255, 255, 255, 0.75);
}
.lh-header .lh-nav__search {
	color: var(--lh-white);
}
.lh-header .lh-nav__search:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--lh-white);
}
.lh-header .lh-nav__cta {
	background: transparent;
	color: var(--lh-white);
	border-color: rgba(255,255,255,0.85);
}
.lh-header .lh-nav__cta:hover {
	background: var(--lh-white);
	color: var(--lh-primary);
	border-color: var(--lh-white);
}

body { padding-top: 0; } /* hero handles its own clearance via min-height */

/* ---------- Primary nav ---------- */

.lh-nav { display: flex; align-items: center; gap: 1.25rem; }
.lh-nav__panel { display: flex; align-items: center; gap: 1.5rem; }
.lh-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.65rem;
	align-items: center;
}
.lh-menu li { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.lh-menu a {
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lh-primary);
	padding: 0.5rem 0;
	transition: color 160ms ease;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.lh-menu a:hover { color: var(--lh-secondary); }
/* Dropdown chevron for items with children */
.lh-menu .menu-item-has-children { position: relative; }
.lh-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.65;
	transition: transform 180ms ease;
}
.lh-menu .menu-item-has-children:hover > a::after,
.lh-menu .menu-item-has-children:focus-within > a::after {
	transform: translateY(0) rotate(-135deg);
	opacity: 1;
}

/* Sub-menu (dropdown panel) */
.lh-menu .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, -4px);
	min-width: 240px;
	background: var(--lh-white);
	box-shadow: 0 12px 32px rgba(33, 37, 47, 0.14);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 10px 0;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
	z-index: 60;
}
/* Invisible bridge so the dropdown stays open as the cursor crosses the gap. */
.lh-menu .menu-item-has-children::after {
	content: '';
	position: absolute;
	top: 100%;
	left: -8px;
	right: -8px;
	height: 18px;
	pointer-events: none;
}
.lh-menu .menu-item-has-children:hover::after,
.lh-menu .menu-item-has-children:focus-within::after {
	pointer-events: auto;
}
.lh-menu .menu-item-has-children:hover > .sub-menu,
.lh-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.lh-menu .sub-menu li {
	display: block;
	margin: 0;
}
.lh-menu .sub-menu a {
	display: block;
	padding: 0.625rem 1.25rem;
	font-size: 13px;
	letter-spacing: 0.04em;
	font-weight: 600;
	text-transform: none;
	color: var(--lh-primary);
	white-space: nowrap;
	border: 0;
	line-height: 1.4;
}
.lh-menu .sub-menu a:hover,
.lh-menu .sub-menu a:focus-visible {
	background: var(--lh-cream);
	color: var(--lh-secondary);
}

/* ============================================================
   Mega-menu panels (Curriculum, Our Approach)
   Triggered on .menu-item-has-children.lh-menu__has-mega
   ============================================================ */
.lh-menu .lh-mega {
	position: absolute;
	/* Sit flush below the header — internal padding gives the visual breathing room
	   and the panel itself becomes the hover surface, avoiding cursor dead-zones on
	   wide panels. */
	top: 100%;
	left: 0;
	transform: translateY(-4px);
	width: min(880px, calc(100vw - 3rem));
	background: var(--lh-white);
	box-shadow: 0 16px 40px rgba(33, 37, 47, 0.16);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 2rem 2rem 1.75rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
	z-index: 60;
}
/* Anchor-right modifier for nav items further right in the row */
.lh-menu .lh-menu__has-mega--right > .lh-mega {
	left: auto;
	right: 0;
}
/* Show on hover, keyboard focus-within, or JS-toggled .is-open */
.lh-menu .lh-menu__has-mega:hover > .lh-mega,
.lh-menu .lh-menu__has-mega:focus-within > .lh-mega,
.lh-menu .lh-menu__has-mega.is-open > .lh-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Grid container */
.lh-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem 2rem;
}

/* Column heading */
.lh-mega__heading {
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lh-muted);
	margin: 0 0 0.875rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--lh-divider);
}

/* Lists */
.lh-mega__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.25rem;
}
.lh-mega__list li {
	margin: 0;
	padding: 0;
	display: block;
	border: 0;
}
.lh-mega__list a {
	display: block;
	padding: 0.5rem 0.625rem;
	margin: 0 -0.625rem;
	border-radius: 6px;
	color: var(--lh-primary);
	font-family: var(--lh-font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	transition: background 140ms ease, color 140ms ease;
}
.lh-mega__list a:hover,
.lh-mega__list a:focus-visible {
	background: var(--lh-cream);
	color: var(--lh-secondary);
}
.lh-mega__label {
	display: block;
	font-weight: 700;
	color: var(--lh-primary);
}
.lh-mega__sub {
	display: block;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--lh-muted);
	margin-top: 2px;
	letter-spacing: 0;
}
/* Secondary sub line — used by Shop-by-Cycle items to surface the
   ancient world-stream era under the America/Britain year range. Slightly
   smaller and lighter so the America/Britain stream stays the dominant label. */
.lh-mega__sub--alt {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--lh-muted);
	opacity: 0.85;
	margin-top: 1px;
}
.lh-mega__more {
	font-size: 0.8125rem;
	color: var(--lh-secondary);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding-top: 0.5rem;
}

/* Single-link column (description + CTA) */
.lh-mega__copy {
	margin: 0 0 0.875rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--lh-muted);
	font-family: var(--lh-font-sans);
	font-weight: 500;
}
.lh-mega__cta {
	display: inline-block;
	padding: 0 0 2px;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	border-bottom: 1px solid currentColor;
	line-height: 1.4;
	transition: color 140ms ease;
}
.lh-mega__cta:hover,
.lh-mega__cta:focus-visible {
	color: var(--lh-primary-dark, var(--lh-primary));
}

/* Three-column variant (Our Approach) — narrower panel, 3 cols with headers */
.lh-menu .lh-mega.lh-mega--three-col {
	width: min(720px, calc(100vw - 3rem));
	padding: 1.75rem 2rem;
}
.lh-mega--three-col .lh-mega__grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 1.75rem;
}

/* Two-column variant (About menu after the founder feature was removed). */
.lh-menu .lh-mega.lh-mega--two-col {
	width: min(480px, calc(100vw - 3rem));
	padding: 1.75rem 2rem;
}
.lh-mega--two-col .lh-mega__grid {
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2rem;
}

/* Feature variant (About) — portrait column on the left + two link columns
   on the right. The portrait is a clickable card linking to Becky's bio. */
.lh-menu .lh-mega.lh-mega--with-feature {
	width: min(820px, calc(100vw - 3rem));
	padding: 1.75rem 2rem;
}
.lh-mega--with-feature .lh-mega__grid {
	grid-template-columns: 200px 1fr 1fr;
	gap: 1.75rem 2rem;
	align-items: start;
}

/* Portrait + caption card. Selectors are scoped to .lh-menu so they win
   the cascade fight with the global .lh-menu a rule (which otherwise
   forces display: inline-flex + uppercase + letter-spacing on every
   anchor inside the menu). */
.lh-menu .lh-mega-feature {
	display: block;
	color: var(--lh-ink);
	text-decoration: none;
	text-align: center;
	padding: 0;
	border-radius: var(--lh-radius-md);
	transition: opacity 160ms ease;
	letter-spacing: 0;
	text-transform: none;
	font-weight: normal;
}
.lh-menu .lh-mega-feature:hover,
.lh-menu .lh-mega-feature:focus-visible {
	opacity: 0.92;
	color: var(--lh-ink);
}
.lh-menu .lh-mega-feature__img {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 0.875rem;
	display: block;
	box-shadow: 0 6px 18px rgba(33, 37, 47, 0.12);
}
.lh-menu .lh-mega-feature__eyebrow {
	display: block;
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lh-muted);
	margin-bottom: 0.25rem;
}
.lh-menu .lh-mega-feature__name {
	display: block;
	font-family: var(--lh-font-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--lh-primary);
	margin-bottom: 0.625rem;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}
.lh-menu .lh-mega-feature__cta {
	display: inline-block;
	font-family: var(--lh-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

/* Footer strip — used by Curriculum mega for the Samples + Co-Op + ESA
   shortcuts. Sits below the main 4-column grid, separated by a top border. */
.lh-mega__footer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.25rem;
	margin-top: 1.5rem;
	padding-top: 1.125rem;
	border-top: 1px solid var(--lh-divider);
}
.lh-mega__footer a {
	display: block;
	padding: 0.625rem 1rem;
	margin: 0;
	border-radius: 6px;
	font-family: var(--lh-font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--lh-primary);
	text-decoration: none;
	transition: background 140ms ease, color 140ms ease;
}
.lh-mega__footer a:hover,
.lh-mega__footer a:focus-visible {
	background: var(--lh-cream);
	color: var(--lh-secondary);
}

/* ----- Mobile: inline the mega-panel content inside the drawer ----- */
@media (max-width: 1180px) {
	.lh-menu .lh-mega {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0.25rem 0 0.75rem;
		width: auto;
		max-width: none;
		background: transparent;
	}
	.lh-mega__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.lh-mega__heading {
		margin-bottom: 0.375rem;
		padding-bottom: 0.5rem;
	}
	.lh-mega__list a {
		padding: 0.5rem 1rem;
		margin: 0;
		color: var(--lh-muted);
	}
	.lh-mega__list a:hover,
	.lh-mega__list a:focus-visible {
		background: transparent;
		color: var(--lh-secondary);
	}
	.lh-mega__label { color: var(--lh-ink); }
	.lh-mega__copy { padding: 0 1rem; }
	.lh-mega__cta  { margin: 0 1rem; }

	/* Three-column variant on mobile: stack as a single column */
	.lh-menu .lh-mega.lh-mega--three-col { padding: 0.25rem 0 0.75rem; }
	.lh-mega--three-col .lh-mega__grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	/* Feature variant on mobile: portrait shrinks and lays beside the
	   founder caption text instead of dominating its own column. Selectors
	   scoped to .lh-menu for cascade reasons (see desktop block above). */
	.lh-menu .lh-mega.lh-mega--with-feature { padding: 0.25rem 0 0.75rem; }
	.lh-mega--with-feature .lh-mega__grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.lh-menu .lh-mega-feature {
		display: grid;
		grid-template-columns: 64px 1fr;
		gap: 0.875rem;
		align-items: center;
		text-align: left;
		padding: 0.5rem 1rem 1rem;
	}
	.lh-menu .lh-mega-feature__img {
		width: 64px;
		height: 64px;
		margin: 0;
		box-shadow: 0 3px 8px rgba(33, 37, 47, 0.10);
	}
	.lh-menu .lh-mega-feature__eyebrow,
	.lh-menu .lh-mega-feature__name,
	.lh-menu .lh-mega-feature__cta {
		text-align: left;
	}
	.lh-menu .lh-mega-feature__name {
		grid-column: 2;
		margin-bottom: 0.125rem;
	}
	.lh-menu .lh-mega-feature__eyebrow {
		grid-column: 2;
		grid-row: 1;
	}
	.lh-menu .lh-mega-feature__img {
		grid-row: 1 / span 3;
		grid-column: 1;
	}
	.lh-menu .lh-mega-feature__cta {
		grid-column: 2;
	}

	/* Footer strip on mobile: stack as a single column, no top border */
	.lh-mega__footer {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 0.5rem;
		padding-top: 0.5rem;
		border-top-color: var(--lh-divider);
	}
	.lh-mega__footer a {
		padding: 0.5rem 1rem;
		color: var(--lh-muted);
		font-weight: 600;
	}
	.lh-mega__footer a:hover,
	.lh-mega__footer a:focus-visible {
		background: transparent;
		color: var(--lh-secondary);
	}
}

.lh-nav__search-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.lh-nav__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--lh-primary);
	border-radius: 50%;
	transition: background 160ms ease, color 160ms ease;
}
.lh-nav__search:hover { background: rgba(19,59,92,0.08); color: var(--lh-secondary); }
.lh-nav__search-wrap[data-lh-search].is-open .lh-nav__search { background: rgba(19,59,92,0.08); }

.lh-nav__search-form[hidden] { display: none; }
.lh-nav__search-form {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	z-index: 50;
	background: var(--lh-white, #fff);
	border: 1px solid var(--lh-divider, rgba(0,0,0,0.08));
	border-radius: var(--lh-radius-pill, 999px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
	padding: 0.25rem 0.25rem 0.25rem 0.85rem;
	gap: 0.25rem;
	min-width: 280px;
}
.lh-nav__search-form input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	font-family: var(--lh-font-sans);
	font-size: 0.95rem;
	background: transparent;
	color: var(--lh-ink);
	padding: 0.35rem 0;
}
.lh-nav__search-submit {
	background: var(--lh-primary);
	color: var(--lh-white);
	border: 0;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
}
.lh-nav__search-submit:hover { background: var(--lh-primary-dark, #1F3A57); }
@media (max-width: 600px) {
	.lh-nav__search-form { right: -1rem; min-width: 240px; }
}

.lh-nav__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--lh-primary);
	border: 1.5px solid var(--lh-primary);
	padding: 0.5rem 1.25rem;
	border-radius: var(--lh-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: all 160ms ease;
}
.lh-nav__cta:hover {
	background: var(--lh-primary);
	color: var(--lh-white);
}

.lh-nav__cta--solid {
	background: var(--lh-primary);
	color: var(--lh-white);
}
.lh-nav__cta--solid:hover {
	background: var(--lh-primary-dark, #1F3A57);
	color: var(--lh-white);
	border-color: var(--lh-primary-dark, #1F3A57);
}

/* Live pulse — when a service is broadcasting, the pill turns brand red and pulses */
.lh-nav__cta--live {
	color: var(--lh-secondary);
	border-color: var(--lh-secondary);
	gap: 0.5rem;
	animation: lh-cta-live-glow 2.4s ease-in-out infinite;
}
.lh-nav__cta--live:hover {
	background: var(--lh-secondary);
	color: var(--lh-white);
	border-color: var(--lh-secondary);
}
.lh-nav__cta-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d33;
	box-shadow: 0 0 0 0 rgba(211,51,51,0.6);
	animation: lh-cta-dot-pulse 1.6s ease-out infinite;
}
.lh-nav__cta--live:hover .lh-nav__cta-dot { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }

@keyframes lh-cta-dot-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(211,51,51,0.7); }
	70%  { box-shadow: 0 0 0 9px rgba(211,51,51,0);   }
	100% { box-shadow: 0 0 0 0   rgba(211,51,51,0);   }
}
@keyframes lh-cta-live-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(211,51,51,0); }
	50%      { box-shadow: 0 0 0 4px rgba(211,51,51,0.12); }
}
@media (prefers-reduced-motion: reduce) {
	.lh-nav__cta--live, .lh-nav__cta-dot { animation: none; }
}

/* When the header is transparent over a hero, keep the live pill readable on the dark photo */
.lh-header .lh-nav__cta--live {
	color: #ff9aa0;
	border-color: rgba(255, 154, 160, 0.7);
}
.lh-header .lh-nav__cta--live:hover {
	background: rgba(255,255,255,0.95);
	color: var(--lh-secondary);
	border-color: rgba(255,255,255,0.95);
}

.lh-nav__toggle {
	display: none;
	background: none;
	border: 0;
	width: 44px; height: 44px;
	cursor: pointer;
	padding: 0;
}
.lh-nav__toggle-icon { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.lh-nav__toggle-icon span {
	display: block; width: 26px; height: 2px; background: var(--lh-ink); transition: transform 180ms ease, opacity 180ms ease, background 220ms ease;
}
.lh-header .lh-nav__toggle-icon span { background: var(--lh-white); }
.lh-nav__toggle[aria-expanded="true"] .lh-nav__toggle-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lh-nav__toggle[aria-expanded="true"] .lh-nav__toggle-icon span:nth-child(2) { opacity: 0; }
.lh-nav__toggle[aria-expanded="true"] .lh-nav__toggle-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
	.lh-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
	.lh-nav__panel {
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		background: var(--lh-white);
		border-bottom: 1px solid var(--lh-divider);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1.5rem 1.5rem 2rem;
		max-height: 0;
		overflow: hidden;
		transition: max-height 240ms ease;
	}
	.lh-nav__panel.is-open { max-height: 80vh; overflow: auto; }
	.lh-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.lh-menu li { border-bottom: 1px solid var(--lh-divider); display: block; }
	.lh-menu a { display: block; padding: 1rem 0; color: var(--lh-ink); }
	.lh-nav__cta { margin-top: 1.25rem; text-align: center; background: var(--lh-primary); color: var(--lh-white); }

	/* Sub-menus inline on mobile (no absolute floating panel) */
	.lh-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: transparent;
		padding: 0 0 0.75rem;
		margin: 0;
		min-width: 0;
	}
	.lh-menu .sub-menu a {
		padding: 0.5rem 1rem;
		font-size: 14px;
		color: var(--lh-muted);
	}
	.lh-menu .menu-item-has-children > a::after { display: none; }
}

/* ---------- Hero (full-bleed photo, centered display) ---------- */

.lh-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(620px, 92vh, 920px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lh-white);
	overflow: hidden;
	text-align: center;
}
.lh-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lh-hero__media img,
.lh-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.lh-hero--video .lh-hero__video { background: var(--lh-primary-dark); }
@media (prefers-reduced-motion: reduce) {
	.lh-hero__video { display: none; }
	.lh-hero__media::after {
		content: '';
		position: absolute; inset: 0;
		background: url('../video/hero-poster.jpg') center/cover no-repeat;
	}
}
.lh-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	/* Moody, even darkening — desaturates the image and ensures white headline legibility */
	background:
		linear-gradient(180deg, rgba(12,38,64,0.25) 0%, rgba(0,0,0,0.50) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 100%);
}
.lh-hero--aerial .lh-hero__overlay {
	background:
		linear-gradient(180deg, rgba(12,38,64,0.35) 0%, rgba(0,0,0,0.65) 100%);
}
.lh-hero--aerial .lh-hero__media img,
.lh-hero--aerial .lh-hero__media video { object-position: center bottom; }
.lh-hero__inner {
	max-width: 100%;
	padding: 10rem max(1.5rem, env(safe-area-inset-left)) 6rem;
	width: 100%;
}
.lh-hero__heading {
	font-family: var(--lh-font-serif);
	font-size: clamp(28px, 1.5rem + 2.5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--lh-white);
	margin: 0 auto;
	font-weight: 400;
	max-width: none;
	white-space: nowrap;
}
.lh-hero__subline {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(18px, 1rem + 0.8vw, 26px);
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.88);
	margin: 0.5rem 0 0;
	font-weight: 400;
	letter-spacing: 0.005em;
}
.lh-hero__actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: clamp(1.5rem, 1vw + 1rem, 2.25rem) 0 0;
}
@media (max-width: 640px) {
	.lh-hero__heading { white-space: normal; }
}

/* ---------- Mission statement section ---------- */

/* ---------- Scroll reveal (IntersectionObserver-driven) ---------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 400ms ease-out,
	            transform 400ms ease-out;
	will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="zoom"] { transform: scale(1.04); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Stagger: when a .lh-prose container is data-reveal, its children
   cascade in instead of the whole block fading as one. */
.lh-prose[data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}
.lh-prose[data-reveal] > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.lh-prose[data-reveal].is-revealed > * { opacity: 1; transform: none; }
.lh-prose[data-reveal].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(2) { transition-delay: 70ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(3) { transition-delay: 140ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(4) { transition-delay: 200ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(5) { transition-delay: 260ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(6) { transition-delay: 320ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(7) { transition-delay: 380ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(8) { transition-delay: 440ms; }
.lh-prose[data-reveal].is-revealed > *:nth-child(n+9) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.lh-prose[data-reveal] > * { opacity: 1; transform: none; transition: none; }
}

.lh-mission {
	text-align: center;
	padding-block: clamp(80px, 4rem + 4vw, 120px);
	background: var(--lh-white);
}
.lh-mission__heading {
	max-width: 22ch;
	margin: 0 auto;
	font-style: italic;
	font-weight: 400;
	font-size: var(--lh-fs-h2);
	line-height: var(--lh-lh-small);
	color: var(--lh-ink);
}

/* ---------- Worship card + image-card split ---------- */

.lh-worship-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 2vw + 0.75rem, 2.5rem);
}
@media (max-width: 880px) { .lh-worship-split { grid-template-columns: 1fr; } }

.lh-worship-card {
	background: var(--lh-cream);
	border-radius: var(--lh-radius-md);
	padding: clamp(32px, 2rem + 2vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}
.lh-worship-card__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-accent);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(28px, 1.8rem + 1vw, 40px);
	line-height: 1.2;
	margin: 0 0 1.5rem;
}
.lh-worship-card__list { margin: 0; }
.lh-worship-card__row {
	padding: 1.125rem 0;
	border-bottom: 1px solid rgba(33,37,47,0.10);
}
.lh-worship-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.lh-worship-card__row:first-child { padding-top: 0; }
.lh-worship-card__row-label {
	margin: 0 0 0.25rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--lh-ink);
	line-height: 1.4;
}
.lh-worship-card__row-detail {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--lh-muted);
	line-height: 1.5;
}

.lh-image-card {
	position: relative;
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	color: var(--lh-white);
	isolation: isolate;
}
.lh-image-card img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: -2;
	filter: grayscale(0.9) contrast(1.04) brightness(0.96);
	transition: transform 480ms ease, filter 480ms ease;
}
.lh-image-card::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(12,38,64,0) 35%, rgba(12,38,64,0.78) 100%);
}
.lh-image-card:hover img { transform: scale(1.03); filter: grayscale(0.7) contrast(1.04) brightness(0.98); }

.lh-image-card__arrow {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lh-primary);
	color: var(--lh-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: transform 200ms ease, background 200ms ease;
	box-shadow: 0 4px 12px rgba(33, 37, 47, 0.2);
}
.lh-image-card:hover .lh-image-card__arrow {
	transform: translate(2px, -2px);
	background: var(--lh-secondary);
}
.lh-image-card__body {
	padding: clamp(1.75rem, 3vw + 1rem, 3rem);
}
.lh-image-card__title {
	color: var(--lh-white);
	margin: 0;
	font-size: var(--lh-fs-h3);
	line-height: var(--lh-lh-small);
	font-family: var(--lh-font-serif);
}

/* ---------- Latest message section ---------- */

.lh-latest {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(2rem, 3vw + 1rem, 4rem);
	align-items: center;
}
@media (max-width: 880px) { .lh-latest { grid-template-columns: 1fr; } }

.lh-latest__media {
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	max-width: 520px;
	width: 100%;
	display: block;
	background: var(--lh-cream);
}
.lh-latest__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lh-latest__body .lh-eyebrow { color: var(--lh-secondary); }
.lh-latest__title { margin: 0.25em 0 1rem; }
.lh-latest__meta {
	display: flex; align-items: center; gap: 0.75rem;
	font-size: 0.875rem; color: var(--lh-muted); margin: 0 0 0.5rem;
}
.lh-latest__scripture {
	font-family: var(--lh-font-serif);
	font-style: italic;
	color: var(--lh-secondary);
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
}
.lh-latest__avatar {
	width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
	background: var(--lh-divider); flex-shrink: 0;
}
.lh-latest__avatar img { width: 100%; height: 100%; object-fit: cover; }
.lh-latest__speaker { font-weight: 600; color: var(--lh-ink); }
.lh-latest__actions {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1.75rem;
}
.lh-latest__actions .lh-button {
	padding: 11px 22px;
	font-size: 11px;
	letter-spacing: 0.13em;
}
/* On narrower body columns the secondary actions become text-arrow links
   so the row never wraps awkwardly. */
@media (max-width: 1180px) {
	.lh-latest__actions {
		gap: 0.75rem 1.25rem;
		margin-top: 1.5rem;
	}
	.lh-latest__actions .lh-button--ghost {
		background: transparent;
		border: 0;
		padding: 0;
		color: var(--lh-primary);
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.13em;
		border-radius: 0;
	}
	.lh-latest__actions .lh-button--ghost::after {
		content: " →";
		font-weight: 400;
	}
	.lh-latest__actions .lh-button--ghost:hover {
		background: transparent;
		color: var(--lh-secondary);
	}
}

/* ---------- Latest messages: sermon carousel ---------- */
/* Used on the homepage cream band AND on the Sermons landing.
 * Horizontal carousel of cards (image on top, body below).
 * Cards use a square media area to fit SermonAudio's square series images
 * without cropping. */

.lh-sermon-carousel .lh-carousel__slide {
	flex: 0 0 calc((100% - clamp(1rem, 1.5vw + 0.5rem, 1.75rem) * 2) / 3);
}
@media (max-width: 1024px) {
	.lh-sermon-carousel .lh-carousel__slide { flex-basis: calc((100% - clamp(1rem, 1.5vw + 0.5rem, 1.75rem)) / 2); }
}
@media (max-width: 640px) {
	.lh-sermon-carousel .lh-carousel__slide { flex-basis: 86%; }
}
.lh-sermon-carousel .lh-carousel__slide > .lh-latest-card { width: 100%; height: 100%; }

.lh-latest-card {
	display: flex;
	flex-direction: column;
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	box-shadow: var(--lh-shadow-sm);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.lh-latest-card:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-md); }

.lh-latest-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--lh-cream);
}
.lh-latest-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 480ms ease;
}
.lh-latest-card:hover .lh-latest-card__media img { transform: scale(1.03); }

.lh-latest-card__body {
	padding: clamp(1.25rem, 1vw + 1rem, 1.75rem);
	display: flex;
	flex-direction: column;
	flex: 1;
}
.lh-latest-card__body .lh-eyebrow {
	color: var(--lh-secondary);
	margin: 0 0 0.75rem;
}
.lh-latest-card__title {
	font-family: var(--lh-font-serif);
	font-size: clamp(20px, 1rem + 0.8vw, 28px);
	line-height: var(--lh-lh-small, 1.2);
	margin: 0 0 0.65rem;
	color: var(--lh-ink);
}
.lh-latest-card__title a { color: inherit; text-decoration: none; }
.lh-latest-card__title a:hover { color: var(--lh-primary); }
.lh-latest-card__meta {
	font-size: 0.875rem;
	color: var(--lh-muted);
	margin: 0 0 0.5rem;
}
.lh-latest-card__speaker {
	font-weight: 600;
	color: var(--lh-ink);
}
.lh-latest-card__scripture {
	font-family: var(--lh-font-serif);
	font-style: italic;
	color: var(--lh-secondary);
	font-size: 1rem;
	margin: 0 0 1.25rem;
}
.lh-latest-card__actions {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}
.lh-latest-card__actions .lh-button { font-size: 0.8125rem; padding: 0.55rem 1rem; }

/* ---------- Sermon series carousel ---------- */
/* 4-up on wide desktop, 3/2/1 on narrower viewports. */
.lh-series-carousel .lh-carousel__slide {
	flex: 0 0 calc((100% - clamp(1rem, 1.5vw + 0.5rem, 1.75rem) * 3) / 4);
}
@media (max-width: 1100px) {
	.lh-series-carousel .lh-carousel__slide { flex-basis: calc((100% - clamp(1rem, 1.5vw + 0.5rem, 1.75rem) * 2) / 3); }
}
@media (max-width: 760px) {
	.lh-series-carousel .lh-carousel__slide { flex-basis: calc((100% - clamp(1rem, 1.5vw + 0.5rem, 1.75rem)) / 2); }
}
@media (max-width: 480px) {
	.lh-series-carousel .lh-carousel__slide { flex-basis: 80%; }
}
.lh-series-carousel .lh-carousel__slide > .lh-series-card { width: 100%; height: 100%; }

/* Light-theme controls (matches sermon carousel — both sit on cream/white) */
.lh-series-carousel .lh-carousel__btn {
	border-color: rgba(20, 38, 64, 0.35);
	color: var(--lh-primary);
}
.lh-series-carousel .lh-carousel__btn:hover {
	background: var(--lh-primary);
	border-color: var(--lh-primary);
	color: var(--lh-white);
}

.lh-series-card {
	display: flex;
	flex-direction: column;
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	box-shadow: var(--lh-shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.lh-series-card:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-md); color: inherit; }

.lh-series-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--lh-cream);
	position: relative;
}
.lh-series-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 480ms ease;
}
.lh-series-card:hover .lh-series-card__media img { transform: scale(1.04); }

/* Placeholder for series without an uploaded image — a colored panel with the title initial */
.lh-series-card__media--placeholder {
	background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.85);
}
.lh-series-card__monogram {
	font-family: var(--lh-font-serif);
	font-size: clamp(48px, 6vw, 84px);
	font-weight: 500;
	line-height: 1;
}

.lh-series-card__body {
	padding: clamp(0.95rem, 1vw + 0.5rem, 1.25rem) clamp(1rem, 1vw + 0.75rem, 1.5rem) clamp(1rem, 1vw + 0.75rem, 1.5rem);
}
.lh-series-card__title {
	font-family: var(--lh-font-serif);
	font-size: clamp(17px, 1rem + 0.3vw, 20px);
	line-height: 1.25;
	margin: 0 0 0.4rem;
	color: var(--lh-ink);
}
.lh-series-card__meta {
	font-size: 0.8125rem;
	color: var(--lh-muted);
	margin: 0;
}

/* Carousel controls on light backgrounds (sermons carousel sits on cream
 * or white, not the dark events band — invert the button styling). */
.lh-sermon-carousel .lh-carousel__btn {
	border-color: rgba(20, 38, 64, 0.35);
	color: var(--lh-primary);
}
.lh-sermon-carousel .lh-carousel__btn:hover {
	background: var(--lh-primary);
	border-color: var(--lh-primary);
	color: var(--lh-white);
}

/* Section header for the latest-messages band (heading + "All Sermons" button on right) */
.lh-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 1.5vw + 1rem, 2.5rem);
	flex-wrap: wrap;
}
.lh-section__head h2 { margin: 0; }

/* ---------- Events grid (dark band) ---------- */

.lh-events-band .lh-section__head {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin-bottom: clamp(2rem, 3vw + 1rem, 3.5rem);
}
.lh-events-band .lh-section__head h2 { margin: 0; }
@media (max-width: 640px) {
	.lh-events-band .lh-section__head { flex-direction: column; align-items: flex-start; }
}

.lh-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(1rem, 1.5vw + 0.5rem, 1.75rem);
}

/* ---------- Carousel (events) ---------- */

.lh-carousel { position: relative; }
.lh-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	margin-inline: calc(-1 * max(1.25rem, env(safe-area-inset-left)));
	padding-inline: max(1.25rem, env(safe-area-inset-left));
}
.lh-carousel__viewport::-webkit-scrollbar { display: none; }
.lh-carousel__track {
	display: flex;
	gap: clamp(1rem, 1.5vw + 0.5rem, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
}
.lh-carousel__slide {
	flex: 0 0 calc((100% - clamp(1rem, 1.5vw + 0.5rem, 1.75rem) * 2) / 3);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	align-items: stretch;
}
.lh-carousel__slide > .lh-event-card { width: 100%; height: 100%; }
@media (max-width: 1024px) {
	.lh-carousel__slide { flex-basis: calc((100% - clamp(1rem, 1.5vw + 0.5rem, 1.75rem)) / 2); }
}
@media (max-width: 640px) {
	.lh-carousel__slide { flex-basis: 86%; }
}
.lh-carousel__controls {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 1.5rem;
}
.lh-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid rgba(255,255,255,0.55);
	color: var(--lh-white);
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.lh-carousel__btn:hover {
	background: var(--lh-white);
	color: var(--lh-primary);
	border-color: var(--lh-white);
}
.lh-carousel__btn:disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------- Current series feature block ---------- */

.lh-series__title { margin-bottom: 1rem; font-style: italic; }
.lh-series__lede { margin: 0 auto 2rem; }
.lh-event-card {
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	color: var(--lh-ink);
	box-shadow: var(--lh-shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.lh-event-card:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-md); }
.lh-event-card__media img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
/* Per-image crop hints: fellowship1.jpg's subjects are at the top of the frame
 * (cropping to centre cuts off heads), so anchor the crop to the top edge. */
.lh-event-card__media img[src$="fellowship1.jpg"] { object-position: top; }

/* Cancelled events — desaturate the photo, dim the text, show a red badge. */
.lh-event-card__media { position: relative; }
.lh-event-card--cancelled .lh-event-card__media img {
	filter: grayscale(80%) brightness(0.85);
}
.lh-event-card--cancelled .lh-event-card__title,
.lh-event-card--cancelled .lh-event-card__desc {
	text-decoration: line-through;
	color: var(--lh-muted);
}
.lh-event-card__cancel-badge,
.lh-event-card__featured-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	color: var(--lh-white);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.lh-event-card__cancel-badge { background: #c0392b; }
.lh-event-card__featured-badge { background: var(--lh-secondary); }

/* Featured event card — subtle ring + slightly stronger shadow to draw the eye. */
.lh-event-card--featured {
	box-shadow: 0 2px 4px rgba(20,20,20,0.04), 0 10px 24px rgba(20,20,20,0.10);
	outline: 1.5px solid color-mix(in srgb, var(--lh-secondary) 60%, transparent);
	outline-offset: -1.5px;
}
.lh-event-card__body { padding: 1.25rem 1.25rem 1.5rem; flex: 1; }
.lh-event-card__date {
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--lh-secondary); margin: 0 0 0.5rem;
}
.lh-event-card__title,
.lh-section--dark .lh-event-card__title {
	font-family: var(--lh-font-serif);
	font-size: var(--lh-fs-h4);
	line-height: var(--lh-lh-small);
	margin: 0 0 0.5rem;
	color: var(--lh-ink);
	display: block;
}
.lh-event-card__title a,
.lh-section--dark .lh-event-card__title a { color: inherit; text-decoration: none; }
.lh-event-card__title a:hover { color: var(--lh-primary); }
.lh-event-card__desc {
	font-size: 0.875rem;
	color: var(--lh-muted);
	line-height: 1.55;
	margin: 0;
}

/* ---------- Featured event banner (homepage, under hero) ---------- */
/* Cream band that holds an image-left / content-right card.
 * Made to feel premium: big serif title, accent-colored date pill,
 * subtle elevation, and a primary CTA. Mobile collapses to stacked. */

.lh-featured-event-band {
	background: var(--lh-cream);
	padding-block: clamp(36px, 2vw + 1.25rem, 56px);
	position: relative;
}
/* Slim accent stripe at the top to visually separate from hero */
.lh-featured-event-band::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--lh-secondary) 0%,
		var(--lh-accent, var(--lh-secondary)) 50%,
		var(--lh-secondary) 100%);
	opacity: 0.85;
}

.lh-featured-event {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	box-shadow:
		0 1px 2px rgba(20,20,20,0.04),
		0 12px 30px rgba(20,20,20,0.08);
	overflow: hidden;
}
.lh-featured-event-band--no-image .lh-featured-event {
	grid-template-columns: 1fr;
	padding: clamp(2rem, 3vw + 1rem, 3.5rem);
	text-align: center;
}

.lh-featured-event__media {
	aspect-ratio: 4 / 3;
	min-height: 100%;
	overflow: hidden;
	line-height: 0;
}
.lh-featured-event__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 600ms ease;
}
.lh-featured-event:hover .lh-featured-event__media img {
	transform: scale(1.025);
}

.lh-featured-event__body {
	padding: clamp(1.25rem, 1.5vw + 0.5rem, 2rem) clamp(1.5rem, 1.5vw + 1rem, 2.5rem) clamp(1.25rem, 1.5vw + 0.5rem, 2rem) 0;
}
.lh-featured-event-band--no-image .lh-featured-event__body {
	padding: 0;
}

.lh-featured-event__eyebrow {
	color: var(--lh-secondary);
	margin: 0 0 1rem;
}

.lh-featured-event__title {
	font-family: var(--lh-font-serif);
	font-size: clamp(24px, 1.25rem + 1.2vw, 36px);
	line-height: var(--lh-lh-small, 1.15);
	color: var(--lh-ink);
	margin: 0 0 0.75rem;
	letter-spacing: -0.005em;
}

.lh-featured-event__date {
	display: inline-block;
	background: var(--lh-secondary);
	color: var(--lh-white);
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	margin: 0 0 1rem;
}

.lh-featured-event__desc {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--lh-ink);
	margin: 0 0 1.25rem;
	max-width: 55ch;
}
.lh-featured-event-band--no-image .lh-featured-event__desc {
	margin-left: auto;
	margin-right: auto;
}

.lh-featured-event__cta {
	margin: 0;
}

@media (max-width: 880px) {
	.lh-featured-event {
		grid-template-columns: 1fr;
	}
	.lh-featured-event__media {
		aspect-ratio: 16 / 9;
	}
	.lh-featured-event__body {
		padding: clamp(1.5rem, 4vw, 2rem);
	}
}

/* ---------- Featured story (dark band, large image right) ---------- */

.lh-featured-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(2rem, 3vw + 1rem, 4rem);
	align-items: center;
}
@media (max-width: 880px) { .lh-featured-story { grid-template-columns: 1fr; } }
.lh-featured-story__media {
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	aspect-ratio: 16/10;
	width: 100%;
}
.lh-featured-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Contact form */
.lh-prose .lh-contact-form-wrap { margin: 2.5em 0 1em; }
.lh-form-notice {
	padding: 1.1em 1.25em;
	border-radius: var(--lh-radius-md);
	margin: 0 0 2em;
	font-size: 0.98rem;
	line-height: 1.55;
}
.lh-form-notice p { margin: 0; }
.lh-form-notice--ok {
	background: #eaf3ed;
	border: 1px solid #b9d6c2;
	color: #1f4a2d;
}
.lh-form-notice--error {
	background: #fbecec;
	border: 1px solid #e3b6b6;
	color: #6d1b1b;
}
.lh-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.lh-form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
	.lh-form-row--split { grid-template-columns: 1fr 1fr; }
}
.lh-form-field { display: flex; flex-direction: column; }
.lh-form-field label {
	font-family: var(--lh-font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lh-ink);
	margin-bottom: 0.4rem;
}
.lh-form-req { color: var(--lh-secondary); margin-left: 0.15em; }
.lh-form-opt { color: var(--lh-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 0.72rem; }
.lh-form-field input,
.lh-form-field textarea {
	font-family: var(--lh-font-sans);
	font-size: 1rem;
	padding: 0.85em 1em;
	background: #fff;
	border: 1.5px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	color: var(--lh-ink);
	transition: border-color 160ms ease, box-shadow 160ms ease;
	width: 100%;
}
.lh-form-field input:focus,
.lh-form-field textarea:focus {
	outline: 0;
	border-color: var(--lh-primary);
	box-shadow: 0 0 0 3px rgba(19,59,92,0.12);
}
.lh-form-field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.lh-form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.lh-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 0.25rem;
}
.lh-form-actions .lh-button { white-space: nowrap; }
.lh-form-note {
	font-size: 0.85rem;
	color: var(--lh-muted);
	margin: 0;
	font-style: italic;
}

/* Events page — month-grouped upcoming events list */
.lh-events-page .lh-events-month + .lh-events-month { margin-top: 3rem; }
.lh-events-month__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	margin: 0 0 1.5rem;
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--lh-divider);
}
.lh-events-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.lh-event-row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 1.5rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--lh-divider);
	align-items: start;
}
.lh-event-row:last-child { border-bottom: 0; }
@media (min-width: 720px) { .lh-event-row { grid-template-columns: 110px 1fr; gap: 2rem; } }

.lh-event-row__date {
	background: var(--lh-cream);
	border-radius: var(--lh-radius-md);
	text-align: center;
	padding: 0.75rem 0.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lh-divider);
}
.lh-event-row__day {
	font-family: var(--lh-font-serif);
	font-size: clamp(1.85rem, 1.4rem + 1vw, 2.4rem);
	font-weight: 500;
	color: var(--lh-ink);
	line-height: 1;
}
.lh-event-row__dow {
	font-family: var(--lh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--lh-secondary);
	margin-top: 0.35rem;
}

.lh-event-row__body { min-width: 0; }
.lh-event-row__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.35rem;
	border: 0;
	padding: 0;
}
.lh-event-row__title a { color: inherit; text-decoration: none; }
.lh-event-row__title a:hover { color: var(--lh-secondary); }
.lh-event-row__meta {
	font-family: var(--lh-font-sans);
	font-size: 0.85rem;
	color: var(--lh-muted);
	margin: 0 0 0.55rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
}
.lh-event-row__sep { color: var(--lh-divider); }
.lh-event-row__desc {
	color: var(--lh-ink);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
	max-width: 70ch;
}

.lh-events-empty {
	padding: clamp(2rem, 4vw, 4rem) 0;
}
.lh-events-empty__heading {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.5rem);
	margin: 0.4em 0 0;
}

/* Teaching Lessons hub — stats line + rich cards (with lesson previews) */
.lh-section--narrow-intro { padding-top: clamp(56px, 4vw + 2rem, 80px); padding-bottom: clamp(16px, 1.5vw + 0.5rem, 24px); }
.lh-section--narrow-intro + .lh-teaching-cat,
.lh-section--narrow-intro + .lh-section { padding-top: clamp(16px, 1.5vw + 0.5rem, 24px); }
.lh-teaching-stats { padding-top: clamp(40px, 3vw + 1rem, 56px); padding-bottom: clamp(40px, 3vw + 1rem, 56px); }
.lh-teaching-stats__line {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
	color: var(--lh-ink);
	margin: 0.4rem 0 0;
	line-height: 1.45;
}
.lh-teaching-stats__line strong {
	font-style: normal;
	color: var(--lh-secondary);
	font-weight: 600;
}
.lh-teaching__head { margin-bottom: clamp(2rem, 2vw + 1rem, 3rem); }
.lh-teaching__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	line-height: 1.1;
	margin: 0.3em 0 0;
}
.lh-teaching__label {
	font-family: var(--lh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--lh-secondary);
	text-align: center;
	margin: 2.5rem 0 1.5rem;
}
.lh-teaching__label--archived { color: var(--lh-muted); }

.lh-teaching__grid--rich {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 1200px;
	margin-inline: auto;
}
@media (min-width: 860px) {
	.lh-teaching__grid--rich { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

.lh-teaching-card--rich {
	background: #fff;
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 1.75rem 1.85rem 1.65rem;
	margin: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.lh-section--cream .lh-teaching-card--rich { background: #fff; }
.lh-teaching-card--rich:hover {
	border-color: var(--lh-secondary);
	box-shadow: var(--lh-shadow-md);
	transform: translateY(-3px);
}
.lh-teaching-card__head { display: flex; flex-direction: column; }
.lh-teaching-card__eyebrow {
	font-family: var(--lh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--lh-secondary);
	margin: 0 0 0.6em;
}
.lh-teaching-card__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: 1.45rem;
	line-height: 1.2;
	margin: 0 0 0.55em;
	border: 0;
	padding: 0;
}
.lh-teaching-card__title a { color: inherit; text-decoration: none; }
.lh-teaching-card__title a:hover { color: var(--lh-secondary); }
.lh-teaching-card__desc {
	color: var(--lh-ink);
	font-size: 0.97rem;
	line-height: 1.55;
	margin: 0;
}

.lh-teaching-card__recent {
	background: var(--lh-cream);
	border-radius: var(--lh-radius-md);
	padding: 1rem 1.1rem 1.05rem;
}
.lh-teaching-card__recent-label {
	font-family: var(--lh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--lh-muted);
	margin: 0 0 0.5rem;
}
.lh-teaching-card__lessons {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.lh-teaching-card__lessons li {
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(33,37,47,0.08);
	font-size: 0.93rem;
	line-height: 1.4;
}
.lh-teaching-card__lessons li:last-child { border-bottom: 0; }
.lh-teaching-card__lessons a {
	color: var(--lh-ink);
	text-decoration: none;
	transition: color 160ms ease;
	display: block;
}
.lh-teaching-card__lessons a:hover { color: var(--lh-secondary); }

.lh-teaching-card__link {
	font-family: var(--lh-font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lh-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	padding-top: 0.25rem;
}
.lh-teaching-card__link:hover { color: var(--lh-secondary); }

/* Archived cards — flatter, dimmer */
.lh-teaching__grid--archived {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 1200px;
	margin-inline: auto;
}
@media (min-width: 720px) {
	.lh-teaching__grid--archived { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (min-width: 1080px) {
	.lh-teaching__grid--archived { grid-template-columns: 1fr 1fr 1fr; }
}
.lh-teaching-card--archived {
	background: transparent;
	border: 1px dashed var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 1.35rem 1.5rem 1.3rem;
	margin: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	transition: border-color 180ms ease, background 180ms ease;
}
.lh-teaching-card--archived:hover {
	border-style: solid;
	border-color: var(--lh-divider);
	background: rgba(255,255,255,0.6);
}
.lh-teaching-card--archived .lh-teaching-card__eyebrow { color: var(--lh-muted); margin-bottom: 0.4em; }
.lh-teaching-card--archived .lh-teaching-card__title { font-size: 1.15rem; margin-bottom: 0.3em; }
.lh-teaching-card--archived .lh-teaching-card__desc { font-size: 0.9rem; }
.lh-teaching-card--archived .lh-teaching-card__link { font-size: 0.78rem; }

/* Teaching Lessons — Current / Archived label. */
.lh-teaching__label {
	font-family: var(--lh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--lh-secondary);
	text-align: center;
	margin: 2.5rem 0 1rem;
}
.lh-teaching__label--archived { color: var(--lh-muted); }
.lh-teaching__grid--archived .lh-teaching-card {
	background: transparent;
	border-color: var(--lh-divider);
	opacity: 0.92;
}
.lh-teaching-card--archived .lh-teaching-card__eyebrow { color: var(--lh-muted); }
.lh-teaching-card__media {
	display: block;
	margin: -1.5rem -1.6rem 1.2rem;
	border-radius: var(--lh-radius-md) var(--lh-radius-md) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.lh-teaching-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Single class — lessons list with audio players. */
.lh-lesson-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: lh-lesson;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.lh-lesson {
	background: #fff;
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 1.5rem 1.6rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 820px) {
	.lh-lesson { grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
}
.lh-lesson__head { min-width: 0; }
.lh-lesson__meta {
	font-family: var(--lh-font-sans);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: var(--lh-secondary);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 0.6rem;
}
.lh-lesson__date { color: var(--lh-muted); font-weight: 500; }
.lh-lesson__title {
	font-family: var(--lh-font-serif);
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--lh-ink);
	margin: 0 0 0.5rem;
	border: 0;
	padding: 0;
}
.lh-lesson__desc {
	color: var(--lh-ink);
	font-size: 0.95rem;
	line-height: 1.6;
}
.lh-lesson__desc p { margin: 0 0 0.6em; }
.lh-lesson__player audio {
	width: 100%;
	border-radius: var(--lh-radius-md);
}
.lh-lesson__yt {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	background: #000;
}
.lh-lesson__yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.lh-lesson__dl {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
}
.lh-lesson__dl a {
	color: var(--lh-primary);
	text-decoration: none;
	font-weight: 600;
}
.lh-lesson__dl a:hover { color: var(--lh-secondary); }

/* Teaching Lessons — class catalog grid. */
.lh-prose .lh-teaching {
	margin: 3em 0 2.5em;
}
.lh-prose .lh-teaching__head {
	text-align: center;
	max-width: 62ch;
	margin: 0 auto 2em;
}
.lh-prose .lh-teaching__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem);
	margin: 0.35em 0 0.5em;
	border: 0;
	padding: 0;
}
.lh-prose .lh-teaching__lede {
	color: var(--lh-ink);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 auto;
}
.lh-prose .lh-teaching__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 720px) {
	.lh-prose .lh-teaching__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.lh-prose .lh-teaching__grid--single { max-width: 720px; margin: 0 auto; }
@media (min-width: 720px) {
	.lh-prose .lh-teaching__grid--single { grid-template-columns: 1fr; }
}
.lh-prose .lh-teaching-card {
	background: var(--lh-cream);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 1.5rem 1.6rem 1.4rem;
	margin: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.lh-prose .lh-teaching-card:hover {
	border-color: var(--lh-secondary);
	box-shadow: var(--lh-shadow-md);
	transform: translateY(-2px);
}
.lh-prose .lh-teaching-card--feature {
	background: linear-gradient(180deg, var(--lh-cream) 0%, #fff 100%);
}
.lh-prose .lh-teaching-card__eyebrow {
	font-family: var(--lh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--lh-secondary);
	margin: 0 0 0.4em;
}
.lh-prose .lh-teaching-card__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: 1.3rem;
	line-height: 1.25;
	margin: 0 0 0.5em;
	border: 0;
	padding: 0;
}
.lh-prose .lh-teaching-card__title a {
	color: inherit;
	text-decoration: none;
}
.lh-prose .lh-teaching-card__title a:hover {
	color: var(--lh-secondary);
}
.lh-prose .lh-teaching-card__desc {
	color: var(--lh-ink);
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0 0 1em;
	flex: 1;
}
.lh-prose .lh-teaching-card__link {
	font-family: var(--lh-font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--lh-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: auto;
}
.lh-prose .lh-teaching-card__link:hover {
	color: var(--lh-secondary);
}
.lh-prose .lh-teaching__foot {
	text-align: center;
	margin: 1.5em 0 0;
}
.lh-prose .lh-teaching__foot a {
	font-family: var(--lh-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--lh-secondary);
	text-decoration: none;
}
.lh-prose .lh-teaching__foot a:hover {
	color: var(--lh-primary);
}

/* ============================================================
   Homepage cycle showcase — 4-up grid with hover overlay
   ============================================================ */
.lh-home-cycles { padding-top: clamp(56px, 4vw + 2rem, 88px); padding-bottom: clamp(40px, 3vw + 1.5rem, 64px); }
.lh-home-cycles__heading {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: clamp(1.65rem, 1.1rem + 1.4vw, 2.35rem);
	line-height: 1.2;
	margin: 0.4em 0 0.9em;
}
.lh-cycle-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 1vw + 0.5rem, 1.75rem);
}
@media (max-width: 980px) { .lh-cycle-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lh-cycle-cards { grid-template-columns: 1fr; } }

.lh-cycle-card { margin: 0; padding: 0; }
.lh-cycle-card__link {
	display: block;
	color: var(--lh-ink);
	text-decoration: none;
}

/* Media area holds the cover image; an overlay fades in on hover. */
.lh-cycle-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	background: var(--lh-cream);
	box-shadow: 0 6px 20px rgba(33, 37, 47, 0.10);
	transition: box-shadow 220ms ease, transform 220ms ease;
}
.lh-cycle-card__link:hover .lh-cycle-card__media,
.lh-cycle-card__link:focus-visible .lh-cycle-card__media {
	box-shadow: 0 14px 32px rgba(33, 37, 47, 0.18);
	transform: translateY(-2px);
}
.lh-cycle-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms ease;
}
.lh-cycle-card__link:hover .lh-cycle-card__img,
.lh-cycle-card__link:focus-visible .lh-cycle-card__img {
	transform: scale(1.03);
}
.lh-cycle-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(12, 38, 64, 0.55) 0%, rgba(12, 38, 64, 0.80) 100%);
	opacity: 0;
	transition: opacity 220ms ease;
	pointer-events: none;
}
.lh-cycle-card__link:hover .lh-cycle-card__overlay,
.lh-cycle-card__link:focus-visible .lh-cycle-card__overlay {
	opacity: 1;
}
.lh-cycle-card__hover-label {
	font-family: var(--lh-font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lh-white);
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
}

/* Caption below the media */
.lh-cycle-card__meta {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0 0.125rem;
}
.lh-cycle-card__eyebrow {
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lh-secondary);
}
.lh-cycle-card__title {
	font-family: var(--lh-font-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--lh-primary);
	line-height: 1.3;
}
.lh-cycle-card__sub {
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	color: var(--lh-muted);
	font-weight: 500;
	line-height: 1.45;
	margin-top: 0.1rem;
}

/* Reduced motion: no transform, no scale, instant overlay */
@media (prefers-reduced-motion: reduce) {
	.lh-cycle-card__link:hover .lh-cycle-card__media,
	.lh-cycle-card__link:focus-visible .lh-cycle-card__media { transform: none; }
	.lh-cycle-card__link:hover .lh-cycle-card__img,
	.lh-cycle-card__link:focus-visible .lh-cycle-card__img { transform: none; }
	.lh-cycle-card__overlay,
	.lh-cycle-card__img { transition: none; }
}

/* Homepage Who-We-Are intro band (between hero and Worship-With-Us). */
.lh-home-intro { padding-top: clamp(56px, 4vw + 2rem, 88px); padding-bottom: clamp(40px, 3vw + 1.5rem, 64px); }
.lh-home-intro__heading {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: clamp(1.65rem, 1.1rem + 1.4vw, 2.35rem);
	line-height: 1.2;
	margin: 0.4em 0 0.9em;
}
.lh-home-intro__lede {
	color: var(--lh-ink);
	max-width: 56ch;
	margin: 0 auto;
	font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.18rem);
	line-height: 1.65;
}

.lh-featured-story__title { margin: 0.25em 0 1rem; color: var(--lh-ink); font-size: clamp(28px, 1.5rem + 1.5vw, 48px); }
.lh-featured-story__body .lh-featured-story__eyebrow,
.lh-featured-story__body p.lh-eyebrow { color: var(--lh-secondary); }
.lh-featured-story__body p { color: var(--lh-ink); margin-bottom: 1.75rem; max-width: 55ch; line-height: 1.75; }
/* When the featured story sits inside a dark section, restore light text. */
.lh-section--dark .lh-featured-story__title,
.lh-section--primary .lh-featured-story__title { color: var(--lh-white); }
.lh-section--dark .lh-featured-story__body p,
.lh-section--primary .lh-featured-story__body p { color: rgba(255,255,255,0.85); }

/* ---------- Photo mosaic (Connect / candid grid) ---------- */

/* ---------- Social row (Connect section) ---------- */

.lh-connect__subline {
	color: var(--lh-muted);
	font-size: 1rem;
	margin: 0.5rem auto 1.5rem;
	max-width: 50ch;
}
.lh-social-row {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}
.lh-social-row li { margin: 0; }
.lh-social-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--lh-cream);
	color: var(--lh-primary);
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
	border: 1px solid transparent;
}
.lh-social-row a:hover,
.lh-social-row a:focus-visible {
	background: var(--lh-primary);
	color: var(--lh-white);
	transform: translateY(-2px);
}

.lh-mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.lh-mosaic__tile {
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	position: relative;
	background: var(--lh-cream);
	aspect-ratio: 4 / 3;
}
.lh-mosaic__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms ease;
}
.lh-mosaic__tile:hover img { transform: scale(1.04); }

/* Per-image crop hints so faces / subjects stay in frame after cover-cropping
 * to the uniform 4:3 tile shape. */
.lh-mosaic__tile img[src$="singing1.jpg"]     { object-position: center 35%; }
.lh-mosaic__tile img[src$="fellowship1.jpg"]  { object-position: center top; }
.lh-mosaic__tile img[src$="member.jpg"]       { object-position: center top; }
.lh-mosaic__tile img[src$="singing9.jpg"]     { object-position: center top; }
.lh-mosaic__tile img[src$="piano2.jpg"]       { object-position: 35% center; }

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

/* ---------- Stay informed (newsletter band) ---------- */

.lh-newsletter {
	text-align: center;
	padding-block: clamp(3rem, 4vw + 2rem, 5rem);
	background: var(--lh-white);
}
.lh-newsletter h2 { margin: 0 0 0.5rem; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.lh-newsletter p   { color: var(--lh-muted); margin: 0 0 1.5rem; }

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

.lh-footer { background: var(--lh-primary-soft); color: var(--lh-ink); padding-top: 0; }
.lh-footer__top {
	max-width: var(--lh-container-max);
	margin: 0 auto;
	padding: clamp(3rem, 4vw + 2rem, 5rem) 1.5rem clamp(2rem, 3vw + 1rem, 3rem);
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
	gap: clamp(2rem, 3vw + 1rem, 3.5rem);
}
@media (max-width: 1100px) { .lh-footer__top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px)  { .lh-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .lh-footer__top { grid-template-columns: 1fr; } }

.lh-footer__brand img { max-height: 44px; width: auto; margin-bottom: 1rem; opacity: 0.95; }
.lh-footer__logo { display: inline-block; line-height: 0; }
.lh-footer__heading {
	font-family: var(--lh-font-sans);
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--lh-primary); margin: 0 0 1.25rem;
}
.lh-footer__col ul { list-style: none; padding: 0; margin: 0; }
.lh-footer__col li { padding: 0.35rem 0; font-size: 0.875rem; }
.lh-footer__col a { color: var(--lh-muted); }
.lh-footer__col a:hover { color: var(--lh-primary); }

.lh-footer .lh-address  { font-size: 0.875rem; color: var(--lh-muted); margin-bottom: 0.5rem; line-height: 1.6; }
.lh-footer .lh-address__directions { color: var(--lh-primary); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.lh-footer__contact { font-size: 0.875rem; line-height: 1.7; }
.lh-footer__contact a { color: var(--lh-muted); }
.lh-footer__bottom {
	border-top: 1px solid rgba(19,59,92,0.10);
	padding: 1.25rem 1.5rem;
	text-align: center;
}
.lh-footer__bottom p { margin: 0; font-size: 0.75rem; color: var(--lh-muted); }

/* ---------- Search ---------- */

.lh-search-form { display: flex; gap: 0.5rem; max-width: 480px; margin: 1.5rem auto; }
.lh-search-form input[type="search"] {
	flex: 1;
	padding: 12px 20px;
	font: inherit;
	font-size: 14px;
	border: 1px solid var(--lh-divider);
	background: var(--lh-white);
	border-radius: var(--lh-radius-pill);
}
.lh-search-form button {
	padding: 0.75rem 1.5rem;
	background: var(--lh-primary);
	color: var(--lh-white);
	border: 1.5px solid var(--lh-primary);
	border-radius: var(--lh-radius-pill);
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.75rem;
}
.lh-search-form button:hover { background: var(--lh-primary-dark); border-color: var(--lh-primary-dark); }

.lh-search-results { display: flex; flex-direction: column; gap: 2rem; }
.lh-search-result__type { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lh-secondary); margin: 0 0 0.25rem; }

/* ---------- Generic card grid (used by index) ---------- */

.lh-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
}
.lh-card { background: var(--lh-white); box-shadow: var(--lh-shadow-sm); border-radius: var(--lh-radius-md); overflow: hidden; transition: box-shadow 200ms ease, transform 200ms ease; }
.lh-card:hover { box-shadow: var(--lh-shadow-md); transform: translateY(-2px); }
.lh-card__media img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.lh-card__body { padding: 1.25rem 1.5rem 1.75rem; }
.lh-card__meta { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lh-secondary); margin: 0 0 0.5rem; }
.lh-card__title { font-size: 1.25rem; margin: 0 0 0.5rem; line-height: 1.25; }
.lh-card__title a { color: var(--lh-ink); }
.lh-card__title a:hover { color: var(--lh-primary); }

/* ---------- Prose ---------- */

.lh-prose {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
/* Reading-flow children are constrained to a comfortable measure,
 * but special blocks (feature splits, book cards, history-photos) can use
 * the full container width.  See overrides below. */
.lh-prose > p,
.lh-prose > ul,
.lh-prose > ol,
.lh-prose > h1,
.lh-prose > h2,
.lh-prose > h3,
.lh-prose > h4,
.lh-prose > h5,
.lh-prose > h6,
.lh-prose > blockquote,
.lh-prose > .lh-eyebrow,
.lh-prose > .lh-pullquote,
.lh-prose > .lh-mission-statement,
.lh-prose > .wp-block-separator,
.lh-prose > .wp-block-buttons,
.lh-prose > .wp-block-image:not(.lh-inline-figure) {
	max-width: var(--lh-container-prose);
	margin-left: auto;
	margin-right: auto;
}
/* Paragraphs nested inside feature-splits, book-cards etc. fill their own
 * column rather than being capped to the prose reading width. */
.lh-prose .lh-feature-split__body p,
.lh-prose .lh-book-card p,
.lh-prose blockquote p { max-width: none; }
/* Special full-width blocks override the constraint (feature-splits + history photos
 * extend to the full container; book card stays closer to reading width). */
.lh-prose > .lh-feature-split,
.lh-prose > .lh-history-photos {
	max-width: 100%;
	width: 100%;
}
.lh-prose > .lh-book-card {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* Center eyebrows (and their immediately-following heading) in prose flow */
.lh-prose > .lh-eyebrow,
.lh-prose .lh-feature-split__body > .lh-eyebrow {
	display: block;
	text-align: center;
}
.lh-prose > .lh-eyebrow + h2,
.lh-prose > .lh-eyebrow + h3,
.lh-prose .lh-feature-split__body > .lh-eyebrow + h2,
.lh-prose .lh-feature-split__body > .lh-eyebrow + h3 {
	text-align: center;
}
.lh-prose h2 { margin-top: 2em; }
.lh-prose h3 { margin-top: 1.6em; }
.lh-prose img,
.lh-prose figure { border-radius: var(--lh-radius-md); margin: 2rem auto; }
.lh-prose blockquote {
	border-left: 3px solid var(--lh-secondary);
	padding: 0.5em 0 0.5em 1.5em;
	margin: 2em auto;
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--lh-ink);
}
.lh-prose blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-style: normal;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--lh-secondary);
}
.lh-prose ul, .lh-prose ol { padding-left: 1.5em; margin: 1em auto 1.5em; }
.lh-prose li { margin-bottom: 0.5em; max-width: 62ch; }

/* Drop cap — first letter of the first paragraph on every prose page.
 * Two-line height, comfortable trailing gap. Top-aligned with line 1 via
 * initial-letter (modern); float fallback for older browsers. */
.lh-prose > p:first-child:not(.lh-eyebrow):not(.lh-pullquote)::first-letter {
	font-family: var(--lh-font-serif);
	float: left;
	font-size: 2.6em;
	font-weight: 500;
	line-height: 0.82;
	margin: 0.04em 0.22em 0 0;
	padding: 0;
	color: var(--lh-secondary);
}
@supports (-webkit-initial-letter: 2) or (initial-letter: 2) {
	.lh-prose > p:first-child:not(.lh-eyebrow):not(.lh-pullquote)::first-letter {
		float: none;
		-webkit-initial-letter: 2;
		initial-letter: 2;
		font-size: 1em;
		line-height: 1;
		margin: 0 0.22em 0 0;
		padding: 0;
	}
}
@media (max-width: 640px) {
	.lh-prose > p:first-child:not(.lh-eyebrow):not(.lh-pullquote)::first-letter {
		font-size: 2.2em;
		margin-right: 0.2em;
	}
}

/* Eyebrow inside prose — sits tight against the h2 below it. */
.lh-prose > .lh-eyebrow,
.lh-prose .lh-eyebrow {
	margin-top: 2.4em;
	margin-bottom: 0.4em;
	color: var(--lh-secondary);
}
.lh-prose > .lh-eyebrow + h2,
.lh-prose .lh-eyebrow + h2,
.lh-prose > .lh-eyebrow + h3,
.lh-prose .lh-eyebrow + h3 {
	margin-top: 0.1em;
}
.lh-prose > p:first-child { margin-top: 0; }
.lh-prose > .lh-eyebrow:first-child { margin-top: 0; }

/* Mission-statement display blockquote (large italic, top of About LH). */
.lh-prose .lh-mission-statement,
.lh-prose blockquote.lh-mission-statement,
.lh-prose--doctrinal blockquote.lh-mission-statement {
	background: var(--lh-cream);
	border: 0;
	border-left: 5px solid var(--lh-secondary);
	border-radius: 0 var(--lh-radius-md) var(--lh-radius-md) 0;
	padding: 1.6em 1.85em 1.5em;
	margin: 0 0 2.5em;
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(1.2rem, 0.7rem + 1.3vw, 1.6rem);
	line-height: 1.45;
	text-align: left;
	color: var(--lh-primary);
	box-shadow: 0 1px 3px rgba(33,37,47,0.05);
}
.lh-prose .lh-mission-statement p { margin: 0; }
.lh-prose .lh-mission-statement cite { display: none; }

/* Feature split — Peachtree-style two-column band. Breaks out of the prose
 * column to fill the wider .lh-container. Substantial image side-by-side
 * with related text. Image is large; text inherits prose typography. */
.lh-prose .lh-feature-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5.5rem);
	align-items: center;
	margin: clamp(2.5rem, 4vw, 3.5rem) auto;
	width: 100%;
	max-width: 100%;
}
/* When two feature-splits sit back-to-back, collapse the shared margin
 * so they don't double-stack and create a visual gap.
 * Uses :has() to also reduce the preceding split's margin-bottom (CSS margins
 * collapse for adjacent block elements; the larger margin would otherwise win). */
.lh-prose .lh-feature-split:has(+ .lh-feature-split) {
	margin-bottom: clamp(1rem, 1.75vw, 1.5rem);
}
.lh-prose .lh-feature-split + .lh-feature-split {
	margin-top: 0;
}
/* Image-right variant flips column order via grid-column assignment */
.lh-prose .lh-feature-split--right .lh-feature-split__media { grid-column: 2; grid-row: 1; }
.lh-prose .lh-feature-split--right .lh-feature-split__body  { grid-column: 1; grid-row: 1; }

.lh-prose .lh-feature-split__media {
	line-height: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
}
.lh-prose .lh-feature-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 14px;
	object-fit: cover;
	box-shadow: 0 4px 14px rgba(20, 20, 20, 0.06);
}

/* Text side — inherits prose typography so font sizes match the rest of
 * the page. Only the margins are reset (the split is a self-contained
 * visual block, not a continuation of paragraph flow). */
.lh-prose .lh-feature-split__body { padding: 0; }
.lh-prose .lh-feature-split__body > *:first-child { margin-top: 0; }
.lh-prose .lh-feature-split__body > *:last-child  { margin-bottom: 0; }
.lh-prose .lh-feature-split__body .lh-eyebrow {
	margin-top: 0;
	margin-bottom: 0.85em;
}
.lh-prose .lh-feature-split__body h2,
.lh-prose .lh-feature-split__body h3 {
	margin-top: 0;
	margin-bottom: 0.55em;
}
.lh-prose .lh-feature-split__body p {
	max-width: none;
}

/* Hide any captions on prose-figure descendants (we treat photos as decorative) */
.lh-prose .lh-inline-figure figcaption,
.lh-prose .lh-feature-split figcaption,
.lh-prose .lh-feature-split .wp-element-caption {
	display: none;
}

/* Default for any plain wp-block-image inside prose */
.lh-prose figure .wp-element-caption,
.lh-prose .wp-block-image figcaption {
	text-align: center;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--lh-text-muted, #5C5A55);
	margin: 0.85em auto 0;
	max-width: 56ch;
	line-height: 1.5;
}

/* Mobile: stack vertically, image on top */
@media (max-width: 760px) {
	.lh-prose .lh-feature-split,
	.lh-prose .lh-feature-split--right {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		width: 100%;
		left: 0;
		transform: none;
		margin: 2rem 0;
	}
	.lh-prose .lh-feature-split--right .lh-feature-split__media,
	.lh-prose .lh-feature-split--right .lh-feature-split__body {
		grid-column: 1;
	}
	.lh-prose .lh-feature-split--right .lh-feature-split__media { grid-row: 1; }
	.lh-prose .lh-feature-split--right .lh-feature-split__body  { grid-row: 2; }
}

/* Contact split — two-column layout for form + contact info on Contact page.
 * Same proportions as feature-split, but both columns are text-based. */
.lh-prose .lh-contact-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5.5rem);
	align-items: start;
	margin: clamp(3rem, 5vw, 4.5rem) auto;
	width: 100%;
	max-width: 100%;
}
.lh-prose > .lh-contact-split {
	max-width: 100%;
	width: 100%;
}
.lh-prose .lh-contact-split__form > *:first-child,
.lh-prose .lh-contact-split__info > *:first-child { margin-top: 0; }
.lh-prose .lh-contact-split__form .lh-eyebrow,
.lh-prose .lh-contact-split__info .lh-eyebrow {
	margin-top: 0;
	margin-bottom: 0.85em;
}
.lh-prose .lh-contact-split__form h2,
.lh-prose .lh-contact-split__info h2 {
	margin-top: 0;
	margin-bottom: 0.7em;
}

/* Contact info list — clean labeled blocks instead of a bullet list */
.lh-prose .lh-contact-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: none;
}
.lh-prose .lh-contact-info-list li {
	padding: 1.15em 0;
	margin: 0;
	border-bottom: 1px solid var(--lh-divider, #D9D2C2);
	font-size: 1rem;
	line-height: 1.55;
}
.lh-prose .lh-contact-info-list li:first-child { padding-top: 0; }
.lh-prose .lh-contact-info-list li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
.lh-prose .lh-contact-info-list li strong {
	display: block;
	font-family: var(--lh-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	margin-bottom: 0.35em;
}
.lh-prose .lh-contact-info-list li em {
	display: inline-block;
	margin-top: 0.4em;
	font-size: 0.9375rem;
	color: var(--lh-text-muted, #5C5A55);
}

/* Mobile: stack vertically */
@media (max-width: 760px) {
	.lh-prose .lh-contact-split {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* Side-by-side photo block (used on History page for old church building shots). */
.lh-prose .lh-history-photos,
.lh-prose .wp-block-columns.lh-history-photos {
	margin: clamp(2rem, 4vw, 3rem) 0 0.5rem;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.lh-prose .lh-history-photos .wp-block-column figure { margin: 0; border-radius: var(--lh-radius-md, 6px); overflow: hidden; }
.lh-prose .lh-history-photos .wp-block-column img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	box-shadow: 0 6px 18px rgba(20, 20, 20, 0.12), 0 2px 4px rgba(20, 20, 20, 0.06);
	border-radius: var(--lh-radius-md, 6px);
}

/* Caption paragraph for image blocks in prose. */
.lh-prose .lh-image-caption {
	text-align: center;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--lh-text-muted, #5C5A55);
	margin: 0.75em 0 2em;
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* Book card — recommended-reading block with cover, meta, and buy link. */
.lh-book-card {
	margin: clamp(2.25rem, 4vw, 3.25rem) 0;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: #ffffff;
	border: 1px solid var(--lh-divider, #D9D2C2);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(20, 20, 20, 0.04), 0 1px 3px rgba(20, 20, 20, 0.03);
	max-width: 100%;
}
.lh-book-card__row {
	display: grid;
	grid-template-columns: minmax(130px, 165px) 1fr;
	gap: clamp(1.5rem, 2.5vw, 2.25rem);
	align-items: center;
}
.lh-book-card__cover {
	display: block;
	line-height: 0;
	box-shadow: 0 8px 22px rgba(20, 20, 20, 0.2), 0 2px 6px rgba(20, 20, 20, 0.1);
	border-radius: 2px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	align-self: start;
}
.lh-book-card__cover:hover,
.lh-book-card__cover:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(20, 20, 20, 0.26), 0 3px 8px rgba(20, 20, 20, 0.13);
	outline: none;
}
.lh-book-card__cover img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }

/* Reset prose paragraph styling inside the card so it doesn't inherit drop-cap, link color, etc. */
.lh-prose .lh-book-card p { margin: 0; max-width: none; }
.lh-prose .lh-book-card .lh-book-card__eyebrow {
	font-family: var(--lh-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	margin: 0 0 1.1em;
}
.lh-prose .lh-book-card .lh-book-card__title {
	font-family: var(--lh-font-serif);
	font-size: clamp(1.35rem, 0.7rem + 1.2vw, 1.7rem);
	font-weight: 500;
	line-height: 1.18;
	margin: 0 0 0.2em;
	color: var(--lh-text-primary, #1C1C1A);
}
.lh-prose .lh-book-card .lh-book-card__meta {
	font-size: 0.875rem;
	color: var(--lh-text-muted, #5C5A55);
	margin: 0 0 0.9em;
	letter-spacing: 0.01em;
}
.lh-prose .lh-book-card .lh-book-card__desc {
	margin: 0 0 1.25em;
	max-width: 52ch;
	font-size: 0.975rem;
	line-height: 1.55;
	color: var(--lh-text-primary, #1C1C1A);
}
.lh-prose .lh-book-card .lh-book-card__cta { margin: 0; }

/* Buy button — override the prose-link red rule so it renders as a clean primary button. */
.lh-prose .lh-book-card .lh-book-card__btn,
.lh-prose .lh-book-card a.lh-book-card__btn {
	display: inline-block;
	background: var(--lh-primary, #1F3460);
	color: #ffffff !important;
	font-family: var(--lh-font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--lh-primary, #1F3460);
	border-radius: 999px;
	text-decoration: none !important;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.lh-prose .lh-book-card .lh-book-card__btn:hover,
.lh-prose .lh-book-card a.lh-book-card__btn:hover {
	background: var(--lh-primary-dark, #142447);
	border-color: var(--lh-primary-dark, #142447);
	color: #ffffff !important;
}
.lh-prose .lh-book-card .lh-book-card__btn span { margin-left: 0.4em; transition: transform 180ms ease; display: inline-block; }
.lh-prose .lh-book-card .lh-book-card__btn:hover span { transform: translateX(3px); }

@media (max-width: 560px) {
	.lh-book-card { padding: 1.5rem; }
	.lh-book-card__row {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: left;
		align-items: start;
	}
	.lh-book-card__cover { max-width: 150px; }
}

/* Pull-quote (centered italic accent line). */
.lh-prose .lh-pullquote {
	text-align: center;
	font-family: var(--lh-font-serif);
	font-size: clamp(1.25rem, 0.6rem + 1.4vw, 1.65rem);
	color: var(--lh-secondary);
	margin: 2em 0 1em;
}

/* 9-element worship-order list — a soft grid on wide screens. */
.lh-prose ol.lh-worship-order {
	list-style: none;
	padding-left: 0;
	margin: 1.5em 0 2em;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem 1.5rem;
	counter-reset: lh-wo;
}
.lh-prose ol.lh-worship-order li {
	position: relative;
	padding: 0.85em 1em 0.85em 3.2em;
	border-radius: var(--lh-radius-md, 6px);
	background: var(--lh-bg-alt, #f3ece1);
	max-width: none;
	margin-bottom: 0;
	font-size: 0.98em;
	line-height: 1.45;
	counter-increment: lh-wo;
}
.lh-prose ol.lh-worship-order li::before {
	content: counter(lh-wo);
	position: absolute;
	left: 0.85em;
	top: 0.75em;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--lh-secondary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lh-font-serif);
	font-weight: 600;
	font-size: 0.9em;
}
@media (min-width: 720px) {
	.lh-prose ol.lh-worship-order { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.lh-prose ol.lh-worship-order { grid-template-columns: 1fr 1fr 1fr; }
}

/* CTA buttons block at end of prose pages. */
.lh-prose .lh-prose-ctas,
.lh-prose .wp-block-buttons.lh-prose-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	margin: 2.5em auto 0.5em;
}
/* Neutralize the wrapper — only the inner __link should render as a pill. */
.lh-prose .lh-prose-ctas .wp-block-button,
.lh-prose .lh-prose-ctas .lh-button,
.lh-prose .lh-prose-ctas .wp-block-button.lh-button,
.lh-prose .lh-prose-ctas .wp-block-button.lh-button.lh-button--primary,
.lh-prose .lh-prose-ctas .wp-block-button.lh-button.lh-button--ghost {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: inline-block !important;
	font: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: normal !important;
	white-space: normal !important;
	box-shadow: none !important;
	transition: none !important;
}
.lh-prose .lh-prose-ctas .wp-block-button:hover,
.lh-prose .lh-prose-ctas .lh-button:hover {
	background: transparent !important;
	border: 0 !important;
	transform: none !important;
}
.lh-prose .wp-block-button,
.lh-prose .wp-block-button .wp-block-button__link {
	margin: 0;
}
.lh-prose .wp-block-button .wp-block-button__link {
	display: inline-block;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	font-family: var(--lh-font-sans);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.lh-prose .wp-block-button.lh-button--primary .wp-block-button__link {
	background: var(--lh-primary);
	color: #fff;
	border: 2px solid var(--lh-primary);
}
.lh-prose .wp-block-button.lh-button--primary .wp-block-button__link:hover {
	background: var(--lh-primary-dark, var(--lh-secondary));
	border-color: var(--lh-primary-dark, var(--lh-secondary));
}
.lh-prose .wp-block-button.lh-button--ghost .wp-block-button__link {
	background: transparent;
	color: var(--lh-primary);
	border: 2px solid var(--lh-primary);
}
.lh-prose .wp-block-button.lh-button--ghost .wp-block-button__link:hover {
	background: var(--lh-primary);
	color: #fff;
}

/* ---------- /plan-a-visit/ (warm, welcoming) ---------- */

.lh-pav-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(680px, 95vh, 980px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lh-white);
	overflow: hidden;
	padding: clamp(7rem, 6vw + 4rem, 9rem) 0 clamp(4rem, 4vw + 2rem, 6rem);
	text-align: center;
}

/* Paper variant — used when no hero background image is present.
   Cream/parchment field with dark serif type, shorter height (no need to fill
   a screen with empty cream), buttons in the brand-primary style instead of
   ghost-light. Used by interior pages until a bespoke hero image is uploaded. */
.lh-pav-hero--paper {
	background:
		radial-gradient(ellipse at top, rgba(176,135,31,0.10) 0%, transparent 60%),
		linear-gradient(180deg, var(--lh-cream) 0%, #FCFAF4 100%);
	color: var(--lh-ink);
	min-height: 0;
	padding: clamp(5rem, 4vw + 3rem, 7rem) 0 clamp(3rem, 3vw + 1.5rem, 4.5rem);
	overflow: visible;
}
.lh-pav-hero--paper .lh-pav-hero__heading {
	color: var(--lh-ink);
	font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}
.lh-pav-hero--paper .lh-pav-hero__sub {
	color: var(--lh-muted);
}
.lh-pav-hero--paper .lh-eyebrow,
.lh-pav-hero--paper .lh-eyebrow--accent {
	color: var(--lh-secondary);
}
.lh-pav-hero--paper .lh-hero-trust { color: var(--lh-muted); }
.lh-pav-hero--paper .lh-hero-trust li + li::before { color: var(--lh-secondary); }
.lh-pav-hero__bg { position: absolute; inset: 0 0 -25% 0; z-index: -2; will-change: transform; }
.lh-pav-hero__bg img {
	width: 100%; height: 100%; object-fit: cover; object-position: top center;
	filter: grayscale(0.55) brightness(0.7) contrast(1.05);
}
.lh-pav-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(110, 32, 36, 0.20) 0%, rgba(110, 32, 36, 0) 60%),
		linear-gradient(180deg, rgba(12,38,64,0.55) 0%, rgba(12,38,64,0.85) 100%);
}
.lh-pav-hero__inner { max-width: 820px; padding: 0 max(1.5rem, env(safe-area-inset-left)); position: relative; z-index: 1; }
.lh-pav-hero__heading {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--lh-white);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0.75rem 0 1.25rem;
}
.lh-pav-hero__sub {
	color: rgba(255,255,255,0.92);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	max-width: 48ch;
	margin: 0 auto 2rem;
	line-height: 1.5;
}
.lh-pav-hero__actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0;
}

/* Welcome intro */
.lh-pav-welcome__heading {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	margin: 0.25rem 0 1.5rem;
	line-height: 1.15;
}

/* Service times grid */
.lh-pav-times__head { margin-bottom: clamp(2rem, 2vw + 1rem, 3rem); }
.lh-pav-times__heading { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: 0.25rem 0 0; }
.lh-pav-times__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 2vw + 1rem, 3.5rem);
	max-width: 880px;
	margin: 0 auto;
}
@media (max-width: 720px) { .lh-pav-times__grid { grid-template-columns: 1fr; } }
.lh-pav-times__col {
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	padding: clamp(1.75rem, 1.5vw + 1rem, 2.5rem);
	box-shadow: var(--lh-shadow-sm);
}
.lh-pav-times__day {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
	color: var(--lh-accent);
	font-weight: 400;
	margin: 0 0 1rem;
}
.lh-pav-times__col dl { margin: 0; }
.lh-pav-times__col dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(33,37,47,0.1);
	gap: 1rem;
}
.lh-pav-times__col dl > div:last-child { border-bottom: 0; }
.lh-pav-times__col dl dt { font-weight: 700; color: var(--lh-ink); margin: 0; }
.lh-pav-times__col dl dd { margin: 0; color: var(--lh-muted); text-align: right; }
.lh-pav-times__note { font-size: 0.875rem; color: var(--lh-muted); font-style: italic; margin: 1.25rem 0 0; line-height: 1.55; }

/* What to Expect — service order */
.lh-pav-expect__heading {
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
	font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.75rem);
	margin: 0.4em 0 0.7em;
	line-height: 1.15;
}
.lh-pav-expect__order {
	list-style: none;
	counter-reset: lh-pav;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.lh-pav-expect__order li {
	counter-increment: lh-pav;
	position: relative;
	padding: 1.1em 1.25em 1.1em 4em;
	background: var(--lh-cream);
	border-radius: var(--lh-radius-md);
	border: 1px solid var(--lh-divider);
}
.lh-pav-expect__order li::before {
	content: counter(lh-pav);
	position: absolute;
	left: 1.05em;
	top: 1em;
	width: 1.9em;
	height: 1.9em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--lh-secondary);
	color: #fff;
	font-family: var(--lh-font-serif);
	font-size: 1.05rem;
	font-weight: 600;
}
.lh-pav-expect__step {
	font-family: var(--lh-font-serif);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--lh-ink);
	margin: 0 0 0.2em;
	line-height: 1.25;
}
.lh-pav-expect__desc {
	color: var(--lh-ink);
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0;
}
.lh-pav-expect__more {
	font-family: var(--lh-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--lh-secondary);
	text-decoration: none;
}
.lh-pav-expect__more:hover { color: var(--lh-primary); }

/* FAQ */
.lh-pav-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 2vw + 1rem, 3rem);
	max-width: 1040px;
	margin: 0 auto;
}
@media (max-width: 760px) { .lh-pav-faq { grid-template-columns: 1fr; } }
.lh-pav-faq__item {
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	padding: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
	box-shadow: var(--lh-shadow-sm);
}
.lh-pav-faq__q {
	font-family: var(--lh-font-serif);
	font-size: 1.375rem;
	margin: 0 0 0.75rem;
	line-height: 1.25;
	color: var(--lh-primary);
}
.lh-pav-faq__a { margin: 0; color: var(--lh-muted); line-height: 1.65; font-size: 0.9375rem; }

/* Directions */
.lh-pav-directions__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 2vw + 1rem, 4rem);
	align-items: center;
}
@media (max-width: 880px) { .lh-pav-directions__grid { grid-template-columns: 1fr; } }
.lh-pav-directions__heading {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	margin: 0.25rem 0 1.5rem;
}
.lh-pav-directions__addr {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--lh-ink);
	margin: 0 0 1.5rem;
}
.lh-pav-directions__notes { color: var(--lh-muted); line-height: 1.65; margin: 0 0 1rem; }
.lh-pav-directions__notes strong { color: var(--lh-ink); }
.lh-pav-directions__actions {
	display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0 0;
}
.lh-pav-directions__map {
	aspect-ratio: 4 / 3;
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	box-shadow: var(--lh-shadow-md);
}
.lh-pav-directions__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Final CTA */
.lh-pav-cta__heading {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--lh-white);
	font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
	margin: 0.5rem 0 1rem;
}
.lh-pav-cta__lede {
	color: rgba(255,255,255,0.85);
	font-size: 1.0625rem;
	max-width: 50ch;
	margin: 0 auto 2rem;
}
.lh-pav-cta__actions {
	display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 0;
}

/* ---------- "Our Services are Simple" editorial section ---------- */

.lh-worship-elements { padding-block: clamp(56px, 3rem + 4vw, 96px); }
.lh-worship-elements__title {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.005em;
	margin: 0 0 1.25rem;
	color: var(--lh-ink);
}
.lh-worship-elements__lede {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
	color: var(--lh-muted);
	max-width: 60ch;
	margin: 0 auto clamp(2.5rem, 2vw + 1.5rem, 4rem);
}
.lh-worship-elements__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(2rem, 2vw + 1rem, 3rem);
}
@media (min-width: 900px) {
	.lh-worship-elements__grid { grid-template-columns: repeat(4, 1fr); }
}
.lh-worship-elements__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
	padding: 0 0.5rem;
	position: relative;
}
@media (min-width: 900px) {
	.lh-worship-elements__item:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 12%;
		right: calc(clamp(2rem, 2vw + 1rem, 3rem) / -2);
		bottom: 12%;
		width: 1px;
		background: var(--lh-divider);
	}
}
.lh-worship-elements__decor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	line-height: 1;
}
.lh-worship-elements__decor img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.lh-worship-elements__text {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.55;
	color: var(--lh-ink);
	max-width: 24ch;
	margin: 0;
}
.lh-worship-elements__text strong {
	color: var(--lh-primary);
	font-weight: 600;
	font-style: italic;
}
.lh-worship-elements__ref {
	display: block;
	margin-top: 0.5rem;
	font-style: italic;
	font-size: 0.875rem;
	color: var(--lh-muted);
}

/* ---------- /live/ page (cinematic) ---------- */

.lh-live-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(680px, 95vh, 980px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lh-white);
	overflow: hidden;
	padding: clamp(7rem, 6vw + 4rem, 9rem) 0 clamp(4rem, 4vw + 2rem, 6rem);
}
.lh-live-hero__bg { position: absolute; inset: 0 0 -25% 0; z-index: -2; will-change: transform; }
.lh-live-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(0.75) brightness(0.5); }
.lh-live-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(120% 70% at 20% 20%, rgba(110, 32, 36, 0.32) 0%, rgba(110, 32, 36, 0) 60%),
		linear-gradient(180deg, rgba(12,38,64,0.78) 0%, rgba(0,0,0,0.92) 100%);
}
.lh-live-hero__inner { position: relative; z-index: 1; }

.lh-live-hero__head {
	max-width: 720px;
	margin: 0 auto clamp(2rem, 2vw + 1rem, 3rem);
	text-align: center;
}
.lh-live-hero__heading {
	font-family: var(--lh-font-serif);
	color: var(--lh-white);
	font-size: clamp(2.5rem, 1.75rem + 3.5vw, 5.5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0.75rem 0 0.5rem;
	font-weight: 400;
}
.lh-live-hero__sub {
	color: rgba(255,255,255,0.88);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
	margin: 0;
}
.lh-live-hero__sub strong { color: var(--lh-white); font-weight: 600; }
.lh-live-hero__sub-label {
	display: inline-block;
	font-family: var(--lh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,0.7);
	margin-bottom: 0.4rem;
}
.lh-live-hero__actions {
	margin: 2rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
}
.lh-live-hero__head--off { padding-bottom: 1rem; }
.lh-live-hero--off .lh-live-hero__overlay { background: linear-gradient(180deg, rgba(15,28,52,0.72), rgba(15,28,52,0.85)); }

/* Status badge */
.lh-live-badge {
	display: inline-flex; align-items: center; gap: 0.55rem;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	border: 1.5px solid rgba(255,255,255,0.35);
}
.lh-live-badge--on {
	background: rgba(110, 32, 36, 0.85);
	border-color: rgba(255, 60, 60, 0.6);
	color: #fff;
}
.lh-live-badge--off {
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.78);
}
.lh-live-badge__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #ff3333;
	box-shadow: 0 0 0 0 rgba(255,51,51,0.6);
	animation: lh-live-pulse 1.6s infinite;
}
@keyframes lh-live-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(255,51,51,0.7); }
	70%  { box-shadow: 0 0 0 12px rgba(255,51,51,0);  }
	100% { box-shadow: 0 0 0 0   rgba(255,51,51,0);  }
}

/* Player frame */
.lh-live-player {
	max-width: 1100px;
	margin: 0 auto;
}
.lh-live-player__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	background: #000;
	box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.lh-live-player__frame iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.lh-live-player__actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

/* Meta strip — service times + latest sermon card */
.lh-live-meta {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 3vw + 1rem, 4rem);
	align-items: start;
}
@media (max-width: 880px) { .lh-live-meta { grid-template-columns: 1fr; } }

.lh-live-times__title {
	font-family: var(--lh-font-serif);
	font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
	font-weight: 500;
	margin: 0.25rem 0 1.5rem;
	line-height: 1.15;
}
.lh-live-times__list { margin: 0; }
.lh-live-times__row {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(33,37,47,0.10);
}
.lh-live-times__row:first-child { padding-top: 0; }
.lh-live-times__row dt { font-weight: 700; color: var(--lh-ink); margin: 0; }
.lh-live-times__row dd { margin: 0; color: var(--lh-muted); text-align: right; }
.lh-live-times__note { display: block; font-size: 0.75rem; color: var(--lh-muted); font-style: italic; margin-top: 0.15rem; }
.lh-live-times__tz { font-size: 0.8125rem; color: var(--lh-muted); margin: 1.25rem 0 0; font-style: italic; }

.lh-live-latest {
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	padding: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
	box-shadow: var(--lh-shadow-sm);
}
.lh-live-latest__title {
	font-family: var(--lh-font-serif);
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0.25rem 0 1.25rem;
}
.lh-live-latest__card {
	display: flex; align-items: flex-start; gap: 1rem;
	color: var(--lh-ink);
	text-decoration: none;
}
.lh-live-latest__card:hover { color: var(--lh-primary); }
.lh-live-latest__media {
	flex: 0 0 110px;
	aspect-ratio: 1 / 1;
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	background: var(--lh-cream);
}
.lh-live-latest__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-live-latest__body { flex: 1; min-width: 0; }
.lh-live-latest__name {
	font-family: var(--lh-font-serif);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 0.35rem;
	color: var(--lh-ink);
	line-height: 1.25;
}
.lh-live-latest__meta { font-size: 0.875rem; color: var(--lh-muted); margin: 0 0 0.35rem; }
.lh-live-latest__scrip { font-style: italic; color: var(--lh-secondary); margin: 0 0 0.75rem; font-size: 0.875rem; }
.lh-live-latest__cta {
	display: inline-flex;
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--lh-primary);
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 1px;
}

/* ---------- About landing: section tile grid ---------- */

.lh-about-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 1.5vw + 1rem, 2rem);
}
@media (min-width: 920px) {
	.lh-about-tiles { grid-template-columns: repeat(3, 1fr); }
}

.lh-about-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
	padding: clamp(1.5rem, 1.5vw + 1rem, 2rem);
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	color: var(--lh-white);
	text-decoration: none;
	transition: transform 220ms ease, box-shadow 220ms ease;
	box-shadow: var(--lh-shadow-sm);
}
.lh-about-tile:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-md); color: var(--lh-white); }

.lh-about-tile__media {
	position: absolute; inset: 0; z-index: -2;
}
.lh-about-tile__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 480ms ease;
}
.lh-about-tile:hover .lh-about-tile__media img { transform: scale(1.05); }

.lh-about-tile__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(12,38,64,0.10) 0%, rgba(12,38,64,0.45) 50%, rgba(12,38,64,0.85) 100%);
}

.lh-about-tile__body { position: relative; z-index: 1; }
.lh-about-tile__title {
	font-family: var(--lh-font-serif);
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
	font-weight: 500;
	color: var(--lh-white);
	line-height: 1.2;
	margin: 0 0 0.5rem;
}
.lh-about-tile__desc {
	color: rgba(255,255,255,0.92);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0 0 1rem;
	max-width: 38ch;
}
.lh-about-tile__cta {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--lh-white);
}

/* When tile grids are rendered inside .lh-prose (e.g., Ministries / Resources hubs
 * built on the doctrinal template), the prose typography (h3 color, p color,
 * h3 margin-top, etc.) bleeds into the tile and wrecks the dark-photo legibility.
 * Re-assert tile color + tight spacing inside any prose context. */
.lh-prose .lh-about-tile,
.lh-prose--doctrinal .lh-about-tile { color: var(--lh-white); }
.lh-prose .lh-about-tile__title,
.lh-prose--doctrinal .lh-about-tile__title {
	color: var(--lh-white);
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
}
.lh-prose .lh-about-tile__desc,
.lh-prose--doctrinal .lh-about-tile__desc {
	color: rgba(255, 255, 255, 0.92);
	max-width: 38ch;
	font-size: 0.9375rem;
}
.lh-prose .lh-about-tile__cta,
.lh-prose--doctrinal .lh-about-tile__cta {
	color: var(--lh-white);
}
.lh-prose > .lh-about-tiles {
	max-width: 100%;
	width: 100%;
	margin: clamp(2rem, 3vw, 3rem) auto;
}
/* The global `.lh-prose img { margin: 2rem auto }` rule pushes the tile's
 * absolutely-positioned background photo down, exposing a strip above it.
 * Reset margins/radii inside the tile media so the photo fills the tile. */
.lh-prose .lh-about-tile__media,
.lh-prose .lh-about-tile__media img {
	margin: 0;
	border-radius: 0;
}

/* ---------- Photo grid: simple 3-up gallery (no overlay, no CTA) ---------- */
/* Used inside .lh-prose for breakout-width photo galleries
 * (e.g., Hall's Living Library "The Collection" section). */
.lh-prose > .lh-photo-grid {
	max-width: 100%;
	width: 100%;
}
.lh-prose .lh-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
	margin: clamp(2rem, 3.5vw, 3rem) auto;
}
@media (min-width: 760px) {
	.lh-prose .lh-photo-grid { grid-template-columns: repeat(3, 1fr); }
}
.lh-prose .lh-photo-grid__item {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	line-height: 0;
	aspect-ratio: 4 / 3;
	box-shadow: 0 4px 14px rgba(20, 20, 20, 0.06);
}
.lh-prose .lh-photo-grid__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 14px;
}

/* ---------- Our Leaders: elder card grid ---------- */

.lh-leaders__intro { margin-bottom: clamp(2rem, 3vw + 1rem, 3.5rem); }
.lh-leaders__intro h2 { margin-top: 0; font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); }

.lh-elder-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
@media (min-width: 920px) {
	.lh-elder-grid { grid-template-columns: repeat(4, 1fr); }
}

.lh-elder-card {
	background: var(--lh-white);
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--lh-shadow-sm);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.lh-elder-card:hover { transform: translateY(-3px); box-shadow: var(--lh-shadow-md); }
.lh-elder-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--lh-cream);
}
.lh-elder-card__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: center top;
	display: block;
	transition: transform 480ms ease;
}
.lh-elder-card:hover .lh-elder-card__media img { transform: scale(1.04); }
.lh-elder-card__body {
	padding: 1.5rem 1.5rem 1.75rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.lh-elder-card__name {
	font-family: var(--lh-font-serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.25rem;
	color: var(--lh-ink);
}
.lh-elder-card__role {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	margin: 0 0 1rem;
}
.lh-elder-card__blurb {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--lh-muted);
	margin: 0 0 1rem;
	flex: 1;
}
.lh-elder-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lh-primary);
	margin-top: auto;
	padding-bottom: 0.125rem;
	border-bottom: 1.5px solid currentColor;
	width: max-content;
}
.lh-elder-card__link:hover { color: var(--lh-secondary); }

/* Deacon list — two-column compact at desktop, centered as a block.
 * Higher-specificity selector ensures it wins against generic prose ul rules. */
.lh-prose .lh-deacon-list,
ul.lh-deacon-list {
	list-style: none;
	padding: 0;
	margin: 1.5em auto 2em;
	max-width: 720px;
	columns: 2;
	column-gap: 2.5rem;
}
.lh-deacon-list li {
	padding: 0.35rem 0;
	break-inside: avoid;
	font-weight: 600;
	color: var(--lh-ink);
	border-bottom: 1px solid rgba(33,37,47,0.07);
}
@media (max-width: 640px) { .lh-deacon-list { columns: 1; } }

/* ---------- Staff bio template ---------- */

.lh-staff-bio__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(2rem, 3vw + 1rem, 4rem);
	align-items: center;
}
@media (max-width: 880px) {
	.lh-staff-bio__hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.lh-staff-bio__portrait {
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	max-width: 480px;
	margin: 0 auto;
	background: var(--lh-cream);
}
.lh-staff-bio__portrait img {
	width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block;
}
.lh-staff-bio__name { margin: 0.25em 0 0.25em; }
.lh-staff-bio__role {
	font-family: var(--lh-font-sans);
	font-size: 1rem; font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--lh-secondary);
	margin: 0 0 1.5rem;
}
.lh-staff-bio__contact {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 0.5rem;
	font-size: 0.9375rem;
}
.lh-staff-bio__contact a { color: var(--lh-primary); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.lh-staff-bio__contact a:hover { color: var(--lh-secondary); }

/* ---------- Ministry template ---------- */

.lh-ministry__hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(360px, 50vh, 520px);
	display: flex;
	align-items: flex-end;
	color: var(--lh-white);
	overflow: hidden;
	padding: clamp(7rem, 6vw + 4rem, 9rem) 0 clamp(2.5rem, 2vw + 1.5rem, 4rem);
}
.lh-ministry__hero-media { position: absolute; inset: 0; z-index: -2; }
.lh-ministry__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.lh-ministry__hero-overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(12,38,64,0.35) 0%, rgba(0,0,0,0.6) 100%);
}
.lh-ministry__hero-inner { position: relative; z-index: 1; }
.lh-ministry__title {
	color: var(--lh-white);
	margin: 0;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}
.lh-ministry__body { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 3vw + 1rem, 4rem); }
.lh-ministry__body--has-aside { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 920px) { .lh-ministry__body--has-aside { grid-template-columns: 1fr; } }
.lh-ministry__aside {
	background: var(--lh-cream);
	border-radius: var(--lh-radius-md);
	padding: clamp(1.75rem, 2vw + 1rem, 2.5rem);
	align-self: start;
	position: sticky;
	top: 120px;
}
.lh-ministry__aside-row { padding: 1rem 0; border-bottom: 1px solid rgba(33,37,47,0.10); }
.lh-ministry__aside-row:first-child { padding-top: 0; }
.lh-ministry__aside-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lh-ministry__aside-row p { margin: 0; }

/* ---------- Doctrinal / page hero (dark centered) ---------- */

.lh-pagehero {
	position: relative;
	isolation: isolate;
	min-height: clamp(680px, 95vh, 980px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lh-white);
	overflow: hidden;
	padding: clamp(7rem, 6vw + 4rem, 9rem) 0 clamp(4rem, 4vw + 2rem, 6rem);
	text-align: center;
}
.lh-pagehero__media { position: absolute; inset: 0 0 -25% 0; z-index: -2; will-change: transform; }
.lh-pagehero__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: top center;
	/* Desaturate + cool the photo so it feels like a backdrop, not a focus image */
	filter: grayscale(0.7) brightness(0.65) contrast(1.05);
}
.lh-pagehero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(12, 38, 64, 0.7) 0%, rgba(33, 37, 47, 0.85) 100%);
}
.lh-pagehero__inner {
	max-width: 880px;
	width: 100%;
	padding: 0 max(1.5rem, env(safe-area-inset-left));
	position: relative;
	z-index: 1;
}
.lh-pagehero__heading {
	font-family: var(--lh-font-serif);
	color: var(--lh-white);
	font-size: clamp(2.5rem, 1.75rem + 3vw, 5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0.5rem 0 0;
	font-weight: 400;
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Featured media block (video / image below hero) ---------- */

.lh-feature-media {
	margin-top: clamp(-5rem, -4vw - 2rem, -3rem);
	margin-bottom: clamp(3rem, 3vw + 1.5rem, 5rem);
	position: relative;
	z-index: 2;
}
.lh-feature-media__frame {
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(33, 37, 47, 0.25);
	aspect-ratio: 16 / 9;
	background: var(--lh-ink);
}
.lh-feature-media__frame img,
.lh-feature-media__frame iframe,
.lh-feature-media__frame video {
	width: 100%; height: 100%; display: block; object-fit: cover;
}
.lh-feature-media__video { width: 100%; height: 100%; }
.lh-feature-media__video iframe { border: 0; }

/* ---------- Prose (doctrinal variant) ---------- */

.lh-prose--doctrinal { font-size: 1.0625rem; color: var(--lh-ink); }
.lh-prose--doctrinal p,
.lh-prose--doctrinal li { color: var(--lh-ink); line-height: 1.85; }
.lh-prose--doctrinal h2 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	margin-top: 0.1em;
	padding-bottom: 0;
	border-bottom: 0;
}
.lh-prose--doctrinal h3 { color: var(--lh-secondary); font-size: 1.375rem; }
.lh-prose--doctrinal blockquote {
	background: var(--lh-cream);
	border-left: 4px solid var(--lh-accent);
	padding: 1.5em 1.75em;
	font-size: 1.1875rem;
	margin: 2.5em auto;
	border-radius: 0 var(--lh-radius-md) var(--lh-radius-md) 0;
}

/* ---------- Event page template ---------- */

.lh-event-page__hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(420px, 56vh, 600px);
	display: flex;
	align-items: flex-end;
	color: var(--lh-white);
	overflow: hidden;
	padding: clamp(7rem, 6vw + 4rem, 9rem) 0 clamp(2.5rem, 2vw + 1.5rem, 4rem);
}
.lh-event-page__hero-media { position: absolute; inset: 0; z-index: -2; }
.lh-event-page__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.lh-event-page__hero-overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(12,38,64,0.35) 0%, rgba(0,0,0,0.65) 100%);
}
.lh-event-page__hero-inner { position: relative; z-index: 1; }
.lh-event-page__title {
	color: var(--lh-white);
	margin: 0 0 1rem;
	font-size: clamp(2.25rem, 1.5rem + 3.5vw, 5rem);
	max-width: 24ch;
}
.lh-event-page__facts {
	list-style: none; padding: 0; margin: 1.5rem 0 1.5rem;
	display: flex; flex-wrap: wrap; gap: clamp(1rem, 1.5vw + 0.5rem, 2rem) clamp(2rem, 2vw + 1rem, 3rem);
}
.lh-event-page__facts li {
	display: flex; flex-direction: column; gap: 0.25rem;
	color: var(--lh-white);
	font-size: 1.0625rem;
}
.lh-event-page__facts-label {
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em;
	text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.lh-event-page__cta { margin: 1.5rem 0 0; }

.lh-link-arrow {
	font-weight: 600;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	display: inline-block;
	letter-spacing: 0.03em;
}
.lh-link-arrow:hover { border-bottom-color: var(--lh-secondary); }

/* Address helper */
.lh-address { font-style: normal; line-height: 1.6; }
.lh-service-times { list-style: none; padding: 0; margin: 0; }
.lh-service-times li { padding: 0.25rem 0; }

/* =================================================================
   Plans page (page-plans.php)
   ================================================================= */

/* Hero — trust strip below CTAs */
.lh-hero-trust {
	list-style: none; padding: 0; margin: clamp(1.75rem, 2vw + 1rem, 2.5rem) auto 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 0.4rem 1.5rem;
	max-width: 60rem;
	font-family: var(--lh-font-sans);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}
.lh-hero-trust li { display: inline-flex; align-items: center; }
.lh-hero-trust li + li::before {
	content: "·";
	margin-right: 1.5rem;
	color: var(--lh-accent);
	font-weight: 700;
}

/* Site-wide wordmark fallback (used until a logo image is dropped in) */
.lh-site-wordmark {
	display: inline-flex; flex-direction: column; line-height: 1.05;
	text-decoration: none; color: var(--lh-ink);
}
.lh-site-wordmark__name {
	font-family: var(--lh-font-serif);
	font-size: 1.5rem; font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--lh-primary);
}
.lh-site-wordmark__tag {
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--lh-secondary);
	margin-top: 0.2rem;
}
.lh-footer .lh-site-wordmark__name { color: var(--lh-cream); }
.lh-footer .lh-site-wordmark__tag  { color: var(--lh-accent); }

/* Callout band (off-site checkout notice) */
.lh-plans-callout__inner {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.5rem, 2vw + 1rem, 2.5rem);
	border-left: 4px solid var(--lh-secondary);
	box-shadow: var(--lh-shadow-sm);
}
.lh-plans-callout__heading {
	font-family: var(--lh-font-serif);
	font-size: clamp(1.35rem, 1.05rem + 0.75vw, 1.75rem);
	line-height: 1.25;
	margin: 0 0 0.6em;
	color: var(--lh-ink);
}
.lh-plans-callout__body { margin: 0; line-height: var(--lh-lh-medium); }

/* Prose callout bubble — emphasized inline invitation (e.g. "Learn more…") */
.lh-prose-callout {
	background: var(--lh-cream);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.5rem, 2vw + 1rem, 2.25rem) clamp(1.5rem, 3vw + 1rem, 3rem);
	box-shadow: var(--lh-shadow-sm);
	text-align: center;
	margin: 1.5em auto 0.5em;
	max-width: 46rem;
}
.lh-prose-callout__text {
	margin: 0;
	font-family: var(--lh-font-serif);
	font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
	line-height: 1.45;
	color: var(--lh-ink);
}
.lh-prose-callout__text + .lh-prose-callout__text {
	margin-top: 1em;
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
	color: var(--lh-ink-soft, #4a4f5a);
}
.lh-prose-callout__text a {
	color: var(--lh-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.lh-prose-callout__text a:hover,
.lh-prose-callout__text a:focus-visible {
	color: var(--lh-secondary);
}

/* ----------------------------------------------------------------
   Pricing cards grid
   ---------------------------------------------------------------- */

.lh-plans-pricing__heading {
	font-size: var(--lh-fs-h3);
	margin: 0;
}

.lh-plans-grid {
	display: grid; gap: clamp(1.25rem, 2vw, 2rem);
	grid-template-columns: 1fr;
	align-items: stretch;
}
@media (min-width: 880px) {
	.lh-plans-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.lh-plan-card {
	position: relative;
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.75rem, 2vw + 0.5rem, 2.5rem) clamp(1.5rem, 1.5vw + 0.5rem, 2rem);
	display: flex; flex-direction: column;
	box-shadow: var(--lh-shadow-sm);
	transition: box-shadow 200ms ease, transform 200ms ease;
}
.lh-plan-card:hover { box-shadow: var(--lh-shadow-md); transform: translateY(-2px); }

.lh-plan-card--featured {
	background: linear-gradient(180deg, #FCF8EE 0%, var(--lh-white) 100%);
	border: 2px solid var(--lh-secondary);
	box-shadow: var(--lh-shadow-md);
}
@media (min-width: 880px) {
	.lh-plan-card--featured { transform: translateY(-12px); }
	.lh-plan-card--featured:hover { transform: translateY(-14px); }
}

.lh-plan-card__badge {
	position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
	background: var(--lh-secondary); color: var(--lh-white);
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: var(--lh-radius-pill);
	white-space: nowrap;
}

.lh-plan-card__header { margin-bottom: 1rem; }
.lh-plan-card__name {
	font-family: var(--lh-font-serif);
	font-size: clamp(1.75rem, 1.4rem + 0.8vw, 2.25rem);
	font-weight: 500;
	margin: 0 0 0.3rem;
	color: var(--lh-primary);
	line-height: 1.15;
}
.lh-plan-card__tagline {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--lh-muted);
	margin: 0;
	line-height: 1.4;
}

.lh-plan-card__price {
	display: flex; align-items: baseline; gap: 0.25rem;
	margin: 1.25rem 0;
	font-family: var(--lh-font-serif);
	color: var(--lh-ink);
}
.lh-plan-card__price-currency { font-size: 1.25rem; color: var(--lh-muted); }
.lh-plan-card__price-value    { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); font-weight: 500; line-height: 1; }
.lh-plan-card__price-unit     { font-family: var(--lh-font-sans); font-size: 0.875rem; color: var(--lh-muted); margin-left: 0.5rem; }

.lh-plan-card__best-for {
	font-size: 0.9375rem;
	color: var(--lh-muted);
	background: var(--lh-cream);
	padding: 0.875rem 1rem;
	border-radius: var(--lh-radius-md);
	border-left: 3px solid var(--lh-secondary);
	margin: 0 0 1.25rem;
	line-height: var(--lh-lh-medium);
}
.lh-plan-card__best-for strong { color: var(--lh-ink); }

.lh-plan-card__cta {
	width: 100%;
	margin: 0 0 1.5rem;
	justify-content: center;
}

.lh-plan-card__buy {
	margin: 1rem 0 0.75rem;
	padding: 1rem;
	background: var(--lh-cream, #F5F1E8);
	border-radius: var(--lh-radius, 8px);
}
.lh-plan-card__buy-label {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	color: var(--lh-ink);
	text-align: center;
}
.lh-plan-card__buy-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.lh-plan-card__buy-grid > a,
.lh-plan-card__buy-grid > span {
	width: 100%;
	justify-content: center;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-align: center;
}
.lh-plan-card__details-link {
	display: block;
	margin: 0.25rem 0 1.25rem;
	font-size: 0.85rem;
	text-align: center;
	color: var(--lh-muted);
}
.lh-plan-card__details-link:hover { color: var(--lh-primary); }

.lh-plan-card__features {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 0.65rem;
	font-size: 0.9375rem;
	line-height: var(--lh-lh-medium);
}
.lh-plan-card__features li {
	display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.625rem; align-items: start;
}
.lh-plan-card__check {
	color: var(--lh-primary);
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.lh-plan-card__partner {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--lh-divider);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.lh-plan-card__partner-logo {
	height: 24px;
	width: auto;
	display: block;
	opacity: 0.9;
}
.lh-plan-card__partner-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lh-muted);
	white-space: nowrap;
	transition: color 160ms ease;
}
.lh-plan-card__partner-link:hover { color: var(--lh-primary); }
.lh-plan-card__partner-link svg { flex-shrink: 0; }

.lh-partner-credit {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin: 1.5rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--lh-divider);
}
.lh-partner-credit__logo {
	height: 26px;
	width: auto;
	display: block;
	opacity: 0.9;
}
.lh-partner-credit__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--lh-font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lh-muted);
	white-space: nowrap;
	transition: color 160ms ease;
}
.lh-partner-credit__link:hover { color: var(--lh-primary); }
.lh-partner-credit__link svg { flex-shrink: 0; }

/* Partner card — centered featured card (e.g. "Meet Syllabird"). */
.lh-partner-card {
	max-width: 540px;
	margin: 0 auto;
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	box-shadow: var(--lh-shadow-md, 0 10px 30px rgba(33, 37, 47, 0.10));
	padding: 2.75rem 2rem;
	text-align: center;
}
.lh-partner-card__logo {
	display: block;
	height: 44px;
	width: auto;
	margin: 0 auto 1.25rem;
}
.lh-partner-card__heading {
	font-size: clamp(20px, 1rem + 0.8vw, 26px);
	line-height: 1.2;
	margin: 0 0 0.5em;
}
.lh-partner-card__text {
	color: var(--lh-muted);
	margin: 0 auto 1.5rem;
	max-width: 42ch;
}
.lh-partner-card__link { margin: 0; }
.lh-partner-card__link svg { margin-left: 0.45em; vertical-align: -2px; }

.lh-plans-cycles-note {
	max-width: 64ch; margin: clamp(1.5rem, 2vw, 2.5rem) auto 0;
	text-align: center; font-size: 0.9375rem; color: var(--lh-muted);
	line-height: var(--lh-lh-medium);
}

/* ----------------------------------------------------------------
   Comparison table
   ---------------------------------------------------------------- */

.lh-plans-compare__heading { font-size: var(--lh-fs-h3); margin: 0 0 0.5em; }

.lh-plans-compare__scroll {
	overflow-x: auto;
	border-radius: var(--lh-radius-lg);
	border: 1px solid var(--lh-divider);
	background: var(--lh-white);
	box-shadow: var(--lh-shadow-sm);
	position: relative;
	-webkit-overflow-scrolling: touch;
}
/* Mobile swipe hint: when the table can scroll horizontally, show a fading
 * gradient on the right edge so users see there's more content off-screen. */
@media (max-width: 720px) {
	.lh-plans-compare__scroll::after {
		content: '';
		position: sticky;
		top: 0;
		right: 0;
		display: block;
		width: 32px;
		height: 100%;
		pointer-events: none;
		background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
		float: right;
		margin-left: -32px;
	}
}
.lh-plans-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--lh-font-sans);
	font-size: 0.9375rem;
}
.lh-plans-compare__table th,
.lh-plans-compare__table td {
	text-align: left;
	padding: 0.95rem 1.1rem;
	border-bottom: 1px solid var(--lh-divider);
	vertical-align: middle;
	line-height: 1.45;
}
.lh-plans-compare__feature-head,
.lh-plans-compare__plan-head {
	background: var(--lh-primary-soft);
	font-weight: 700;
	color: var(--lh-ink);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	position: sticky; top: 0;
}
.lh-plans-compare__plan-head { text-align: center; }
.lh-plans-compare__plan-head--featured {
	background: linear-gradient(180deg, var(--lh-secondary) 0%, var(--lh-secondary-dark) 100%);
	color: var(--lh-white);
}
.lh-plans-compare__feature {
	font-weight: 600; color: var(--lh-ink);
	background: var(--lh-cream);
}
.lh-plans-compare__cell { text-align: center; color: var(--lh-muted); }
.lh-plans-compare__cell--good  { color: var(--lh-primary); font-weight: 600; }
.lh-plans-compare__cell--info  { color: var(--lh-ink); }
.lh-plans-compare__cell--muted { color: var(--lh-muted); }
.lh-plans-compare__cell--featured { background: rgba(176, 135, 31, 0.06); }
.lh-plans-compare__dash { color: var(--lh-muted); font-size: 1.15rem; }
.lh-plans-compare__icon { color: var(--lh-primary); vertical-align: middle; }

@media (max-width: 720px) {
	.lh-plans-compare__table thead { display: none; }
	.lh-plans-compare__table tr {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		border-bottom: 8px solid var(--lh-cream);
	}
	.lh-plans-compare__feature {
		grid-column: 1 / -1;
		background: var(--lh-primary-soft);
		padding-block: 0.75rem;
	}
	.lh-plans-compare__cell::before {
		content: attr(data-plan);
		display: block;
		font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em;
		color: var(--lh-muted); margin-bottom: 0.25rem;
	}
}

/* Wide variant: 6+ data columns won't fit the mobile-grid layout above. Keep
 * it a true table on every breakpoint, sized wide so columns breathe, and
 * stick the criterion column to the left so the row label stays visible while
 * the user scrolls horizontally through curricula. */
.lh-plans-compare__table--wide { min-width: 56rem; }
.lh-plans-compare__table--wide .lh-plans-compare__feature {
	position: sticky; left: 0; z-index: 1;
	background: var(--lh-cream);
	min-width: 13rem;
}
@media (max-width: 720px) {
	.lh-plans-compare__table--wide thead { display: table-header-group; }
	.lh-plans-compare__table--wide tr { display: table-row; border-bottom: 1px solid var(--lh-divider); }
	.lh-plans-compare__table--wide .lh-plans-compare__feature {
		grid-column: auto;
		padding-block: 0.95rem;
	}
	.lh-plans-compare__table--wide .lh-plans-compare__cell::before { content: none; }
}

/* ----------------------------------------------------------------
   À la carte science strip
   ---------------------------------------------------------------- */

.lh-plans-science__heading { font-size: var(--lh-fs-h3); margin: 0 0 0.5em; }
.lh-plans-science__intro { font-size: 0.9375rem; color: var(--lh-muted); line-height: var(--lh-lh-medium); margin: 1.25rem auto 0; max-width: 56rem; }

.lh-plans-science__grid {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	list-style: none; padding: 0; margin: 0;
}
.lh-plans-science__item > .lh-button {
	max-width: 100%;
	white-space: normal;
}

.lh-plans-science__item {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 1.5rem 1rem;
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
	transition: box-shadow 200ms ease, border-color 200ms ease;
}
.lh-plans-science__item:hover { box-shadow: var(--lh-shadow-sm); border-color: var(--lh-primary-soft); }

.lh-plans-science__name {
	font-family: var(--lh-font-serif);
	font-size: 1.125rem; font-weight: 500;
	color: var(--lh-primary);
	margin: 0;
	line-height: 1.2;
}
.lh-plans-science__meta { font-size: 0.75rem; color: var(--lh-muted); margin: 0; line-height: 1.4; }
.lh-plans-science__price {
	font-family: var(--lh-font-serif);
	font-size: 1.75rem;
	margin: 0.5rem 0 0.75rem;
	color: var(--lh-ink);
	line-height: 1;
}
.lh-plans-science__price span { font-size: 1.1rem; color: var(--lh-muted); margin-right: 0.1rem; }

/* =================================================================
   Home page (front-page.php)
   ================================================================= */

/* Paper hero (used when no hero image present) */
.lh-hero--paper {
	background:
		radial-gradient(ellipse at top, rgba(176,135,31,0.12) 0%, transparent 60%),
		linear-gradient(180deg, var(--lh-cream) 0%, #FCFAF4 100%);
	color: var(--lh-ink);
	padding: clamp(4rem, 8vw, 7rem) var(--gutter, 1.25rem);
	text-align: center;
}
.lh-hero--paper .lh-hero__inner { max-width: 980px; margin-inline: auto; }
.lh-hero--paper .lh-hero__heading { color: var(--lh-ink); }
.lh-hero--paper .lh-hero__subline { color: var(--lh-muted); }

.lh-home-intro__heading { font-size: var(--lh-fs-h3); margin: 0 0 0.5em; }
.lh-home-intro__lede { margin: 0 auto; }

/* Pillars (4-up distinctives) */
.lh-home-pillars__heading { font-size: var(--lh-fs-h3); margin: 0; }
.lh-home-pillars__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: clamp(1rem, 1.5vw, 1.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .lh-home-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .lh-home-pillars__grid { grid-template-columns: repeat(4, 1fr); } }

.lh-home-pillars__card {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	padding: 1.75rem 1.5rem;
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.lh-home-pillars__card:hover {
	box-shadow: var(--lh-shadow-md);
	transform: translateY(-2px);
	border-color: var(--lh-primary-soft);
}
.lh-home-pillars__card h3 {
	font-family: var(--lh-font-serif);
	font-size: 1.375rem; font-weight: 500;
	margin: 0 0 0.6rem;
	color: var(--lh-primary);
	line-height: 1.2;
}
.lh-home-pillars__card p { margin: 0; font-size: 0.9375rem; line-height: var(--lh-lh-medium); }

/* Linked-card variant — wraps card content in an anchor so the whole tile
   is clickable (used by hub pages like /our-approach/). */
.lh-home-pillars__card--linked { padding: 0; }
.lh-home-pillars__card-link {
	display: block;
	padding: 1.75rem 1.5rem;
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}
.lh-home-pillars__card-link:hover,
.lh-home-pillars__card-link:focus-visible {
	color: inherit;
}
.lh-home-pillars__card-link:hover h3,
.lh-home-pillars__card-link:focus-visible h3 {
	color: var(--lh-primary-dark);
}
.lh-home-pillars__card-cta {
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: color 140ms ease;
}
.lh-home-pillars__card-link:hover .lh-home-pillars__card-cta,
.lh-home-pillars__card-link:focus-visible .lh-home-pillars__card-cta {
	color: var(--lh-secondary-dark);
}

/* Pillar icons — small line-art glyph at the top of each commitment card.
   Same SVG-mask technique as the per-cycle ornaments, so the four pillars
   sit in the same visual register as the rest of the site. */
/* Scoped to the four specific commitment slugs only. The previous
   selector used the wildcard [class*="lh-home-pillars__card--"]
   which also matched --gated and --linked variants (used by gated
   sample cards and clickable cards elsewhere), painting a solid
   gold square on top of each one because no mask was defined for
   those slugs. */
.lh-home-pillars__card--bible::before,
.lh-home-pillars__card--mason::before,
.lh-home-pillars__card--family::before,
.lh-home-pillars__card--open::before {
	content: '';
	display: block;
	width: 38px;
	height: 38px;
	margin-bottom: 1rem;
	background-color: var(--lh-secondary);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: left center;
}

/* Bible + small cross above — Biblically Faithful */
.lh-home-pillars__card--bible::before {
	--lh-pillar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M12 1.5 L12 8.5 M8.6 5 L15.4 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/><rect x='3.5' y='11' width='17' height='19' rx='1.2' fill='none' stroke='black' stroke-width='1.6'/><path d='M3.5 15 L20.5 15 M3.5 26 L20.5 26' fill='none' stroke='black' stroke-width='1'/><path d='M12 18 L12 23 M9.5 20.5 L14.5 20.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>");
	-webkit-mask-image: var(--lh-pillar-icon);
	mask-image: var(--lh-pillar-icon);
}

/* Open book with a leaf sprig above — Charlotte Mason at heart */
.lh-home-pillars__card--mason::before {
	--lh-pillar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'><path d='M3 10 Q14 8 14 10 Q14 8 25 10 L25 22 Q14 20 14 22 Q14 20 3 22 Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><path d='M14 10 L14 22' fill='none' stroke='black' stroke-width='1.4'/><path d='M14 7 Q19 3 26 4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='19.5' cy='5.5' rx='2.6' ry='1.4' fill='none' stroke='black' stroke-width='1.2' transform='rotate(-25 19.5 5.5)'/><ellipse cx='24' cy='4' rx='2.4' ry='1.2' fill='none' stroke='black' stroke-width='1.2' transform='rotate(-12 24 4)'/></svg>");
	-webkit-mask-image: var(--lh-pillar-icon);
	mask-image: var(--lh-pillar-icon);
}

/* Three figures (older child, adult, younger child) — Family-style K–12 */
.lh-home-pillars__card--family::before {
	--lh-pillar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32'><circle cx='18' cy='8' r='3' fill='none' stroke='black' stroke-width='1.6'/><path d='M12 30 L12 16 Q12 13 18 13 Q24 13 24 16 L24 30' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><circle cx='5' cy='13' r='2.2' fill='none' stroke='black' stroke-width='1.4'/><path d='M1.5 30 L1.5 19 Q1.5 17 5 17 Q8.5 17 8.5 19 L8.5 30' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/><circle cx='31' cy='15' r='2' fill='none' stroke='black' stroke-width='1.4'/><path d='M28 30 L28 20 Q28 18.5 31 18.5 Q34 18.5 34 20 L34 30' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/></svg>");
	-webkit-mask-image: var(--lh-pillar-icon);
	mask-image: var(--lh-pillar-icon);
}

/* Open three-ring binder with content lines — Open and go */
.lh-home-pillars__card--open::before {
	--lh-pillar-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'><rect x='3' y='5' width='26' height='20' rx='1.2' fill='none' stroke='black' stroke-width='1.6'/><circle cx='9' cy='5' r='1.4' fill='none' stroke='black' stroke-width='1.4'/><circle cx='16' cy='5' r='1.4' fill='none' stroke='black' stroke-width='1.4'/><circle cx='23' cy='5' r='1.4' fill='none' stroke='black' stroke-width='1.4'/><path d='M7 12 L25 12 M7 16 L21 16 M7 20 L23 20' fill='none' stroke='black' stroke-width='1' stroke-linecap='round'/></svg>");
	-webkit-mask-image: var(--lh-pillar-icon);
	mask-image: var(--lh-pillar-icon);
}

/* "We Affirm" badge — sits inside the pillars cream band, below the
   four-commitment cards, centered. Links out to the Statement on
   Education & Culture. */
.lh-home-affirm {
	margin: clamp(2rem, 3vw + 1rem, 3.5rem) auto 0;
	text-align: center;
	max-width: 480px;
}
.lh-home-affirm__link {
	display: inline-block;
	transition: transform 220ms ease, opacity 220ms ease;
}
.lh-home-affirm__link:hover,
.lh-home-affirm__link:focus-visible {
	transform: translateY(-2px);
	opacity: 0.92;
}
.lh-home-affirm__badge {
	display: block;
	width: 180px;
	height: 180px;
	max-width: 100%;
	margin: 0 auto;
}

/* Day split (copy + illustration) */
.lh-home-day__split {
	display: grid; gap: clamp(2rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 880px) { .lh-home-day__split { grid-template-columns: 3fr 2fr; } }

.lh-home-day__heading { font-size: var(--lh-fs-h3); margin: 0.25rem 0 0.5em; }
.lh-home-day__list {
	list-style: none; padding: 0;
	margin: 1.5rem 0;
	display: flex; flex-direction: column; gap: 0.75rem;
}
.lh-home-day__list li {
	padding-left: 1.25rem;
	position: relative;
	line-height: var(--lh-lh-medium);
}
.lh-home-day__list li::before {
	content: ""; position: absolute; left: 0; top: 0.7em;
	width: 8px; height: 8px;
	background: var(--lh-secondary);
	border-radius: 50%;
}
.lh-home-day__list strong { color: var(--lh-ink); }

.lh-home-day__image {
	display: grid; place-items: center;
}
.lh-home-day__image-inner {
	width: 100%; max-width: 480px;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--lh-radius-lg);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(33, 37, 47, 0.18), 0 2px 4px rgba(33, 37, 47, 0.08);
}
.lh-home-day__image-inner picture,
.lh-home-day__image-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pricing snapshot on home — reuse plan-card from Plans CSS, slim spacing */
.lh-home-pricing__heading { font-size: var(--lh-fs-h3); margin: 0; }

/* Meet Becky (dark band, 2-column with pulled quote) */
.lh-section--dark {
	background: var(--lh-primary-dark);
	color: rgba(247, 244, 238, 0.9);
}
.lh-section--dark h1, .lh-section--dark h2, .lh-section--dark h3, .lh-section--dark h4 { color: var(--lh-white); }
.lh-section--dark .lh-eyebrow { color: var(--lh-accent); }
.lh-section--dark .lh-lede { color: rgba(247, 244, 238, 0.8); }
.lh-section--dark a { color: var(--lh-accent); }
.lh-section--dark a:hover { color: var(--lh-white); }
.lh-section--dark .lh-button--ghost { color: var(--lh-white); border-color: rgba(247, 244, 238, 0.3); }
.lh-section--dark .lh-button--ghost:hover { background: rgba(247, 244, 238, 0.08); color: var(--lh-white); }

.lh-home-becky__grid {
	display: grid; gap: clamp(2rem, 3vw, 4rem);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 880px) { .lh-home-becky__grid { grid-template-columns: 3fr 2fr; } }

.lh-home-becky__heading { font-size: var(--lh-fs-h2); margin: 0.25rem 0 0.5em; color: var(--lh-white); }
.lh-home-becky__lede { font-size: 1.0625rem; line-height: var(--lh-lh-normal); color: rgba(247, 244, 238, 0.85); margin: 0 0 1.5rem; }

.lh-home-becky__pull {
	border-left: 3px solid var(--lh-accent);
	padding: 0.5rem 0 0.5rem 1.5rem;
}
.lh-home-becky__quote {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	line-height: 1.4;
	color: var(--lh-white);
	margin: 0;
}
.lh-home-becky__quote p { margin: 0 0 0.75rem; }
.lh-home-becky__quote cite {
	display: block;
	font-style: normal;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(247, 244, 238, 0.82);
}

/* Home samples + final CTA — use existing .lh-section helpers, no extra rules */

/* =================================================================
   Tree mark — used as section dividers, watermarks, accents.
   The mark is a tinted SVG (currentColor) so the same file works in
   every context — just change `color`.
   ================================================================= */

.lh-tree-divider {
	display: flex; align-items: center; gap: 1.25rem;
	max-width: 480px;
	margin: 0 auto;
	color: var(--lh-secondary);
}
/* Lede ornament — divider sits inside a section, above its heading. The
   section's own bg is consistent behind it, and the only spacing is a
   small gap to the heading. */
.lh-tree-divider--lede {
	margin: 0 auto clamp(1.25rem, 2vw, 2.25rem);
}
.lh-tree-divider::before,
.lh-tree-divider::after {
	content: ""; flex: 1; height: 1px;
	background: linear-gradient(to right, transparent 0%, var(--lh-divider) 50%, transparent 100%);
}
.lh-tree-divider__mark {
	width: 36px; height: 36px;
	display: inline-block; flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
	mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
}

/* Watermark — huge faded tree behind dark CTA bands */
.lh-tree-watermark {
	position: absolute;
	pointer-events: none;
	opacity: 0.08;
	background-color: var(--lh-cream);
	width: clamp(320px, 60vw, 720px);
	aspect-ratio: 371.59 / 330;
	z-index: 0;
	-webkit-mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
	mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
}
.lh-tree-watermark--right { right: -10%; top: 50%; transform: translateY(-50%); }
.lh-tree-watermark--left  { left:  -10%; top: 50%; transform: translateY(-50%); }

/* Ensure CTA / dark-section content stacks above the watermark */
.lh-section--dark { position: relative; overflow: hidden; }
.lh-section--dark .lh-container { position: relative; z-index: 1; }
.lh-pav-cta__inner,
.lh-pav-cta .lh-container { position: relative; z-index: 1; }

/* Becky quote frontispiece — replace the gold left bar with a tree mark */
/* Becky pull-quote — centered chapter-flourish layout. Tree mark sits as a
   small centered ornament above the quote, then a thin gold rule, then the
   italic quote text, then the cite. Reads as a single editorial card rather
   than two competing elements. */
.lh-home-becky__pull {
	position: relative;
	border-left: none;
	padding: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.lh-home-becky__pull::before {
	content: "";
	display: block;
	width:  44px;
	height: 44px;
	background-color: var(--lh-accent);
	-webkit-mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
	mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
}
.lh-home-becky__pull .lh-home-becky__quote {
	max-width: 38ch;
	margin: 0 auto;
}
.lh-home-becky__pull .lh-home-becky__quote::before {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	background: var(--lh-accent);
	opacity: 0.6;
	margin: 0 auto 1.25rem;
}

/* Footer wordmark — wide blue PNG on the light footer background. The gold
   tree accent from earlier was removed; the wordmark itself carries the brand. */
.lh-footer__brand { display: flex; flex-direction: column; }
.lh-footer__logo {
	display: inline-block;
	line-height: 0;
	margin-bottom: 1.25rem;
}
.lh-footer__brand img {
	max-width: 240px !important;
	max-height: none !important;
	width: 100%;
	height: auto;
	margin: 0 !important;
	opacity: 1 !important;
	filter: none !important;
}

/* Reset bullet markers on the legal links row + lay it out next to copyright */
.lh-footer__legal {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.lh-footer__legal li { padding: 0; }
.lh-footer__legal a {
	font-size: 0.75rem;
	color: var(--lh-muted);
	text-decoration: none;
}
.lh-footer__legal a:hover { color: var(--lh-primary); }

.lh-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-top: 1px solid var(--lh-divider);
	margin-top: 3rem;
	padding-top: 1.5rem;
}

/* =================================================================
   Heritage hero variant — dark navy + tree watermark + serif italic
   headline. Works on both .lh-hero (home) and .lh-pav-hero (interior).
   Mirrors the dark CTA band styling so the brand reads as one piece
   from the top of the page to the bottom.
   ================================================================= */

.lh-hero--heritage,
.lh-pav-hero--heritage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(176, 135, 31, 0.10) 0%, rgba(176, 135, 31, 0) 60%),
		linear-gradient(180deg, var(--lh-primary-dark) 0%, #0A1F36 100%);
	color: var(--lh-white);
	min-height: 0;
	padding: clamp(5rem, 4vw + 3rem, 7rem) 0 clamp(3rem, 3vw + 1.5rem, 5rem);
	text-align: center;
}

/* Interior page headers (ESA, podcast, etc.): hug the content with just a
   little space, but visually centered. The fixed + transparent site header
   (~80px) overlaps the top, so top padding runs heavier than bottom to make
   the text sit optically centered in the visible band. Applies to all
   .lh-pav-hero--heritage page headers. */
.lh-pav-hero--heritage {
	min-height: 0;
	padding: clamp(7.5rem, 4vw + 5rem, 9rem) 0 clamp(2rem, 2vw + 1rem, 3rem);
}

/* Big tree watermark on the left — same mark we use in dark CTA bands but
   sized larger so it carries the hero. Cream fill at low opacity reads as
   a tonal texture rather than a logo. */
.lh-hero--heritage::before,
.lh-pav-hero--heritage::before {
	content: "";
	position: absolute;
	left: -10%; top: 50%;
	transform: translateY(-50%);
	width: clamp(420px, 65vw, 900px);
	aspect-ratio: 371.59 / 330;
	opacity: 0.12;
	background-color: var(--lh-cream);
	-webkit-mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
	mask: url('../images/brand/logo-mark.svg') center / contain no-repeat;
	z-index: 0;
	pointer-events: none;
}

/* Make sure content stacks above the watermark */
.lh-hero--heritage > *,
.lh-pav-hero--heritage > *:not(::before) { position: relative; z-index: 1; }

/* Type — keep the existing class names; just recolor + restyle for dark bg */
.lh-hero--heritage .lh-hero__heading,
.lh-pav-hero--heritage .lh-pav-hero__heading {
	color: var(--lh-white);
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0.75rem 0 1.25rem;
}
.lh-hero--heritage .lh-hero__subline,
.lh-pav-hero--heritage .lh-pav-hero__sub {
	color: rgba(247, 244, 238, 0.85);
	font-family: var(--lh-font-sans);
	font-style: normal;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	max-width: 56ch;
	margin: 0 auto 2rem;
	line-height: 1.5;
}
.lh-hero--heritage .lh-eyebrow,
.lh-hero--heritage .lh-eyebrow--accent,
.lh-pav-hero--heritage .lh-eyebrow,
.lh-pav-hero--heritage .lh-eyebrow--accent {
	color: var(--lh-accent); /* warm tan for the eyebrow over dark navy */
}

/* Trust strip under home hero, when present */
.lh-hero--heritage .lh-hero-trust { color: rgba(247, 244, 238, 0.7); }
.lh-hero--heritage .lh-hero-trust li + li::before { color: var(--lh-accent); }

/* CTAs — both pages use the ghost-light pill style for consistency with the
   bottom CTA band the user loved. */
.lh-hero--heritage .lh-hero__actions,
.lh-pav-hero--heritage .lh-pav-hero__actions {
	display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
	margin: 0;
}

/* =================================================================
   Home pricing snapshot — compact overrides so it fits one viewport.
   Plans page cards stay at their original (larger) size.
   ================================================================= */

.lh-home-pricing { padding-block: clamp(2.5rem, 4vw, 4rem); }
.lh-home-pricing > .lh-container > .lh-text-center { margin-bottom: clamp(1.25rem, 2vw, 2rem) !important; }
.lh-home-pricing .lh-home-pricing__heading { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin: 0 0 0.4em; }
.lh-home-pricing .lh-lede { font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem); }

.lh-home-pricing .lh-plans-grid {
	gap: clamp(0.875rem, 1.2vw, 1.25rem);
	margin: 0;
}

.lh-home-pricing .lh-plan-card {
	padding: 1.25rem 1.25rem 1.5rem;
	box-shadow: 0 1px 3px rgba(33,37,47,0.05);
}
.lh-home-pricing .lh-plan-card:hover { transform: none; }
.lh-home-pricing .lh-plan-card--featured {
	transform: translateY(0) !important;
}
@media (min-width: 880px) {
	.lh-home-pricing .lh-plan-card--featured { transform: translateY(-8px) !important; }
}
.lh-home-pricing .lh-plan-card__header { margin-bottom: 0.5rem; }
.lh-home-pricing .lh-plan-card__name {
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);
	margin: 0;
}
.lh-home-pricing .lh-plan-card__price { margin: 0.5rem 0; }
.lh-home-pricing .lh-plan-card__price-currency { font-size: 1rem; }
.lh-home-pricing .lh-plan-card__price-value { font-size: clamp(2rem, 1.6rem + 1vw, 2.75rem); }
.lh-home-pricing .lh-plan-card__price-unit { font-size: 0.75rem; margin-left: 0.4rem; }
.lh-home-pricing .lh-plan-card__best-for {
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 0 0 0.875rem !important;
	padding: 0 !important;
}
.lh-home-pricing .lh-plan-card__cta {
	padding: 0.625rem 1rem;
	font-size: 0.75rem;
	margin: 0;
}
.lh-home-pricing .lh-text-center[style*="margin-top"] { margin-top: clamp(1rem, 2vw, 1.75rem) !important; }

/* =================================================================
   Heritage Green accents — applied to "growth / yes / tree" elements.
   Gold continues to carry editorial accents (eyebrows, premium badge).
   ================================================================= */

/* Tree divider — now in green (matches the LH wordmark tree color). */
.lh-tree-divider { color: var(--lh-green); }

/* Pull-quote tree mark above Becky's quote — green. */
.lh-home-becky__pull::before { background-color: var(--lh-green); }

/* "A Living Heritage Day" list bullets — green dots. */
.lh-home-day__list li::before { background: var(--lh-green); }

/* Pricing card features — green check icons read as a "yes / included" cue. */
.lh-plan-card__check { color: var(--lh-green); }

/* Comparison table "Included" cells — green icon + green tone for emphasis. */
.lh-plans-compare__icon { color: var(--lh-green); }
.lh-plans-compare__cell--good { color: var(--lh-green-dark); }

/* Footer "Curriculum" / "Learn" / "Shop" / "Connect" section headings — keep
   navy, but add a green accent rule below each heading. */
.lh-footer__heading {
	position: relative;
	padding-bottom: 0.6rem;
	margin-bottom: 0.85rem;
}
.lh-footer__heading::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 22px; height: 2px;
	background: var(--lh-green);
	border-radius: 2px;
}

/* =================================================================
   Section renderer styles — split, affirm-reject, pullquote, TOC, prose
   ================================================================= */

/* Two-column split section (copy + aside) */
.lh-split {
	display: grid; gap: clamp(2rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 880px) {
	.lh-split { grid-template-columns: 3fr 2fr; }
	/* Give a full (uncropped) portrait photo more room. */
	.lh-split:has(.lh-split__picture[data-aspect="natural"]) { grid-template-columns: 1fr 1fr; align-items: center; }
}
.lh-split__copy h2 { margin: 0.25rem 0 0.75em; font-size: var(--lh-fs-h3); }
.lh-split__copy p { font-size: 1rem; line-height: var(--lh-lh-normal); margin: 0 0 1em; }
.lh-split__copy p:last-child { margin-bottom: 0; }

.lh-split__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 0.65rem;
	background: var(--lh-cream);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.25rem, 2vw, 2rem);
	border-left: 3px solid var(--lh-green);
}
.lh-split__list li {
	padding-left: 1.5rem; position: relative;
	font-size: 0.9375rem; line-height: var(--lh-lh-medium);
}
.lh-split__list li::before {
	content: ""; position: absolute; left: 0; top: 0.65em;
	width: 8px; height: 8px;
	background: var(--lh-green); border-radius: 50%;
}

.lh-split__aside img { border-radius: var(--lh-radius-lg); width: 100%; height: auto; }
/* Logo/brand mark in a split aside — render smaller and centered instead of filling the column. */
.lh-split__aside img.lh-logo-contain { width: auto; max-width: 300px; height: auto; margin: 0 auto; display: block; }
.lh-split:has(img.lh-logo-contain) { align-items: center; }
.lh-split__aside blockquote {
	background: var(--lh-cream);
	border-left: 3px solid var(--lh-secondary);
	border-radius: 0 var(--lh-radius-md) var(--lh-radius-md) 0;
	padding: 1.5rem 1.75rem;
	margin: 0;
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--lh-ink);
}
.lh-split__aside blockquote cite {
	display: block; margin-top: 0.75rem;
	font-style: normal; font-family: var(--lh-font-sans);
	font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--lh-muted);
}

/* Affirm / Reject two-column comparison */
.lh-affirm-reject__grid {
	display: grid; gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .lh-affirm-reject__grid { grid-template-columns: 1fr 1fr; } }

.lh-affirm-reject__col {
	background: var(--lh-white);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
	border-top: 4px solid;
	box-shadow: var(--lh-shadow-sm);
}
.lh-affirm-reject__col--affirm { border-top-color: var(--lh-green); }
.lh-affirm-reject__col--reject { border-top-color: var(--lh-muted); }

.lh-affirm-reject__title {
	font-family: var(--lh-font-serif);
	font-size: 1.5rem;
	margin: 0 0 1rem;
	color: var(--lh-ink);
}
.lh-affirm-reject__col--affirm .lh-affirm-reject__title { color: var(--lh-green-dark); }
.lh-affirm-reject__col--reject .lh-affirm-reject__title { color: var(--lh-muted); }

.lh-affirm-reject__col ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 0.65rem;
	font-size: 0.9375rem; line-height: var(--lh-lh-medium);
}
.lh-affirm-reject__col li {
	padding-left: 1.5rem; position: relative;
}
.lh-affirm-reject__col--affirm li::before {
	content: ""; position: absolute; left: 0; top: 0.55em;
	width: 14px; height: 14px;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	background-color: var(--lh-green);
}
.lh-affirm-reject__col--reject li::before {
	content: ""; position: absolute; left: 0; top: 0.55em;
	width: 14px; height: 14px;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 5l10 10M15 5L5 15' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 5l10 10M15 5L5 15' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	background-color: var(--lh-muted);
}

/* Pull quote */
.lh-pullquote {
	margin: 0;
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	line-height: 1.45;
	color: var(--lh-ink);
}
.lh-pullquote p { margin: 0 0 1rem; }
.lh-pullquote cite {
	display: block;
	font-style: normal;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--lh-muted);
}
.lh-section--dark .lh-pullquote { color: var(--lh-white); }
.lh-section--dark .lh-pullquote cite { color: var(--lh-accent); }

/* Table of contents (anchor list) */
.lh-toc {
	padding-block: clamp(2rem, 3vw, 2.5rem);
}
.lh-toc__list {
	list-style: none; padding: 0;
	margin: 1rem 0 0;
	columns: 2;
	column-gap: 2rem;
}
@media (max-width: 720px) { .lh-toc__list { columns: 1; } }
.lh-toc__list li {
	break-inside: avoid;
	padding: 0.4rem 0;
}
.lh-toc__list a {
	color: var(--lh-primary);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease;
}
.lh-toc__list a:hover { border-bottom-color: var(--lh-green); }

/* Long-form prose */
.lh-prose h2, .lh-prose h3 { margin-top: 1.5em; }
.lh-prose p, .lh-prose ul, .lh-prose ol { font-size: 1rem; line-height: var(--lh-lh-normal); margin: 0 auto 1em; }
.lh-prose ul, .lh-prose ol { padding-left: 1.5em; }
.lh-prose li { padding: 0.2rem 0; }

/* When tree-divider is used as inline section spacer */
.lh-tree-divider[style*="margin"] { /* already set via inline style on the divider section */ }

/* Cards grid: allow `data-cols` to override column count */
.lh-home-pillars__grid[data-cols="1"] {
	grid-template-columns: 1fr;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.lh-home-pillars__grid[data-cols="2"] { grid-template-columns: 1fr; }
@media (min-width: 720px) { .lh-home-pillars__grid[data-cols="2"] { grid-template-columns: 1fr 1fr; } }
.lh-home-pillars__grid[data-cols="3"] { grid-template-columns: 1fr; }
@media (min-width: 720px) { .lh-home-pillars__grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .lh-home-pillars__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } }

/* =================================================================
   Curriculum hub — cycle cards + group cards
   ================================================================= */

.lh-cycles-grid, .lh-groups-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: clamp(1rem, 1.5vw, 1.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .lh-cycles-grid, .lh-groups-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .lh-cycles-grid, .lh-groups-grid { grid-template-columns: repeat(4, 1fr); } }

.lh-cycle-card {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.5rem, 2vw + 0.5rem, 2rem);
	display: flex; flex-direction: column;
	box-shadow: var(--lh-shadow-sm);
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
	border-top: 4px solid var(--lh-secondary);
}
.lh-cycle-card:hover { box-shadow: var(--lh-shadow-md); transform: translateY(-2px); border-color: var(--lh-primary-soft); }

.lh-cycle-card__n {
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--lh-secondary);
	margin: 0 0 0.6rem;
}
.lh-cycle-card__era {
	font-family: var(--lh-font-serif);
	font-size: 1.375rem; font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: var(--lh-primary);
}
.lh-cycle-card__summary {
	font-size: 0.9375rem; line-height: var(--lh-lh-medium);
	color: var(--lh-muted);
	margin: 0 0 1.25rem;
	flex: 1;
}
.lh-cycle-card__cta {
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem; font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--lh-primary);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
	transition: color 160ms ease;
}
.lh-cycle-card__cta:hover { color: var(--lh-green-dark); }

/* Dual-stream summary block on every cycle card. Renders two short
   rows — World era + America/Britain years — each with a small icon
   in the brand accent color. Used by both the homepage cycle showcase
   and the curriculum-hub cycle cards.

   Implementation: the <dl> is an inline-grid with two tracks (icon +
   content), and each stream <div> uses `grid-template-columns:
   subgrid` so all icons and all text share the same vertical columns
   across both streams. That gives "WORLD" and "AMERICA/BRITAIN" the
   same left edge, and both era values too — no more staircase
   indent that the old per-stream centering caused. */
.lh-cycle-card__streams {
	display: inline-grid;
	grid-template-columns: 22px auto;
	column-gap: 0.6rem;
	row-gap: 0.55rem;
	margin: 0.5rem 0 1rem;
	align-self: start;
	max-width: 100%;
}
.lh-cycle-card__stream {
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: auto auto;
	grid-column: 1 / -1;
	row-gap: 0.05rem;
}
.lh-cycle-card__stream::before {
	content: '';
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 22px;
	height: 22px;
	align-self: start;
	margin-top: 0.1rem;
	background-color: var(--lh-secondary);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}
.lh-cycle-card__stream--world::before {
	-webkit-mask-image: var(--lh-icon-stream-world);
	mask-image: var(--lh-icon-stream-world);
}
.lh-cycle-card__stream--us-uk::before {
	-webkit-mask-image: var(--lh-icon-stream-us-uk);
	mask-image: var(--lh-icon-stream-us-uk);
}
.lh-cycle-card__stream dt {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lh-muted);
	margin: 0;
	line-height: 1.2;
	text-align: left;
}
.lh-cycle-card__stream dd {
	grid-column: 2;
	grid-row: 2;
	font-family: var(--lh-font-serif);
	font-size: 0.9375rem;
	color: var(--lh-primary);
	margin: 0;
	line-height: 1.35;
	text-align: left;
}

/* Cover thumbnail at the top of each curriculum-hub cycle card.
   Sits above the eyebrow; soft drop-shadow gives it a book-on-a-desk feel. */
.lh-cycle-card__thumb {
	display: block;
	width: 140px;
	aspect-ratio: 2 / 3;
	margin: -0.25rem auto 1.25rem;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(33, 37, 47, 0.16), 0 1px 2px rgba(33, 37, 47, 0.10);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.lh-cycle-card__thumb:hover,
.lh-cycle-card__thumb:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(33, 37, 47, 0.22), 0 1px 2px rgba(33, 37, 47, 0.10);
}
.lh-cycle-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* When a thumbnail sits at the top of the card, keep the cover
   itself centered (it's a small floating element) but left-align
   the text content (eyebrow, streams, summary, CTA) so every text
   row shares one anchor — otherwise the eyebrow icon at the left
   and the streams icons further inside the card create the
   misaligned-staircase look that centering each row individually
   used to produce. */

.lh-group-card {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.5rem, 2vw + 0.5rem, 2rem);
	display: flex; flex-direction: column;
	box-shadow: var(--lh-shadow-sm);
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.lh-group-card:hover { box-shadow: var(--lh-shadow-md); transform: translateY(-2px); border-color: var(--lh-green-soft); }

.lh-group-card__label {
	display: inline-block;
	background: var(--lh-green);
	color: var(--lh-white);
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.14em;
	padding: 0.35rem 0.65rem;
	border-radius: var(--lh-radius-pill);
	margin-bottom: 0.85rem;
	align-self: flex-start;
}
.lh-group-card__name {
	font-family: var(--lh-font-serif);
	font-size: 1.375rem; font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.6rem;
	color: var(--lh-primary);
}
.lh-group-card__summary {
	font-size: 0.9375rem; line-height: var(--lh-lh-medium);
	color: var(--lh-muted);
	margin: 0 0 1.25rem;
	flex: 1;
}
.lh-group-card__cta {
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem; font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--lh-green-dark);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
	transition: color 160ms ease;
}
.lh-group-card__cta:hover { color: var(--lh-primary); }

/* Contact page side panel */
.lh-contact-side {
	background: var(--lh-cream);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.5rem, 2vw + 0.5rem, 2rem);
	border-left: 3px solid var(--lh-green);
}
.lh-contact-side h3 {
	font-family: var(--lh-font-serif);
	font-size: 1.125rem;
	margin: 0 0 0.6rem;
	color: var(--lh-primary);
}
.lh-contact-side__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 0.5rem;
	font-size: 0.9375rem; line-height: var(--lh-lh-medium);
}

/* =================================================================
   Breadcrumbs — horizontal, no list markers
   ================================================================= */

.lh-breadcrumbs {
	padding: clamp(1rem, 1.5vw, 1.5rem) 0;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	color: var(--lh-muted);
	border-bottom: 1px solid var(--lh-divider);
}
.lh-breadcrumbs .lh-container {
	padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}
.lh-breadcrumbs ol {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}
.lh-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.lh-breadcrumbs a {
	color: var(--lh-primary);
	text-decoration: none;
	transition: color 160ms ease;
}
.lh-breadcrumbs a:hover { color: var(--lh-green-dark); }
.lh-breadcrumbs [aria-current="page"] {
	color: var(--lh-ink);
	font-weight: 600;
}
.lh-breadcrumbs__sep {
	color: var(--lh-divider);
}

/* Between-sections variant of the tree divider — small negative block margin
   so the divider visually overlaps the boundary, but never more than the
   adjacent section's padding (currently clamp(2.5rem, 3vw+1rem, 4rem) on
   pillar pages). Cap at -1.25rem so we can never undershoot into prior text. */
.lh-tree-divider--between {
	margin-block: clamp(-1.25rem, -0.5vw, 0px);
	max-width: 480px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

/* =================================================================
   Pillar page tightening — smaller h2 on long-form pages, less top
   padding immediately after breadcrumbs, and tighter overall vertical
   rhythm so content shows up sooner.
   ================================================================= */

/* On pillar pages, h2 should feel like a confident section title — not
   a brand statement. Forced with !important + higher specificity so any
   earlier rule (split-section override, etc.) can't compete. */
.lh-pillar h2,
.lh-pillar .lh-section h2,
.lh-pillar .lh-split__copy h2,
.lh-pillar .lh-section__header h2 {
	font-size: clamp(24px, 1.2rem + 0.9vw, 34px) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.005em;
	font-style: normal;
}

/* h3 inside pillar pages too — keep it confidently smaller than h2 */
.lh-pillar h3,
.lh-pillar .lh-section h3,
.lh-pillar .lh-home-pillars__card h3,
.lh-pillar .lh-affirm-reject__title {
	font-size: clamp(20px, 1.15rem + 0.5vw, 26px) !important;
	line-height: 1.25 !important;
}

/* The first section after the breadcrumbs should breathe but not yawn. */
.lh-breadcrumbs + .lh-section,
.lh-breadcrumbs + .lh-pav-hero + .lh-section {
	padding-block-start: clamp(2rem, 2vw + 1rem, 3rem);
}

/* Tighten the section vertical rhythm overall on pillar pages. */
.lh-pillar .lh-section {
	padding-block: clamp(2.5rem, 3vw + 1rem, 4rem);
}
/* Collapse the gap between two adjacent cream sections on pillar pages
   (the rule above otherwise re-adds full padding to both, doubling the
   space — e.g. between the buy strip and the Meet Syllabird card). */
.lh-pillar .lh-section--cream + .lh-section--cream { padding-top: 0; }
.lh-pillar .lh-section--cream:has(+ .lh-section--cream) { padding-bottom: clamp(1.5rem, 2vw, 2.25rem); }

/* When a section header is the only thing in the .lh-text-center wrapper,
   it shouldn't have margin-bottom of 0 stacked with section-padding-top. */
.lh-pillar .lh-section .lh-container > .lh-text-center:first-child {
	margin-bottom: clamp(1rem, 1.5vw, 1.75rem) !important;
}

/* =================================================================
   Split-section photos — responsive <picture> inside the aside slot.
   Square-ish aspect, soft rounded corners, subtle shadow, fills the
   aside column at any viewport.
   ================================================================= */

.lh-split__picture {
	display: block;
	width: 100%;
	border-radius: var(--lh-radius-lg);
	overflow: hidden;
	box-shadow: 0 8px 24px -8px rgba(33, 37, 47, 0.18);
}
.lh-split__picture img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Portrait-orientation photos (taller than wide) get a 3/4 aspect override
   so they don't dominate the section. The class is added automatically when
   a deck references a portrait-named photo (currently child-portrait, reading-portrait). */
.lh-split__picture[data-aspect="portrait"] img { aspect-ratio: 3 / 4; }
/* "natural" — show the full image with no crop (used for the family photo). */
.lh-split__picture[data-aspect="natural"] img { aspect-ratio: auto; object-fit: initial; }

/* =================================================================
   FAQ page — accordion + group headings
   ================================================================= */

.lh-faq-page .lh-section { padding-block: clamp(2rem, 3vw + 0.5rem, 3.5rem); }

/* Group heading row — left-aligned, navy h2, subtle bottom rule */
.lh-faq-page .lh-section .lh-section__header {
	text-align: left !important;
	border-bottom: 1px solid var(--lh-divider);
	padding-bottom: 0.875rem;
	margin-bottom: 1.5rem !important;
}
.lh-faq-page .lh-section .lh-section__header h2 {
	font-size: clamp(20px, 1.1rem + 0.5vw, 26px) !important;
	color: var(--lh-primary) !important;
	font-family: var(--lh-font-serif);
	font-weight: 500;
	margin: 0 !important;
	letter-spacing: -0.005em;
}

/* Accordion list */
.lh-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.lh-faq__item {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	overflow: hidden;
	scroll-margin-top: 90px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.lh-faq__item:hover {
	border-color: var(--lh-primary-soft);
	box-shadow: 0 2px 8px rgba(33,37,47,0.05);
}
.lh-faq__item[open] {
	border-color: var(--lh-green-soft);
	box-shadow: 0 4px 14px rgba(33,37,47,0.06);
}

/* Question (summary) */
.lh-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.375rem;
	cursor: pointer;
	font-family: var(--lh-font-sans);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--lh-ink);
	list-style: none;
	transition: color 160ms ease, background 160ms ease;
}
.lh-faq__q::-webkit-details-marker,
.lh-faq__q::marker { display: none; content: ""; }
.lh-faq__q:hover { color: var(--lh-primary); }
.lh-faq__q span { flex: 1; }
.lh-faq__item[open] .lh-faq__q {
	color: var(--lh-primary);
	background: linear-gradient(180deg, rgba(74,139,44,0.03) 0%, transparent 100%);
}

/* Chevron — rotates on open */
.lh-faq__chevron {
	flex-shrink: 0;
	color: var(--lh-green);
	transition: transform 220ms ease, color 160ms ease;
	width: 22px; height: 22px;
}
.lh-faq__item[open] .lh-faq__chevron {
	transform: rotate(180deg);
}

/* Answer */
.lh-faq__a {
	padding: 0 1.375rem 1.25rem;
	color: var(--lh-ink-soft, var(--lh-muted));
	font-size: 0.9375rem;
	line-height: 1.65;
	border-top: 1px solid rgba(226, 222, 212, 0.6);
	margin-top: -1px;
	padding-top: 1rem;
}
.lh-faq__a p { margin: 0 0 0.75em; }
.lh-faq__a p:last-child { margin-bottom: 0; }
.lh-faq__a a {
	color: var(--lh-primary);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(49, 87, 124, 0.35);
	text-underline-offset: 3px;
	transition: text-decoration-color 160ms ease;
}
.lh-faq__a a:hover { text-decoration-color: currentColor; }
/* Lists inside accordion answers */
.lh-faq__a ul,
.lh-faq__a ol {
	margin: 0.5rem 0 0.75rem;
	padding-left: 1.25rem;
}
.lh-faq__a li { margin: 0.25rem 0; }
.lh-faq__a li > ul,
.lh-faq__a li > ol {
	margin: 0.25rem 0;
}

/* Inline pricing/comparison tables (used inside accordion answers) */
.lh-pricing-table {
	width: 100%;
	margin: 1.25rem 0;
	border-collapse: collapse;
	font-family: var(--lh-font-sans);
	font-size: 0.9375rem;
	color: var(--lh-ink);
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md, 8px);
	overflow: hidden;
}
.lh-pricing-table thead {
	background: var(--lh-cream);
}
.lh-pricing-table th,
.lh-pricing-table td {
	padding: 0.625rem 0.875rem;
	text-align: left;
	border-bottom: 1px solid var(--lh-divider);
	vertical-align: middle;
}
.lh-pricing-table th {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--lh-muted);
}
.lh-pricing-table th:not(:first-child),
.lh-pricing-table td:not(:first-child) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.lh-pricing-table tbody tr:last-child td { border-bottom: 0; }
.lh-pricing-table tbody td:first-child {
	font-weight: 600;
	color: var(--lh-primary);
}

/* On cream band, items keep white bg (which already happens) — the
   alternating contrast does the visual rhythm */

/* TOC at top of FAQ page — make it sit tight without big margins */
.lh-faq-page .lh-toc {
	padding-block: clamp(1.5rem, 2vw, 2rem);
	background: var(--lh-cream);
	border-bottom: 1px solid var(--lh-divider);
}
.lh-faq-page .lh-toc .lh-eyebrow {
	color: var(--lh-secondary);
	margin: 0 0 0.5rem;
}
.lh-faq-page .lh-toc__list { margin-top: 0; }

/* =================================================================
   Subjects hub — grid of subject cards
   ================================================================= */

.lh-subjects-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: clamp(1rem, 1.5vw, 1.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .lh-subjects-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .lh-subjects-grid { grid-template-columns: repeat(3, 1fr); } }

.lh-subject-card {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
	box-shadow: var(--lh-shadow-sm);
}
.lh-subject-card:hover {
	box-shadow: var(--lh-shadow-md);
	transform: translateY(-2px);
	border-color: var(--lh-green-soft);
}

.lh-subject-card__link {
	display: flex; flex-direction: column;
	padding: clamp(1.5rem, 2vw + 0.5rem, 2rem);
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.lh-subject-card__name {
	font-family: var(--lh-font-serif);
	font-size: 1.375rem; font-weight: 500;
	margin: 0 0 0.5rem;
	color: var(--lh-primary);
	line-height: 1.2;
}
.lh-subject-card__tagline {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--lh-secondary);
	margin: 0 0 0.75rem;
}
.lh-subject-card__summary {
	font-size: 0.9375rem;
	line-height: var(--lh-lh-medium);
	color: var(--lh-muted);
	margin: 0 0 1rem;
	flex: 1;
}
.lh-subject-card__cta {
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem; font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--lh-green-dark);
	border-bottom: 1px solid currentColor;
	align-self: flex-start;
}
.lh-subject-card:hover .lh-subject-card__cta { color: var(--lh-primary); }

/* Per-subject line-art icons at the top of each subject card.
   Same SVG-mask language as the pillar icons and cycle ornaments,
   so the subjects hub reads in the same visual register as the
   rest of the site. Icon is rendered in brand burgundy via
   mask-image + background-color. */
.lh-subject-card[class*="lh-subject-card--"] .lh-subject-card__link::before {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 1rem;
	background-color: var(--lh-secondary);
	-webkit-mask-image: var(--lh-subj-icon);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-image: var(--lh-subj-icon);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: left center;
	transition: background-color 200ms ease;
}
.lh-subject-card:hover .lh-subject-card__link::before {
	background-color: var(--lh-primary);
}

/* Stream icons used by the dual-stream cycle cards (homepage + curriculum
   hub). Globe stands for the World stream; flag stands for the America/
   Britain stream. Hoisted to :root so both surfaces can reference them. */
:root {
	--lh-icon-stream-world: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='none' stroke='black' stroke-width='1.6'/><ellipse cx='16' cy='16' rx='12' ry='5' fill='none' stroke='black' stroke-width='1.2'/><ellipse cx='16' cy='16' rx='5' ry='12' fill='none' stroke='black' stroke-width='1.2'/><path d='M4 16 L28 16' fill='none' stroke='black' stroke-width='1.2'/></svg>");
	--lh-icon-stream-us-uk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M5 3 L5 30' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/><path d='M5 5 L21 5 L18.5 10 L21 15 L5 15 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M5 8 L19.5 8' fill='none' stroke='black' stroke-width='0.9'/><path d='M5 12 L19.5 12' fill='none' stroke='black' stroke-width='0.9'/></svg>");
}

/* Per-subject icon URLs hoisted to :root so the same artwork is reachable
   from both the subjects hub card modifier (.lh-subject-card--X) and the
   subject landing page body class (body.lh-subject-X) without duplicating
   the SVG payload. */
:root {
	--lh-icon-bible: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'><path d='M3 6 Q16 4 16 6 Q16 4 29 6 L29 22 Q16 20 16 22 Q16 20 3 22 Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><path d='M16 6 L16 22' fill='none' stroke='black' stroke-width='1.4'/><path d='M9.5 10 L9.5 17 M7 13.5 L12 13.5' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'/><path d='M19 11 L26 10.5 M19 14 L26 13.5 M19 17 L26 16.5' fill='none' stroke='black' stroke-width='0.9' stroke-linecap='round'/></svg>");
	--lh-icon-literature: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='6' y='5' width='20' height='6' rx='1' fill='none' stroke='black' stroke-width='1.5'/><path d='M9 7.5 L23 7.5' fill='none' stroke='black' stroke-width='0.8'/><rect x='4' y='13' width='24' height='6' rx='1' fill='none' stroke='black' stroke-width='1.5'/><path d='M7 15.5 L25 15.5' fill='none' stroke='black' stroke-width='0.8'/><rect x='5' y='21' width='22' height='6' rx='1' fill='none' stroke='black' stroke-width='1.5'/><path d='M8 23.5 L24 23.5' fill='none' stroke='black' stroke-width='0.8'/></svg>");
	--lh-icon-history: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'><ellipse cx='5' cy='12' rx='3' ry='6' fill='none' stroke='black' stroke-width='1.5'/><ellipse cx='27' cy='12' rx='3' ry='6' fill='none' stroke='black' stroke-width='1.5'/><path d='M5 6 L27 6 M5 18 L27 18' fill='none' stroke='black' stroke-width='1.5'/><path d='M10 10 L22 10 M10 13 L22 13 M10 16 L18 16' fill='none' stroke='black' stroke-width='0.9' stroke-linecap='round'/></svg>");
	--lh-icon-civics: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='4' y='22' width='10' height='7' rx='1' fill='none' stroke='black' stroke-width='1.5'/><path d='M6 22 L6 19 L12 19 L12 22' fill='none' stroke='black' stroke-width='1.4'/><path d='M28 3 L14 22' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/><path d='M28 3 Q24 4 22 8' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'/><path d='M28 3 Q26 8 24 10' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/></svg>");
	--lh-icon-government: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M3 5 L21 5 L21 8 L3 8 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><path d='M2 8 L22 8' fill='none' stroke='black' stroke-width='1.5'/><path d='M7 9 L7 24 M12 9 L12 24 M17 9 L17 24' fill='none' stroke='black' stroke-width='1.1'/><path d='M5 9 L5 24 M19 9 L19 24' fill='none' stroke='black' stroke-width='1.5'/><path d='M2 24 L22 24 L22 27 L2 27 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>");
	--lh-icon-geography: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='none' stroke='black' stroke-width='1.6'/><ellipse cx='16' cy='16' rx='12' ry='5' fill='none' stroke='black' stroke-width='1.2'/><ellipse cx='16' cy='16' rx='5' ry='12' fill='none' stroke='black' stroke-width='1.2'/><path d='M4 16 L28 16' fill='none' stroke='black' stroke-width='1.2'/></svg>");
	--lh-icon-science: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 3 Q28 10 22 22 Q16 30 10 22 Q4 10 16 3 Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><path d='M16 3 L16 28' fill='none' stroke='black' stroke-width='1.3'/><path d='M16 10 L12 14 M16 14 L10 18 M16 19 L13 22' fill='none' stroke='black' stroke-width='0.9' stroke-linecap='round'/><path d='M16 10 L20 14 M16 14 L22 18 M16 19 L19 22' fill='none' stroke='black' stroke-width='0.9' stroke-linecap='round'/></svg>");
	--lh-icon-math: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='6' r='1.8' fill='none' stroke='black' stroke-width='1.4'/><path d='M16 8 L8 26' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/><path d='M16 8 L24 26' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/><path d='M8 26 Q16 30 24 26' fill='none' stroke='black' stroke-width='1.1' stroke-dasharray='2 2'/></svg>");
	--lh-icon-fine-arts: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 5 Q5 5 5 16 Q5 26 14 27 Q12 23 16 22 Q22 21 22 17 Q27 16 27 12 Q26 5 16 5 Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><circle cx='11' cy='12' r='1.5' fill='none' stroke='black' stroke-width='1'/><circle cx='17' cy='10' r='1.5' fill='none' stroke='black' stroke-width='1'/><circle cx='21' cy='14' r='1.5' fill='none' stroke='black' stroke-width='1'/></svg>");
	--lh-icon-languages: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M4 6 L28 6 L28 22 L18 22 L14 28 L14 22 L4 22 Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><ellipse cx='13' cy='14' rx='3' ry='3' fill='none' stroke='black' stroke-width='1.4'/><path d='M19 11 L19 18' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/><path d='M17 18 L21 18' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>");
	/* Civics → scales of justice; English → pen; Music → beamed notes; PE → dumbbell (per Becky). */
	--lh-icon-scales: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 6 L16 26' fill='none' stroke='black' stroke-width='1.5'/><path d='M10 26 L22 26' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/><path d='M7 9 L25 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/><circle cx='16' cy='9' r='1.3' fill='black'/><path d='M7 9 L4 16 L10 16 Z' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'/><path d='M25 9 L22 16 L28 16 Z' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'/></svg>");
	--lh-icon-writing: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M7 24 L20 11' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/><path d='M20 11 L24 7 Q26 9 22 13 Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/><path d='M7 24 L5.5 26.5 L9 25 Z' fill='black'/><path d='M5 28 L18 28' fill='none' stroke='black' stroke-width='1' stroke-linecap='round'/></svg>");
	--lh-icon-music-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M13 23 L13 7 L25 5 L25 19' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><ellipse cx='10' cy='23' rx='3.4' ry='2.5' fill='none' stroke='black' stroke-width='1.4'/><ellipse cx='22' cy='19' rx='3.4' ry='2.5' fill='none' stroke='black' stroke-width='1.4'/></svg>");
	--lh-icon-exercise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M10 16 L22 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><rect x='5' y='10' width='5' height='12' rx='1.2' fill='none' stroke='black' stroke-width='1.5'/><rect x='22' y='10' width='5' height='12' rx='1.2' fill='none' stroke='black' stroke-width='1.5'/><path d='M3 13 L3 19 M29 13 L29 19' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>");
}

/* Subjects hub cards — point each card at its icon */
.lh-subject-card--bible      { --lh-subj-icon: var(--lh-icon-bible); }
.lh-subject-card--literature { --lh-subj-icon: var(--lh-icon-literature); }
.lh-subject-card--history    { --lh-subj-icon: var(--lh-icon-history); }
.lh-subject-card--civics     { --lh-subj-icon: var(--lh-icon-scales); }
.lh-subject-card--government { --lh-subj-icon: var(--lh-icon-government); }
.lh-subject-card--geography  { --lh-subj-icon: var(--lh-icon-geography); }
.lh-subject-card--science    { --lh-subj-icon: var(--lh-icon-science); }
.lh-subject-card--math       { --lh-subj-icon: var(--lh-icon-math); }
.lh-subject-card--fine-arts  { --lh-subj-icon: var(--lh-icon-fine-arts); }
.lh-subject-card--languages  { --lh-subj-icon: var(--lh-icon-languages); }
.lh-subject-card--art        { --lh-subj-icon: var(--lh-icon-fine-arts); }
.lh-subject-card--music      { --lh-subj-icon: var(--lh-icon-music-note); }
.lh-subject-card--english    { --lh-subj-icon: var(--lh-icon-writing); }
.lh-subject-card--physical-education { --lh-subj-icon: var(--lh-icon-exercise); }

/* Subjects hub regrouped under the three knowledges; cards are no longer
   links (Read-more removed), so the padding + icon move onto the card itself. */
.lh-subjects-group + .lh-subjects-group { margin-top: clamp(2.25rem, 4vw, 3.75rem); }
.lh-subjects-group__heading {
	font-family: var(--lh-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem);
	color: var(--lh-primary);
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--lh-green-soft);
}
.lh-subject-card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2vw + 0.5rem, 2rem);
}
.lh-subject-card .lh-subject-card__summary { margin-bottom: 0; flex: 1; }
.lh-subject-card[class*="lh-subject-card--"]::before {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 1rem;
	background-color: var(--lh-secondary);
	-webkit-mask: var(--lh-subj-icon) no-repeat left center / contain;
	        mask: var(--lh-subj-icon) no-repeat left center / contain;
	transition: background-color 200ms ease;
}
.lh-subject-card:hover::before { background-color: var(--lh-primary); }

/* Subject landing pages — point the hero icon variable at the same artwork */
body.lh-subject-bible      { --lh-pillar-hero-icon: var(--lh-icon-bible); }
body.lh-subject-literature { --lh-pillar-hero-icon: var(--lh-icon-literature); }
body.lh-subject-history    { --lh-pillar-hero-icon: var(--lh-icon-history); }
body.lh-subject-civics     { --lh-pillar-hero-icon: var(--lh-icon-civics); }
body.lh-subject-government { --lh-pillar-hero-icon: var(--lh-icon-government); }
body.lh-subject-geography  { --lh-pillar-hero-icon: var(--lh-icon-geography); }
body.lh-subject-science    { --lh-pillar-hero-icon: var(--lh-icon-science); }
body.lh-subject-math       { --lh-pillar-hero-icon: var(--lh-icon-math); }
body.lh-subject-fine-arts  { --lh-pillar-hero-icon: var(--lh-icon-fine-arts); }
body.lh-subject-languages  { --lh-pillar-hero-icon: var(--lh-icon-languages); }

/* Hero icon — single rule drawing the icon above the eyebrow on any
   subject landing page. The artwork comes from --lh-pillar-hero-icon,
   set by the body class above. Rendered in the brand secondary tint
   (gold-on-navy) so it reads against the heritage hero background. */
body[class*="lh-subject-"] .lh-pav-hero__inner::before {
	content: '';
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 1.25rem;
	background-color: var(--lh-secondary);
	-webkit-mask-image: var(--lh-pillar-hero-icon);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: var(--lh-pillar-hero-icon);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* =================================================================
   Find Your Fit quiz
   ================================================================= */

.lh-fyf__quiz {
	background: var(--lh-white);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--lh-shadow-md);
	position: relative;
	min-height: 24rem;
}

.lh-fyf__progress {
	height: 4px;
	background: var(--lh-primary-soft);
	border-radius: var(--lh-radius-pill);
	overflow: hidden;
	margin: 0 0 clamp(1.5rem, 2vw, 2rem);
}
.lh-fyf__progress-bar {
	display: block;
	height: 100%;
	background: var(--lh-green);
	border-radius: var(--lh-radius-pill);
	transition: width 300ms ease;
}

.lh-fyf__step { display: none; }
.lh-fyf__step.is-active { display: block; animation: lh-fyf-fade-in 220ms ease; }

@keyframes lh-fyf-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.lh-fyf__q {
	font-family: var(--lh-font-serif);
	font-size: clamp(22px, 1.2rem + 0.8vw, 32px);
	font-weight: 500;
	color: var(--lh-ink);
	margin: 0 0 0.75rem;
	line-height: 1.25;
}
.lh-fyf__hint {
	font-size: 0.875rem;
	color: var(--lh-muted);
	margin: 0 0 1.25rem;
}

.lh-fyf__options {
	display: flex; flex-direction: column;
	gap: 0.625rem;
	margin: 0;
}
.lh-fyf__option {
	display: flex; align-items: flex-start;
	gap: 0.75rem;
	background: var(--lh-cream);
	border: 1px solid var(--lh-divider);
	border-radius: var(--lh-radius-md);
	padding: 0.875rem 1rem;
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.45;
	transition: border-color 160ms ease, background 160ms ease;
}
.lh-fyf__option:hover {
	border-color: var(--lh-green-soft);
	background: var(--lh-white);
}
.lh-fyf__option input {
	flex-shrink: 0;
	margin-top: 0.2rem;
	accent-color: var(--lh-green);
}
.lh-fyf__option:has(input:checked) {
	border-color: var(--lh-green);
	background: var(--lh-green-soft);
}

.lh-fyf__step.is-error .lh-fyf__options {
	animation: lh-fyf-shake 300ms ease;
}
@keyframes lh-fyf-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.lh-fyf__controls {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 2vw, 2rem);
}
.lh-fyf__controls .lh-fyf__back { margin-right: auto; }
.lh-fyf__controls .lh-fyf__next { margin-left: auto; }

.lh-fyf__result {
	text-align: center;
}
.lh-fyf__result-name {
	font-family: var(--lh-font-serif);
	font-size: clamp(24px, 1.4rem + 0.8vw, 34px);
	font-weight: 500;
	color: var(--lh-primary);
	margin: 0.5rem 0 0.75rem;
}
.lh-fyf__result-cycle {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	color: var(--lh-secondary);
	margin: 0 0 1rem;
}
.lh-fyf__result-summary {
	font-size: 1rem;
	line-height: var(--lh-lh-normal);
	color: var(--lh-muted);
	max-width: 56ch;
	margin: 0 auto 1.5rem;
}
.lh-fyf__result-cta {
	display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
}
/* --- 404 Not Found page (404.php) --- */
.lh-404__search {
	display: flex;
	gap: 0.5rem;
	max-width: 540px;
	margin: 0 auto;
	background: var(--lh-white, #fff);
	border: 1px solid var(--lh-divider, rgba(0,0,0,0.08));
	border-radius: var(--lh-radius-pill, 999px);
	padding: 0.3rem 0.3rem 0.3rem 1.1rem;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.lh-404__search input[type="search"] {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--lh-font-sans);
	font-size: 1rem;
	color: var(--lh-ink);
	padding: 0.5rem 0;
}
.lh-404__search button { flex-shrink: 0; }

.lh-404__links {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lh-404__links li {
	background: var(--lh-white, #fff);
	border: 1px solid var(--lh-divider, rgba(0,0,0,0.08));
	border-radius: var(--lh-radius-md, 10px);
	transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.lh-404__links li:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.10);
	border-color: var(--lh-primary-soft, rgba(49,87,124,0.2));
	transform: translateY(-2px);
}
.lh-404__links a {
	display: block;
	padding: 1.25rem 1.25rem;
	text-decoration: none;
	color: inherit;
}
.lh-404__link-title {
	display: block;
	font-family: var(--lh-font-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--lh-primary);
	margin-bottom: 0.35rem;
}
.lh-404__link-desc {
	display: block;
	font-size: 0.875rem;
	color: var(--lh-muted);
	line-height: 1.45;
}
.lh-404__contact {
	margin-top: 2.5rem;
	color: var(--lh-muted);
	font-size: 0.95rem;
}

/* --- Compare hub intro image --- */
.lh-compare__intro-image {
	max-width: 600px;
	margin: 0 auto 2rem;
}
.lh-compare__intro-image img {
	width: 100%;
	height: auto;
	border-radius: var(--lh-radius-md, 10px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* --- Generic YouTube video embed (video section type) --- */
.lh-video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: var(--lh-radius-md, 10px);
	overflow: hidden;
	background: #000;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.lh-video-embed iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}
.lh-video-embed__caption {
	margin: 1rem auto 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--lh-muted);
}

/* --- Podcast hub (page-podcast.php) --- */
.lh-podcast__player-row {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
	align-items: start;
	margin-bottom: 1.5rem;
}
@media (min-width: 900px) {
	.lh-podcast__player-row { grid-template-columns: 2fr 1fr; }
}
.lh-podcast__player {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: var(--lh-radius-md, 10px);
	overflow: hidden;
	background: #000;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.lh-podcast__player iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}
.lh-podcast__subscribe {
	background: var(--lh-cream, #F5F1E8);
	border-radius: var(--lh-radius-md, 10px);
	padding: 1.5rem 1.5rem;
}
.lh-podcast__subscribe-heading {
	font-family: var(--lh-font-serif);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
	color: var(--lh-primary);
}
.lh-podcast__subscribe-intro {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: var(--lh-muted);
}
.lh-podcast__subscribe-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.lh-podcast__subscribe-btn {
	display: block;
	width: 100%;
	padding: 0.7rem 1rem;
	background: var(--lh-white, #fff);
	color: var(--lh-primary);
	border: 1.5px solid var(--lh-primary);
	border-radius: var(--lh-radius-pill, 999px);
	text-decoration: none;
	font-family: var(--lh-font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	transition: background 160ms ease, color 160ms ease;
}
.lh-podcast__subscribe-btn:hover {
	background: var(--lh-primary);
	color: var(--lh-white);
}
.lh-podcast__subscribe-btn--youtube { border-color: #c4302b; color: #c4302b; }
.lh-podcast__subscribe-btn--youtube:hover { background: #c4302b; color: #fff; border-color: #c4302b; }
.lh-podcast__subscribe-btn--apple { border-color: #8a3ab9; color: #8a3ab9; }
.lh-podcast__subscribe-btn--apple:hover { background: #8a3ab9; color: #fff; border-color: #8a3ab9; }

.lh-podcast__intro {
	margin: 1.5rem auto 0;
	max-width: 70ch;
	text-align: center;
}

/* --- Extra subscribe-button platforms + inline row variant --- */
.lh-podcast__subscribe-btn--g3plus { border-color: var(--lh-primary); color: var(--lh-primary); }
.lh-podcast__subscribe-btn--g3plus:hover { background: var(--lh-primary); color: #fff; border-color: var(--lh-primary); }
.lh-podcast__subscribe-btn--transistor { border-color: #3329e0; color: #3329e0; }
.lh-podcast__subscribe-btn--transistor:hover { background: #3329e0; color: #fff; border-color: #3329e0; }
.lh-podcast__subscribe-btn--spotify { border-color: #1DB954; color: #179443; }
.lh-podcast__subscribe-btn--spotify:hover { background: #1DB954; color: #fff; border-color: #1DB954; }
.lh-podcast__subscribe-list--row {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.lh-podcast__subscribe-list--row .lh-podcast__subscribe-btn {
	width: auto;
	padding: 0.5rem 0.95rem;
	font-size: 0.72rem;
}

/* --- Final subscribe CTA: all platforms for both shows, on dark --- */
.lh-podcast__subscribe-cta-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: 760px;
	margin: 2.5rem auto 0;
}
.lh-podcast__subscribe-cta-group { text-align: center; }
.lh-podcast__subscribe-cta-name {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--lh-white);
	font-size: 1.375rem;
	margin: 0 0 1rem;
}
.lh-podcast__subscribe-cta-group .lh-podcast__subscribe-list--row {
	justify-content: center;
}
@media (max-width: 600px) {
	.lh-podcast__subscribe-cta-grid { grid-template-columns: 1fr; }
}
/* Reassert pill label colors — the dark section's generic `a` rule would
   otherwise repaint the text to the low-contrast accent on the white pills. */
.lh-podcast__subscribe-cta .lh-podcast__subscribe-btn { color: var(--lh-primary); }
.lh-podcast__subscribe-cta .lh-podcast__subscribe-btn--youtube { color: #c4302b; }
.lh-podcast__subscribe-cta .lh-podcast__subscribe-btn--apple { color: #8a3ab9; }
.lh-podcast__subscribe-cta .lh-podcast__subscribe-btn--g3plus { color: var(--lh-primary); }
.lh-podcast__subscribe-cta .lh-podcast__subscribe-btn:hover { color: var(--lh-white); }

/* --- Show directory: one card per podcast --- */
.lh-podcast__shows {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 860px) {
	.lh-podcast__shows { grid-template-columns: repeat(2, 1fr); }
}
.lh-show-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	background: var(--lh-white, #fff);
	border: 1px solid var(--lh-divider, rgba(0,0,0,0.06));
	border-radius: var(--lh-radius-lg, 16px);
	padding: clamp(1.5rem, 2vw + 1rem, 2.25rem);
	box-shadow: 0 10px 30px rgba(12,38,64,0.06);
}
@media (min-width: 520px) {
	.lh-show-card { flex-direction: row; align-items: flex-start; }
}
.lh-show-card__cover { flex: 0 0 auto; }
.lh-show-card__cover img {
	width: clamp(120px, 30vw, 172px);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--lh-radius-md, 10px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
	display: block;
}
.lh-show-card__body { flex: 1 1 auto; min-width: 0; }
.lh-show-card__title {
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
	line-height: 1.15;
	color: var(--lh-primary);
	margin: 0 0 0.3rem;
}
.lh-show-card__hosts {
	margin: 0 0 0.85rem;
	font-family: var(--lh-font-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lh-secondary, #B0871F);
}
.lh-show-card__desc {
	margin: 0 0 1.15rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--lh-ink);
}

/* --- Episode grid: every card leads with a picture --- */
.lh-podcast__episodes-head { margin-bottom: clamp(1.75rem, 2vw + 1rem, 2.5rem); }
.lh-podcast__episodes-count {
	margin: 0.4rem 0 0;
	font-family: var(--lh-font-sans);
	font-size: 0.85rem;
	color: var(--lh-muted);
}
.lh-podcast__episodes {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: clamp(1.25rem, 2vw, 1.75rem);
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.lh-podcast__episode {
	display: flex;
	flex-direction: column;
	background: var(--lh-white, #fff);
	border: 1px solid var(--lh-divider, rgba(0,0,0,0.06));
	border-radius: var(--lh-radius-md, 10px);
	overflow: hidden;
	transition: box-shadow 200ms ease, transform 200ms ease;
}
.lh-podcast__episode:hover {
	box-shadow: 0 12px 28px rgba(12,38,64,0.12);
	transform: translateY(-2px);
}
.lh-podcast__episode-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #0C2640;
	overflow: hidden;
}
.lh-podcast__episode-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}
.lh-podcast__episode-thumb:hover img { transform: scale(1.045); }
.lh-podcast__episode-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(12,38,64,0.72);
	display: grid;
	place-items: center;
	transition: background 160ms ease;
}
.lh-podcast__episode-play::after {
	content: "";
	width: 0; height: 0;
	border-left: 16px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-left: 4px;
}
.lh-podcast__episode-thumb:hover .lh-podcast__episode-play { background: var(--lh-secondary, #B0871F); }
.lh-podcast__episode-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.1rem 1.25rem 1.35rem;
}
.lh-podcast__episode-title {
	font-family: var(--lh-font-serif);
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--lh-primary);
	margin: 0 0 0.35rem;
}
.lh-podcast__episode-title a { color: inherit; text-decoration: none; }
.lh-podcast__episode-title a:hover { color: var(--lh-secondary, #B0871F); }
.lh-podcast__episode-meta {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	color: var(--lh-muted);
	font-family: var(--lh-font-sans);
}
.lh-podcast__episode-desc {
	margin: 0 0 1rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--lh-ink);
}
.lh-podcast__episode-num {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	margin-right: 0.5rem;
	background: var(--lh-cream, #F5F1E8);
	color: var(--lh-muted);
	font-family: var(--lh-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: var(--lh-radius-pill, 999px);
	vertical-align: middle;
}
.lh-podcast__episode-audio {
	display: block;
	width: 100%;
	margin-top: auto;
}
.lh-podcast__episode-link {
	margin: auto 0 0;
	font-size: 0.85rem;
}
.lh-podcast__episode-link a {
	font-family: var(--lh-font-sans);
	font-weight: 600;
	color: var(--lh-secondary, #B0871F);
	text-decoration: none;
}
.lh-podcast__episode-link a:hover { color: var(--lh-primary); }

/* --- Combined episode list: both shows mixed, video + audio per row --- */
.lh-ep-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
}
.lh-ep-row {
	display: flex;
	flex-direction: column;
	background: var(--lh-white, #fff);
	border: 1px solid var(--lh-divider, rgba(0,0,0,0.06));
	border-radius: var(--lh-radius-md, 10px);
	overflow: hidden;
	transition: box-shadow 200ms ease;
}
.lh-ep-row:hover { box-shadow: 0 12px 28px rgba(12,38,64,0.10); }
@media (min-width: 680px) {
	.lh-ep-row { flex-direction: row; align-items: stretch; }
}
/* Thumbnail is always a full 16:9 frame (correct proportions, never cropped
   to fill the row height). On desktop it sits in a fixed-width column,
   vertically centered against the taller text body. */
.lh-ep-row__media {
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
}
.lh-ep-row__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0C2640;
	overflow: hidden;
}
@media (min-width: 680px) {
	.lh-ep-row__media { width: 340px; }
}
.lh-ep-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}
.lh-ep-row__thumb:hover img { transform: scale(1.045); }
.lh-ep-row__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(12,38,64,0.72);
	display: grid;
	place-items: center;
	transition: background 160ms ease;
}
.lh-ep-row__play::after {
	content: "";
	width: 0; height: 0;
	border-left: 16px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-left: 4px;
}
.lh-ep-row__thumb:hover .lh-ep-row__play { background: var(--lh-secondary, #B0871F); }
.lh-ep-row__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
}
.lh-ep-row__show {
	margin: 0 0 0.3rem;
	font-family: var(--lh-font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lh-secondary, #B0871F);
}
.lh-ep-row__title {
	font-family: var(--lh-font-serif);
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--lh-primary);
	margin: 0 0 0.35rem;
}
.lh-ep-row__title a { color: inherit; text-decoration: none; }
.lh-ep-row__title a:hover { color: var(--lh-secondary, #B0871F); }
.lh-ep-row__meta {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	color: var(--lh-muted);
	font-family: var(--lh-font-sans);
}
.lh-ep-row__desc {
	margin: 0 0 0.85rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--lh-ink);
}
.lh-ep-row__audio {
	width: 100%;
	margin: 0 0 0.6rem;
}
.lh-ep-row__links {
	margin: auto 0 0;
	font-size: 0.85rem;
}
.lh-ep-row__links a {
	font-family: var(--lh-font-sans);
	font-weight: 600;
	color: var(--lh-secondary, #B0871F);
	text-decoration: none;
}
.lh-ep-row__links a:hover { color: var(--lh-primary); }

/* --- Book cover gallery (book-gallery section type) --- */
.lh-book-gallery {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	align-items: end;
}
.lh-book-gallery__item {
	display: flex;
	align-items: end;
	justify-content: center;
	overflow: hidden;
	border-radius: 4px;
	background: var(--lh-cream, #F5F1E8);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.lh-book-gallery__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.lh-book-gallery__item img {
	width: 100%;
	height: auto;
	max-height: 200px;
	object-fit: contain;
	display: block;
}
.lh-book-gallery__note {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 0.875rem;
	color: var(--lh-muted);
	font-style: italic;
}

/* --- Book-cover scroll row (book-scroll section type; also reused inside
       book-tabs panels). Horizontally-scrolling strip of larger covers
       with snap and hidden scrollbar. Touch/swipe works natively via
       overflow-x; mouse users get drag-to-scroll via main.js plus optional
       prev/next arrow buttons. Sized so ~5 covers show on desktop,
       ~3 on tablet, ~2.2 peeking on mobile so users see it's scrollable. */
.lh-book-scroll { position: relative; }
.lh-book-scroll__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	/* Bleed past container padding so covers can scroll edge-to-edge on
	   mobile, where every pixel matters. Pulled back in via padding so
	   the first/last cover still aligns with the rest of the content. */
	margin-inline: calc(-1 * max(1.25rem, env(safe-area-inset-left)));
	padding-inline: max(1.25rem, env(safe-area-inset-left));
}
.lh-book-scroll__viewport::-webkit-scrollbar { display: none; }
.lh-book-scroll__track {
	display: flex;
	gap: clamp(0.9rem, 1vw + 0.5rem, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
	align-items: end;
}
.lh-book-scroll__item {
	flex: 0 0 clamp(150px, 14vw, 210px);
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	align-items: end;
	justify-content: center;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.lh-book-scroll__item:hover {
	transform: translateY(-3px);
}
.lh-book-scroll__item img {
	width: 100%;
	height: auto;
	max-height: clamp(220px, 22vw, 310px);
	object-fit: contain;
	display: block;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.10);
	background: var(--lh-cream, #F5F1E8);
}
.lh-book-scroll__item:hover img {
	box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}
@media (max-width: 640px) {
	.lh-book-scroll__item { flex-basis: 42%; }
}
/* Optional caption under a specific cover (e.g. Premium/Basic Only tags) */
.lh-book-scroll__item--captioned {
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.55rem;
}
.lh-book-scroll__caption {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lh-secondary, #B0871F);
	text-align: center;
	line-height: 1.25;
	max-width: 100%;
}
/* Sample weekly schedule grid (Shop by Grade) */
.lh-schedule__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(31, 58, 87, 0.08);
}
.lh-schedule {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 0.82rem;
	background: var(--lh-white, #fff);
}
.lh-schedule th,
.lh-schedule td {
	border: 1px solid rgba(31, 58, 87, 0.12);
	padding: 0.5rem 0.6rem;
	text-align: center;
	vertical-align: middle;
	color: var(--lh-ink, #21252F);
	line-height: 1.3;
}
.lh-schedule thead th {
	background: var(--lh-primary, #31577C);
	color: var(--lh-white, #fff);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.lh-schedule__corner { background: var(--lh-primary-dark, #1F3A57); }
.lh-schedule__time {
	background: var(--lh-cream, #F7F4EE);
	font-weight: 700;
	white-space: nowrap;
	color: var(--lh-primary-dark, #1F3A57);
}
.lh-schedule tbody tr:nth-child(even) td { background: rgba(247, 244, 238, 0.5); }
.lh-schedule__cell--empty { background: rgba(31, 58, 87, 0.04); }
.lh-schedule__note {
	margin: 1rem auto 0;
	max-width: 70ch;
	text-align: center;
	font-size: 0.85rem;
	color: var(--lh-muted, #6b7280);
	font-style: italic;
}
/* Linked image with caption in a split aside (e.g. linked article) */
.lh-split__image-link { display: block; text-decoration: none; color: inherit; }
.lh-split__img-caption {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--lh-muted, #555);
}
.lh-split__img-caption strong {
	display: block;
	margin-bottom: 0.15rem;
	font-family: var(--lh-font-serif, Lora, Georgia, serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--lh-primary, #31577C);
}
.lh-split__image-link:hover .lh-split__img-caption strong { text-decoration: underline; }
/* Prev/next arrow buttons — visible on hover/focus, hidden on touch */
.lh-book-scroll__controls {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	margin-top: 1rem;
}
.lh-book-scroll__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lh-white, #fff);
	border: 1.5px solid var(--lh-primary, #1d2a4d);
	color: var(--lh-primary, #1d2a4d);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.lh-book-scroll__btn:hover {
	background: var(--lh-primary, #1d2a4d);
	color: var(--lh-white, #fff);
}
.lh-book-scroll__btn:disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media (hover: none) {
	/* Touch devices don't need the buttons — they swipe. */
	.lh-book-scroll__controls { display: none; }
}
.lh-book-scroll__note {
	text-align: center;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--lh-muted);
	font-style: italic;
}
.lh-book-scroll__empty {
	text-align: center;
	color: var(--lh-muted);
	font-style: italic;
	padding: 2.5rem 1rem;
}

/* --- Book-tabs (book-tabs section type) ------------------------------
   5 tabs (typically: Grade-specific + Cycle 1-4), one panel visible at
   a time, each panel renders a .lh-book-scroll row. Accessible tablist
   pattern (ARIA roles + arrow-key keyboard nav handled in main.js). */
.lh-book-tabs { width: 100%; }
.lh-book-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.lh-book-tabs__tab {
	appearance: none;
	background: transparent;
	border: 1.5px solid var(--lh-primary, #1d2a4d);
	color: var(--lh-primary, #1d2a4d);
	font-family: inherit;
	font-size: clamp(0.85rem, 0.4vw + 0.75rem, 0.95rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0.55em 1.25em;
	border-radius: 999px;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
	white-space: nowrap;
}
.lh-book-tabs__tab:hover {
	background: rgba(29,42,77,0.08);
}
.lh-book-tabs__tab[aria-selected="true"] {
	background: var(--lh-primary, #1d2a4d);
	color: var(--lh-white, #fff);
	border-color: var(--lh-primary, #1d2a4d);
}
.lh-book-tabs__tab:focus-visible {
	outline: 2px solid var(--lh-secondary, #B0871F);
	outline-offset: 2px;
}
.lh-book-tabs__panel[hidden] { display: none; }

/* --- Home-page testimonials (front-page.php) --------------------------
   User-driven horizontal scroller: three cards visible at any time,
   the user pages through them via drag, trackpad swipe, or the prev /
   next buttons. CSS handles the layout and scroll-snap; JS handles
   button clicks and tags whichever card sits closest to the viewport
   centerline with `.is-center` for the navy showcase treatment.
   Reduced-motion users get a static three-up grid with no animations. */
.lh-home-testimonials {
	background: var(--lh-cream, #F7F4EE);
	position: relative;
	/* Override the default section padding so the whole band fits on
	   one screen alongside its heading. */
	padding-block: clamp(40px, 1.75rem + 2.25vw, 64px);
}

.lh-testimonials-scroller {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(0.5rem, 1vw, 1rem);
}

/* The scrollable track. overflow-x: auto + scroll-snap-type lets the
   user drag, swipe, or arrow-key through cards; the scrollbar itself
   is hidden because we provide explicit prev/next buttons. */
.lh-testimonials-scroller__track {
	list-style: none;
	margin: 0;
	padding: 0.75rem 0.5rem 1rem; /* vertical room for centered card's lift + shadow */
	display: flex;
	gap: clamp(0.75rem, 1vw, 1.25rem);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Soften the side edges so cards fade in/out rather than hard-clipping. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.lh-testimonials-scroller__track::-webkit-scrollbar { display: none; }

/* Round, low-contrast prev/next buttons flanking the track. JS toggles
   the `disabled` state at the ends of the range. */
.lh-testimonials-scroller__btn {
	flex: 0 0 auto;
	width: clamp(36px, 2vw + 1.5rem, 44px);
	height: clamp(36px, 2vw + 1.5rem, 44px);
	border-radius: 50%;
	border: 1.5px solid var(--lh-divider, rgba(0,0,0,0.12));
	background: #fff;
	color: var(--lh-primary, #31577C);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
	-webkit-appearance: none;
	        appearance: none;
}
.lh-testimonials-scroller__btn:hover {
	background: var(--lh-primary, #31577C);
	border-color: var(--lh-primary, #31577C);
	color: #fff;
}
.lh-testimonials-scroller__btn:focus-visible {
	outline: 2px solid var(--lh-primary, #31577C);
	outline-offset: 3px;
}
.lh-testimonials-scroller__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.lh-testimonials-scroller__btn:disabled:hover {
	background: #fff;
	color: var(--lh-primary, #31577C);
	border-color: var(--lh-divider, rgba(0,0,0,0.12));
}

.lh-testimonial-card {
	position: relative;
	/* Three visible at a time: card width = (track width - 2 gaps) / 3.
	   `100%` here is the flex container's (track's) visible width. */
	flex: 0 0 calc((100% - 2 * clamp(0.75rem, 1vw, 1.25rem)) / 3);
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background: #fff;
	border-radius: var(--lh-radius-md, 12px);
	padding: 1.25rem 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -16px rgba(31,58,87,0.18);
	transition: background-color 360ms ease, color 360ms ease,
		transform 360ms ease, box-shadow 360ms ease;
	overflow: hidden;
	isolation: isolate;
}
/* Two visible at narrower viewports. */
@media (max-width: 1024px) {
	.lh-testimonial-card { flex-basis: calc((100% - clamp(0.75rem, 1vw, 1.25rem)) / 2); }
}
/* One visible at mobile with a peek of the next. */
@media (max-width: 640px) {
	.lh-testimonial-card { flex-basis: 86%; }
}

/* Decorative serif quote glyph sits behind the text. */
.lh-testimonial-card::before {
	content: "\201C";
	position: absolute;
	top: -0.5rem;
	left: 0.75rem;
	font-family: var(--lh-font-serif);
	font-size: 4.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--lh-primary, #31577C);
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
	transition: color 360ms ease, opacity 360ms ease, font-size 360ms ease;
}

.lh-testimonial-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--lh-ink, #21252F);
	font-family: var(--lh-font-serif);
	font-style: italic;
	font-size: 0.9375rem;
	line-height: 1.5;
	position: relative;
	z-index: 1;
	transition: color 360ms ease;
}
.lh-testimonial-card__quote p {
	margin: 0;
	/* Full quote always shows — no line-clamp. Cards in a row stretch to
	   the tallest via the flex container, so the row stays even without
	   truncating anyone's testimonial. */
}

.lh-testimonial-card__attribution {
	font-family: var(--lh-font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--lh-muted, #4C5A66);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	position: relative;
	z-index: 1;
	transition: color 360ms ease;
}
.lh-testimonial-card__attribution::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 2px;
	background: var(--lh-secondary, #B0871F);
	border-radius: 2px;
}

.lh-testimonial-card__name {
	font-family: var(--lh-font-serif);
	font-style: normal;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0;
	color: var(--lh-primary, #31577C);
	transition: color 360ms ease;
}
.lh-testimonial-card__location { color: var(--lh-muted, #4C5A66); transition: color 360ms ease; }
.lh-testimonial-card__location::before {
	content: "·";
	color: var(--lh-secondary, #B0871F);
	margin-right: 0.3rem;
	font-weight: 700;
}

/* --- Centered card — heritage-navy showcase. JS applies `.is-center`
   to whichever card currently sits closest to the viewport centerline. */
.lh-testimonial-card.is-center {
	background: var(--lh-primary-dark, #1F3A57);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 22px 50px -28px rgba(31,58,87,0.55);
	transform: translateY(-3px);
}
.lh-testimonial-card.is-center::before {
	color: var(--lh-secondary, #B0871F);
	opacity: 0.36;
	font-size: 5.5rem;
}
.lh-testimonial-card.is-center .lh-testimonial-card__quote { color: #fff; }
.lh-testimonial-card.is-center .lh-testimonial-card__attribution { color: rgba(255,255,255,0.78); }
.lh-testimonial-card.is-center .lh-testimonial-card__name { color: #fff; }
.lh-testimonial-card.is-center .lh-testimonial-card__location { color: rgba(255,255,255,0.72); }

/* Reduced motion: keep the user-driven scroller, but disable the
   smooth-scroll easing so button presses jump straight to the next
   position. (The scroller is already user-driven, so there's no
   marquee animation to suppress.) */
@media (prefers-reduced-motion: reduce) {
	.lh-testimonials-scroller__track { scroll-behavior: auto; }
	.lh-testimonial-card { transition: background-color 0ms, color 0ms, transform 0ms, box-shadow 0ms; }
	.lh-testimonial-card.is-center { transform: none; }
}

/* --- Writings hub grid (page-writings.php) --- */
.lh-writings-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lh-writing-card {
	background: var(--lh-white, #fff);
	border: 1px solid var(--lh-divider, rgba(0,0,0,0.08));
	border-radius: var(--lh-radius-md, 10px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.lh-writing-card:hover {
	box-shadow: var(--lh-shadow-sm, 0 4px 12px rgba(0,0,0,0.05));
	border-color: var(--lh-primary-soft, rgba(49,87,124,0.2));
	transform: translateY(-2px);
}
.lh-writing-card__image-link {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--lh-cream, #F5F1E8);
}
.lh-writing-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}
.lh-writing-card:hover .lh-writing-card__image {
	transform: scale(1.04);
}
.lh-writing-card__body {
	padding: 1.25rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}
.lh-writing-card__title {
	font-family: var(--lh-font-serif);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--lh-primary);
	margin: 0;
	line-height: 1.3;
}
.lh-writing-card__title a {
	color: inherit;
	text-decoration: none;
	font-weight: inherit;
}
.lh-writing-card__title a:hover { color: var(--lh-secondary); }

/* --- Single writing template (single-writing.php) --- */
.lh-writing-single__meta {
	margin-top: 1rem;
	color: rgba(255,255,255,0.85);
	font-family: var(--lh-font-sans);
	font-size: 0.95rem;
}
.lh-writing-single__meta a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.lh-writing-single__meta a:hover { color: var(--lh-accent, #B0871F); }
.lh-writing-single__sep {
	margin: 0 0.4rem;
	opacity: 0.6;
}
.lh-writing-single__hero-image {
	max-width: 960px;
	margin: 2rem auto 0;
	padding: 0 1rem;
}
.lh-writing-single__hero-image img {
	width: 100%;
	height: auto;
	border-radius: var(--lh-radius-md, 10px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.lh-writing-single__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.lh-writing-single__body {
	font-family: var(--lh-font-serif);
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--lh-ink);
}
.lh-writing-single__body p,
.lh-writing-single__body ul,
.lh-writing-single__body ol,
.lh-writing-single__body blockquote,
.lh-writing-single__body h2,
.lh-writing-single__body h3,
.lh-writing-single__body h4 { max-width: none; }
.lh-writing-single__body p { margin: 0 0 1.25em; }
.lh-writing-single__body h2,
.lh-writing-single__body h3 {
	margin-top: 2rem;
	color: var(--lh-primary);
}
.lh-writing-single__body img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 1.5em auto;
	display: block;
}
.lh-writing-single__body ul,
.lh-writing-single__body ol {
	margin: 0 0 1.25em 1.25em;
	padding-left: 1rem;
}
.lh-writing-single__body li { margin-bottom: 0.4em; }
.lh-writing-single__body blockquote {
	margin: 1.5em 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--lh-secondary, #B0871F);
	color: var(--lh-muted);
	font-style: italic;
}
.lh-writing-single__credit {
	margin: 2.5rem 0 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--lh-cream, #F5F1E8);
	border-radius: var(--lh-radius-md, 10px);
	font-size: 0.95rem;
	color: var(--lh-ink);
}
.lh-writing-single__credit p { margin: 0; }
.lh-writing-single__credit a {
	color: var(--lh-secondary, #B0871F);
	font-weight: 600;
}
.lh-writing-single__back {
	text-align: center;
	margin: 2rem 0 0;
}
.lh-writing-card__date {
	font-family: var(--lh-font-sans);
	font-size: 0.78rem;
	color: var(--lh-muted);
	margin: 0;
	letter-spacing: 0.04em;
}
.lh-writing-card__excerpt {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--lh-muted);
	margin: 0;
	flex: 1;
}
.lh-writing-card__cta {
	font-family: var(--lh-font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--lh-secondary, #B0871F);
	text-decoration: none;
	margin-top: 0.5rem;
	align-self: flex-start;
}
.lh-writing-card__cta:hover { color: var(--lh-primary); }

.lh-buy-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	max-width: 640px;
	margin: 0 auto;
}
.lh-buy-strip > a,
.lh-buy-strip > span {
	flex: 1 1 140px;
	justify-content: center;
	min-width: 140px;
}
.lh-buy-strip__note {
	margin: 1rem auto 0;
	font-size: 0.875rem;
	color: var(--lh-muted);
	max-width: 56ch;
	font-style: italic;
}

.lh-fyf__result-buy {
	max-width: 480px;
	margin: 1.5rem auto;
	padding: 1.25rem;
	background: var(--lh-cream, #F5F1E8);
	border-radius: var(--lh-radius, 8px);
}
.lh-fyf__result-buy-label {
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
	color: var(--lh-ink);
}
.lh-fyf__result-buy-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}
.lh-fyf__result-buy-grid > a,
.lh-fyf__result-buy-grid > span {
	width: 100%;
	justify-content: center;
}
.lh-fyf__result-cycle-note {
	max-width: 56ch;
	margin: 0 auto 1.25rem;
	font-size: 0.9rem;
	color: var(--lh-muted);
	font-style: italic;
}
.lh-fyf__retake { margin-top: 1.5rem; }
.lh-fyf__retake-btn {
	background: none; border: none;
	color: var(--lh-muted);
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	cursor: pointer;
	text-decoration: underline;
}
.lh-fyf__retake-btn:hover { color: var(--lh-primary); }

/* The `display: flex` on .lh-fyf__controls beats the UA default
   `[hidden] { display: none }` due to specificity tie. Re-assert. */
.lh-fyf__controls[hidden] { display: none !important; }

/* ============================================================
   Per-cycle era-appropriate design accents
   Body gets a `lh-cycle-N` class on the 4 cycle landing pages
   (see inc/setup.php). Each cycle defines its accent color and
   a single SVG ornament that appears centered above the hero
   eyebrow. Eyebrow color also picks up the cycle accent.
   ============================================================ */

/* Hero ornament — sits centered above the eyebrow on cycle pages.
   Uses CSS mask so the SVG line art picks up the cycle accent color
   via the underlying background-color, regardless of how the SVG
   itself is drawn. */
body[class*="lh-cycle-"] .lh-pav-hero__inner {
	position: relative;
}
body[class*="lh-cycle-"] .lh-pav-hero__inner::before {
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 1.25rem;
	background-color: var(--lh-cycle-accent, var(--lh-secondary));
	-webkit-mask-image: var(--lh-cycle-ornament);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: var(--lh-cycle-ornament);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	opacity: 0.95;
}

/* Era-tinted hero eyebrow (overrides the default --lh-secondary gold) */
body[class*="lh-cycle-"] .lh-pav-hero .lh-eyebrow--accent {
	color: var(--lh-cycle-accent);
}

/* Era-tinted cycle-page section H2 underline accent — a small line
   beneath each section heading in the cycle's accent color. Subtle. */
body[class*="lh-cycle-"] .lh-section h2 {
	position: relative;
}
body[class*="lh-cycle-"] .lh-section .lh-text-center > h2::after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	background: var(--lh-cycle-accent);
	margin: 0.85rem auto 0;
	opacity: 0.6;
	border-radius: 1px;
}

/* Shared cycle accent vars — define on every surface that needs era styling
   (cycle landing page body class, homepage + curriculum-hub cycle cards,
   mega-menu Shop-by-Cycle items). Each rule sets two custom properties:
   --lh-cycle-accent (color) and --lh-cycle-ornament (SVG mask url). */

/* CYCLE 1 — Ancient Mesopotamia & Egypt · warm desert ochre · ankh */
.lh-cycle-1,
.lh-cycle-card--1,
.lh-mega-cycle--1 {
	--lh-cycle-accent: #C39B6E;
	--lh-cycle-ornament: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><ellipse cx='12' cy='9' rx='6' ry='7' fill='none' stroke='black' stroke-width='2'/><path d='M12 16 L12 30 M5 19 L19 19' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
}

/* CYCLE 2 — Ancient Greece & Rome · olive · classical temple */
.lh-cycle-2,
.lh-cycle-card--2,
.lh-mega-cycle--2 {
	--lh-cycle-accent: #8AAB85;
	--lh-cycle-ornament: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'><path d='M2 10 L16 3 L30 10 Z' fill='none' stroke='black' stroke-width='1.6'/><path d='M2 10 L30 10' stroke='black' stroke-width='1.6'/><path d='M6 10 L6 22 M16 10 L16 22 M26 10 L26 22' stroke='black' stroke-width='1.6'/><path d='M0 22 L32 22' stroke='black' stroke-width='1.6'/></svg>");
}

/* CYCLE 3 — The Middle Ages · royal purple · Gothic arch with cross */
.lh-cycle-3,
.lh-cycle-card--3,
.lh-mega-cycle--3 {
	--lh-cycle-accent: #8456A8;
	--lh-cycle-ornament: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M4 30 L4 16 Q4 6 12 2 Q20 6 20 16 L20 30' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/><path d='M12 16 L12 26' stroke='black' stroke-width='1.5'/><path d='M8 22 L16 22' stroke='black' stroke-width='1.5'/></svg>");
}

/* CYCLE 4 — Renaissance & Reformation · Reformation red · open Bible */
.lh-cycle-4,
.lh-cycle-card--4,
.lh-mega-cycle--4 {
	--lh-cycle-accent: #B0455A;
	--lh-cycle-ornament: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'><path d='M4 4 L15 6 L15 21 L4 19 Z M28 4 L17 6 L17 21 L28 19 Z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/><path d='M16 6 L16 21' stroke='black' stroke-width='1.4'/><path d='M6 10 L13 11 M6 13 L13 14 M6 16 L13 17 M19 11 L26 10 M19 14 L26 13 M19 17 L26 16' stroke='black' stroke-width='1' stroke-linecap='round'/></svg>");
}

/* ----- Cycle cards (homepage showcase + curriculum hub) ----------
   Both surfaces use class `.lh-cycle-card`; the per-cycle modifier
   class tells the styling which accent + ornament to apply.        */

/* Tint the gold border-top on curriculum-hub cards (no border on
   homepage cards) so each card visually picks up its cycle accent. */
.lh-cycle-card[class*="lh-cycle-card--"] {
	border-top-color: var(--lh-cycle-accent);
}

/* Cycle number / eyebrow becomes a small flex container with an
   inline ornament marker followed by the label text. Targets both
   the homepage card's __eyebrow span and the curriculum hub's __n p. */
.lh-cycle-card[class*="lh-cycle-card--"] .lh-cycle-card__eyebrow,
.lh-cycle-card[class*="lh-cycle-card--"] .lh-cycle-card__n {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--lh-cycle-accent);
}
.lh-cycle-card[class*="lh-cycle-card--"] .lh-cycle-card__eyebrow::before,
.lh-cycle-card[class*="lh-cycle-card--"] .lh-cycle-card__n::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background-color: var(--lh-cycle-accent);
	-webkit-mask-image: var(--lh-cycle-ornament);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: var(--lh-cycle-ornament);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* Homepage cycle card hover overlay — bordered pill picks up the
   cycle accent so the hover state is cycle-coded too. */
.lh-cycle-card[class*="lh-cycle-card--"] .lh-cycle-card__hover-label {
	border-color: var(--lh-cycle-accent);
	background: color-mix(in srgb, var(--lh-cycle-accent) 25%, transparent);
}

/* ----- Mega-menu Shop-by-Cycle items ------------------------------
   Add the era ornament in the left gutter of each cycle link so the
   menu reads at a glance which cycle is which.                       */
[class*="lh-mega-cycle--"] a {
	position: relative;
	padding-left: calc(0.625rem + 18px + 8px);
}
[class*="lh-mega-cycle--"] a::before {
	content: '';
	position: absolute;
	left: 0.625rem;
	top: 0.7rem;
	width: 16px;
	height: 16px;
	background-color: var(--lh-cycle-accent);
	-webkit-mask-image: var(--lh-cycle-ornament);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: var(--lh-cycle-ornament);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}
@media (max-width: 980px) {
	/* Mobile drawer — keep the ornament but reposition for the
	   inlined link spacing. */
	[class*="lh-mega-cycle--"] a {
		padding-left: calc(1rem + 18px + 8px);
	}
	[class*="lh-mega-cycle--"] a::before {
		left: 1rem;
		top: 0.65rem;
	}
}

/* ============================================================
   Sample download email gate — modal dialog
   ============================================================ */

/* Reset native dialog defaults, render as a centered card with backdrop */
.lh-gate-dialog {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: min(520px, calc(100vw - 2rem));
	width: 100%;
	margin: auto;
	color: var(--lh-ink);
}
.lh-gate-dialog[open] {
	/* native <dialog> centers itself; ensure same in fallback */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
}
.lh-gate-dialog::backdrop {
	background: rgba(12, 38, 64, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
/* Fallback backdrop for non-supporting browsers when html.lh-gate-open is set */
html.lh-gate-open::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(12, 38, 64, 0.55);
	pointer-events: none;
}
html.lh-gate-open .lh-gate-dialog:not([open]) ~ * { /* no-op safety */ }

.lh-gate-dialog__inner {
	position: relative;
	background: var(--lh-white);
	border-radius: var(--lh-radius-lg, 14px);
	box-shadow: 0 24px 60px rgba(12, 38, 64, 0.30);
	padding: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
.lh-gate-dialog__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--lh-muted);
	cursor: pointer;
	border-radius: 50%;
	transition: background 140ms ease, color 140ms ease;
}
.lh-gate-dialog__close:hover,
.lh-gate-dialog__close:focus-visible {
	background: var(--lh-cream);
	color: var(--lh-primary);
}
.lh-gate-dialog__eyebrow {
	margin: 0 0 0.5rem;
}
.lh-gate-dialog__title {
	font-family: var(--lh-font-serif);
	color: var(--lh-primary);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.2;
	margin: 0 0 0.6rem;
	font-weight: 700;
}
.lh-gate-dialog__lede {
	color: var(--lh-muted);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0 0 1.25rem;
}
.lh-gate-form .lh-form-actions {
	margin-top: 0.5rem;
}

/* Card-CTA as a button (matches the visual rhythm of linked cards) */
.lh-home-pillars__card-cta--btn {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	font-family: var(--lh-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	display: inline-block;
	margin-top: 1rem;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: color 140ms ease;
}
.lh-home-pillars__card-cta--btn:hover,
.lh-home-pillars__card-cta--btn:focus-visible {
	color: var(--lh-secondary-dark);
}

/* Whole-card hover lift for gated cards mirrors the linked-card behavior */
.lh-home-pillars__card--gated:hover,
.lh-home-pillars__card--gated:focus-within {
	box-shadow: var(--lh-shadow-md, 0 10px 24px rgba(33, 37, 47, 0.10));
	transform: translateY(-2px);
	border-color: var(--lh-primary-soft);
}
.lh-home-pillars__card--gated { transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; }

/* ============================================================
   Meet Our Team page — grid of circular portraits + bios
   ============================================================ */
.lh-team-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 2vw + 1rem, 2.75rem) clamp(1.25rem, 1.5vw + 0.5rem, 2rem);
}
@media (max-width: 980px) {
	.lh-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.lh-team-grid { grid-template-columns: 1fr; }
}

/* --- Meet Our Team: horizontal scroll row with prev/next arrows.
       When the cards are wrapped in .lh-team-scroller (page-team.php), the
       grid becomes a single non-wrapping row that scrolls sideways instead of
       wrapping members onto a second line. Inline JS in the template drives the
       arrow buttons; touch users swipe. Mirrors the .lh-book-scroll pattern. */
.lh-team-scroller { position: relative; }
.lh-team-scroller .lh-team-grid {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0.5rem;
}
.lh-team-scroller .lh-team-grid::-webkit-scrollbar { display: none; }
.lh-team-scroller .lh-team-card {
	flex: 0 0 clamp(200px, 22vw, 240px);
	min-width: 0;
	scroll-snap-align: start;
}
.lh-team-scroll-btn {
	position: absolute;
	top: clamp(90px, 11vw, 110px);
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--lh-white, #fff);
	border: 1.5px solid var(--lh-primary, #1d2a4d);
	color: var(--lh-primary, #1d2a4d);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.lh-team-scroll-btn:hover {
	background: var(--lh-primary, #1d2a4d);
	color: var(--lh-white, #fff);
}
.lh-team-scroll-btn--prev { left: -6px; }
.lh-team-scroll-btn--next { right: -6px; }
.lh-team-scroll-btn.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media (hover: none) {
	/* Touch devices swipe — no arrows needed. */
	.lh-team-scroll-btn { display: none; }
}

.lh-team-card {
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Circular portrait — soft shadow, cream fallback when no photo */
.lh-team-card__media {
	position: relative;
	width: clamp(180px, 22vw, 220px);
	height: clamp(180px, 22vw, 220px);
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--lh-cream);
	box-shadow: 0 8px 22px rgba(33, 37, 47, 0.10);
	transition: box-shadow 220ms ease, transform 220ms ease;
}
.lh-team-card:hover .lh-team-card__media {
	box-shadow: 0 14px 30px rgba(33, 37, 47, 0.16);
	transform: translateY(-2px);
}
.lh-team-card__media img,
.lh-team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Initials fallback when no profile photo is set */
.lh-team-card__media-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lh-font-serif);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 600;
	color: var(--lh-primary-soft);
	letter-spacing: 0.04em;
}

/* Role eyebrow (above name) */
.lh-team-card__role {
	font-family: var(--lh-font-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lh-secondary);
	margin: 0 0 0.4rem;
}

/* Name */
.lh-team-card__name {
	font-family: var(--lh-font-serif);
	color: var(--lh-primary);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.75rem;
}

/* Bio prose */
.lh-team-card__bio {
	color: var(--lh-ink);
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 36ch;
	margin: 0 auto;
}
.lh-team-card__bio p {
	margin: 0 0 0.75em;
}
.lh-team-card__bio p:last-child {
	margin-bottom: 0;
}
.lh-team-card__bio a {
	color: var(--lh-primary);
	text-decoration: underline;
	text-decoration-color: rgba(49, 87, 124, 0.35);
	text-underline-offset: 3px;
}
.lh-team-card__bio a:hover {
	text-decoration-color: currentColor;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.lh-team-card:hover .lh-team-card__media {
		transform: none;
	}
}

/* Speaking events list — custom-rendered from Google Calendar iCal feeds.
   Each row: date (or multi-day range), a Scott/Becky badge, title, location. */
.lh-events {
	list-style: none;
	margin: 1.5rem auto 0;
	padding: 0;
	max-width: 680px;
}
.lh-event {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--lh-divider);
}
.lh-event:first-child { padding-top: 0; }
.lh-event__date {
	font-family: var(--lh-font-sans);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--lh-primary-dark, #1F3A57);
	white-space: nowrap;
}
.lh-event__who {
	display: inline-block;
	font-family: var(--lh-font-sans);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	margin-bottom: 0.35rem;
	color: #fff;
}
.lh-event__who--scott { background: var(--lh-primary, #31577C); }
.lh-event__who--becky { background: var(--lh-secondary, #8AAB85); }
.lh-event__title {
	font-family: var(--lh-font-serif);
	font-size: 1.05rem;
	font-weight: 500;
	margin: 0;
	color: var(--lh-ink);
	line-height: 1.3;
}
.lh-event__loc {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: var(--lh-muted);
}
@media (max-width: 540px) {
	.lh-event { grid-template-columns: 1fr; gap: 0.35rem; }
}