/* ==========================================================================
   Julie Agency — top bar, header, hero, trust bar
   Built from design/home-reference.png
   Navy #012243 · Bronze #B8710F · Cream #F8F5F3 · Playfair Display + Mulish

   SIZING RULE
   No `vw` / `vh` units are used for type, spacing, icons or media boxes.
   Every dimension is a fixed px value swapped at the breakpoints below, so
   browser zoom scales the whole page uniformly instead of re-flowing it.

   Breakpoints (min-width): 600 · 768 · 1080 · 1280 · 1536
   The hero splits into two columns at 1080.
   ========================================================================== */

:root {
	/* --- Colour ------------------------------------------------------- */
	--navy: #012243;
	--navy-lift: #06315c;
	--ink: #0b2545; /* display headline */
	--gold: #b8710f; /* bronze — text, borders, rules */
	--gold-strong: #96590a;
	--gold-fill: #c4933d; /* softer gold — filled buttons, chart, band */
	--gold-fill-strong: #ad7f2f;
	--gold-light: #f0c176; /* gold as it reads on navy */
	--cream: #f8f5f3;
	--white: #fefefe;
	--body: #3a3e44;
	--line: #e4ded8;
	--line-navy: rgba(255, 255, 255, 0.16);
	--sage: #7b9786; /* client-experience accent — avatar ring, category label */
	--sage-strong: #5f7568;

	/* --- Type families ------------------------------------------------ */
	--display: "Playfair Display", "Iowan Old Style", Georgia, serif;
	--sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* --- Fixed shell -------------------------------------------------- */
	--container: 1540px;
	--radius: 2px;
	--radius-panel: 14px;
	--shadow-panel: 0 18px 44px -12px rgba(1, 34, 67, 0.22), 0 2px 8px rgba(1, 34, 67, 0.06);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* --- Step tokens: base (< 600px) ---------------------------------- */
	--gutter: 20px;
	--header-h: 78px;
	--brand-size: 20px;
	--logo-h: 58px;
	--nav-size: 15px;
	--nav-gap: 18px;

	--btn-h: 56px;
	--btn-px: 24px;
	--btn-size: 16px;
	--navcta-px: 20px;
	--navcta-size: 15px;

	--rule-w: 44px;
	--hero-title: 38px;
	--hero-lede: 17px;
	--hero-content-w: 100%;
	--hero-pad-y: 48px;
	--hero-pad-right: 20px;
	--hero-min-h: 0px;
	--hero-media-h: 240px;
	--hero-gap-sm: 26px; /* headline → rule, rule → lede */
	--hero-gap-lg: 32px; /* lede → buttons */

	--trust-icon: 40px;
	--trust-text: 16px;
	--trust-gap: 16px;
	--trust-min-h: 0px;

	--sec-y: 72px;
	--sec-eyebrow: 12px;
	--sec-dash: 22px;
	--sec-title: 30px;
	--sec-head-gap: 20px; /* eyebrow → title */
	--goals-grid-gap: 30px; /* title → grid */
	--goal-gap: 14px;
	--goal-pad-y: 32px;
	--goal-pad-x: 22px;
	--goal-pad-bottom: 30px;
	--goal-icon-h: 92px;
	--goal-icon-gap: 28px;
	--goal-name: 22px;
	--goal-name-gap: 8px;
	--goal-copy: 15px;
	--goal-card-bg: #faf8f5;

	/* --- Who I Help: numbered situation cards ------------------------- */
	/*
	 * Third tone between the cream loan-options band and the white qualify
	 * step. One step deeper than --cream, same warm family, so the section
	 * separates without a sage or cool-blue wash. Eyebrow and card numbers
	 * use the shared bronze.
	 */
	--sp-bg: #f1ece7;
	--sp-line: #e4ded8;
	--sp-grid-gap: 16px;
	--sp-card-pad: 24px;
	--sp-card-gap: 18px;
	--sp-icon: 72px;
	--sp-num: 12px;
	--sp-title: 21px;
	--sp-copy: 15px;

	--chip-h: 42px;
	--chip-px: 16px;
	--chip-size: 14px;
	--chip-gap: 9px;
	--lo-chips-gap: 28px; /* title → chips */
	--lo-note-gap: 24px; /* chips → note */
	--lo-link-gap: 24px; /* note → link */
	--lo-note: 16px;
	--lo-link: 17px;
	--lo-arrow-w: 34px;

	--q-title: 22px;
	--q-head-gap: 16px;
	--q-label: 13px;
	--q-label-gap: 24px; /* heading → field label */
	--q-opt-gap: 10px;
	--q-opt-h: 56px;
	--q-opt-size: 15px;
	--q-col-gap: 36px;
	--q-heading-min-h: calc(var(--q-title) * 1.28);
	--q-legend-min-h: calc(var(--q-label) * 1.45);
	--q-intro-gap: 8px;
	--q-options-min-h: calc(4 * (var(--q-label) + var(--q-opt-h) + 20px) + 48px);

	--calc-lede: 16px;
	--calc-tab: 15px;
	--calc-pad: 24px;
	--calc-title: 22px;
	--calc-label: 13px;
	--calc-input-h: 52px;
	--calc-input: 16px;
	--calc-headline: 44px;
	--calc-legend: 15px;
	--calc-chart: 200px;
	--calc-breakdown-gap: 28px;
	--calc-band-pad: 28px;

	--vip-panel-w: 380px;

	--cta-title: 24px;
	--cta-pad-y: 36px;

	--help-icon: 52px;
	--help-label: 15px;
	--help-gap: 16px;

	--footer-text: 15px;
	--footer-disclaimer: 12px;
	--footer-gap: 36px;
	--footer-nmls-icon: 44px;
}

/* Vietnamese: Be Vietnam Pro for display + UI (proper diacritic support). */
html[data-lang="vi"] {
	--display: "Be Vietnam Pro", "Segoe UI", Helvetica, Arial, sans-serif;
	--sans: "Be Vietnam Pro", "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (min-width: 600px) {
	:root {
		--gutter: 24px;
		--brand-size: 22px;
		--logo-h: 60px;
		--btn-h: 58px;
		--btn-px: 28px;
		--rule-w: 48px;
		--hero-title: 44px;
		--hero-pad-y: 56px;
		--hero-media-h: 320px;
		--trust-icon: 42px;

		--sec-y: 80px;
		--sec-title: 34px;
		--goal-icon-h: 100px;
		--goal-name: 23px;
		--goal-copy: 16px;
		--goal-pad-y: 36px;
		--goal-pad-x: 26px;

		--sp-grid-gap: 18px;
		--sp-card-pad: 26px;
		--sp-icon: 80px;
		--sp-title: 22px;
		--sp-copy: 16px;

		--chip-h: 46px;
		--chip-px: 18px;
		--chip-size: 15px;
		--chip-gap: 10px;
		--lo-note: 17px;
		--lo-link: 18px;

		--q-title: 24px;
		--q-head-gap: 18px;
		--q-label-gap: 26px;
		--q-opt-h: 58px;
		--q-opt-size: 16px;

		--calc-pad: 28px;
		--calc-title: 24px;
		--calc-headline: 52px;
		--calc-chart: 220px;

		--vip-panel-w: 400px;

		--cta-title: 27px;
		--help-icon: 58px;
		--help-label: 16px;
	}
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
		--brand-size: 24px;
		--logo-h: 62px;
		--btn-h: 60px;
		--btn-px: 32px;
		--btn-size: 17px;
		--rule-w: 52px;
		--hero-title: 52px;
		--hero-lede: 18px;
		--hero-content-w: 560px;
		--hero-pad-y: 64px;
		--hero-media-h: 400px;
		--hero-gap-sm: 28px;
		--hero-gap-lg: 36px;
		--trust-icon: 44px;
		--trust-text: 17px;
		--trust-min-h: 120px;

		--sec-y: 96px;
		--sec-eyebrow: 13px;
		--sec-dash: 26px;
		--sec-title: 40px;
		--sec-head-gap: 24px;
		--goals-grid-gap: 38px;
		--goal-gap: 16px;
		--goal-pad-y: 40px;
		--goal-pad-x: 30px;
		--goal-pad-bottom: 36px;
		--goal-icon-h: 108px;
		--goal-icon-gap: 32px;
		--goal-name: 25px;
		--goal-name-gap: 10px;

		--sp-grid-gap: 20px;
		--sp-card-pad: 28px;
		--sp-card-gap: 22px;
		--sp-icon: 88px;
		--sp-num: 13px;
		--sp-title: 23px;

		--chip-h: 44px;
		--chip-px: 12px;
		--chip-size: 13px;
		--chip-gap: 7px;
		--lo-chips-gap: 34px;
		--lo-note-gap: 30px;
		--lo-link-gap: 30px;
		--lo-arrow-w: 38px;

		--q-title: 26px;
		--q-head-gap: 20px;
		--q-label: 14px;
		--q-label-gap: 28px;
		--q-opt-gap: 12px;
		--q-opt-h: 60px;
		--q-col-gap: 44px;

		--calc-lede: 17px;
		--calc-tab: 16px;
		--calc-pad: 34px;
		--calc-title: 26px;
		--calc-input-h: 54px;
		--calc-input: 17px;
		--calc-headline: 58px;
		--calc-legend: 16px;
		--calc-chart: 240px;
		--calc-breakdown-gap: 36px;
		--calc-band-pad: 34px;

		--cta-title: 30px;
		--cta-pad-y: 50px;
		--help-icon: 64px;
		--footer-text: 16px;
		--footer-gap: 44px;
		--footer-nmls-icon: 48px;
	}
}

@media (min-width: 1080px) {
	:root {
		--gutter: 40px;
		--header-h: 88px;
		--logo-h: 68px;
		--nav-size: 14px;
		--nav-gap: 16px;
		--navcta-px: 20px;
		--btn-h: 60px;
		--btn-px: 26px;
		--btn-size: 16px;
		--rule-w: 48px;
		--hero-title: 48px;
		--hero-lede: 17px;
		--hero-content-w: 450px;
		--hero-pad-y: 64px;
		--hero-pad-right: 24px;
		--hero-min-h: 600px;
		--hero-gap-sm: 26px;
		--hero-gap-lg: 34px;
		--trust-icon: 42px;
		--trust-text: 17px;
		--trust-min-h: 124px;

		--sec-y: 104px;
		--sec-title: 44px;

		--sp-grid-gap: 22px;
		--sp-card-pad: 30px;
		--sp-card-gap: 24px;
		--sp-icon: 92px;
		--sp-copy: 15px;

		/* Ten chips stay on one row from here up — keep padding/gap modest. */
		--chip-h: 48px;
		--chip-px: 14px;
		--chip-size: 14px;
		--chip-gap: 9px;

		--q-title: 28px;
		--q-head-gap: 22px;
		--q-label-gap: 30px;
		--q-opt-h: 62px;
		--q-opt-gap: 14px;
		--q-col-gap: 48px;

		--calc-pad: 32px;
		--calc-title: 24px;
		--calc-label: 13px;
		--calc-input-h: 52px;
		--calc-input: 16px;
		--calc-headline: 52px;
		--calc-legend: 14px;
		--calc-chart: 165px;
		--calc-breakdown-gap: 26px;
		--calc-band-pad: 32px;

		--vip-panel-w: 420px;

		--cta-title: 34px;
		--cta-pad-y: 57px;
		--help-icon: 70px;
		--help-label: 17px;
		--footer-text: 16px;
		--footer-gap: 56px;
		--footer-nmls-icon: 52px;
	}
}

@media (min-width: 1280px) {
	:root {
		--gutter: 48px;
		--header-h: 94px;
		--brand-size: 27px;
		--logo-h: 74px;
		--nav-size: 15px;
		--nav-gap: 22px;
		--navcta-px: 22px;
		--btn-h: 64px;
		--btn-px: 32px;
		--rule-w: 52px;
		--hero-title: 56px;
		--hero-lede: 18px;
		--hero-content-w: 530px;
		--hero-pad-y: 80px;
		--hero-min-h: 640px;
		--hero-gap-sm: 30px;
		--hero-gap-lg: 40px;
		--trust-icon: 40px;
		--trust-text: 16px;
		--trust-gap: 14px;
		--trust-min-h: 130px;

		/* Four across starts here — the grid below switches at the same width. */
		--sec-y: 112px;
		--sec-eyebrow: 14px;
		--sec-dash: 28px;
		--sec-title: 48px;
		--sec-head-gap: 25px;
		--goals-grid-gap: 40px;
		--goal-gap: 18px;
		--goal-pad-y: 42px;
		--goal-pad-x: 20px;
		--goal-pad-bottom: 38px;
		--goal-icon-h: 108px;
		--goal-icon-gap: 34px;
		--goal-name: 24px;
		--goal-name-gap: 12px;
		--goal-copy: 15px;

		--sp-grid-gap: 24px;
		--sp-card-pad: 34px;
		--sp-card-gap: 26px;
		--sp-icon: 100px;
		--sp-title: 24px;

		--chip-h: 50px;
		--chip-px: 15px;
		--chip-size: 14px;
		--chip-gap: 9px;
		--lo-chips-gap: 38px;
		--lo-note-gap: 33px;
		--lo-link-gap: 34px;
		--lo-note: 18px;
		--lo-link: 19px;
		--lo-arrow-w: 42px;

		--q-title: 30px;
		--q-head-gap: 24px;
		--q-label-gap: 32px;
		--q-opt-h: 64px;
		--q-opt-size: 17px;
		--q-col-gap: 56px;

		--calc-pad: 38px;
		--calc-title: 26px;
		--calc-input-h: 54px;
		--calc-input: 17px;
		--calc-headline: 58px;
		--calc-legend: 15px;
		--calc-chart: 190px;
		--calc-breakdown-gap: 30px;
		--calc-band-pad: 36px;

		--vip-panel-w: 440px;

		--cta-title: 37px;
		--cta-pad-y: 64px;
		--help-icon: 76px;
		--footer-text: 17px;
		--footer-disclaimer: 13px;
		--footer-gap: 64px;
		--footer-nmls-icon: 56px;
	}
}

@media (min-width: 1536px) {
	:root {
		--gutter: 56px;
		--header-h: 100px;
		--brand-size: 30px;
		--logo-h: 80px;
		--nav-size: 16px;
		--nav-gap: 32px;
		--navcta-px: 24px;
		--btn-h: 66px;
		--btn-px: 37px;
		--btn-size: 17px;
		--hero-title: 68px;
		--hero-lede: 20px;
		--hero-content-w: 640px;
		--hero-pad-y: 96px;
		--hero-pad-right: 26px;
		--hero-min-h: 690px;
		--hero-gap-sm: 34px;
		--hero-gap-lg: 46px;
		--trust-icon: 46px;
		--trust-text: 19px;
		--trust-min-h: 138px;

		--sec-y: 120px;
		--sec-eyebrow: 15px;
		--sec-dash: 30px;
		--sec-title: 54px;
		--sec-head-gap: 27px;
		--goals-grid-gap: 44px;
		--goal-pad-y: 46px;
		--goal-pad-x: 32px;
		--goal-pad-bottom: 42px;
		--goal-icon-h: 118px;
		--goal-icon-gap: 38px;
		--goal-name: 27px;
		--goal-name-gap: 12px;
		--goal-copy: 17px;

		--sp-card-pad: 38px;
		--sp-card-gap: 30px;
		--sp-icon: 112px;
		--sp-title: 26px;
		--sp-copy: 16px;

		--chip-h: 52px;
		--chip-px: 18px;
		--chip-size: 16px;
		--chip-gap: 12px;
		--lo-chips-gap: 40px;
		--lo-note-gap: 35px;
		--lo-link-gap: 36px;
		--lo-link: 20px;
		--lo-arrow-w: 46px;

		--q-title: 32px;
		--q-head-gap: 26px;
		--q-label-gap: 34px;
		--q-opt-gap: 16px;
		--q-opt-h: 66px;
		--q-col-gap: 72px;

		--calc-lede: 18px;
		--calc-tab: 17px;
		--calc-pad: 46px;
		--calc-title: 29px;
		--calc-label: 14px;
		--calc-input-h: 58px;
		--calc-input: 18px;
		--calc-headline: 68px;
		--calc-legend: 17px;
		--calc-chart: 260px;
		--calc-breakdown-gap: 36px;
		--calc-band-pad: 42px;

		--vip-panel-w: 460px;

		--cta-title: 40px;
		--cta-pad-y: 71px;
		--help-icon: 84px;
		--help-label: 18px;
		--footer-text: 18px;
		--footer-gap: 72px;
		--footer-nmls-icon: 60px;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--body);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

h1 {
	font-family: var(--display);
	color: var(--ink);
	font-weight: 500;
	margin: 0;
	letter-spacing: -0.012em;
}

p {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 16px;
	top: 16px;
	z-index: 999;
	background: var(--navy);
	color: #fff;
	padding: 12px 20px;
}

/* The bronze rule under the hero headline. */
.rule-gold {
	width: var(--rule-w);
	height: 3px;
	background: var(--gold);
	border: 0;
	margin: 0;
	flex: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-h);
	padding-inline: var(--btn-px);
	border-radius: var(--radius);
	font-size: var(--btn-size);
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
		border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn--navy {
	background: var(--navy);
	color: #fff;
	border: 1px solid var(--navy);
}

.btn--navy:hover {
	background: #032f5b;
	border-color: #032f5b;
}

.btn--navy-outline {
	background: transparent;
	color: var(--navy);
	border: 1px solid var(--navy);
}

.btn--navy-outline:hover {
	background: var(--navy);
	color: #fff;
}

.btn--gold-outline {
	border: 1px solid var(--gold);
	color: var(--gold);
	background: transparent;
}

.btn--gold-outline:hover {
	background: var(--gold);
	color: #fff;
}

.btn--gold-fill {
	background: var(--gold-fill);
	border: 1px solid var(--gold-fill);
	color: #fff;
}

.btn--gold-fill:hover {
	background: var(--gold-fill-strong);
	border-color: var(--gold-fill-strong);
}

.btn--cream {
	background: var(--cream);
	border: 1px solid var(--cream);
	color: var(--navy);
}

.btn--cream:hover {
	background: var(--white);
	border-color: var(--white);
}

.btn--white-outline {
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: #fff;
	background: transparent;
}

.btn--white-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

.btn--sm {
	height: 54px;
	padding-inline: var(--navcta-px);
	font-size: var(--navcta-size);
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--white);
	transition: box-shadow 0.3s var(--ease);
}

.site-header.is-stuck {
	box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(1, 34, 67, 0.35);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}

.header-actions {
	display: none;
	align-items: center;
	gap: 18px;
	flex: none;
}
/* Language switcher — globe trigger + quiet dropdown (Ahrefs / JetBrains pattern). */
.lang-switch {
	position: relative;
}

.lang-switch__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: #16181c;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 0.25s var(--ease);
}

.lang-switch__trigger:hover,
.lang-switch.is-open .lang-switch__trigger {
	color: var(--gold);
}

.lang-switch__icon {
	display: inline-flex;
	flex: none;
}

.lang-switch__icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lang-switch__current {
	line-height: 1;
}

.lang-switch__caret {
	display: inline-flex;
	flex: none;
	transition: transform 0.32s var(--ease);
}

.lang-switch__caret svg {
	width: 10px;
	height: 6px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lang-switch.is-open .lang-switch__caret {
	transform: rotate(180deg);
}

.lang-switch__menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 70;
	min-width: 196px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--white);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-panel);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top right;
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

.lang-switch.is-open .lang-switch__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.lang-switch__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink);
	font-family: var(--sans);
	text-align: left;
	cursor: pointer;
	transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.lang-switch__option:hover {
	background: rgba(1, 34, 67, 0.04);
}

.lang-switch__option-main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lang-switch__option-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.lang-switch__option-code {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: rgba(1, 34, 67, 0.42);
	line-height: 1;
}

.lang-switch__check {
	display: inline-flex;
	opacity: 0;
	transform: scale(0.86);
	transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.lang-switch__check svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lang-switch__option.is-active {
	background: rgba(184, 113, 15, 0.08);
}

.lang-switch__option.is-active .lang-switch__option-name {
	color: var(--navy);
}

.lang-switch__option.is-active .lang-switch__check {
	opacity: 1;
	transform: scale(1);
}

.lang-switch__option:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

.lang-switch--mobile {
	display: none;
	width: 100%;
	margin-top: 22px;
}

.lang-switch--mobile .lang-switch__trigger {
	width: 100%;
	justify-content: center;
	min-height: 48px;
	border: 1px solid var(--line);
	background: #fff;
	font-size: 14px;
}

.lang-switch--mobile .lang-switch__menu {
	left: 0;
	right: 0;
	min-width: 0;
	transform-origin: top center;
}

.mobile-nav.is-open .lang-switch--mobile {
	display: block;
}

/* Light / dark switch — sun and moon both on show; the thumb sits behind the
   active one. Its position comes from html[data-theme], so it is right from
   the first paint; theme.js only flips the attribute. */
.theme-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: none;
	width: 50px;
	height: 28px;
	padding: 0 1px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--cream);
	cursor: pointer;
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.theme-switch:hover {
	border-color: var(--gold);
}

.theme-switch__thumb {
	position: absolute;
	top: 2px;
	left: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--navy);
	box-shadow: 0 1px 3px rgba(1, 34, 67, 0.28);
	transition: transform 0.32s var(--ease), background-color 0.32s var(--ease);
}

.theme-switch__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: #6b7178;
	transition: color 0.32s var(--ease);
}

.theme-switch__icon svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.theme-switch__icon--light {
	color: #fff;
}

html[data-theme="dark"] .theme-switch__thumb {
	transform: translateX(24px);
}

/* The copy that sits in the header bar below the full-nav breakpoint. */
.theme-switch--bar {
	width: 58px;
	height: 32px;
	margin-right: -8px;
}

.theme-switch--bar .theme-switch__thumb {
	width: 26px;
	height: 26px;
}

.theme-switch--bar .theme-switch__icon {
	width: 26px;
	height: 26px;
}

.theme-switch--bar .theme-switch__icon svg {
	width: 15px;
	height: 15px;
}

html[data-theme="dark"] .theme-switch--bar .theme-switch__thumb {
	transform: translateX(28px);
}

@media (prefers-reduced-motion: reduce) {
	.theme-switch__thumb,
	.theme-switch__icon {
		transition: none;
	}
}

/* For the frame the mode flips, colours swap at once instead of each element
   easing on its own timing. */
html.is-theme-switching *:not(.theme-switch__thumb):not(.theme-switch__icon),
html.is-theme-switching *::before,
html.is-theme-switching *::after {
	transition: none !important;
}

.brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
}

.brand__logo {
	display: block;
	height: var(--logo-h);
	width: auto;
}

/* Header only: the white-text logo is the dark-mode swap (see dark.css). */
.site-header .brand__logo--dark {
	display: none;
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: var(--nav-gap);
}

.nav-item {
	position: relative;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-block: 10px;
	font-size: var(--nav-size);
	font-weight: 500;
	color: #16181c;
	white-space: nowrap;
	position: relative;
	transition: color 0.25s var(--ease);
}

.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.32s var(--ease);
}

.nav-link .caret {
	width: 11px;
	height: 7px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	transition: transform 0.32s var(--ease);
}

.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link,
.nav-item.is-current > .nav-link,
.nav-link[aria-current="page"] {
	color: var(--gold);
}

.nav-item:hover > .nav-link::after,
.nav-item:focus-within > .nav-link::after,
.nav-item.is-current > .nav-link::after,
.nav-link[aria-current="page"]::after {
	transform: scaleX(1);
}

.nav-item:hover > .nav-link .caret,
.nav-item:focus-within > .nav-link .caret {
	transform: rotate(180deg);
}

/* --- Dropdown panels ------------------------------------------------- */

.dropdown {
	position: absolute;
	top: calc(100% + 14px);
	background: var(--white);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-panel);
	padding-block: 12px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown--icons {
	width: 258px;
	left: 50%;
	margin-left: -129px;
}

.dropdown__link {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 13px 26px;
	font-size: 16px;
	color: #16181c;
	transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}

.dropdown__link img {
	width: 26px;
	height: 26px;
	flex: none;
	object-fit: contain;
}

.dropdown__link:hover {
	background: var(--cream);
	color: var(--gold);
}

.dropdown--columns {
	width: 480px;
	left: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	padding: 26px 22px 22px;
}

.dropdown__heading {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 8px;
	padding-inline: 12px;
}

.dropdown--columns .dropdown__link {
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 15px;
}

/* --- Mobile ---------------------------------------------------------- */

.nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	color: var(--navy);
	flex: none;
}

.nav-toggle svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
	stroke-linecap: round;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
	display: block;
}

.mobile-nav {
	display: none;
	border-top: 1px solid var(--line);
	background: var(--white);
	max-height: 70vh; /* scroll container only — cannot affect page layout */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 8px 0 32px;
}

.mobile-nav__link,
.mobile-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 16px;
	padding-block: 16px;
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.mobile-nav__link.is-current,
.mobile-nav__link[aria-current="page"],
.mobile-nav__toggle.is-current {
	color: var(--gold);
}

.mobile-nav__toggle .caret {
	width: 12px;
	height: 8px;
	fill: none;
	stroke: var(--gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	transition: transform 0.3s var(--ease);
}

.mobile-nav__toggle[aria-expanded="true"] .caret {
	transform: rotate(180deg);
}

.mobile-nav__sub {
	display: none;
	list-style: none;
	margin: 0;
	padding: 8px 0 16px 16px;
}

.mobile-nav__sub.is-open {
	display: block;
}

.mobile-nav__sub a {
	display: block;
	padding-block: 10px;
	color: #6b7178;
	font-size: 15px;
}

.mobile-nav__cta {
	margin-top: 24px;
	width: 100%;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--cream);
}

.hero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-block: var(--hero-pad-y);
	padding-left: var(--gutter);
	padding-right: var(--hero-pad-right);
	min-height: var(--hero-min-h);
}

/* Every child is capped to the same fixed measure, so the text block never
   stretches with the viewport — only the cream field around it does. */
.hero__panel > * {
	width: 100%;
	max-width: var(--hero-content-w);
}

.hero__title {
	/* Scales down on narrow phones so each phrase stays on one line. */
	font-size: min(34px, 8.4vw);
	line-height: 1.12;
	color: var(--ink);
}

@media (min-width: 600px) {
	.hero__title {
		font-size: 46px;
	}
}

@media (min-width: 768px) {
	.hero__title {
		font-size: 52px;
	}
}

@media (min-width: 1080px) {
	.hero__title {
		font-size: 44px;
	}
}

@media (min-width: 1280px) {
	.hero__title {
		font-size: 52px;
	}
}

@media (min-width: 1536px) {
	.hero__title {
		font-size: 60px;
	}
}

/* Must beat the `.hero__panel > *` width rule above. */
.hero .rule-gold {
	width: var(--rule-w);
	margin-top: var(--hero-gap-sm);
}

.hero__lede {
	margin-top: var(--hero-gap-sm);
	font-size: var(--hero-lede);
	line-height: 1.6;
	color: #3f4348;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: var(--hero-gap-lg);
}

.hero__media {
	position: relative;
	height: var(--hero-media-h);
	overflow: hidden;
}

.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 62%;
}

/* Two-column split. The panel keeps the container's left alignment plus the
   20px optical inset used in the reference. */
@media (min-width: 1080px) {
	.hero {
		grid-template-columns: 48.2% 51.8%;
		align-items: stretch;
	}

	/* Aligns the hero text with the header logo (+20px optical inset).
	   Percentages on a grid item resolve against its grid area, which is
	   48.2% of the page — so `100% * 1000 / 964` is half the page width,
	   i.e. the same value as `(100vw - 1540px) / 2` but immune to the
	   scrollbar-width discrepancy that affects 100vw. */
	.hero__panel {
		padding-left: max(
			var(--gutter),
			calc(100% * 1000 / 964 - var(--container) / 2 + var(--gutter) + 20px)
		);
	}

	.hero__media {
		height: auto;
		min-height: var(--hero-min-h);
	}
}

/* ==========================================================================
   Trust bar
   ========================================================================== */

.trustbar {
	background: radial-gradient(120% 200% at 50% 0%, var(--navy-lift) 0%, var(--navy) 62%);
	color: #fff;
}

.trustbar__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	min-height: var(--trust-min-h);
}

.trustbar__item {
	display: flex;
	align-items: center;
	gap: var(--trust-gap);
	padding-block: 18px;
	position: relative;
}

.trustbar__item + .trustbar__item {
	border-top: 1px solid var(--line-navy);
}

.trustbar__item img {
	width: var(--trust-icon);
	height: var(--trust-icon);
	object-fit: contain;
	flex: none;
}

.trustbar__item span {
	font-size: var(--trust-text);
	line-height: 1.3;
	color: #fff;
}

@media (min-width: 768px) {
	.trustbar__grid {
		grid-template-columns: 1fr 1fr;
	}

	.trustbar__item {
		justify-content: center;
		padding: 24px 16px;
		border-top: 0;
	}

	.trustbar__item + .trustbar__item {
		border-top: 0;
	}

	.trustbar__item:nth-child(n + 3)::after {
		content: "";
		position: absolute;
		top: 0;
		left: 8%;
		right: 8%;
		height: 1px;
		background: var(--line-navy);
	}

	.trustbar__item:nth-child(even)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -31px;
		width: 1px;
		height: 62px;
		background: var(--line-navy);
	}
}

/* Four across only once each cell can hold "Personalized Loan Strategy"
   on a single line — below that it stays 2×2. */
@media (min-width: 1280px) {
	.trustbar__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.trustbar__item {
		padding-inline: 12px;
	}

	.trustbar__item:nth-child(n + 3)::after {
		display: none;
	}

	.trustbar__item:nth-child(even)::before,
	.trustbar__item + .trustbar__item::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -31px;
		width: 1px;
		height: 62px;
		background: var(--line-navy);
	}
}

/* ==========================================================================
   Shared centred section head (eyebrow + display heading)
   ========================================================================== */

.section-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-size: var(--sec-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.section-eyebrow::before,
.section-eyebrow::after {
	content: "";
	width: var(--sec-dash);
	height: 2px;
	background: currentColor;
	flex: none;
}

/* Left-aligned variant used inside a column — no flanking rules. */
.section-eyebrow--plain {
	justify-content: flex-start;
}

.section-eyebrow--plain::before,
.section-eyebrow--plain::after {
	display: none;
}

/* Left-aligned with only a leading rule — the closing-band variant. */
.section-eyebrow--lead {
	justify-content: flex-start;
}

.section-eyebrow--lead::after {
	display: none;
}

.section-heading {
	font-family: var(--display);
	font-size: var(--sec-title);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.012em;
	color: var(--ink);
	margin: var(--sec-head-gap) 0 0;
}

/* ==========================================================================
   Mortgage goals — "Where Are You Headed?"
   ========================================================================== */

.goals {
	background: var(--white);
	padding-top: var(--sec-y);
	padding-bottom: calc(var(--sec-y) - 24px);
	text-align: center;
}

.goals__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--goal-gap);
	margin-top: var(--goals-grid-gap);
	text-align: initial;
}

/* --- Card ------------------------------------------------------------ */

.goal {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--goal-card-bg);
	border: 1px solid #ece7e1;
	border-radius: 4px;
	padding: var(--goal-pad-y) var(--goal-pad-x) var(--goal-pad-bottom);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.goal:hover {
	border-color: #d9c9a8;
	box-shadow: 0 14px 34px -18px rgba(1, 34, 67, 0.25);
	transform: translateY(-3px);
}

/* Fixed-height box: the four illustrations have different aspect ratios, so
   they are bottom-aligned inside a common frame to keep the row on a baseline. */
.goal__media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: var(--goal-icon-h);
	margin-bottom: var(--goal-icon-gap);
}

.goal__media img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.goal__name {
	font-family: var(--display);
	font-size: var(--goal-name);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.008em;
	color: var(--ink);
	margin: 0 0 var(--goal-name-gap);
	/* Reserve 2 lines so titles of different length keep copy tops aligned. */
	min-height: calc(1.2em * 2);
	width: 100%;
}

.goal__copy {
	font-size: var(--goal-copy);
	line-height: 1.75;
	color: #4a4e54;
	margin: 0;
	width: 100%;
}

@media (min-width: 600px) {
	.goals__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1280px) {
	.goals__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Loan options — "A Full Spectrum of Loan Programs"
   ========================================================================== */

.loan-options {
	background: var(--cream);
	padding-block: var(--sec-y);
	text-align: center;
}

.loan-chips {
	list-style: none;
	margin: var(--lo-chips-gap) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--chip-gap);
}

@media (min-width: 768px) {
	.loan-chips {
		flex-wrap: nowrap;
	}
}

.loan-chip {
	display: inline-flex;
	align-items: center;
	height: var(--chip-h);
	padding-inline: var(--chip-px);
	border: 1px solid #8f9d80;
	border-radius: 999px;
	font-size: var(--chip-size);
	line-height: 1;
	color: #3f4c34;
	white-space: nowrap;
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
		color 0.25s var(--ease);
}

.loan-chip:hover {
	border-color: #5b6b4e;
	background: rgba(91, 107, 78, 0.07);
	color: #2f3a26;
}

.loan-options__note {
	margin-top: var(--lo-note-gap);
	font-size: var(--lo-note);
	line-height: 1.6;
	color: var(--body);
}

.loan-options__link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: var(--lo-link-gap);
	font-size: var(--lo-link);
	color: var(--gold);
	transition: color 0.25s var(--ease);
}

.loan-options__link svg {
	width: var(--lo-arrow-w);
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s var(--ease);
}

.loan-options__link:hover {
	color: var(--gold-strong, #96590a);
}

.loan-options__link:hover svg {
	transform: translateX(6px);
}

/* ==========================================================================
   Qualify — "What Are You Buying?"
   ========================================================================== */

.qualify {
	background: var(--white);
	padding-top: calc(var(--sec-y) - 24px);
	padding-bottom: 0;
}

.qualify__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--q-col-gap);
	align-items: start;
}

.qualify__body {
	min-width: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.qualify__field {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0; /* fieldset defaults to min-content; without this the grid overflows */
}

.qualify__required {
	color: #d64545;
}

.qualify-wizard {
	margin: 0;
	min-width: 0;
}

.qualify-wizard__stage {
	display: grid;
	grid-template-rows: auto minmax(var(--q-options-min-h), auto);
	gap: 0;
	min-width: 0;
	margin-top: var(--q-head-gap);
}

.qualify-wizard__intro-slot {
	min-width: 0;
}

.qualify-wizard__heading {
	font-family: var(--sans);
	font-size: var(--q-title);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: 0.01em;
	min-height: var(--q-heading-min-h);
	max-width: 100%;
	margin: 0;
	white-space: nowrap;
}

.qualify-wizard__legend {
	display: flex;
	align-items: center;
	gap: 2px;
	min-height: var(--q-legend-min-h);
	margin: var(--q-intro-gap) 0 0;
	font-size: var(--q-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	color: #6b7178;
}

.qualify-wizard__legend:has([data-qualify-legend-text]:empty) {
	visibility: hidden;
}

.qualify-wizard__options-slot {
	position: relative;
	min-height: var(--q-options-min-h);
	margin-top: 16px;
}

.qualify__step {
	animation: qualify-step-in 0.3s var(--ease) both;
}

.qualify__step[hidden] {
	display: none;
}

@keyframes qualify-step-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.qualify__options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--q-opt-gap);
}

.qualify__options--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qualify__options--cols-2,
.qualify__options--grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qualify__options--grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qualify__options--grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qualify__options--grid-rate {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: row;
}

@media (max-width: 767px) {
	.qualify__options--grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
	}

	.qualify__options--grid-rate {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/* Real radios, visually replaced by the button face. */
.qualify-option {
	position: relative;
	display: block;
}

.qualify-option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.qualify-option span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--q-opt-h);
	padding-inline: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	font-family: var(--sans);
	font-size: var(--q-opt-size);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: #55b4c9;
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
		color 0.25s var(--ease);
}

.qualify-option input:hover + span {
	border-color: #55b4c9;
}

.qualify-option input:focus-visible + span {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.qualify-option input:checked + span {
	background: var(--white);
	border-color: var(--line);
	color: #55b4c9;
}

.qualify__options:has(input:checked) .qualify-option input:not(:checked) + span {
	border-color: #55b4c9;
	border-width: 2px;
}

/* Click hint: outline cursor arrives, presses, then the option hovers. */
.qualify-tap-guide {
	position: absolute;
	z-index: 3;
	width: 32px;
	height: 32px;
	color: var(--navy);
	pointer-events: none;
}

.qualify-tap-guide[hidden] {
	display: none;
}

.qualify-tap-guide__actor {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	animation: qualify-cursor-arrive 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.qualify-tap-guide__cursor {
	display: block;
	width: 28px;
	height: 28px;
	transform-origin: 6px 4px;
	filter: drop-shadow(0 0 0.8px #fff) drop-shadow(0 1px 1px rgba(1, 34, 67, 0.16));
	animation: qualify-cursor-press 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.qualify-tap-guide__ripple {
	position: absolute;
	left: 6px;
	top: 4px;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border: 1.5px solid #55b4c9;
	border-radius: 50%;
	opacity: 0;
	animation: qualify-cursor-ripple 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.qualify-option.is-hint-target span {
	animation: qualify-hint-border 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes qualify-cursor-arrive {
	0% {
		transform: translate(22px, 18px);
	}

	30% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(0, 0);
	}
}

@keyframes qualify-cursor-press {
	0%,
	32% {
		transform: scale(1);
	}

	38% {
		transform: translate(0, 2px) scale(0.88);
	}

	48%,
	100% {
		transform: scale(1);
	}
}

@keyframes qualify-cursor-ripple {
	0%,
	36% {
		opacity: 0;
		transform: scale(0.25);
	}

	42% {
		opacity: 0.7;
	}

	66% {
		opacity: 0;
		transform: scale(2.4);
	}

	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

@keyframes qualify-hint-border {
	0%,
	38% {
		border-color: var(--line);
	}

	48%,
	78% {
		border-color: #55b4c9;
	}

	92%,
	100% {
		border-color: var(--line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qualify-tap-guide__actor,
	.qualify-tap-guide__cursor,
	.qualify-tap-guide__ripple,
	.qualify-option.is-hint-target span {
		animation: none;
	}

	.qualify-option.is-hint-target span {
		border-color: #55b4c9;
	}
}

.qualify__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--display);
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: color 0.2s var(--ease);
}

.qualify__back:hover {
	color: var(--gold-strong);
}

.qualify__back:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.qualify__notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: var(--radius);
	font-size: 15px;
	line-height: 1.5;
}

.qualify__notice--ok {
	background: rgba(123, 151, 134, 0.14);
	color: var(--sage-strong);
}

.qualify__notice--bad {
	background: rgba(184, 113, 15, 0.12);
	color: var(--gold-strong);
}

.qualify__fields {
	display: grid;
	gap: 16px;
	margin: 0;
}

.qualify-field label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--q-label);
	font-weight: 700;
	color: var(--ink);
}

.qualify-field__required {
	color: #d64545;
}

.qualify-field input,
.qualify-field select {
	width: 100%;
	height: var(--q-opt-h);
	padding: 0 16px;
	font-family: var(--sans);
	font-size: var(--calc-input);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.qualify-field input::placeholder {
	color: #8a8f96;
}

.qualify-field input:focus,
.qualify-field select:focus {
	outline: none;
	border-color: #55b4c9;
	box-shadow: 0 0 0 3px rgba(85, 180, 201, 0.2);
}

.qualify-field__phone {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
}

.qualify-field__phone input {
	height: var(--q-opt-h);
}

/* Searchable phone country-code picker (qualify wizard + contact forms). */
.phone-code-picker {
	position: relative;
	flex-shrink: 0;
}

.phone-code-picker__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--q-opt-h);
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.phone-code-picker__trigger:hover {
	border-color: #55b4c9;
}

.phone-code-picker.is-open .phone-code-picker__trigger,
.phone-code-picker__trigger:focus-visible {
	outline: none;
	border-color: #55b4c9;
	box-shadow: 0 0 0 3px rgba(85, 180, 201, 0.2);
}

.phone-code-picker__flag {
	font-size: 18px;
	line-height: 1;
}

.phone-code-picker__dial {
	min-width: 2.5ch;
}

.phone-code-picker__caret {
	display: flex;
	color: #6b7178;
	transition: transform 0.15s ease;
}

.phone-code-picker.is-open .phone-code-picker__caret {
	transform: rotate(180deg);
}

.phone-code-picker__menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: min(320px, calc(100vw - 48px));
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.phone-code-picker__search-wrap {
	padding-bottom: 6px;
}

.phone-code-picker__search {
	width: 100%;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) - 2px);
	background: #f8fafb;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
}

.phone-code-picker__search:focus {
	outline: none;
	border-color: #55b4c9;
	box-shadow: 0 0 0 3px rgba(85, 180, 201, 0.2);
}

.phone-code-picker__list {
	max-height: 240px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.phone-code-picker__option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: calc(var(--radius) - 2px);
	font-size: 14px;
	cursor: pointer;
}

.phone-code-picker__option:hover,
.phone-code-picker__option.is-highlighted {
	background: rgba(85, 180, 201, 0.12);
}

.phone-code-picker__option.is-selected {
	background: rgba(85, 180, 201, 0.18);
	font-weight: 600;
}

.phone-code-picker__option-flag {
	font-size: 18px;
	line-height: 1;
}

.phone-code-picker__option-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phone-code-picker__option-dial {
	font-variant-numeric: tabular-nums;
	color: #6b7178;
}

.phone-code-picker__empty {
	margin: 8px 0 0;
	padding: 8px 10px;
	font-size: 14px;
	color: #6b7178;
	text-align: center;
}

.qualify__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 160px;
	height: var(--q-opt-h);
	padding-inline: 28px;
	border: 0;
	border-radius: var(--radius);
	background: #55b4c9;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s var(--ease);
}

.qualify__submit:hover {
	background: #449eb1;
}

.qualify__submit:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.qualify__nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}

.qualify__nav .qualify__back {
	margin-top: 0;
}

.qualify__nav .qualify__submit {
	grid-column: 2;
	justify-self: center;
}

.qualify__media {
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--cream);
}

.qualify__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 1080px) {
	.qualify__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Mortgage calculator — "Estimate Your Monthly Payment"
   ========================================================================== */

.calc {
	background: var(--cream);
	padding-block: var(--sec-y);
	text-align: center;
}

.calc__lede {
	margin: 18px auto 0;
	max-width: 62ch;
	font-size: var(--calc-lede);
	line-height: 1.6;
	color: var(--body);
}

/* --- Mode tabs -------------------------------------------------------- */

.calc__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 32px;
	border-bottom: 1px solid var(--line);
}

.calc__tab {
	padding: 16px 28px;
	font-size: var(--calc-tab);
	font-weight: 500;
	color: #6b7178;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.calc__tab:disabled {
	cursor: not-allowed;
	opacity: 0.75;
}

.calc__tab.is-active {
	background: var(--navy);
	border-bottom-color: var(--gold-fill);
	color: #fff;
	border-radius: var(--radius) var(--radius) 0 0;
}

/* --- Panel ------------------------------------------------------------ */

.calc__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--calc-pad);
	margin-top: 32px;
	padding: var(--calc-pad);
	background: #fcfbf9;
	border: 1px solid var(--line);
	border-radius: 6px;
	text-align: initial;
}

.calc__title {
	font-family: var(--display);
	font-size: var(--calc-title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 24px;
}

/* --- Inputs ----------------------------------------------------------- */

.calc__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.calc-field label {
	display: block;
	margin-bottom: 5px;
	font-size: var(--calc-label);
	font-weight: 700;
	color: var(--ink);
}

/* Inputs share a line across a row even when one label wraps (a narrow
   column, browser zoom, a longer translation): the label takes the spare
   height and sets its text at the bottom, right above its input. */
.calc-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.calc-field > label {
	display: flex;
	flex: 1 0 auto;
	align-items: flex-end;
}

/* The input wrappers carry flex: 1 for split rows; here they keep their own
   height so all the spare goes to the label. */
.calc-field > label ~ * {
	flex-grow: 0;
}

.calc-field input,
.calc-field select {
	width: 100%;
	height: var(--calc-input-h);
	padding-inline: 12px;
	font-family: var(--sans);
	font-size: var(--calc-input);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.calc-field input:focus,
.calc-field select:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.13);
}

/* Amount + percent share one bordered box, split by a hairline. */
.calc-field__split {
	display: grid;
	grid-template-columns: 1fr 92px;
}

.calc-field__split > input:first-child,
.calc-field__split > :first-child input {
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
}

.calc-field__split > input:last-child,
.calc-field__split > :last-child input {
	border-radius: 0 var(--radius) var(--radius) 0;
	text-align: center;
}

.calc-field__split input:focus {
	position: relative;
	z-index: 1;
}

.calc-field__select {
	position: relative;
}

.calc-field__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
}

.calc-field__select .caret {
	position: absolute;
	right: 14px;
	top: 50%;
	margin-top: -4px;
	width: 13px;
	height: 8px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.calc-field__suffixed {
	display: flex;
	align-items: center;
	height: var(--calc-input-h);
	padding-right: 10px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.calc-field__suffixed input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding-right: 8px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.calc-field__suffixed input:focus {
	box-shadow: none;
}

.calc-field__suffixed:focus-within {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.13);
}

.calc-field__suffixed > span {
	flex: none;
	font-size: 14px;
	color: #6b7178;
	white-space: nowrap;
}

/* Fixed units: the "$" and "%" are drawn beside the value, never part of it,
   so they cannot be deleted, selected or clicked — a click falls through to
   the input. Muted like the "/ year" suffixes so the digits read first. */
.calc-money,
.calc-pct,
.rc-money,
.rc-pct {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.calc-field__suffixed > span.calc-money,
.rc-field__suffixed > span.rc-money {
	flex: 1 1 auto;
	height: 100%;
}

.calc-money::before,
.rc-money::before,
.calc-pct::after,
.rc-pct::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--sans);
	font-size: var(--calc-input);
	color: #8a9098;
	pointer-events: none;
	user-select: none;
}

.calc-money::before,
.rc-money::before {
	content: "$";
	left: 12px;
}

.calc-pct::after,
.rc-pct::after {
	content: "%";
	right: 12px;
}

.calc-field .calc-money input,
.rc-field .rc-money input {
	padding-left: 24px;
}

.calc-field .calc-pct input,
.rc-field .rc-pct input {
	padding-right: 30px;
}

.calc-field__split .calc-pct::after {
	right: 10px;
}

.calc-field__split .calc-pct input {
	padding-right: 22px;
}

.calc-field__hint {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #8a9098;
}

/* --- Taxes / insurance / HOA disclosure -------------------------------- */

.calc__extras {
	margin-top: 16px;
}

.calc__extras summary {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	font-size: var(--calc-input);
	font-weight: 700;
	color: var(--ink);
}

.calc__extras summary::-webkit-details-marker {
	display: none;
}

.calc__extras summary .caret {
	width: 14px;
	height: 9px;
	flex: none;
	fill: none;
	stroke: var(--gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s var(--ease);
}

.calc__extras[open] summary .caret {
	transform: rotate(180deg);
}

/* The hairline that runs from the label to the edge of the column. */
.calc__extras summary::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.calc__extras-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 14px;
}

.calc__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 16px;
}

.calc__reset {
	font-size: var(--calc-input);
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.25s var(--ease);
}

.calc__reset:hover {
	color: var(--gold-strong);
}

/* --- Result ------------------------------------------------------------ */

.calc__headline {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--display);
	font-size: var(--calc-headline);
	line-height: 1.05;
	color: var(--ink);
}

.calc__headline [data-calc-out] {
	font-family: var(--sans);
	font-weight: 800;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	letter-spacing: -0.01em;
	line-height: 1;
}

.calc__headline em {
	font-family: var(--sans);
	font-style: normal;
	font-size: var(--calc-legend);
	color: var(--body);
}

.calc__breakdown {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
	margin-top: 28px;
}

.calc__chart {
	width: var(--calc-chart);
	height: var(--calc-chart);
	margin-inline: auto;
}

.calc__chart canvas {
	width: 100% !important;
	height: 100% !important;
}

.calc__legend {
	margin: 0;
	min-width: 0;
}

.calc__legend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 9px;
}

.calc__legend dt {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--calc-legend);
	color: var(--body);
}

.calc__legend dd {
	margin: 0;
	font-size: var(--calc-legend);
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	color: var(--ink);
	white-space: nowrap;
}

.calc__swatch {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	flex: none;
}

.calc__legend-row--total {
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.calc__legend-row--total dt,
.calc__legend-row--total dd {
	font-weight: 700;
	color: var(--ink);
}

.calc__note {
	margin-top: 22px;
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	color: #6b7178;
}

/* --- Closing band ------------------------------------------------------ */

.calc__cta {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	gap: 22px;
	margin-top: 24px;
	padding: var(--calc-band-pad);
	background: var(--navy);
	border-radius: 6px;
	text-align: center;
}

.calc__cta-icon {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border: 1px solid var(--gold-light);
	border-radius: 50%;
	flex: none;
}

.calc__cta-icon svg {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: var(--gold-light);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.calc__cta-copy h3 {
	font-family: var(--display);
	font-size: var(--calc-title);
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 8px;
}

.calc__cta-copy p {
	font-size: var(--calc-legend);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
}

.calc__cta-note {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
	text-align: initial;
}

.calc__cta-note svg {
	width: 26px;
	height: 26px;
	flex: none;
	fill: none;
	stroke: var(--gold-light);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Layout steps ------------------------------------------------------ */

@media (min-width: 600px) {
	.calc__grid {
		grid-template-columns: 1fr 1fr;
	}

	.calc__extras-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 768px) {
	.calc__breakdown {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--calc-breakdown-gap);
	}

	.calc__chart {
		margin-inline: 0;
	}

	.calc__cta {
		grid-template-columns: auto minmax(0, 1fr);
		justify-items: start;
		text-align: initial;
		gap: 22px 26px;
		align-items: center;
	}
}

@media (min-width: 1080px) {
	.calc__panel {
		grid-template-columns: 1fr 1px 1fr;
		gap: 0;
		padding: 0;
	}

	/* All three cells are placed explicitly — the divider is a pseudo-element
	   of the grid container, so it would otherwise take the first slot. */
	.calc__form {
		grid-area: 1 / 1;
		padding: var(--calc-pad);
	}

	.calc__panel::before {
		content: "";
		grid-area: 1 / 2;
		background: var(--line);
	}

	.calc__result {
		grid-area: 1 / 3;
		padding: var(--calc-pad);
	}

	.calc__cta {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.calc__cta .btn {
		justify-self: end;
	}

	.calc__cta-note {
		padding-left: 26px;
		border-left: 1px solid var(--line-navy);
	}
}

/* ==========================================================================
   Calculator page — payment, comparison and net proceeds as tab panels.

   Each tool still renders its own <section>, so the shell only supplies the
   page heading and the tab bar, and cancels the top padding the sections
   would otherwise repeat underneath it.
   ========================================================================== */

.calc-page {
	background: var(--cream);
	padding-block: 36px;
	text-align: center;
	scroll-margin-top: var(--header-h);
}

.calc-page__lede {
	margin: 14px auto 0;
	max-width: 68ch;
	font-size: var(--calc-lede);
	line-height: 1.6;
	color: var(--body);
}

.calc-page__suite {
	margin-top: 28px;
	scroll-margin-top: calc(var(--header-h) + 8px);
}

.calc-page__stage {
	display: flex;
	flex-direction: column;
	background: #fcfbf9;
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 6px 6px;
	overflow: hidden;
	text-align: initial;
}

.calc-page__workspace {
	--calc-pad: 20px;
	--calc-input-h: 38px;
	--calc-input: 15px;
	--calc-chart: 168px;
	--calc-headline: 44px;
}

.calc-page__panel[hidden] {
	display: none;
}

.calc-page__workspace .container {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

.calc-page__workspace .calc,
.calc-page__workspace .rc,
.calc-page__workspace .np {
	padding: 0;
	background: transparent;
}

.calc-page__workspace .calc__panel,
.calc-page__workspace .np__panel {
	margin-top: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.calc-page__workspace .rc__form {
	margin-top: 0;
	gap: 0;
}

.calc-page__workspace .rc__panel {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.calc-page__workspace .rc__panel--results {
	border-top: 1px solid var(--line);
}

.calc-page__workspace .rc__title {
	margin-bottom: 4px;
}

.calc-page__workspace .rc__scenarios {
	margin-top: 16px;
}

.calc-page__workspace .rc-scenario__body {
	gap: 8px;
	padding: 10px 12px;
}

.calc-page__workspace .rc-scenario__pair {
	gap: 8px;
}

.calc-page__workspace .rc-table tbody th,
.calc-page__workspace .rc-table tbody td {
	padding-block: 8px;
}

.calc-page__workspace .calc__title {
	margin-bottom: 16px;
}

.calc-page__workspace .rc__actions {
	padding: 16px var(--calc-pad) 20px;
	margin: 0;
	border-top: 1px solid var(--line);
}

.calc-page .calc__cta {
	margin-top: 28px;
}

@media (min-width: 768px) {
	.calc-page__workspace {
		--calc-pad: 24px;
		--calc-input-h: 40px;
		--calc-input: 15px;
		--calc-chart: 180px;
		--calc-headline: 48px;
	}
}

@media (min-width: 1080px) {
	.calc-page {
		padding-block: 48px;
	}

	.calc-page__workspace {
		--calc-pad: 28px;
		--calc-chart: 200px;
	}
}

/* ==========================================================================
   Advanced calculation — the front page's hand-off to the calculator page.

   A light strip between the cream calculator section and the dark VIP photo
   below it. White rather than navy: the calculator already closes on a navy
   CTA card, and a third dark block in a row flattens the whole stretch.
   ========================================================================== */

.calc-more {
	background: var(--white);
	border-block: 1px solid var(--line);
	padding-block: 36px;
}

.calc-more__inner {
	display: grid;
	gap: 22px;
	justify-items: center;
	text-align: center;
}

.calc-more__eyebrow {
	font-size: var(--sec-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.calc-more__heading {
	margin-top: 10px;
	font-family: var(--display);
	font-size: clamp(23px, 3vw, 29px);
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}

.calc-more__lede {
	margin-top: 10px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
}

.calc-more .btn {
	flex: none;
}

@media (min-width: 1080px) {
	.calc-more {
		padding-block: 42px;
	}

	.calc-more__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 40px;
		justify-items: start;
		text-align: left;
	}
}

/* ==========================================================================
   Rate comparison — "Compare Mortgage Rate Options"

   Sits directly under the payment calculator and shares its shell: same tab
   bar, same field chrome, same panel surface. What is new here is the scenario
   column — a card whose accent colour is passed in from PHP as --rc-accent so
   the header bar, border tint and table chip all stay in sync when a scenario
   is added, duplicated or removed.
   ========================================================================== */

.rc {
	--rc-cell: 15px;
	--rc-panel-gap: 18px;
	background: var(--cream);
	padding-block: var(--sec-y);
	text-align: center;
}

.rc__lede {
	margin: 18px auto 0;
	max-width: 68ch;
	font-size: var(--calc-lede);
	line-height: 1.6;
	color: var(--body);
}

/* --- Mode tabs -------------------------------------------------------- */

.rc__tabs,
.calc-page__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 32px;
	border-bottom: 1px solid var(--line);
}

.calc-page__suite > .calc-page__tabs {
	flex: none;
	justify-content: center;
	gap: 8px;
	margin-top: 0;
	padding: 0;
	background: transparent;
}

.calc-page__suite .calc-page__tab {
	padding: 11px 18px;
	margin-bottom: -1px;
	border: 1px solid var(--line);
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--white);
	color: #6b7178;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
		background-color 0.25s var(--ease);
}

.calc-page__suite .calc-page__tab:not(.is-active):hover {
	color: var(--gold);
	border-color: var(--gold);
}

.calc-page__suite .calc-page__tab.is-active {
	background: var(--navy);
	border-color: var(--navy);
	border-bottom-color: var(--navy);
	color: #fff;
}

.rc__tab,
.calc-page__tab {
	display: inline-flex;
	align-items: center;
	padding: 16px 28px;
	font-size: var(--calc-tab);
	font-weight: 500;
	color: #6b7178;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.rc__tab:disabled,
.calc-page__tab:disabled {
	cursor: not-allowed;
	opacity: 0.75;
}

a.rc__tab:hover,
.calc-page__tab:not(.is-active):hover {
	color: var(--gold);
}

.rc__tab.is-active,
.calc-page__tab.is-active {
	background: var(--navy);
	border-bottom-color: var(--gold-fill);
	color: #fff;
	border-radius: var(--radius) var(--radius) 0 0;
}

/* Arriving at #rate-compare switches tabs on load; fading the active tab's
   background would show the wrong tab highlighted for a moment, so only the
   label colour transitions here. */
.calc-page__tab {
	transition: color 0.25s var(--ease);
}

.calc-page__suite .calc-page__tabs:not(.has-switched) .calc-page__tab:not(.is-active) {
	animation: calc-tab-idle 1.8s ease-in-out infinite;
}

.calc-page__suite .calc-page__tabs:not(.has-switched) .calc-page__tab:not(.is-active):hover {
	animation: none;
}

@keyframes calc-tab-idle {
	0%,
	100% {
		border-color: var(--line);
		box-shadow: none;
	}

	50% {
		border-color: var(--gold);
		box-shadow: inset 0 0 0 1px var(--gold);
	}
}

@media (prefers-reduced-motion: reduce) {
	.calc-page__suite .calc-page__tabs:not(.has-switched) .calc-page__tab:not(.is-active) {
		animation: none;
		border-color: var(--gold);
	}
}

@media (max-width: 599px) {
	.calc-page__suite > .calc-page__tabs {
		flex-wrap: nowrap;
		gap: 6px;
		padding: 0;
	}

	.calc-page__suite .calc-page__tab {
		flex: 1;
		justify-content: center;
		padding: 11px 4px;
		font-size: 12px;
	}
}

/* --- Panels ----------------------------------------------------------- */

.rc__form {
	display: grid;
	gap: var(--rc-panel-gap);
	margin-top: 32px;
	text-align: initial;
}

.rc__panel {
	padding: var(--calc-pad);
	background: #fcfbf9;
	border: 1px solid var(--line);
	border-radius: 6px;
}

.rc__title {
	font-family: var(--display);
	font-size: var(--calc-title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
}

/* --- Shared field chrome ---------------------------------------------- */

/* Same row alignment as .calc-field: a wrapped label never pushes its input
   below the neighbouring one. */
.rc-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rc-field__label ~ * {
	flex-grow: 0;
}

.rc-field__label {
	display: flex;
	flex: 1 0 auto;
	align-items: flex-end;
	margin-bottom: 5px;
	font-size: var(--calc-label);
	font-weight: 700;
	color: var(--ink);
}

.rc-field input,
.rc-field select {
	width: 100%;
	height: var(--calc-input-h);
	padding-inline: 12px;
	font-family: var(--sans);
	font-size: var(--calc-input);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.rc-field input:focus,
.rc-field select:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.13);
}

.rc-field__select {
	position: relative;
	display: block;
}

.rc-field__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
}

.rc-field__select .caret {
	position: absolute;
	right: 14px;
	top: 50%;
	margin-top: -4px;
	width: 13px;
	height: 8px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* Unit sits inside the box with the input, so the pair reads as one control. */
.rc-field__suffixed {
	display: flex;
	align-items: center;
	height: var(--calc-input-h);
	padding-right: 10px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.rc-field__suffixed input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding-right: 8px;
	background: none;
	border: 0;
}

.rc-field__suffixed input:focus {
	box-shadow: none;
}

.rc-field__suffixed:focus-within {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.13);
}

.rc-field__suffixed > span {
	flex: none;
	font-size: 14px;
	color: #6b7178;
	white-space: nowrap;
}

/* --- Scenario columns --------------------------------------------------- */

.rc__scenarios {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 26px;
}

.rc-scenario {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-color: color-mix(in srgb, var(--rc-accent) 38%, var(--line));
	border-radius: 5px;
	overflow: hidden;
}

.rc-scenario__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 14px;
	background: var(--rc-accent);
}

.rc-scenario__name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.rc-scenario__remove {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.25s var(--ease);
}

.rc-scenario__remove[hidden] {
	display: none;
}

.rc-scenario__remove:hover {
	color: #fff;
}

.rc-scenario__remove svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

.rc-scenario__body {
	display: grid;
	gap: 14px;
	padding: 16px;
}

.rc-scenario__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* The card's own answer: the figure sits with the inputs that move it, so a
   reader never has to travel to the table to see what a change did. */
.rc-scenario__result {
	display: grid;
	gap: 2px;
	padding: 16px 14px 14px;
	background: color-mix(in srgb, var(--rc-accent) 9%, var(--white));
	border-bottom: 1px solid color-mix(in srgb, var(--rc-accent) 30%, var(--line));
	text-align: center;
}

.rc-scenario__result-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b7178;
}

.rc-scenario__result-value {
	font-family: var(--sans);
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 800;
	line-height: 1;
	color: var(--ink);
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	letter-spacing: -0.01em;
}

.rc-scenario__result-delta {
	font-size: 12px;
	line-height: 1.4;
	min-height: 1.4em;
	color: var(--body);
	font-variant-numeric: tabular-nums;
}

.rc-scenario__result-delta:empty {
	visibility: hidden;
}

.rc-scenario__duplicate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding-top: 14px;
	margin-top: 2px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	font-weight: 600;
	color: var(--rc-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.25s var(--ease);
}

.rc-scenario__duplicate:hover {
	opacity: 0.72;
}

.rc-scenario__duplicate svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rc__add {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 22px;
}

.rc__add-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding-inline: 26px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.rc__add-btn:hover:not(:disabled) {
	border-color: var(--gold);
	color: var(--gold);
}

.rc__add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.rc__count {
	font-size: 13px;
	color: #6b7178;
}

/* --- Comparison table --------------------------------------------------- */

.rc-table {
	width: 100%;
	border-collapse: collapse;
}

.rc-table thead th {
	padding: 0 10px 16px;
	vertical-align: bottom;
	text-align: center;
}

.rc-table thead th:first-child {
	width: 34%;
	padding-left: 0;
	text-align: left;
}

.rc-chip {
	display: block;
	padding: 9px 10px;
	background: var(--rc-accent);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.rc-table tbody th {
	padding: 15px 18px 15px 0;
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid var(--line);
}

.rc-table tbody td {
	padding: 15px 10px;
	text-align: center;
	vertical-align: middle;
	border-top: 1px solid var(--line);
	font-size: var(--rc-cell);
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}

.rc-table__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.rc-table__note {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7178;
}

.rc-table__row--total th,
.rc-table__row--total td {
	background: rgba(196, 147, 61, 0.07);
}

.rc-table__row--total td {
	font-size: calc(var(--rc-cell) + 2px);
	font-weight: 700;
}

/* --- Disclaimer --------------------------------------------------------- */

.rc__note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 26px;
	padding: 18px 20px;
	background: rgba(196, 147, 61, 0.06);
	border: 1px solid rgba(196, 147, 61, 0.34);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--body);
}

.rc__note-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--gold);
}

.rc__note-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* --- Actions ------------------------------------------------------------ */

.rc__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 6px;
}

.rc__actions .btn {
	min-width: 240px;
}

.rc__reset {
	font-size: 15px;
	font-weight: 600;
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.25s var(--ease);
}

.rc__reset:hover {
	color: var(--gold-strong);
}

/* --- Layout steps -------------------------------------------------------- */

/* A comparison table that scrolls sideways shows one scenario at a time, which
   defeats it. Below the two-column step the columns shrink instead: fixed
   layout, a narrower label column and tighter type keep every scenario on
   screen together. */
@media (max-width: 767px) {
	.rc__panel--results {
		padding-inline: 16px;
	}

	.rc-table {
		table-layout: fixed;
	}

	.rc-table thead th:first-child {
		width: 34%;
	}

	.rc-table thead th:first-child .rc__title {
		font-size: 18px;
		line-height: 1.1;
	}

	.rc-table thead th {
		padding: 0 5px 12px;
	}

	.rc-chip {
		padding: 7px 2px;
		font-size: 9px;
		letter-spacing: 0.02em;
		white-space: nowrap;
	}

	.rc-table tbody th {
		padding: 12px 10px 12px 0;
	}

	.rc-table tbody td {
		padding: 12px 5px;
		font-size: 14px;
	}

	.rc-table__label {
		font-size: 13px;
	}

	.rc-table__note {
		font-size: 11px;
	}
}

@media (max-width: 359px) {
	.rc-table thead th {
		padding-inline: 3px;
	}

	.rc-chip {
		padding: 5px 1px;
		font-size: 8px;
		line-height: 1.1;
		white-space: normal;
	}

	.rc-table tbody td {
		padding-inline: 2px;
		font-size: 12px;
	}
}

@media (min-width: 768px) {
	.rc {
		--rc-cell: 16px;
		--rc-panel-gap: 20px;
	}

	.rc__scenarios {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (min-width: 1080px) {
	.rc__scenarios {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.rc {
		--rc-cell: 17px;
		--rc-panel-gap: 24px;
	}
}

/* ==========================================================================
   Net proceeds — cash remaining after a sale.
   Same two-column shell as the monthly payment calculator.
   ========================================================================== */

.np {
	background: var(--cream);
	padding-block: var(--sec-y);
}

.np__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--calc-pad);
	padding: var(--calc-pad);
	background: #fcfbf9;
	border: 1px solid var(--line);
	border-radius: 6px;
	text-align: initial;
}

.np__title {
	font-family: var(--display);
	font-size: var(--calc-title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 12px;
}

.np__caption {
	margin: 0 0 14px;
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
}

.np__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.np__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 16px;
}

.np__split-unit {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--calc-input-h);
	border: 1px solid var(--line);
	border-left: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--white);
	font-size: var(--calc-input);
	color: #6b7178;
}

.np__headline {
	font-family: var(--display);
	font-size: var(--calc-headline);
	line-height: 1.05;
	color: var(--ink);
}

.np__headline [data-np-out] {
	font-family: var(--sans);
	font-weight: 800;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	letter-spacing: -0.01em;
	line-height: 1;
}

.np__waterfall {
	margin: 28px 0 0;
}

.np__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	border-bottom: 1px solid var(--line);
}

.np__row dt {
	font-size: var(--calc-legend);
	color: var(--body);
}

.np__row dd {
	margin: 0;
	font-size: var(--calc-legend);
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	color: var(--ink);
	white-space: nowrap;
}

.np__row--minus dd {
	color: #6b7178;
}

.np__row--minus:has(+ .np__row--group) {
	border-bottom: 0;
}

.np__row--group {
	margin-top: 2px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	border-bottom: 0;
}

.np__row--group dt,
.np__row--group dd {
	font-weight: 600;
	color: var(--ink);
}

.np__row--total {
	margin-top: 4px;
	padding-top: 18px;
	border-bottom: 0;
	border-top: 1px solid var(--ink);
}

.np__row--total dt,
.np__row--total dd {
	font-weight: 700;
	color: var(--ink);
}

.np__note {
	margin-top: 22px;
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	color: #6b7178;
}

@media (min-width: 600px) {
	.np__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1080px) {
	.np__panel {
		grid-template-columns: 1fr 1px 1fr;
		gap: 0;
		padding: 0;
	}

	.np__form {
		grid-area: 1 / 1;
		padding: var(--calc-pad);
	}

	.np__panel::before {
		content: "";
		grid-area: 1 / 2;
		background: var(--line);
	}

	.np__result {
		grid-area: 1 / 3;
		padding: var(--calc-pad);
	}
}

/* ==========================================================================
   Calculator result actions — Send me this / Contact Us / Share
   Sit inside the result card, directly under the numbers.
   ========================================================================== */

.calc-tools {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.calc-tools__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	padding: 0 10px;
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
		border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.calc-tools__btn svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.calc-tools__btn--send {
	background: var(--navy);
	border: 1px solid var(--navy);
	color: #fff;
}

.calc-tools__btn--send:hover {
	background: #032f5b;
	border-color: #032f5b;
	transform: translateY(-1px);
}

.calc-tools__btn--contact {
	background: var(--gold-fill);
	border: 1px solid var(--gold-fill);
	color: #fff;
}

.calc-tools__btn--contact:hover {
	background: var(--gold-fill-strong);
	border-color: var(--gold-fill-strong);
	transform: translateY(-1px);
}

.calc-tools__btn--share {
	background: var(--white);
	border: 1px solid var(--navy);
	color: var(--navy);
}

.calc-tools__btn--share:hover {
	background: var(--navy);
	color: #fff;
	transform: translateY(-1px);
}

@media (max-width: 599px) {
	.calc-tools {
		gap: 6px;
	}

	.calc-tools__btn {
		height: 52px;
		gap: 5px;
		padding: 0 4px;
		font-size: 10px;
		line-height: 1.15;
		white-space: normal;
	}

	.calc-tools__btn span {
		max-width: 56px;
		text-align: center;
		text-wrap: balance;
	}

	.calc-tools__btn svg {
		width: 14px;
		height: 14px;
	}
}

.rc__panel > .calc-tools,
.np__result > .calc-tools {
	margin-top: 26px;
}

.rc__panel > .calc-tools {
	max-width: 680px;
}

.calc-send {
	width: min(520px, calc(100vw - 32px));
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fcfbf9;
	box-shadow: 0 24px 60px rgba(9, 39, 68, 0.18);
}

.calc-send::backdrop {
	background: rgba(9, 39, 68, 0.46);
}

.calc-send__form {
	position: relative;
	padding: 32px 28px 28px;
}

.calc-send__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--ink);
}

.calc-send__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

.calc-send__title {
	font-family: var(--display);
	font-size: var(--calc-title);
	font-weight: 500;
	color: var(--ink);
	margin: 0 32px 10px 0;
}

.calc-send__lede {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
}

.calc-send__fields {
	display: grid;
	gap: 16px;
}

.calc-send__fields .calc-field span {
	display: block;
	margin-bottom: 9px;
	font-size: var(--calc-label);
	font-weight: 700;
	color: var(--ink);
}

.calc-send__fields input {
	width: 100%;
	height: var(--calc-input-h);
	padding-inline: 16px;
	font-family: var(--sans);
	font-size: var(--calc-input);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.calc-send__fields input:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.13);
}

.calc-send__status {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.calc-send__status.is-ok {
	color: #3d6b52;
}

.calc-send__status.is-bad {
	color: #8a3a32;
}

.calc-send__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 24px;
}

@media (min-width: 600px) {
	.calc-send__fields {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Google Reviews — client experiences carousel (curated GBP reviews).
   Matches the site's cream / gold / navy testimonial language.
   ========================================================================== */

.g-reviews {
	background: var(--cream);
	padding-block: var(--sec-y);
	text-align: center;
}

.g-reviews__lede {
	margin: 16px auto 0;
	max-width: 62ch;
	font-size: var(--calc-lede);
	line-height: 1.6;
	color: var(--body);
}

.g-reviews__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 28px;
	text-align: initial;
}

.g-reviews__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	color: var(--body);
}

.g-reviews__score {
	font-family: var(--display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.g-reviews__stars {
	display: inline-flex;
	gap: 3px;
	color: var(--gold);
}

.g-reviews__stars svg {
	width: 18px;
	height: 18px;
}

.g-reviews__count {
	font-size: 14px;
	font-weight: 600;
	color: var(--sage-strong);
}

.g-reviews__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.g-reviews__btn {
	text-decoration: none;
}

.g-reviews__carousel {
	position: relative;
	margin-top: var(--goals-grid-gap);
}

.g-reviews__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-inline: 4px;
}

.g-reviews__viewport::-webkit-scrollbar {
	display: none;
}

.g-reviews__track {
	display: flex;
	gap: 24px;
	padding-block: 4px 8px;
	text-align: initial;
}

.g-review {
	flex: 0 0 min(100%, 340px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-height: 320px;
	padding: 36px 32px 28px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.g-review:hover {
	border-color: #d9c9a8;
	box-shadow: 0 14px 34px -18px rgba(1, 34, 67, 0.18);
	transform: translateY(-2px);
}

.g-review__quote {
	display: block;
	width: 40px;
	color: var(--gold);
}

.g-review__quote svg {
	width: 100%;
	height: auto;
}

.g-review__body {
	margin-top: 20px;
	flex: 1;
}

.g-review__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.g-review__text.is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.g-review__more {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--gold);
	cursor: pointer;
	transition: color 0.2s var(--ease);
}

.g-review__more:hover {
	color: var(--gold-strong);
}

.g-review__more:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.g-review__stars {
	display: flex;
	gap: 4px;
	margin-top: 24px;
	color: var(--gold);
}

.g-review__stars svg {
	width: 18px;
	height: 18px;
}

.g-review__divider {
	margin: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.g-review__footer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

.g-review__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(123, 151, 134, 0.35);
	background: rgba(123, 151, 134, 0.08);
	color: var(--sage);
}

.g-review__avatar svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.g-review__name {
	margin: 0;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}

.g-review__when {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sage);
}

.g-review__source {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 18px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #5f6368;
}

.g-review__source-prefix {
	flex: none;
}

.g-review__source-logo {
	display: block;
	width: auto;
	height: 16px;
	flex: none;
}

.g-reviews__nav {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--white);
	color: var(--navy);
	cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(1, 34, 67, 0.28);
	transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
		border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.g-reviews__nav svg {
	width: 18px;
	height: 18px;
}

.g-reviews__nav:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	transform: translateY(-2px);
}

.g-reviews__nav:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.g-reviews__nav--prev {
	left: -6px;
}

.g-reviews__nav--next {
	right: -6px;
}

.g-reviews__nav[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.g-review {
		flex-basis: min(100%, 360px);
	}

	.g-reviews__track {
		gap: 28px;
	}

	.g-reviews__nav--prev {
		left: -10px;
	}

	.g-reviews__nav--next {
		right: -10px;
	}
}

@media (min-width: 1080px) {
	.g-review {
		flex-basis: calc((100% - 56px) / 3);
		min-width: 300px;
	}

	.g-reviews__track {
		gap: 32px;
	}
}

@media (max-width: 767px) {
	.g-reviews__toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.g-reviews__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.g-reviews__btn {
		width: 100%;
	}

	.g-reviews__nav {
		display: none;
	}
}

/* ==========================================================================
   Why We Should Work Together — two featured stories set over a photo, with
   a left-aligned intro column beside them.

   The photo is the whole card: the quote sits directly on it over a scrim
   rather than in a panel floating above it, so the section stays one open
   composition instead of a box inside a box.
   ========================================================================== */

.wt {
	background: var(--white);
	padding-block: var(--sec-y);
}

.wt__grid {
	display: grid;
	gap: 40px;
}

/* --- Intro column -------------------------------------------------------- */

.wt:not(.wt--about) .wt__heading {
	max-width: none;
	white-space: nowrap;
	font-size: min(var(--sec-title), 8vw);
}

.wt__heading {
	font-family: var(--display);
	font-size: var(--sec-title);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.014em;
	color: var(--ink);
	margin: var(--sec-head-gap) 0 0;
	max-width: 15ch;
}

.wt__lede {
	margin: 22px 0 0;
	max-width: 46ch;
	font-size: var(--lo-note);
	line-height: 1.7;
	color: var(--body);
}

.wt__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 28px 0 0;
}

.wt__score {
	font-family: var(--display);
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.wt__stars {
	display: inline-flex;
	gap: 3px;
	color: var(--gold);
}

.wt__stars svg {
	width: 18px;
	height: 18px;
}

.wt__count {
	font-size: 14px;
	font-weight: 600;
	color: var(--sage-strong);
}

.wt__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* --- Photo stage --------------------------------------------------------- */

.wt__stage {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: var(--navy);
	box-shadow: var(--shadow-panel);
	isolation: isolate;
}

/* Both slides share one grid cell, so the stage is sized by the longer quote
   and never changes height when the slide changes. */
.wt__slides {
	display: grid;
	min-height: 100%;
}

.wt__slide {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 44px 50px 62px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s;
}

.wt__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s var(--ease), visibility 0s;
}

.wt__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pools the shade behind the quote rather than washing the whole frame, so the
   photograph keeps its light at the edges and the text still clears contrast. */
.wt__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(
			ellipse 78% 66% at 50% 42%,
			rgba(1, 22, 45, 0.44) 0%,
			rgba(1, 22, 45, 0.34) 46%,
			rgba(1, 22, 45, 0.16) 76%,
			rgba(1, 22, 45, 0.02) 100%
		),
		linear-gradient(180deg, rgba(1, 22, 45, 0.04) 0%, rgba(1, 22, 45, 0.05) 62%, rgba(1, 22, 45, 0.2) 100%);
}

.wt__quote {
	position: relative;
	z-index: 2;
	margin: 0;
	max-width: 44ch;
	text-align: center;
	color: #fff;
	text-shadow:
		0 1px 2px rgba(1, 18, 38, 0.62),
		0 2px 16px rgba(1, 18, 38, 0.55);
}

.wt__quote-stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 0 0 16px;
	color: var(--gold-light);
}

.wt__quote-stars svg {
	width: 16px;
	height: 16px;
}

.wt__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	font-weight: 700;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.wt__cite {
	display: block;
	margin-top: 26px;
	font-style: normal;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
}

/* --- Arrows -------------------------------------------------------------- */

.wt__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.14);
	color: var(--white);
	cursor: pointer;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.wt__nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wt__nav:hover {
	background: rgba(255, 255, 255, 0.26);
	border-color: rgba(255, 255, 255, 0.5);
}

.wt__nav:focus-visible {
	outline: 2px solid var(--gold-light);
	outline-offset: 2px;
}

.wt__nav--prev {
	left: 10px;
}

.wt__nav--next {
	right: 10px;
}

/* --- Pager --------------------------------------------------------------- */

.wt__pager {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(1, 22, 45, 0.42);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.wt__pager-sep {
	margin: 0 4px;
	opacity: 0.65;
}

@media (min-width: 600px) {
	.wt__slide {
		min-height: 340px;
		padding: 52px 66px 66px;
	}

	.wt__text {
		font-size: 19px;
	}

	.wt__nav {
		width: 38px;
		height: 52px;
	}

	.wt__nav--prev {
		left: 18px;
	}

	.wt__nav--next {
		right: 18px;
	}
}

@media (min-width: 1080px) {
	.wt__grid {
		grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
		align-items: center;
		gap: 64px;
	}

	/* Photo on the left, intro on the right — the intro leads in the markup so
	   the heading is read before the quotes it introduces. */
	.wt__intro {
		grid-column: 2;
		grid-row: 1;
	}

	.wt__stage {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 16 / 10;
	}

	.wt__slide {
		min-height: 0;
		padding: 56px 76px 74px;
	}
}

@media (min-width: 1280px) {
	.wt__grid {
		gap: 88px;
	}

	.wt__text {
		font-size: 20px;
	}

	.wt__slide {
		padding: 60px 88px 78px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wt__slide {
		transition: none;
	}
}

/* ==========================================================================
   Mortgage Resources — article cards.
   ========================================================================== */

.resources {
	background: var(--white);
	padding-block: var(--sec-y);
	text-align: center;
}

.resources__eyebrow {
	font-size: var(--sec-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.resources__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: var(--goals-grid-gap);
	text-align: initial;
}

.resource {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--goal-card-bg);
	border: 1px solid #ece7e1;
	border-radius: 12px;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.resource:hover {
	border-color: #d9c9a8;
	box-shadow: 0 14px 34px -18px rgba(1, 34, 67, 0.25);
	transform: translateY(-3px);
}

.resource__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

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

.resource__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px 26px 28px;
	text-align: left;
}

.resource__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
}

.resource__title {
	margin-top: 10px;
	font-family: var(--display);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.008em;
	color: var(--ink);
}

.resource__excerpt {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.65;
	color: #4a4e54;
}

.resource__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--gold);
	transition: color 0.25s var(--ease);
}

.resource__link svg {
	width: 26px;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s var(--ease);
}

.resource__link:hover,
.resource:hover .resource__link {
	color: var(--gold-strong);
}

.resource__link:hover svg,
.resource:hover .resource__link svg {
	transform: translateX(6px);
}

/* The link covers the whole card: a click anywhere opens the article. */
.resource__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Pinned to the card's foot, so "Read Article" lines up across the row. */
.resource__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-top: auto;
	padding-top: 20px;
}

.resource__foot .resource__link {
	margin-top: 0;
}

.resources__all-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 48px;
	font-size: 16px;
	font-weight: 600;
	color: var(--sage);
	transition: color 0.25s var(--ease);
}

.resources__all-link svg {
	width: 26px;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s var(--ease);
}

.resources__all-link:hover {
	color: var(--sage-strong);
}

.resources__all-link:hover svg {
	transform: translateX(6px);
}

@media (min-width: 768px) {
	.resource__body {
		padding: 28px 30px 32px;
	}

	.resource__title {
		font-size: 22px;
	}
}

@media (min-width: 1080px) {
	.resources__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

/* ==========================================================================
   Final CTA — "Ready to Take the Next Step?"
   ========================================================================== */

.final-cta {
	background: var(--navy);
	padding-block: var(--cta-pad-y);
}

.final-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.final-cta__title {
	font-family: var(--display);
	font-size: var(--cta-title);
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}

.final-cta__lede {
	margin-top: 12px;
	font-size: var(--calc-lede);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.final-cta__actions .btn {
	flex: 1;
	white-space: nowrap;
}

@media (min-width: 600px) {
	.final-cta__actions .btn {
		flex: none;
	}
}

@media (min-width: 768px) {
	.final-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}
}

/* ==========================================================================
   Other Ways Julie Agency Can Help
   ========================================================================== */

.help-ways {
	background: var(--cream);
	padding-block: var(--sec-y);
	text-align: center;
}

.help-ways__eyebrow {
	font-size: var(--sec-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.help-ways__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-top: var(--goals-grid-gap);
}

.help-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--help-gap);
	position: relative;
	color: inherit;
}

.help-item__icon {
	display: flex;
	width: var(--help-icon);
	height: var(--help-icon);
}

.help-item__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.help-item__label {
	max-width: 190px;
	font-size: var(--help-label);
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
}

.help-item__rule {
	width: 22px;
	height: 2px;
	background: var(--gold);
}

.help-ways__note {
	margin-top: var(--goals-grid-gap);
	font-size: var(--calc-lede);
	color: var(--body);
}

.help-ways__all-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	font-size: var(--calc-lede);
	font-weight: 600;
	color: var(--sage);
	transition: color 0.25s var(--ease);
}

.help-ways__all-link svg {
	width: 26px;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s var(--ease);
}

.help-ways__all-link:hover {
	color: var(--sage-strong);
}

.help-ways__all-link:hover svg {
	transform: translateX(6px);
}

@media (min-width: 768px) {
	.help-ways__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.help-ways__grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.help-item:not(:first-child)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 10%;
		bottom: 10%;
		width: 1px;
		background: var(--line);
	}
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
	background: var(--navy);
	padding-top: clamp(48px, 5vw, 64px);
	color: #fff;
}

.site-footer .brand__logo {
	width: clamp(180px, 15vw, 232px);
	height: auto;
}

/* --- Top: brand + link columns -------------------------------------- */

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--footer-gap);
	padding-bottom: 40px;
}

.site-footer__tagline {
	margin: 18px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-light);
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 22px;
}

.footer-social a,
.footer-social span {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid var(--gold-light);
	border-radius: 50%;
	color: #fff;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.footer-social a:hover {
	background: var(--gold-light);
	color: var(--navy);
	transform: translateY(-1px);
}

.footer-social svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-footer__heading {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-light);
}

.site-footer__heading::after {
	content: "";
	display: block;
	width: 36px;
	height: 2px;
	margin-top: 10px;
	background: var(--gold-light);
}

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

.site-footer__col a {
	font-size: var(--footer-text);
	color: #fff;
	transition: color 0.2s var(--ease);
}

.site-footer__col a:hover {
	color: var(--gold-light);
}

.footer-contact li,
.footer-contact a {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.footer-contact svg {
	width: 22px;
	height: 22px;
	flex: none;
	fill: none;
	stroke: var(--gold-light);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footer-contact span {
	font-size: var(--footer-text);
	line-height: 1.5;
	text-wrap: pretty;
}

/* --- Licensed states band ------------------------------------------- */
/* Pin sits on the left and spans both rows: the label, then the states. */

.footer-states {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 8px;
	align-items: start;
	padding-block: 18px 20px;
	border-top: 1px solid var(--line-navy);
}

.footer-states__mark {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
}

.footer-states__mark svg {
	width: 44px;
	height: 44px;
	flex: none;
	fill: var(--gold-light);
	stroke: none;
}

.footer-states__mark svg circle {
	fill: var(--navy);
}

.footer-states__label {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--gold-light);
}

/* Each state carries its leading bullet; the list is pulled left by one
   bullet slot and clipped, so wrapped lines never start with a bullet. */
.footer-states__list {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 0 0 0 -16px;
	padding: 0;
	clip-path: inset(0 0 0 16px);
	list-style: none;
	font-size: 14px;
	line-height: 1.45;
	color: #fff;
}

.footer-states__list li::before {
	content: "\2022";
	display: inline-block;
	width: 16px;
	text-align: center;
	color: var(--gold-light);
}

/* --- Bottom: Equal Housing Lender, disclosures, legal ---------------- */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
	padding-block: 20px 24px;
	border-top: 1px solid var(--line-navy);
	font-size: var(--footer-disclaimer);
	line-height: 1.6;
}

.footer-ehl {
	display: block;
	width: var(--footer-nmls-icon);
	height: auto;
	flex: none;
	fill: #fff;
}

.footer-ehl text {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 800;
}

.footer-ehl .footer-ehl__lender {
	font-size: 16px;
	font-weight: 900;
}

.site-footer__disclosure {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.site-footer__legal-links a + a::before {
	content: "|";
	margin-inline: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
}

.site-footer__legal-links a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, 0.55);
	transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

.site-footer__legal-links a::before {
	display: inline-block;
	text-decoration: none;
}

.site-footer__legal-links a:hover {
	color: var(--gold-light);
	text-decoration-color: var(--gold-light);
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__brand,
	.site-footer__col:last-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1200px) {
	.site-footer__grid {
		grid-template-columns: 1.3fr 0.95fr 0.95fr 1.6fr;
		gap: 0;
	}

	.site-footer__brand,
	.site-footer__col:last-child {
		grid-column: auto;
	}

	.site-footer__col {
		padding-left: clamp(28px, 3vw, 48px);
		border-left: 1px solid var(--line-navy);
	}

	.site-footer__brand {
		padding-right: 32px;
	}

	.site-footer__tagline {
		white-space: nowrap;
	}

	.footer-states {
		column-gap: 20px;
		row-gap: 6px;
		align-items: center;
	}

	.footer-states__mark svg {
		width: 52px;
		height: 52px;
	}

	.footer-states__label {
		font-size: 13px;
		letter-spacing: 0.16em;
	}
}

@media (min-width: 1360px) {
	.site-footer__bottom {
		flex-wrap: nowrap;
		align-items: center;
		gap: 24px;
	}

	.site-footer__disclosure {
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 0;
		padding-inline: 24px;
		border-inline: 1px solid var(--line-navy);
	}

	.site-footer__disclosure span + span::before {
		content: "|";
		margin-inline: 12px;
		color: rgba(255, 255, 255, 0.55);
	}

	.site-footer__legal-links {
		flex: none;
	}
}

/* ==========================================================================
   Join My VIP Refinance List — full-bleed photo band with a signup card.
   ========================================================================== */

.vip {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.vip__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.vip__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 70%;
	filter: grayscale(35%) saturate(0.85);
}

.vip__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(1, 34, 67, 0.82) 0%, rgba(1, 34, 67, 0.66) 55%, rgba(1, 34, 67, 0.8) 100%);
}

.vip__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding-block: var(--sec-y);
}

.vip__intro {
	width: 100%;
	max-width: none;
	text-align: center;
}

.vip__eyebrow {
	font-size: var(--sec-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-light);
}

.vip__heading {
	margin-top: 14px;
	font-family: var(--sans);
	font-size: var(--sec-title);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--white);
}

.vip__heading-line {
	white-space: nowrap;
}

.vip__panel {
	width: 100%;
	max-width: var(--vip-panel-w);
	padding: var(--calc-pad);
	background: var(--navy);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-panel);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.vip-field label {
	display: block;
	margin-bottom: 9px;
	font-size: var(--calc-label);
	font-weight: 700;
	color: var(--white);
}

.vip-field__required {
	color: var(--gold-light);
}

.vip-field input,
.vip-field select {
	width: 100%;
	height: var(--calc-input-h);
	padding-inline: 16px;
	font-family: var(--sans);
	font-size: var(--calc-input);
	color: var(--ink);
	background: var(--white);
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.vip-field input::placeholder {
	color: #8a8f96;
}

.vip-field input:focus,
.vip-field select:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.25);
}

.vip-field__select {
	position: relative;
}

.vip-field__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
}

.vip-field__select .caret {
	position: absolute;
	right: 18px;
	top: 50%;
	margin-top: -4px;
	width: 13px;
	height: 8px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.vip__notice {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.vip__submit {
	width: 100%;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

@media (min-width: 600px) {
	.vip__submit {
		width: auto;
		align-self: center;
		padding-inline: 48px;
	}
}

@media (min-width: 1080px) {
	.vip__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
	}

	.vip__intro {
		flex: 0 1 auto;
		width: auto;
		text-align: left;
	}

	.vip__eyebrow {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Nav visibility
   ========================================================================== */

.primary-nav,
.nav-cta,
.header-actions {
	display: none;
}

.nav-toggle {
	display: flex;
}

/* Logo, six links, light / dark, language and the CTA share one row. Every
   range below keeps ~25px spare so a desktop scrollbar (~17px) never pushes
   the row into a horizontal scroll. 1260 lets a 1280 laptop (1263 usable
   with its scrollbar) keep the full nav. */
@media (min-width: 1260px) {
	.primary-nav {
		display: flex;
	}

	.header-actions {
		display: flex;
	}

	.nav-cta {
		display: inline-flex;
	}

	.nav-toggle,
	.mobile-nav,
	.theme-switch--bar {
		display: none !important;
	}
}

/* 1260–1439: the tightest range — smaller type, spacing, CTA padding and
   logo, and the language trigger drops to its globe. The dropdown still
   lists both languages by name. */
@media (min-width: 1260px) and (max-width: 1439px) {
	.site-header {
		--nav-size: 14px;
		--nav-gap: 12px;
		--navcta-px: 16px;
		--logo-h: 68px;
	}

	.site-header__inner {
		gap: 16px;
	}

	.header-actions {
		gap: 10px;
	}

	.header-actions .lang-switch__current,
	.header-actions .lang-switch__caret {
		display: none;
	}
}

/* 1440+: the language trigger shows its full name again, so the links and
   actions sit closer than the global gaps. */
@media (min-width: 1440px) {
	.site-header {
		--nav-gap: 14px;
	}

	.header-actions {
		gap: 12px;
	}
}

@media (min-width: 1536px) {
	.site-header {
		--nav-gap: 20px;
		--logo-h: 74px;
	}
}

.mobile-nav.is-open {
	display: block;
}

@media (max-width: 599px) {
	.hero__actions .btn {
		width: 100%;
	}
}

/* ==========================================================================
   Fallback template (index.php) — minimal, until inner pages are designed
   ========================================================================== */

.section {
	padding-block: 80px;
}

@media (min-width: 1080px) {
	.section {
		padding-block: 112px;
	}
}

.section-title {
	font-family: var(--display);
	font-size: 34px;
	line-height: 1.15;
	font-weight: 500;
	color: var(--ink);
	letter-spacing: -0.012em;
	margin: 0 0 24px;
}

@media (min-width: 1080px) {
	.section-title {
		font-size: 44px;
	}
}

.entry-content {
	max-width: 68ch;
}

.entry-content > * + * {
	margin-top: 20px;
}

.legal-page {
	background: var(--cream);
}

.legal-page .section-title {
	max-width: 16ch;
}

.legal-page .entry-content {
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
}

.legal-page .entry-content h2 {
	margin: 36px 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
}

.legal-page .entry-content h2:first-child {
	margin-top: 0;
}

.legal-page .entry-content ul {
	margin: 0;
	padding-left: 1.15em;
}

.legal-page .entry-content li + li {
	margin-top: 6px;
}

.legal-page .entry-content a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.legal-page .entry-content a:hover {
	color: var(--gold-strong);
}

/* The band only holds four across once the copy fits on one line. */
@media (min-width: 1280px) {
	.calc__cta {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		gap: 26px;
	}
}

/* ==========================================================================
   Who I Help — six borrower situations as numbered cards, each led by a
   line-art icon. Chrome (eyebrow, numbers, card edge) follows the page
   bronze; the ground is a warmer paper so this band does not collapse into
   the cream above or the white below.
   ========================================================================== */

.specialties {
	background: var(--sp-bg);
	/*
	 * Scaled off the page's shared rhythm tokens instead of overriding them per
	 * breakpoint: this band sits a little tighter than its neighbours but still
	 * follows --sec-y and --goals-grid-gap wherever those are retuned.
	 */
	padding-block: calc(var(--sec-y) * 0.78);
	text-align: center;
}

/* This eyebrow is long enough to wrap on a phone, which strands the flanking
   rules against the gutters. They come back at 600, where it fits on one line. */
.specialties .section-eyebrow::before,
.specialties .section-eyebrow::after {
	display: none;
}

.specialties .section-heading {
	text-wrap: balance;
}

.specialties__lede {
	max-width: 640px;
	margin: 14px auto 0;
	font-size: var(--goal-copy);
	line-height: 1.6;
	color: rgba(11, 37, 69, 0.7);
}

.specialties__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-grid-gap);
	margin: calc(var(--goals-grid-gap) * 0.75) 0 0;
	padding: 0;
	list-style: none;
	text-align: initial;
}

/* Icon rail on the left, number → title → copy stacked on the right. */
.specialty {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--sp-card-gap);
	padding: calc(var(--sp-card-pad) * 0.88) var(--sp-card-pad);
	background: #fffdfa;
	border: 1px solid var(--sp-line);
	border-radius: 6px;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.specialty:hover {
	border-color: color-mix(in srgb, var(--gold) 48%, var(--sp-line));
	box-shadow: 0 14px 30px -18px rgba(1, 34, 67, 0.32);
	transform: translateY(-2px);
}

/*
 * The six source files arrive on different canvases with different amounts of
 * surrounding space, so they are normalised to one square canvas with a shared
 * ink size before they get here. A square box over square art means the drawn
 * aspect ratio is the artwork's own; `contain` keeps that true if either the
 * box or a replacement file ever stops being square.
 */
.specialty__icon {
	width: var(--sp-icon);
	height: var(--sp-icon);
	object-fit: contain;
}

.specialty__num {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: var(--sp-num);
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--gold);
}

.specialty__num::after {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	flex: none;
}

.specialty__name {
	margin: 10px 0 0;
	font-family: var(--display);
	font-size: var(--sp-title);
	font-weight: 500;
	line-height: 1.22;
	color: var(--ink);
}

.specialty__copy {
	margin: 12px 0 0;
	font-size: var(--sp-copy);
	line-height: 1.62;
	color: rgba(11, 37, 69, 0.68);
}

@media (min-width: 600px) {
	.specialties .section-eyebrow::before,
	.specialties .section-eyebrow::after {
		display: block;
	}
}

@media (min-width: 768px) {
	.specialties__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.specialties__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.specialty {
		transition: none;
	}

	.specialty:hover {
		transform: none;
	}
}

/* ==========================================================================
   About Julie — lending pillars on the left, a stacked photo composition on
   the right, closed by a full-bleed proof band. Mortgage lending is YMYL, so
   the licence itself now lives in the footer and the schema block; this
   section carries the human and the local-market signal.

   HEIGHT BUDGET
   The desktop layout is capped at 80% of the viewport so the whole section
   still fits under the sticky header on one screen. Every value from 1080up
   is a px figure multiplied by --about-k (type + boxes) and --about-gk
   (vertical gaps only, which have the most slack). The max-height queries at
   the end of the block step those factors down on short laptops, so no `vh`
   type is introduced and browser zoom still scales the section uniformly.
   ========================================================================== */

.about {
	--about-k: 1;
	--about-gk: 1;

	--about-pad: 60px;
	--about-rule: 40px;
	--about-eyebrow: 12px;
	--about-title: 30px;
	--about-lede: 16px;
	--about-icon: 52px;
	--about-name: 18px;
	--about-copy: 14px;
	--about-btn-h: 54px;

	--about-gap-eyebrow: 16px; /* eyebrow → title */
	--about-gap-title: 20px; /* title → lede */
	--about-gap-lede: 30px; /* lede → pillars */
	--about-gap-pillars: 30px; /* pillars → buttons */
	--about-media-h: 420px;

	position: relative;
	background: #fbf7f2;
	padding-top: var(--about-pad);
	overflow: hidden;
}

/* Warm bloom in the top-right corner, matching the reference. */
.about::before {
	content: "";
	position: absolute;
	top: -18%;
	right: -8%;
	width: 46%;
	padding-bottom: 46%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(196, 147, 61, 0.09), rgba(196, 147, 61, 0) 68%);
	pointer-events: none;
}

.about__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px;
	align-items: stretch;
	padding-bottom: var(--about-pad);
}

/* --- Left column -------------------------------------------------------- */

.about__eyebrow {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	font-size: var(--about-eyebrow);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gold);
}

.about__eyebrow::before {
	content: "";
	flex: none;
	width: var(--about-rule);
	height: 2px;
	background: currentColor;
}

.about__title {
	max-width: 21ch;
	margin: var(--about-gap-eyebrow) 0 0;
	font-family: var(--display);
	font-size: var(--about-title);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.about__lede {
	max-width: 54ch;
	margin: var(--about-gap-title) 0 0;
	font-size: var(--about-lede);
	line-height: 1.72;
	color: #4a5462;
}

/* --- The four lending pillars ------------------------------------------- */

.about__pillars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 20px;
	margin: var(--about-gap-lede) 0 0;
	padding: 0;
	list-style: none;
}

.pillar {
	text-align: center;
}

.pillar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--about-icon);
	height: var(--about-icon);
	border-radius: 50%;
	background: #f8efe1;
	color: var(--gold-fill);
}

.pillar__icon svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pillar__name {
	margin: calc(14px * var(--about-gk)) 0 0;
	font-family: var(--display);
	font-size: var(--about-name);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
}

.pillar__copy {
	margin: calc(8px * var(--about-gk)) 0 0;
	font-size: var(--about-copy);
	line-height: 1.5;
	color: #6b7480;
}

/* --- Actions ------------------------------------------------------------ */

.about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: var(--about-gap-pillars);
}

.about__btn {
	flex: 1 1 100%;
	gap: 14px;
	height: var(--about-btn-h);
}

@media (min-width: 600px) {
	.about__btn {
		flex: 0 0 auto;
	}
}

.about__btn-arrow {
	display: inline-flex;
}

.about__btn-arrow svg {
	width: 18px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Right column: photo composition ------------------------------------ */

.about__media {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.about__shot {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}

.about__shot img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.about__shot--couple {
	border-radius: 14px;
	box-shadow: 0 20px 46px -18px rgba(1, 34, 67, 0.4);
}

.about__quote {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 26px 26px 28px;
	border-radius: 16px;
	background: #fbf7f1;
	box-shadow: 0 20px 46px -20px rgba(1, 34, 67, 0.28);
}

.about__quote-mark {
	display: block;
	color: var(--gold-fill);
}

.about__quote-mark svg {
	width: 26px;
	height: auto;
}

.about__quote-text {
	margin: 14px 0 0;
	font-family: var(--display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.36;
	color: var(--ink);
}

/* The caption sits under a short gold rule, not a full-width border. */
.about__quote-by {
	position: relative;
	margin-top: 18px;
	padding-top: 16px;
}

.about__quote-by::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 2px;
	background: var(--gold-fill);
}

.about__quote-name,
.about__quote-role {
	display: block;
}

.about__quote-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.about__quote-role {
	margin-top: 3px;
	font-size: 13px;
	color: #6b7480;
}

/* --- Proof band --------------------------------------------------------- */

.about__proof {
	position: relative;
	border-top: 1px solid #ece3d4;
	background: #f7f2e9;
}

.about__proof-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-stat {
	position: relative;
	padding: calc(22px * var(--about-gk)) 14px;
	text-align: center;
}

.about-stat + .about-stat::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 1px;
	background: #e6dccb;
}

.about-stat:nth-child(3)::before {
	display: none;
}

.about-stat__figure {
	margin: 0;
	font-family: var(--display);
	font-size: calc(28px * var(--about-k));
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
}

.about-stat__label {
	margin: calc(6px * var(--about-gk)) 0 0;
	font-size: calc(15px * var(--about-k));
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

.about-stat__note {
	margin: calc(4px * var(--about-gk)) 0 0;
	font-size: calc(14px * var(--about-k));
	line-height: 1.4;
	color: #6b7480;
}

@media (min-width: 600px) {
	.about {
		--about-title: 34px;
		--about-lede: 16.5px;
		--about-icon: 56px;
		--about-name: 19px;
	}
}

@media (min-width: 768px) {
	.about {
		--about-pad: 72px;
		--about-rule: 46px;
		--about-eyebrow: 13px;
		--about-title: 38px;
		--about-icon: 58px;
		--about-btn-h: 56px;
	}

	.about__pillars {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}

	.about__media {
		grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
		align-items: end;
	}

	.about__shot--skyline {
		grid-column: 1 / -1;
	}

	.about__proof-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.about-stat:nth-child(3)::before {
		display: block;
	}
}

/* --- Desktop: two columns, overlapped photo stack ----------------------- */

@media (min-width: 1080px) {
	.about {
		--about-pad: calc(48px * var(--about-k) * var(--about-gk));
		--about-rule: calc(48px * var(--about-k));
		--about-eyebrow: calc(13px * var(--about-k));
		--about-title: calc(42px * var(--about-k));
		--about-lede: calc(16px * var(--about-k));
		--about-icon: calc(56px * var(--about-k));
		--about-name: calc(18px * var(--about-k));
		--about-copy: calc(13.5px * var(--about-k));
		--about-btn-h: calc(54px * var(--about-k));

		--about-gap-eyebrow: calc(20px * var(--about-k) * var(--about-gk));
		--about-gap-title: calc(24px * var(--about-k) * var(--about-gk));
		--about-gap-lede: calc(28px * var(--about-k) * var(--about-gk));
		--about-gap-pillars: calc(28px * var(--about-k) * var(--about-gk));
		--about-media-h: calc(560px * var(--about-k));
	}

	/* The shell narrows with --about-k as well, so the photo composition keeps
	   the reference proportions instead of going squat on short-wide screens. */
	.about__grid,
	.about__proof-grid {
		max-width: calc(var(--container) * var(--about-k));
	}

	.about__grid {
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
		gap: 64px;
	}

	.about__body {
		display: flex;
		flex-direction: column;
	}

	/* Push the buttons to the foot of the column so both columns end level. */
	.about__actions {
		gap: min(calc(24px * var(--about-k)), 3.4%);
		margin-top: auto;
		padding-top: var(--about-gap-pillars);
	}

	.about__pillars {
		gap: 0 18px;
	}

	/* The reference gives the primary CTA noticeably more air than the ghost. */
	.about__btn.btn--navy {
		padding-inline: min(calc(52px * var(--about-k)), 6%);
	}

	.about__btn.btn--navy-outline {
		padding-inline: min(calc(26px * var(--about-k)), 3%);
	}

	.about__media {
		display: block;
		min-height: var(--about-media-h);
	}

	.about__shot,
	.about__quote {
		position: absolute;
	}

	.about__shot--skyline {
		top: 0;
		right: 0;
		width: 91.5%;
		aspect-ratio: 1.42;
	}

	.about__shot--couple {
		left: 0;
		bottom: 0;
		z-index: 2;
		width: 55.5%;
		aspect-ratio: 1.43;
	}

	.about__quote {
		right: 3.2%;
		bottom: 0;
		z-index: 3;
		width: 39.5%;
		padding: calc(24px * var(--about-k)) calc(24px * var(--about-k)) calc(26px * var(--about-k));
	}

	.about__shot img {
		aspect-ratio: auto;
		/* Bias the crop left so the hand-lettering on the right stays whole. */
		object-position: 62% 38%;
	}

	.about__quote-mark svg {
		width: calc(26px * var(--about-k));
	}

	.about__quote-text {
		margin-top: calc(14px * var(--about-gk));
		font-size: calc(20px * var(--about-k));
	}

	.about__quote-by {
		margin-top: calc(18px * var(--about-gk));
		padding-top: calc(16px * var(--about-gk));
	}

	.about__quote-name {
		font-size: calc(14px * var(--about-k));
	}

	.about__quote-role {
		font-size: calc(13px * var(--about-k));
	}
}

@media (min-width: 1280px) {
	.about {
		--about-title: calc(46px * var(--about-k));
		--about-icon: calc(58px * var(--about-k));
	}

	.about__grid {
		gap: 72px;
	}
}

@media (min-width: 1536px) {
	.about {
		--about-rule: calc(52px * var(--about-k));
		--about-eyebrow: calc(14px * var(--about-k));
		--about-title: calc(50px * var(--about-k));
		--about-lede: calc(17px * var(--about-k));
		--about-icon: calc(60px * var(--about-k));
		--about-name: calc(19px * var(--about-k));
		--about-copy: calc(13.5px * var(--about-k));
	}

	.about-stat__figure {
		font-size: calc(31px * var(--about-k));
	}
}

/* --- The 80vh cap ------------------------------------------------------
   Natural desktop height is ~840px. These steps hold `section height ≤ 80% of
   the viewport` from 1080px-tall monitors down to a 720px browser window:
   --about-k shrinks type and boxes, --about-gk takes the extra out of the
   vertical gaps, which have far more slack than the text does.
   ---------------------------------------------------------------------- */

@media (min-width: 1080px) and (max-height: 1070px) {
	.about {
		--about-k: 0.98;
		--about-gk: 0.95;
	}
}

@media (min-width: 1080px) and (max-height: 1020px) {
	.about {
		--about-k: 0.95;
		--about-gk: 0.9;
	}
}

@media (min-width: 1080px) and (max-height: 970px) {
	.about {
		--about-k: 0.92;
		--about-gk: 0.85;
	}
}

@media (min-width: 1080px) and (max-height: 920px) {
	.about {
		--about-k: 0.88;
		--about-gk: 0.8;
	}
}

@media (min-width: 1080px) and (max-height: 880px) {
	.about {
		--about-k: 0.85;
		--about-gk: 0.75;
	}
}

@media (min-width: 1080px) and (max-height: 820px) {
	.about {
		--about-k: 0.8;
		--about-gk: 0.68;
	}
}

@media (min-width: 1080px) and (max-height: 780px) {
	.about {
		--about-k: 0.78;
		--about-gk: 0.62;
	}
}

@media (min-width: 1080px) and (max-height: 740px) {
	.about {
		--about-k: 0.75;
		--about-gk: 0.55;
	}
}

/* ==========================================================================
   About Julie — DESIGN OPTION 2 (parallel alternative, sits under the block
   above so the two directions can be compared side by side on the page).
   Centred head, one divided row of service routes, a single photo with a
   location badge, and a horizontal proof band.

   It carries its own --about2-k / --about2-gk pair and its own max-height
   ladder, on the same principle as option 1: px values scaled by a unitless
   factor, so the section stays inside 80% of the viewport without any `vh`
   type and without breaking zoom.
   ========================================================================== */

.about2 {
	--about2-k: 1;
	--about2-gk: 1;

	--about2-pad: 56px;
	--about2-rule: 34px;
	--about2-eyebrow: 12px;
	--about2-title: 30px;
	--about2-lede: 16px;
	--about2-box: 76px;
	--about2-icon: 42px;
	--about2-name: 20px;
	--about2-copy: 14px;
	--about2-btn-h: 56px;

	--about2-gap-eyebrow: 18px;
	--about2-gap-title: 18px;
	--about2-gap-head: 34px;
	--about2-gap-icon: 12px;
	--about2-gap-name: 10px;
	--about2-gap-cta: 34px;

	--about2-proof-icon: 34px;
	--about2-proof-label: 18px;
	--about2-proof-note: 14px;
	--about2-proof-pad: 30px;

	--about2-line: #e7e0d5;

	background: #fbf8f3;
	padding-top: var(--about2-pad);
}

/* --- Centred head ------------------------------------------------------- */

.about2__head {
	text-align: center;
}

.about2__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 0;
	font-size: var(--about2-eyebrow);
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gold);
}

.about2__eyebrow::before,
.about2__eyebrow::after {
	content: "";
	flex: none;
	width: var(--about2-rule);
	height: 2px;
	background: currentColor;
}

.about2__title {
	margin: var(--about2-gap-eyebrow) 0 0;
	font-family: var(--display);
	font-size: var(--about2-title);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.about2__lede {
	max-width: 56ch;
	margin: var(--about2-gap-title) auto 0;
	font-size: var(--about2-lede);
	line-height: 1.58;
	color: #4a5462;
}

/* --- Routes + CTA ------------------------------------------------------- */

.about2__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
	margin-top: var(--about2-gap-head);
	padding-bottom: var(--about2-pad);
}

.about2__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.route {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: 14px;
	text-align: center;
}

@supports (grid-template-rows: subgrid) {
	.route {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		justify-items: center;
	}
}

/* Hairline rules between the routes, as in the reference. */
.route + .route {
	border-left: 1px solid var(--about2-line);
}

/* No rule at the start of the second row while the grid is two columns. */
.route:nth-child(3) {
	border-left: 0;
}

.route__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--about2-box);
	height: var(--about2-box);
	border-radius: 50%;
	background: #f7efe3;
	color: var(--ink);
}

.route__icon img {
	display: block;
	width: 56%;
	height: 56%;
	object-fit: contain;
}

.route__name {
	margin: var(--about2-gap-icon) 0 0;
	width: 100%;
	min-height: calc(var(--about2-name) * 1.2 * 2);
	font-family: var(--display);
	font-size: var(--about2-name);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}

.route__copy {
	margin: var(--about2-gap-name) 0 0;
	font-size: var(--about2-copy);
	line-height: 1.45;
	color: #6b7480;
}

.about2__cta {
	display: flex;
	width: fit-content;
	gap: 12px;
	height: var(--about2-btn-h);
	margin: var(--about2-gap-cta) auto 0;
	border-radius: 6px;
}

.about2__cta-chev {
	display: inline-flex;
}

.about2__cta-chev svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Photo + location badge -------------------------------------------- */

.about2__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 1.33;
}

.about2__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about2__badge {
	position: absolute;
	left: 50%;
	bottom: calc(18px * var(--about2-k));
	display: flex;
	align-items: center;
	gap: 9px;
	padding: calc(11px * var(--about2-k)) calc(18px * var(--about2-k));
	transform: translateX(-50%);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 26px -10px rgba(1, 34, 67, 0.35);
	font-size: calc(15px * var(--about2-k));
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--ink);
}

.about2__badge-pin {
	display: inline-flex;
	color: var(--gold-fill);
}

.about2__badge-pin svg {
	width: calc(17px * var(--about2-k));
	height: calc(17px * var(--about2-k));
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Proof band --------------------------------------------------------- */

.about2__proof {
	border-top: 1px solid #efe7d8;
	background: #f7f2e8;
}

.about2__proof-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-block: var(--about2-proof-pad);
}

.about2-proof {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(20px * var(--about2-k));
	padding: calc(14px * var(--about2-gk)) 12px;
}

.about2-proof + .about2-proof {
	border-left: 1px solid var(--about2-line);
}

.about2-proof:nth-child(3) {
	border-left: 0;
}

.about2-proof__icon {
	display: inline-flex;
	flex: none;
	color: var(--ink);
}

.about2-proof__icon svg {
	width: var(--about2-proof-icon);
	height: var(--about2-proof-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.about2-proof__label,
.about2-proof__note {
	display: block;
}

.about2-proof__label {
	font-family: var(--display);
	font-size: var(--about2-proof-label);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}

.about2-proof__note {
	margin-top: 4px;
	font-size: var(--about2-proof-note);
	line-height: 1.35;
	color: #6b7480;
}

@media (min-width: 600px) {
	.about2 {
		--about2-title: 34px;
		--about2-lede: 17px;
		--about2-box: 84px;
		--about2-icon: 47px;
		--about2-name: 21px;
	}
}

@media (min-width: 768px) {
	.about2 {
		--about2-pad: 64px;
		--about2-rule: 44px;
		--about2-eyebrow: 13px;
		--about2-title: 40px;
		--about2-box: 92px;
		--about2-icon: 52px;
		--about2-name: 22px;
		--about2-copy: 15px;
	}

	.about2__features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.route:nth-child(3) {
		border-left: 1px solid var(--about2-line);
	}

	/* Stacked, the 1.33 frame would run over 600px tall — crop it wider until
	   the photo moves into its own column at 1080. */
	.about2__media {
		aspect-ratio: 16 / 9;
	}

	.about2__proof-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.about2-proof:nth-child(3) {
		border-left: 1px solid var(--about2-line);
	}
}

/* --- Desktop: routes beside the photo ----------------------------------- */

@media (min-width: 1080px) {
	.about2 {
		--about2-pad: calc(60px * var(--about2-k) * var(--about2-gk));
		--about2-rule: calc(56px * var(--about2-k));
		--about2-eyebrow: calc(14px * var(--about2-k));
		--about2-title: calc(52px * var(--about2-k));
		--about2-lede: calc(18px * var(--about2-k));
		--about2-box: calc(106px * var(--about2-k));
		--about2-icon: calc(59px * var(--about2-k));
		--about2-name: calc(23px * var(--about2-k));
		--about2-copy: max(12px, calc(16px * var(--about2-k)));
		--about2-btn-h: calc(60px * var(--about2-k));

		--about2-gap-eyebrow: calc(24px * var(--about2-k) * var(--about2-gk));
		--about2-gap-title: calc(24px * var(--about2-k) * var(--about2-gk));
		--about2-gap-head: calc(40px * var(--about2-k) * var(--about2-gk));
		--about2-gap-icon: calc(16px * var(--about2-k) * var(--about2-gk));
		--about2-gap-name: calc(14px * var(--about2-k) * var(--about2-gk));
		--about2-gap-cta: calc(60px * var(--about2-k) * var(--about2-gk));

		--about2-proof-icon: calc(46px * var(--about2-k));
		--about2-proof-label: calc(22px * var(--about2-k));
		--about2-proof-note: max(12px, calc(15px * var(--about2-k)));
		--about2-proof-pad: calc(44px * var(--about2-k) * var(--about2-gk));
	}

	/* Same trick as option 1 — the shell narrows with the scale factor so the
	   photo keeps its reference proportions on short, wide screens. */
	.about2 .container {
		max-width: calc(var(--container) * var(--about2-k));
	}

	.about2__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 3.2%;
	}

	.about2__media {
		aspect-ratio: 1.33;
	}

	.about2__features {
		gap: 0;
	}

	.route {
		padding-inline: calc(18px * var(--about2-k));
	}

	.about2__cta {
		padding-inline: calc(38px * var(--about2-k));
	}
}

@media (min-width: 1280px) {
	.about2 {
		--about2-title: calc(56px * var(--about2-k));
		--about2-lede: calc(19px * var(--about2-k));
		--about2-box: calc(112px * var(--about2-k));
		--about2-icon: calc(63px * var(--about2-k));
		--about2-name: calc(24px * var(--about2-k));
	}
}

/* --- The 80vh cap for option 2 ------------------------------------------
   Natural desktop height is ~935px — the photo drives the row — so this
   ladder starts stepping down from 1200px-tall viewports, earlier and in
   finer steps than option 1's.
   ---------------------------------------------------------------------- */

@media (min-width: 1080px) and (max-height: 1200px) {
	.about2 {
		--about2-k: 0.97;
		--about2-gk: 0.95;
	}
}

@media (min-width: 1080px) and (max-height: 1140px) {
	.about2 {
		--about2-k: 0.95;
		--about2-gk: 0.92;
	}
}

@media (min-width: 1080px) and (max-height: 1080px) {
	.about2 {
		--about2-k: 0.93;
		--about2-gk: 0.87;
	}
}

@media (min-width: 1080px) and (max-height: 1040px) {
	.about2 {
		--about2-k: 0.9;
		--about2-gk: 0.83;
	}
}

@media (min-width: 1080px) and (max-height: 990px) {
	.about2 {
		--about2-k: 0.86;
		--about2-gk: 0.77;
	}
}

@media (min-width: 1080px) and (max-height: 940px) {
	.about2 {
		--about2-k: 0.83;
		--about2-gk: 0.73;
	}
}

@media (min-width: 1080px) and (max-height: 890px) {
	.about2 {
		--about2-k: 0.8;
		--about2-gk: 0.68;
	}
}

@media (min-width: 1080px) and (max-height: 840px) {
	.about2 {
		--about2-k: 0.76;
		--about2-gk: 0.61;
	}
}

@media (min-width: 1080px) and (max-height: 790px) {
	.about2 {
		--about2-k: 0.73;
		--about2-gk: 0.55;
	}
}

@media (min-width: 1080px) and (max-height: 740px) {
	.about2 {
		--about2-k: 0.7;
		--about2-gk: 0.48;
	}
}

@media (min-width: 1080px) and (max-height: 690px) {
	.about2 {
		--about2-k: 0.67;
		--about2-gk: 0.42;
	}
}

/* ==========================================================================
   Contact — the destination every CTA on the page points at.
   ========================================================================== */

.contact {
	background: var(--white);
	padding-block: var(--sec-y);
}

.contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

.contact__lede {
	margin: 18px 0 0;
	font-size: var(--goal-copy);
	line-height: 1.7;
	color: var(--body);
}

.contact__direct-heading {
	margin: 32px 0 0;
	font-size: var(--sec-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.contact__details {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.contact__details li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--body);
}

.contact__details li + li {
	margin-top: 14px;
}

.contact__details svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	fill: none;
	stroke: var(--gold);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.contact__details a:hover {
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact__meta {
	margin: 22px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--body);
}

.contact__meta-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

.contact__meta-note {
	display: block;
	font-style: italic;
}

.contact__panel {
	padding: 26px 22px 28px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-panel);
}

.contact__notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.5;
}

.contact__notice--ok {
	background: rgba(123, 151, 134, 0.14);
	border: 1px solid var(--sage);
	color: var(--sage-strong);
}

.contact__notice--bad {
	background: rgba(184, 113, 15, 0.1);
	border: 1px solid var(--gold);
	color: var(--gold-strong);
}

.contact__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* Off-screen rather than display:none — bots skip hidden fields. */
.contact__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Lead form notices are always in the page; JS shows the one that applies. */
[data-notice][hidden],
[data-notice-label][hidden] {
	display: none !important;
}

form.is-sending [type="submit"] {
	opacity: 0.65;
	cursor: progress;
}

/* Cloudflare Turnstile: a full row in grid and wrapping-flex forms alike. */
.form-turnstile {
	grid-column: 1 / -1;
	flex-basis: 100%;
}

.contact-field label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--calc-label);
	font-weight: 700;
	color: var(--ink);
}

.contact-field__required {
	color: var(--gold);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
	width: 100%;
	padding: 0 16px;
	height: var(--calc-input-h);
	font-family: var(--sans);
	font-size: var(--calc-input);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.contact-field textarea {
	height: auto;
	padding: 14px 16px;
	line-height: 1.6;
	resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: #8a8f96;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.2);
}

.contact-field__select {
	position: relative;
}

.contact-field__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
}

.contact-field__select .caret {
	position: absolute;
	right: 18px;
	top: 50%;
	margin-top: -4px;
	width: 13px;
	height: 8px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.contact__submit {
	width: 100%;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.contact__consent {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #6d727a;
}

.contact__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.contact__consent a:hover {
	color: var(--ink);
}

@media (min-width: 768px) {
	.contact__form {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-field--wide,
	.contact__submit,
	.contact__consent,
	.contact__honeypot {
		grid-column: 1 / -1;
	}

	.contact__submit {
		width: auto;
		justify-self: start;
		padding-inline: 44px;
	}

	.contact__panel {
		padding: 34px 32px 36px;
	}
}

@media (min-width: 1080px) {
	.contact__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 64px;
	}
}

/* Language options are anchors now, so reset the link defaults. */
.lang-switch__option {
	text-decoration: none;
	cursor: pointer;
}

/* Anchor targets sit under the sticky header without this offset — and every
   primary CTA on the page is an in-page anchor. */
#main section[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ==========================================================================
   Loan Programs subpage — template-loan-programs.php
   Built from design/banner-loan-programs.png

   The banner is a photograph whose left third is a bare sunlit wall, so the
   headline is set directly on the photo rather than in a tinted panel. Below
   1080 that wall is no longer wide enough to hold three lines of lede, so the
   hero stacks the way the home hero does: copy on cream, photo beneath it.

   No new type scale — every size below reuses a token from :root.
   ========================================================================== */

/* Mirror of --lead: a rule that trails the eyebrow instead of leading it. */
.section-eyebrow--trail {
	justify-content: flex-start;
}

.section-eyebrow--trail::before {
	display: none;
}

/* --- Hero banner ------------------------------------------------------ */

.lp-hero {
	position: relative;
	background: var(--cream);
	display: flex;
	flex-direction: column-reverse;
}

/* Stacked: the photo sits as a band under the copy. It keeps its own 16:9
   ratio rather than the home hero's fixed media height, so the banner is
   never cropped on a phone either. */
.lp-hero__bg {
	width: 100%;
	height: auto;
	aspect-ratio: 1656 / 936;
	display: block;
}

.lp-hero__inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--hero-pad-y);
}

.lp-hero__panel {
	max-width: 620px;
}

.lp-hero__eyebrow {
	gap: 26px;
	/* Locked so its box is exactly 1.2em — the headline offset below is
	   measured from it. */
	line-height: 1.2;
}

/* Longer and finer than the section dash — it reads as a rule, not a tick. */
.lp-hero__eyebrow::after {
	width: 128px;
	height: 1.5px;
}

.lp-hero__title {
	margin-top: var(--hero-gap-sm);
	font-size: var(--hero-title);
	line-height: 1.1;
	color: var(--ink);
}

/* One clause per line: the setup ends on "checklist," and the answer gets
   its own line. The second clause carries the argument, so it carries the
   bronze. */
.lp-hero__lead,
.lp-hero__accent {
	display: block;
}

.lp-hero__accent {
	color: var(--gold);
}

/* Held on one line once it fits. The clause is wider than the panel, so it
   runs past it into the scrim, still well clear of the photograph. English
   only: the Vietnamese clause is ~25% longer and would reach the photo (and
   scroll sideways at 840), so it keeps normal wrapping. */
@media (min-width: 840px) {
	.lp-hero__lead:lang(en) {
		white-space: nowrap;
	}
}

/* Same bronze rule the home hero sets under its headline. Must beat the
   `.lp-hero__panel > *` width rule that would otherwise stretch it. */
.lp-hero .rule-gold {
	width: var(--rule-w);
	margin-top: var(--hero-gap-sm);
}

.lp-hero__lede {
	margin-top: var(--hero-gap-sm);
	/* Vietnamese runs ~15% longer and was stranding a single word on the last
	   line at 1280-1440. Degrades to normal wrapping where unsupported. */
	text-wrap: pretty;
	font-size: var(--hero-lede);
	line-height: 1.6;
	color: #3f4348;
	max-width: 54ch;
}

/*
 * Overlay mode. The wall in the photograph is wide enough here to hold the
 * copy, so the hero becomes a full-bleed image with the text on top.
 *
 * Height comes from the home hero (--hero-min-h), so both pages open on the
 * same fold. The banner is then fitted by HEIGHT — `contain` instead of
 * `cover` — so it is never sliced top or bottom, and anchored right. On a
 * wide viewport the scaled banner is narrower than the page, which leaves a
 * cream strip on the left; that strip is where the headline sits, and the
 * banner's own left edge is the same cream wall, so the join is invisible
 * under the scrim.
 */
@media (min-width: 1080px) {
	.lp-hero {
		display: block;
		position: relative;
		min-height: var(--hero-min-h);
		overflow: hidden;
		/* Matches the wall in the photograph and the scrim below it. */
		background: #f7f3ed;
		/* Distance from the top of the home hero to the top of its headline,
		   measured per breakpoint. The headline here is pinned to the same
		   line so the two pages open identically. */
		--lp-title-top: 92px;
	}

	.lp-hero__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: 100% 50%;
	}

	.lp-hero::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 70%;
		background: linear-gradient(
			90deg,
			#f7f3ed 0%,
			#f7f3ed 40%,
			rgba(247, 243, 237, 0.9) 62%,
			rgba(247, 243, 237, 0) 100%
		);
	}

	/* Same vertical system as the home hero: centred in --hero-min-h with
	   --hero-pad-y as the floor. The left inset is the home hero's own
	   padding-left formula rewritten for a full-width box, so the headline
	   starts on the header logo's edge on both pages. */
	.lp-hero__inner {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: flex-start;
		height: 100%;
		min-height: var(--hero-min-h);
		max-width: none;
		/*
		 * Not centred: centring puts the block's midpoint on the hero's
		 * midpoint, so the eyebrow pushes the headline down by its own height.
		 * Backing that height and its gap out of --lp-title-top lands the
		 * headline on exactly the home hero's line, with the eyebrow above it.
		 */
		padding-top: calc(
			var(--lp-title-top) - var(--sec-eyebrow) * 1.2 - var(--hero-gap-sm)
		);
		padding-bottom: 0;
		padding-right: var(--gutter);
		padding-left: max(
			var(--gutter),
			calc(50% - var(--container) / 2 + var(--gutter) + 20px)
		);
	}

	.lp-hero__panel {
		max-width: 660px;
		padding-left: 0;
	}

	.lp-hero__lede {
		max-width: 666px;
	}
}

@media (min-width: 1280px) {
	.lp-hero {
		--lp-title-top: 146px;
	}

	.lp-hero__panel {
		max-width: 740px;
	}
}

@media (min-width: 1536px) {
	.lp-hero {
		--lp-title-top: 147px;
	}

	.lp-hero__panel {
		max-width: 820px;
	}
}

/* --------------------------------------------------------------------------
   Loan Programs — programme groups ("Standard & government loans" and the
   five groups under it)

   A catalogue, not six marketing sections: group name, then a plain card grid.
   One border, one radius, no card inside a card.

   With 31 cards on the page, vertical space is the scarce resource. The band
   padding and the card padding are deliberately tighter than the home page's
   — scaled off the shared tokens rather than hard-coded, so retuning a
   breakpoint still retunes this page with the rest of the site.

   The band is cream and the cards are white, which is the reverse of the
   .specialty grid; that keeps the cards reading as objects on a surface rather
   than as another tinted panel stacked under the banner.
   -------------------------------------------------------------------------- */
.lp-group {
	background: var(--cream);
	padding-block: calc(var(--sec-y) * 0.45);
}

/*
 * The groups are one continuous cream field, divided by a rule rather than by
 * alternating backgrounds. The rule is the section's own top border, so it
 * spans the viewport and needs no element of its own — and the first group,
 * which meets the banner, correctly has none.
 */
.lp-group + .lp-group {
	border-top: 1px solid var(--line);
}

.lp-group__title {
	margin: 0 0 calc(var(--goals-grid-gap) * 0.55);
	font-family: var(--display);
	/* Playfair defaults to oldstyle figures — see .lp-card__name below. */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	font-size: var(--sec-title);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
}

.lp-group__grid {
	display: grid;
	/* minmax(0, …), not 1fr: a `1fr` track floors at its content's min-content
	   width, so a long unbroken word cannot push the grid past the container. */
	grid-template-columns: minmax(0, 1fr);
	/*
	 * One height for every card in the group, set by its tallest: `1fr` rows
	 * plus the default stretch. Deliberately scoped per group — the six groups
	 * do not share a height, only the cards inside each one do.
	 */
	grid-auto-rows: 1fr;
	gap: var(--sp-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Cards in a row stay the same height because the grid stretches them, so the
 * copy lengths differing between programmes never staggers the row. The dot,
 * name and copy are direct children — flat, not wrapped in an inner body.
 *
 * The right padding is a token slice rather than the full gutter: the copy is
 * two or three lines of small text, and holding it off the right edge as far
 * as the left only buys an extra wrapped line per card, times 31.
 */
.lp-card {
	padding: calc(var(--sp-card-pad) * 0.7) calc(var(--sp-card-pad) * 0.45)
		calc(var(--sp-card-pad) * 0.7) var(--sp-card-pad);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 6px;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.lp-card:hover {
	border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
	box-shadow: 0 14px 30px -18px rgba(1, 34, 67, 0.32);
	transform: translateY(-2px);
}

.lp-card__dot {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold);
}

.lp-card__name {
	margin: 12px 0 0;
	font-family: var(--display);
	/*
	 * Playfair Display defaults to oldstyle figures: 1 and 0 sit at x-height
	 * and 4 and 9 drop below the baseline, so "1099", "DSCR 1–4 Units" and
	 * "3-2-1 Buydown" read as undersized and off the line beside the caps.
	 * Lining figures put them on the cap line at full height. Same pair of
	 * declarations the calculator figures use, without tabular — these are
	 * names, not columns of numbers, so the digits keep their natural widths.
	 */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	font-size: var(--sp-title);
	font-weight: 500;
	line-height: 1.22;
	color: var(--ink);
	/* Wraps freely: every name keeps --sp-title, and the row's height already
	   absorbs a second line because the cards share one height per group. */
	text-wrap: pretty;
}

.lp-card__copy {
	margin: 8px 0 0;
	font-size: var(--sp-copy);
	line-height: 1.55;
	color: rgba(11, 37, 69, 0.68);
}

@media (min-width: 768px) {
	.lp-group__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.lp-group__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.lp-group__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Loan Programs — sticky scroll-spy rail

   The catalogue is long enough that the group you are in stops being obvious,
   so it carries its own contents list. Three constraints shape the mechanism:

   1. the groups keep full-bleed backgrounds and full-width dividers, so they
      cannot be moved into a grid column beside the rail;
   2. the rail must never overlap the banner above or the page content below;
   3. it must not sit on top of the cards.

   So the rail is an absolutely positioned track spanning exactly .lp-catalogue,
   with the list sticky inside it. Sticky is clamped by its containing block,
   which means the browser — not scroll maths — guarantees constraints 1 and 2.
   For 3, the groups' containers get extra right padding to reserve the track's
   width. Below 1080 there is no room for a side rail, so none of this applies.
   -------------------------------------------------------------------------- */
.lp-catalogue {
	position: relative;
}

.lp-catalogue__rail {
	display: none;
}

@media (min-width: 1080px) {
	.lp-catalogue {
		--lp-toc-w: 186px;
		/* Clear of the sticky header, plus breathing room. */
		--lp-toc-top: calc(var(--header-h) + 32px);
	}

	.lp-catalogue__rail {
		display: block;
		position: absolute;
		top: 0;
		right: max(
			var(--gutter),
			calc(50% - var(--container) / 2 + var(--gutter))
		);
		bottom: 0;
		width: var(--lp-toc-w);
		/* The track spans the whole catalogue; only the list itself is a
		   target, so hovering a card through the empty part still works. */
		pointer-events: none;
	}

	/*
	 * The rail floats over the cards rather than reserving a column, so the
	 * grid keeps its full width. That puts small text over card text, so it
	 * carries its own surface — tinted and blurred, no border or shadow, which
	 * separates it enough to read without turning it into a panel.
	 */
	.lp-toc {
		position: sticky;
		top: var(--lp-toc-top);
		pointer-events: auto;
		padding: 14px 16px;
		border-radius: 8px;
		background: color-mix(in srgb, var(--cream) 88%, transparent);
		backdrop-filter: blur(8px);
		/*
		 * Hidden until the catalogue reaches the sticky line, so it fades in as
		 * you arrive rather than being parked over the banner's lower edge.
		 * JS adds .is-visible; without JS the rail simply never appears and the
		 * page is unchanged.
		 */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
			visibility 0s linear 0.35s;
	}

	.lp-toc.is-visible {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
			visibility 0s;
	}

	.lp-toc__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-left: 1px solid var(--line);
	}

	/*
	 * The active marker is the item's own left border sitting on top of the
	 * list's hairline, so the indicator travels the rail instead of each item
	 * carrying a separate dot or pill.
	 */
	.lp-toc__link {
		display: block;
		margin-left: -1px;
		padding: 9px 0 9px 14px;
		border-left: 2px solid transparent;
		font-size: 13px;
		line-height: 1.35;
		color: rgba(11, 37, 69, 0.55);
		text-decoration: none;
		text-wrap: pretty;
		transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
	}

	.lp-toc__link:hover,
	.lp-toc__link:focus-visible {
		color: var(--ink);
	}

	.lp-toc__link.is-current {
		border-left-color: var(--gold);
		color: var(--ink);
		font-weight: 600;
	}

	/* Anchor jumps and the JS scroll both land below the sticky header. */
	.lp-group {
		scroll-margin-top: calc(var(--header-h) + 16px);
	}
}

@media (min-width: 1280px) {
	.lp-catalogue {
		--lp-toc-w: 208px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-toc,
	.lp-toc.is-visible {
		transform: none;
		transition: opacity 0.2s linear;
	}
}

/* --------------------------------------------------------------------------
   Loan Programs — closing CTA panel

   Built from the reference: a navy panel inset from the page edges, centred,
   with one action. Deliberately not the home page's .final-cta, which is a
   full-bleed band with a left-aligned split head and two buttons — after 31
   programme cards this page wants a single quiet close, and the inset panel
   reads as a full stop rather than another band.

   Sizes come from the tokens the page already uses: --sec-title for the
   headline, --calc-lede for the copy, --cta-pad-y for the panel's padding.
   -------------------------------------------------------------------------- */
.lp-cta {
	background: var(--white);
	padding-block: calc(var(--sec-y) * 0.6);
}

.lp-cta__panel {
	padding: calc(var(--cta-pad-y) * 1.15) var(--gutter);
	border-radius: var(--radius-panel);
	background: var(--navy);
	text-align: center;
}

.lp-cta__title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--sec-title);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--white);
	text-wrap: balance;
}

.lp-cta__lede {
	/* Two lines at desktop, as in the reference: wide enough to break after
	   "situation", narrow enough not to run the full panel width. */
	max-width: 56ch;
	margin: 18px auto 0;
	font-size: var(--calc-lede);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	text-wrap: pretty;
}

.lp-cta__btn {
	margin-top: 32px;
}

@media (min-width: 768px) {
	.lp-cta__panel {
		padding-inline: calc(var(--gutter) * 2);
	}

	.lp-cta__lede {
		margin-top: 20px;
	}

	.lp-cta__btn {
		margin-top: 38px;
	}
}

/* --------------------------------------------------------------------------
   Loan Programs — programme disclaimer

   Last block before the footer: the legal line about the programme summaries,
   after the closing CTA so the page ends on compliance copy, not marketing.
   -------------------------------------------------------------------------- */
.lp-disclaimer {
	background: #f3f5f7;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding-block: 22px;
}

.lp-disclaimer__text {
	margin: 0;
	max-width: none;
	font-size: var(--footer-disclaimer);
	line-height: 1.65;
	color: rgba(58, 62, 68, 0.82);
}

/* --------------------------------------------------------------------------
   Loan Programs — lending partners marquee

   The heading keeps the page container; only the two strips run the full
   viewport, which is the one place on this page that breaks the grid.

   Each rail holds a track with the lender list rendered twice. The animation
   moves the track by exactly -50% — one full copy — so the moment it resets,
   copy two is sitting exactly where copy one began and the loop is invisible.
   Row one travels right-to-left; row two runs the same animation in reverse.

   No JavaScript: the strip is decorative motion, and CSS alone keeps it out of
   the main thread. Hovering pauses it so a name can be read.
   -------------------------------------------------------------------------- */
.lenders {
	background: var(--cream);
	padding-block: calc(var(--sec-y) * 0.6);
	overflow: hidden;
}

.lenders__title {
	margin: var(--sec-head-gap) 0 0;
	font-family: var(--display);
	font-size: var(--sec-title);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
}

.lenders__lede {
	max-width: 62ch;
	margin: 16px 0 0;
	font-size: var(--goal-copy);
	line-height: 1.6;
	color: rgba(11, 37, 69, 0.68);
	text-wrap: pretty;
}

.lenders__rails {
	display: grid;
	gap: var(--sp-grid-gap);
	margin-top: calc(var(--goals-grid-gap) * 0.85);
}

.lenders__rail {
	overflow: hidden;
	/* Fades the strip into the band at both edges instead of cutting the
	   tiles off against the viewport. */
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 96px,
		#000 calc(100% - 96px),
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 96px,
		#000 calc(100% - 96px),
		transparent 100%
	);
}

.lenders__track {
	display: flex;
	/* `max-content` keeps the two copies on one line whatever the list length;
	   without it the flex line would wrap and the loop would break. */
	width: max-content;
	gap: var(--sp-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	animation: lender-scroll 64s linear infinite;
}

.lenders__rail--rtl .lenders__track {
	animation-direction: reverse;
	/* Slightly out of step with row one so the two rows never lock into a
	   visible column. */
	animation-duration: 58s;
}

.lenders__rails:hover .lenders__track,
.lenders__rails:focus-within .lenders__track {
	animation-play-state: paused;
}

@keyframes lender-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* One copy of the list, gap included — the seam lands exactly. */
		transform: translateX(calc(-50% - var(--sp-grid-gap) / 2));
	}
}

.lender {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	padding: 12px 20px 12px 12px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 8px;
}

.lender__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--white);
}

.lender__mark--navy {
	background: var(--navy-lift);
}

/* The deeper end of each tone: white initials on --gold-fill or --sage read as
   washed at 12px. */
.lender__mark--gold {
	background: var(--gold-strong);
}

.lender__mark--sage {
	background: var(--sage-strong);
}

/* A supplied logo sits in the same 34px box as the monogram it replaces, so
   the row's rhythm does not change as marks arrive one at a time. */
.lender__logo {
	width: 34px;
	height: 34px;
	flex: none;
	object-fit: contain;
}

.lender__name {
	white-space: nowrap;
	font-size: var(--sp-copy);
	font-weight: 600;
	color: var(--ink);
}

@media (min-width: 768px) {
	.lender {
		padding: 14px 24px 14px 14px;
	}

	.lender__mark,
	.lender__logo {
		width: 38px;
		height: 38px;
	}

	.lender__mark {
		font-size: 13px;
	}
}

/*
 * Motion is the whole point of the strip, so with reduced motion it stops and
 * becomes a normal horizontally scrollable row rather than disappearing.
 */
@media (prefers-reduced-motion: reduce) {
	.lenders__track {
		animation: none;
	}

	.lenders__rail {
		overflow-x: auto;
		scrollbar-width: thin;
	}
}

/* ==========================================================================
   Mortgage Calculators hub (top of the calculator page)
   Built from design/mortgage-calculators-reference.png, measured at 1600px:
   50px outer margin, a 380px sidebar with a hairline on its right, then two
   card columns of 532 / 544px with a 20px gap.

   The hub scrolls with the page as one block — no sticky sidebar — so there
   is never a second scroll feel inside it. Every size is a custom property on
   .mc-hub__inner; the breakpoints only swap values, stepping the design down
   so the two-column card grid holds on laptop widths instead of stacking.

   The house illustration and the "Still deciding" band bleed to the viewport
   edge, so .mc-hub clips horizontal overflow.
   ========================================================================== */

.mc-hub {
	background: var(--cream);
	overflow-x: clip;
}

.mc-hub__inner {
	--mc-max: 1600px;
	--mc-pad: var(--gutter);
	/* Distance from the content edge to the viewport edge. */
	--mc-bleed: calc(var(--mc-pad) + max(0px, (100vw - var(--mc-max)) / 2));
	--mc-side-pad: 0px; /* sidebar padding on the hairline side */
	--mc-main-pad: 0px; /* main padding on the hairline side */

	/* Sidebar */
	--mc-intro-top: 40px;
	--mc-eyebrow: 12px;
	--mc-eyebrow-track: 0.24em;
	--mc-title: 44px;
	--mc-title-gap: 18px;
	--mc-rule-gap: 24px;
	--mc-lede: 17px;
	--mc-lede-lh: 1.6;
	--mc-lede-gap: 24px;
	--mc-divider-gap: 32px;
	--mc-star: 56px;
	--mc-tagline: 20px;
	--mc-tagline-lh: 1.45;
	--mc-art-h: 280px;
	--mc-art-img: 460px;
	--mc-sig-track: 0.16em;
	--mc-sig-shift: 0px;

	/* Groups */
	--mc-main-top: 16px;
	--mc-group-gap: 28px;
	--mc-head-gap: 16px;
	--mc-label: 15px;
	--mc-tag: 11px;
	--mc-grid-gap: 14px;

	/* Regular card */
	--mc-card-min: 0px;
	--mc-card-pad: 16px 14px 16px 16px;
	--mc-icon: 52px;
	--mc-body-gap: 14px;
	--mc-card-title: 18px;
	--mc-copy: 14.5px;
	--mc-copy-max: none;
	--mc-arrow: 36px;
	--mc-arrow-gap: 10px;
	--mc-single-min: 0px;
	--mc-single-pad-y: 16px;
	--mc-single-title: 19px;

	/* Featured card */
	--mc-feat-pad: 22px 18px 70px 20px;
	--mc-feat-icon: 60px;
	--mc-feat-body-gap: 14px;
	--mc-feat-title: 22px;
	--mc-feat-copy: 16px;
	--mc-feat-copy-gap: 8px;
	--mc-feat-copy-max: 400px;
	--mc-feat-arrow: 40px;
	--mc-feat-arrow-inset: 16px;

	max-width: var(--mc-max);
	margin-inline: auto;
	padding-inline: var(--mc-pad);
}

/* --- Sidebar ------------------------------------------------------------ */

.mc-hub__sidebar {
	display: flex;
	flex-direction: column;
	background: var(--cream);
}

.mc-hub__intro {
	position: relative;
	z-index: 1;
	padding-top: var(--mc-intro-top);
}

.mc-hub__eyebrow {
	margin: 0;
	font-size: var(--mc-eyebrow);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--mc-eyebrow-track);
	text-transform: uppercase;
	color: var(--gold);
}

.mc-hub__title {
	margin: var(--mc-title-gap) 0 0;
	font-family: var(--display);
	font-size: var(--mc-title);
	font-weight: 500;
	line-height: 1.17;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.mc-hub__rule {
	width: 59px;
	height: 3px;
	margin: var(--mc-rule-gap) 0 0;
	border: 0;
	background: var(--gold);
}

.mc-hub__lede {
	max-width: 340px;
	margin: var(--mc-lede-gap) 0 0;
	font-size: var(--mc-lede);
	line-height: var(--mc-lede-lh);
	color: #283552;
}

.mc-hub__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 340px;
	margin-top: var(--mc-divider-gap);
}

.mc-hub__divider-line {
	flex: 1;
	height: 1px;
	background: #d9c4a6;
}

.mc-hub__star {
	position: relative;
	flex: none;
	width: var(--mc-star);
	height: var(--mc-star);
	background: var(--cream);
}

/* The PNGs are drawn on off-white paper a shade lighter than the page.
   Blending with darken keeps only what is darker than the cream beneath,
   so the paper disappears and the drawing stays. */
.mc-hub__star::before,
.mc-hub__art::before {
	content: "";
	position: absolute;
	inset: 0;
	mix-blend-mode: darken;
	pointer-events: none;
}

/* The star sits in the centre ~38% of a square canvas; zooming the
   background crops that padding instead of drawing a tiny mark. */
.mc-hub__star::before {
	background: url("../images/star-clear-answers.avif") center / 252% 252% no-repeat;
}

.mc-hub__tagline {
	max-width: 340px;
	margin: 8px 0 0;
	font-family: var(--display);
	font-size: var(--mc-tagline);
	font-style: italic;
	font-weight: 400;
	line-height: var(--mc-tagline-lh);
	text-align: center;
	color: #2e5a4b;
}

.mc-hub__art {
	position: relative;
	flex: 1 0 auto;
	min-height: var(--mc-art-h);
	margin: -24px calc(-1 * var(--mc-bleed)) 0;
	background: var(--cream);
	/* Fade the art's top edge into the page. */
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 90px);
	mask-image: linear-gradient(to bottom, transparent, #000 90px);
}

.mc-hub__art::before {
	background: url("../images/bg_left-bottom-section.avif") left bottom / var(--mc-art-img) auto no-repeat;
}

.mc-hub__signature {
	position: absolute;
	z-index: 1;
	left: var(--mc-bleed);
	right: var(--mc-bleed);
	bottom: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 10px;
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--mc-sig-track);
	text-transform: uppercase;
	white-space: nowrap;
	color: #1d2b44;
	/* A cream halo keeps the caption legible where a leaf tip reaches it. */
	text-shadow: 0 0 2px var(--cream), 0 0 6px var(--cream), 0 0 10px var(--cream);
}

@media (min-width: 600px) {
	.mc-hub__signature {
		flex-wrap: nowrap;
	}
}

/* Vietnamese runs longer; tighter tracking keeps it on one line. */
[data-lang="vi"] .mc-hub__signature {
	gap: 4px 7px;
	font-size: 9.5px;
	letter-spacing: calc(var(--mc-sig-track) * 0.5);
}

/* Small phones: the same tightening keeps the English line whole instead of
   stranding a separator at the end of the first row. */
@media (max-width: 399px) {
	.mc-hub__signature {
		gap: 4px 7px;
		letter-spacing: calc(var(--mc-sig-track) * 0.5);
	}
}

.mc-hub__plus {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--gold);
}

/* --- Card groups ---------------------------------------------------------- */

.mc-hub__main {
	display: flex;
	flex-direction: column;
	gap: var(--mc-group-gap);
	min-width: 0;
	padding-top: var(--mc-main-top);
}

.mc-group__head {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: var(--mc-head-gap);
}

.mc-group__label {
	flex: none;
	margin: 0;
	font-family: var(--sans);
	font-size: var(--mc-label);
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

.mc-group__rule {
	flex: 1;
	min-width: 24px;
	height: 1px;
	background: #dcc8ad;
}

.mc-group__tag {
	display: none;
	flex: none;
	margin: 0;
	font-size: var(--mc-tag);
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #1d2b44;
}

.mc-group__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mc-grid-gap);
}

/* "Still deciding?" sits on its own band that runs to the viewport edge. */
.mc-group--tinted {
	margin: calc(22px - var(--mc-group-gap)) calc(-1 * var(--mc-bleed)) 0;
	padding: 23px var(--mc-bleed) 36px;
	/* Multiplied a shade down so the band reads as deep as the reference. */
	background: #fbf9f7 url("../images/bg_still-deciding.avif") right bottom / cover no-repeat;
	background-blend-mode: multiply;
}

/* --- Card ------------------------------------------------------------------- */

.mc-card {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--mc-card-min);
	padding: var(--mc-card-pad);
	background: #fff;
	border: 1px solid #ebe5de;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(74, 52, 30, 0.04);
	text-decoration: none;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.mc-card:hover {
	border-color: #d9c3a5;
	box-shadow: 0 14px 30px -16px rgba(74, 52, 30, 0.28);
	transform: translateY(-2px);
}

.mc-card__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--mc-icon);
	height: var(--mc-icon);
	border-radius: 50%;
	background: #e9efea;
	color: #1d4b3f;
}

.mc-card__icon svg {
	width: 50%;
	height: 50%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mc-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	margin-left: var(--mc-body-gap);
}

.mc-card__title {
	font-family: var(--display);
	font-size: var(--mc-card-title);
	font-weight: 500;
	line-height: 1.22;
	color: var(--ink);
}

.mc-card__copy {
	max-width: var(--mc-copy-max);
	margin-top: 5px;
	font-size: var(--mc-copy);
	line-height: 1.45;
	color: #3a4458;
}

.mc-card__arrow {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--mc-arrow);
	height: var(--mc-arrow);
	margin-left: var(--mc-arrow-gap);
	border: 1.5px solid var(--gold);
	border-radius: 50%;
	color: var(--gold);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.mc-card__arrow svg {
	width: 38%;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s var(--ease);
}

.mc-card:hover .mc-card__arrow {
	background: var(--gold);
	color: #fff;
}

.mc-card:hover .mc-card__arrow svg {
	transform: translateX(2px);
}

.mc-group__grid--single .mc-card {
	min-height: var(--mc-single-min);
	padding-block: var(--mc-single-pad-y);
}

.mc-group__grid--single .mc-card__title {
	font-size: var(--mc-single-title);
}

.mc-group__grid--single .mc-card__copy {
	max-width: none;
}

/* --- Featured card (Monthly Mortgage Payment) ------------------------------ */

.mc-card--featured {
	flex-direction: column;
	align-items: flex-start;
	padding: var(--mc-feat-pad);
	background: #fffdfa;
	border: 1.5px solid #b98446;
}

/* The pale arc in the bottom-right corner, drawn inside the card so nothing
   needs clipping — overflow stays visible for the badge on the top edge. */
.mc-card--featured::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 150px;
	height: 135px;
	border-bottom-right-radius: 5px;
	background: radial-gradient(circle 200px at 205px 197px, #faf3ea 99.5%, transparent 100%);
	pointer-events: none;
}

.mc-card--featured .mc-card__icon {
	width: var(--mc-feat-icon);
	height: var(--mc-feat-icon);
	background: #f7eee4;
	color: var(--gold);
}

.mc-card--featured .mc-card__body {
	flex: none;
	margin: var(--mc-feat-body-gap) 0 0;
}

.mc-card--featured .mc-card__title {
	font-size: var(--mc-feat-title);
	line-height: 1.2;
}

.mc-card--featured .mc-card__copy {
	max-width: var(--mc-feat-copy-max);
	margin-top: var(--mc-feat-copy-gap);
	font-size: var(--mc-feat-copy);
	line-height: 1.35;
}

.mc-card--featured .mc-card__arrow {
	position: absolute;
	right: var(--mc-feat-arrow-inset);
	bottom: var(--mc-feat-arrow-inset);
	width: var(--mc-feat-arrow);
	height: var(--mc-feat-arrow);
	margin: 0;
}

.mc-card__badge {
	position: absolute;
	z-index: 2;
	top: -14px;
	right: 17px;
	height: 28px;
	padding: 0 18px;
	border-radius: 999px;
	background: #a8661c;
	font-size: 11px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

/* --- Breakpoints ------------------------------------------------------------ */

@media (max-width: 599px) {
	/* On a phone the caption can land on the leaves; a soft scrim keeps it legible. */
	.mc-hub__signature {
		bottom: 0;
		padding: 24px 0 18px;
		background: linear-gradient(to top, rgba(253, 250, 245, 0.92) 55%, transparent);
	}
}

@media (min-width: 768px) {
	.mc-hub__inner {
		--mc-title: 54px;
		--mc-lede: 19px;
		--mc-lede-lh: 30px;
		--mc-tagline: 22px;
		--mc-tagline-lh: 32px;
		--mc-art-h: 320px;
		--mc-art-img: 500px;
	}

	.mc-group__tag {
		display: block;
	}
}

/* Two card columns from here: the compact step. */
@media (min-width: 900px) {
	.mc-hub__inner {
		--mc-grid-gap: 16px;
		--mc-card-min: 100px;
		--mc-card-pad: 16px 14px 16px 18px;
		--mc-icon: 60px;
		--mc-body-gap: 18px;
		--mc-card-title: 19px;
		--mc-single-min: 88px;
		--mc-single-pad-y: 12px;
		--mc-single-title: 21px;
		--mc-feat-pad: 20px 18px 66px 22px;
		--mc-feat-icon: 60px;
		--mc-feat-body-gap: 12px;
		--mc-feat-title: 24px;
		--mc-feat-copy: 16px;
		--mc-feat-arrow: 40px;
		--mc-feat-arrow-inset: 18px;
	}

	.mc-group__grid--bento,
	.mc-group__grid--pair {
		grid-template-columns: minmax(0, 532fr) minmax(0, 544fr);
	}

	.mc-group__grid--bento .mc-card--featured {
		grid-row: span 2;
	}
}

/* Sidebar beside the groups — the tight laptop step. */
@media (min-width: 1280px) {
	.mc-hub__inner {
		--mc-pad: 50px;
		--mc-side-w: 300px;
		--mc-side-pad: 32px;
		--mc-main-pad: 23px;
		--mc-intro-top: 40px;
		--mc-eyebrow: 11px;
		--mc-eyebrow-track: 0.16em;
		--mc-title: 48px;
		--mc-title-gap: 16px;
		--mc-rule-gap: 24px;
		--mc-lede: 16px;
		--mc-lede-lh: 26px;
		--mc-lede-gap: 22px;
		--mc-divider-gap: 28px;
		--mc-star: 44px;
		--mc-tagline: 18px;
		--mc-tagline-lh: 27px;
		--mc-art-h: 280px;
		--mc-art-img: 420px;
		--mc-sig-track: 0.06em;
		--mc-main-top: 26px;
		--mc-head-gap: 14px;
		--mc-card-pad: 14px 12px 14px 16px;
		--mc-icon: 52px;
		--mc-body-gap: 14px;
		--mc-card-title: 18px;
		--mc-copy: 14px;
		--mc-arrow: 34px;
		--mc-arrow-gap: 8px;
		--mc-single-title: 20px;
		--mc-feat-pad: 20px 16px 62px 20px;
		--mc-feat-icon: 56px;
		--mc-feat-title: 22px;
		--mc-feat-copy: 15px;
		--mc-feat-arrow: 38px;
		--mc-feat-arrow-inset: 16px;
		display: grid;
		grid-template-columns: var(--mc-side-w) minmax(0, 1fr);
	}

	.mc-hub__sidebar {
		padding-right: var(--mc-side-pad);
	}

	.mc-hub__art {
		margin: -30px calc(-1 * var(--mc-side-pad)) 0 calc(-1 * var(--mc-bleed));
	}

	.mc-hub__signature {
		left: calc(var(--mc-bleed) + var(--mc-sig-shift));
		right: var(--mc-side-pad);
	}

	.mc-hub__main {
		padding: var(--mc-main-top) 0 0 var(--mc-main-pad);
		border-left: 1px solid #ebe3d9;
	}

	.mc-group--tinted {
		margin-left: calc(-1 * var(--mc-main-pad));
		padding-left: var(--mc-main-pad);
	}
}

@media (min-width: 1440px) {
	.mc-hub__inner {
		--mc-side-w: 330px;
		--mc-side-pad: 36px;
		--mc-intro-top: 44px;
		--mc-eyebrow-track: 0.2em;
		--mc-title: 52px;
		--mc-title-gap: 18px;
		--mc-rule-gap: 26px;
		--mc-lede: 17px;
		--mc-lede-lh: 27px;
		--mc-lede-gap: 24px;
		--mc-divider-gap: 30px;
		--mc-star: 48px;
		--mc-tagline: 19px;
		--mc-tagline-lh: 28px;
		--mc-art-h: 300px;
		--mc-art-img: 440px;
		--mc-sig-track: 0.1em;
		--mc-main-top: 28px;
		--mc-head-gap: 16px;
		--mc-card-pad: 16px 14px 16px 18px;
		--mc-icon: 60px;
		--mc-body-gap: 18px;
		--mc-card-title: 19px;
		--mc-copy: 14.5px;
		--mc-arrow: 36px;
		--mc-arrow-gap: 10px;
		--mc-single-title: 21px;
		--mc-feat-pad: 20px 18px 66px 22px;
		--mc-feat-icon: 60px;
		--mc-feat-title: 24px;
		--mc-feat-copy: 16px;
		--mc-feat-arrow: 40px;
		--mc-feat-arrow-inset: 18px;
	}
}

/* Full reference sizes. */
@media (min-width: 1536px) {
	.mc-hub__inner {
		--mc-side-w: 380px;
		--mc-side-pad: 40px;
		--mc-intro-top: 50px;
		--mc-eyebrow: 12px;
		--mc-eyebrow-track: 0.24em;
		--mc-title: 64px;
		--mc-title-gap: 22px;
		--mc-rule-gap: 30px;
		--mc-lede: 19px;
		--mc-lede-lh: 30px;
		--mc-lede-gap: 27px;
		--mc-divider-gap: 37px;
		--mc-star: 56px;
		--mc-tagline: 22px;
		--mc-tagline-lh: 32px;
		--mc-art-h: 340px;
		--mc-art-img: 510px;
		--mc-sig-track: 0.16em;
		--mc-sig-shift: 20px;
		--mc-main-top: 32px;
		--mc-group-gap: 34px;
		--mc-head-gap: 21px;
		--mc-label: 17px;
		--mc-tag: 12px;
		--mc-grid-gap: 20px;
		--mc-card-min: 119px;
		--mc-card-pad: 20px 16px 20px 24px;
		--mc-icon: 78px;
		--mc-body-gap: 30px;
		--mc-card-title: 23px;
		--mc-copy: 16px;
		--mc-copy-max: 342px;
		--mc-arrow: 42px;
		--mc-arrow-gap: 12px;
		--mc-single-min: 103px;
		--mc-single-title: 25px;
		--mc-feat-pad: 25px 24px 22px 33px;
		--mc-feat-icon: 78px;
		--mc-feat-body-gap: 16px;
		--mc-feat-title: 29px;
		--mc-feat-copy: 19px;
		--mc-feat-copy-gap: 12px;
		--mc-feat-arrow: 46px;
		--mc-feat-arrow-inset: 22px;
	}

	.mc-card--featured .mc-card__arrow {
		right: 24px;
	}
}

/* ==========================================================================
   About page
   Built from design/about-reference.png, measured at 1600px. Widths use the
   site .container so the page lines up with every other template; the
   H2s use --sec-title like the rest of the site. Sizes are tokens on the
   template's body class and the breakpoints only swap values.
   ========================================================================== */

.page-template-template-about {
	--ab-navy: #0b2740;
	--ab-gold: #c9a063;
	--ab-text: #2b3a58;

	--ab-hero-min: 0px;
	--ab-hero-pad: 56px;
	--ab-hero-title: 34px;
	--ab-hero-lede: 17px;
	--ab-hero-lede-lh: 1.55;

	--ab-sec-pad: 48px;
	--ab-h2: var(--sec-title);
	--ab-copy: 17px;
	--ab-copy-lh: 1.6;

	--ab-pr-icon: 72px;
	--ab-pr-title: 21px;
	--ab-pr-copy: 16px;
	--ab-pr-copy-lh: 1.6;

	--ab-team-gap: 20px;
	--ab-name: 21px;
	--ab-role: 15px;
	--ab-bio: 15px;
	--ab-bio-lh: 1.6;

	--ab-cta-title: 32px;
	--ab-cta-lede: 17px;
}

/* --- Shared eyebrow + heading --------------------------------------------- */

.ab-heading {
	margin: 0;
	font-family: var(--display);
	font-size: var(--ab-h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
}

/* --- Banner ----------------------------------------------------------------- */

.ab-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--ab-hero-min);
	background:
		linear-gradient(rgba(11, 39, 64, 0.8), rgba(11, 39, 64, 0.8)),
		var(--ab-navy) url("../images/about-banner-image.avif") 70% center / cover no-repeat;
	color: #fff;
}

.ab-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--ab-hero-pad);
}

.ab-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.ab-hero__sep {
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0;
}

.ab-hero__title {
	margin: 22px 0 0;
	font-family: var(--display);
	font-size: var(--ab-hero-title);
	font-weight: 600;
	line-height: 1.17;
	letter-spacing: -0.01em;
	color: #fff;
}

.ab-hero__lede {
	max-width: 650px;
	text-wrap: pretty;
	margin: 22px 0 0;
	font-size: var(--ab-hero-lede);
	line-height: var(--ab-hero-lede-lh);
	color: rgba(255, 255, 255, 0.9);
}

/* Vietnamese runs longer in a wider face; scaled so it stays on the navy. */
[data-lang="vi"] .ab-hero__title {
	font-size: calc(var(--ab-hero-title) * 0.74);
}

/* The line set on the stone wall of the house. */
.ab-hero__aside {
	display: none;
	position: absolute;
	top: 50%;
	right: 44px;
	margin: 0;
	transform: translateY(-50%);
	font-size: 13px;
	font-weight: 500;
	line-height: 31px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.ab-hero__aside::after {
	content: "";
	display: block;
	width: 80px;
	height: 2px;
	margin-top: 30px;
	background: var(--ab-gold);
}

/* --- Story + mission -------------------------------------------------------- */

.ab-intro {
	background: #fdfdfb;
	padding-block: var(--ab-sec-pad);
}

.ab-intro__grid {
	display: grid;
	gap: 32px;
}

.ab-intro__col--mission {
	padding-top: 32px;
	border-top: 1px solid #dde1e6;
}

.ab-intro__copy {
	max-width: 612px;
	margin: 14px 0 0;
	font-size: var(--ab-copy);
	line-height: var(--ab-copy-lh);
	color: var(--ab-text);
}

/* --- Principles band -------------------------------------------------------- */

.ab-principles {
	background: #eceff0;
	padding-block: 32px;
}

.ab-principles__grid {
	display: grid;
	gap: 24px;
	margin-block: 0;
	list-style: none;
}

.ab-principle {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.ab-principle + .ab-principle {
	padding-top: 24px;
	border-top: 1px solid #cfd5da;
}

.ab-principle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--ab-pr-icon);
	height: var(--ab-pr-icon);
	border: 1.5px solid var(--ab-gold);
	border-radius: 50%;
	color: var(--ab-gold);
}

.ab-principle__icon svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ab-principle__body {
	padding-top: 6px;
}

.ab-principle__title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--ab-pr-title);
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
}

.ab-principle__copy {
	margin: 10px 0 0;
	font-size: var(--ab-pr-copy);
	line-height: var(--ab-pr-copy-lh);
	color: var(--ab-text);
}

/* --- Team ------------------------------------------------------------------- */

.ab-team {
	background: #fcfbfa;
	padding-block: var(--ab-sec-pad) calc(var(--ab-sec-pad) + 8px);
}

.ab-team__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 32px;
}

.ab-team__tagline {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0 0 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
}

.ab-team__tagline::before {
	content: "";
	flex: none;
	width: 37px;
	height: 1.5px;
	background: var(--ab-gold);
}

.ab-team__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ab-team-gap);
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.ab-member {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid transparent;
	box-shadow: 0 2px 14px rgba(20, 35, 60, 0.06);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.ab-member:hover,
.ab-member--lead {
	border-color: var(--ab-gold);
}

.ab-member:hover {
	box-shadow: 0 14px 30px -18px rgba(20, 35, 60, 0.35);
}

.ab-member__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: linear-gradient(160deg, #eef1f4, #dce2e9);
}

/* The founder's card is framed: her photo sits inset inside the gold border. */
.ab-member--lead .ab-member__photo {
	margin: 8px 8px 0;
}

.ab-member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ab-member__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #a6b1bf;
}

.ab-member__placeholder svg {
	width: 34%;
	height: 34%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ab-member__body {
	padding: 18px 18px 26px 26px;
}

.ab-member--lead .ab-member__body {
	padding-inline: 25px 24px;
}

.ab-member__name {
	margin: 0;
	font-family: var(--display);
	font-size: var(--ab-name);
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
}

.ab-member__role {
	margin: 6px 0 0;
	font-size: var(--ab-role);
	line-height: 1.4;
	color: #4a5670;
}

.ab-member__role::after {
	content: "";
	display: block;
	width: 55px;
	height: 2px;
	margin-top: 20px;
	background: var(--ab-gold);
}

.ab-member__bio {
	margin: 16px 0 0;
	font-size: var(--ab-bio);
	line-height: var(--ab-bio-lh);
	color: #3a4458;
}

/* --- Reviews (home slider, About copy) -------------------------------------- */

.wt--about .wt__heading {
	max-width: none;
	font-size: calc(var(--ab-h2) * 0.9);
	font-weight: 600;
}

.wt--about .wt__lede {
	font-size: var(--ab-copy);
	line-height: var(--ab-copy-lh);
	color: var(--ab-text);
}

/* --- Let's talk band -------------------------------------------------------- */

.ab-cta {
	background:
		linear-gradient(90deg, rgba(10, 39, 64, 0.97) 0%, rgba(10, 39, 64, 0.93) 50%, rgba(10, 39, 64, 0.62) 74%, rgba(10, 39, 64, 0.4) 100%),
		var(--ab-navy) url("../images/bg_have-question.avif") right 62% / cover no-repeat;
	padding-block: 34px;
	color: #fff;
}

.ab-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.ab-cta__title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--ab-cta-title);
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}

.ab-cta__lede {
	margin: 8px 0 0;
	font-size: var(--ab-cta-lede);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.ab-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 253px;
	height: 65px;
	border-radius: 3px;
	background: linear-gradient(180deg, #e3c37c 0%, #c9a45a 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
	font-size: 18px;
	font-weight: 600;
	color: var(--ab-navy);
	text-decoration: none;
	transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}

.ab-cta__btn:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

/* --- Breakpoints ------------------------------------------------------------ */

@media (min-width: 600px) {
	.ab-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.page-template-template-about {
		--ab-hero-title: 42px;
		--ab-hero-lede: 19px;
		--ab-copy: 19px;
		--ab-cta-title: 38px;
		--ab-cta-lede: 18px;
	}

	/* Three people sit in one row; four keep the two-by-two. */
	.ab-team__grid {
		grid-template-columns: repeat(var(--ab-team-cols-md, 2), minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.ab-intro__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}

	.ab-intro__col {
		padding-right: 60px;
	}

	.ab-intro__col--mission {
		padding: 0 0 0 94px;
		border-top: 0;
		border-left: 1px solid #dde1e6;
	}

	.ab-principles__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
	}

	.ab-principle {
		padding-right: 24px;
	}

	.ab-principle + .ab-principle {
		padding: 0 24px 0 32px;
		border-top: 0;
		border-left: 1px solid #cfd5da;
	}

	.ab-cta__inner {
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}
}

@media (min-width: 1080px) {
	.page-template-template-about {
		--ab-hero-min: 380px;
		--ab-hero-title: 48px;
		--ab-pr-icon: 92px;
		--ab-pr-title: 22px;
		--ab-pr-copy: 17px;
		--ab-pr-copy-lh: 28px;
		--ab-team-gap: 24px;
		--ab-name: 20px;
	}

	/* Navy holds the copy on the left, then gives way to the photograph. */
	.ab-hero {
		background:
			linear-gradient(90deg, #0b2740 0%, #0b2740 36%, rgba(11, 39, 64, 0.82) 46%, rgba(11, 39, 64, 0.32) 58%, rgba(11, 39, 64, 0) 70%),
			var(--ab-navy) url("../images/about-banner-image.avif") right center / cover no-repeat;
	}

	.ab-principle {
		gap: 30px;
	}

	.ab-team__grid {
		grid-template-columns: repeat(var(--ab-team-cols, 4), minmax(0, 1fr));
	}

	.wt--about {
		padding-block: 36px 64px;
	}

	.ab-team {
		padding-bottom: 40px;
	}
}

@media (min-width: 1280px) {
	.page-template-template-about {
		--ab-hero-min: 400px;
		--ab-hero-title: 50px;
		--ab-hero-lede: 21px;
		--ab-hero-lede-lh: 30px;
		--ab-sec-pad: 44px;
		--ab-h2: 56px;
		--ab-copy: 21px;
		--ab-copy-lh: 32px;
		--ab-pr-icon: 100px;
		--ab-pr-title: 23px;
		--ab-pr-copy: 18px;
		--ab-pr-copy-lh: 28px;
		--ab-team-gap: 28px;
		--ab-name: 22px;
		--ab-role: 17px;
		--ab-bio: 17px;
		--ab-bio-lh: 25px;
		--ab-cta-title: 44px;
		--ab-cta-lede: 20px;
	}

	.ab-principle {
		padding-right: 12px;
	}

	.ab-principle + .ab-principle {
		padding: 0 12px 0 36px;
	}

	/* The line sits on the stone wall at the photo's right edge, which only
	   stays wide enough for it from here up. */
	.ab-hero__aside {
		display: block;
		right: 18px;
	}

	.ab-cta__inner {
		gap: 107px;
	}
}

/* Full reference sizes. */
@media (min-width: 1536px) {
	.page-template-template-about {
		--ab-hero-min: 411px;
		--ab-hero-title: 58px;
		--ab-hero-lede: 23px;
		--ab-hero-lede-lh: 31px;
		--ab-h2: 60px;
		--ab-copy: 23px;
		--ab-copy-lh: 34px;
		--ab-pr-icon: 112px;
		--ab-pr-title: 25px;
		--ab-pr-copy: 20px;
		--ab-pr-copy-lh: 30px;
		--ab-team-gap: 32px;
		--ab-name: 24px;
		--ab-role: 17px;
		--ab-bio: 19px;
		--ab-bio-lh: 26px;
		--ab-cta-title: 48px;
		--ab-cta-lede: 22px;
	}

	.ab-principle {
		gap: 34px;
	}

	.ab-hero__aside {
		right: 44px;
	}

	/* Wider, flatter photo than the home page: 848 x 400 in the reference.
	   Only at full width — narrower, the quote needs the home page's ratio. */
	.wt--about .wt__grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	}

	.wt--about .wt__stage {
		aspect-ratio: 848 / 400;
	}
}

/* ==========================================================================
   Vietnamese layout
   Vietnamese copy runs longer than English, and Be Vietnam Pro sets wider
   than Playfair and Mulish. Vietnamese words are space-separated syllables,
   so the browser can break inside a word ("niên | kim"). Short text is
   balanced so its lines come out even, paragraphs avoid a lone last
   syllable, and display headings are resized so each designed phrase still
   fits on one line. English is untouched.
   ========================================================================== */

/* The longhand leaves any deliberate nowrap in place. */
[data-lang="vi"] :is(h1, h2, h3, h4, h5, h6, legend, summary, dt, th, label, button, .btn, [class*="__title"], [class*="__heading"], [class*="__label"], [class*="__name"], [class*="eyebrow"]) {
	text-wrap-style: balance;
}

[data-lang="vi"] :is(p, li, dd, blockquote, figcaption) {
	text-wrap-style: pretty;
}

/* Home hero: sized from the widest Vietnamese phrase at each breakpoint. */
[data-lang="vi"] .hero__title {
	font-size: min(34px, 7.5vw);
}

@media (min-width: 600px) {
	[data-lang="vi"] .hero__title {
		font-size: 46px;
	}
}

@media (min-width: 768px) {
	[data-lang="vi"] .hero__title {
		font-size: 47px;
	}
}

@media (min-width: 1080px) {
	[data-lang="vi"] .hero__title {
		font-size: 38px;
	}
}

@media (min-width: 1280px) {
	[data-lang="vi"] .hero__title {
		font-size: 44px;
	}
}

@media (min-width: 1536px) {
	[data-lang="vi"] .hero__title {
		font-size: 54px;
	}
}

/* Reviews: the Vietnamese heading cannot fit the English one-line layout. */
[data-lang="vi"] .wt:not(.wt--about) .wt__heading {
	white-space: normal;
}

/* Quotes run about a line longer in Vietnamese. */
[data-lang="vi"] .wt__text {
	-webkit-line-clamp: 6;
}

/* VIP heading: each line stays whole on narrow phones. */
[data-lang="vi"] .vip__heading {
	font-size: min(var(--sec-title), 6.2vw);
}

/* Mortgage calculator hub title, two-column layouts only. */
@media (min-width: 1280px) {
	[data-lang="vi"] .mc-hub__title {
		font-size: calc(var(--mc-title) * 0.85);
	}
}

/* Footer licensed states: same names, wider face. */
[data-lang="vi"] .footer-states__list {
	font-size: 13px;
}

/* Loan programs hero: the accent clause keeps to one line. */
[data-lang="vi"] .lp-hero__title {
	font-size: calc(var(--hero-title) * 0.85);
}

/* Pre-approval wizard: keep every choice on one line on phones. The
   six-option income step drops to two columns, as the other large steps
   already do below 768px. */
[data-lang="vi"] .qualify-option span {
	font-size: min(var(--q-opt-size), 3.7vw);
}

@media (max-width: 479px) {
	[data-lang="vi"] .qualify__options--grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Article cards: views and likes (inc/article-stats.php)
   Quiet by design, in the card's own text colour; sized in em so each
   surface sets only the font size.
   ========================================================================== */

.ja-counts {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.9em;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--body);
	opacity: 0.75;
	white-space: nowrap;
}

.ja-counts__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.ja-counts svg {
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}