/* ============================================================
   LAWYER THE LAWYER — Supplementary theme CSS
   Colors, type, and spacing now live in theme.json (WordPress
   Global Styles) — do not re-declare them here. This file only
   covers what theme.json can't express: accessibility states,
   reduced motion, and small utility classes used inside the
   custom block patterns.
   ============================================================ */

/* ---------- Reduced motion (locked accessibility requirement) ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Accessibility: visible focus states (locked requirement) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne-gold);
	outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--wp--preset--color--champagne-gold);
	color: var(--wp--preset--color--deep-navy);
	padding: 0.75rem 1.25rem;
	z-index: 999;
	font-weight: 600;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* ---------- Kill WordPress's default block-gap margin on <main> — it pushed the
   full-bleed hero down 24px from the true top of the page, leaving a gap where the
   page's cream background showed through behind the fixed header's transparent fade,
   producing a muddy gray strip instead of a clean edge-to-edge hero. ---------- */
main.wp-block-group {
	margin-top: 0;
}

/* ---------- Global side gutter on mobile ----------
   theme.json sets --wp--style--root--padding-left/right, but WP core only applies
   it through a ".has-global-padding" class that its own block-template renderer
   adds to .wp-site-blocks — this theme's page templates don't go through that
   renderer, so the class never lands and every page sits flush against the
   viewport edges. Apply the same two rules WP would have, directly. */
.wp-site-blocks {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}
.wp-site-blocks .alignfull {
	margin-left: calc(var(--wp--style--root--padding-left) * -1);
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
}

/* ---------- Global header: transparent-over-hero, no jump on scroll ---------- */
.ltl-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 1.3rem 0;
	background: linear-gradient(180deg, rgba(20, 32, 58, 0.85) 0%, rgba(20, 32, 58, 0) 100%);
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		padding var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.ltl-site-header.is-scrolled {
	background: var(--wp--preset--color--navy-deep);
	padding: 0.85rem 0;
	box-shadow: 0 8px 24px rgba(10, 16, 28, 0.25);
}
/* WordPress admin toolbar (32px, or 46px under 783px) sits above our fixed header — push it down so they don't overlap. */
body.admin-bar .ltl-site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .ltl-site-header { top: 46px; }
}
/* The header stays fixed over the whole page (not just the hero), so any in-page
   anchor target (nav links, footer links) needs clearance or it lands hidden
   underneath it when the browser scrolls there. */
section[id] {
	scroll-margin-top: 100px;
}

/* ---------- BuddyBoss/Community pages — first real integration pass, 2026-08-30.
   These render through the theme's real header/footer now (ReadyLaunch mode
   disabled), through the theme's generic fallback template (no dedicated
   BuddyBoss template exists yet) — which renders a wp:post-title H1 *before*
   #buddypress even starts, so padding #buddypress alone left that title still
   underneath the fixed navy bar. Push the whole #main down instead, scoped to
   BuddyPress's own body class so nothing else on the site is affected. Same
   top-of-page clearance convention as every other page's first section. ---------- */
body.buddypress #main {
	padding-top: clamp(5rem, 10vw, 6rem);
}
.ltl-wordmark a {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--white-soft);
	text-decoration: none;
}
/* !important is required here — WordPress core's navigation block CSS targets
   .wp-block-navigation-item__content.wp-block-navigation-item__content (a doubled
   class selector), which out-specifies a plain ".ltl-primary-nav a" rule and forces
   color:inherit, silently falling back to the page's default text color. */
.ltl-primary-nav a {
	color: rgba(247, 240, 224, 0.82) !important;
	text-decoration: none;
	transition: color 0.25s var(--wp--custom--motion--ease);
}
.ltl-primary-nav a:hover {
	color: var(--wp--preset--color--white-soft) !important;
}
/* Mobile hamburger toggle defaults to near-black (WP core), invisible against the
   navy header. A plain white icon isn't enough on its own — the header sits fixed
   over whatever page content scrolls underneath it (a dark hero on the homepage, a
   bright patch of a photo on About, a plain light background on other pages), so a
   bare white icon's contrast depends on the luck of what's behind it. Giving the
   toggle its own small dark chip makes it reliably visible on every page, not just
   the ones with a conveniently dark hero. The in-overlay close button sits on a
   white modal, already high-contrast, so it's left alone. */
.ltl-primary-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white-soft) !important;
	background: rgba(20, 32, 58, 0.55) !important;
	border-radius: 8px;
	padding: 0.4rem !important;
}
/* The open mobile overlay is a white modal (WP core default), but .ltl-primary-nav a
   above forces champagne text meant for the dark header — nearly unreadable on white.
   Override to dark text specifically inside the open overlay. */
.ltl-primary-nav .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--deep-navy) !important;
}
.ltl-primary-nav .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--champagne-gold) !important;
}
.ltl-primary-nav .ltl-cta-legal a {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-bright), var(--wp--preset--color--champagne-gold));
	color: var(--wp--preset--color--deep-navy) !important;
	text-shadow: none;
	padding: 0.6rem 1.1rem;
	border-radius: var(--wp--custom--radius--structural);
	font-weight: 700;
	box-shadow: 0 3px 10px rgba(196, 168, 98, 0.35), 0 1px 2px rgba(10, 16, 28, 0.25);
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.ltl-primary-nav .ltl-cta-legal a:hover {
	color: var(--wp--preset--color--deep-navy) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(196, 168, 98, 0.45), 0 2px 4px rgba(10, 16, 28, 0.3);
}
/* ---------- CTA sheen — the recurring light sweep across "I Need a Lawyer", ported from the v9 mockup ---------- */
.ltl-primary-nav .ltl-cta-legal a::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: ltlCtaSheen 3.5s ease-in-out infinite;
}
@keyframes ltlCtaSheen {
	0%, 55% { left: -60%; }
	85% { left: 130%; }
	100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
	.ltl-primary-nav .ltl-cta-legal a::after { display: none; }
}

/* ---------- Champagne rule — used sparingly, "jewelry not wallpaper" ---------- */
.ltl-rule.wp-block-separator {
	width: 44px;
	border-color: var(--wp--preset--color--champagne-gold);
	border-width: 2px 0 0;
	opacity: 1;
	transition: width var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* ---------- Orientation portals: hover drift + rule extension ---------- */
.ltl-portal {
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.ltl-portal:hover {
	transform: scale(1.015);
}
.ltl-portal:hover .ltl-rule.wp-block-separator {
	width: 70px;
}
/* Full-card click target for portals that have a real destination.
   Layered on top of everything so the whole card is clickable, not just the text. */
.ltl-portal-link {
	position: absolute;
	inset: 0;
	z-index: 5;
}

/* ---------- Media/authority section — full section, not a thin strip ---------- */
.ltl-ribbon {
	padding: calc(var(--wp--custom--spacing--section, 6rem) * 0.6) 0;
	text-align: center;
}
.ltl-ribbon h2 {
	color: rgba(247, 240, 224, 0.88);
	font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: clamp(2.75rem, 6vw, 3.75rem);
}
.ltl-ribbon-logos {
	color: rgba(247, 240, 224, 0.6);
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	justify-items: center;
	gap: 1.75rem;
	max-width: 980px;
	margin: 0 auto;
}
.ltl-ribbon-logos .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 210px;
	margin: 0;
	padding: 1.5rem 1.25rem;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(196, 168, 98, 0.28);
	border-radius: 14px;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	transition: transform 0.4s var(--wp--custom--motion--ease), box-shadow 0.4s var(--wp--custom--motion--ease), border-color 0.4s var(--wp--custom--motion--ease), background-color 0.4s var(--wp--custom--motion--ease);
}
.ltl-ribbon-logos .wp-block-image:hover {
	transform: translateY(-6px);
	background: rgba(196, 168, 98, 0.08);
	border-color: rgba(196, 168, 98, 0.6);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.ltl-ribbon-logos img {
	height: 58px;
	width: auto;
	max-width: 100%;
	filter: grayscale(0.35) brightness(1.25) contrast(1.05);
	opacity: 0.95;
	transition: filter 0.3s var(--wp--custom--motion--ease), opacity 0.3s var(--wp--custom--motion--ease);
}
.ltl-ribbon-logos .wp-block-image:hover img {
	filter: none;
	opacity: 1;
}
@media (max-width: 640px) {
	.ltl-ribbon-logos { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
	.ltl-ribbon-logos .wp-block-image { padding: 1.1rem 1rem; }
	.ltl-ribbon-logos img { height: 42px; }
}

/* ---------- Eyebrow utility (used across patterns) ---------- */
.ltl-eyebrow {
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ---------- Name Story — v8-specific refinements: the tiny emblem mark before the
   eyebrow (reads as a small navy square at this size, which is the point), plus the
   heavier H2 weight/size v8 uses for this section specifically. ---------- */
.ltl-name-story .ltl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.ltl-name-story .ltl-eyebrow::before {
	content: "";
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	background-image: url("https://staging.lawyerthelawyer.com/wp-content/uploads/2026/08/LTLSub-1.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.ltl-name-story h2 {
	font-weight: 800;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	letter-spacing: -0.01em;
	line-height: 1.12;
}

/* ---------- Road Wasn't Straight — timeline with connecting line, locked V4 contrast correction ---------- */
.ltl-road {
	padding: var(--wp--custom--spacing--section, clamp(4rem, 10vw, 8rem)) 0;
}
.ltl-road-hook {
	margin-top: 1rem;
	margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.ltl-timeline-item {
	position: relative;
	padding-left: 3rem;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-left: 1px solid rgba(196, 168, 98, 0.25);
	margin-left: 0.6rem;
}
.ltl-timeline-item--last {
	border-left-color: transparent;
	padding-bottom: 0;
}
.ltl-timeline-marker {
	position: absolute;
	left: -0.9rem;
	top: -0.1rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--wp--preset--color--navy-deep);
	border: 1px solid rgba(196, 168, 98, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0;
}
.ltl-road-body {
	/* "Softened white" per the locked V4 contrast correction — not full-bright white */
	color: rgba(251, 248, 241, 0.78);
	max-width: 62ch;
}

/* ---------- Timeline photo pairs — same tilted-Polaroid scrapbook language as
   "Before All That" on the About page, extended to every stage for consistency. ---------- */
.ltl-timeline-photos {
	position: relative;
	height: 260px;
	width: 310px;
	max-width: 100%;
	margin-top: 1.75rem;
}
.ltl-timeline-photos img {
	position: absolute;
	width: 175px;
	height: 205px;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
	border: 5px solid var(--wp--preset--color--white-soft);
}
.ltl-timeline-photo-a img {
	top: 0;
	left: 0;
	transform: rotate(-6deg);
	z-index: 1;
}
.ltl-timeline-photo-b img {
	top: 40px;
	left: 120px;
	transform: rotate(5deg);
	z-index: 2;
}
@media (max-width: 600px) {
	.ltl-timeline-photos {
		height: 175px;
		width: 205px;
	}
	.ltl-timeline-photos img {
		width: 115px;
		height: 135px;
	}
	.ltl-timeline-photo-b img {
		top: 26px;
		left: 80px;
	}
}

/* ---------- Scroll-triggered reveal (fade + rise, once) — JS adds .is-revealed ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--wp--custom--motion--ease), transform 0.7s var(--wp--custom--motion--ease);
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}
/* Stagger within a group: set style="--reveal-delay:120ms" (or 240ms, 360ms...) per child */
[data-reveal] {
	transition-delay: var(--reveal-delay, 0ms);
}

/* ---------- Ken Burns — slow, continuous, restrained; targets Gutenberg's real cover-media classes ---------- */
.ltl-hero.kenburns,
.ltl-portal.kenburns {
	overflow: hidden;
}
.ltl-hero.kenburns .wp-block-cover__image-background,
.ltl-hero.kenburns .wp-block-cover__video-background,
.ltl-portal.kenburns .wp-block-cover__image-background {
	animation: ltlKenBurns 28s ease-in-out infinite alternate;
}
@keyframes ltlKenBurns {
	from { transform: scale(1); }
	to { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
	.ltl-hero.kenburns .wp-block-cover__image-background,
	.ltl-hero.kenburns .wp-block-cover__video-background,
	.ltl-portal.kenburns .wp-block-cover__image-background {
		animation: none;
	}
}

/* ---------- Hero H1 — ported from v8: bolder weight and tighter spacing than the generic
   heading style, plus a distinct, smaller, gold, non-italic treatment for the subtitle line. ---------- */
.ltl-hero-h1 {
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: clamp(2.3rem, 6vw, 4.6rem);
	line-height: 1.05;
	max-width: 16ch;
}
.ltl-hero-h1 em {
	display: block;
	font-style: normal;
	font-weight: 500;
	color: var(--wp--preset--color--gold-bright);
	font-size: 0.48em;
	margin-top: 0.5em;
}

/* ---------- Hero watermark emblem — ported from v8, ours is a navy-bg asset so screen-blend
   hides the square instead of relying on a transparent PNG like the original mockup ---------- */
.ltl-hero-star {
	position: absolute;
	top: 50%;
	right: 6%;
	transform: translateY(-50%);
	width: min(46vw, 620px);
	height: min(46vw, 620px);
	object-fit: contain;
	opacity: 0.18;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 1;
}
.ltl-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.ltl-hero-star { animation: none; }
}

/* ---------- Hero parallax support — JS sets transform on this layer ---------- */
.ltl-hero .wp-block-cover__image-background,
.ltl-hero .wp-block-cover__video-background {
	will-change: transform;
}

/* ---------- Home teasers — condensed Name/Road/Wild sections, added 2026-08-30
   to stop those three sections rendering verbatim on both Home and About. ---------- */
.ltl-home-teaser {
	padding: clamp(3.5rem, 8vw, 5.5rem) 0;
	text-align: center;
}
.ltl-home-teaser .ltl-eyebrow {
	justify-content: center;
}
.ltl-home-teaser h2 {
	margin-top: 0.5rem;
}
.ltl-home-teaser p:not(.ltl-eyebrow):not(.ltl-road-hook) {
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}
.ltl-teaser-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--deep-navy);
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.25s var(--wp--custom--motion--ease);
}
.ltl-teaser-link:hover {
	gap: 0.65rem;
}
.ltl-teaser-link--on-dark {
	color: var(--wp--preset--color--champagne-gold);
}

/* ---------- Lawyer in the Wild — honest "coming soon" grid ---------- */
.ltl-wild-intro {
	max-width: 56ch;
	margin-top: 1rem;
}
.ltl-wild-card {
	padding: 1.75rem 1.5rem;
	height: 100%;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.ltl-wild-card:hover {
	transform: translateY(-3px);
}
.ltl-wild-tag {
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-bright);
	border: 1px solid rgba(196, 168, 98, 0.4);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	margin-bottom: 0.9rem;
}

/* ---------- Paralegal Program — facts panel + CTA ---------- */
.ltl-facts-panel {
	background: rgba(196, 168, 98, 0.08);
	border: 1px solid rgba(196, 168, 98, 0.25);
	border-radius: var(--wp--custom--radius--content);
	padding: 1.75rem;
}
.ltl-facts-item {
	color: var(--wp--preset--color--white-soft);
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(247, 240, 224, 0.12);
	margin: 0;
}
.ltl-facts-item:last-of-type {
	border-bottom: none;
}
.ltl-facts-item strong {
	color: var(--wp--preset--color--gold-bright);
}
.ltl-facts-note {
	font-size: 0.78rem;
	color: rgba(247, 240, 224, 0.55);
	margin-top: 1rem;
}
.ltl-paralegal-cta .wp-block-button__link {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-bright), var(--wp--preset--color--champagne-gold));
	color: var(--wp--preset--color--deep-navy);
	border-radius: var(--wp--custom--radius--structural);
	font-weight: 700;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
.ltl-paralegal-cta .wp-block-button__link:hover {
	transform: translateY(-1px);
}
/* Same recurring sheen as the header CTA — consistent "notice me" language for the site's two primary buttons. */
.ltl-paralegal-cta .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: ltlCtaSheen 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.ltl-paralegal-cta .wp-block-button__link::after { display: none; }
}

/* ---------- Site footer ---------- */
.ltl-footer-top {
	padding-top: 4rem;
	padding-bottom: 2.5rem;
	text-align: center;
	border-bottom: 1px solid rgba(196, 168, 98, 0.15);
}
.ltl-footer-wordmark {
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--white-soft);
	margin: 0;
}
.ltl-footer-tagline {
	margin: 0.9rem auto 0;
	font-size: 0.92rem;
	color: rgba(247, 240, 224, 0.65);
	max-width: 46ch;
}
.ltl-footer-capture {
	padding-top: 3rem;
	padding-bottom: 3rem;
	text-align: center;
	border-bottom: 1px solid rgba(196, 168, 98, 0.15);
}
.ltl-footer-capture-sub {
	font-size: 0.85rem;
	color: rgba(247, 240, 224, 0.6);
	margin: 0.6rem 0 1.6rem;
}
.ltl-footer-capture-fields {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}
.ltl-footer-capture-fields input {
	flex: 1;
	min-width: 180px;
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	border: 1px solid rgba(247, 240, 224, 0.2);
	background: rgba(255, 255, 255, 0.05);
	color: var(--wp--preset--color--white-soft);
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: 0.9rem;
}
.ltl-footer-capture-fields input::placeholder {
	color: rgba(247, 240, 224, 0.4);
}
.ltl-footer-capture-btn {
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wp--preset--color--gold-bright), var(--wp--preset--color--champagne-gold));
	color: var(--wp--preset--color--deep-navy);
	font-weight: 700;
	font-size: 0.88rem;
	font-family: var(--wp--preset--font-family--public-sans);
	border: none;
	white-space: nowrap;
}
.ltl-footer-capture-fields input:disabled,
.ltl-footer-capture-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.ltl-footer-capture-fine {
	margin-top: 1rem;
	font-size: 0.72rem;
	color: rgba(247, 240, 224, 0.45);
}
.ltl-footer-columns {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}
.ltl-footer-col-label {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-bright);
	margin: 0 0 1.1rem;
	font-weight: 600;
}
.ltl-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.ltl-footer-links a,
.ltl-footer-sister-row a,
.ltl-footer-legal-links a {
	color: rgba(247, 240, 224, 0.75);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.25s var(--wp--custom--motion--ease);
}
.ltl-footer-links a:hover,
.ltl-footer-sister-row a:hover,
.ltl-footer-legal-links a:hover {
	color: var(--wp--preset--color--white-soft);
}
.ltl-dead-link {
	opacity: 0.45;
	font-style: italic;
}
.ltl-footer-social {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
}
.ltl-footer-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(247, 240, 224, 0.75);
	transition: all 0.25s var(--wp--custom--motion--ease);
}
.ltl-footer-social a.ltl-dead-link {
	opacity: 0.35;
}
.ltl-footer-social a:hover {
	background: var(--wp--preset--color--champagne-gold);
	color: var(--wp--preset--color--deep-navy);
}
.ltl-footer-social svg {
	width: 16px;
	height: 16px;
}
.ltl-footer-contact {
	margin-top: 1.1rem;
	font-size: 0.9rem;
}
.ltl-footer-contact a {
	color: rgba(247, 240, 224, 0.75);
	text-decoration: none;
	transition: color 0.25s var(--wp--custom--motion--ease);
}
.ltl-footer-contact a:hover {
	color: var(--wp--preset--color--white-soft);
}
.ltl-footer-sister-row {
	padding-top: 2.2rem;
	padding-bottom: 2.2rem;
	border-top: 1px solid rgba(196, 168, 98, 0.15);
}
.ltl-footer-sister-row a {
	font-family: var(--wp--preset--font-family--fraunces);
	filter: grayscale(1);
	opacity: 0.7;
}
.ltl-footer-sister-row a:hover {
	opacity: 1;
	color: var(--wp--preset--color--gold-bright);
	filter: none;
}
.ltl-footer-bottom-bar {
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
	border-top: 1px solid rgba(196, 168, 98, 0.15);
	font-size: 0.76rem;
	color: rgba(247, 240, 224, 0.45);
}
.ltl-footer-bottom-bar p {
	margin: 0;
}
.ltl-footer-legal-links {
	gap: 1.2rem;
}
.ltl-footer-legal-links a {
	font-size: 0.76rem;
	color: rgba(247, 240, 224, 0.45);
}
.ltl-footer-disclaimer {
	padding-bottom: 2.5rem;
	font-size: 0.76rem;
	color: rgba(247, 240, 224, 0.4);
	text-align: center;
	max-width: 74ch;
	margin: 0 auto;
}

/* ---------- About page: hero — strong 4-stop scrim + text-shadow, ported from the
   About mockup v2 fix (the original bottom-heavy-only gradient left text unreadable
   against a bright section of the photo). ---------- */
.ltl-about-hero {
	position: relative;
}
.ltl-about-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 32, 58, 0.38) 0%, rgba(15, 22, 35, 0.4) 32%, rgba(8, 12, 22, 0.72) 68%, rgba(6, 9, 16, 0.95) 100%);
}
.ltl-about-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}
.ltl-about-hero-eyebrow {
	color: var(--wp--preset--color--gold-bright);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
.ltl-about-hero-h1 {
	color: var(--wp--preset--color--white-soft);
	text-shadow: 0 6px 28px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.9);
}
.ltl-about-hero-sub {
	color: rgba(251, 248, 241, 0.9);
	max-width: 62ch;
	font-size: 1.125rem;
	margin-top: 1.25rem;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* ---------- About page: "A Few Ways I Might Be Useful" cards — numbered, shadowed,
   hover-lift, matching the numbering language already used in the portals/timeline. ---------- */
.ltl-help-grid {
	margin-top: 2.5rem;
}
.ltl-help-hire-strip {
	margin-top: 1.5rem;
	padding: 1.75rem 2rem;
	border-radius: 16px;
	gap: 1.5rem;
	align-items: center;
}
.ltl-help-hire-strip p {
	margin: 0;
}
.ltl-help-hire-strip > .wp-block-group:first-child p:first-child {
	margin-bottom: 0.4rem;
}
.ltl-help-hire-strip > .wp-block-group:first-child p:last-child {
	max-width: 56ch;
	opacity: 0.85;
}
.ltl-help-card {
	position: relative;
	background: var(--wp--preset--color--white-soft);
	border-radius: 16px;
	padding: 2rem 1.75rem 1.75rem;
	border-top: 3px solid var(--wp--preset--color--champagne-gold);
	box-shadow: 0 10px 28px rgba(27, 42, 74, 0.08);
	height: 100%;
	transition: transform 0.4s var(--wp--custom--motion--ease), box-shadow 0.4s var(--wp--custom--motion--ease);
}
.ltl-help-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 24px 44px rgba(27, 42, 74, 0.16);
}
.ltl-help-num {
	display: block;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--wp--preset--color--champagne-gold);
	opacity: 0.6;
	margin: 0 0 0.6rem;
}

/* ---------- About page: "Before All That" scrapbook — deliberately breaks the grid. ---------- */
.ltl-scrapbook-inner {
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}
.ltl-scrapbook-photos {
	position: relative;
	flex: 0 0 340px;
	height: 300px;
}
.ltl-scrapbook-photos img {
	position: absolute;
	width: 190px;
	height: 225px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 14px 30px rgba(20, 16, 8, 0.28);
	border: 6px solid var(--wp--preset--color--white-soft);
}
.ltl-scrapbook-photo-a img {
	top: 0;
	left: 0;
	transform: rotate(-7deg);
	z-index: 1;
}
.ltl-scrapbook-photo-b img {
	top: 40px;
	left: 140px;
	transform: rotate(5deg);
	z-index: 2;
}
@media (max-width: 600px) {
	.ltl-scrapbook-photos {
		flex-basis: 220px;
		width: 220px;
		height: 195px;
	}
	.ltl-scrapbook-photos img {
		width: 125px;
		height: 148px;
	}
	.ltl-scrapbook-photo-b img {
		top: 26px;
		left: 92px;
	}
}
.ltl-scrapbook-text {
	flex: 1;
	min-width: 280px;
}
.ltl-scrapbook-text h3 {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	text-wrap: balance;
}
.ltl-scrapbook-text p {
	max-width: 56ch;
}

/* ---------- About page: media ribbon caption (the homepage ribbon has no caption line) ---------- */
.ltl-ribbon-caption {
	color: rgba(247, 240, 224, 0.55);
	max-width: 56ch;
	margin: 2.25rem auto 0;
	font-size: 0.95rem;
	text-align: center;
}

/* ---------- Nav link underline-draw on hover ---------- */
nav.wp-block-navigation .wp-block-navigation-item > a:not(.ltl-cta-legal a) {
	position: relative;
}
nav.wp-block-navigation .wp-block-navigation-item > a:not(.ltl-cta-legal a)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 1px;
	background: var(--wp--preset--color--gold-bright);
	transition: right var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}
nav.wp-block-navigation .wp-block-navigation-item > a:not(.ltl-cta-legal a):hover::after {
	right: 0;
}