/* ============================================================================
   Layout — site header, footer, hero, sections
   ============================================================================ */

/* ============================================================================
   Marketing nav — .j-nav
   ----------------------------------------------------------------------------
   SINGLE source of truth for the header chrome. The same template partial
   (template-parts/marketing-nav.php) is included by the theme's header.php
   AND by the lwl-journey-landing plugin's landing template, so every page
   in the marketing site renders the same DOM and inherits the same rules.

   Do not duplicate these selectors in any plugin CSS.
   ========================================================================= */
.j-nav {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px clamp(20px, 4vw, 44px);
	background: rgba(255, 252, 247, 0.85);
	backdrop-filter: blur(14px) saturate(1.05);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
	border-bottom: 1px solid var(--color-line, var(--color-border));
	transition: background var(--dur-base) var(--ease-out),
				box-shadow var(--dur-base) var(--ease-out);
}
.j-nav.j-nav--scrolled,
.j-nav.is-scrolled {
	box-shadow: 0 2px 12px rgba(43, 37, 48, 0.06);
}

.j-nav__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	background: none;
	color: inherit;
}
.j-nav__brand .j-brandmark,
.j-nav__brand .site-logo__mark {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: block;
	transition: transform var(--dur-base) var(--ease-bounce);
}
.j-nav__brand:hover .j-brandmark,
.j-nav__brand:hover .site-logo__mark { transform: rotate(-6deg) scale(1.06); }

.j-nav__wm {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.j-nav__wm-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--color-deep);
	letter-spacing: -0.01em;
}
.j-nav__wm-name em {
	font-style: italic;
	color: var(--color-coral);
	font-weight: 500;
}
.j-nav__wm-tag {
	font-family: var(--font-body);
	font-size: 11.5px;
	color: var(--color-ink-soft);
	letter-spacing: 0.01em;
}

.j-nav__links {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 28px);
	font-family: var(--font-body);
	font-size: 14.5px;
}
.j-nav__links a {
	color: var(--color-deep);
	font-weight: 500;
	background: none;
	position: relative;
	padding: 6px 0;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out);
}
.j-nav__links a::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1.5px;
	background: var(--color-coral);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--dur-base) var(--ease-out);
}
.j-nav__links a:hover { color: var(--color-coral); }
.j-nav__links a:hover::after,
.j-nav__links a.is-active::after { transform: scaleX(1); }
.j-nav__links a.is-active { color: var(--color-coral); }

.j-nav__cta {
	background: var(--color-coral) !important;
	color: #FFFCF7 !important;
	padding: 10px 20px !important;
	border-radius: 999px;
	font-weight: 600;
	transition: transform var(--dur-base) var(--ease-out),
				background var(--dur-base) var(--ease-out),
				box-shadow var(--dur-base) var(--ease-out);
}
.j-nav__cta::after { display: none !important; }
.j-nav__cta:hover {
	background: var(--color-coral-dark) !important;
	color: #FFFCF7 !important;
	transform: translateY(-1px) scale(1.04);
	box-shadow: 0 6px 18px rgba(252, 60, 48, 0.28);
}

/* ─────────────────────────────────────────────────────────────────
   Phone nav — hamburger + slide-down panel.
   2026-05-18: replaces the legacy `display:none` for non-active links
   below 880px (users had no way to navigate from phone).
   The toggle button is hidden ≥881px; the panel is a passive
   `<div class="j-nav__panel">` that just wraps the links on desktop
   so layout is byte-identical above the breakpoint.
   ───────────────────────────────────────────────────────────────── */
.j-nav__toggle { display: none; }
.j-nav__panel  { display: flex; align-items: center; gap: 18px; }
.j-nav__panel .j-nav__links { display: flex; }

@media (max-width: 880px) {
	.j-nav__wm-tag { display: none; }

	.j-nav__toggle {
		display: inline-flex; flex-direction: column;
		justify-content: center; align-items: center; gap: 4px;
		width: 42px; height: 42px;
		padding: 0; margin-left: auto;
		background: transparent;
		border: 1px solid rgba(43, 37, 48, 0.18);
		border-radius: 12px;
		cursor: pointer;
		transition: background-color var(--dur-base, .2s) var(--ease-out, ease),
		            border-color var(--dur-base, .2s) var(--ease-out, ease);
	}
	.j-nav__toggle:hover,
	.j-nav__toggle:focus-visible {
		background: rgba(43, 37, 48, 0.06);
		border-color: rgba(43, 37, 48, 0.35);
		outline: none;
	}
	.j-nav__toggle-bar {
		display: block;
		width: 20px; height: 2px;
		background: var(--color-ink, #2B2530);
		border-radius: 2px;
		transition: transform .25s var(--ease-out, ease),
		            opacity   .15s ease;
	}
	.j-nav.is-open .j-nav__toggle-bar:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.j-nav.is-open .j-nav__toggle-bar:nth-child(2) { opacity: 0; }
	.j-nav.is-open .j-nav__toggle-bar:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.j-nav__panel {
		position: fixed;
		top: 64px; left: 12px; right: 12px;
		display: flex; flex-direction: column;
		padding: 14px;
		background: rgba(255, 252, 247, 0.98);
		backdrop-filter: blur(14px) saturate(1.05);
		-webkit-backdrop-filter: blur(14px) saturate(1.05);
		border: 1px solid var(--color-border, rgba(43, 37, 48, 0.12));
		border-radius: 18px;
		box-shadow: 0 18px 40px rgba(43, 37, 48, 0.18);
		opacity: 0; pointer-events: none;
		transform: translateY(-8px);
		transition: opacity .22s ease, transform .22s var(--ease-out, ease);
		z-index: var(--z-sticky, 200);
	}
	.j-nav.is-open .j-nav__panel {
		opacity: 1; pointer-events: auto;
		transform: none;
	}
	.j-nav__panel .j-nav__links {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		font-size: 15px;
	}
	.j-nav__panel .j-nav__links a {
		display: block;
		padding: 12px 14px;
		border-radius: 10px;
	}
	.j-nav__panel .j-nav__links a:hover,
	.j-nav__panel .j-nav__links a:focus-visible {
		background: rgba(252, 60, 48, 0.06);
		outline: none;
	}
	.j-nav__panel .j-nav__links a::after { display: none; }
	.j-nav__panel .j-nav__cta {
		margin-top: 6px;
		text-align: center;
	}

	/* Lock body scroll while the panel is open + dim the page underneath. */
	body.is-nav-open { overflow: hidden; }
	body.is-nav-open::after {
		content: '';
		position: fixed; inset: 64px 0 0 0;
		background: rgba(0, 0, 0, 0.32);
		z-index: calc(var(--z-sticky, 200) - 1);
		animation: j-nav-fade-in .2s ease;
	}
	@keyframes j-nav-fade-in { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
	.j-nav__panel,
	.j-nav__toggle-bar { transition: none; }
	body.is-nav-open::after { animation: none; }
}

/* ============================================================================
   Legacy .site-header / .site-logo classes — kept as no-ops in case any
   third-party plugin output still references them. The current header.php
   uses the marketing-nav partial which emits .j-nav classes only.
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: rgba(255, 252, 247, 0.85);
	backdrop-filter: blur(14px) saturate(1.05);
	-webkit-backdrop-filter: blur(14px) saturate(1.05);
	border-bottom: 1px solid var(--color-border);
	transition: border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
	border-bottom-color: var(--color-border);
	box-shadow: 0 2px 12px rgba(43, 37, 48, 0.06);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px clamp(20px, 4vw, 44px);
	min-height: 0;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--color-deep);
	background: none !important;
	text-decoration: none;
	margin-right: auto;
}

.site-logo:hover { color: var(--color-deep); }

.site-logo__mark {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	transition: transform var(--dur-base) var(--ease-bounce);
}

.site-logo:hover .site-logo__mark { transform: rotate(-6deg) scale(1.06); }

.site-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.site-logo__name {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--color-deep);
	letter-spacing: -0.01em;
}
.site-logo__name em {
	font-style: italic;
	color: var(--color-coral);
	font-weight: 500;
}

.site-logo__tagline {
	font-family: var(--font-body);
	font-size: 11.5px;
	color: var(--color-ink-soft);
	letter-spacing: 0.01em;
	margin-top: 0;
}

@media (max-width: 880px) {
	.site-logo__tagline { display: none; }
}

/* Primary navigation -------------------------------------------------------- */
.site-nav {
	display: none;
}

@media (min-width: 880px) {
	.site-nav {
		display: block;
	}
}

.site-nav__list {
	display: flex;
	gap: clamp(14px, 1.6vw, 28px);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	font-family: var(--font-body);
	font-size: 14.5px;
}

.site-nav__list .menu-item {
	position: relative;
}

.site-nav__list a,
.site-nav__list .menu-item > a {
	font-size: inherit;
	font-weight: 500;
	color: var(--color-deep);
	background: none !important;
	padding: 6px 0;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	position: relative;
	transition: color var(--dur-base) var(--ease-out);
}

/* Coral underline-on-hover, matching the journey nav exactly. */
.site-nav__list a::after,
.site-nav__list .menu-item > a::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1.5px;
	background: var(--color-coral);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__list a:hover { color: var(--color-coral); }
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after { transform: scaleX(1); }

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: var(--color-coral);
}

/* Submenu — hidden by default, reveals on hover/focus-within.
   We use high specificity + !important on the trickiest properties because
   several plugin stylesheets (gutenberg, tutor, droip, etc.) ship their own
   .sub-menu / .menu-item rules and we need to win the cascade reliably. */
.site-header .site-nav__list .sub-menu {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	min-width: 240px;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	list-style: none;
	margin: 0;
	padding: var(--space-2) 0;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		visibility 0s linear var(--dur-base);
	z-index: var(--z-sticky);
}

.site-header .site-nav__list .menu-item:hover > .sub-menu,
.site-header .site-nav__list .menu-item:focus-within > .sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

.site-header .site-nav__list .sub-menu li {
	margin: 0;
}

.site-header .site-nav__list .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	font-size: var(--fs-sm);
	color: var(--color-deep);
	white-space: normal;
}

.site-header .site-nav__list .sub-menu a:hover {
	background: var(--color-mist);
	color: var(--color-coral);
}

/* If WP custom_logo did slip through anywhere, contain it. ----------------- */
.custom-logo,
.custom-logo-link img {
	max-width: 56px;
	height: auto;
}

/* Journey page (page-journey.php) — minimal chrome ------------------------- */
body.is-journey-page::before { display: none; }   /* no ambient drift behind plugin UI */
body.is-journey-page          { background: var(--color-paper); }

.journey-back {
	position: fixed !important;
	top: 14px !important;
	left: 14px !important;
	/* Max 32-bit signed int — beats anything the lwl-mind plugin assigns */
	z-index: 2147483647 !important;
	pointer-events: auto !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	background: rgba(255, 252, 247, 0.9);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	color: var(--color-deep);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	background-image: none !important;
	border: 1px solid var(--color-border);
	transition: transform var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
	isolation: isolate;
}

.journey-back:hover,
.journey-back:focus-visible {
	transform: translateX(-2px);
	background: var(--color-paper);
	color: var(--color-coral);
}

/* Wave divider — used between sections that change background -------------
   The divider renders two complementary SVG paths inline (one above the
   wave line, one below) with explicit fills, so every pixel is covered
   in either the source or destination section's colour. No background
   tricks needed; lwl_wave_divider() in inc/helpers.php paints both sides. */
.section-divider {
	display: block;
	width: 100%;
	height: 60px;
	margin: 0;
	pointer-events: none;
}

.section-divider svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Header actions cluster ---------------------------------------------------- */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 28px);
}

/* CTA in the header — tightened to match the journey nav's .j-nav__cta. */
.site-header .cta--coral {
	padding: 10px 20px;
	font-size: 14.5px;
	transition: transform var(--dur-base) var(--ease-out),
				background var(--dur-base) var(--ease-out),
				box-shadow var(--dur-base) var(--ease-out);
}
.site-header .cta--coral:hover {
	transform: translateY(-1px) scale(1.04);
	box-shadow: 0 6px 18px rgba(252, 60, 48, 0.28);
}

/* Mobile menu button -------------------------------------------------------- */
.menu-toggle {
	width: 44px;
	height: 44px;
	display: inline-grid;
	place-items: center;
	border-radius: var(--radius-md);
	color: var(--color-deep);
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	position: relative;
}

.menu-toggle__bar::before,
.menu-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.menu-toggle__bar::before { top: -7px; }
.menu-toggle__bar::after  { top:  7px; }

@media (min-width: 880px) {
	.menu-toggle { display: none; }
}

/* Hero ---------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(560px, 70vh, 760px);
	display: flex;
	align-items: center;
	isolation: isolate;
}

.hero__scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.hero__scene svg {
	width: 100%;
	height: 100%;
	display: block;
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: var(--space-12) var(--container-pad);
	text-align: center;
}

.hero__title {
	font-size: clamp(2.25rem, 6.5vw, 4.5rem);
	color: var(--color-deep);
	margin-bottom: var(--space-3);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 600;
}

/* Scroll-cue mouse-and-arrow at the bottom of the hero ------------------- */
.hero__scroll-cue {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--color-deep);
	z-index: 2;
	opacity: 0;
	animation: hero-scroll-fade-in 0.8s var(--ease-out) 1.4s forwards;
	pointer-events: none;
}

.hero__scroll-cue__label {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.hero__scroll-cue__dot {
	animation: hero-scroll-dot 1.8s var(--ease-in-out) infinite;
}

@keyframes hero-scroll-fade-in {
	from { opacity: 0; transform: translate(-50%, 6px); }
	to   { opacity: 0.85; transform: translate(-50%, 0); }
}

@keyframes hero-scroll-dot {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50%      { transform: translateY(8px); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-cue { animation: none; opacity: 0.85; }
	.hero__scroll-cue__dot { animation: none; }
}

@media (max-width: 720px) {
	.hero__scroll-cue { display: none; }
}

.hero__title-rule {
	display: block;
	width: 220px;
	height: 6px;
	margin: var(--space-3) auto var(--space-4);
	color: var(--color-deep);
	opacity: 0.45;
}

.hero__subtitle {
	font-size: var(--fs-md);
	color: var(--color-ink-soft);
	margin-bottom: var(--space-2);
}

.hero__footnote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-sm);
	color: var(--color-ember);
	margin-bottom: var(--space-5);
	letter-spacing: 0.01em;
}

.hero__cta {
	display: inline-flex;
	gap: var(--space-3);
}

/* Inner-page hero — compressed cinematic band at the top of every subpage --- */
.inner-hero {
	position: relative;
	overflow: hidden;
	min-height: 360px;
	display: flex;
	align-items: center;
	isolation: isolate;
	background: var(--color-paper-warm);
}

.inner-hero__scene {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.inner-hero__scene svg {
	width: 100%;
	height: 100%;
	display: block;
}

.inner-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: var(--space-8) var(--container-pad);
	text-align: center;
}

.inner-hero__eyebrow {
	margin-bottom: var(--space-3);
	color: var(--color-ember);
}

.inner-hero__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: clamp(var(--fs-2xl), 5vw, 3.25rem);
	color: var(--color-deep);
	line-height: 1.05;
	margin: 0 auto var(--space-3);
	letter-spacing: -0.01em;
	max-width: 18ch;
}

.inner-hero__subtitle {
	font-size: var(--fs-md);
	color: var(--color-ink-soft);
	max-width: 50ch;
	margin: 0 auto;
}

/* Section base -------------------------------------------------------------- */
.section {
	padding: var(--space-12) 0;
}

.section--tight {
	padding: var(--space-8) 0;
}

.section--moss {
	background: var(--color-mist);
}

.section--paper {
	background: var(--color-paper);
}

.section__head {
	text-align: center;
	max-width: var(--container-narrow);
	margin: 0 auto var(--space-8);
}

.section__title {
	margin-bottom: var(--space-3);
}

.section__lede {
	font-size: var(--fs-md);
	color: var(--color-ink-soft);
}

/* Stats band — !important guards against plugin block/flex overrides ------- */
.section .stats-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	gap: var(--space-5);
	max-width: var(--container-max);
	margin: 0 auto;
	width: 100%;
}

/* Services 3-up ------------------------------------------------------------- */
.section .services-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: var(--space-5);
	max-width: var(--container-max);
	margin: 0 auto;
	width: 100%;
}

.service-card {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	text-align: center;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.service-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: radial-gradient(60% 60% at 50% 0%, rgba(252, 60, 48, 0.08), transparent 70%);
	transition: opacity var(--dur-slow) var(--ease-out);
}

.service-card:hover {
	transform: translateY(-6px) scale(1.01);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-coral);
}

.service-card:hover::after {
	opacity: 1;
}

.service-card:hover .service-card__icon {
	transform: scale(1.06) translateY(-2px);
}

.service-card__icon {
	transition: transform var(--dur-slow) var(--ease-out);
}

.service-card__icon {
	width: 88px;
	height: 88px;
	margin: 0 auto var(--space-4);
}

.service-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--color-deep);
	margin-bottom: var(--space-3);
}

.service-card__body {
	color: var(--color-ink-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}

/* About Liam ---------------------------------------------------------------- */
.about {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: center;
	max-width: var(--container-max);
	margin: 0 auto;
}

@media (min-width: 800px) {
	.about {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10);
	}
}

.about__photo {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-mist);
	aspect-ratio: 4 / 3;
	isolation: isolate;
	box-shadow: var(--shadow-md);
}

.about__photo img,
.about__photo-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 25%;
	display: block;
	will-change: transform;
	animation: ken-burns 22s ease-in-out infinite alternate;
	transform-origin: center center;
}

@keyframes ken-burns {
	0%   { transform: scale(1) translate(0, 0); }
	100% { transform: scale(1.08) translate(-1.5%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
	.about__photo-img { animation: none; }
}

.about__photo-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background:
		linear-gradient(to top,
			rgba(60, 60, 120, 0.55) 0%,
			rgba(60, 60, 120, 0.18) 35%,
			transparent 60%),
		linear-gradient(120deg,
			rgba(252, 60, 48, 0.0) 60%,
			rgba(252, 120, 12, 0.18) 100%);
}

.about__photo-caption {
	position: absolute;
	left: 20px;
	bottom: 18px;
	z-index: 2;
	color: var(--color-paper);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* About content card — beautified container around the bio prose --------- */
.about__content {
	position: relative;
	background: var(--color-paper-warm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	box-shadow: var(--shadow-md);
	isolation: isolate;
	overflow: hidden;
}

.about__content::before {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: -1;
	background:
		radial-gradient(36% 30% at 100% 0%, rgba(252, 60, 48, 0.10), transparent 60%),
		radial-gradient(40% 32% at 0% 100%, rgba(252, 192, 0, 0.10), transparent 60%),
		radial-gradient(30% 28% at 50% 50%, rgba(84, 96, 168, 0.04), transparent 70%);
	animation: about-wash 32s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes about-wash {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(2%, -1.5%) scale(1.04); }
	100% { transform: translate(-1.5%, 2%) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
	.about__content::before { animation: none; }
}

/* ---- Ambient garden -------------------------------------------------------
   Four distinct potted plants — monstera, pothos, bonsai, ivy — scattered
   across the about section background. Each plant runs an independent
   infinite cycle that mirrors the contact-form seed-grow ritual:

     pot pops in → soil settles → stem draws → leaves unfurl in sequence
     (scale + rotation) → blossoms bloom → continuous gentle sway →
     fade out → restart.

   Per-plant CSS variables (--cycle, --delay, --peak) tune timing and peak
   opacity. Each leaf carries --ld (leaf delay, fraction of cycle) so it
   unfurls at its own beat. Negative --delay values offset each plant on
   the timeline so at any second one is sprouting while another is wilting. */

.section--about { position: relative; }

/* Allow the garden to spill very slightly below the section so plant pot
   bases sit visually rooted into the next section's wave divider. */
.about-garden {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: -16px;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.about-plant {
	position: absolute;
	pointer-events: none;
	transform-origin: bottom center;
	will-change: opacity, transform;
	opacity: 0;
	/* Per-plant overrides set below */
	--cycle: 22s;
	--delay: 0s;
	--peak: 0.42;
	animation:
		plant-life var(--cycle) cubic-bezier(0.32, 0, 0.16, 1) infinite,
		plant-sway 7s ease-in-out infinite;
	animation-delay: var(--delay), 0s;
}

.about-plant svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* Pot — pops in with a tiny over-shoot, holds, fades. */
.about-plant .plant-pot {
	transform-box: fill-box;
	transform-origin: center bottom;
	transform: scale(0.4) translateY(20px);
	opacity: 0;
	animation: plant-pot-life var(--cycle) cubic-bezier(0.5, 1.6, 0.4, 1) infinite;
	animation-delay: var(--delay);
}

/* Soil — settles in just after the pot. */
.about-plant .plant-soil {
	transform-box: fill-box;
	transform-origin: center;
	transform: scaleX(0);
	opacity: 0;
	animation: plant-soil-life var(--cycle) cubic-bezier(0.32, 0, 0.16, 1) infinite;
	animation-delay: var(--delay);
}

/* Stem(s) — draw in with stroke-dashoffset; pathLength="100" makes the maths clean. */
.about-plant .plant-stem {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: plant-stem-life var(--cycle) cubic-bezier(0.32, 0, 0.16, 1) infinite;
	animation-delay: var(--delay);
}

/* Leaves — unfurl: scale + rotation, sequenced via --ld. Anchored at the
   petiole (bottom-center of the fill-box) so the leaf grows out from the
   stem rather than expanding from its middle. */
.about-plant .plant-leaf {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	opacity: 0;
	animation: plant-leaf-life var(--cycle) cubic-bezier(0.32, 0, 0.16, 1) infinite;
	animation-delay: calc(var(--delay) + var(--cycle) * var(--ld, 0));
}

/* Bonsai foliage clusters use ellipses with cx/cy positioning. The
   ellipse-centric origin (transform-origin: center, fill-box) keeps them
   blooming up from their own midline. */
.about-plant--bonsai .plant-leaf {
	transform-origin: center;
}

/* Blooms — pop in late, after the leaves have settled. */
.about-plant .plant-bloom {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0);
	opacity: 0;
	animation: plant-bloom-life var(--cycle) cubic-bezier(0.5, 1.6, 0.4, 1) infinite;
	animation-delay: calc(var(--delay) + var(--cycle) * var(--ld, 0));
}

/* ---- Lifecycle keyframes ------------------------------------------------ */
/*
   Cycle phases (parent fraction of one plant cycle):
     0–4%    invisible (envelope mask covers everything; subsequent cycle
             blends out before this cycle blends in)
     4–10%   pot pops in, soil settles
     10–28%  stem draws via stroke-dashoffset
     28–60%  leaves unfurl one at a time (each leaf has --ld for its slot
             inside the cascade, then waits 28% inside its own keyframe)
     38–68%  blooms appear after their leaf
     68–86%  hold (everything visible, gentle sway)
     86–96%  fade out
     96–100% invisible buffer (lets the next cycle start clean)

   Crucially the leaf-life keyframe holds opacity 0 until 30%, so even with
   --ld = 0 a leaf cannot pop in until AFTER the stem has finished drawing
   (stem reaches its target at 28%). --ld values cascade leaves from there. */

/* Whole-plant opacity envelope. */
@keyframes plant-life {
	0%, 4%   { opacity: 0; }
	14%      { opacity: var(--peak, 0.42); }
	84%      { opacity: var(--peak, 0.42); }
	96%, 100% { opacity: 0; }
}

@keyframes plant-pot-life {
	0%, 2%   { opacity: 0; transform: scale(0.4) translateY(22px); }
	8%       { opacity: 1; transform: scale(1.06) translateY(0); }
	12%      { opacity: 1; transform: scale(1) translateY(0); }
	86%      { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes plant-soil-life {
	0%, 6%   { opacity: 0; transform: scaleX(0); }
	14%      { opacity: 1; transform: scaleX(1); }
	86%      { opacity: 1; }
	96%, 100% { opacity: 0; }
}

@keyframes plant-stem-life {
	0%, 10%  { stroke-dashoffset: 100; }
	28%      { stroke-dashoffset: 0; }
	86%      { stroke-dashoffset: 0; }
	96%, 100% { stroke-dashoffset: 0; }
}

/* Leaf-life: invisible 0–30%, then unfurl with rotation, then hold, then
   wilt. Leaves only become visible AFTER 30% of cycle (stem completes at
   28%) so the order of growth is always pot → soil → stem → leaves. */
@keyframes plant-leaf-life {
	0%, 30%  { opacity: 0; transform: scale(0) rotate(-25deg); }
	42%      { opacity: 1; transform: scale(1.06) rotate(2deg); }
	50%      { opacity: 1; transform: scale(1) rotate(0deg); }
	84%      { opacity: 1; transform: scale(1) rotate(0deg); }
	96%, 100% { opacity: 0; transform: scale(0.94) rotate(-4deg); }
}

@keyframes plant-bloom-life {
	0%, 38%  { opacity: 0; transform: scale(0); }
	50%      { opacity: 1; transform: scale(1.2); }
	56%      { opacity: 1; transform: scale(1); }
	84%      { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0.8); }
}

@keyframes plant-sway {
	0%, 100% { transform: rotate(-1.6deg); }
	50%      { transform: rotate(1.6deg); }
}

/* ---- Plant placements --------------------------------------------------
   - Plants WITH pots (1, 3, 5) are anchored at the bottom of the section
     with bottom: 0; their pot bases extend slightly below into the next
     section via the .about-garden's negative bottom inset, so they look
     rooted rather than floating.
   - Plants WITHOUT pots (2, 4) hang from the top edge — they're vines /
     climbers, no pot needed. Anchored top: 0. */

/* Plant 1: Monstera — bottom-left, with pot, prominent. */
.about-plant--1 {
	left: 1.5%;
	bottom: 0;
	width: 130px;
	height: 420px;
	--cycle: 24s; --delay: 0s; --peak: 0.46;
}

/* Plant 2: Pothos — top-right, NO POT, cascades down from ceiling. */
.about-plant--2 {
	right: 1.5%;
	top: 0;
	width: 110px;
	height: 420px;
	--cycle: 26s; --delay: -9s; --peak: 0.38;
	transform-origin: top center;
}

/* Plant 3: Bonsai — bottom-right, with pot, sculptural. */
.about-plant--3 {
	right: 8%;
	bottom: 0;
	width: 150px;
	height: 280px;
	--cycle: 22s; --delay: -5s; --peak: 0.40;
}

/* Plant 4: Hanging ivy — top-left, NO POT, hangs from ceiling. */
.about-plant--4 {
	left: 7%;
	top: 0;
	width: 70px;
	height: 360px;
	--cycle: 20s; --delay: -14s; --peak: 0.32;
	transform-origin: top center;
}

/* Plant 5: Small fern sprout — bottom-center, with pot, accent. */
.about-plant--5 {
	left: 36%;
	bottom: 0;
	width: 80px;
	height: 220px;
	--cycle: 23s; --delay: -16s; --peak: 0.30;
}

@media (max-width: 980px) {
	/* On tablet, pull the corner plants in and drop the small fern. */
	.about-plant--3 { right: 1%; }
	.about-plant--4 { left: 2%; }
	.about-plant--5 { display: none; }
}

@media (max-width: 720px) {
	/* On phones, only the two bottom anchors — anything more crowds the prose. */
	.about-plant { --peak: 0.28; }
	.about-plant--2,
	.about-plant--4,
	.about-plant--5 { display: none; }
	.about-plant--1 { width: 90px; height: 320px; left: 0; }
	.about-plant--3 { width: 110px; height: 220px; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.about-plant,
	.about-plant .plant-pot,
	.about-plant .plant-soil,
	.about-plant .plant-stem,
	.about-plant .plant-leaf,
	.about-plant .plant-bloom { animation: none; opacity: 0; }
}

.about__bio {
	position: relative;
	z-index: 1;
	font-size: var(--fs-md);
	color: var(--color-ink);
	line-height: var(--lh-base);
}

.about__bio p {
	margin-bottom: var(--space-4);
}

.about__bio p:last-child {
	margin-bottom: 0;
}

.about__bio strong {
	color: var(--color-coral);
	font-weight: 700;
	background: linear-gradient(
		to bottom,
		transparent 70%,
		rgba(252, 192, 0, 0.18) 70%,
		rgba(252, 192, 0, 0.18) 95%,
		transparent 95%
	);
	padding: 0 0.06em;
}

.about__eyebrow {
	margin-bottom: var(--space-3);
}

.about__name {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	color: var(--color-deep);
	margin-bottom: var(--space-5);
	letter-spacing: -0.01em;
}

/* Testimonials -------------------------------------------------------------- */
.section .testimonials-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
	gap: var(--space-5);
	max-width: var(--container-max);
	margin: 0 auto;
	width: 100%;
}

/* Blog teaser --------------------------------------------------------------- */
.section .blog-grid,
.blog-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
	gap: var(--space-5);
	max-width: var(--container-max);
	margin: 0 auto;
	width: 100%;
}

.blog-card {
	background: var(--color-paper);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.blog-card {
	transition: transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out) !important;
}

.blog-card:hover {
	transform: translateY(-6px) scale(1.01);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-coral);
}

.blog-card__thumb img {
	transition: transform 1.2s var(--ease-out);
}

.blog-card:hover .blog-card__thumb img {
	transform: scale(1.06);
}

.blog-card__thumb {
	aspect-ratio: 16 / 9;
	background: var(--color-mist);
	overflow: hidden;
}

.blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
}

.blog-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	color: var(--color-deep);
	line-height: var(--lh-snug);
}

.blog-card__meta {
	font-size: var(--fs-xs);
	color: var(--color-ink-soft);
}

.blog-card__excerpt {
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
	flex: 1;
}

/* Footer -------------------------------------------------------------------- */
.site-footer {
	background: var(--color-deep);
	color: var(--color-paper);
	padding: var(--space-10) 0 var(--space-6);
	margin-top: var(--space-12);
	position: relative;
}

.site-footer__ridge {
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	width: 100%;
	height: 60px;
	color: var(--color-deep);
	transform: translateY(-99%);
	pointer-events: none;
}

.site-footer__ridge svg {
	display: block;
	width: 100%;
	height: 100%;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-pad);
}

@media (min-width: 800px) {
	.site-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer__tagline {
	color: rgba(255, 252, 247, 0.7);
	font-size: var(--fs-sm);
	max-width: 30ch;
}

.site-footer h3 {
	color: var(--color-paper);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--space-4);
	opacity: 0.8;
}

.site-footer a {
	color: var(--color-paper);
	background: none;
	opacity: 0.85;
}

.site-footer a:hover {
	color: var(--color-sun);
	opacity: 1;
}

.footer-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Newsletter ---------------------------------------------------------------- */
.newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.newsletter__input {
	padding: 0.75rem 1rem;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 252, 247, 0.25);
	background: rgba(255, 252, 247, 0.05);
	color: var(--color-paper);
	font-size: var(--fs-sm);
	width: 100%;
}

.newsletter__input::placeholder {
	color: rgba(255, 252, 247, 0.5);
}

.newsletter__input:focus {
	outline: 2px solid var(--color-sun);
	outline-offset: 2px;
	background: rgba(255, 252, 247, 0.1);
}

.newsletter__submit {
	padding: 0.75rem 1.25rem;
	background: var(--color-sun);
	color: var(--color-deep);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-pill);
	transition: background var(--dur-base) var(--ease-out);
}

.newsletter__submit:hover {
	background: var(--color-sun-soft);
}

.site-footer__bottom {
	max-width: var(--container-max);
	margin: var(--space-8) auto 0;
	padding: var(--space-5) var(--container-pad) 0;
	border-top: 1px solid rgba(255, 252, 247, 0.12);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-xs);
	color: rgba(255, 252, 247, 0.55);
	flex-wrap: wrap;
	gap: var(--space-3);
}