/* ============================================================
   OPEN MORNING — Expert Cash Buyers
   Front-end stylesheet. theme.json supplies design tokens
   (--wp--preset--* and --wp--custom--*); this layer wires the
   role-token aliases the section CSS consumes, plus base rules.

   FOUNDATION milestone: alias bridge + reset + chrome base.
   Section styles (hero, trust, flip, pill, …) arrive with their
   patterns in the chrome/sections milestone.
   ============================================================ */

/* ---- role-token alias bridge -------------------------------
   Maps theme.json custom tokens (which Style Variations override
   per color world) onto the short role names the design CSS uses.
   Switch a world → --wp--custom--color--* changes → everything
   downstream retints automatically. ----------------------------*/
:root {
	--bg:               var(--wp--custom--color--bg);
	--surface:          var(--wp--custom--color--surface);
	--ink:              var(--wp--custom--color--ink);
	--muted:            var(--wp--custom--color--muted);
	--structural:       var(--wp--custom--color--structural);
	--structural-soft:  var(--wp--custom--color--structural-soft);
	--accent:           var(--wp--custom--color--accent);
	--accent-deep:      var(--wp--custom--color--accent-deep);
	--accent-on-dark:   var(--wp--custom--color--accent-on-dark);
	--band-text:        var(--wp--custom--color--band-text);
	--hairline:         var(--wp--custom--color--hairline);
	--paper-2:          var(--wp--custom--color--paper2);
	--bg-rgb:           var(--wp--custom--color--bg-rgb);
	--structural-rgb:   var(--wp--custom--color--structural-rgb);
	--accent-rgb:       var(--wp--custom--color--accent-rgb);
	--pg-alpha:         var(--wp--custom--pg--alpha);
	--pg-sat:           var(--wp--custom--pg--sat);

	/* legacy aliases (kept stable, always point at live roles) */
	--paper:    var(--bg);
	--paper-3:  var(--surface);
	--ink-soft: var(--muted);
	--line:     var(--hairline);
	--on-ink:   var(--band-text);
	/* on-dark secondary text + hairline. These were used by the footer / trust
	   strip / service-area band but never defined, so var() fell back to the
	   inherited dark --ink — which made the footer body text dark-navy on the
	   navy band (unreadable). Defined here so all six worlds retint correctly. */
	--on-ink-dim: color-mix(in srgb, var(--band-text) 82%, var(--structural));
	--line-ink:   color-mix(in srgb, var(--band-text) 22%, var(--structural));
	--maxw:     var(--wp--style--global--wide-size, 1200px);
	--gut:      var(--wp--custom--gutter, clamp(22px, 5vw, 76px));
	--shadow:   var(--wp--custom--shadow--card);
}

/* ---------------- reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }

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

/* Balance display headings so single words never strand on their own line
   (fixes the hero-orphan wrap from the mockup). */
h1, h2,
.wp-block-heading.is-style-balance,
.om-balance { text-wrap: balance; }

/* Visible keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------- header / footer chrome ---------------- */
.om-bar {
	background: transparent;
	border-bottom: 1px solid var(--hairline);
}
.om-bar .wp-block-site-title a { color: var(--structural); }

.om-footer .wp-block-site-title,
.om-footer .wp-block-site-title a { color: var(--band-text); }

/* Respect reduced-motion globally for any reveal/transition work to come. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   ==== sections (transcribed from mockup) ====
   Component + section CSS lifted verbatim from
   design-concepts/open-morning.html. EXCLUDED on purpose:
   the six color-world :root blocks + legacy alias layer
   (theme.json + Style Variations + the bridge above own those),
   the base reset already present above, the preview-only palette
   dock, and the offer-band / flip-card / offer-sheet CSS
   (.offer*, .sheet*, .ledger, .flip*, .break*) which ships with
   the Phase-7 offer-band pattern. No url() image paths exist in
   the mockup CSS (photos are <img>/om_picture), so none to rewrite.
   ============================================================ */

/* in-content (footer column) links keep a non-color affordance */
.foot-col a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: rgba(198,188,168,0.5); }
.foot-col a:hover { text-decoration-color: currentColor; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

/* visually-hidden, still announced by screen readers */
.sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* typographic eyebrow marker — small caps + numeral + rule, NEVER a pill */
.marker {
	display: flex; align-items: center; gap: 14px;
	font-family: "Public Sans", sans-serif;
	font-size: 12px; font-weight: 600;
	letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--accent-deep);
}
.marker .num { font-variant-numeric: tabular-nums; color: var(--ink); opacity: .55; }
.marker .rule { flex: 0 0 38px; height: 1px; background: var(--accent); opacity: .6; }
.marker.on-ink { color: var(--accent-on-dark); }
.marker.on-ink .num { color: var(--on-ink); }

/* buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: "Public Sans", sans-serif;
	font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
	padding: 16px 28px; border-radius: 4px;
	cursor: pointer; border: 1px solid transparent;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn-primary {
	background: var(--structural); color: var(--band-text);
	box-shadow: 0 14px 30px -14px rgba(0,0,0,.4);
}
.btn-primary:hover { background: var(--structural-soft); transform: translateY(-2px); }
.btn-ghost-ink {
	background: transparent; color: var(--on-ink);
	border-color: color-mix(in srgb, var(--band-text) 50%, transparent);
}
.btn-ghost-ink:hover { background: color-mix(in srgb, var(--band-text) 12%, transparent); }
.btn-lg { padding: 19px 34px; font-size: 16px; }

/* ============================================================
   HEADER — transparent, floats over the sky; .is-stuck = scrolled
   (nav.js toggles .is-stuck / .nav-open; body gets .nav-locked)
   ============================================================ */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	padding-block: 14px;
	background: color-mix(in srgb, var(--structural) 70%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border-bottom: 1px solid color-mix(in srgb, var(--band-text) 14%, transparent);
	box-shadow: 0 10px 30px -16px rgba(0,0,0,.45);
	transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
/* scrolled state — solidify the bar so the nav stays legible off the photo */
.site-header.is-stuck {
	padding-block: 11px;
	background: color-mix(in srgb, var(--structural) 85%, transparent);
	box-shadow: 0 14px 36px -16px rgba(0,0,0,.55);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand img { height: 38px; width: auto; }
.brand .brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand .brand-name {
	font-family: "Spectral", serif; font-size: 19px; font-weight: 500;
	color: var(--ink); letter-spacing: .005em;
}
.brand .brand-sub {
	font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink-soft); font-weight: 600; margin-top: 2px;
}
/* primary (desktop) nav — typographic links, the investor CTA set apart */
.primary-nav { margin-inline: auto; }
.primary-nav .nav-links {
	display: flex; align-items: center; gap: 26px;
	list-style: none; margin: 0; padding: 0;
}
.primary-nav .nav-links a {
	font-family: "Public Sans", sans-serif; font-size: 14.5px; font-weight: 500;
	color: var(--ink); letter-spacing: .005em;
	transition: color .16s ease;
}
.primary-nav .nav-links a:hover { color: var(--accent-deep); }
.primary-nav .nav-divider {
	padding-left: 26px; position: relative;
}
.primary-nav .nav-divider::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 18px; background: var(--hairline);
}
.primary-nav .nav-cta {
	font-weight: 600; color: var(--accent-deep) !important;
}
.header-right { display: flex; align-items: center; gap: 28px; }
.header-phone {
	display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
}
.header-phone .lbl { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.header-phone .num { font-family: "Spectral", serif; font-size: 21px; color: var(--ink); font-weight: 500; }
.header-cta {
	font-family: "Public Sans", sans-serif; font-size: 14px; font-weight: 600;
	padding: 12px 22px; border: 1px solid var(--ink); border-radius: 3px; color: var(--ink);
	transition: background .18s, color .18s;
}
.header-cta:hover { background: var(--structural); color: var(--band-text); }

/* hamburger — hidden on desktop, shown at the mobile breakpoint */
.nav-toggle {
	display: none;
	width: 44px; height: 44px; padding: 0; margin: 0;
	background: transparent; border: 0; cursor: pointer;
	align-items: center; justify-content: center;
}
.nav-toggle-bars { position: relative; display: block; width: 24px; height: 16px; }
.nav-toggle-bars span {
	position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
	background: var(--ink);
	transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 7px; }
.nav-toggle-bars span:nth-child(3) { top: 14px; }
.site-header.nav-open .nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* slide-in drawer (mobile) — opened by nav.js via .nav-open on the header */
.nav-drawer {
	position: fixed; inset: 0 0 0 auto; z-index: 60;
	width: min(86vw, 380px);
	background: var(--surface);
	box-shadow: -24px 0 60px -30px rgba(0,0,0,.55);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
	overflow-y: auto;
}
.site-header.nav-open .nav-drawer { transform: translateX(0); }
.nav-drawer[hidden] { display: block; }   /* JS manages visibility via transform; keep paint-able for the transition */
.nav-drawer-inner { display: flex; flex-direction: column; gap: 26px; padding: 26px 24px calc(26px + env(safe-area-inset-bottom)); }
.drawer-brand { display: flex; flex-direction: column; line-height: 1.1; padding-top: 6px; }
.drawer-brand .brand-name { font-family: "Spectral", serif; font-size: 20px; font-weight: 500; color: var(--ink); }
.drawer-brand .brand-sub { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-top: 3px; }
.drawer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer-links li { border-top: 1px solid var(--hairline); }
.drawer-links li:last-child { border-bottom: 1px solid var(--hairline); }
.drawer-links a {
	display: block; padding: 15px 2px; font-size: 17px; color: var(--ink);
	font-family: "Spectral", serif;
}
.drawer-links a:hover { color: var(--accent-deep); }
.drawer-divider .nav-cta { color: var(--accent-deep); font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 15px; }
.drawer-contact { display: flex; flex-direction: column; gap: 16px; }
.drawer-phone { display: flex; flex-direction: column; line-height: 1.15; }
.drawer-phone .lbl { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.drawer-phone .num { font-family: "Spectral", serif; font-size: 23px; color: var(--ink); font-weight: 500; }
.drawer-cta { text-align: center; }
/* lock background scroll while the drawer is open (nav.js adds .nav-locked to body) */
body.nav-locked { overflow: hidden; }

/* ============================================================
   HERO — one full-bleed photograph, words live in the open left
   ============================================================ */
.hero {
	position: relative;
	min-height: clamp(640px, 100svh, 900px);
	display: flex; align-items: flex-start;
	overflow: hidden;
	/* WP flow-layout (.is-layout-flow) zeroes the first/last child's block
	   margins, so the frosted card's own margin-top/bottom were eaten — it
	   tucked under the fixed nav and met the trust bar. Reserve nav clearance
	   + a grass gap with PADDING here, which block layout never touches.
	   box-sizing:border-box keeps min-height honest with the padding. */
	box-sizing: border-box;
	padding-block: clamp(100px, 12vh, 134px) clamp(64px, 8vh, 96px);
}
.hero-photo {
	position: absolute; inset: 0;
	z-index: 0;
}
.hero-photo img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 64% center;
}
/* barely-there gradient veil woven from --structural-rgb + --bg-rgb so the left text stays legible */
.hero-veil {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(100deg,
			rgba(var(--structural-rgb), 0.30) 0%,
			rgba(var(--structural-rgb), 0.16) 30%,
			rgba(var(--structural-rgb), 0.04) 50%,
			rgba(var(--structural-rgb), 0.00) 64%),
		linear-gradient(to bottom,
			rgba(var(--bg-rgb),0.20) 0%,
			rgba(var(--bg-rgb),0.00) 22%,
			rgba(var(--bg-rgb),0.00) 78%,
			rgba(var(--bg-rgb),0.10) 100%);
}
/* at narrow widths the viewport IS the left edge — strengthen the veil
   across the full width so the dark ink text stays legible over the photo */
@media (max-width: 640px) {
	.hero-veil {
		background:
			linear-gradient(180deg,
				rgba(var(--structural-rgb), 0.10) 0%,
				rgba(var(--structural-rgb), 0.06) 100%),
			linear-gradient(100deg,
				rgba(var(--bg-rgb),0.78) 0%,
				rgba(var(--bg-rgb),0.58) 46%,
				rgba(var(--bg-rgb),0.30) 78%,
				rgba(var(--bg-rgb),0.12) 100%);
	}
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-inner { max-width: 600px; padding-block: 150px 70px; }
/* when the inner is the frosted panel, its own margin/padding governs spacing */
.hero-inner.hero-frost { padding-block: clamp(30px, 3.4vw, 42px); }
/* frosted-glass frame behind the hero TEXT column — keeps text off the photo
   so headline / sub-paragraph / proof line stay legible in every world */
.hero-frost {
	max-width: 600px;
	margin-top: 0;    /* .hero padding-top clears the fixed nav (WP zeroes this anyway) */
	margin-bottom: 0; /* .hero padding-bottom provides the grass gap before the trust bar */
	padding-inline: clamp(26px, 3vw, 40px);
	background: rgba(255,255,255,0.18);            /* ~20% frosted, translucent — still see the photo through it */
	backdrop-filter: blur(10px) saturate(1.05);
	-webkit-backdrop-filter: blur(10px) saturate(1.05);
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 16px;
}
/* nudge muted text + proof line a touch darker so they clear the frosted panel
   over any of the six graded photos */
.hero-frost .hero-sub { color: color-mix(in srgb, var(--ink) 78%, var(--muted)); }
.hero-frost .hero-reassure { color: color-mix(in srgb, var(--ink) 72%, var(--muted)); }
@media (max-width: 560px) {
	.hero { padding-block: 96px 52px; }
	.hero-frost { margin-top: 0; padding-inline: 22px; }
	.hero-inner.hero-frost { padding-block: 26px; }
}
.hero-eyebrow {
	display: flex; align-items: center; gap: 13px;
	font-size: 12.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--ink-soft); margin-bottom: 26px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 {
	font-size: clamp(38px, 5.2vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.hero h1 em {
	font-style: italic; font-weight: 300; color: var(--ink-soft);
}
.hero-sub {
	margin: 26px 0 0;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.62;
	color: var(--ink-soft);
	max-width: 470px;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

/* address-capture form — no panel, sits in the open air */
.hero-form { margin-top: 34px; max-width: 500px; }
.hero-form .form-label {
	font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-soft); margin-bottom: 11px; display: block;
}
.hero-form .fields {
	display: flex; gap: 10px; flex-wrap: wrap;
}
.hero-form .field {
	flex: 1 1 200px; position: relative;
}
.hero-form input {
	width: 100%;
	font-family: "Public Sans", sans-serif; font-size: 16px;
	padding: 17px 18px;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	border: 1px solid rgba(var(--structural-rgb),0.20);
	border-radius: 4px;
	color: var(--ink);
	backdrop-filter: blur(3px);
	transition: border-color .16s, background .16s, box-shadow .16s;
}
.hero-form input::placeholder { color: var(--muted); }
.hero-form input:focus {
	outline: none; background: var(--surface);
	border-color: var(--accent-deep);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.45);
}
.hero-form .btn { width: 100%; margin-top: 10px; }
.hero-reassure {
	margin-top: 15px; display: flex; align-items: center; gap: 9px;
	font-size: 13.5px; color: var(--ink-soft);
}
.hero-reassure svg { flex: none; }
.hero-reassure b { color: var(--ink); font-weight: 600; }

/* ============================================================
   TRUST STRIP — typographic, no chips
   ============================================================ */
.trust {
	background: var(--structural);
	color: var(--on-ink);
	position: relative;
}
.trust .wrap { padding-block: 30px; }
.trust-row {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.trust-item {
	padding: 6px 30px;
	border-left: 1px solid var(--line-ink);
}
.trust-item:first-child { border-left: none; padding-left: 0; }
.trust-item .t-num {
	font-family: "Spectral", serif; font-size: 27px; font-weight: 400; color: var(--accent-on-dark);
	line-height: 1;
}
.trust-item .t-lbl {
	margin-top: 7px; font-size: 13.5px; color: var(--on-ink-dim); line-height: 1.4;
}
.trust-item .t-lbl strong { color: var(--on-ink); font-weight: 600; }

/* ============================================================
   SECTION scaffolding
   ============================================================ */
.section { padding-block: clamp(70px, 9vw, 120px); scroll-margin-top: 90px; }
.split, .final { scroll-margin-top: 90px; }
/* Full-bleed bands stack flush. The root flow layout injects a
   --wp--style--block-gap (~24px) margin between top-level blocks, which showed
   as a cream seam under the hero and between every band (the reported mobile
   "whitespace under the hero/trust"). Zero it for these bands — each owns its
   own padding-block, so they should butt together as in the mockup. */
.hero, .trust, .section, .split, .offer-band, .area, .final, .foot { margin-block: 0; }
/* …the same block-gap also sits between the page's top-level flow children
   (header part / <main> / footer part): it showed as 24px above the hero and
   25px above the footer. Zero those boundaries too. */
.wp-site-blocks > * { margin-block: 0; }
.section-head { max-width: 760px; }
.section-head h2 {
	font-size: clamp(31px, 4vw, 49px);
	line-height: 1.08;
	margin-top: 22px;
}
.section-head h2 em { font-style: italic; font-weight: 300; color: var(--ink-soft); }
.section-head .lead {
	margin-top: 22px; font-size: 18px; line-height: 1.62; color: var(--muted); max-width: 620px;
}

/* ============================================================
   STEPS — typographic rhythm, no card grid
   ============================================================ */
.steps { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.step {
	padding: 0 38px;
	border-left: 1px solid var(--line);
	position: relative;
}
.step:first-child { padding-left: 0; border-left: none; }
.step .s-num {
	font-family: "Spectral", serif; font-size: 15px; letter-spacing: 0.04em;
	color: var(--accent-deep); font-weight: 500;
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 20px;
}
.step .s-num::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.step h3 { font-size: 24px; line-height: 1.12; }
.step p { margin: 14px 0 0; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.step .s-time {
	margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
	font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-soft);
}
.step .s-time .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ============================================================
   FULL-BLEED SPLIT — edge-to-edge photo flush to viewport edge
   ============================================================ */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 640px;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-photo {
	position: relative;
	overflow: hidden;
}
.split-photo > picture { position: absolute; inset: 0; z-index: 0; }
.split-photo > picture img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}
.split-photo::after { /* soft inner veil for transition, from variable */
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(var(--structural-rgb),0) 70%, rgba(var(--structural-rgb),0.05) 100%);
}
.split-text {
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(50px, 7vw, 96px) clamp(34px, 6vw, 92px);
	background: var(--paper);
}
.split.on-paper2 .split-text { background: var(--paper-2); }
.split-text h2 { font-size: clamp(29px, 3.4vw, 44px); line-height: 1.1; margin-top: 20px; }
.split-text h2 em { font-style: italic; font-weight: 300; color: var(--ink-soft); }
.split-text p { color: var(--muted); font-size: 17px; line-height: 1.64; margin: 20px 0 0; max-width: 480px; }

/* as-is checklist — hairline rows, no boxes */
.aslist { margin: 30px 0 0; list-style: none; padding: 0; max-width: 460px; }
.aslist li {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 15px 0; border-top: 1px solid var(--line);
	font-size: 16px; color: var(--ink);
}
.aslist li:last-child { border-bottom: 1px solid var(--line); }
.aslist .ck {
	flex: none; margin-top: 2px; color: var(--accent);
}
.aslist li b { font-weight: 600; }
.aslist li span { color: var(--muted); font-weight: 400; }

/* ============================================================
   MEET — split with real people
   ============================================================ */
.meet-text .sig {
	margin-top: 30px; display: flex; align-items: center; gap: 16px;
}
.meet-text .sig .names {
	font-family: "Spectral", serif; font-style: italic; font-size: 22px; color: var(--ink);
}
.meet-text .sig .role { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
/* Meet photos — two framed 4:5 portraits side by side. The container aspect
   now matches the images (4:5), so object-fit:cover no longer slices the
   portraits into wide, short bands that cut off Amy's + Jenny's faces. */
.split.meet-section { min-height: 0; }
.meet-photos {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 1.6vw, 22px);
	align-content: center;
	padding: clamp(26px, 3.4vw, 56px);
}
.meet-photos .mp {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 22px 46px -26px rgba(var(--structural-rgb), 0.5);
}
.meet-photos .mp picture { position: absolute; inset: 0; }
.meet-photos .mp img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 15%;
}
/* phones: stack the two portraits so each face is large and clear. They must
   stretch to the column — the images are position:absolute so the .mp has no
   intrinsic width, and a shrink-to-fit container (e.g. via margin:auto) would
   collapse the track to 0. */
@media (max-width: 560px) {
	.meet-photos { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   SERVICE AREA — calm typographic band over a soft photo
   ============================================================ */
.area {
	position: relative; color: var(--on-ink); overflow: hidden;
}
.area-photo { position: absolute; inset: 0; z-index: 0; }
.area-photo img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 40%;
}
.area::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg,
		rgba(var(--structural-rgb),0.92) 0%,
		rgba(var(--structural-rgb),0.78) 46%,
		rgba(var(--structural-rgb),0.34) 100%);
}
.area .wrap { position: relative; z-index: 2; }
.area h2 { color: var(--on-ink); font-size: clamp(29px, 3.6vw, 46px); line-height: 1.1; margin-top: 20px; }
.area h2 em { font-style: italic; font-weight: 300; color: var(--on-ink-dim); }
.area p { color: var(--on-ink-dim); font-size: 17px; line-height: 1.6; margin: 20px 0 0; max-width: 520px; }
.towns { margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 0; max-width: 640px; }
.towns .town {
	font-family: "Spectral", serif; font-size: 21px; color: var(--on-ink);
	padding: 6px 22px 6px 0; margin-right: 22px;
	border-right: 1px solid color-mix(in srgb, var(--band-text) 28%, transparent);
}
.towns .town:last-child { border-right: none; }

/* ============================================================
   FINAL CTA — full-bleed photo, veil, words in the air
   ============================================================ */
.final {
	position: relative; min-height: 600px; display: flex; align-items: center;
	overflow: hidden;
}
.final-photo { position: absolute; inset: 0; z-index: 0; }
.final-photo img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 60%;
}
.final::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(75deg,
		rgba(var(--bg-rgb),0.96) 0%,
		rgba(var(--bg-rgb),0.88) 36%,
		rgba(var(--bg-rgb),0.55) 64%,
		rgba(var(--bg-rgb),0.18) 100%);
}
.final .wrap { position: relative; z-index: 2; width: 100%; }
.final-inner { max-width: 580px; padding-block: clamp(70px, 9vw, 110px); }
.final h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.018em; }
.final h2 em { font-style: italic; font-weight: 300; color: var(--ink-soft); }
.final p { color: var(--ink-soft); font-size: 18px; line-height: 1.6; margin: 22px 0 0; max-width: 460px; }
.final-actions { margin-top: 34px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* secondary phone CTA — brass-ringed icon + stacked label/number, the number
   underlines on hover. Grid layout so it renders correctly whether the markup
   has the icon + .final-phone-txt wrapper (home final-cta pattern) OR just
   .lbl + .num as direct children (the page patterns). */
.final-phone {
	display: inline-grid; grid-template-columns: auto auto;
	column-gap: 0; align-items: center;
	text-decoration: none; line-height: 1.15;
}
.final-phone-ic {
	grid-column: 1; grid-row: 1 / -1; margin-right: 14px;
	width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	color: var(--accent-deep);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
	transition: background .18s ease, transform .18s ease;
}
.final-phone:hover .final-phone-ic,
.final-phone:focus-visible .final-phone-ic { background: color-mix(in srgb, var(--accent) 28%, transparent); transform: translateY(-1px); }
.final-phone-txt { grid-column: 2; display: flex; flex-direction: column; }
.final-phone > .lbl, .final-phone > .num { grid-column: 2; }
.final-phone .lbl { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.final-phone .num {
	font-family: "Spectral", serif; font-size: 25px; color: var(--ink); font-weight: 500;
	width: max-content; border-bottom: 1.5px solid transparent; transition: border-color .18s ease;
}
.final-phone:hover .num,
.final-phone:focus-visible .num { border-bottom-color: var(--accent); }
.btn-ink { background: var(--structural); color: var(--band-text); }
.btn-ink:hover { background: var(--structural-soft); transform: translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--structural); color: var(--on-ink-dim); }
.foot .wrap { padding-block: 60px 36px; }
.foot-top { display: flex; justify-content: space-between; gap: 50px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--line-ink); }
.foot-brand { max-width: 330px; }
.foot-brand img { width: clamp(120px, 12vw, 150px); height: auto; object-fit: contain; margin-bottom: 18px; }
.foot-brand p { font-size: 14.5px; line-height: 1.6; color: var(--on-ink-dim); }
.foot-cols { display: flex; gap: 70px; flex-wrap: wrap; }
.foot-col h4 { font-family: "Public Sans", sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink); font-weight: 600; margin: 0 0 16px; }
.foot-col a, .foot-col p { display: block; font-size: 14.5px; color: var(--on-ink-dim); margin-bottom: 11px; line-height: 1.45; }
.foot-col a:hover { color: var(--accent-on-dark); }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: 12.5px; color: var(--on-ink-dim); }
.foot-bottom .legal { max-width: 660px; line-height: 1.55; }

/* ============================================================
   PHOTO-GRADE — color-grade the photographic scenes to the
   active color world. CSS-only, driven by per-world
   --pg-alpha / --pg-sat. Applied to the hero, the as-is split,
   the service-area band, and the final-CTA street photo. NOT
   applied to the real team photos (.meet-photos), logo, icons.
   ------------------------------------------------------------ */
.hero-photo,
.area-photo,
.final-photo,
.split:not(.meet-section) .split-photo {
	isolation: isolate;
}
.pg-grade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.pg-grade::after {
	content: ""; position: absolute; inset: 0;
	background: rgb(var(--pg-tint, var(--structural-rgb)));
	opacity: var(--pg-alpha);
	mix-blend-mode: var(--pg-blend, color);
	pointer-events: none;
}
.pg-grade::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(var(--accent-rgb),0.14),
		rgba(var(--accent-rgb),0) 55%);
	mix-blend-mode: soft-light;
	pointer-events: none;
}
.hero-photo img,
.area-photo img,
.final-photo img,
.split:not(.meet-section) .split-photo > picture img {
	filter: saturate(var(--pg-sat)) sepia(var(--pg-sepia, 0)) contrast(var(--pg-contrast, 1.03)) brightness(var(--pg-bright, 1.02));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
	/* collapse desktop nav into the hamburger drawer */
	.primary-nav { display: none; }
	.nav-toggle { display: inline-flex; }
	.header-phone, .header-cta { display: none; }
	.header-inner { justify-content: space-between; }
	.trust-row { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
	.trust-item { padding: 0 24px; border-left: 1px solid var(--line-ink); }
	.trust-item:nth-child(odd) { border-left: none; padding-left: 0; }
	.steps { grid-template-columns: 1fr; gap: 36px; }
	.step { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
	.step:first-child { border-top: none; padding-top: 0; }
	.split { grid-template-columns: 1fr; min-height: 0; }
	.split.reverse { direction: ltr; }
	.split-photo { min-height: 360px; }
	/* .meet-photos no longer needs a min-height — its 4:5 portraits set their own height */
}
@media (max-width: 560px) {
	body { font-size: 16px; }
	.site-header { padding-block: 16px; }
	.brand .brand-sub { display: none; }
	.hero-inner { padding-block: 120px 56px; }
	.hero-form .fields { flex-direction: column; gap: 12px; }
	.hero-form .field { flex: 0 0 auto; } /* override desktop flex:1 1 200px — in a column the 200px basis becomes height, leaving dead space between fields */
	.trust-row { grid-template-columns: 1fr; }
	.trust-item, .trust-item:nth-child(odd) { border-left: none; padding-left: 0; }
	.towns .town { font-size: 18px; padding-right: 16px; margin-right: 16px; }
	.final-actions { gap: 14px; }
	.foot-cols { gap: 36px; }
}
@media (max-width: 390px) {
	.hero-inner { padding-block: 100px 48px; }
}
@media (max-width: 360px) {
	.brand img { height: 30px; }
	.brand .brand-name { font-size: 16px; }
}

/* ============================================================
   REVEAL ANIMATION — staggered scroll reveal.
   Gated on html.om-anim + a reveal script announcing readiness
   via html.om-reveal-ready, so content is NEVER left hidden when
   no reveal JS is loaded (the foundation ships nav.js only). The
   mockup's [data-reveal]→.is-in contract is preserved; .is-in is
   added by the reveal observer when it ships.
   ------------------------------------------------------------ */
.om-js.om-anim.om-reveal-ready [data-reveal] {
	opacity: 0; transform: translateY(12px);
	transition: opacity .6s ease, transform .6s ease;
}
.om-js.om-anim.om-reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   HEADER REFINEMENT — keep the 7-link flat bar on one elegant
   line (the workflow's nav links lacked nowrap, so each link was
   shrink-wrapping). Tighten gaps + lock items to content width.
   ============================================================ */
.header-inner { gap: 18px; flex-wrap: nowrap; }
.primary-nav .nav-links { gap: 18px; flex-wrap: nowrap; }
.primary-nav .nav-links li { flex: 0 0 auto; }
.primary-nav .nav-links a { white-space: nowrap; font-size: 14px; }
.primary-nav .nav-divider { padding-left: 18px; }
.header-right { gap: 18px; flex-wrap: nowrap; }
.header-phone .lbl,
.header-cta { white-space: nowrap; }
.header-phone .num { white-space: nowrap; }
/* brand + right group must not shrink (else the wordmark wraps into the nav) */
.brand { flex: 0 0 auto; }
.brand .brand-txt,
.brand .brand-name,
.brand .brand-sub { white-space: nowrap; }
.header-right { flex: 0 0 auto; }
/* the header bar spans wider than the text column so the full nav + phone + CTA never clip */
.site-header .header-inner { max-width: 1340px; padding-inline: 28px; }
.primary-nav .nav-links { gap: 16px; }
/* a 7-link flat bar needs real room — tighten the gap and switch to the
   drawer below 1180px (not 1000) so the bar is never cramped on desktop */
.primary-nav .nav-links { gap: 14px; }
@media (max-width: 1180px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* compact the brand + phone so the full bar fits common desktop widths */
.brand img { height: 32px; }
.brand .brand-name { font-size: 17px; }
.brand .brand-sub { font-size: 10px; letter-spacing: 0.12em; }
.primary-nav .nav-links { gap: 12px; }
.primary-nav .nav-links a { font-size: 13px; }
.header-phone .lbl { font-size: 10px; letter-spacing: 0.08em; }
.header-phone .num { font-size: 16px; }
.header-cta { padding: 10px 16px; font-size: 13px; }
/* the full bar fits cleanly only >=1260px; below that, use the drawer */
@media (max-width: 1260px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ============================================================
   NAV DECLUTTER (post-launch client review — "keep all 7,
   de-crammed"). The in-bar phone block is gone from the markup
   (phone lives in the footer, the final CTA + the sticky pill),
   link underlines removed, and the freed width spent on breathing
   room (bigger type + roomier gaps). Higher-specificity selectors
   (.site-header …) so this cleanly supersedes the earlier
   cram-to-fit refinement rules above without deleting them.
   Drawer breakpoint tuned to where the 7 links actually stop
   fitting (see measure-nav.mjs).
   ============================================================ */
.site-header .header-inner { max-width: 1380px; gap: clamp(16px, 1.8vw, 40px); }
.site-header .brand { text-decoration: none; }
.site-header .brand img { height: 34px; }
.site-header .brand .brand-name { font-size: 18px; }
.site-header .brand .brand-sub { font-size: 10.5px; letter-spacing: 0.14em; }
.site-header .primary-nav .nav-links { gap: clamp(13px, 1.45vw, 26px); }
.site-header .primary-nav .nav-links a { font-size: 14.5px; text-decoration: none; }
.site-header .primary-nav .nav-divider { padding-left: clamp(13px, 1.45vw, 26px); }
.site-header .header-cta { padding: 11px 22px; font-size: 14px; text-decoration: none; }
@media (min-width: 1280px) {
  .site-header .primary-nav { display: block; }
  .site-header .nav-toggle { display: none; }
}
@media (max-width: 1279px) {
  .site-header .primary-nav { display: none; }
  .site-header .nav-toggle { display: inline-flex; }
}

/* navy frosted nav — light text on the dark "ice glass", every page + state */
.site-header .brand .brand-name { color: var(--band-text); }
.site-header .brand .brand-sub { color: color-mix(in srgb, var(--band-text) 68%, transparent); }
.site-header .primary-nav .nav-links a { color: color-mix(in srgb, var(--band-text) 90%, transparent); }
.site-header .primary-nav .nav-links a:hover { color: var(--accent-on-dark); }
.site-header .primary-nav .nav-cta { color: var(--accent-on-dark) !important; }
.site-header .primary-nav .nav-divider::before { background: color-mix(in srgb, var(--band-text) 24%, transparent); }
.site-header .header-cta { color: var(--band-text); border-color: color-mix(in srgb, var(--band-text) 45%, transparent); }
.site-header .header-cta:hover { background: var(--accent); color: var(--structural); border-color: var(--accent); }
.site-header .nav-toggle-bars span { background: var(--band-text); }

/* ============================================================
   SAMPLE-OFFER FLIP CARD (Phase 7) — ported from the mockup;
   rotation gated on .om-js.om-anim, plain swap on .om-anim-off,
   stacked faces with no JS. JS sizes the wrapper to the active face.
   ============================================================ */
.offer-band { background: var(--paper-2); position: relative; }
.offer-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.offer-copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin-top: 20px; }
.offer-copy h2 em { font-style: italic; font-weight: 300; color: var(--ink-soft); }
.offer-copy p { color: var(--muted); font-size: 17px; line-height: 1.62; margin: 22px 0 0; max-width: 480px; }
.offer-copy .note { margin-top: 26px; font-size: 13px; color: var(--ink-soft); font-style: italic; border-left: 2px solid var(--accent); padding-left: 14px; line-height: 1.55; }
.offer-sheet { background: var(--paper-3); border: 1px solid var(--line); border-radius: 6px; padding: 38px 40px; box-shadow: var(--shadow); }
.offer-sheet .sheet-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.offer-sheet .sheet-ttl { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.offer-sheet .sheet-tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: flex; align-items: baseline; justify-content: space-between; padding: 15px 0; border-bottom: 1px dotted var(--line); font-size: 15.5px; }
.ledger li .lbl { color: var(--ink-soft); }
.ledger li .lbl small { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.ledger li .val { font-family: "Spectral", serif; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger li.minus .val { color: var(--ink-soft); }
.ledger li.strike .val { text-decoration: line-through; color: var(--muted); }
.ledger .total { margin-top: 6px; padding-top: 22px; border-top: 2px solid var(--structural); border-bottom: none; align-items: center; }
.ledger .total .lbl { font-family: "Spectral", serif; font-size: 20px; color: var(--ink); font-weight: 500; }
.ledger .total .val { font-family: "Spectral", serif; font-size: 38px; color: var(--accent-deep); font-weight: 500; }
.offer-sheet .sheet-foot { margin-top: 22px; font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.flip-wrap { position: relative; perspective: 1800px; min-height: 740px; }
.om-js.om-anim .flip-wrap { transition: height .6s cubic-bezier(.2,.7,.2,1); }
.flip-inner { position: relative; width: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1); height: 100%; min-height: inherit; }
.om-js.om-anim .flip-inner.is-flipped { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; }
.flip-front { transform: rotateY(0deg); }
.flip-back { transform: rotateY(180deg); }
.flip-face .offer-sheet { min-height: 100%; margin: 0; }
.flip-front .offer-sheet { display: flex; flex-direction: column; }
.flip-front .ledger { margin-top: 4px; }
.flip-btn { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; font-family: "Public Sans", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; padding: 15px 26px; border-radius: 4px; cursor: pointer; background: var(--structural); color: var(--band-text); border: 1px solid transparent; box-shadow: 0 14px 30px -16px rgba(0,0,0,.4); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; align-self: flex-start; }
.flip-btn:hover { background: var(--structural-soft); transform: translateY(-2px); }
.flip-btn .glyph { display: inline-flex; transition: transform .3s ease; }
.flip-back .flip-btn { background: transparent; color: var(--accent-deep); border-color: var(--line); box-shadow: none; padding: 11px 20px; margin-top: 12px; font-size: 14px; }
.flip-back .flip-btn:hover { background: color-mix(in srgb, var(--structural) 6%, transparent); transform: translateY(-1px); }
.flip-back .flip-btn .glyph { transform: scaleX(-1); }
.flip-back .offer-sheet { overflow: visible; display: flex; flex-direction: column; }
.break-group { margin-top: 14px; }
.break-group:first-of-type { margin-top: 10px; }
.break-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--structural); }
.break-head .break-ttl { font-family: "Public Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.break-head .break-sub { font-family: "Spectral", serif; font-size: 21px; font-weight: 500; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.break-list { list-style: none; margin: 0; padding: 0; }
.break-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 14.5px; }
.break-list li:last-child { border-bottom: none; }
.break-list .bk-lbl { color: var(--ink-soft); line-height: 1.4; flex: 1 1 auto; min-width: 0; }
.break-list .bk-val { flex: 0 0 auto; font-family: "Spectral", serif; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.break-note { margin: 0.25rem 0 0; font: 400 0.74rem/1.45 "Public Sans", sans-serif; color: var(--muted); text-align: center; opacity: 0.85; }
.flip-back .sheet-foot { display: block; margin-top: 14px; line-height: 1.45; }
.flip-back .sheet-foot svg { float: left; margin: 3px 8px 0 0; }
.flip-back .sheet-foot b { color: var(--ink); font-weight: 600; }
.om-js.om-anim-off .flip-inner { transition: none; }
.om-js.om-anim-off .flip-face { -webkit-backface-visibility: visible; backface-visibility: visible; transform: none; transition: opacity .22s ease; }
.om-js.om-anim-off .flip-front { z-index: 2; }
.om-js.om-anim-off .flip-back { z-index: 1; opacity: 0; pointer-events: none; }
.om-js.om-anim-off .flip-inner.is-flipped .flip-front { z-index: 1; opacity: 0; pointer-events: none; }
.om-js.om-anim-off .flip-inner.is-flipped .flip-back { z-index: 2; opacity: 1; pointer-events: auto; }
html:not(.om-js) .flip-face { position: static; transform: none; backface-visibility: visible; }
html:not(.om-js) .flip-back { margin-top: 22px; }
html:not(.om-js) .flip-wrap { min-height: 0; }
html:not(.om-js) .flip-inner { height: auto; }
html:not(.om-js) .flip-btn { display: none; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .flip-wrap { min-height: 760px; } .offer-sheet { padding: 28px 22px; } }

/* ============================================================
   STICKY LEAD PILL (variant C: center pill -> expand card)
   Reveals after the hero, taps to expand, dismissible. Slot only.
   ============================================================ */
.om-sticky { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none; transition: transform .42s cubic-bezier(.2,.75,.2,1); }
#sf { transform: translateY(135%); }
body.sf-stuck #sf { transform: translateY(0); pointer-events: auto; }
body.sf-dismissed #sf { display: none; }
.sf-shell { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: 999px; box-shadow: 0 14px 40px rgba(22,38,59,.2); padding: 8px 8px 8px 22px; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.sf-collapsed-title { font-family: "Spectral", serif; font-size: 17px; white-space: nowrap; color: var(--ink); }
.sf-inner { display: none; }
.sf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sf-title { font-family: "Spectral", serif; font-weight: 600; font-size: 19px; }
.sf-step-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; margin-left: auto; }
.sf-form { display: block; }
.sf-step { display: none; }
.sf-step.active { display: flex; flex-direction: column; gap: 8px; }
.sf-inner input { width: 100%; font-family: "Public Sans", sans-serif; font-size: 16px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--ink); }
.sf-inner input::placeholder { color: var(--muted); }
.sf-btn { font-family: "Public Sans", sans-serif; font-weight: 600; font-size: 15px; border: 0; border-radius: 10px; padding: 13px 20px; cursor: pointer; }
.sf-btn-primary { background: var(--structural); color: var(--band-text); }
.sf-btn-accent { background: var(--accent); color: #23150b; }
.sf-next { width: 100%; }
.sf-done { margin: 0; font-size: 14px; color: var(--ink); }
.sf-dismiss { background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 8px; }
.sf-dismiss:hover { color: var(--ink); }
.sf-collapse { align-self: flex-start; }
body.sf-open .sf-shell { border-radius: 16px; flex-direction: column; align-items: stretch; width: 340px; max-width: calc(100vw - 32px); padding: 18px; }
body.sf-open .sf-collapsed-title, body.sf-open .sf-pillbtn, body.sf-open .sf-dismiss-pill { display: none; }
body.sf-open .sf-inner { display: block; }
@media (max-width: 640px) { body.sf-open .sf-shell { width: auto; margin: 0 12px 14px; } }
@media (prefers-reduced-motion: reduce) { .om-sticky { transition: none; } }

/* ============================================================
   ==== interior pages ====
   Shared page chrome (intro spacing + solid header on non-home)
   plus the page-specific CSS merged from the seven interior
   page patterns. All built on existing role tokens so every
   Style Variation color world retints these too.
   ============================================================ */

/* ---- page chrome (shared) -------------------------------------------------
   The homepage header is transparent + absolute over the hero. Interior pages
   have no hero, so the header must become a solid in-flow bar and the page
   title must clear it. On the home page the title still needs to clear the
   absolute header over the hero; on interior pages a smaller pad suffices once
   the header is sticky/in-flow.                                              */
.page-intro { padding-top: clamp(140px, 16vh, 200px); }

/* The header is now a sticky navy-frosted bar on EVERY page (see the .site-header
   base), so the old interior-only sticky/cream override is no longer needed. */
body:not(.home) .page-intro { padding-top: clamp(88px, 11vh, 120px); }

.page-lede {
	font-size: clamp(18px, 2.2vw, 22px);
	color: var(--muted);
	max-width: 60ch;
	margin-top: 14px;
}

/* intro lead paragraph for sections that aren't built on .section-head */
.section-lead {
	font-size: clamp(17px, 1.9vw, 20px);
	line-height: 1.62;
	color: var(--muted);
	max-width: 660px;
	margin-top: 20px;
}

/* ============================================================
   HOW IT WORKS — speed comparison. Two proportional tracks make
   the 14-days-vs-two-months gap visible at a glance (replaces the
   offer ledger that used to be duplicated from the homepage).
   ============================================================ */
.speed-wrap { margin-top: clamp(40px, 5vw, 68px); display: grid; gap: clamp(28px, 4vw, 46px); max-width: 880px; }
.speed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.speed-name { font-family: "Spectral", serif; font-size: clamp(20px, 2.3vw, 27px); color: var(--ink); font-weight: 500; }
.speed-dur { font-family: "Spectral", serif; font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; white-space: nowrap; }
.speed-ours .speed-dur { color: var(--accent-deep); }
.speed-trad .speed-dur { color: var(--ink-soft); }
.speed-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); position: relative; overflow: hidden; }
.speed-bar i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px; }
.speed-ours .speed-bar i { width: 19%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.speed-trad .speed-bar i { width: 100%; background: color-mix(in srgb, var(--ink-soft) 42%, var(--line)); }
.speed-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 0; }
.speed-steps li { font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; }
.speed-steps li::after { content: "\203A"; margin: 0 12px; color: color-mix(in srgb, var(--ink) 28%, transparent); font-size: 15px; }
.speed-steps li:last-child::after { content: none; }
.speed-ours .speed-steps li { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
	.speed-steps li { font-size: 12.5px; }
	.speed-steps li::after { margin: 0 8px; }
}

/* ============================================================
   WHY SELL — "net proceeds" reframe. An honest deduction flow
   ($400k list price minus repairs/commission/carrying/concessions
   → net) set against the clean cash number. Distinct from the home
   offer-ledger and from the compare table below it.
   ============================================================ */
.net-flow { margin-top: clamp(36px, 4.5vw, 56px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 12px; }
.net-step { display: flex; flex-direction: column; gap: 4px; }
.net-amt { font-family: "Spectral", serif; font-size: clamp(19px, 2.1vw, 24px); color: var(--ink-soft); font-variant-numeric: tabular-nums; line-height: 1.1; }
.net-lbl { font-size: 12.5px; color: var(--muted); }
.net-start .net-amt { color: var(--ink); }
.net-result .net-amt { color: var(--ink); font-weight: 500; }
.net-op { font-family: "Spectral", serif; font-size: 20px; color: var(--muted); align-self: flex-start; padding-top: 3px; }
.net-vs { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 40px); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 8px; padding: clamp(22px, 3vw, 36px); }
.net-vs-cash { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.net-vs-lbl { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.net-vs-amt { font-family: "Spectral", serif; font-size: clamp(34px, 4.6vw, 52px); color: var(--ink); font-weight: 500; line-height: 1; }
.net-vs-sub { font-size: 13px; color: var(--muted); }
.net-vs-note { flex: 1 1 320px; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }
.net-vs-note strong { color: var(--accent-deep); font-weight: 600; }
.net-disclaimer { margin-top: 16px; font-size: 12.5px; font-style: italic; color: var(--muted); }
@media (max-width: 600px) {
	.net-op { display: none; }
	.net-flow { gap: 0; }
	.net-step { flex-direction: row; justify-content: space-between; align-items: baseline; width: 100%; padding: 11px 0; border-bottom: 1px dotted var(--line); gap: 16px; }
	.net-step.net-result { border-bottom: none; border-top: 2px solid var(--structural); padding-top: 14px; }
}

/* ============================================================
   AREAS WE SERVE — town-first directory hub. Leads the page (no
   hero). Region groups of town chips, structured so each town can
   become a "Sell Your Home for Cash [city]" link from the future
   SEO pages.
   ============================================================ */
.area-hub-section h1 { margin-top: 18px; }
.area-hub-lede { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; color: var(--muted); max-width: 640px; margin-top: 16px; }
.area-hub { margin-top: clamp(34px, 4.2vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3.4vw, 44px) clamp(32px, 4vw, 64px); }
.area-group-name { display: flex; align-items: center; gap: 14px; font-family: "Public Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 16px; }
.area-group-name::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.area-towns { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.area-town { font-family: "Spectral", serif; font-size: 16.5px; line-height: 1; color: var(--ink); padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
/* ready to convert to links to the future "Sell Your Home for Cash [city]" pages */
a.area-town { text-decoration: none; transition: border-color .16s ease, color .16s ease, background .16s ease; }
a.area-town:hover { border-color: var(--accent); color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* home service-area: "see every city" link (light, on the navy photo band) */
.area .area-all { margin-top: 30px; }
.area .area-all a { font-family: "Public Sans", sans-serif; font-size: 15px; font-weight: 600; color: var(--accent-on-dark); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-on-dark) 45%, transparent); padding-bottom: 3px; transition: border-color .16s ease; }
.area .area-all a:hover { border-bottom-color: var(--accent-on-dark); }
/* a few more cities now live in the home band — let it breathe wider */
.area .towns { max-width: 780px; }

/* ============================================================
   WHY SELL FOR CASH — side-by-side compare table.
   No existing Open Morning class covers a 3-col comparison
   grid, so this is the page's one genuinely-new block. Uses
   only role-token aliases already defined in app.css.
   ============================================================ */
.compare-wrap { margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; }
.compare {
	width: 100%; border-collapse: collapse;
	font-family: "Public Sans", sans-serif;
	min-width: 560px;
}
.compare th, .compare td {
	text-align: left; vertical-align: top;
	padding: 17px 22px;
	border-bottom: 1px solid var(--line);
	font-size: 15.5px; line-height: 1.5;
}
.compare thead th {
	font-size: 12px; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-soft);
	border-bottom: 2px solid var(--structural);
	padding-top: 0;
}
.compare tbody th[scope="row"] {
	font-family: "Spectral", serif; font-weight: 500;
	font-size: 16px; color: var(--ink);
	width: 26%;
}
.compare td { color: var(--muted); }
/* the "us" column is the one to land on — tint it, weight it */
.compare th.compare-us, .compare td.compare-us {
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	color: var(--ink);
}
.compare thead th.compare-us { color: var(--accent-deep); }
.compare td.compare-us { font-weight: 500; }
.compare .ck-glyph {
	display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; margin-right: 8px;
	color: var(--accent-deep); font-size: 13px; font-weight: 700;
	vertical-align: -2px;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: none; }

/* two-column situations list — let the paired .aslist blocks
   breathe to full column width (the base .aslist caps at 460px) */
.compare-cols .aslist { max-width: none; }
@media (max-width: 781px) {
	.compare-cols { gap: 0 !important; }
	.compare-cols .wp-block-column { flex-basis: 100% !important; }
	/* avoid a double hairline where the two lists meet on mobile */
	.compare-cols .wp-block-column:last-child .aslist li:first-child { border-top: none; }
}

/* ============================================================
   FAQ ACCORDION — native <details>/<summary>, no JS.
   Hairline rows, brass plus/minus marker, quiet-luxury type.
   Tokens consumed: --hairline/--line, --accent/--accent-deep,
   --ink/--muted/--ink-soft, "Spectral"/"Public Sans".
   ============================================================ */
.faq-section .faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }

/* the question row — full-width clickable summary */
.faq-item > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: flex-start; gap: 22px;
	padding: 26px 4px;
	font-family: "Spectral", serif;
	font-size: clamp(19px, 2.1vw, 23px); line-height: 1.3; font-weight: 500;
	color: var(--ink);
	transition: color .18s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }   /* hide native triangle (Safari) */
.faq-item > summary:hover { color: var(--accent-deep); }
.faq-item > summary:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; border-radius: 4px; }

/* brass +/- marker drawn from two CSS-gradient hairlines; rotates to "x" when open */
.faq-item > summary::after {
	content: ""; flex: none; position: relative;
	width: 18px; height: 18px; margin-left: auto; margin-top: .35em;
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
	background:
		linear-gradient(var(--accent-deep), var(--accent-deep)) center / 100% 1.5px no-repeat,
		linear-gradient(var(--accent-deep), var(--accent-deep)) center / 1.5px 100% no-repeat;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }   /* + becomes x visual = collapse cue */
.faq-item[open] > summary { color: var(--accent-deep); }

/* the answer */
.faq-body { padding: 0 56px 28px 4px; }
.faq-body p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.68; max-width: 64ch; }
.faq-body p + p { margin-top: 14px; }

/* gentle open animation where motion is allowed */
@media (prefers-reduced-motion: no-preference) {
	.faq-item[open] > .faq-body { animation: faq-reveal .32s ease; }
}
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
	.faq-item > summary { gap: 16px; padding: 22px 2px; }
	.faq-body { padding: 0 6px 24px 2px; }
}

/* ============================================================
   CONTACT PAGE — details + form grid, NAP list, styled form slot
   Consumes existing role tokens (--ink, --muted, --hairline,
   --surface, --paper-2, --accent, --accent-deep, --structural,
   fonts) so it retints with every color world like the rest.
   ============================================================ */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: start;
}

/* ---- left column: reassurance + NAP ---- */
.contact-details .marker { margin-bottom: 22px; }
.contact-details .contact-h2 {
	font-family: "Spectral", serif;
	font-size: clamp(27px, 3.2vw, 40px);
	line-height: 1.1;
	color: var(--ink);
	margin: 0;
}
.contact-details .contact-intro {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.64;
	color: var(--muted);
	max-width: 460px;
}

.contact-list {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
}
.contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 0;
	border-top: 1px solid var(--hairline);
}
.contact-list li:last-child { border-bottom: 1px solid var(--hairline); }
.contact-list .ci {
	flex: none;
	margin-top: 2px;
	color: var(--accent-deep);
}
.contact-list .ci-body { display: flex; flex-direction: column; }
.contact-list .ci-lbl {
	font-family: "Public Sans", sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 6px;
}
.contact-list .ci-val {
	font-family: "Spectral", serif;
	font-size: 22px;
	line-height: 1.25;
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
}
.contact-list a.ci-val { transition: color .16s ease; }
.contact-list a.ci-val:hover { color: var(--accent-deep); }
.contact-list .ci-val-plain { font-weight: 500; }
.contact-list .ci-note {
	margin-top: 7px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
}

.contact-hours {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
}
.contact-hours .ch-lbl {
	font-family: "Public Sans", sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.contact-hours .ch-val { font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---- right column: styled form slot (no submit / no JS) ---- */
.contact-form-wrap { position: relative; }
.contact-form {
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: 8px;
	padding: clamp(28px, 3.4vw, 44px);
	box-shadow: var(--shadow);
}
.contact-form .cf-head { margin-bottom: 26px; }
.contact-form .cf-eyebrow {
	display: block;
	font-family: "Public Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-deep);
}
.contact-form .cf-sub {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--muted);
}
.contact-form .cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.contact-form .cf-field { margin-bottom: 18px; }
.contact-form .cf-row .cf-field { margin-bottom: 18px; }
.contact-form label {
	display: block;
	font-family: "Public Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 9px;
}
.contact-form input,
.contact-form textarea {
	width: 100%;
	font-family: "Public Sans", sans-serif;
	font-size: 16px;
	color: var(--ink);
	padding: 15px 16px;
	background: color-mix(in srgb, var(--surface) 60%, var(--paper-2));
	border: 1px solid var(--hairline);
	border-radius: 5px;
	transition: border-color .16s, background .16s, box-shadow .16s;
}
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted); }
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	background: var(--surface);
	border-color: var(--accent-deep);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.4);
}
.contact-form .cf-send { width: 100%; margin-top: 6px; }
.contact-form .cf-fineprint {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-soft);
}
.contact-form .cf-fineprint a {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* ---- closing CTA (calm, on paper-2) ---- */
.contact-close { background: var(--paper-2); }
.contact-close-inner { max-width: 640px; }
.contact-close-inner h2 {
	font-size: clamp(30px, 3.8vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0;
}
.contact-close-inner > p {
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 520px;
}
.contact-close-actions {
	margin-top: 32px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.contact-close-phone { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
.contact-close-phone .lbl {
	font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-soft); font-weight: 600;
}
.contact-close-phone .num {
	font-family: "Spectral", serif; font-size: 27px; color: var(--ink); font-weight: 500;
}

/* ---- responsive ---- */
@media (max-width: 920px) {
	.contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 560px) {
	.contact-form .cf-row { grid-template-columns: 1fr; gap: 0; }
	.contact-list .ci-val { font-size: 20px; }
	.contact-close-actions { gap: 16px; }
}

/* ============================================================
   Work With Us page — two-teaser grid + non-functional email
   slots + seller-band. Investor/buyer audience, kept calm and
   honest. Built from existing tokens; mirrors .split-text / .btn
   / hero-form input language. Slots are styled SLOTS only (inputs
   + button disabled, onsubmit return false) — no JS, no submit.
   ============================================================ */
.wu-section { background: var(--paper); }
.wu-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 38px);
}
.wu-card {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: clamp(26px, 3vw, 40px);
	display: flex;
	flex-direction: column;
}
.wu-card .marker { margin-bottom: 18px; }
.wu-title {
	font-family: "Spectral", serif;
	font-weight: 500;
	font-size: clamp(23px, 2.4vw, 29px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
}
.wu-blurb {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.64;
	margin: 14px 0 0;
}
/* styled SLOT — visually live, intentionally inert */
.wu-slot { margin-top: auto; padding-top: 26px; }
.wu-slot-lbl {
	display: block;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 600;
	margin-bottom: 11px;
}
.wu-slot-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.wu-slot input {
	flex: 1 1 200px;
	min-width: 0;
	font-family: "Public Sans", sans-serif;
	font-size: 16px;
	padding: 16px 18px;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	border: 1px solid rgba(var(--structural-rgb), 0.20);
	border-radius: 4px;
	color: var(--ink);
	transition: border-color .16s, background .16s, box-shadow .16s;
}
.wu-slot input::placeholder { color: var(--muted); }
.wu-slot input:focus {
	outline: none;
	background: var(--surface);
	border-color: var(--accent-deep);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.45);
}
.wu-slot .btn { flex: 0 0 auto; }
/* honest "coming soon" — disabled slot reads as not-yet-live */
.wu-slot input:disabled,
.wu-slot .btn:disabled {
	opacity: .65;
	cursor: not-allowed;
}
.wu-slot .btn:disabled:hover { transform: none; }
.wu-soon {
	margin: 14px 0 0;
	font-size: 13px;
	font-style: italic;
	color: var(--ink-soft);
	line-height: 1.55;
	border-left: 2px solid var(--accent);
	padding-left: 14px;
}
.wu-soon a { color: var(--ink); font-style: normal; font-weight: 600; }

/* seller redirect band — reuses .final-actions / .final-phone */
.wu-seller { background: var(--paper-2); border-top: 1px solid var(--line); }
.wu-seller-inner { max-width: 660px; }
.wu-seller h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--ink);
}
.wu-seller p { color: var(--muted); font-size: 17px; line-height: 1.64; margin-top: 18px; }
.wu-seller .final-actions { margin-top: 30px; }

@media (max-width: 781px) {
	.wu-grid { grid-template-columns: 1fr; }
}

/* desktop: the mobile drawer is unused (full nav shows) — fully hide it so its
   off-screen links aren't keyboard-reachable / captured in full-page shots */
@media (min-width: 1261px) { .nav-drawer { display: none !important; } }

/* ============================================================
   PERF — skip layout/paint of off-screen sections until they
   approach the viewport. Cuts initial Style & Layout (mobile
   TBT) on the long homepage; the hero + page intro (above the
   fold) are intentionally excluded. contain-intrinsic-size
   reserves space so scrolling stays smooth.
   ============================================================ */
/* NB: .trust is deliberately NOT in this list — it's short and high on the
   page, so the 600px intrinsic-size reservation rendered as an empty navy gap
   under the hero on mobile. */
.offer-band,
.split,
.area,
.final,
.foot,
.section:not(.page-intro) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}