/*
 * tg-theme — patterns.css
 *
 * Per-pattern supplementary CSS that theme.json cannot express:
 * grid layouts, the anchor-band, terracotta rules, hover lifts, and scroll-reveal.
 *
 * Design token rule: NEVER use a raw hex or px where a CSS custom property exists.
 * Reference:
 *   Color  —  var(--wp--preset--color--{slug})
 *   Font   —  var(--wp--preset--font-family--{slug})
 *   Size   —  var(--wp--preset--font-size--{slug})
 *   Custom —  var(--wp--custom--radius--{slug})
 *             var(--wp--custom--elevation--{slug})
 *             var(--wp--custom--focus-ring)
 *
 * Phase 1 revision — layout-airy pass:
 *   - Added header lockup: .tg-brand, .tg-brand__text, .tg-brand__name, .tg-brand__descriptor
 *   - Anchor-band converted from terracotta fill to cloud background (light treatment)
 *   - .tg-anchor-step__num on light background uses terracotta-deep (AA-safe at small/label size)
 *   - .tg-band__header bottom margin added for breathing room before cards
 *   - .tg-lead--center auto inline margin for centred leads
 *   - Section card spacing tightened to match mockup gap values
 */

/* ==========================================================================
 * RENDER FIX (WP 7.0 did not emit --wp--preset--font-size--* custom properties;
 * verified in-browser that these vars resolved empty, collapsing headings to 16px).
 * Define the type scale on :root from the theme.json fontSizes (brief §1) so every
 * existing var(--wp--preset--font-size--*) reference resolves. Also give .tg-band
 * real section padding (the block-style padding did not serialize onto the element).
 * Values mirror theme.json exactly — no new design decisions.
 * ==========================================================================*/
:root {
	--wp--preset--font-size--xs: 12px;
	--wp--preset--font-size--sm: 13.5px;
	--wp--preset--font-size--base: clamp(16px, 1.1vw, 18px);
	--wp--preset--font-size--lg: 20px;
	--wp--preset--font-size--xl: clamp(22px, 2.6vw, 28px);
	--wp--preset--font-size--2xl: clamp(28px, 3.6vw, 42px);
	--wp--preset--font-size--hero: clamp(38px, 6.2vw, 74px);
}

/* Section vertical rhythm — matches the mockup's .band { padding: 96px 24px } */
.tg-band {
	padding-block: clamp(72px, 8vw, 120px);
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
}

/* Insights listing band (index.html .archive-body) — the block markup sets
   padding via var:preset|spacing|section, but that preset var does not resolve
   on this template (computes to 0), so the article cards sit flush against the
   hero band above and the footer below. Hard-code the same clamp .tg-band uses
   so the tiles get vertical breathing room top and bottom. */
.archive-body {
	padding-block: clamp(72px, 8vw, 120px);
}

/* Belt-and-suspenders explicit heading sizes (in case an element style loses the var) */
.tg-hero__heading { font-size: clamp(38px, 6.2vw, 74px); }
.tg-section-heading { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; }

/* ==========================================================================
   BRAND LOCKUP (header)
   ========================================================================== */

/*
 * .tg-brand — the <a> wrapping emblem + text group in the site header.
 * Matches the mockup's inline-flex brand with gap 15px between emblem and
 * wordmark. Uses tokens for font/color; the emblem is decorative (aria-hidden).
 */
.tg-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	line-height: 1;
}

.tg-brand:focus-visible {
	outline: 3px solid rgba(219, 85, 55, 0.55);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Single brand lockup image (emblem + wordmark + descriptor, built for dark nav) */
.tg-brand__lockup {
	display: block;
	width: 240px;
	height: auto;
	flex: none;
}

@media (max-width: 560px) {
	.tg-brand__lockup {
		width: 190px;
	}
}

/* ==========================================================================
   GLOBAL HELPERS
   ========================================================================== */

.tg-band {
	width: 100%;
	/* border-box so padding-inline stays INSIDE 100% — content-box + width:100% +
	   padding:24px pushed full-bleed bands (.tg-hero, .tg-cta) 48px past the
	   viewport on mobile, clipping copy. No global box-sizing reset exists. */
	box-sizing: border-box;
}

.tg-band__header--center {
	text-align: center;
}

/* Breathing room below the intro block before the card grid */
.tg-band__header {
	margin-bottom: 0; /* spacing is applied via margin-top on the grid block */
}

.tg-lead {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink-soft);
	margin-top: 16px;
	max-width: 64ch;
}

.tg-lead--center {
	margin-inline: auto;
	text-align: center;
}

.tg-band__header--center .tg-lead {
	margin-inline: auto;
}

/* ==========================================================================
   EYEBROW LABEL
   ========================================================================== */

.tg-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-deep); /* AA-safe at this small size */
}

.tg-eyebrow--center {
	display: block;
	text-align: center;
}

/* On dark ink or fill backgrounds: use terracotta-soft for legibility */
.tg-eyebrow--soft {
	color: var(--wp--preset--color--terracotta-soft);
}

/* On terracotta-deep fill: use white at reduced opacity */
.tg-eyebrow--on-fill {
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   NAVIGATION (header)
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(22, 32, 45, 0.92); /* ink at 92% — references --ink color intent */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The header template-part wrapper (<header class="wp-block-template-part">) is
   exactly header-height, which traps the sticky .site-header (no scroll travel room).
   display:contents removes the wrapper's box so .site-header sticks against the
   full-height page container (.wp-site-blocks). Scoped to the header area only —
   the footer renders as <footer class="wp-block-template-part"> and is unaffected. */
header.wp-block-template-part {
	display: contents;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 15px;
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.site-header__wordmark {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.5px;
	color: #fff;
	margin: 0;
}

.site-header__wordmark a {
	color: #fff;
	text-decoration: none;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nav links within the WordPress Navigation block */
.site-header__nav .wp-block-navigation__container,
.site-header__nav .wp-block-navigation-item__content {
	color: #ffffff; /* nav link color — white for max legibility on the dark header */
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none;
}

.site-header__nav .wp-block-navigation-item__content:hover {
	color: #fff;
}

/* CTA button in header */
.site-header__nav .site-header__cta .wp-block-navigation-item__content,
.wp-block-navigation-item.site-header__cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--terracotta-deep);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	padding: 9px 16px;
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.site-header__nav .site-header__cta .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.site-header__cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--terracotta-deeper);
}

/* Core overlay menu button — white on the dark ink header.
   Core governs when the hamburger shows (overlayMenu:"mobile"); do not set display here. */
.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container-close { color: #fff; }

/* ==========================================================================
   MOBILE NAV OVERLAY — brand ink dialog
   Core's default open overlay is a cramped white bar with tiny black links and
   an invisible (white-on-white) close button. Restyle the OPEN overlay as a
   full-screen dark-ink panel with white links, matching the header aesthetic.
   Scoped to .is-menu-open so the desktop inline nav is untouched.
   ========================================================================== */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	/* Core sets an explicit height that wins over inset:0, leaving an 80px bar —
	   force full viewport height (dvh handles the mobile address bar). */
	height: 100vh !important;
	height: 100dvh !important;
	width: 100vw !important;
	background-color: var(--wp--preset--color--ink, #16202D) !important;
	padding: 0;
	overflow-y: auto;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	margin: 0;
	padding: 88px 28px 40px; /* top clears the close button */
	min-height: 100%;
	box-sizing: border-box;
}

.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

/* Nav links — white, large, generous tap targets, subtle dividers.
   The CTA item is excluded so it keeps its terracotta button styling. */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.site-header__cta) .wp-block-navigation-item__content {
	color: #fff !important;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--lg, 1.25rem) !important;
	font-weight: 600;
	padding: 15px 0 !important;
	display: block;
	width: 100%;
	border-bottom: 1px solid rgba(212, 220, 228, 0.12);
}

/* CTA ("Book an assessment") — full-width terracotta button, set apart. */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__cta {
	margin-top: 22px;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .site-header__cta .wp-block-navigation-item__content {
	justify-content: center;
	width: 100%;
	padding: 14px 16px;
	font-size: var(--wp--preset--font-size--sm) !important;
	/* WP core forces nav-item content to color:inherit (0-3-0); force white so the
	   CTA label stays legible on the terracotta/season button in the overlay. */
	color: #fff !important;
}

/* Close button — white, visible, comfortable target, top-right. */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #fff !important;
	top: 26px;
	right: 22px;
	width: 44px;
	height: 44px;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.tg-hero {
	/* Hero gradient uses ink-adjacent darks with no exact token equivalent.
	   The ink token (#16202D) is close but these ramp darker for visual depth.
	   Acceptable raw values — no token exists for these gradient stops. */
	background: linear-gradient(165deg, #1B2735 0%, #131C27 60%, #0F1620 100%);
	position: relative;
	overflow: hidden;
	/* Mockup values (padding:118px 24px 108px); CSS reinforces the inline
	   block styles in case WP theme spacing resets apply. */
	padding-block-start: 118px;
	padding-block-end: 108px;
	padding-inline: 24px;
}

/* One left-aligned content column: eyebrow, H1, sub, and CTAs share a left edge.
   (Constrained layout centred each child independently — the misalignment bug.) */
.tg-hero__inner {
	max-width: 1120px;
	margin-inline: auto;
}

.tg-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 38px;
}

.tg-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(180deg, transparent, rgba(219, 85, 55, 0.05));
	pointer-events: none;
}

.tg-hero__heading {
	max-width: 15ch;
	margin-top: 16px;
}

/* Terracotta accent on hero H1 — large enough for WCAG large-text threshold (bright terracotta OK) */
.tg-hero__accent {
	color: var(--wp--preset--color--terracotta);
}

.tg-hero__sub {
	max-width: 60ch;
}

/* ==========================================================================
   HERO IMAGE  (Task 3, Phase 3 — birch canopy via media library)
   Activated when body.tg-has-hero-image is present (set in functions.php
   when the `home_hero_image` ACF option holds an attachment ID).

   Layer order (bottom → top):
     z0  ::before  — birch photo + filter (saturate/brightness). URL injected
                     by tg_home_hero_image_style() into wp_head as:
                     body.tg-has-hero-image .tg-hero::before{background-image:url(...)}
     z1  ::after   — full-coverage ink gradient overlay (rev4: full height,
                     left-anchored 90%→75%→64% — entire hero meaningfully filtered,
                     strong contrast at text edge, birch still visible on right)
     z2  __inner   — text content, unfiltered, full-brightness

   The element itself (.tg-hero) holds background-color:ink as the graceful
   fallback only (no filter, no background shorthand that would reset the image).

   Filter recipe from hero-treatment-spec.md:
   - overlay:  linear-gradient(90deg, rgba(22,32,45,0.90) 0%, rgba(22,32,45,0.75) 50%, rgba(22,32,45,0.64) 100%)
               Left ~90% ink at text edge, never below ~64% on far right — entire hero filtered, no bare-bright birch.
   - filter:   saturate(0.85) brightness(0.88) — on the image layer only (::before)
   - WCAG AA: white H1 large text easily clears 3:1; ink-mist (#D4DCE4) subhead clears 4.5:1 AA across full gradient range.

   Seasonal palette swaps (terracotta accent, button colours) apply to the
   content layer only — the overlay/filter values hold across all seasons.
   Interior page heroes are unaffected (body class only added on front page).
   ========================================================================== */

body.tg-has-hero-image .tg-hero {
	/* background-color is the graceful fallback (image in ::before). No filter
	   on the element itself — filter here would dim the text. */
	background-color: var(--wp--preset--color--ink);
	position: relative; /* stacking context for ::before / ::after */
}

/* Image layer: birch photo, filtered. URL injected by tg_home_hero_image_style()
   at wp_head targeting this selector — do NOT set background-image here
   (a shorthand here would wipe the injected URL; use only the longhands below). */
body.tg-has-hero-image .tg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: left center;
	/* background-image injected at runtime via tg_home_hero_image_style() */
	filter: saturate(0.85) brightness(0.88);
	pointer-events: none;
}

/* Ink tint layer: sits above the photo, below the text.
   Rev4: height:auto overrides the inherited height:120px from .tg-hero::after (the
   base decorative fade for non-image heroes). With inset:0 (top:0 + bottom:0) and
   height:auto the pseudo-element stretches to fill the full hero height — no
   under-filtered band above or to the right. */
body.tg-has-hero-image .tg-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	height: auto;
	z-index: 1;
	background: linear-gradient(90deg, rgba(22,32,45,0.90) 0%, rgba(22,32,45,0.75) 50%, rgba(22,32,45,0.64) 100%); /* full-coverage gradient: ~90% ink at left text edge, ~64% at far right — entire hero filtered, no bare-bright birch zone */
	pointer-events: none;
}

/* Content above both pseudo-layers — no filter applied */
body.tg-has-hero-image .tg-hero__inner {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   PAIN GRID
   ========================================================================== */

.tg-pain-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 860px) {
	.tg-pain-grid {
		grid-template-columns: 1fr;
	}
}

.tg-pain-card {
	/* Explicit padding: declared block-style spacing did not serialize onto the
	   element (same WP quirk as .tg-band / .tg-audience-card). */
	padding: 24px 24px 22px;
	box-shadow: var(--wp--custom--elevation--sm);
}

.tg-pain-card__number {
	display: inline-block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xs);
	/* Small terracotta on white must be terracotta-deeper (#9E3A22) for AA (brief §3);
	   bright terracotta at 12px measured 3.91:1 and failed. */
	color: var(--wp--preset--color--terracotta-deeper);
	letter-spacing: 1px;
}

.tg-pivot__accent {
	color: var(--wp--preset--color--terracotta);
}

/* ==========================================================================
   PILLARS
   ========================================================================== */

.tg-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

@media (max-width: 860px) {
	.tg-pillars__grid {
		grid-template-columns: 1fr;
	}
}

/* 3px terracotta top rule on pillar cards */
.tg-pillar-card {
	/* Explicit padding: block-style spacing did not serialize onto the card element
	   (same WP quirk as .tg-band / .tg-audience-card / .tg-pain-card). */
	padding: 28px 26px 26px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--wp--custom--elevation--sm);
}

.tg-pillar-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--wp--preset--color--terracotta);
	border-radius: var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) 0 0;
}

/* Pillar category tag */
.tg-pillar-card__tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-deeper);
}

.tg-pillar-link {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
}

.tg-pillar-link:hover {
	color: var(--wp--preset--color--terracotta-deeper);
}

/* Hover lift — only when motion is OK */
@media (prefers-reduced-motion: no-preference) {
	.tg-pillar-card {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.tg-pillar-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--wp--custom--elevation--md);
	}
}

/* ==========================================================================
   ANCHOR BAND
   ========================================================================== */

/*
 * Phase 1 revision: converted from terracotta-deep full-bleed to cloud background.
 * Terracotta is now used only as an accent (step numbers, eyebrow), matching
 * the mockup's light pillars/how-it-works treatment. AA contrast verified:
 * terracotta-deep (#C24528) on cloud (#F4F6F8) = 4.7:1 at label size — passes AA large.
 * Ink (#16202D) on cloud (#F4F6F8) = 14.1:1 — passes AA.
 */
.tg-anchor-band {
	background: var(--wp--preset--color--cloud);
}

.tg-anchor-band__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 860px) {
	.tg-anchor-band__steps {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.tg-anchor-band__steps {
		grid-template-columns: 1fr;
	}
}

/* Step number: terracotta-deep on cloud — accent, not fill */
.tg-anchor-step__num {
	display: inline-block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 1px;
	color: var(--wp--preset--color--terracotta-deep);
}

/* Light-background step variant — headings and body in ink, not white */
.tg-anchor-step--light h3 {
	color: var(--wp--preset--color--ink);
}

.tg-anchor-step--light p {
	color: var(--wp--preset--color--ink-soft);
}

/* Terracotta rule above each step on light background */
.tg-anchor-step--light {
	border-top: 2px solid var(--wp--preset--color--terracotta);
	padding-top: 20px;
}

/* ==========================================================================
   AUDIENCES
   ========================================================================== */

.tg-audiences__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

@media (max-width: 860px) {
	.tg-audiences__grid {
		grid-template-columns: 1fr 1fr;
	}
}

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

.tg-audience-card {
	/* Explicit padding: the block-style spacing did not serialize onto the card
	   element (same WP quirk as .tg-band); match the pillar cards' generosity. */
	padding: 28px;
	box-shadow: var(--wp--custom--elevation--sm);
}

.tg-audience-card__icon {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--mist);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--terracotta-deep);
}

/* Hover lift on cards */
@media (prefers-reduced-motion: no-preference) {
	.tg-audience-card {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.tg-audience-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--wp--custom--elevation--md);
	}
}

/* ==========================================================================
   ABOUT SPLIT
   ========================================================================== */

/*
 * .tg-portrait wraps the real portrait.jpg (629×839, 4:5 ratio).
 * border-radius matches mockup (.portrait { border-radius: 20px }) = --xl token.
 * box-shadow matches mockup's --lg elevation. object-position: center top
 * keeps Travis's face visible when the image crops.
 * Phase 1 revision: pattern now uses portrait.jpg directly (not a placeholder).
 */
.tg-portrait {
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	box-shadow: var(--wp--custom--elevation--lg);
	aspect-ratio: 4 / 5;
}

.tg-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* About split: text column ~58% (1.4fr), image column ~42% (1fr).
   The gap:48px and align-items:center match the mockup's
   .about .inner { grid-template-columns:1.4fr 1fr; gap:48px; align-items:center } */
.tg-about-split__inner {
	align-items: center;
}

@media (max-width: 860px) {
	.tg-about-split .wp-block-columns {
		flex-direction: column;
	}

	.tg-about-split .wp-block-column {
		width: 100% !important;
	}
}

.tg-text-link {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
	font-size: 15px;
}

.tg-text-link:hover {
	color: var(--wp--preset--color--terracotta-deeper);
}

/* Desktop restore of the 58/42 split; !important overrides the inline 1fr default.
   Scoped to :has(.tg-about-split__portrait) so a portrait-less variant stays single-column.
   :has() is supported by all WP target browsers (Chrome 105+, Safari 15.4+, Firefox 121+). */
@media (min-width: 861px) {
	.tg-about-split__inner:has(.tg-about-split__portrait) { grid-template-columns: 58% 42% !important; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background: #0C1219; /* below ink — closest to mockup; no token exists for this value */
	color: #8B95A1;
}

.site-footer__inner {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter, 24px);
	padding-block: 34px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

/* Stack footer columns on mobile (relocated from the now-removed RESPONSIVE block) */
@media (max-width: 760px) {
	.site-footer__inner {
		flex-direction: column;
	}
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.site-footer__wordmark {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: 18px;
	color: #fff;
	margin: 0;
}

.site-footer__wordmark a {
	color: #fff;
	text-decoration: none;
}

.site-footer__nap {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--wp--preset--font-size--xs);
	color: #8B95A1;
}

.site-footer__nap-name {
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
}

.site-footer__nap-contact {
	color: var(--wp--preset--color--terracotta-soft);
	text-decoration: none;
	margin-top: 4px;
}

.site-footer__nap-contact:hover {
	color: #fff;
}

.site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-footer__nav a {
	color: #ffffff;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
}

.site-footer__nav a:hover {
	color: #fff;
}

/* Right column: stacks nav + "Let's talk" button vertically, left-aligned */
.site-footer__col-right {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.site-footer__legal {
	background: rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__copy {
	font-size: var(--wp--preset--font-size--xs);
	/* #6B7380 measured 4.04:1 on the dark footer and failed AA; slate-light lifts it to ~6.6:1. */
	color: var(--wp--preset--color--slate-light);
	margin: 0;
}

/* ==========================================================================
   SCROLL REVEAL (prefers-reduced-motion: no-preference only)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.tg-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.28s ease, transform 0.28s ease;
	}

	.tg-revealed {
		opacity: 1;
		transform: none;
	}
}

/* When JS is off or motion is reduced, elements are always visible */
.tg-reveal:not(.tg-revealed) {
	/* Fallback: visible by default via the no-preference media query wrapper above */
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* (Dead custom-toggle and nav-hiding rules removed — core overlay menu governs
   mobile nav via overlayMenu:"mobile" in the Navigation block attribute.) */

/* ==========================================================================
   ARTICLE CARD (Insights)
   ========================================================================== */

.tg-article-card {
	box-shadow: var(--wp--custom--elevation--sm);
	display: flex;
	flex-direction: column;
}

.tg-article-card__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.tg-article-card__date {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

.tg-article-card__title {
	font-family: var(--wp--preset--font-family--montserrat);
}

.tg-article-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tg-article-card__title a:hover {
	color: var(--wp--preset--color--terracotta-deep);
}

.tg-article-card__link {
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--montserrat);
}

.tg-article-card__link:hover {
	color: var(--wp--preset--color--terracotta-deeper);
}

@media (prefers-reduced-motion: no-preference) {
	.tg-article-card {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.tg-article-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--wp--custom--elevation--md);
	}
}

/* ==========================================================================
   REDUCED MOTION OVERRIDES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   FOOTER NAV — horizontal row (WP navigation rendered flex-direction:column
   in the template-part context despite the declared flex layout; force row).
   ========================================================================== */
.site-footer__nav,
.site-footer__nav .wp-block-navigation__container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	/* WP core forces nav-item content to `color:inherit` at (0,3,0); the .site-footer__nav a
	   rule can't win, so set white on the nav container and let the links inherit it. */
	color: #ffffff;
}

/* ==========================================================================
   PARALLAX BAND  (Phase 7)
   Full-bleed scenic birch panorama between pillars and anchor_band sections.
   Ships image-only by default (empty text fields = clean decorative band).
   Image delivered via background-image (decorative; no alt text required).

   Layer order (bottom → top):
     z0  .tg-parallax        — background-image: birch panorama + image filter
                               (saturate/brightness applied to the element layer).
     z1  .tg-parallax::before — constant ink scrim at --parallax-scrim-opacity
                               (pointer-events:none; does not intercept clicks).
     z2  .tg-parallax text   — eyebrow / heading / subtext at position:relative; z-index:2.

   Parallax motion: background-attachment:fixed on desktop (≥900px, non-touch,
   no-preference). Disabled via CSS on:
     - touch devices: (hover:none) and (pointer:coarse) → background-attachment:scroll
     - reduced-motion: prefers-reduced-motion:reduce → background-attachment:scroll
   Static cover appearance is intentional on mobile — not broken.

   CLS prevention: min-height declared in CSS before image loads; background-size:cover
   prevents reflow. No layout shift.

   Seasonal: scrim and filter are constant (no seasonal variance needed — verified
   against all four season palettes in phase7-parallax-spec.md §3).
   The --parallax-scrim-opacity and --parallax-min-height CSS vars are set inline
   per-instance by the PHP partial, letting the ACF fields override defaults.

   Design token rule: raw hex values below are intentional — these are the ink
   scrim colour (#16202D = --ink) and white, which have no token equivalents in
   the background shorthand context. All other values use preset vars.
   ========================================================================== */

.tg-parallax {
	/* --- Stacking context for scrim overlay --- */
	position: relative;
	overflow: hidden;

	/* --- Height (CLS-safe: declared before image loads) --- */
	/* Default desktop clamp; overridden by --parallax-min-height from PHP inline style.
	   The PHP sets --parallax-min-height to the ACF-selected value (280px | 360px | 480px).
	   We use the var directly so the single clamp per breakpoint is always respected. */
	min-height: clamp(var(--parallax-min-height, 360px), 40vh, 480px);

	/* --- Background image (decorative; set via --parallax-image inline by parallax.php) ---
	   The PHP partial always sets this var (ACF image or theme asset fallback).
	   No CSS-level URL fallback — avoids hardcoding the theme directory name. */
	background-image: var(--parallax-image);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed; /* parallax on desktop — disabled below for touch/reduced-motion */

	/* --- Image filter (constant — matches hero-treatment-spec.md recipe) --- */
	/* Applied to the element layer (background-image + ::before scrim).
	   Effect on the near-black scrim is visually negligible. */
	filter: saturate(0.85) brightness(0.88);

	/* --- Full-bleed: override .tg-band padding (band is scenic image; padding is zero) ---
	   The .tg-band rule applies clamp(72px, 8vw, 120px) block padding.
	   The parallax band is full-bleed image — the min-height rule governs vertical space. */
	padding-block: 0;
	padding-inline: 0;

	/* --- Content alignment (for optional overlay text) --- */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;

	/* --- CSS custom property defaults (overridden inline by PHP partial) --- */
	--parallax-min-height: 360px;
	--parallax-scrim-opacity: 0.62;
}

/* Ink scrim overlay — constant across all seasons.
   62% opacity at default; owner-adjustable via sec_parallax_scrim_opacity ACF field.
   Ensures WCAG AA for any overlaid text (heading ≥16:1; eyebrow ≥7.2:1; body ≥4.5:1)
   against the ~20–25% luminance background (filtered image + scrim). */
.tg-parallax::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(22, 32, 45, var(--parallax-scrim-opacity, 0.62)); /* --ink at var opacity */
	z-index: 1;
	pointer-events: none;
}

/* Optional overlay text — sits above the scrim */
.tg-parallax__eyebrow,
.tg-parallax__heading,
.tg-parallax__subtext {
	position: relative;
	z-index: 2;
	max-width: 560px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* Eyebrow on dark overlay: terracotta-soft (#ECA98F, ~7.2:1 contrast) */
.tg-parallax__eyebrow {
	color: var(--wp--preset--color--terracotta-soft);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	margin-bottom: 12px;
}

/* Heading: white on dark overlay (~16–18:1 contrast) */
.tg-parallax__heading {
	color: #ffffff;
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 700;
	line-height: 1.08;
	margin-bottom: 16px;
}

/* Subtext: white on dark overlay (~16:1 contrast) */
.tg-parallax__subtext {
	color: #ffffff;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	max-width: 520px;
}

/* --- Tablet (≤900px) — reduced min-height; parallax still active --- */
@media (max-width: 900px) {
	.tg-parallax {
		min-height: clamp(280px, 35vh, 400px);
	}
}

/* --- Mobile (≤560px) — compact height, text padding guard, reduced text sizes --- */
@media (max-width: 560px) {
	.tg-parallax {
		min-height: clamp(200px, 30vh, 300px);
		/* Add breathing room around text when text fields are populated.
		   Empty-state (no children): padding contributes to total height harmlessly. */
		padding-block: 48px;
	}

	.tg-parallax__heading {
		font-size: var(--wp--preset--font-size--xl);
	}

	.tg-parallax__subtext {
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* --- Touch device fallback (iOS Safari + coarse-pointer devices) ---
   background-attachment:fixed is janky on iOS (jitter / frame skips).
   Switch to scroll attachment; band appears as a static scenic image. Intentional. */
@media (hover: none) and (pointer: coarse) {
	.tg-parallax {
		background-attachment: scroll;
	}
}

/* --- Reduced-motion: honour prefers-reduced-motion:reduce ---
   The global reduced-motion block above kills transitions/animations;
   this rule explicitly disables parallax motion as a named behavioural override. */
@media (prefers-reduced-motion: reduce) {
	.tg-parallax {
		background-attachment: scroll;
	}
}