/**
 * mvc-tomkreiss/css/client-overrides.css
 *
 * Client-specific overrides for TK Design by Tom Kreiss (Furniture Designer).
 * Base preset: luxury-minimal — "The Evolved California Look"
 * Loaded last in the CSS chain, after mvc-parent/assets/css/presets/luxury-minimal.css.
 *
 * COLOR POLICY:
 *   The luxury-minimal preset already sets --color-primary (near-black),
 *   --color-accent (champagne), --color-bg (cream), etc. — and matches the
 *   client's approved reference (near-black bands, warm cream sections,
 *   bronze/champagne accent). Do not redeclare those tokens here.
 *
 *   If Design Settings → Colors in the dashboard are changed, everything
 *   flows through automatically via color-mix() in tokens.css — this file
 *   must not fight that by hardcoding hex values.
 *
 *   This file is for anything the preset doesn't already cover: container
 *   width, section rhythm, and one-off gradient/overlay compositions specific
 *   to this site's layout (e.g. the dark about/CTA bands over photography).
 *
 * FONT:
 *   Section titles use the luxury-minimal preset's own heading font —
 *   Cormorant Garamond (already @imported by
 *   mvc-parent/assets/css/presets/luxury-minimal.css, so no font import is
 *   needed here). --font-heading/--mvc-font-heading are declared explicitly
 *   below only to make that intentional, not to override it to something
 *   else. The hero H1 ("EVOLVED.") is a deliberate exception — it matches
 *   the "TK DESIGN" logotype's sans-serif instead; see the hero rule below.
 */

:root {

	/* ── Container — slightly wider than preset default for full-bleed hero/gallery ── */
	--container-max: 1320px;

	/* ── Headings — Cormorant Garamond (luxury-minimal preset default) ───── */
	--font-heading:     'Cormorant Garamond', 'Georgia', serif;
	--mvc-font-heading: 'Cormorant Garamond', 'Georgia', serif;

	/* ── Photo overlay for dark bands (about-feature, closing CTA) ────────── */
	--mvc-gradient-overlay:   linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.08) 100%);
	--mvc-gradient-overlay-h: linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 60%, transparent 100%);

	/* ── Thin accent line under eyebrows (e.g. "TOM KREISS", "EVOLVED COLLECTIONS") ── */
	--mvc-gradient-line: linear-gradient(90deg, var(--color-accent), transparent);

	/* ── Metallic gold gradient — shared by the hero subheadline text, the
	   hero CTA hover fill, and the header CTA hover fill, so all three read
	   as the same "gold foil" treatment instead of three separate gradients. ── */
	--mvc-gradient-gold: linear-gradient(
		110deg,
		color-mix(in srgb, var(--color-accent) 55%, black 15%) 0%,
		color-mix(in srgb, var(--color-accent) 70%, white 45%) 30%,
		var(--color-accent) 50%,
		color-mix(in srgb, var(--color-accent) 70%, white 45%) 70%,
		color-mix(in srgb, var(--color-accent) 55%, black 15%) 100%
	);
}

/* ── Home + About hero — full-viewport treatment ──────────────────────────
 * Pairs with hero_text_color=dark + hero_overlay_color=light (set in
 * page-templates/template-tk-home.php and template-tk-about.php) so dark
 * serif text sits on the warm off-white wash instead of the photo directly.
 *
 * Height: hero_height=full gives min-height:100dvh, but the header is
 * position:sticky (occupies real space in flow, not an overlay) — so
 * header (80px on luxury-minimal) + a full 100dvh hero together exceed one
 * viewport, making the hero read as "shifted upward"/cut off at first
 * paint. Subtracting the header height gives an exact full-viewport fit;
 * the extra +6vh on top is the "slightly more" — a bit of overshoot so the
 * hero still reads as full-bleed/immersive rather than landing exactly at
 * the fold. Same math applies on About (hero_height=full there too), so
 * both pages share this rule instead of duplicating it.
 */
@media (min-width: 768px) {
	.mvc-main--home .mvc-hero--full,
	.mvc-main--about .mvc-hero--full {
		min-height: calc(100dvh - var(--header-height, 80px) + 6vh);
	}
}

/* ── About page hero — shift crop to reveal more of the photo's right side ──
 * hero.css's default object-position:center crops the source photo evenly
 * from both sides. Shifting the focal point rightward keeps the same
 * vertical framing but reveals more of what's on the right of the source
 * image (at the cost of cropping a bit more off the left, which isn't where
 * the hero's own text sits — hero_layout='left' keeps the copy over the
 * left/center of the photo, unaffected by this).
 */
.mvc-main--about .mvc-hero__img {
	object-position: 65% center;
}

/* ── All hero sections — stacked layout on mobile only ─────────────────────
 * Site-wide (home, about, contact — every mvc_get_component('hero', ...)
 * call). Desktop/tablet keep each page's own full-bleed photo with text
 * overlaid (hero_layout=left). On phones that overlay treatment crowds body
 * copy on top of a busy photo — approved reference instead shows the photo
 * as a shorter band up top, with headline + subheadline + CTA in a clean
 * band below it, left-aligned (matching hero_layout=left's own desktop
 * alignment), no overlay tint needed since text never sits on the image.
 *
 * hero.php has a real 'stacked-text-bottom' hero_layout that does exactly
 * this, but it's a single PHP arg — not responsive — so switching to it
 * would also restructure the desktop hero on every page, which should stay
 * as-is. This reproduces that same layout's CSS (hero.css .mvc-hero--stacked
 * / .mvc-hero--stacked-text-bottom) by hand, mobile-only, instead.
 */
/* .mvc-main (shared by every page's <main class="mvc-main mvc-main--X">) is
 * used as the qualifier here instead of bare .mvc-hero — client-overrides.css
 * actually loads BEFORE hero.css in this site's enqueue order (confirmed via
 * the rendered <link> order, not the mvc-child-overrides dependency comment
 * above, which assumes the opposite), so a same-specificity rule here loses
 * the cascade tie to hero.css's own same-specificity rules and silently does
 * nothing. .mvc-main .mvc-hero (2 classes) beats hero.css's 1-class rules
 * regardless of load order. */
@media (max-width: 767px) {
	.mvc-main .mvc-hero {
		display: grid;
		grid-template-rows: auto auto;
		align-items: stretch;
		min-height: 0;
	}

	.mvc-main .mvc-hero__media {
		position: relative;
		inset: unset;
		width: 100%;
		height: 60vh;
		height: clamp(400px, 60vh, 640px);
		order: 1;
	}

	.mvc-main .mvc-hero__overlay {
		display: none;
	}

	.mvc-main .mvc-hero__inner {
		position: relative;
		order: 2;
		max-width: none;
		padding-inline: var(--space-6, 1.5rem);
		padding-block: var(--space-10, 2.5rem);
	}

	.mvc-main .mvc-hero__content {
		align-items: flex-start;
		text-align: left;
		max-width: 100%;
	}

	.mvc-main .mvc-hero__ctas {
		justify-content: flex-start;
	}

	/* hero.css has its own mobile rule (.mvc-hero--dark.mvc-hero--overlay-tint-light,
	   2 classes) that flips dark-mode text to light/white on mobile — written
	   for the ORIGINAL overlay-on-photo mobile behavior, where the light-tint
	   overlay becomes a solid dark scrim on mobile and dark text would
	   otherwise vanish against it. This stacked layout hides the overlay
	   entirely instead (see .mvc-hero__overlay {display:none} above) and
	   moves the text onto the plain cream page background — hero.css's rule
	   still fires (same breakpoint) and was forcing white-on-cream (invisible)
	   text. .mvc-main qualifier (3 classes total) beats it back to dark. */
	.mvc-main .mvc-hero--dark.mvc-hero--overlay-tint-light .mvc-hero__headline,
	.mvc-main .mvc-hero--dark.mvc-hero--overlay-tint-light .mvc-hero__subheadline {
		color: var(--color-heading);
	}

	/* Same issue as above, for the eyebrow (hero.css flips it to a pale gold
	   assuming a dark scrim behind it) — back to the normal AA-safe gold used
	   site-wide (see the .mvc-section-eyebrow rule further down this file). */
	.mvc-main .mvc-hero--dark.mvc-hero--overlay-tint-light .mvc-hero__eyebrow {
		color: #8C6B40;
	}

	/* About hero now uses dark text (hero_text_color='dark',
	   template-tk-about.php) since the current photo is light — the
	   .mvc-hero--light text-shadow override and solid dark __inner
	   background below were both written for the earlier light-text photo
	   and no longer apply; text sits on the plain cream page background,
	   same as the home hero. */
}

/* ── Tom Kreiss portrait band — stacked layout on mobile ──────────────────
 * Desktop keeps the full-bleed photo with text overlaid on the left (same
 * mechanism as the page hero, see hero-band.css). On phones this switches to
 * the same stacked treatment used for the page hero above: photo as its own
 * band up top (unchanged image/crop), then a solid near-black band below it
 * with the eyebrow/headline/body/CTA in light text — no image behind the
 * text at all, so the overlay tint is dropped.
 *
 * .mvc-main--home (2 classes) qualifies every selector here for the same
 * reason as the page-hero mobile override above: client-overrides.css loads
 * BEFORE hero-band.css in this site's actual enqueue order, so a bare
 * .mvc-hero-band-prefixed rule at hero-band.css's own specificity would lose
 * the cascade tie and silently do nothing.
 *
 * Scoped to .mvc-hero-band--tall (hb_height='tall', set in
 * template-tk-home.php) rather than :first-of-type — this section and the
 * "Love Coming Home" band further down the page are BOTH <section> tags, and
 * :first-of-type matches by tag name among siblings, not by class, so it was
 * matching the page's first <section> overall (the hero) instead of the
 * first .mvc-hero-band. --tall is unique to Tom's section (the other band
 * uses hb_height='md'), confirmed against the live rendered markup. */
@media (max-width: 767px) {
	.mvc-main--home .mvc-hero-band--tall {
		display: grid;
		grid-template-rows: auto auto;
		align-items: stretch;
		min-height: 0;
	}

	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__media {
		position: relative;
		inset: unset;
		width: 100%;
		height: 50vh;
		height: clamp(360px, 50vh, 520px);
		order: 1;
	}

	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__img {
		/* Was 100% (hard-right crop) — pulled in to reveal more of the left
		   side of the frame while Tom (positioned right-of-center in the
		   source photo) still stays comfortably in shot. */
		object-position: 75% center;
	}

	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__overlay {
		display: none;
	}

	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__inner {
		position: relative;
		order: 2;
		max-width: none;
		padding-inline: var(--space-6, 1.5rem);
		padding-block: var(--space-10, 2.5rem);
		background: #1c1c1c;
	}

	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__content {
		align-items: center;
		text-align: center;
		max-width: 100%;
		margin-inline: auto;
	}

	/* Text sits on the solid dark band now, not the photo — force light text
	   regardless of hb_text_color (this section is hb_text_color unset →
	   defaults light already, but this guards the mobile band either way,
	   same defensive pattern as the page-hero mobile override above). */
	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__headline,
	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__subheadline {
		color: var(--color-text-inverse, #fff);
	}

	.mvc-main--home .mvc-hero-band--tall .mvc-hero-band__ctas {
		justify-content: center;
	}
}

/* ── "Love Coming Home." closing band — compact card on mobile ────────────
 * hero-band.css's --md height clamp (360-600px) plus desktop-scale spacing
 * (padding-block:var(--space-16) on __inner, gap:var(--space-6) between
 * headline/subheadline/CTA) reads fine on desktop but sprawls the text
 * across the photo on a narrow phone — approved reference shows this as a
 * short, tight card instead, headline and one-line subtext close together.
 * Text still sits directly on the photo here (unlike the Tom Kreiss section
 * above, which moves to a separate solid band) — this section is already
 * short enough that a compact overlay reads fine, per the mockup.
 * .mvc-hero-band--md is unique to this section (Tom Kreiss uses --tall),
 * confirmed against the live rendered markup — safe without :first-of-type.
 */
@media (max-width: 767px) {
	.mvc-main--home .mvc-hero-band--md {
		min-height: 320px;
	}

	.mvc-main--home .mvc-hero-band--md .mvc-hero-band__inner {
		padding-block: var(--space-8, 2rem);
	}

	.mvc-main--home .mvc-hero-band--md .mvc-hero-band__content {
		gap: var(--space-3, 0.75rem);
	}

	.mvc-main--home .mvc-hero-band--md .mvc-hero-band__headline {
		font-size: var(--text-3xl);
	}

	.mvc-main--home .mvc-hero-band--md .mvc-hero-band__subheadline {
		font-size: var(--text-base, 1rem);
	}
}

/* ── Tom Kreiss portrait band — taller section, narrower text column ─────
 * hb_height="tall" clamps to 75vh (480-800px) and the --left layout's text
 * column is capped at 650px (hero-band.css) — bump both slightly so the
 * portrait gets more vertical room and the copy reads as a tighter column
 * next to it. Desktop only — mobile stacks into its own photo band + solid
 * dark band (see the mobile override above), where a tall min-height and a
 * narrow left-aligned column don't apply. */
@media (min-width: 768px) {
	.mvc-main--home .mvc-hero-band--tall {
		min-height: 85vh;
		min-height: clamp(480px, 85vh, 900px);
	}

	.mvc-main--home .mvc-hero-band--tall.mvc-hero-band--left .mvc-hero-band__content {
		max-width: 500px;
	}
}

/* ── Contact page hero — "Let's Talk About Your Home." treatment ─────────
 * Same full-viewport math as the homepage hero above (hero_height=full),
 * and the same warm off-white wash + dark serif text pairing. The
 * subheadline is passed as hero_subheadline_html (2 plain lines + <em> for
 * the accent line) — style the <em> in the site's existing gold-italic
 * voice so it reads as a matching accent line, not just default italics.
 */
.mvc-main--contact .mvc-hero--full {
	min-height: calc(100dvh - var(--header-height, 80px) + 6vh);
}

.mvc-main--contact .mvc-hero__subheadline em {
	font-style: italic;
	color: var(--color-accent-dark, var(--color-accent));
}

/* Extra breathing room on the left of the hero text — hero.css's left-layout
 * default (--space-8, --space-10 at 1024px+) sits the text closer to the
 * edge than this page wants. */
@media (min-width: 768px) {
	.mvc-main--contact .mvc-hero--left .mvc-hero__inner {
		padding-inline-start: var(--space-16, 4rem);
	}
}

/*
 * Headline & subheadline font-family both read live from Design Settings →
 * Fonts (--mvc-font-heading / --mvc-font-accent), NOT hardcoded here — set
 * in WP Admin → Design Settings, not in this file. design-tokens.php only
 * defines these custom properties when the editor has actually picked a
 * font for that slot, so the var() fallback (--font-heading / --font-body)
 * is what's shown until a Design Settings font is chosen.
 * --mvc-font-accent specifically is meant for exactly this kind of italic/
 * tagline treatment (mvc-core ships it as "none" by default — pick one in
 * Design Settings → Fonts → Accent Font to activate it here).
 *
 * Uppercase + tight tracking + fluid oversized clamp() stay hardcoded —
 * those are layout/scale decisions, not something Design Settings governs.
 *
 * The subheadline gets a metallic-gold effect: a light/dark gold gradient
 * clipped to the text simulates a foil/metal sheen instead of a flat color.
 * Bolded and sized up from the base 1.25rem so the gradient text (naturally
 * lower-contrast than a flat color) stays legible against the photo.
 * Fallback: flat --color-accent (champagne/bronze from luxury-minimal) for
 * any browser that doesn't support background-clip:text.
 */
.mvc-main--home .mvc-hero__headline {
	font-family: var(--mvc-font-heading, var(--font-heading));
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-weight: var(--font-weight-bold, 700);
	font-size: clamp(3rem, 4vw + 1.5rem, 6.5rem);
}

.mvc-main--home .mvc-hero__subheadline {
	font-family: var(--mvc-font-accent, var(--mvc-font-heading, var(--font-heading)));
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.125rem, 1vw + 0.9rem, 1.5rem);
	color: var(--color-accent); /* fallback for browsers without background-clip:text */
	background-image: var(--mvc-gradient-gold);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* text-stroke adds visual weight on top of font-weight:700 — most fonts
	   don't ship anything heavier than 700 as a real weight, so pushing
	   font-weight further either does nothing or gets faux-bolded by the
	   browser, which looks worse. A thin stroke in the same gold tone reads
	   as bolder/more legible against the photo without that risk. */
	-webkit-text-stroke: 0.4px var(--color-accent);
}

@supports not (background-clip: text) {
	.mvc-main--home .mvc-hero__subheadline {
		color: var(--color-accent);
	}
}

/* ── "What Is TK Design?" eyebrow — deep bronze/espresso, not gold ─────────
 * Gold/champagne (--color-accent #c8a97e, --color-accent-dark #a8895e) sits
 * in the same light-to-mid luminance range as this section's cream
 * background (--color-bg #f9f8f6) — no true gold tone can get real contrast
 * there without going dark enough to stop reading as gold at all (confirmed
 * by two failed attempts: plain accent-dark was too pale, color-mix toward
 * black lost the gold identity entirely). Deep bronze/espresso brown is a
 * dark, high-contrast color that still reads as the same warm family as the
 * gold accent, without being literal black/near-black.
 *
 * Scoped to .mvc-text-block--full.mvc-text-block--align-center (the exact
 * tb_layout/tb_align combo set in template-tk-home.php for this section,
 * confirmed unique against the live rendered markup) rather than
 * :first-of-type — text-block renders as a <section>, same tag as every
 * other section on the page (hero included), so :first-of-type matched the
 * page's first <section> overall (the hero), not the first .mvc-text-block,
 * and this rule was silently never applying.
 */
.mvc-main--home .mvc-text-block--full.mvc-text-block--align-center .mvc-text-block__eyebrow {
	color: #4a3826;
}

/* ── Eyebrow text — site-wide gold that actually passes WCAG AA ───────────
 * .mvc-section-eyebrow (typography.css) hard-codes color:var(--color-accent)
 * — the pale champagne gold (#c8a97e), which measures 2.10:1 against this
 * site's cream page background (#f9f8f6) and fails AA (needs 4.5:1 for
 * normal-size text). This was already discovered once for a single homepage
 * section (the #4a3826 fix directly above) but the same underlying problem
 * recurs on every other eyebrow site-wide — "Begin a Conversation"
 * (contact-form-section), "A Personal Approach" (text-block), etc. — since
 * they all inherit the same base class. Fixing it at the shared class level
 * instead of per-section. #8C6B40 measures 4.61:1 — same value used for the
 * header nav text above, for one consistent "AA-safe gold" across the site.
 * Higher specificity than the .mvc-main--home rule above (element+class vs
 * two classes) would normally lose a tie, but since both resolve to
 * effectively the same gold family this is a non-issue in practice.
 */
.mvc-section-eyebrow {
	color: #8C6B40;
}

/* text-block.php's tb_eyebrow_color='accent-dark' option renders
 * p.mvc-text-block__eyebrow.mvc-text-block__eyebrow--accent-dark (element +
 * 2 classes), which beats the single-class .mvc-section-eyebrow rule above
 * on specificity and resolves to --color-accent-dark (#a8895e, 3.09:1 — also
 * fails AA). "A Personal Approach" (template-tk-contact.php) uses this
 * option, so it needs its own override at matching specificity. */
p.mvc-text-block__eyebrow.mvc-text-block__eyebrow--accent-dark {
	color: #8C6B40;
}

/* ── Hero CTA hover — metallic gold instead of the base ghost button's gray ──
 * .mvc-btn--ghost:hover normally sets a flat gray background (--color-gray-100)
 * with dark text. Scoped to the homepage hero only — other ghost buttons
 * site-wide keep the default gray hover.
 */
.mvc-main--home .mvc-hero__ctas .mvc-btn--ghost {
	transition: background-color var(--transition-speed, 200ms) var(--transition-easing, ease),
		border-color var(--transition-speed, 200ms) var(--transition-easing, ease),
		color var(--transition-speed, 200ms) var(--transition-easing, ease);
}

.mvc-main--home .mvc-hero__ctas .mvc-btn--ghost:hover {
	background: var(--mvc-gradient-gold) !important;
	border-color: var(--color-accent) !important;
	color: color-mix(in srgb, var(--color-accent) 35%, black 65%) !important;
}

/* ── Header CTA — matches the hero button's ghost style + gold hover ──────
 * header.php hardcodes .mvc-btn--primary (solid fill) with a pill radius
 * from .mvc-header__cta's own CSS. Overridden here to look like the hero's
 * ghost button: transparent, bordered, dark text, gold-gradient on hover —
 * same treatment, same shared gradient token, different location.
 */
.mvc-header__cta {
	background: transparent !important;
	color: var(--color-text) !important;
	border-color: var(--color-border-strong) !important;
	border-radius: var(--mvc-btn-radius, var(--btn-radius)) !important;
}

.mvc-header__cta:hover {
	background: var(--mvc-gradient-gold) !important;
	border-color: var(--color-accent) !important;
	color: color-mix(in srgb, var(--color-accent) 35%, black 65%) !important;
}

/* ── Header nav — text color + gold underline instead of the filled pill ──
 * layout5.css's default gives the current-page link a solid filled pill
 * (border-radius:999px + background:var(--color-primary)) — that's the
 * "circle around the active page" this overrides. Swapped for a thin solid
 * gold underline instead: no background/radius, just a bottom border in the
 * accent color. Hover gets the same underline treatment (lighter weight via
 * the border-color) so the active state doesn't feel like the only
 * clickable-looking item. Change --mvc-nav-text-color below to control the
 * link text color site-wide.
 *
 * COLOR — WCAG AA note: the preset's --color-accent (#c8a97e, pale
 * champagne) and even --color-accent-dark (#a8895e) both FAIL AA contrast
 * (4.5:1 for normal-size text) against this site's cream page background
 * (#f9f8f6) — measured at 2.10:1 and 3.09:1. #8C6B40 is the lightest shade
 * in the same gold family that actually clears 4.5:1 (measures 4.61:1), so
 * it's used here instead of the preset accent tokens. Do not lighten this
 * without re-checking contrast against #f9f8f6.
 */
:root {
	--mvc-nav-text-color: #8C6B40;
}

.mvc-header .mvc-header__nav .mvc-nav__link,
.mvc-header .mvc-header__nav .menu-item > a {
	color: var(--mvc-nav-text-color);
	background: transparent;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	padding-bottom: calc(var(--space-2) - 2px);
}

.mvc-header .mvc-header__nav .mvc-nav__link:hover,
.mvc-header .mvc-header__nav .mvc-nav__link:focus-visible,
.mvc-header .mvc-header__nav .menu-item > a:hover {
	color: var(--mvc-nav-text-color);
	background: transparent;
	border-bottom-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.mvc-header .mvc-header__nav .mvc-nav__item--active > .mvc-nav__link,
.mvc-header .mvc-header__nav .current-menu-item > a,
.mvc-header .mvc-header__nav .current_page_item > a,
.mvc-header .mvc-header__nav .current-menu-ancestor > a {
	color: var(--mvc-nav-text-color);
	background: transparent;
	font-weight: var(--font-weight-semibold);
	border-bottom-color: var(--color-accent);
}

/* ── Header logo — grows on scroll ─────────────────────────────────────────
 * mvc-header__logo-img already has `transition: height` set up in
 * layout5.css but nothing changes its height on scroll by default; the
 * only existing scroll behavior (mvc-header--logo-oversized) does the
 * opposite (starts big, shrinks to normal). This grows the logo from its
 * normal size to ~1.35x once .is-scrolled is toggled by the header's
 * existing scroll-listener JS. Excluded from --logo-oversized headers so
 * it doesn't fight that mode's own (opposite-direction) scroll behavior.
 */
.mvc-header:not(.mvc-header--logo-oversized).is-scrolled .mvc-header__logo-img {
	height: calc(var(--header-logo-height) * 1.35);
}

/* ── Oversized logo + transparent header — extend the backdrop to match ───
 * mvc-header--logo-oversized (layout5.css) makes the logo taller than the
 * header row (height: header-height * 1.7) and relies on overflow:visible
 * so it spills downward past the row — by design, for headers with an
 * opaque background where the logo drops onto solid-colored space below.
 * This site's header is ALSO --transparent (the dark scrim over the hero
 * photo, layout5.css .mvc-header--transparent), and that scrim's background
 * is painted on the <header> element's own box, which is still only
 * header-height (80px) tall — overflow:visible lets the logo render past
 * that box, but the background does NOT extend with it, so the bottom of
 * the oversized logo pokes out past the scrim onto the bare photo with no
 * backing. Before scroll only (oversized logo is only taller than the row
 * pre-scroll — .is-scrolled shrinks it back to the normal contained size),
 * grow the header box itself to match so the scrim covers the whole logo.
 */
.mvc-header--logo-oversized.mvc-header--transparent {
	transition: height var(--duration-normal, 250ms) var(--ease-default, ease),
	            background 0.35s ease,
	            border-bottom-color 0.35s ease,
	            box-shadow 0.35s ease;
}

/* Desktop only — mobile always uses the normal contained logo size (see
   mobile header block below), so there's no oversized logo height to match
   there; without this scoping the header box would stay tall on mobile
   even though the logo inside it has shrunk back to normal. */
@media (min-width: 768px) {
	.mvc-header--logo-oversized.mvc-header--transparent:not(.is-scrolled) {
		height: calc(var(--header-height) * 1.7);
	}
}

/* ── Mobile header — skip the transparent float, always solid ─────────────
 * On desktop the header starts transparent/fixed over the hero photo and
 * fades to the solid cream bar once .is-scrolled is toggled by main.js's
 * scroll-position sentinel (see mvc-header--transparent + .is-scrolled
 * rules, layout5.css). On mobile the hero is no longer a full-height photo
 * with text overlaid (see the homepage hero stacked-layout override above)
 * — there's no photo directly behind the header for a transparent float to
 * make sense over, on any page. Force the "after scroll" solid/opaque look
 * unconditionally at this breakpoint instead of waiting on the JS toggle;
 * .is-scrolled keeps getting added/removed by the existing scroll listener,
 * this just makes the pre-scroll state visually identical to it so the
 * toggle is a no-op here.
 */
@media (max-width: 767px) {
	.mvc-header--transparent {
		position: sticky;
		background: var(--header-scrolled-bg, var(--header-bg)) !important;
		border-bottom-color: var(--header-border);
		box-shadow: none;
	}

	.mvc-header--transparent .mvc-header__nav .mvc-nav__link,
	.mvc-header--transparent .mvc-header__nav .menu-item > a,
	.mvc-header--transparent .mvc-header__phone,
	.mvc-header--transparent .mvc-header__phone-number,
	.mvc-header--transparent .mvc-header__logo-text,
	.mvc-header--transparent .mvc-header__menu-toggle,
	.mvc-header--transparent .mvc-header__phone-icon {
		color: var(--color-text) !important;
		text-shadow: none !important;
	}

	/* Oversized logo (mvc-header--logo-oversized, layout5.css) only makes sense
	   spilling over a floating transparent header — mobile no longer floats
	   (see rule above), so mobile always gets the normal contained logo size,
	   same as a non-oversized header. Overrides layout5.css's own
	   .mvc-header--logo-oversized .mvc-header__logo-img (higher specificity
	   than the base mobile .mvc-header__logo-img rule it's meant to beat). */
	.mvc-header--logo-oversized .mvc-header__logo-link {
		align-self: center;
		align-items: center;
	}

	.mvc-header--logo-oversized .mvc-header__logo-img {
		height: var(--header-logo-height-sm);
		filter: none;
	}
}

/* ── Bled text-block sections — wider gap between image and text ──────────
 * text-block.css's default two-column gap is --space-12. Since the bled
 * image now runs to the browser edge (see mvc-text-block--bleed in
 * mvc-parent/components/text-block/text-block.css), the text column can
 * end up feeling cramped right against it — widen the gap specifically for
 * these three homepage sections (Comfort / California Living / Luxury,
 * Evolved) rather than every text-block site-wide.
 */
@media (min-width: 768px) {
	.mvc-text-block--bleed .mvc-text-block__inner {
		gap: var(--space-20, 5rem);
	}
}

/* ── Homepage — Comfort / California Living / Luxury, Evolved — same height ─
 * Same underlying issue as the contact-page fix below: text-block's bleed
 * image renders at height:auto, so each section's height tracks that one
 * photo's own intrinsic aspect ratio. Comfort and California Living use
 * taller/portrait-leaning source photos than Luxury, so despite all three
 * sections sharing identical tb_layout/tb_columns_ratio settings, they were
 * rendering at visibly different heights. Fixing the row's height directly
 * (not the media) is the mechanism the contact-page fix below already
 * discovered works — an explicit height on .__media alone doesn't shrink the
 * row that contains it, since a grid row is sized by its tallest item and
 * .__body's own padding still made the row taller regardless.
 * Height chosen to match Luxury's own natural rendered height on desktop.
 */
@media (min-width: 768px) {
	.mvc-main--home .mvc-text-block--bleed .mvc-text-block__inner {
		height: clamp(420px, 42vw, 640px);
	}
	.mvc-main--home .mvc-text-block--bleed .mvc-text-block__media {
		height: 100%;
	}
	.mvc-main--home .mvc-text-block--bleed .mvc-text-block__img {
		height: 100%;
		object-fit: cover;
	}
	.mvc-main--home .mvc-text-block--bleed .mvc-text-block__body {
		max-height: 100%;
		overflow: hidden;
	}
}

/* ── Contact page — "A Personal Approach" section, shorter band ──────────
 * text-block's bleed image renders at its natural aspect ratio (height:
 * auto), so a tall source photo makes the whole section grow with it.
 * Requirements: (1) the image flush top AND bottom, no gap either side, at
 * its original compact size, and (2) the text column stays its own natural
 * (short) height instead of being stretched into a tall box.
 *
 * Earlier attempt set a fixed height on .__media alone and relied on the
 * grid row to equal it — but .__body's own padding-block:var(--section-py)
 * (bleed rule above) still made the ROW taller than that, since a grid row's
 * height is the tallest item in it, and an explicit height on one item
 * doesn't shrink the row to match — it just leaves that item short of the
 * row's real (taller) height, which is the gap under the image. Fixed by
 * setting the height on the ROW itself (.__inner) instead, so there's no
 * ambiguity about which box the row's height actually comes from. The image
 * fills it via align-items:stretch (text-block.css's own grid default).
 * The text column is given max-height:100% so it can't push the row taller
 * than that fixed height — align-self:start keeps its (short) copy pinned
 * to the top instead of being centered/stretched into a tall box.
 * object-position pushes the crop toward the bottom-left of the source
 * photo instead of the default center. Scoped to the contact page only —
 * other bled text-blocks (homepage) keep their natural photo proportions.
 */
@media (min-width: 768px) {
	.mvc-main--contact .mvc-text-block--bleed .mvc-text-block__inner {
		height: clamp(270px, 36vw, 420px);
	}
	.mvc-main--contact .mvc-text-block--bleed .mvc-text-block__media {
		height: 100%;
	}
	.mvc-main--contact .mvc-text-block--bleed .mvc-text-block__img {
		height: 100%;
		object-fit: cover;
		object-position: 35% 80%;
	}
	.mvc-main--contact .mvc-text-block--bleed .mvc-text-block__body {
		max-height: 100%;
		align-self: start;
		padding-top: var(--space-12);
		padding-bottom: 0;
	}
}

/* Mobile: parent theme's shared bleed rule gives every bled image a 4/5
 * (tall) aspect ratio — halve it here for this section specifically so it
 * matches the shorter desktop band instead of towering on phones. */
@media (max-width: 767px) {
	.mvc-main--contact .mvc-text-block--bleed .mvc-text-block__media {
		aspect-ratio: 16 / 15;
	}
}

/* ── Homepage — "Tom Kreiss" section background ───────────────────────────
 * Same fix as the About page's "Experience Changes What You See" section
 * below: tb_bg='dark' renders TWO competing background sources on the same
 * <section> — .mvc-section--dark (var(--color-gray-900), a dark gray) AND
 * data-mvc-section-gradient="brand-dark" (design-behaviors.css, a navy
 * gradient that actually wins the cascade) — neither is true black. Override
 * both to solid black, and force the body copy (text-block.css only sets
 * --color-gray-100 on .mvc-section--dark, an off-white, not pure white) to
 * #fff to match. Only one tb_bg='dark' text-block exists on the homepage
 * (the Tom Kreiss section), so scoping by page class alone is unambiguous.
 */
.mvc-main--home .mvc-text-block.mvc-section--dark {
	background-color: #000;
}
.mvc-main--home .mvc-text-block.mvc-section--dark[data-mvc-section-gradient="brand-dark"] {
	background: #000 !important;
}
.mvc-main--home .mvc-text-block.mvc-section--dark .mvc-text-block__content,
.mvc-main--home .mvc-text-block.mvc-section--dark .mvc-text-block__subtitle {
	color: #fff;
}

/* ── Homepage — "Tom Kreiss" section, image fills its column with no border ──
 * tb_columns_equal_height is back on (template-tk-home.php) so the image
 * covers its entire column with no gap/padding around it — showing the
 * whole landscape photo unstretched (an earlier attempt) left large empty
 * black bars above/below it instead, which read as unwanted padding, not a
 * design choice. Cropping the photo to fill the column is preferred over
 * that empty space.
 * But equal-height also means the row (.__inner) is sized to whichever
 * column is naturally tallest — with a short landscape photo that's the
 * TEXT column, which would stretch the image far taller than a landscape
 * shot should ever go (severe crop, unlike the original portrait this
 * layout was built for). Capping the row to an explicit, landscape-
 * appropriate height (same clamp() technique as the Comfort/California/
 * Luxury sections above) keeps the crop gentle regardless of how long the
 * paragraph runs, instead of the text column dictating the image's height.
 */
@media (min-width: 768px) {
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-text-block__inner {
		height: clamp(360px, 34vw, 520px);
	}
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-text-block__body {
		max-height: 100%;
		overflow: hidden;
	}
}

/* Flush top/bottom: the grid row above is now a fixed height inside the
 * section's own padding-block (var(--section-py)) — zero the section's
 * padding and move it onto the text column only (same "zero on section,
 * reapply to __body" technique the bleed sections use), so the image
 * column's edges land flush against the section's top/bottom. */
@media (max-width: 767px) {
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark {
		padding-top: 0;
		padding-bottom: 0;
	}
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-text-block__body {
		padding-top: var(--space-6);
		padding-bottom: var(--section-py-sm, var(--section-py));
		padding-left: var(--container-px);
		padding-right: var(--container-px);
	}
	/* Zeroing only .mvc-container's padding-left (as before) left the image
	   flush on the left but still inset on the right — an asymmetric photo
	   that reads as off-center rather than a deliberate edge treatment.
	   Zero both sides here instead so the image runs full-bleed edge-to-edge
	   on mobile, matching how it already breaks out on desktop. */
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-container {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 768px) {
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark {
		padding-top: 0;
		padding-bottom: 0;
	}
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-text-block__body {
		padding-top: var(--section-py);
		padding-bottom: var(--section-py);
		padding-left: var(--container-px);
	}
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-container {
		padding-left: 0;
	}
	/* padding-left:0 above only removes .mvc-container's OWN padding — it
	   does nothing about the black gutter that appears on viewports wider
	   than --container-max (1320px), since .mvc-container is ALSO centered
	   via margin-left:auto once it hits that max-width. That auto margin is
	   what actually produces the visible left-edge gap on wide screens, and
	   padding alone can't remove it (this was fixed once already, then lost
	   when the section was reworked for the landscape image — re-adding it
	   here). Widen the media item itself by that exact gutter distance and
	   shift it left to match, so it reaches the true browser edge on any
	   screen width. Safe to widen now (unlike doing this on the old
	   full-height version): the row's height is capped by the clamp() above,
	   not stretched to the text column, so this only changes how much of the
	   photo's width shows — it does not change the crop's vertical severity. */
	.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-text-block__media {
		width: calc(100% + max(0px, (100vw - var(--container-max, 1320px)) / 2));
		margin-left: calc(-1 * max(0px, (100vw - var(--container-max, 1320px)) / 2));
	}
}

/* The default shape's rounded corners + border/shadow (text-block.css's
 * .mvc-text-block__media base rule, meant for an inset card-style image)
 * read as an inconsistent gap at each corner against a flush edge-to-edge
 * photo. Square it off so the portrait genuinely fills the entire column
 * with no radius/border/shadow breaking the edges. */
.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-text-block__media {
	border-radius: 0;
	border-width: 0;
	box-shadow: none;
}

/* CTA is pushed to the bottom of the (equal-height) text column via
 * text-block.css's own equal-height rule (margin-block-start: auto on
 * .mvc-text-block__cta) — with a short paragraph and a capped-height column,
 * that reads as an oversized gap between the copy and the button. Pin the
 * CTA right after the copy instead. */
.mvc-main--home .mvc-text-block--image-left.mvc-section--dark .mvc-text-block__cta {
	margin-block-start: var(--space-4);
}

/* ── Homepage — "Tom Kreiss" section, light CTA text on the dark background ──
 * .mvc-btn--ghost's stock border/text color (utilities.css) is dark, meant
 * for a light section background — invisible against this section's solid
 * black (see the background override above). Force white border + text,
 * matching the "Discover Tom's Story" wording used here.
 */
.mvc-main--home .mvc-text-block.mvc-section--dark .mvc-text-block__cta .mvc-btn--ghost {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.6);
}
.mvc-main--home .mvc-text-block.mvc-section--dark .mvc-text-block__cta .mvc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff !important;
}

/* ── About page — "Experience Changes What You See" section background ────
 * tb_bg='dark' actually renders TWO competing background sources on the same
 * <section>: .mvc-section--dark (var(--color-gray-900)) AND
 * data-mvc-section-gradient="brand-dark" (design-behaviors.css), which sets
 * `background` shorthand to a navy gradient and is what was actually
 * winning. Override both, with !important on the attribute selector since
 * design-behaviors.css's `background` shorthand would otherwise repaint
 * over a plain background-color. Only one tb_bg='dark' text-block exists on
 * this page, so scoping by page class alone is unambiguous. */
.mvc-main--about .mvc-section--dark {
	background-color: #1c1c1c;
}
.mvc-main--about .mvc-section--dark[data-mvc-section-gradient="brand-dark"] {
	background: #1c1c1c !important;
}

/* ── About page — "Experience Changes What You See" 2x2 grid ─────────────
 * text-block's tb_pillars only supports icon+label (no description text),
 * so the Proportion/Flow/Discernment/Comfort grid is authored as plain HTML
 * inside tb_content (see template-tk-about.php) and styled here instead.
 * bg=dark already gives light heading/body text via text-block.css — labels
 * pick up the accent gold to match the site's eyebrow treatment.
 */
/* Equal-height body column is a flex column top-aligned by default (see
 * text-block.css); with no CTA in this block to push toward the bottom via
 * margin-block-start:auto, that leaves empty space below the copy against
 * the taller image column. Centering the content evens the distribution.
 * Scoped to this section specifically (via the grid it uniquely contains) —
 * the page's other equal-height text-blocks keep their default top align. */
@media (min-width: 768px) {
	.mvc-main--about .mvc-text-block--equal-height:has(.mvc-about-experience-grid) .mvc-text-block__body {
		justify-content: center;
	}
}

.mvc-about-experience-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

@media (min-width: 640px) {
	.mvc-about-experience-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-8);
	}
}

.mvc-about-experience-grid__label {
	font-family: var(--mvc-font-accent, var(--mvc-font-heading, var(--font-heading)));
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent);
	margin: 0 0 var(--space-1);
}

.mvc-about-experience-grid__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
}

/* ── About page — "Design is not about adding more" Edit/Balance/Live footer ─
 * Same plain-HTML-in-tb_content pattern as the experience grid above, for a
 * 3-up row with no image/icon slot needed.
 */
.mvc-about-principle-footer {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border, rgba(0,0,0,0.1));
}

@media (min-width: 640px) {
	.mvc-about-principle-footer {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}
}

.mvc-about-principle-footer__label {
	font-family: var(--mvc-font-accent, var(--mvc-font-heading, var(--font-heading)));
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8C6B40;
	margin: 0 0 var(--space-1);
}

.mvc-about-principle-footer__desc {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* ── About page — "The Next Chapter" signature quote ──────────────────────
 * Larger italic serif quote + a script-style signature line beneath it,
 * echoing the reference layout's handwritten "Tom Kreiss" signoff. No actual
 * signature image exists yet, so the name is set in an italic serif as a
 * placeholder — swap mvc-about-signature for an <img> once a signature
 * graphic is supplied.
 */
.mvc-about-quote {
	font-family: var(--mvc-font-heading, var(--font-heading));
	font-size: clamp(1.375rem, 1.4vw + 1rem, 1.875rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--color-heading, var(--color-text));
}

.mvc-about-signature {
	margin-top: var(--space-4);
	font-family: var(--mvc-font-heading, var(--font-heading));
	font-style: italic;
	font-size: var(--text-xl);
	color: var(--color-accent-dark, var(--color-accent));
}

/* ── About page — "A Lifetime That Shaped a Point of View" (numbered-steps)
 * and "Principles That Guide Every Decision" (icon-cards) feature-strips ──
 * Shared requests for both sections: more top/bottom section padding than
 * the component's own mvc-section--sm default, descriptions always visible
 * instead of feature-strip.css's default hide-until-hover
 * (.mvc-feature-strip__desc has max-height:0/opacity:0 site-wide, revealed
 * only via :hover — overridden here to just render normally), and a
 * lift-up + light-gold highlight when hovering a card.
 */
.mvc-main--about .mvc-feature-strip--style-numbered-steps,
.mvc-main--about .mvc-feature-strip--style-icon-cards {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
}

.mvc-main--about .mvc-feature-strip--style-numbered-steps .mvc-feature-strip__desc,
.mvc-main--about .mvc-feature-strip--style-icon-cards .mvc-feature-strip__desc {
	max-height: none;
	opacity: 1;
	overflow: visible;
	margin-top: var(--space-2);
}

.mvc-main--about .mvc-feature-strip--style-numbered-steps .mvc-feature-strip__item,
.mvc-main--about .mvc-feature-strip--style-icon-cards .mvc-feature-strip__item {
	transition: transform var(--transition-fast, 200ms ease),
		box-shadow var(--transition-fast, 200ms ease),
		background-color var(--transition-fast, 200ms ease),
		border-color var(--transition-fast, 200ms ease);
}

.mvc-main--about .mvc-feature-strip--style-numbered-steps .mvc-feature-strip__item:hover,
.mvc-main--about .mvc-feature-strip--style-icon-cards .mvc-feature-strip__item:hover {
	transform: translateY(-6px);
	background: color-mix(in srgb, var(--color-accent) 12%, white 88%) !important;
	border-color: color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.07),
		0 16px 32px rgba(0, 0, 0, 0.14) !important;
}

/* ── "Principles" icon-cards specifically — gold icons, transparent card ──
 * fs_card_preset='light' forces the card background via
 * [data-card-preset] .mvc-feature-strip__item { background: ... !important }
 * (feature-strip.css) — matching that same specificity + !important here to
 * win instead of removing the preset (removing it would also drop the
 * preset's heading/body text-color recipe, which this section still wants).
 * The idle-state card is transparent (shadow only); the shared hover rule
 * above adds the light-gold fill and lift on top of this.
 */
.mvc-main--about .mvc-feature-strip[data-card-preset] .mvc-feature-strip__item {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.mvc-main--about .mvc-feature-strip[data-card-preset] .mvc-feature-strip__icon {
	background: transparent !important;
	color: var(--color-accent) !important;
}

/* ── About page — "Our Services" 5-up tall image cards ────────────────────
 * feature-strip's bordered-cards style is the base (plain background, no
 * boxed card), overridden here to drop the border entirely and stretch the
 * image into a tall portrait slot (reference layout uses ~9:16 photos with
 * the title centered underneath and a short gold rule beneath the title).
 */
.mvc-main--about .mvc-feature-strip--style-bordered-cards .mvc-feature-strip__item {
	padding: 0;
	border: none;
	background: transparent;
}
.mvc-main--about .mvc-feature-strip--style-bordered-cards .mvc-feature-strip__item:hover {
	border: none;
	background: transparent;
}
.mvc-main--about .mvc-feature-strip--style-bordered-cards .mvc-feature-strip__image {
	width: 100%;
	max-width: none;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-md, 10px);
	margin-bottom: var(--space-3);
}
.mvc-main--about .mvc-feature-strip--style-bordered-cards .mvc-feature-strip__title {
	font-family: var(--mvc-font-heading, var(--font-heading));
	font-size: var(--text-lg);
	font-weight: var(--font-weight-regular, 400);
	position: relative;
	padding-bottom: var(--space-3);
}
.mvc-main--about .mvc-feature-strip--style-bordered-cards .mvc-feature-strip__title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 1px;
	background: var(--color-accent);
}

/* ── About page — darker-beige text-block sections ────────────────────────
 * Both "Design is not about adding more" (Point of View, image-right) and
 * "The Next Chapter" (signature quote, image-left) use tb_bg='alt' + this
 * shared override for a slightly darker cream than the stock --color-bg-alt
 * — one step down, not the full tb_bg='dark' near-black band (that would
 * also flip to light/inverse text). Applies to every .mvc-section--alt-bg
 * text-block on the About page, so any future alt-bg section here picks up
 * the same tone automatically.
 */
.mvc-main--about .mvc-text-block.mvc-section--alt-bg {
	background: color-mix(in srgb, var(--color-bg-alt) 100%, black 6%);
}

/* ── About page — "TK Design" section, image flush top/bottom ────────────
 * Same technique as the homepage "Tom Kreiss" section fix: tb_columns_equal_
 * height makes the image column match the text column's height, but the
 * grid still sits inside the section's own padding-block (var(--section-py))
 * — leaving a visible gap above and below the photo even though it now fills
 * its column. Zeroing the section's vertical padding and moving that padding
 * onto the text column only lets the image touch the section's top/bottom
 * edges with no gap, while the text keeps its normal breathing room.
 * .mvc-text-block--image-right.mvc-section--alt-bg.mvc-text-block--equal-height
 * is unique to this section on the About page — "Design is not about adding
 * more" (also image-right + alt-bg) doesn't use equal-height, and "The Next
 * Chapter" (also equal-height + alt-bg) uses image-left, not image-right.
 */
/* Mobile: image-right stacks image-then-text (text-block.css puts the image
 * first via order:-1 below 768px) — same zero-section/reapply-to-body
 * technique as desktop, but only the bottom padding needs to move onto the
 * text column here, since the image (first in the stack) only needs the
 * section's top padding removed. */
@media (max-width: 767px) {
	.mvc-main--about .mvc-text-block--image-right.mvc-section--alt-bg.mvc-text-block--equal-height {
		padding-top: 0;
		padding-bottom: 0;
	}
	.mvc-main--about .mvc-text-block--image-right.mvc-section--alt-bg.mvc-text-block--equal-height .mvc-text-block__body {
		padding-bottom: var(--section-py-sm, var(--section-py));
	}
}

@media (min-width: 768px) {
	.mvc-main--about .mvc-text-block--image-right.mvc-section--alt-bg.mvc-text-block--equal-height {
		padding-top: 0;
		padding-bottom: 0;
	}
	.mvc-main--about .mvc-text-block--image-right.mvc-section--alt-bg.mvc-text-block--equal-height .mvc-text-block__body {
		padding-top: var(--section-py);
		padding-bottom: var(--section-py);
	}
}

/* ── About page — "Love Coming Home." closing CTA band ────────────────────
 * cta_bg='dark' resolves to --color-primary (near-black #1a1a1a via
 * .mvc-section--dark), same shade the "Experience Changes What You See"
 * text-block uses — matches that section as requested instead of the
 * lighter cta_bg='alt' this band started with.
 * Extra top/bottom padding beyond cta-block.css's own
 * padding-block:var(--section-padding-sm) default, for a more generous
 * closing band.
 * Primary button: cta_bg='dark' renders .mvc-btn--inverse (solid white fill,
 * utilities.css) — swapped here for a transparent/bordered ghost treatment,
 * hover matching the homepage's "Discover Tom's Story" hero-band button
 * (mvc-hero-band__ctas .mvc-btn--ghost), which has no custom override and so
 * just uses utilities.css's plain default ghost hover (flat gray fill,
 * --color-gray-100/--color-gray-300) — not the gold-gradient hover used on
 * the homepage's very top hero CTA.
 */
.mvc-main--about .mvc-cta-block--dark {
	background: #1c1c1c;
	padding-block: var(--space-24, 6rem);
}

.mvc-main--about .mvc-cta-block--dark .mvc-cta-block__actions .mvc-btn--inverse {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--color-white, #fff);
	transition: background-color var(--transition-speed, 200ms) var(--transition-easing, ease),
		border-color var(--transition-speed, 200ms) var(--transition-easing, ease),
		color var(--transition-speed, 200ms) var(--transition-easing, ease);
}

/* Hover fill: translucent white, not opaque gray — matches the homepage's
 * "Discover Tom's Story" hero-band button exactly (hero-band.css:249,
 * rgba(255,255,255,0.12)). That's the actual mechanism that makes its glow
 * visible: an OPAQUE fill (the --color-gray-100 solid gray tried earlier)
 * paints flat over the ::before spotlight with nothing to blend against, so
 * the cursor-tracking glow (utilities.css, ::before, z-index:-1) reads as
 * invisible. A translucent fill lets the dark section background show
 * through underneath, and the glow blends visibly on top of that. No
 * separate ::before override needed — the stock utilities.css glow works
 * fine once the fill itself isn't opaque. */
.mvc-main--about .mvc-cta-block--dark .mvc-cta-block__actions .mvc-btn--inverse:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
	color: #ffffff;
	box-shadow: none;
	transform: none;
}