/* =========================================================================
   Lanton Church of Christ — theme.css
   Warm Tennessee-summer redesign: golden amber + sunlit cream + sky blue,
   Playfair Display + Plus Jakarta Sans, bright sunlit hero, cream cards with
   soft golden shadows, staggered slide-ups, transparent->warm-white nav,
   warm amber parallax overlays. No libraries.
   Design tokens also live in theme.json.
   ========================================================================= */

:root {
	/* Brand colors sampled from the stained-glass logo */
	--ink: #2e2a1c;          /* warm stained-glass ink — body text & headings */
	--ink-soft: #46402c;
	--gold: #eaaa38;         /* golden amber — the logo's sun */
	--gold-dark: #c6881a;    /* deep amber */
	--gold-light: #fcd270;   /* bright sun (hover) */
	--teal: #548c9a;         /* deep window-frame teal */
	--teal-light: #9ad2e0;   /* sky teal */
	--sage: #7e9e63;         /* hill sage (the green at the logo's base) */
	--sage-light: #a8b67e;   /* light sage */
	--sage-dark: #5f7a47;    /* deep sage (button text/outline on light bg) */
	--cream: #fbf1d7;        /* sunlit cream */
	--cream-soft: #fffdf8;   /* warm white */
	--mist: #efe6d3;         /* warm hairline */
	--header-h: 84px;

	/* Warm, airy overlays — let the sunlit photos shine through. */
	--warm-veil: linear-gradient(180deg, rgba(226, 167, 46, 0.28) 0%, rgba(150, 95, 20, 0.5) 100%);
	--warm-veil-strong: linear-gradient(180deg, rgba(180, 120, 30, 0.42) 0%, rgba(110, 70, 16, 0.66) 100%);
	--ease: cubic-bezier(0.16, 0.84, 0.44, 1);
}

body { background: var(--cream-soft); }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Shared type helpers ------------------------------------------------ */
.lanton-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gold);
	margin-bottom: 1.25rem;
}
.lanton-display { font-weight: 600; letter-spacing: -0.02em; }
.lanton-light, .lanton-light :where(strong) { color: #fff !important; }
.lanton-lede { color: rgba(255, 255, 255, 0.9); font-weight: 400; }

/* =========================================================================
   HEADER — fixed; frosted by default, transparent over the hero,
   re-frosts on scroll (toggled by JS).
   ========================================================================= */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(255, 253, 248, 0.9);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--mist);
	transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.site-header.is-solid.is-scrolled { box-shadow: 0 10px 34px rgba(180, 120, 30, 0.16); }

/* Over the hero the header stays frosted (not fully transparent) so the colored
   stained-glass logo and the nav read cleanly. It just loses its border/shadow
   until you scroll. */
.site-header.is-transparent {
	background: rgba(255, 253, 248, 0.78);
	border-bottom-color: transparent;
}

/* Brand: the stained-glass logo. Constrain by height so the wide lockup fits
   the bar; hide the text fallback only when the logo image actually renders. */
.site-header__brand { min-height: 60px; }
.wp-block-site-logo { line-height: 0; margin: 0; }
.wp-block-site-logo img,
.wp-block-site-logo a img {
	height: 58px;
	width: auto;
	max-width: none;
	display: block;
}
.site-header__brand:has(.wp-block-site-logo img) .site-title-fallback { display: none; }

.site-header__inner { max-width: 1240px; margin-inline: auto; width: 100%; }
.wp-block-site-title a { text-decoration: none; color: var(--ink); letter-spacing: -0.01em; }
.site-title-fallback a { font-size: 1.35rem; }
.site-nav .wp-block-navigation-item__content {
	color: var(--ink);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	font-weight: 600;
}
.site-nav .wp-block-navigation-item__content:hover { color: var(--gold-dark); }
.site-nav__cta .wp-block-button__link { padding: 0.62rem 1.55rem; font-size: 0.72rem; }

/* =========================================================================
   MOBILE NAV OVERLAY
   The header sets `backdrop-filter`, which makes it a containing block for
   `position: fixed` descendants — that trapped WordPress's overlay menu
   inside the ~72px header bar, so only the first link ("About") was visible
   and the rest had to be scrolled to. Dropping the filter while the modal is
   open lets the overlay fill the viewport again; the rules below then size
   and space the links so every page fits on one screen.
   ========================================================================= */
html.has-modal-open .site-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: rgba(255, 253, 248, 0.96);
}
/* Same escape hatch for browsers/WP builds that don't set the html class. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
html.has-modal-open { overflow: hidden; }

/* Toggles: a comfortable tap target for the hamburger and the close ✕. */
.site-nav .wp-block-navigation__responsive-container-open {
	color: var(--ink);
	padding: 0.4rem;
}
.site-nav .wp-block-navigation__responsive-container-open svg,
.site-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.site-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 0.9rem;
	right: 1rem;
	z-index: 3;
	padding: 0.4rem;
	color: #fff;
}

/* The overlay itself: a real full-screen sheet, links centred as one list. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 4.75rem 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* `margin: auto` centres the list when it fits and still lets it scroll
   from the top on very short screens instead of clipping. */
.site-nav .is-menu-open .wp-block-navigation__responsive-close {
	width: 100%;
	max-width: none;
	margin-block: auto;
}
/* Core reserves room above the list for its close button; ours is pinned to
   the viewport corner, so that space would only push the links off-centre. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	width: 100%;
	margin: 0;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 0;
}
.site-nav .is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: clamp(0.2rem, 1.6vh, 0.85rem) !important;
}
.site-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.site-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: clamp(1rem, 4.4vw, 1.35rem);
	letter-spacing: 0.14em;
	padding: clamp(0.5rem, 1.6vh, 0.9rem) 0.5rem;
}
.site-nav .is-menu-open .wp-block-navigation-item__content:hover,
.site-nav .is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--gold); }
.site-nav .is-menu-open .site-nav__cta {
	justify-content: center;
	margin-top: clamp(0.6rem, 2.4vh, 1.4rem);
}
.site-nav .is-menu-open .site-nav__cta .wp-block-button__link {
	padding: 0.85rem 2.4rem;
	font-size: 0.8rem;
}

/* =========================================================================
   ANIMATIONS — letter-by-letter hero, load fade, staggered scroll-reveal
   ========================================================================= */
/* Hero headline, split into words/characters by JS. The word wrapper keeps
   each word's letters together so lines only break between whole words. */
.lanton-word-wrap { display: inline-block; }
.lanton-char { display: inline-block; opacity: 0; transform: translateY(0.6em); will-change: transform; }
.lanton-animate-letters.is-in .lanton-char {
	animation: lanton-char-in 0.7s var(--ease) both;
	animation-delay: var(--d, 0ms);
}
@keyframes lanton-char-in { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }

/* Load fade-up (hero eyebrow / lede / button) */
.lanton-fade { opacity: 0; transform: translateY(22px); }
.lanton-fade.is-in { animation: lanton-fade-up 0.9s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes lanton-fade-up { to { opacity: 1; transform: none; } }

/* Scroll-reveal: staggered slide-up via CSS keyframes + IntersectionObserver */
.lanton-reveal { opacity: 0; transform: translateY(48px); }
.lanton-reveal.is-in { animation: lanton-slide-up 0.85s var(--ease) both; animation-delay: var(--lanton-delay, 0ms); }
@keyframes lanton-slide-up { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

/* Word-by-word verse */
.lanton-verse { font-style: italic; line-height: 1.18; font-weight: 500; }
.lanton-word { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.lanton-verse.is-in .lanton-word { opacity: 1; transform: none; }
.lanton-verse-ref {
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 0.85rem !important;
	opacity: 0.8;
	margin-top: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.lanton-fade, .lanton-reveal, .lanton-word, .lanton-char, .lh-verse__ref {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* Keep headings from breaking mid-word (WP core defaults to break-word) */
:where(.wp-block-heading, h1, h2, h3, h4) { overflow-wrap: normal; word-break: normal; }

/* =========================================================================
   BUTTONS — warm golden amber, white text, brightening lift on hover
   ========================================================================= */
.lanton-btn .wp-block-button__link {
	position: relative;
	box-shadow: 0 8px 22px rgba(126, 158, 99, 0.32);
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.lanton-btn .wp-block-button__link:hover {
	background: var(--sage-light);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(126, 158, 99, 0.42);
}

/* Ghost (on light bg): sage outline -> sage fill */
.lanton-btn.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--sage-dark);
	border: 2px solid var(--sage);
	box-shadow: none;
}
.lanton-btn.is-style-ghost .wp-block-button__link:hover {
	background: var(--sage);
	color: #fff;
	border-color: var(--sage);
	box-shadow: 0 12px 26px rgba(126, 158, 99, 0.32);
}

/* Ghost light (on photo bg): white outline -> white fill, warm text on hover */
.lanton-btn.is-style-ghost-light .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.7);
	box-shadow: none;
}
.lanton-btn.is-style-ghost-light .wp-block-button__link:hover {
	background: #fff;
	color: var(--sage-dark);
	border-color: #fff;
	transform: translateY(-2px);
}

/* =========================================================================
   INNER PAGES
   ========================================================================= */
.lanton-page-hero {
	background: linear-gradient(160deg, #fdf3da 0%, #fbe6bd 100%);
	color: var(--ink);
	padding-top: calc(var(--header-h) + clamp(3rem, 7vh, 5.5rem)) !important;
	padding-bottom: clamp(3rem, 7vh, 5.5rem) !important;
	text-align: center;
	border-bottom: 1px solid var(--mist);
}
.lanton-page-hero :where(h1) {
	color: var(--ink);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}
/* Sermons page: the archive itself is the point, so the title band and the
   space beneath it are pulled in tight (templates/page-sermons.html). */
.lanton-page-hero.is-compact {
	padding-top: calc(var(--header-h) + clamp(1.4rem, 3.2vh, 2.4rem)) !important;
	padding-bottom: clamp(1.4rem, 3.2vh, 2.4rem) !important;
}
.lanton-page-body.is-compact { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

.lanton-page-hero .lanton-eyebrow { color: var(--gold-dark); }
.lh-hero .lanton-eyebrow { color: var(--sage); }
.wp-site-blocks main > .wp-block-group:first-child:not(.lanton-page-hero) { padding-top: calc(var(--header-h) + 2rem); }

/* Inner-page body: generous vertical rhythm, content free to go alignwide. */
.lanton-page { overflow-x: clip; }
.lanton-page-body { padding-block: clamp(3rem, 7vw, 5.5rem); }
.lanton-page-body .wp-block-post-content > :first-child { margin-top: 0; }

/* ---- SERVICE TIMES & LOCATION ("Find Us") ----------------------------- */
.lanton-intro__lede { color: var(--muted); }
.lanton-times-grid {
	gap: clamp(1rem, 2vw, 1.6rem) !important;
	align-items: stretch;
}
.lanton-times-grid > .wp-block-column { display: flex; }
.lanton-time {
	flex: 1;
	background: var(--cream-soft);
	border: 1px solid var(--mist);
	border-radius: 16px;
	padding: clamp(1.5rem, 2.4vw, 2.1rem) !important;
	box-shadow: 0 10px 28px rgba(150, 95, 20, 0.08);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.lanton-time:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 46px rgba(150, 95, 20, 0.18);
	border-color: rgba(226, 167, 46, 0.55);
}
.lanton-time__day {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--gold-dark);
	margin: 0 0 0.55rem;
}
.lanton-time__name {
	margin: 0 0 0.9rem;
	position: relative;
	padding-bottom: 0.9rem;
	line-height: 1.2;
}
.lanton-time__name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 3px;
	border-radius: 2px;
	background: var(--teal);
}
.lanton-time__hour { margin: 0; color: var(--ink-soft); font-weight: 600; }

.lanton-find { gap: clamp(2rem, 4.5vw, 4rem) !important; }
.lanton-find__info .wp-block-heading { line-height: 1.25; margin: 0 0 1rem; }
.lanton-find__info p { color: var(--muted); }
.lanton-visit-cta p { color: var(--muted); }

.lanton-bio, .lanton-ministry, .lanton-sermon, .lanton-event-row {
	background: var(--cream-soft);
	border: 1px solid var(--mist);
	border-radius: 14px;
	padding: 1.9rem !important;
	box-shadow: 0 10px 28px rgba(150, 95, 20, 0.1);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.lanton-bio:hover, .lanton-ministry:hover, .lanton-sermon:hover, .lanton-event-row:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 44px rgba(150, 95, 20, 0.2);
	border-color: rgba(226, 167, 46, 0.5);
}
.lanton-bio__role, .lanton-sermon__meta {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--gold-dark);
}
.lanton-card-grid { gap: 1.5rem; }

/* About page: the congregation photo in a teal stained-glass-style frame */
.lanton-about-photo { margin: 0; position: relative; }
.lanton-about-photo::before {
	content: "";
	position: absolute;
	inset: 16px -16px -16px 16px;
	border: 2px solid var(--teal);
	border-radius: 14px;
	z-index: 0;
}
.lanton-about-photo img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
	box-shadow: 0 26px 56px rgba(84, 90, 40, 0.22);
}
.lanton-about-intro .lanton-eyebrow { color: var(--gold-dark); }

.lanton-map { position: relative; margin: 0; }
.lanton-map iframe {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: 380px;
	border: 0;
	border-radius: 18px;
	display: block;
	box-shadow: 0 18px 40px rgba(84, 90, 40, 0.14);
}
/* Find Us page: a taller map inside a teal stained-glass-style offset frame.
   The frame sits outside the column, so it only shows where there's room. */
.lanton-find .lanton-map iframe {
	min-height: clamp(400px, 48vh, 560px);
	box-shadow: 0 26px 56px rgba(84, 90, 40, 0.18);
}
@media (min-width: 1024px) {
	.lanton-find .lanton-map::after {
		content: "";
		position: absolute;
		inset: 16px -16px -16px 16px;
		border: 2px solid var(--teal);
		border-radius: 18px;
		z-index: 0;
		pointer-events: none;
	}
}

/* Soft filled fields with a label above + an icon inside (see reference). */
.lanton-contact-form input,
.lanton-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.68rem 1rem 0.68rem 2.75rem;
	border: 1px solid transparent;
	border-radius: 10px;
	font: inherit;
	background-color: #eeeae1;
	background-repeat: no-repeat;
	background-position: 1rem center;
	background-size: 17px 17px;
	margin-bottom: 0.85rem;
	color: var(--ink);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lanton-contact-form input::placeholder,
.lanton-contact-form textarea::placeholder { color: #a89f8c; }
.lanton-contact-form textarea {
	background-position: 1rem 0.68rem;
	min-height: 104px;
	resize: none;
}
.lanton-contact-form input:focus,
.lanton-contact-form textarea:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(234, 170, 56, 0.18);
}

/* Field icons (warm-gray feather glyphs as inline SVG backgrounds). */
.lanton-contact-form #lc-name {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a89f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.lanton-contact-form input[type="email"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a89f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.lanton-contact-form input[type="tel"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a89f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.lanton-contact-form #lc-subject {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a89f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}
.lanton-contact-form #lc-message {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a89f8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.lanton-contact-form button {
	display: block;
	margin: 0.75rem auto 0;
	background: var(--sage);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 1rem 3rem;
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.82rem;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(126, 158, 99, 0.3);
	transition: background 0.3s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.lanton-contact-form button:hover { background: var(--sage-light); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(126, 158, 99, 0.4); }

/* Two-up field grid (name/email, phone/subject) collapsing to one column. */
.lanton-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}
@media (max-width: 600px) { .lanton-form-grid { grid-template-columns: 1fr; } }
.lanton-field { margin: 0; }
.lanton-field label {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--ink);
	margin-bottom: 0.45rem;
}
.lanton-field input,
.lanton-field textarea { margin-bottom: 0.85rem; }
.lanton-req { color: var(--gold-dark); margin-left: 1px; }

/* reCAPTCHA widget breathing room, centered to match the submit button. */
.lanton-contact-form .g-recaptcha { margin: 0.25rem 0 1.25rem; display: flex; justify-content: center; }

/* Honeypot: hidden from people, present for bots. */
.lanton-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Submission status banners. */
.lanton-form-status {
	padding: 1rem 1.25rem;
	border-radius: 6px;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	border-left: 4px solid;
}
.lanton-form-status.is-success {
	background: #eef6e9;
	border-color: #6b8e3d;
	color: #3d5722;
}
.lanton-form-status.is-error {
	background: #fdeeea;
	border-color: #c2531a;
	color: #7a2f0c;
}

/* Home-page contact section. Flow at natural height so a tall form is never
   clipped (overrides .lanton-section's 100vh + overflow:hidden + flex-center,
   which centered the form and cut off its top & bottom). Works for both the
   current `lh-contact` markup and the legacy `lanton-contact` markup. */
.lanton-contact,
.lh-contact {
	display: block;
	min-height: 0;
	height: auto;
	overflow: visible;
	text-align: center;
	padding-block: clamp(4rem, 9vh, 7rem);
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
/* Center the form on the page and keep its fields a comfortable width. */
.lanton-contact .lanton-contact-form-wrap,
.lh-contact .lanton-contact-form-wrap {
	margin: 1.75rem auto 0;
	max-width: 620px;
	text-align: left;
}

.lanton-note {
	background: var(--cream);
	border-left: 3px solid var(--gold);
	padding: 1rem 1.25rem;
	border-radius: 4px;
	font-size: 0.92rem;
	color: var(--muted, #6b6457);
}

/* =========================================================================
   YOUTUBE VIDEO GALLERY  (Videos page — [lanton_youtube])
   ========================================================================= */
.lanton-videos { margin-top: 0.5rem; }

/* ---- "Most Recent Sermon" spotlight ---- */
.lanton-featured { margin-bottom: 2.75rem; }
.lanton-featured__eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-dark);
	text-align: center;
}
.lanton-featured__card {
	max-width: 900px;
	margin-inline: auto;
	border-width: 2px;
	border-color: rgba(226, 167, 46, 0.45);
	box-shadow: 0 22px 50px rgba(150, 95, 20, 0.2);
}
/* It's a spotlight, not a grid card — no hover lift. */
.lanton-featured__card:hover {
	transform: none;
	box-shadow: 0 22px 50px rgba(150, 95, 20, 0.2);
}
.lanton-featured__card .lanton-video__play { width: 82px; height: 82px; }
.lanton-featured__card .lanton-video__play::after { border-width: 14px 0 14px 23px; }
.lanton-featured__card .lanton-video__time { font-size: 0.8rem; padding: 0.34rem 0.5rem; }
.lanton-featured__body {
	padding: 1.15rem 1.5rem 1.35rem;
	text-align: center;
}
.lanton-featured__title {
	margin: 0;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
	line-height: 1.25;
	color: var(--ink);
}
.lanton-featured__date {
	margin: 0.45rem 0 0;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-dark);
}
@media (max-width: 560px) {
	.lanton-featured { margin-bottom: 1.85rem; }
	.lanton-featured__card { border-width: 1px; }
	.lanton-featured__card .lanton-video__play { width: 62px; height: 62px; }
	.lanton-featured__card .lanton-video__play::after { border-width: 11px 0 11px 18px; }
	.lanton-featured__body { padding: 0.9rem 1rem 1.05rem; }
}

.lanton-videos__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin-bottom: 2.5rem;
}
.lanton-videos__input {
	flex: 1 1 320px;
	max-width: 520px;
	font-family: inherit;
	font-size: 1.02rem;
	color: var(--ink);
	background: var(--cream-soft);
	border: 1px solid rgba(226, 167, 46, 0.4);
	border-radius: 999px;
	padding: 0.85rem 1.4rem;
	box-shadow: 0 10px 26px rgba(150, 95, 20, 0.1);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.lanton-videos__input::placeholder { color: var(--muted, #9c8b6f); }
.lanton-videos__input:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 4px rgba(234, 170, 56, 0.18), 0 12px 30px rgba(150, 95, 20, 0.16);
}
.lanton-videos__count {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

.lanton-videos__grid {
	display: grid;
	/* Four across on desktop, stepping down with the viewport. minmax(0,1fr)
	   (not auto-fill) so the columns share the row exactly rather than
	   dropping to two when the cards' min-width doesn't quite fit. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75rem 1.4rem;
}
@media (max-width: 1180px) { .lanton-videos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .lanton-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lanton-videos__grid { grid-template-columns: 1fr; } }

/* ---- Length filter tabs (All / Full Messages / Short Clips) ---- */
.lanton-videos__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	order: 3;
	flex: 1 1 100%;
}
@media (min-width: 900px) {
	.lanton-videos__tabs { order: 0; flex: 0 1 auto; }
}
.lanton-videos__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 1px solid rgba(46, 42, 28, 0.16);
	border-radius: 999px;
	padding: 0.6rem 1.15rem;
	cursor: pointer;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.lanton-videos__tab:hover { border-color: var(--gold); background: rgba(234, 170, 56, 0.1); }
.lanton-videos__tab:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 2px; }
.lanton-videos__tab.is-active {
	background: var(--gold);
	border-color: var(--gold);
	color: #fff;
	box-shadow: 0 8px 20px rgba(150, 95, 20, 0.22);
}
.lanton-videos__tabshort { display: none; }
.lanton-videos__tabcount {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	opacity: 0.65;
}
.lanton-videos__tab.is-active .lanton-videos__tabcount { opacity: 0.85; }

/* Runtime badge, bottom-right of the thumbnail (as on YouTube). */
.lanton-video__time {
	position: absolute;
	right: 0.55rem;
	bottom: 0.55rem;
	background: rgba(19, 17, 11, 0.82);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.28rem 0.42rem;
	border-radius: 4px;
	pointer-events: none;
}

.lanton-video {
	display: flex;
	flex-direction: column;
	background: var(--cream-soft);
	border: 1px solid rgba(226, 167, 46, 0.22);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 16px 36px rgba(150, 95, 20, 0.14);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}
.lanton-video:hover {
	transform: translateY(-8px);
	box-shadow: 0 28px 56px rgba(150, 95, 20, 0.26);
	border-color: rgba(226, 167, 46, 0.5);
}
.lanton-video[hidden] { display: none; }

.lanton-video__thumb,
.lanton-video__player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	margin: 0;
}
.lanton-video__thumb {
	position: relative;
	cursor: pointer;
	background: var(--mist);
	overflow: hidden;
}
.lanton-video__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease);
}
.lanton-video:hover .lanton-video__thumb img { transform: scale(1.05); }

/* Play button */
.lanton-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(234, 170, 56, 0.92);
	box-shadow: 0 8px 24px rgba(110, 70, 16, 0.45);
	transition: transform 0.3s var(--ease), background 0.3s ease;
}
.lanton-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}
.lanton-video__thumb:hover .lanton-video__play,
.lanton-video__thumb:focus-visible .lanton-video__play {
	transform: scale(1.12);
	background: var(--gold-light);
}
.lanton-video__thumb:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }

.lanton-video__body { padding: 1.15rem 1.3rem 1.4rem; }
.lanton-video__date {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-dark);
}
.lanton-video__title {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.35;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A card whose player is open shouldn't lift/scale on touch-hover. */
.lanton-video.is-playing { transform: none; }
.lanton-video.is-playing:hover { transform: none; box-shadow: 0 16px 36px rgba(150, 95, 20, 0.14); }

/* =========================================================================
   VIDEO GALLERY — MOBILE
   Phones get: a full-width search field, the length filters as a single
   swipeable row (so long labels never wrap into a ragged block), and tighter
   cards so more than one fits on screen at a time.
   ========================================================================= */
@media (max-width: 860px) {
	.lanton-videos__search {
		gap: 0.85rem;
		margin-bottom: 1.75rem;
	}
	.lanton-videos__input {
		flex: 1 1 100%;
		max-width: none;
		font-size: 1rem;
		padding: 0.9rem 1.25rem;
	}

	/* All three filters share the row and always fit, so nothing is clipped
	   and there's no hidden horizontal scroll to discover. */
	.lanton-videos__tabs {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.4rem;
		width: 100%;
		overflow: visible;
	}
	.lanton-videos__tab {
		justify-content: center;
		min-width: 0;
		white-space: nowrap;
		font-size: 0.72rem;
		letter-spacing: 0.04em;
		padding: 0.66rem 0.3rem;
		gap: 0.34rem;
	}
	/* Swap "Full Messages" for "Full" etc. so the labels fit small screens. */
	.lanton-videos__tablabel { display: none; }
	.lanton-videos__tabshort { display: inline; }
	.lanton-videos__count {
		order: 4;
		flex: 1 1 100%;
		font-size: 0.76rem;
	}
}

@media (max-width: 380px) {
	.lanton-videos__tab {
		flex-direction: column;
		gap: 0.15rem;
		padding: 0.5rem 0.2rem;
		font-size: 0.68rem;
		line-height: 1.2;
	}
}

@media (max-width: 560px) {
	.lanton-videos__grid { gap: 1.15rem; }

	/* Flatter cards: the lift/shadow is a pointer affordance that just eats
	   vertical space on a phone. */
	.lanton-video {
		border-radius: 12px;
		box-shadow: 0 8px 20px rgba(150, 95, 20, 0.12);
	}
	.lanton-video:hover { transform: none; box-shadow: 0 8px 20px rgba(150, 95, 20, 0.12); }
	.lanton-video:hover .lanton-video__thumb img { transform: none; }

	.lanton-video__body { padding: 0.85rem 1rem 1rem; }
	.lanton-video__date { font-size: 0.68rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
	.lanton-video__title { font-size: 1.02rem; line-height: 1.3; }

	/* Smaller play target so it doesn't swallow the thumbnail, but still well
	   over the 44px minimum touch size. */
	.lanton-video__play { width: 52px; height: 52px; }
	.lanton-video__play::after { border-width: 9px 0 9px 15px; }
	.lanton-video__time { font-size: 0.68rem; right: 0.45rem; bottom: 0.45rem; }

	.lanton-videos__empty { font-size: 0.95rem; }
}

.lanton-videos__empty {
	margin-top: 2rem;
	text-align: center;
	font-size: 1.05rem;
	color: var(--muted, #6b6457);
}
.lanton-videos-notice { max-width: 640px; margin: 0 auto; }

/* =========================================================================
   FOOTER
   ========================================================================= */
/* Brand accent stripe across the top — sage. */
.site-footer { position: relative; border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--sage) 0%, var(--sage) 60%, var(--sage-light) 100%) 1; }
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: var(--sage-light); }
.site-footer__links { list-style: none; margin: 0; padding: 0; line-height: 2.1; }
.site-footer__social { margin-top: 1.25rem; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 781px) {
	:root { --header-h: 72px; }
	.site-header__brand { min-height: 46px; }
	.wp-block-site-logo img, .wp-block-site-logo a img { height: 44px; }
	.site-header__inner { flex-wrap: wrap; }
	.lanton-about-intro { flex-direction: column; }
	.lanton-about-intro .wp-block-column { flex-basis: 100% !important; }
	.lanton-find { flex-direction: column; }
	.lanton-find .wp-block-column { flex-basis: 100% !important; }
}

/* Time cards: 4 across on desktop, 2 across on tablet, stacked on phones. */
@media (min-width: 600px) and (max-width: 1023px) {
	.lanton-times-grid { flex-wrap: wrap !important; }
	.lanton-times-grid > .wp-block-column { flex-basis: calc(50% - 0.8rem) !important; }
}

/* =========================================================================
   MODERN HOMEPAGE (lh-*) — restrained, type-led, minimal imagery.
   Supersedes the old full-bleed parallax homepage classes
   (.lanton-section / -hero / -mission / -scripture / -events / -cta / -card),
   which the front page no longer uses.
   ========================================================================= */
.lanton-home { overflow-x: clip; }
.lh-sec { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ---- HERO: split, one contained photo, no parallax --------------------- */
.lh-hero {
	background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
	padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.lh-hero__cols { gap: clamp(2rem, 5vw, 4.5rem) !important; align-items: center; }
.lh-hero__text { text-align: left; }
.lh-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: clamp(2.9rem, 6vw, 4.7rem) !important;
	line-height: 1.02;
	letter-spacing: -0.022em;
	color: var(--ink);
	margin: 0.35rem 0 1.1rem;
}
.lh-lede { color: var(--muted); max-width: 42ch; }
.lh-hero__meta {
	margin-top: 1.7rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--ink-soft);
}
.lh-hero__meta::before {
	content: ""; display: inline-block; width: 22px; height: 2px;
	background: var(--gold); vertical-align: middle; margin-right: 0.65rem;
}
.lh-hero__media { position: relative; }
.lh-hero__media::after {
	content: ""; position: absolute; right: -16px; bottom: -16px;
	width: 64%; height: 60%; border: 2px solid var(--teal);
	border-radius: 18px; z-index: 0;
}
.lh-hero__figure { position: relative; z-index: 1; margin: 0; }
.lh-hero__figure img {
	display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: 18px; box-shadow: 0 30px 64px rgba(84, 90, 40, 0.2);
}

/* ---- WELCOME: centered statement + three plain notes ------------------- */
.lh-welcome { background: var(--cream-soft); text-align: center; }
.lh-welcome .lanton-eyebrow { color: var(--sage); }
.lh-times-sec .lanton-eyebrow,
.lh-events .lanton-eyebrow,
.lh-contact .lanton-eyebrow { color: var(--sage); }
.lh-welcome__head h2 { letter-spacing: -0.01em; }
.lh-muted { color: var(--muted); }
.lh-notes { gap: clamp(1.25rem, 2.5vw, 1.75rem) !important; align-items: stretch; }
.lh-note {
	text-align: left;
	background: #fff;
	border: 1px solid var(--mist);
	border-radius: 16px;
	padding: clamp(1.6rem, 2.5vw, 2.15rem) !important;
	box-shadow: 0 10px 28px rgba(150, 95, 20, 0.07);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.lh-note:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 46px rgba(150, 95, 20, 0.14);
	border-color: rgba(126, 158, 99, 0.5);
}
.lh-note h3 { position: relative; padding-top: 1.15rem; margin: 0 0 0.5rem; }
.lh-note h3::before {
	content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px;
	border-radius: 2px; background: var(--sage);
}
.lh-note p { color: var(--muted); margin: 0; }

/* ---- TIMES & LOCATION: one clean card ---------------------------------- */
.lh-times-sec { background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%); }
.lh-times {
	background: var(--cream-soft);
	border: 1px solid var(--mist);
	border-radius: 18px;
	padding: clamp(1.75rem, 4vw, 3.25rem) !important;
	box-shadow: 0 20px 48px rgba(150, 95, 20, 0.09);
	gap: clamp(1.5rem, 4vw, 3rem) !important;
}
.lh-times__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.lh-times__list li {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: 0.8rem 0; border-bottom: 1px solid var(--mist);
}
.lh-times__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.lh-times__list strong { font-weight: 600; color: var(--ink); }
.lh-times__list span { color: var(--sage-dark); font-weight: 700; white-space: nowrap; }
.lh-times__loc { border-left: 1px solid var(--mist); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.lh-times__addr { color: var(--muted); line-height: 1.6; margin: 0 0 1.25rem; }

/* ---- SCRIPTURE: solid teal band --------------------------------------- */
.lh-verse {
	background: var(--sage);
	color: #fff;
	padding-block: clamp(4rem, 9vw, 7rem);
	text-align: center;
}
.lh-verse__eyebrow { color: rgba(255, 255, 255, 0.82) !important; }
.lh-verse__text,
.lh-verse__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic; font-weight: 500; color: #fff;
	line-height: 1.28; letter-spacing: -0.01em;
	display: flex; align-items: center; justify-content: center;
}
.lh-verse__inner { display: inline-block; }
.lh-verse__ref {
	margin-top: 1.6rem; color: rgba(255, 255, 255, 0.82);
	text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem; font-weight: 700;
	transition: opacity 0.5s ease;
}
.lh-verse__ref.is-leaving { opacity: 0; }

/* ---- EVENTS: clean cards on cream ------------------------------------- */
.lh-events { background: var(--cream-soft); }
.lh-events__head { gap: 1.25rem; }
.lh-events__all { margin: 0; }
.lh-cards { gap: clamp(1.25rem, 2.5vw, 1.75rem) !important; align-items: stretch; }
.lh-card {
	background: #fff;
	border: 1px solid var(--mist);
	border-radius: 16px;
	padding: clamp(1.6rem, 2.5vw, 2.15rem) !important;
	box-shadow: 0 10px 28px rgba(150, 95, 20, 0.07);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.lh-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 46px rgba(150, 95, 20, 0.14);
	border-color: rgba(226, 167, 46, 0.5);
}
.lh-card__date {
	text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem;
	font-weight: 700; color: var(--gold-dark); margin: 0 0 0.45rem;
}
.lh-card :where(h3) { margin: 0 0 0.5rem; color: var(--ink); }
.lh-card p { color: var(--muted); margin: 0; font-size: 0.98rem; }

/* ---- CONTACT ----------------------------------------------------------- */
.lh-contact { background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%); text-align: center; }
.lh-contact .lanton-contact-form { text-align: left; }
.lh-contact__head { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.lh-contact__head h2 { letter-spacing: -0.01em; margin: 0.35rem 0 0.6rem; }

/* Form sits in a raised white card so it reads as an intentional panel. */
.lh-contact__card {
	background: #fff;
	border: 1px solid var(--mist);
	border-radius: 20px;
	padding: clamp(1.6rem, 4vw, 3rem) !important;
	box-shadow: 0 24px 60px rgba(150, 95, 20, 0.1);
	position: relative;
	overflow: hidden;
}
/* Teal accent stripe along the top edge, echoing the logo's window frame. */
.lh-contact__card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--teal), var(--gold));
}
.lh-contact__card .lanton-contact-form-wrap { margin-top: 0; max-width: none; }

/* Small directions/service-times line below the card. */
.lh-contact__foot {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--muted, #6b6457);
	font-size: 0.95rem;
}
.lh-contact__foot strong { color: var(--ink); font-weight: 600; }
.lh-contact__foot a {
	color: var(--teal); font-weight: 600; text-decoration: none;
	white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.lh-contact__foot a:hover { border-color: var(--teal); }

/* ---- Homepage responsive ---------------------------------------------- */
@media (max-width: 781px) {
	.lh-hero__cols, .lh-notes, .lh-times, .lh-events__head { flex-direction: column; }
	.lh-hero__cols .wp-block-column,
	.lh-notes .wp-block-column,
	.lh-times .wp-block-column { flex-basis: 100% !important; }
	.lh-hero__media { order: -1; margin-bottom: 2rem; }
	.lh-hero__media::after { display: none; }
	.lh-hero__figure img { aspect-ratio: 16 / 11; }
	.lh-times__loc { border-left: 0; border-top: 1px solid var(--mist); padding-top: 1.5rem; padding-left: 0; }
	.lh-events__head { align-items: flex-start; }
	.lh-events__all { margin-top: 1.25rem; }
}

/* =========================================================================
   ABOUT PAGE (lh-about-*) — homepage idiom (lh-*) applied to a long-form
   inner page. Rendered edge-to-edge via templates/page-about.html.
   ========================================================================= */
.lanton-about-page { overflow-x: clip; }

/* ---- Hero: centered type, no photo (reuses .lh-hero for the load fades) -- */
.lh-about-hero { text-align: center; }
.lh-about-hero .lanton-eyebrow { color: var(--sage); }
.lh-about-hero .lh-hero__title { margin: 0.5rem 0 1.25rem; }
.lh-about-hero .lh-lede { max-width: 680px; margin-inline: auto; }
.lh-about-hero .lh-hero__meta { margin-top: 2rem; }

/* ---- Our story: framed photo + narrative + a small fact strip ---------- */
.lh-story { background: var(--cream-soft); }
.lh-split { gap: clamp(2rem, 5vw, 4.5rem) !important; align-items: center; }
.lh-story .lanton-eyebrow { color: var(--gold-dark); }
.lh-story h2 { margin: 0.35rem 0 1.1rem; }
.lh-story p { color: var(--ink-soft); }
.lh-facts {
	list-style: none; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 1.75rem 0 0;
	border-top: 1px solid var(--mist);
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem 2.25rem;
}
.lh-facts li { margin: 0; line-height: 1.35; }
.lh-facts strong {
	display: block; font-family: var(--wp--preset--font-family--heading);
	font-weight: 500; font-size: 1.2rem; color: var(--ink);
}
.lh-facts span {
	display: block; margin-top: 0.2rem; color: var(--muted);
	font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}

/* ---- Shared responsive card grid (beliefs, steps, leaders) ------------- */
.lh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--lh-grid-min, 280px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
	align-items: stretch;
}
.lh-grid > * { margin: 0 !important; }

/* ---- What we believe --------------------------------------------------- */
.lh-beliefs { background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%); }
.lh-beliefs .lanton-eyebrow { color: var(--sage); }
.lh-beliefs__head h2 { letter-spacing: -0.01em; margin: 0.35rem 0 0.6rem; }
.lh-belief { display: flex; flex-direction: column; }
.lh-belief p { color: var(--muted); margin: 0; }
.lh-belief .lh-belief__ref { margin-top: auto !important; padding-top: 1.4rem; }
.lh-belief__ref {
	padding-top: 0.9rem;
	border-top: 1px solid var(--mist);
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--gold-dark) !important;
}
.lh-beliefs__foot {
	margin-top: clamp(2rem, 4vw, 2.75rem); color: var(--muted); font-size: 0.98rem;
}
.lh-beliefs__foot a { color: var(--sage-dark); text-decoration: none; border-bottom: 1px solid rgba(126, 158, 99, 0.45); }
.lh-beliefs__foot a:hover { border-color: var(--sage); color: var(--ink); }

/* ---- What to expect: numbered steps ----------------------------------- */
.lh-visit { background: var(--cream-soft); }
.lh-visit .lanton-eyebrow { color: var(--sage); }
.lh-visit__head h2 { letter-spacing: -0.01em; margin: 0.35rem 0 0.6rem; }
.lh-steps { --lh-grid-min: 215px; }
.lh-step {
	position: relative; text-align: left;
	padding: clamp(1.6rem, 2.5vw, 2.15rem) 0 0 !important;
	border-top: 3px solid var(--mist);
	transition: border-color 0.35s ease;
}
.lh-step:hover { border-top-color: var(--gold); }
.lh-step__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em;
	color: var(--gold-dark); margin: 0 0 0.6rem;
}
.lh-step :where(h3) { margin: 0 0 0.5rem; color: var(--ink); }
.lh-step p { color: var(--muted); margin: 0; font-size: 0.98rem; }
.lh-visit__notes {
	list-style: none; margin: clamp(2.25rem, 4vw, 3rem) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem 2.25rem;
}
.lh-visit__notes li {
	margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6;
	padding-left: 1.4rem; position: relative;
}
.lh-visit__notes li::before {
	content: ""; position: absolute; left: 0; top: 0.62em;
	width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.lh-visit__notes strong { color: var(--ink); font-weight: 600; }

/* ---- Leadership -------------------------------------------------------- */
.lh-leaders { background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%); }
.lh-leaders .lanton-eyebrow { color: var(--sage); }
.lh-leaders__head h2 { letter-spacing: -0.01em; margin: 0.35rem 0 0.6rem; }
.lh-leaders__grid { --lh-grid-min: 235px; }
.lh-leader .lanton-bio__role { margin: 0 0 0.35rem; }
.lh-leader :where(h3) { padding-top: 0; margin: 0 0 0.5rem; }
.lh-leader :where(h3)::before { display: none; }
.lh-leader p:last-child { color: var(--muted); margin: 0; }

/* ---- Closing call to action ------------------------------------------- */
.lh-about-cta { background: var(--cream); text-align: center; }
.lh-about-cta .lanton-eyebrow { color: var(--gold-dark); }
.lh-about-cta h2 { letter-spacing: -0.01em; margin: 0.35rem 0 0.6rem; }
.lh-about-cta .wp-block-buttons { justify-content: center; }

/* ---- About responsive -------------------------------------------------- */
/* Tablets: even 2-up grids rather than a 3-up row with an orphan. */
@media (max-width: 1023px) {
	.lh-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.lh-beliefs__grid, .lh-steps, .lh-leaders__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
	.lh-split { flex-direction: column; }
	.lh-split .wp-block-column { flex-basis: 100% !important; }
	.lanton-about-photo::before { inset: 12px -12px -12px 12px; }
	.lh-facts { gap: 1.1rem 1.75rem; }
	.lh-facts strong { font-size: 1.1rem; }
}