/*
 * FASS Real Estate — design system.
 *
 * Palette and type are carried over from fassresga.com: Playfair Display for
 * display type, Poppins for everything else, on black / ivory / white grounds
 * with the brand red as the accent.
 *
 * Contents
 *   1.  Tokens
 *   2.  Reset and base
 *   3.  Grounds
 *   4.  Layout: wrap, section
 *   5.  Type: headings, eyebrow, prose
 *   6.  Buttons
 *   7.  Masthead, nav, drawer
 *   8.  Hero
 *   9.  Page head
 *   10. Split
 *   11. Cards / service cards / pillars
 *   12. Leadership and bios
 *   13. Reviews
 *   14. Tiers and checklists
 *   15. Property cards, grid, filters, detail
 *   16. Blog
 *   17. Forms
 *   18. Footer
 *   19. Utilities, reveal, motion
 */

/* ------------------------------------------------------------------ 1. Tokens */

:root {
	--ink: #000000;
	--ink-soft: #191919;
	--charcoal: #101517;
	--cream: #f3f0e8;
	--white: #ffffff;
	--red: #c73526;
	--red-deep: #c72e20;
	--gold: #b4a078;
	--grey: #54595f;
	--grey-line: #dcdcde;

	/* Ground-scoped roles. Every component paints with these, so one ground
	   class repaints an entire band with no per-ground variants. */
	--bg: var(--white);
	--text: var(--ink);
	--muted: var(--grey);
	--rule: var(--grey-line);
	--accent: var(--red);
	--heading: var(--ink);

	--display: "Playfair Display", Georgia, "Times New Roman", serif;
	--body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--wrap: 1320px;
	--wrap-narrow: 820px;
	--gutter: clamp(20px, 5vw, 60px);
	--band: clamp(64px, 9vw, 132px);

	--radius: 2px;
	--speed: .35s;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------- 2. Reset and base */

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

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

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; }
img, video { height: auto; display: block; }

/* A theme must not depend on a reset it does not ship: without this, figures
   sit 16px lower on hand-built pages than on builder pages, where Elementor's
   own reset zeroes the browser default of `figure { margin: 1em 40px }`. */
figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

button { font: inherit; color: inherit; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--ink);
	color: var(--white);
}
.skip-link:focus { left: 0; }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- 3. Grounds */

.ground-white { --bg: var(--white); --text: var(--ink); --heading: var(--ink); --muted: var(--grey); --rule: var(--grey-line); --accent: var(--red); }
.ground-cream { --bg: var(--cream); --text: var(--ink); --heading: var(--ink); --muted: #6b6b6b; --rule: #ddd8cb; --accent: var(--red); }
.ground-ink   { --bg: var(--ink); --text: #e9e7e2; --heading: var(--white); --muted: #a9a49a; --rule: rgba(255,255,255,.18); --accent: var(--gold); }
.ground-deep  { --bg: var(--charcoal); --text: #e2e4e6; --heading: var(--white); --muted: #9aa1a6; --rule: rgba(255,255,255,.16); --accent: var(--gold); }
.ground-red   { --bg: var(--red); --text: #fdeeec; --heading: var(--white); --muted: #f3cfca; --rule: rgba(255,255,255,.28); --accent: var(--white); }

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

/* -------------------------------------------------- 4. Layout: wrap, section */

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

.section {
	position: relative;
	padding-block: var(--band);
}
.section--pagehead { padding-block: clamp(72px, 10vw, 150px); }
.section--cta { padding-block: clamp(56px, 7vw, 100px); }

.section__head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 760px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__lede { color: var(--muted); font-size: 1.0625rem; }

/* ---------------------------------------------------------------- 5. Type */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: .01em;
	color: var(--heading);
}

h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
h4 { font-size: 1.125rem; }

.eyebrow {
	margin: 0 0 .9em;
	font-family: var(--body);
	font-size: .875rem;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
}

.prose { font-size: 1.0625rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose a { color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose img { margin-block: 1.5em; }
.prose blockquote {
	margin-block: 1.5em;
	padding-left: 1.2em;
	border-left: 2px solid var(--accent);
	font-family: var(--display);
	font-size: 1.25rem;
	font-style: italic;
}

/* ------------------------------------------------------------- 6. Buttons */

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin-top: 1.8em;
}
.btn-row--center { justify-content: center; }

.btn {
	--btn-bg: var(--red);
	--btn-fg: var(--white);
	--btn-bd: var(--red);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1px solid var(--btn-bd);
	border-radius: var(--radius);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--body);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.btn:hover { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: var(--white); }

.btn--solid { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); }
.btn--solid-light { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }
.btn--solid-light:hover { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: currentColor; }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--heading); --btn-bd: rgba(255,255,255,.55); }
.btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }

.btn--link {
	--btn-bg: transparent;
	--btn-fg: var(--text);
	--btn-bd: transparent;
	padding: 6px 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}
.btn--link:hover { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: transparent; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ------------------------------------------------ 7. Masthead, nav, drawer */

.masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--white);
	border-bottom: 1px solid var(--grey-line);
}

.masthead__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 84px;
}

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	flex: none;
}
.brand__img { width: auto; max-height: 52px; }

.wordmark { display: block; line-height: 1; }
.wordmark__name {
	display: block;
	font-family: var(--display);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: .16em;
}
.wordmark__rule {
	display: block;
	height: 1px;
	margin: 5px 0 4px;
	background: var(--red);
}
.wordmark__sub {
	display: block;
	font-family: var(--body);
	font-size: .5rem;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--grey);
}

.nav { margin-left: auto; }

.menu--primary {
	display: flex;
	align-items: center;
	gap: 20px;
}
.menu--primary > li { position: relative; }
.menu--primary a {
	display: inline-block;
	padding: 6px 0;
	/* Eight items share this row; a label allowed to wrap mid-phrase makes the
	   masthead two lines tall and pushes the logo off centre. */
	white-space: nowrap;
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .01em;
	text-decoration: none;
	color: var(--ink);
	transition: color var(--speed) var(--ease);
}
.menu--primary a:hover,
.menu--primary .current-menu-item > a { color: var(--red); }

.submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 22px; height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.submenu-toggle .icon { width: 14px; height: 14px; transition: transform var(--speed) var(--ease); }
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.submenu {
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 220px;
	padding: 12px 0;
	background: var(--white);
	border: 1px solid var(--grey-line);
	box-shadow: 0 18px 40px rgba(0,0,0,.09);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
}
.menu--primary > li:hover > .submenu,
.menu--primary > li:focus-within > .submenu,
.submenu-toggle[aria-expanded="true"] + .submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.submenu a { display: block; padding: 8px 18px; }

.masthead__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}
.masthead__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--grey);
}
.masthead__tel:hover { color: var(--red); }
.masthead__cta { padding: 12px 22px; }

.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.burger span {
	display: block;
	height: 1.5px;
	width: 24px;
	margin-inline: auto;
	background: var(--ink);
	transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
	position: fixed;
	inset: 84px 0 0;
	z-index: 99;
	padding: 28px var(--gutter) 40px;
	background: var(--white);
	overflow-y: auto;
	transform: translateY(-8px);
	opacity: 0;
	transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; transform: none; }

.menu--drawer > li { border-bottom: 1px solid var(--grey-line); }
.menu--drawer a {
	display: block;
	padding: 16px 0;
	font-family: var(--display);
	font-size: 1.375rem;
	text-decoration: none;
}
.drawer__submenu { padding-bottom: 10px; }
.drawer__submenu a { padding: 8px 0 8px 18px; font-family: var(--body); font-size: 1rem; }
.drawer__foot { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; align-items: flex-start; }
.drawer__tel { font-size: .9375rem; color: var(--grey); }

/* ---------------------------------------------------------------- 8. Hero */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(88vh, 820px);
	padding-block: clamp(96px, 14vw, 180px);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}
.hero--inner { min-height: min(62vh, 620px); padding-block: clamp(80px, 10vw, 140px); }

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__video,
.hero__still {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The still sits under the video and shows through until the video paints;
   with no video it is the background outright. */
.hero__still { position: absolute; inset: 0; z-index: -1; }
.hero__video { position: relative; z-index: 0; }

/* The brand scrim. Without it the white type has no contrast guarantee over
   arbitrary footage. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(20deg, var(--ink) 6%, var(--red) 85%);
	opacity: .79;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	text-align: center;
}
.hero--left .hero__inner { max-width: 900px; margin-inline: 0; text-align: left; }

.hero .eyebrow { color: rgba(255,255,255,.9); }
.hero__rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 0 auto 24px;
	background: rgba(255,255,255,.6);
}
.hero--left .hero__rule { margin-inline: 0; }

.hero__title {
	margin-bottom: .35em;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.hero--inner .hero__title { text-transform: none; letter-spacing: .01em; }

.hero__text {
	max-width: 62ch;
	margin-inline: auto;
	color: rgba(255,255,255,.92);
	font-weight: 200;
	letter-spacing: .02em;
}
.hero--left .hero__text { margin-inline: 0; }

.hero__crumb {
	margin-top: 2em;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
}
.hero__crumb a { text-decoration: none; }
.hero__crumb a:hover { text-decoration: underline; }

.hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 3em;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,.7);
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}
.hero__scroll .icon { animation: fass-bob 2.4s var(--ease) infinite; }

@keyframes fass-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

/* ----------------------------------------------------------- 9. Page head */

.section--pagehead { text-align: center; }
.pagehead__title { margin-bottom: .3em; }
.pagehead__text { max-width: 60ch; margin-inline: auto; color: var(--muted); }
.pagehead__crumb {
	margin-top: 1.8em;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* --------------------------------------------------------------- 10. Split */

.split {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
@media (min-width: 900px) {
	.split { grid-template-columns: 1fr 1fr; }
	.split--reverse .split__media { order: 2; }
}

/*
 * The panel owns its own height via aspect-ratio rather than taking it from
 * whichever child happens to be in flow. Without that, hiding the video (which
 * reduced motion does) collapsed the panel to zero and left a blank column
 * beside the prose — the still is absolutely positioned and cannot hold it open.
 */
.split__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--rule);
	aspect-ratio: 4 / 3;
}
.split__img,
.split__video,
.split__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The still sits under the video: it shows through until the video paints, and
   it is the whole panel when reduced motion hides the video. */
.split__video { z-index: 1; }
.split__title { margin-bottom: .5em; }
.split__body .checklist { margin-top: 1.6em; }

/* ---------------------------------------- 11. Cards, service cards, pillars */

.cards {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 700px) {
	.cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.cards--3 { grid-template-columns: repeat(3, 1fr); }
	.cards--4 { grid-template-columns: repeat(4, 1fr); }
}

.card__icon {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	margin-bottom: 18px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	color: var(--accent);
}
.card__icon .icon { width: 20px; height: 20px; }
.card__title { margin-bottom: .5em; font-size: 1.25rem; }
.card__body { color: var(--muted); font-size: .9375rem; }

/* A boxed card paints its own background, so it owns its text colour by name.
   A ground class cannot see a card: on .ground-ink the band's light-on-dark
   roles would otherwise paint white text onto this white box. */
.cards--boxed .card {
	padding: clamp(24px, 3vw, 36px);
	background: var(--white);
	border: 1px solid var(--grey-line);
	border-radius: var(--radius);
	color: var(--ink);
}
.cards--boxed .card .card__title { color: var(--ink); }
.cards--boxed .card .card__body { color: var(--grey); }
.cards--boxed .card .card__icon { border-color: var(--grey-line); color: var(--red); }

.services__head {
	display: grid;
	gap: 20px;
	align-items: end;
	margin-bottom: clamp(32px, 4vw, 56px);
}
@media (min-width: 800px) {
	.services__head { grid-template-columns: 1fr auto; }
}
.services__title { margin: 0; }

.svc-cards {
	display: grid;
	gap: clamp(24px, 2.5vw, 34px);
}
@media (min-width: 640px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-cards { grid-template-columns: repeat(4, 1fr); } }

.svc-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--rule);
	aspect-ratio: 4 / 3;
}
.svc-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.svc-card:hover .svc-card__img { transform: scale(1.04); }
.svc-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	color: var(--muted);
}
.svc-card__placeholder .icon { width: 40px; height: 40px; }
.svc-card__body { padding-top: 18px; }
.svc-card__title { margin-bottom: .4em; font-size: 1.375rem; }
.svc-card__text { color: var(--muted); font-size: .9375rem; }
.svc-card .btn--link { margin-top: 14px; }

.pillars {
	display: grid;
	gap: 26px 34px;
	margin: 2.2em 0;
}
@media (min-width: 620px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar__title { margin-bottom: .35em; font-size: 1.125rem; }
.pillar__body { color: var(--muted); font-size: .9375rem; }

.joinband { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .joinband { grid-template-columns: 1.15fr .85fr; } }
.joinband__title { margin-bottom: .5em; }
.joinband__media { overflow: hidden; border-radius: var(--radius); }
.joinband__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ------------------------------------------------- 12. Leadership and bios */

.leadership { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 960px) { .leadership { grid-template-columns: .9fr 1.1fr; align-items: start; } }

.leaders { display: grid; gap: 26px; }
@media (min-width: 560px) { .leaders { grid-template-columns: repeat(2, 1fr); } }

.leader__media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--text) 8%, transparent);
}
.leader__img { width: 100%; height: 100%; object-fit: cover; }
.leader__initials,
.review__initials,
.bio__initials {
	font-family: var(--display);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--accent);
}
.leader__body { padding-top: 16px; }
.leader__name { margin-bottom: .2em; font-size: 1.25rem; }
.leader__role { color: var(--muted); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.leader__link { text-decoration: none; }
.leader__link:hover .leader__name { color: var(--accent); }

.bio { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) {
	.bio { grid-template-columns: .8fr 1.2fr; }
	.bio--reverse .bio__media { order: 2; }
}
.bio__media {
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--text) 8%, transparent);
}
.bio__img { width: 100%; height: 100%; object-fit: cover; }
.bio__name { margin-bottom: .25em; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.bio__role { margin-bottom: 1.2em; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; }

/* ------------------------------------------------------------- 13. Reviews */

.reviews { display: grid; gap: clamp(24px, 3vw, 34px); }
@media (min-width: 800px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

/* Paints its own background — owns its text colour by name. */
.review {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(26px, 3vw, 38px);
	background: var(--white);
	border: 1px solid var(--grey-line);
	border-radius: var(--radius);
	color: var(--ink);
}
.stars { display: inline-flex; gap: 3px; color: var(--grey-line); }
.stars__star { display: inline-flex; }
.stars__star .icon { width: 16px; height: 16px; }
.stars__star.is-on { color: var(--gold); }

.review__quote { flex: 1; }
.review__quote p { color: var(--ink); font-size: .9375rem; line-height: 1.75; }
.review__by { display: flex; align-items: center; gap: 14px; }
.review__avatar {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--cream);
}
.review__img { width: 100%; height: 100%; object-fit: cover; }
.review__initials { font-size: 1.125rem; color: var(--red); }
.review__who { display: flex; flex-direction: column; }
.review__name { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.review__role { font-size: .8125rem; color: var(--grey); }

/* ---------------------------------------------- 14. Tiers and checklists */

.checklist { display: grid; gap: 10px 28px; }
.checklist--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
	.checklist--2 { grid-template-columns: repeat(2, 1fr); }
	.checklist--3 { grid-template-columns: repeat(3, 1fr); }
}
.checklist li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	font-size: .9375rem;
	line-height: 1.65;
}
.checklist .icon { width: 18px; height: 18px; margin-top: .35em; color: var(--accent); }

.tiers { display: grid; gap: clamp(36px, 5vw, 64px); }
.tier { display: grid; gap: 18px 32px; }
@media (min-width: 800px) { .tier { grid-template-columns: 90px 1fr; } }
.tier__num {
	font-family: var(--display);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	color: var(--accent);
	opacity: .55;
}
.tier__title { margin-bottom: .3em; font-size: clamp(1.375rem, 2vw, 1.75rem); }
.tier__lede { margin-bottom: 1em; font-family: var(--display); font-size: 1.125rem; font-style: italic; color: var(--accent); }
.tier__body .checklist { margin-top: 1.4em; }

.statement__title { margin-bottom: .5em; }
.section--statement { text-align: center; }
.statement__text { font-size: clamp(1rem, 1.4vw, 1.125rem); }

.cta__title { margin-bottom: .4em; }
.section--cta { text-align: center; }

/* ---------------------------------- 15. Property cards, grid, filters, detail */

.prop-grid { display: grid; gap: clamp(24px, 3vw, 34px); }
@media (min-width: 640px) { .prop-grid--2, .prop-grid--3, .prop-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
	.prop-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.prop-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Paints its own background — owns its text colour by name. */
.prop-card {
	background: var(--white);
	border: 1px solid var(--grey-line);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--ink);
	transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.prop-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,0,0,.10); }
.prop-card__link { display: block; text-decoration: none; color: inherit; }

.prop-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--cream);
	overflow: hidden;
}
.prop-card__img { width: 100%; height: 100%; object-fit: cover; }
.prop-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #b9b4a8; }
.prop-card__placeholder .icon { width: 44px; height: 44px; }

.prop-card__badge {
	position: absolute;
	top: 14px; left: 14px;
	padding: 6px 12px;
	background: var(--red);
	color: #fff;
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: var(--radius);
}

.prop-card__body { padding: 22px 24px 26px; }
.prop-card__price {
	margin-bottom: .35em;
	font-family: var(--display);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--ink);
}
.prop-card__title { margin-bottom: .4em; font-size: 1.0625rem; font-family: var(--body); font-weight: 500; color: var(--ink); }
.prop-card__addr {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 1em;
	color: var(--grey);
	font-size: .875rem;
}
.prop-card__addr .icon { width: 16px; height: 16px; margin-top: .2em; flex: none; }

.prop-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding-top: 16px;
	border-top: 1px solid var(--grey-line);
}
.prop-spec {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .8125rem;
	color: var(--grey);
}
.prop-spec .icon { width: 17px; height: 17px; color: var(--red); }
.prop-spec__value { font-weight: 500; color: var(--ink); }
.prop-specs--lg { gap: 14px 36px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.prop-specs--lg .prop-spec { font-size: .9375rem; }
.prop-specs--lg .prop-spec__value { color: var(--text); }

.prop-empty {
	padding: 48px 0;
	color: var(--muted);
	text-align: center;
}

/*
 * The search bar.
 *
 * Markup is rendered by the FASS Property Listing plugin (.fpl-* classes) so the
 * hero bar and the archive bar can never disagree about what a filter means.
 * The theme owns every pixel of it -- the plugin's own stylesheet is not loaded,
 * because the theme declares add_theme_support('fass-property-listing').
 */
.fpl-search {
	display: grid;
	gap: 14px 16px;
	align-items: end;
}
.fpl-search--bar { grid-auto-flow: column; grid-auto-columns: 1fr; }
.fpl-search--bar .fpl-field--submit { grid-auto-columns: max-content; }

.fpl-search .fpl-field { margin: 0; }
.fpl-search label {
	display: block;
	margin-bottom: 7px;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.fpl-search input,
.fpl-search select {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: .9375rem;
	line-height: 1.5;
}
.fpl-search button {
	width: 100%;
	padding: 14px 30px;
	border: 1px solid var(--red);
	border-radius: var(--radius);
	background: var(--red);
	color: #fff;
	font-family: var(--body);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.fpl-search button:hover { background: var(--ink); border-color: var(--ink); }

@media (max-width: 1040px) {
	.fpl-search--bar { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
	.fpl-search--bar .fpl-field--submit { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.fpl-search--bar { grid-template-columns: 1fr; }
}

/*
 * The hero variant sits on a photograph, so it paints its own light card rather
 * than inheriting the hero's white-on-image type -- a bare select over footage
 * is unreadable at any opacity.
 */
.hero__search {
	margin-top: clamp(28px, 4vw, 44px);
	padding: clamp(18px, 2.2vw, 26px);
	background: rgba(255, 255, 255, .96);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	text-align: left;
}

/*
 * A search bar needs more width than a headline does. The hero column widens to
 * fit it, and the prose is held back to its own comfortable measure so the
 * headline does not stretch with it.
 */
.hero__inner:has(.hero__search) { max-width: 1160px; }
.hero__inner:has(.hero__search) .hero__title,
.hero__inner:has(.hero__search) .hero__text,
.hero__inner:has(.hero__search) .eyebrow { max-width: 860px; margin-inline: auto; }
.hero--left .hero__inner:has(.hero__search) .hero__title,
.hero--left .hero__inner:has(.hero__search) .hero__text { margin-inline: 0; }

*
 * The one-row layout is for WIDE SCREENS ONLY.
 *
 * This block previously sat outside any media query. Being one class deeper
 * than the .fpl-search--bar breakpoints above -- and media queries add no
 * specificity of their own -- it beat them at every width. Together with
 * minmax(0, 1fr), which lets a track shrink to nothing, auto-fit never wrapped:
 * on a phone all five controls stayed jammed into one row, the selects were
 * clipped to "Any" and the Search button overflowed the card.
 *
 * So the horizontal rule is now bounded, and the narrow layouts are restated at
 * hero depth so they actually win.
 */
@media (min-width: 1041px) {
	/* The submit sits at its natural width; every filter shares the rest evenly. */
	.hero__search .fpl-search--bar { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
	.hero__search .fpl-search--bar .fpl-field--submit { grid-column: auto; width: max-content; }
}

@media (max-width: 1040px) {
	.hero__search .fpl-search--bar { grid-template-columns: repeat(2, 1fr); }
	.hero__search .fpl-search--bar .fpl-field--submit { grid-column: 1 / -1; width: auto; }
}

@media (max-width: 560px) {
	.hero__search .fpl-search--bar { grid-template-columns: 1fr; }
}

.hero__search .fpl-search button { padding-inline: 34px; }

/* This card owns its text colour: it paints its own background, so the hero's
   white-on-photo roles are wrong inside it. */
.hero__search .fpl-search label { color: var(--grey); }
.hero__search .fpl-search input,
.hero__search .fpl-search select { border-color: #d8d5cd; color: var(--ink); }

.prop-detail { display: grid; gap: clamp(32px, 4vw, 60px); align-items: start; }
@media (min-width: 960px) { .prop-detail { grid-template-columns: 1.6fr .9fr; } }
.prop-detail__addr {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 1.2em;
	color: var(--muted);
}
.prop-detail__addr .icon { color: var(--accent); }
.prop-detail .prose { margin-top: 2em; }
/* The grouped detail tables. Each block needs its own breathing room, or the
   first heading collides with the prose above it. */
.prop-detail__block { margin-top: 2.6em; }
.prop-detail__block h3 {
	margin-bottom: .6em;
	font-size: 1.125rem;
	letter-spacing: .02em;
}
.prop-detail__table { border-top: 1px solid var(--rule); }
.prop-detail__row {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
	font-size: .9375rem;
}
.prop-detail__row dt { color: var(--muted); }
.prop-detail__row dd { margin: 0; }

/* Paints its own background — owns its text colour by name. */
.prop-aside {
	position: sticky;
	top: 108px;
	padding: clamp(26px, 3vw, 34px);
	background: var(--cream);
	border: 1px solid #ddd8cb;
	border-radius: var(--radius);
	color: var(--ink);
}
.prop-aside__price {
	margin-bottom: .3em;
	font-family: var(--display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 600;
	color: var(--ink);
}
.prop-aside__agent { display: flex; flex-direction: column; font-size: .8125rem; color: var(--grey); }
.prop-aside__agent span { font-size: 1rem; color: var(--ink); }
.prop-aside .btn-row { flex-direction: column; align-items: stretch; }
.prop-aside .btn { justify-content: center; }
.prop-aside .btn--outline { --btn-fg: var(--ink); }

.pagination { margin-top: clamp(36px, 4vw, 56px); }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination a,
.pagination span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-size: .875rem;
	text-decoration: none;
}
.pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- 16. Blog */

.post-grid { display: grid; gap: clamp(24px, 3vw, 34px); }
@media (min-width: 640px) { .post-grid--2, .post-grid--3, .post-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
	.post-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.post-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Paints its own background — owns its text colour by name. */
.post-card {
	background: var(--white);
	border: 1px solid var(--grey-line);
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--ink);
	transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,0,0,.10); }
.post-card__link { display: block; text-decoration: none; color: inherit; }
.post-card__media { aspect-ratio: 16 / 10; background: var(--cream); overflow: hidden; }
.post-card__img { width: 100%; height: 100%; object-fit: cover; }
.post-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #b9b4a8; }
.post-card__body { padding: 22px 24px 26px; }
.post-card__title { margin-bottom: .4em; font-size: 1.25rem; color: var(--ink); }
.post-card__excerpt { color: var(--grey); font-size: .9375rem; }
.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--red);
}
.post-meta {
	margin-bottom: .6em;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grey);
}
.post-empty { padding: 40px 0; color: var(--muted); }

.search-results { display: grid; gap: 4px; }
.search-result a {
	display: block;
	padding: 22px 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
}
.search-result h2 { font-size: 1.375rem; margin-bottom: .3em; }
.search-result p { color: var(--muted); font-size: .9375rem; }

/*
 * The article footer: the CTA pair and the editorial notes. Both are rendered
 * from post meta rather than pasted into the body, so this styling applies to
 * every article without an editor having to reproduce it.
 */
.article-cta {
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--rule);
}
.article-cta .btn-row { margin-top: 0; }

.article-notes {
	margin-top: clamp(28px, 3vw, 40px);
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--cream);
	border-radius: var(--radius);
	color: var(--grey);
	font-size: .8125rem;
	line-height: 1.7;
}
.article-notes p + p { margin-top: .8em; }
.article-notes__sources strong { color: var(--ink); }
.article-notes__disclaimer { font-style: italic; }

/*
 * Article body spacing.
 *
 * Spacing only -- article headings deliberately use the SAME family, size and
 * weight as every other heading on the site. An earlier version stepped them
 * down and set H3 in the body font; that broke the type system, so it is gone.
 * Do not reintroduce a font-family or font-size override here.
 */
.section--article .prose ul,
.section--article .prose ol { margin-block: 1.1em; }
.section--article .prose li + li { margin-top: .35em; }

/*
 * Third-party embeds.
 *
 * The markup inside is someone else's, so this styles only the container and
 * the few elements every provider emits. It deliberately does NOT restyle
 * inputs inside an embed: a HubSpot or Mailchimp form ships its own stylesheet,
 * and half-overriding it produces a form that matches neither design.
 */
.embed { width: 100%; }
.embed > *:last-child { margin-bottom: 0; }

/* Providers hand back a raw <iframe> with fixed width/height attributes. Left
   alone that overflows the column on a phone. */
.embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* A bare iframe with no height collapses to 150px in most browsers. Only a
   MINIMUM is set — a provider that sizes its own iframe must still win. */
.embed iframe:not([height]) { min-height: 520px; }

.embed img { max-width: 100%; height: auto; }

/* On a dark ground an embed almost always renders dark-on-dark, because the
   provider assumes a white page. Giving the form embed its own light card is
   more reliable than trying to recolour markup we do not control — and it owns
   its text colour by name, like every other self-painting component. */
.ground-ink .embed--form,
.ground-deep .embed--form,
.ground-red .embed--form {
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--white);
	border-radius: var(--radius);
	color: var(--ink);
}

.section--embed .section__head { margin-bottom: clamp(24px, 3vw, 36px); }

/*
 * Comments.
 *
 * WordPress renders these with its own markup, so the theme has to meet it
 * rather than the other way round. Without this the form falls back to raw
 * browser inputs, which on a designed page reads as a broken page.
 */
.section--comments .comments-title,
.section--comments #reply-title {
	margin-bottom: .8em;
	font-size: clamp(1.375rem, 2vw, 1.75rem);
}
.comment-list { margin: 0 0 clamp(32px, 4vw, 48px); }
.comment-list ol.children { margin: 20px 0 0 clamp(20px, 4vw, 44px); }
.comment-list li { list-style: none; }
.comment-body {
	padding: 22px 0;
	border-top: 1px solid var(--rule);
}
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.comment-author img { width: 40px; height: 40px; border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata,
.comment-metadata a { font-size: .75rem; color: var(--muted); text-decoration: none; }
.comment-content { font-size: .9375rem; }
.comment-content p + p { margin-top: .9em; }
.reply { margin-top: 10px; }
.comment-reply-link,
.comment-respond .comment-reply-title small a {
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}
.comment-awaiting-moderation { font-size: .8125rem; color: var(--muted); font-style: italic; }

.comment-respond { margin-top: clamp(24px, 3vw, 36px); }
.comment-form { display: grid; gap: 16px; }
.comment-form p { margin: 0; }
.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: .9375rem;
}
.comment-form textarea { resize: vertical; min-height: 140px; }
.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .8125rem;
	color: var(--muted);
}
.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-size: .8125rem;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}
.comment-form .comment-form-cookies-consent input { margin: 0; }
.comment-form .comment-notes { font-size: .8125rem; color: var(--muted); }
.comment-form .form-submit { margin: 0; }
.comment-form input[type="submit"] {
	display: inline-flex;
	padding: 14px 28px;
	border: 1px solid var(--red);
	border-radius: var(--radius);
	background: var(--red);
	color: #fff;
	font-family: var(--body);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.comment-form input[type="submit"]:hover { background: var(--ink); border-color: var(--ink); }

/* The form is a grid, so `display:inline-block; width:50%` on two children does
   not pair them up -- each still takes its own row, just narrower. They have to
   be placed as grid columns. */
@media (min-width: 620px) {
	.comment-form { grid-template-columns: 1fr 1fr; }
	.comment-form > p { grid-column: 1 / -1; }
	.comment-form .comment-form-author { grid-column: 1; }
	.comment-form .comment-form-email { grid-column: 2; }
}

.post-tags { margin-top: 2em; font-size: .8125rem; color: var(--muted); }
.section--article .prose { margin-top: 1.5em; }

/* --------------------------------------------------------------- 17. Forms */

/*
 * Form fields. Shared by the enquiry form and the newsletter signup. These
 * previously lived beside the listing filter bar; that bar is now rendered by
 * the plugin as .fpl-search, but the forms still need these, so they live here
 * with the rest of the form styling.
 */
.field { margin: 0; }
.field label {
	display: block;
	margin-bottom: 7px;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: .9375rem;
}
.field textarea { resize: vertical; }
.field--submit .btn { justify-content: center; }
/* Hidden from people, reachable by bots. */
.field--hp { position: absolute; left: -9999px; }

.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-notice {
	padding: 16px 20px;
	border-radius: var(--radius);
	border: 1px solid var(--rule);
	font-size: .9375rem;
}
.form-notice--ok { border-color: #2f7d54; background: #eef7f1; color: #17512f; }
.form-notice--error { border-color: var(--red); background: #fdeeec; color: #8c2318; }
.form-about { font-size: .9375rem; color: var(--muted); }

.contact { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: 1.35fr .65fr; } }

.contact-detail { display: grid; grid-template-columns: 22px 1fr; gap: 6px 14px; margin-bottom: 28px; }
.contact-detail .icon { grid-row: span 2; margin-top: .35em; width: 20px; height: 20px; color: var(--accent); }
.contact-detail h3 {
	margin: 0;
	font-family: var(--body);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}
.contact-detail p { margin: 0; font-size: .9375rem; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 14px; }

.signup { display: grid; gap: 12px; }
.signup .field label { color: inherit; opacity: .75; }
@media (min-width: 480px) {
	.signup { grid-template-columns: 1fr auto; align-items: end; }
}

/* -------------------------------------------------------------- 18. Footer */

.site-footer {
	background: var(--ink);
	color: #cfccc6;
	padding-top: clamp(56px, 7vw, 96px);
	font-size: .9375rem;
}
.site-footer .brand { color: #fff; }
.site-footer .wordmark__sub { color: #8f8b83; }
.site-footer .wordmark__rule { background: var(--red); }

.site-footer__cols { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 720px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .site-footer__cols { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }

.site-footer__title {
	margin-bottom: 1.1em;
	font-family: var(--body);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}
.site-footer__note { margin-top: 20px; color: #98948d; line-height: 1.75; font-size: .875rem; }
.site-footer__address { font-style: normal; line-height: 1.9; }
.site-footer__tel a,
.site-footer__mail a { text-decoration: none; }
.site-footer__tel a:hover,
.site-footer__mail a:hover { color: #fff; }
.site-footer__social { display: flex; gap: 16px; margin-top: 18px; }

.menu--footer { display: grid; gap: 10px; }
.menu--footer a { text-decoration: none; }
.menu--footer a:hover { color: #fff; }

.site-footer__col--signup .signup .field input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
.site-footer__col--signup .signup .field label { color: #98948d; }

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	justify-content: space-between;
	align-items: center;
	margin-top: clamp(44px, 5vw, 72px);
	padding-block: 26px;
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: .8125rem;
	color: #8f8b83;
}
.site-footer__copy { margin: 0; }
.menu--legal { display: flex; flex-wrap: wrap; gap: 20px; }
.menu--legal a { text-decoration: none; }

/* -------------------------------------------- 19. Utilities, reveal, motion */

/* The masthead runs out of room for the phone number before it runs out of
   room for the nav, so they drop at different widths. */
@media (max-width: 1400px) {
	.masthead__tel { display: none; }
}
@media (max-width: 1180px) {
	.nav { display: none; }
	.burger { display: flex; }
	.masthead__actions { margin-left: auto; }
}
@media (max-width: 640px) {
	.masthead__cta { display: none; }
}

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.reveal { opacity: 1; transform: none; }
	/* Autoplaying footage is exactly what reduced-motion asks not to see, so
	   the poster still is shown instead. */
	.hero__video, .split__video { display: none; }
}