/*
 * Palette set by scripts/set-palette.py.
 *
 * Her own Instagram brand: espresso near-black, champagne script and antique gold rules, sampled off her own posted graphics.
 *
 *   Espresso, her Instagram ground #241F1D  structure: headings, buttons, footer, the ink
 *   Champagne        #C9B896  fills, rules, washes — never text
 *   Antique gold     #8C6D3B  the warm accent and the thing to press
 *   Mid gold         #A88C55  the fourth stop in the rule — fills only
 *
 * Carried in one repeated four-part rule under every heading.
 * Fully light, on a warm ground.
 *
 * Measured (WCAG):
 * A NOTE ON THE RE-PALETTE (2026-09-23). This theme was first built on a
 * Jacksonville-geography palette — St Johns river blue, Atlantic aqua, sunrise
 * coral, live-oak green. Adam replaced it with HER OWN: the espresso, champagne
 * and antique gold she posts in. Those values were sampled off her own
 * Instagram graphics, not invented: the ground is #262324 on her tiles, and the
 * gold script reads #C1B29B at its highlight and #A1927C in its core.
 *
 * THE SITE IS STILL LIGHT. Her feed is black-on-gold because Instagram is; the
 * standing rule here is a light site, so the espresso carries the type, the
 * masthead and the footer while the ground stays ivory.
 *
 * `set-palette.py` reported "0 raw values remapped" on this second run — it
 * only knows the PARENT's raw values, and the first run had already replaced
 * them. 101 rgba() and 5 hex values were remapped by hand afterwards. The
 * hero and banner scrims were deliberately LEFT neutral (rgba(16,18,22,…)):
 * grading a scrim toward the brand colour tints the footage, which Adam has
 * rejected before.
 *
 *   brand on ground    15.4:1
 *   white on brand     16.3:1
 *   coral on ground     4.5:1
 *   white on coral      4.8:1
 *   surf on ground      1.8:1  FILLS ONLY
 *   dune on ground      3.0:1  large type / fills only
 *   body on ground     10.0:1
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	--rwl-brand:      #241F1D;
	--rwl-brand-mid:  #433E3D;
	--rwl-brand-lt:   #A89C8B;
	--rwl-brand-pale: #EDE7DC;

	--rwl-accent:       #241F1D;
	--rwl-accent-mid:   #433E3D;
	--rwl-accent-lt:    #C9B896;
	--rwl-accent-metal: linear-gradient(135deg, #1E1918 0%, #6E6453 52%, #241F1D 100%);

	--rwl-surf:       #C9B896;
	--rwl-surf-dk:    #9D9075;
	--rwl-surf-pale:  #F9F6F2;

	--rwl-coral:      #8C6D3B;
	--rwl-coral-br:   #9E845A;
	--rwl-coral-dk:   #785E33;
	--rwl-coral-pale: #F4F0EB;

	--rwl-dune:       #A88C55;
	--rwl-dune-dk:    #7E6940;
	--rwl-dune-pale:  #F5F1EB;

	--rwl-sand:       #E7D2AE;
	--rwl-sand-dp:    #D9BC8C;

	--rwl-red:        #8C6D3B;

	--rwl-deep:       #100E0D;
	--rwl-deep-dk:    #0A0908;
	--rwl-deep-lt:    #171413;
	--rwl-stone:      #6B6257;

	--rwl-ink:        #100E0D;
	--rwl-body:       #3E3832;
	--rwl-muted:      #6E6459;
	--rwl-faint:      #9C9184;

	--rwl-white:      #FFFFFF;
	--rwl-shell:      #FCF8F1;
	--rwl-tint:       #FCF8F1;
	--rwl-tint-2:     #F5EDE0;
	--rwl-sky:        #EFE9DE;
	--rwl-line:       #E4DED2;
	--rwl-line-soft:  #F1EBE1;

	--rwl-display:    'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
	--rwl-body-font:  'Instrument Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

	--rwl-wrap:       1280px;
	--rwl-gutter:     clamp(1.25rem, 4vw, 3rem);
	--rwl-band:       clamp(4rem, 8vw, 7rem);

	--rwl-header-h:   128px;
	--rwl-bar-max:    128px;
	--rwl-bar-min:    76px;
	--rwl-logo-max:   92px;
	--rwl-logo-min:   56px;
	--rwl-shrink:     0;

	--rwl-ease:       cubic-bezier(.22, .61, .36, 1);
	--rwl-shadow:     0 1px 2px rgba(26, 20, 16, .05), 0 8px 24px -12px rgba(26, 20, 16, .16);
	--rwl-shadow-lg:  0 2px 4px rgba(26, 20, 16, .06), 0 20px 48px -20px rgba(26, 20, 16, .24);
}


@media (max-width: 1040px) {
	:root {
		--rwl-header-h: 96px;
		--rwl-bar-max:  96px;
		--rwl-bar-min:  62px;
		--rwl-logo-max: 68px;
		--rwl-logo-min: 38px;
	}
}

/* ------------------------------------------------------------------ base -- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--rwl-shell);
	color: var(--rwl-body);
	font-family: var(--rwl-body-font);
	font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/*
	 * CLIP, NOT HIDDEN. `overflow-x: hidden` makes <body> a scroll container,
	 * and a scroll container becomes the nearest scrolling ancestor for
	 * everything inside it — which silently disables `position: sticky` on
	 * every descendant, because the element is now sticky inside a box that
	 * never scrolls while the page scrolls on <html>. The listing page's ask
	 * box was pinned at `top: header + 1.5rem`, computed `position: sticky`,
	 * and still tracked the page one-for-one down the screen.
	 *
	 * `overflow-x: clip` clips exactly the same way and creates NO scroll
	 * container, so sticky keeps working. This whole lineage sets `hidden`
	 * here, to hide the entry animations' transient sideways overflow.
	 */
	overflow-x: clip;
}

body.rwl-locked { overflow: hidden; }

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

a { color: var(--rwl-deep-lt); text-decoration: none; transition: color .2s var(--rwl-ease); }
a:hover { color: var(--rwl-deep); }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--rwl-display);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.018em;
	color: var(--rwl-ink);
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.03rem + .4vw, 1.3rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--rwl-deep-lt); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--rwl-accent-lt); color: var(--rwl-ink); }

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

.rwl-skip {
	position: absolute; top: -100px; left: 1rem; z-index: 200;
	padding: .75rem 1.25rem;
	background: var(--rwl-deep); color: #fff; font-weight: 600;
	transition: top .2s var(--rwl-ease);
}
.rwl-skip:focus { top: 1rem; color: #fff; }

/* --------------------------------------------------------------- layout -- */

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

.rwl-wrap--narrow { max-width: 60rem; }

.rwl-section { position: relative; padding-block: var(--rwl-band); }

.rwl-section--tint { background: var(--rwl-tint); }

/* The two navy bands. Full-bleed colour is the only thing on a light site that
   gives the eye a place to rest, so there are exactly two per page and they are
   always separated by white. */
.rwl-section--dark {
	background: var(--rwl-deep);
	color: rgba(255, 255, 255, .82);
}

.rwl-section--dark h1,
.rwl-section--dark h2,
.rwl-section--dark h3 { color: #fff; }

/* ------------------------------------------------------------- typography -- */

.rwl-eyebrow {
	display: inline-block;
	margin-bottom: .9rem;
	font-family: var(--rwl-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}

.rwl-eyebrow--light { color: var(--rwl-accent-lt); }

/* On the hero specifically the eyebrow sits on a photograph rather than a flat
   dark band, and the brand light blue disappears into the water. Near-white with
   a slight shadow holds it without turning it into a second headline. */
.rwl-hero .rwl-eyebrow--light {
	color: rgba(255, 255, 255, .95);
	text-shadow: 0 1px 2px rgba(10, 12, 16, .6), 0 1px 14px rgba(10, 12, 16, .5);
}

/* Trap 24. Inner-page banners put the same eyebrow over a scrimmed photograph,
   and --accent-lt is the Atlantic shallows blue, which set-palette rates FILLS
   ONLY. Measured over a bright Florida sky under this banner's own scrim it
   comes out at 3.35:1 — present, rendered, unreadable, on every page but the
   home page, where the hero's own override above hides the problem. Near-white
   in the same family instead. */
.rwl-banner .rwl-eyebrow--light {
	color: #F3E9D6;
	text-shadow: 0 1px 2px rgba(10, 12, 16, .55);
}

.rwl-hero__title { text-shadow: 0 1px 2px rgba(10, 12, 16, .55), 0 2px 18px rgba(10, 12, 16, .45); }

.rwl-rule {
	display: block;
	width: 56px; height: 3px;
	margin: 1.1rem 0 1.4rem;
	background: var(--rwl-accent-metal);
	border-radius: 3px;
}

.rwl-head--center .rwl-rule,
.rwl-closer .rwl-rule,
.rwl-modal__head .rwl-rule { margin-inline: auto; }

.rwl-lede {
	font-size: clamp(1.02rem, 1rem + .3vw, 1.2rem);
	line-height: 1.65;
	color: var(--rwl-muted);
	max-width: 56ch;
}

.rwl-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.rwl-head--center { margin-inline: auto; text-align: center; }
.rwl-head--center .rwl-lede { margin-inline: auto; }
.rwl-head--light .rwl-lede { color: rgba(255, 255, 255, .8); }

.rwl-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: none;
}
@media (max-width: 720px) {
	.rwl-head--split { flex-direction: column; align-items: flex-start; }
}

.rwl-prose { color: var(--rwl-body); }
.rwl-prose p { margin-bottom: 1.1em; }

.rwl-prose--editor h2,
.rwl-prose--editor h3 { margin: 2rem 0 .75rem; }
.rwl-prose--editor ul,
.rwl-prose--editor ol { margin: 0 0 1.2em 1.25rem; list-style: disc; }
.rwl-prose--editor ol { list-style: decimal; }
.rwl-prose--editor li { margin-bottom: .4em; }
.rwl-prose--article { font-size: 1.05rem; }
.rwl-prose--article p { margin-bottom: 1.3em; }

.rwl-pull {
	margin: 1.75rem 0 0;
	padding: 1.1rem 1.4rem;
	border-left: 3px solid var(--rwl-accent);
	background: var(--rwl-tint);
	border-radius: 0 4px 4px 0;
	font-family: var(--rwl-display);
	font-size: clamp(1rem, .97rem + .3vw, 1.15rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--rwl-ink);
}

/* --------------------------------------------------------------- buttons -- */

.rwl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.6rem;
	border: 1px solid var(--rwl-deep);
	border-radius: 4px;
	background: var(--rwl-deep);
	color: #fff;
	font-family: var(--rwl-display);
	font-size: .82rem;
	font-weight: 400;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: transform .2s var(--rwl-ease), box-shadow .2s var(--rwl-ease), background .2s var(--rwl-ease);
	-webkit-appearance: none;
	appearance: none;
}

.rwl-btn:hover {
	background: var(--rwl-deep-dk);
	border-color: var(--rwl-deep-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(16, 14, 13, .5);
}
.rwl-btn:active { transform: translateY(0); }

/*
 * The primary call to action.
 *
 * Three things here were inherited from a gold-era build and were all wrong
 * once the gradient became navy: a comment claiming the fill was gold, dark
 * navy ink (#151211) sitting on a navy gradient — effectively invisible — and
 * a gold drop shadow. White on #241F1D is 9.8:1 and needs no argument.
 */
.rwl-btn--accent {
	background: var(--rwl-accent-metal);
	border-color: transparent;
	color: #FFFFFF;
}
.rwl-btn--accent:hover {
	background: var(--rwl-accent-metal);
	filter: brightness(1.08);
	color: #FFFFFF;
	box-shadow: 0 12px 26px -12px rgba(36, 31, 29, .55);
}

.rwl-btn--ghost {
	background: transparent;
	border-color: var(--rwl-line);
	color: var(--rwl-deep);
}
.rwl-btn--ghost:hover {
	background: var(--rwl-tint);
	border-color: var(--rwl-deep);
	color: var(--rwl-deep);
	box-shadow: none;
}

.rwl-btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}
.rwl-btn--ghost-light:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
	box-shadow: none;
}

.rwl-btn--sm { padding: .68rem 1.1rem; font-size: .74rem; }
.rwl-btn--lg { padding: 1.05rem 2rem; font-size: .88rem; }
.rwl-btn--block { display: flex; width: 100%; }

/* -------------------------------------------------------------- utility -- */

.rwl-utility {
	position: relative;
	z-index: 60;
	background: var(--rwl-deep);
	color: rgba(255, 255, 255, .72);
	font-size: .78rem;
}

.rwl-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 40px;
	padding-block: .35rem;
}

.rwl-utility__tagline {
	margin: 0;
	font-family: var(--rwl-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rwl-accent-lt);
	white-space: nowrap;
}

.rwl-utility__list { display: flex; align-items: center; gap: 1.4rem; }

.rwl-utility__list a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: rgba(255, 255, 255, .82);
}
.rwl-utility__list a:hover { color: #fff; }

.rwl-icon { flex-shrink: 0; color: var(--rwl-accent-lt); transition: color .2s var(--rwl-ease); }
.rwl-utility__list a:hover .rwl-icon { color: #fff; }

@media (max-width: 1040px) {
	/* Gone entirely on mobile. It was a strip of navy holding a phone number and
	   an email in 12px type — the phone is now a proper button in the masthead,
	   which is a real target and does not cost a band of colour above the logo. */
	.rwl-utility { display: none; }
}

/* ------------------------------------------------------------- language -- */

/*
 * EN / ES.
 *
 * A segmented pair rather than a dropdown: with exactly two languages a select
 * costs a tap to discover what it even contains, and both labels visible is its
 * own advertisement — a Spanish speaker sees "ES" without hunting for it, which
 * is the whole point of the feature.
 *
 * The inactive side is a link and the active side is not, so keyboard order
 * carries no dead stop and screen readers get aria-current on the live one.
 */
.rwl-lang {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	padding: 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
}

.rwl-lang__on,
.rwl-lang__off {
	display: inline-block;
	padding: .18rem .55rem;
	border-radius: 999px;
	line-height: 1.5;
}

.rwl-lang__on {
	background: #fff;
	color: var(--rwl-deep);
}

.rwl-utility__list .rwl-lang__off {
	color: rgba(255, 255, 255, .8);
	transition: background .18s var(--rwl-ease), color .18s var(--rwl-ease);
}

.rwl-utility__list .rwl-lang__off:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/*
 * In the drawer the bar is on white, not on the deep band, so the whole thing
 * inverts. It also spells the languages out — there is room for "Español" on a
 * phone and it reads as a promise rather than a two-letter code.
 */
.rwl-lang--drawer {
	align-self: center;
	background: var(--rwl-sky);
	font-size: .82rem;
}

.rwl-lang--drawer .rwl-lang__on {
	background: var(--rwl-brand);
	color: #fff;
}

.rwl-lang--drawer .rwl-lang__off {
	color: var(--rwl-accent);
}

.rwl-lang--drawer .rwl-lang__off:hover {
	background: rgba(201, 184, 150, .12);
}

/* --------------------------------------------------------------- header -- */

/* Constant-height shell; only the bar inside it moves. Collapsing the header
   itself would shorten the document mid-scroll and drag the page up under the
   reader — see themes/CLAUDE.md. */
.rwl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--rwl-header-h);
	pointer-events: none;
}

.rwl-header__bar {
	pointer-events: auto;
	background: #fff;
	border-bottom: 1px solid var(--rwl-line);
	box-shadow: 0 8px 24px -18px rgba(16, 14, 13, calc(1.4 * var(--rwl-shrink)));
}

.rwl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: calc(var(--rwl-bar-max) + (var(--rwl-bar-min) - var(--rwl-bar-max)) * var(--rwl-shrink));
}

.rwl-brand { display: inline-flex; flex-shrink: 0; }
.rwl-logo { display: inline-flex; align-items: center; gap: .65rem; }

.rwl-logo__img {
	height: calc(var(--rwl-logo-max) + (var(--rwl-logo-min) - var(--rwl-logo-max)) * var(--rwl-shrink));
	width: auto;
}

.rwl-logo__mark { display: inline-flex; }
.rwl-logo__mark svg { width: 40px; height: 40px; }
.rwl-logo--footer .rwl-logo__mark svg { width: 46px; height: 46px; }

.rwl-logo__text { display: flex; flex-direction: column; line-height: 1.05; }

.rwl-logo__name {
	font-family: var(--rwl-display);
	font-size: 1.32rem;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--rwl-deep);
}

.rwl-logo__sub {
	margin-top: .18rem;
	font-family: var(--rwl-display);
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}

.rwl-logo--footer .rwl-logo__name { color: #fff; }
.rwl-logo--footer .rwl-logo__img { height: 74px; }

/* ------------------------------------------------------------------ nav -- */

.rwl-nav { margin-inline: auto; }
.rwl-nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); }

.rwl-nav__list a {
	position: relative;
	display: inline-block;
	padding-block: .35rem;
	font-family: var(--rwl-display);
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rwl-ink);
}

.rwl-nav__list a::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--rwl-accent-metal);
	transition: width .25s var(--rwl-ease);
}

.rwl-nav__list a:hover { color: var(--rwl-deep); }
.rwl-nav__list a:hover::after,
.rwl-nav__list .is-current > a::after,
.rwl-nav__list .current-menu-item > a::after { width: 100%; }
.rwl-nav__list .is-current > a,
.rwl-nav__list .current-menu-item > a { color: var(--rwl-deep); }

.rwl-header__actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

.rwl-burger {
	display: none;
	padding: .55rem;
	background: none;
	border: 1px solid var(--rwl-line);
	border-radius: 4px;
	cursor: pointer;
}
.rwl-burger__box { display: block; width: 20px; }
.rwl-burger__box i {
	display: block; height: 2px; background: var(--rwl-deep);
	transition: transform .25s var(--rwl-ease), opacity .2s var(--rwl-ease);
}
.rwl-burger__box i + i { margin-top: 4px; }
.rwl-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rwl-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.rwl-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
	.rwl-nav { display: none; }
	.rwl-burger { display: block; }
}
@media (max-width: 620px) {
	/* The "Talk to an agent" button goes; the call button stays. Excluded by
	   name rather than by raising specificity elsewhere — this rule is more
	   specific than .rwl-callnow and would otherwise win silently. */
	.rwl-header__actions .rwl-btn:not(.rwl-callnow) { display: none; }
}

/* --------------------------------------------------------------- drawer -- */

.rwl-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1.5rem;
	padding: calc(var(--rwl-header-h) + 1.75rem) var(--rwl-gutter) 2.5rem;
	background: #fff;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s var(--rwl-ease), visibility .28s var(--rwl-ease);
}

.rwl-drawer[hidden] { display: flex; }
.rwl-drawer.is-open { opacity: 1; visibility: visible; }

.rwl-drawer__nav .rwl-nav__list { flex-direction: column; align-items: flex-start; gap: .25rem; }
.rwl-drawer__nav .rwl-nav__list a { padding-block: .7rem; font-size: 1.3rem; letter-spacing: .04em; }

.rwl-drawer__foot { display: flex; flex-direction: column; gap: 1rem; }
.rwl-drawer__call {
	font-family: var(--rwl-display);
	font-size: 1.05rem;
	font-weight: 400;
	text-align: center;
	color: var(--rwl-deep);
}

/* --------------------------------------------------------------- figures -- */

.rwl-figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--rwl-tint-2);
}

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

.rwl-figure--cover { position: absolute; inset: 0; border-radius: 0; }
.rwl-figure--tall { aspect-ratio: 4 / 5; }
.rwl-figure--portrait { aspect-ratio: 3 / 4; }
.rwl-figure--wide { aspect-ratio: 16 / 10; }
.rwl-figure--hero { aspect-ratio: 16 / 9; border-radius: 8px; }
.rwl-figure--lead { margin-bottom: 2rem; }

.rwl-figure--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	min-height: 12rem;
	background:
		repeating-linear-gradient(135deg, transparent 0 12px, rgba(16, 14, 13, .03) 12px 24px),
		var(--rwl-tint-2);
}

.rwl-figure__mark { opacity: .5; }
.rwl-figure__note {
	font-family: var(--rwl-display);
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rwl-faint);
}

/* ------------------------------------------------------------------ hero -- */

.rwl-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 74vh, 42rem);
	padding-block: clamp(5rem, 10vh, 7rem);
	overflow: hidden;
	background: #040D0F;
}

.rwl-hero__media { position: absolute; inset: 0; z-index: 0; }

/* Warm, not navy.
 *
 * The hero is a house at golden hour, and a navy scrim was arguing with it —
 * the sky went slate, the lit windows went grey, and the one genuinely
 * attractive thing about the photograph was suppressed to make room for a brand
 * colour it did not need. The scrim is now a deep warm brown, which darkens
 * exactly as much for the text but reads as dusk rather than as a blue filter.
 *
 * The amber wash on the right is doing the opposite job: it sits over the part
 * of the frame with no text on it and lifts the water, so the colour is
 * strongest where the eye is free to enjoy it.
 *
 * Temperature matters here. The copied theme scrimmed in warm brown, which over
 * a blue-green aerial reads as dirt on the lens. This one is a deep ocean blue
 * drawn from --rwl-deep, so the photograph stays in the same family as the logo.
 * The photograph is also a top-down aerial and therefore busy edge to edge —
 * there is no empty sky to drop type onto — so the left side is scrimmed harder
 * than a normal hero would need. */
/*
 * A LIGHT hero. This is the fifth version of this decision in the repo and it
 * is settled: Adam has rejected dark twice and rejected light-with-dark-bands
 * as still too dark. The version inherited here scrimmed the left edge at 0.92
 * navy, which turned a bright sunlit aerial into a navy panel with a
 * photograph faintly behind it.
 *
 * So the scrim is low and NEUTRAL — a warm-grey dark rather than navy, because
 * a blue scrim over blue water grades the footage toward the brand colour,
 * which is the thing not to do. Legibility comes from the text shadow on
 * .rwl-hero__title and .rwl-hero__lede instead, which darkens only the pixels
 * immediately behind the letterforms and leaves the picture alone. Measured
 * with scripts/hero-contrast.py, not eyeballed.
 */
.rwl-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		/*
		 * A BAND, not a blanket. The headline measured 2.58:1 against the
		 * brightest stretch of beach behind it and large text needs 3:1, so
		 * the fix is a soft horizontal band of extra density across the rows
		 * the type actually occupies — roughly 26% to 66% of the hero — while
		 * the sky at the top and the surf at the bottom stay as bright as the
		 * footage shot them. Darkening the whole picture to fix one line is
		 * what produced the navy panel this replaced.
		 */
		/* The masthead band (added 2026-09-27). Everything in the transparent
		   bar is white and the top of this photograph is bright cloud, so the
		   nav measured 3.0-3.7:1 and the lockup 4.66:1. Sized in px because
		   it exists for the 128px header, not for a fraction of the hero, and
		   it runs on to 300px so the fade is invisible. */
		linear-gradient(to bottom, rgba(14, 12, 11, .56) 0px, rgba(14, 12, 11, .50) 100px, rgba(14, 12, 11, .34) 175px, rgba(14, 12, 11, .12) 240px, rgba(14, 12, 11, 0) 300px),
		/* Reshaped 2026-10-02. The band ran 30%-62% of the hero, drawn for a
		   three-line headline; the copy now runs 27%-89% and the lede, the
		   buttons and the call line all sat past the end of it (lede 3.37:1).
		   It covers the whole type column now and still opens to nothing at
		   the top, where only the lockup sits. */
		linear-gradient(to bottom, rgba(16, 18, 22, 0) 12%, rgba(16, 18, 22, .26) 22%, rgba(16, 18, 22, .26) 92%, rgba(16, 18, 22, .06) 99%),
		linear-gradient(to right, rgba(16, 18, 22, .58) 0%, rgba(16, 18, 22, .40) 44%, rgba(16, 18, 22, .06) 76%, rgba(16, 18, 22, .12) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .14) 0%, rgba(16, 18, 22, .00) 38%, rgba(16, 18, 22, .26) 100%);
}

/*
 * THE PHONE HERO NEEDS ITS OWN SCRIM. Everything above is a left-to-right wash
 * measured against a desktop video. Phones are never sent the video at all, and
 * the copy runs the full width of the screen, so the right-hand end of every
 * line falls where that wash has faded to .06 — and the eyebrow at the top and
 * the call line at the bottom fall outside the horizontal band entirely. The
 * parent ships no phone block, and finish-demo.sh only measures at 1440, so
 * nothing in the pipeline ever looks. Even vertical band instead.
 *
 * THESE NUMBERS ARE SOLVED, NOT GUESSED. Phones get a Ken Burns loop, so more
 * than one picture sits behind this text and each has its own brightness — the
 * golden-hour aerial over the St Johns and the skyline under warm cloud. Both
 * are bright, which is why this band could be LIGHTENED after the first pass —
 * an earlier still was a near-silhouette sunset and forced the whole scrim
 * darker to carry one picture. Swapping that still out bought the photograph
 * back everywhere. hero-contrast.py measures
 * whichever frame headless Chrome happens to be showing, which is one of them.
 * tmp/rema-wilson/scrim-score.py composites this gradient over every still
 * offline and reports the WORST pixel under each block of type — at these
 * values the weakest reading across all five is lede 4.70:1 against a 4.5
 * requirement, and the eyebrow, title and phone line all clear with room.
 * Anything flat and lighter fails the lede on every single still.
 *
 * So the band is SHAPED to the type rather than flat: it opens to .20 across
 * the top fifth, where the only thing over the picture is the lockup, and only
 * closes down from .26 where the eyebrow starts. That top window is what makes
 * it read as a photograph of her market rather than a dark panel — Adam has
 * rejected "way too dark" twice — while the worst pixel under the lede still
 * measures 4.63:1 against a 4.5 requirement.
 */
@media (max-width: 900px) {
	.rwl-hero__scrim {
		background:
			linear-gradient(to bottom,
				/* .18 let the white lockup sit at 4.14:1 once the logo turned
				   white on 2026-09-27. The band the masthead needs is folded
				   into the stops that were already here rather than added as
				   another layer — and it is SMALL: .28 was the figure the
				   measurement asked for, and the .50 I reached for first
				   buried a sunset over the St Johns under what looked like a
				   dark grey rectangle. The lede's own band below is untouched. */
				/* The eyebrow starts at 22% of the phone hero and the call line
				   ends at 91%, so the band has to be up to strength by 19% and
				   hold to the bottom. The top 10% stays light because only the
				   lockup is there and it has its own measured margin. */
				/*
				 * Backed off on 2026-10-02 after measuring it properly. The
				 * first scoring pass took the 90th percentile of each text box,
				 * which on white type IS the type — so it reported 2.9-4.0:1,
				 * the band went to .66 across the whole hero, and the golden
				 * hour behind it turned into a grey slab. Scored against the
				 * ground only (65th percentile, below the glyphs) the same
				 * frames read 7-13:1: the band was doing nothing but hiding the
				 * photograph. What the type actually needs, worked back from
				 * the unscrimmed luminance, is about .30 at the eyebrow, .40
				 * through the headline and almost nothing lower down, where the
				 * water is already dark.
				 */
				rgba(16, 18, 22, .22) 0%,
				rgba(16, 18, 22, .26) 10%,
				/* .40/.42 left the eyebrow at 4.26 and the headline at 4.20 while
				   the lede below was already 4.80 — the band is raised only over
				   the rows that needed it, not across the hero. */
				rgba(16, 18, 22, .49) 20%,
				rgba(16, 18, 22, .50) 42%,
				rgba(16, 18, 22, .30) 62%,
				rgba(16, 18, 22, .22) 82%,
				rgba(16, 18, 22, .20) 100%);
	}
}

.rwl-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
/* Three stacked lines, her request — "keep the three lines fairly close
   together". Headings run 1.16 site-wide, which leaves a visible gap between
   three short lines; 1.03 closes it without the descenders touching. The
   <br>s come from nl2br() in front-page.php. */
.rwl-hero__title { color: #fff; line-height: 1.03; text-wrap: balance; }
.rwl-hero__lede { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-top: 1.25rem; }

.rwl-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.rwl-hero__note {
	margin-top: 1.35rem;
	font-size: .84rem;
	color: rgba(255, 255, 255, .62);
}

/* ---------------------------------------------------------------- banner -- */

.rwl-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(16rem, 38vh, 22rem);
	padding-block: clamp(4rem, 9vh, 6rem) clamp(2rem, 5vh, 3rem);
	overflow: hidden;
	background: var(--rwl-deep-dk);
}

.rwl-banner__media { position: absolute; inset: 0; z-index: 0; }
.rwl-banner__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(16, 18, 22, .62) 0%, rgba(16, 18, 22, .46) 55%, rgba(16, 18, 22, .30) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .24) 0%, rgba(16, 18, 22, .12) 50%, rgba(16, 18, 22, .42) 100%);
}

.rwl-banner__inner { position: relative; z-index: 2; max-width: 56rem; }
.rwl-banner__title { color: #fff; }
.rwl-banner__lede { color: rgba(255, 255, 255, .85); }

/* Banners with no photograph still need to be navy, not a white void. */
.rwl-banner:not(:has(.rwl-banner__media)) { background: var(--rwl-deep); }

/* ----------------------------------------------------------------- split -- */

.rwl-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.rwl-split--reverse .rwl-split__media { order: 2; }
.rwl-split--reverse .rwl-split__body { order: 1; }
.rwl-split__body .rwl-lede { margin-bottom: 1.25rem; }
.rwl-split__body .rwl-btn { margin-top: 1.5rem; }

@media (max-width: 900px) {
	.rwl-split { grid-template-columns: 1fr; }
	.rwl-split--reverse .rwl-split__media,
	.rwl-split--reverse .rwl-split__body { order: initial; }
	.rwl-figure--tall, .rwl-figure--portrait { aspect-ratio: 16 / 11; }
}

/* ----------------------------------------------------------- cards, grid -- */

.rwl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem;
}

.rwl-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .28s var(--rwl-ease), box-shadow .28s var(--rwl-ease), border-color .28s var(--rwl-ease);
}

.rwl-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--rwl-shadow-lg);
}

.rwl-card__media { position: relative; display: block; }
.rwl-card__media .rwl-figure { border-radius: 0; }
.rwl-card__media img { transition: transform .5s var(--rwl-ease); }
.rwl-card:hover .rwl-card__media img { transform: scale(1.035); }

.rwl-card__status {
	position: absolute;
	top: .75rem; left: .75rem;
	padding: .35rem .7rem;
	border-radius: 3px;
	background: var(--rwl-deep);
	color: #fff;
	font-family: var(--rwl-display);
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* A sold listing should not look like an available one. */
.rwl-status--sold,
.rwl-status--closed { background: var(--rwl-ink); }
.rwl-status--pending,
.rwl-status--under-contract { background: var(--rwl-accent); color: #FFFFFF; }
.rwl-status--coming-soon { background: var(--rwl-deep-lt); }

.rwl-card__body { display: flex; flex-direction: column; padding: 1.35rem 1.35rem 1.5rem; }

.rwl-card__price {
	margin-bottom: .35rem;
	font-family: var(--rwl-display);
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--rwl-deep);
}

.rwl-card__title { font-size: 1.05rem; margin-bottom: .5rem; }
.rwl-card__title a { color: var(--rwl-ink); }
.rwl-card__title a:hover { color: var(--rwl-deep); }

.rwl-card__addr {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .9rem;
	font-size: .88rem;
	color: var(--rwl-muted);
}
.rwl-card__addr .rwl-icon { color: var(--rwl-accent); }

.rwl-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--rwl-line-soft);
	font-size: .84rem;
	color: var(--rwl-body);
}
.rwl-card__specs li { display: inline-flex; align-items: center; gap: .35rem; }
.rwl-card__specs .rwl-icon { color: var(--rwl-deep-lt); }

.rwl-card__date {
	margin-bottom: .4rem;
	font-family: var(--rwl-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}
.rwl-card__text { font-size: .93rem; color: var(--rwl-muted); margin-bottom: 1rem; }

.rwl-count {
	margin-bottom: 1.75rem;
	font-size: .88rem;
	color: var(--rwl-muted);
}

/* --------------------------------------------------------------- services -- */

.rwl-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
}

.rwl-service {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.6rem;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
	color: inherit;
	transition: transform .28s var(--rwl-ease), box-shadow .28s var(--rwl-ease), border-color .28s var(--rwl-ease);
}
.rwl-service:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--rwl-shadow-lg);
	color: inherit;
}

.rwl-service__num {
	margin-bottom: .9rem;
	font-family: var(--rwl-display);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--rwl-accent);
}
.rwl-service__title { margin-bottom: .5rem; }
.rwl-service__text { font-size: .93rem; color: var(--rwl-muted); margin-bottom: 1.25rem; }

.rwl-service__link {
	margin-top: auto;
	font-family: var(--rwl-display);
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rwl-deep);
}
.rwl-service__link::after {
	content: ' \2192';
	display: inline-block;
	transition: transform .25s var(--rwl-ease);
}
.rwl-service:hover .rwl-service__link::after,
.rwl-card:hover .rwl-service__link::after { transform: translateX(4px); }

/* --------------------------------------------------------------- pillars -- */

.rwl-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
}

.rwl-pillar {
	padding: 1.75rem 1.5rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 8px;
}
.rwl-pillar__title { margin-bottom: .6rem; font-size: 1.05rem; }
.rwl-pillar__body { font-size: .92rem; color: rgba(255, 255, 255, .78); margin: 0; }

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

.rwl-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 1.5rem;
}
.rwl-step { padding-top: 1.5rem; border-top: 2px solid var(--rwl-line); }
.rwl-step__num {
	display: block;
	margin-bottom: .7rem;
	font-family: var(--rwl-display);
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1;
	color: var(--rwl-accent);
}
.rwl-step__title { margin-bottom: .4rem; }
.rwl-step__text { font-size: .92rem; color: var(--rwl-muted); margin: 0; }

/* ---------------------------------------------------------------- quotes -- */

.rwl-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 1.5rem;
}

.rwl-quote {
	margin: 0;
	padding: 1.9rem 1.6rem;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
}
.rwl-quote__stars { color: var(--rwl-accent); letter-spacing: .12em; margin-bottom: .9rem; }
.rwl-quote blockquote { margin: 0 0 1.1rem; color: var(--rwl-body); }
.rwl-quote figcaption { display: flex; flex-direction: column; gap: .15rem; }
.rwl-quote__name { font-family: var(--rwl-display); font-weight: 400; color: var(--rwl-ink); font-size: .92rem; }
.rwl-quote__via { font-size: .8rem; color: var(--rwl-faint); }

/* ------------------------------------------------------------------ team -- */

.rwl-team { display: grid; gap: 2rem; }

.rwl-member {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
}

@media (max-width: 760px) {
	.rwl-member { grid-template-columns: 1fr; }
}

.rwl-member__photo { position: relative; }

.rwl-member__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	border-radius: 6px;
	background: var(--rwl-deep);
	color: var(--rwl-accent-lt);
	font-family: var(--rwl-display);
	font-size: 3.5rem;
	font-weight: 400;
	letter-spacing: .04em;
}

.rwl-member__name { margin-bottom: .2rem; }
.rwl-member__role {
	font-family: var(--rwl-display);
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}
.rwl-member__bio { color: var(--rwl-body); margin-bottom: 1.1rem; }
.rwl-member__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.rwl-member__contact a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.rwl-member__contact .rwl-icon { color: var(--rwl-accent); }

.rwl-joinus {
	margin-top: 2rem;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--rwl-tint);
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
	text-align: center;
}
.rwl-joinus h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.rwl-joinus p { max-width: 52ch; margin-inline: auto; margin-bottom: 1.4rem; color: var(--rwl-muted); }

/* -------------------------------------------------------------- listing -- */

.rwl-listing { padding-block: clamp(2rem, 5vw, 3rem) 0; }
.rwl-listing__head { margin-bottom: 1.75rem; }

.rwl-crumb { font-size: .82rem; color: var(--rwl-faint); margin-bottom: 1rem; }
.rwl-crumb span { margin-inline: .4rem; }

.rwl-listing__titles {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.rwl-listing__addr {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .6rem;
	color: var(--rwl-muted);
}
.rwl-listing__addr .rwl-icon { color: var(--rwl-accent); }
.rwl-listing__price { text-align: right; }
.rwl-listing__amount {
	font-family: var(--rwl-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 400;
	color: var(--rwl-deep);
	margin-bottom: .4rem;
}
.rwl-listing__price .rwl-card__status { position: static; display: inline-block; }

.rwl-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr));
	gap: 1px;
	margin-top: 1.75rem;
	background: var(--rwl-line);
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
	overflow: hidden;
}
.rwl-facts li { padding: 1.1rem 1.25rem; background: #fff; text-align: center; }
.rwl-facts__value {
	display: block;
	font-family: var(--rwl-display);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--rwl-ink);
}
.rwl-facts__label {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rwl-faint);
}

.rwl-listing__body {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 900px) { .rwl-listing__body { grid-template-columns: 1fr; } }

.rwl-listing__galleryhead { margin-top: 2.5rem; }
.rwl-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}

/*
 * THE STICKY GOES ON THE ASIDE, NOT ON THE BOX INSIDE IT. position: sticky only
 * moves an element within its own parent, and .rwl-listing__aside is a
 * start-aligned grid item, so it is exactly as tall as its content — the box
 * had nowhere to travel and never moved, on every listing page in this
 * lineage. This is the same mistake the Larry Mullinix build made and the
 * playbook records; the parent still ships it.
 */
.rwl-listing__aside {
	position: sticky;
	top: calc(var(--rwl-header-h) + 1.5rem);
	align-self: start;
}

/* On a phone nothing follows the thumb — a box that tracks you covers the
   photographs it sits beside. It moves above them and stops moving. */
@media (max-width: 900px) {
	.rwl-listing__aside { position: static; order: -1; }
}

.rwl-askbox {
	padding: 1.75rem 1.6rem;
	background: var(--rwl-tint);
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
}
.rwl-askbox h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.rwl-askbox p { font-size: .92rem; color: var(--rwl-muted); margin-bottom: 1.25rem; }
.rwl-askbox__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	margin-top: .9rem;
	font-family: var(--rwl-display);
	font-weight: 400;
	color: var(--rwl-deep);
}

/* ----------------------------------------------------------------- empty -- */

.rwl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 34rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
	background: var(--rwl-tint);
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
}
.rwl-empty__mark { opacity: .7; }
.rwl-empty h2 { font-size: 1.3rem; }
.rwl-empty p { color: var(--rwl-muted); margin-bottom: .5rem; }

/* ------------------------------------------------------------------ faqs -- */

.rwl-faqs { display: grid; gap: .75rem; }

.rwl-faq {
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 6px;
}
.rwl-faq[open] { border-color: var(--rwl-deep-lt); }

.rwl-faq__q {
	position: relative;
	padding: 1.15rem 3rem 1.15rem 1.35rem;
	font-family: var(--rwl-display);
	font-size: 1rem;
	font-weight: 400;
	color: var(--rwl-ink);
	cursor: pointer;
	list-style: none;
}
.rwl-faq__q::-webkit-details-marker { display: none; }
.rwl-faq__q:hover { color: var(--rwl-deep); }

.rwl-faq__q::after,
.rwl-faq__q::before {
	content: '';
	position: absolute;
	right: 1.35rem; top: 50%;
	width: 12px; height: 2px;
	background: var(--rwl-accent);
	transition: transform .25s var(--rwl-ease);
}
.rwl-faq__q::before { transform: translateY(-50%) rotate(90deg); }
.rwl-faq__q::after { transform: translateY(-50%); }
.rwl-faq[open] .rwl-faq__q::before { transform: translateY(-50%) rotate(0deg); }

.rwl-faq__a { margin: 0; padding: 0 3rem 1.35rem 1.35rem; color: var(--rwl-muted); }

/* ---------------------------------------------------------------- contact -- */

.rwl-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
@media (max-width: 900px) { .rwl-contact { grid-template-columns: 1fr; } }

.rwl-contact__form .rwl-form { margin-top: 1.75rem; }

.rwl-contact__aside {
	display: grid;
	gap: 1px;
	background: var(--rwl-line);
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
	overflow: hidden;
}
.rwl-contact__block { padding: 1.4rem 1.5rem; background: #fff; }
.rwl-contact__heading {
	margin-bottom: .4rem;
	font-family: var(--rwl-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}
.rwl-contact__big {
	display: inline-block;
	font-family: var(--rwl-display);
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--rwl-ink);
	word-break: break-word;
}
.rwl-contact__big:hover { color: var(--rwl-deep); }
.rwl-contact__note, .rwl-contact__text { margin: .3rem 0 0; font-size: .9rem; color: var(--rwl-muted); }
.rwl-contact__text { color: var(--rwl-body); }

.rwl-contact__seal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	padding: 1.75rem 1.5rem;
	text-align: center;
	background: var(--rwl-deep);
}
.rwl-contact__seal p {
	margin: 0;
	font-family: var(--rwl-display);
	font-size: .78rem;
	font-weight: 400;
	color: rgba(255, 255, 255, .82);
}
.rwl-contact__seal .rwl-mark { filter: brightness(1.6); }

/* ------------------------------------------------------------------ form -- */

.rwl-form { display: grid; gap: 1rem; }
.rwl-field { display: grid; gap: .4rem; min-width: 0; }
.rwl-field__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 1rem;
}

.rwl-field label {
	font-family: var(--rwl-display);
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--rwl-muted);
}
.rwl-field label span { color: var(--rwl-accent); }

.rwl-field input,
.rwl-field select,
.rwl-field textarea {
	width: 100%;
	padding: .8rem .95rem;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 5px;
	color: var(--rwl-ink);
	font-family: var(--rwl-body-font);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .2s var(--rwl-ease), box-shadow .2s var(--rwl-ease);
	-webkit-appearance: none;
	appearance: none;
}

.rwl-field textarea { resize: vertical; min-height: 8rem; }

.rwl-field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--rwl-deep) 50%),
		linear-gradient(135deg, var(--rwl-deep) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
	cursor: pointer;
}

.rwl-field input:focus,
.rwl-field select:focus,
.rwl-field textarea:focus {
	border-color: var(--rwl-deep-lt);
	box-shadow: 0 0 0 3px rgba(201, 184, 150, .12);
	outline: none;
}

.rwl-field input::placeholder, .rwl-field textarea::placeholder { color: var(--rwl-faint); }

/* Off-screen rather than display:none — some bots skip explicitly hidden
   fields, and this one is meant to be filled in. */
.rwl-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

.rwl-form__note { margin: 0; font-size: .9rem; min-height: 1.4em; }
.rwl-form__note.is-ok { color: #1E7A4C; }
.rwl-form__note.is-bad { color: #C0392B; }
.rwl-form.is-sending { opacity: .6; pointer-events: none; }

.rwl-alert {
	padding: .9rem 1.15rem;
	margin-bottom: 1.5rem;
	border-left: 3px solid var(--rwl-deep);
	background: var(--rwl-tint);
	border-radius: 0 4px 4px 0;
	font-size: .94rem;
}
.rwl-alert--ok { border-left-color: #1E7A4C; color: #1E7A4C; }
.rwl-alert--bad { border-left-color: #C0392B; color: #C0392B; }

/* ----------------------------------------------------------------- modal -- */

.rwl-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rwl-gutter);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--rwl-ease), visibility .25s var(--rwl-ease);
}
.rwl-modal[hidden] { display: flex; }
.rwl-modal.is-open { opacity: 1; visibility: visible; }

.rwl-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(16, 14, 13, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.rwl-modal__panel {
	position: relative;
	width: 100%;
	max-width: 38rem;
	max-height: min(90vh, 52rem);
	overflow-y: auto;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--rwl-shadow-lg);
	transform: translateY(14px) scale(.99);
	transition: transform .3s var(--rwl-ease);
}
.rwl-modal.is-open .rwl-modal__panel { transform: translateY(0) scale(1); }

.rwl-modal__panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--rwl-accent-metal);
	border-radius: 10px 10px 0 0;
}

.rwl-modal__close {
	position: absolute;
	top: .8rem; right: .8rem;
	width: 2.25rem; height: 2.25rem;
	display: flex; align-items: center; justify-content: center;
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: var(--rwl-muted);
	font-size: 1.55rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s var(--rwl-ease), border-color .2s var(--rwl-ease);
}
.rwl-modal__close:hover { color: var(--rwl-deep); border-color: var(--rwl-line); }

.rwl-modal__head { margin-bottom: 1.6rem; text-align: center; }
.rwl-modal__head h2 { font-size: clamp(1.3rem, 1.15rem + .9vw, 1.7rem); }
.rwl-modal__lede { margin: 0; font-size: .94rem; color: var(--rwl-muted); }

/* ---------------------------------------------------------------- closer -- */

.rwl-closer {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--rwl-deep);
	color: rgba(255, 255, 255, .82);
	text-align: center;
	overflow: hidden;
}

.rwl-closer::before {
	content: '';
	position: absolute;
	top: -45%; left: 50%;
	width: 44rem; height: 44rem;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(231, 210, 174, .17) 0%, transparent 62%);
	pointer-events: none;
}

.rwl-closer__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.rwl-closer__title { color: #fff; }
.rwl-closer__lede { color: rgba(255, 255, 255, .82); margin-inline: auto; margin-top: 1rem; }
.rwl-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }

/* ----------------------------------------------------------------- posts -- */

.rwl-posts { display: grid; gap: 2.25rem; }
.rwl-post { padding-bottom: 2.25rem; border-bottom: 1px solid var(--rwl-line); }
.rwl-post__date {
	font-family: var(--rwl-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}
.rwl-post__title { margin: .4rem 0 .6rem; }
.rwl-post__excerpt { color: var(--rwl-muted); margin: 0; }

.rwl-backlink { margin-top: 2.5rem; font-family: var(--rwl-display); font-weight: 400; }

.rwl-pagination { margin-top: 2.75rem; }
.rwl-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.rwl-pagination .page-numbers {
	padding: .5rem .9rem;
	border: 1px solid var(--rwl-line);
	border-radius: 4px;
	color: var(--rwl-body);
	font-size: .88rem;
}
.rwl-pagination .page-numbers.current,
.rwl-pagination .page-numbers:hover {
	border-color: var(--rwl-deep);
	background: var(--rwl-deep);
	color: #fff;
}

/* --------------------------------------------- syndicated legal documents -- */

/* Light site, so the plugin's inline color:#000000 is survivable here — but it
   is still forced to the body colour so legal pages match everything else. */
.bb-legal-container,
.bb-legal-container * { color: var(--rwl-body) !important; }
.bb-legal-container { max-width: 70ch; }
.bb-legal-container h1,
.bb-legal-container h2,
.bb-legal-container h3,
.bb-legal-container strong,
.bb-legal-container b { color: var(--rwl-ink) !important; }
.bb-legal-container h2,
.bb-legal-container h3 { margin: 2.25rem 0 .75rem; line-height: 1.25; font-family: var(--rwl-display); }
.bb-legal-container p, .bb-legal-container li { margin-bottom: 1em; }
.bb-legal-container ul, .bb-legal-container ol { margin: 0 0 1.25em 1.25rem; list-style: disc; }
.bb-legal-container ol { list-style: decimal; }
.bb-legal-container a { color: var(--rwl-deep-lt) !important; text-decoration: underline; }
.bb-legal-container hr { border: 0; border-top: 1px solid var(--rwl-line); margin: 2rem 0; }

/* ---------------------------------------------------------------- reveal -- */

@media (prefers-reduced-motion: no-preference) {
	html.js [data-rwl-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .7s var(--rwl-ease), transform .7s var(--rwl-ease);
	}
	html.js [data-rwl-reveal].is-in { opacity: 1; transform: none; }
}

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

/* ------------------------------------------------------------------ misc -- */

@media (max-width: 620px) {
	.rwl-section { padding-block: clamp(3rem, 10vw, 4rem); }
	.rwl-card__body { padding: 1.15rem; }
	.rwl-service { padding: 1.6rem 1.3rem; }
	.rwl-listing__titles { flex-direction: column; align-items: flex-start; }
	.rwl-listing__price { text-align: left; }
}

body.admin-bar .rwl-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .rwl-header { top: 46px; } }

/* -------------------------------------------------------- nav dropdowns -- */

.rwl-nav__item { position: relative; display: flex; align-items: center; gap: .2rem; }

/* The chevron is a button, not decoration: on a touch screen there is no hover,
   so the parent link has to stay a link and something else has to open the
   submenu. */
.rwl-nav__toggle {
	display: inline-flex;
	align-items: center;
	padding: .25rem;
	background: none;
	border: 0;
	color: var(--rwl-ink);
	cursor: pointer;
	transition: transform .2s var(--rwl-ease);
}
.rwl-nav__item.is-open > .rwl-nav__toggle { transform: rotate(180deg); }

.rwl-nav__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 15rem;
	padding: .5rem 0;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 6px;
	box-shadow: var(--rwl-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s var(--rwl-ease), transform .2s var(--rwl-ease), visibility .2s var(--rwl-ease);
	z-index: 20;
}

.rwl-nav__item:hover > .rwl-nav__sub,
.rwl-nav__item:focus-within > .rwl-nav__sub,
.rwl-nav__item.is-open > .rwl-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rwl-nav__sub a {
	display: block;
	padding: .55rem 1.1rem;
	font-size: .78rem;
	text-transform: none;
	letter-spacing: .01em;
	color: var(--rwl-body);
}
.rwl-nav__sub a::after { display: none; }
.rwl-nav__sub a:hover { background: var(--rwl-tint); color: var(--rwl-deep); }

/* In the drawer every submenu is an accordion, collapsed by default.
 *
 * They used to be forced open, which turned six top-level items into fourteen
 * rows and pushed the bottom of the menu off a phone screen entirely. Collapsed,
 * the whole menu fits without scrolling and each section opens on a tap. */
.rwl-drawer__nav .rwl-nav__list { width: 100%; gap: 0; }

.rwl-drawer__nav .rwl-nav__item {
	display: grid;
	/* A centred row with the chevron pinned right: three columns where the outer
	   two are equal, so the label lands on the true centre rather than being
	   pushed left by the arrow's width. */
	grid-template-columns: 3rem 1fr 3rem;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid var(--rwl-line);
}

.rwl-drawer__nav .rwl-nav__item > a {
	grid-column: 2;
	padding-block: 1rem;
	font-size: 1.06rem;
	text-align: center;
}
.rwl-drawer__nav .rwl-nav__item > a::after { display: none; }

/* The row is the control, so it should look like one under the finger. */
.rwl-drawer__nav .rwl-nav__item.has-children { cursor: pointer; }
.rwl-drawer__nav .rwl-nav__item.has-children:active { background: var(--rwl-tint); }

/* A proper hit target — the chevron is the control that opens the section, and
   on a phone it has to be thumb-sized rather than icon-sized. */
.rwl-drawer__nav .rwl-nav__toggle {
	grid-column: 3;
	display: inline-flex;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--rwl-deep);
}

.rwl-drawer__nav .rwl-nav__sub {
	grid-column: 1 / -1;
	background: var(--rwl-tint);
	position: static;
	min-width: 0;
	border: 0;
	box-shadow: none;
	background: none;
	transform: none;
	visibility: visible;
	opacity: 1;
	/* Collapsed by default.
	 *
	 * NOT the grid-template-rows: 0fr trick — that declares a single track, so
	 * only the first child collapses and every item after it lands in an
	 * implicit auto row and stays visible. It looked like the accordion worked
	 * until a submenu had more than one entry. max-height is unfashionable and
	 * correct. */
	display: block;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	opacity: 0;
	transition: max-height .3s var(--rwl-ease), opacity .2s var(--rwl-ease), padding .3s var(--rwl-ease);
}

.rwl-drawer__nav .rwl-nav__item.is-open > .rwl-nav__sub {
	/* Comfortably past the tallest submenu (three items); the transition eases
	   on the real height because the content is shorter than the cap. */
	max-height: 22rem;
	opacity: 1;
	padding-bottom: .6rem;
}

.rwl-drawer__nav .rwl-nav__sub a {
	padding: .55rem 0;
	font-size: .95rem;
	font-weight: 500;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	color: var(--rwl-body);
}

/* ----------------------------------------------------------- credentials -- */

/* White, not navy. It sat directly beneath a navy-scrimmed hero and the two ran
   together as one undifferentiated slab of blue. */
.rwl-creds { background: #fff; border-bottom: 1px solid var(--rwl-line); }

.rwl-creds__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 13rem), 1fr));
	gap: 1px;
	background: var(--rwl-line);
}

.rwl-creds__list li {
	padding: 1.5rem 1.25rem;
	background: #fff;
	text-align: center;
}

.rwl-creds__label {
	display: block;
	font-family: var(--rwl-display);
	font-size: 1.02rem;
	font-weight: 400;
	color: var(--rwl-deep);
}
.rwl-creds__note {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--rwl-muted);
}

/* ----------------------------------------------------------------- paths -- */

.rwl-paths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.rwl-path {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .28s var(--rwl-ease), box-shadow .28s var(--rwl-ease);
}
.rwl-path:hover { transform: translateY(-4px); box-shadow: var(--rwl-shadow-lg); }

.rwl-path__media .rwl-figure { border-radius: 0; }
.rwl-path__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.rwl-path__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.rwl-path__text { color: var(--rwl-muted); margin-bottom: 1.5rem; }

/* ----------------------------------------------------------------- creed -- */

.rwl-creed__inner { max-width: 52rem; margin-inline: auto; text-align: center; }

.rwl-creed__quote { margin: 0; }

.rwl-creed__goal {
	font-family: var(--rwl-display);
	font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.95rem);
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
	margin-bottom: 1.5rem;
}

.rwl-creed__close {
	font-size: clamp(1rem, .97rem + .3vw, 1.12rem);
	color: var(--rwl-accent-lt);
	font-weight: 500;
}

.rwl-creed__attrib {
	margin-top: 1.25rem;
	font-family: var(--rwl-display);
	font-size: .76rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.rwl-creed__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
	margin-top: 2rem;
}

/* ------------------------------------------------------- valuation call -- */

.rwl-valuecta {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--rwl-tint);
	border: 1px solid var(--rwl-line);
	border-left: 4px solid var(--rwl-accent-mid);
	border-radius: 8px;
}
@media (max-width: 820px) { .rwl-valuecta { grid-template-columns: 1fr; } }

.rwl-valuecta h2 { margin-bottom: .6rem; }
.rwl-valuecta p { color: var(--rwl-muted); margin: 0; }
.rwl-valuecta__act { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }

.rwl-valuecta__call {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--rwl-display);
	font-weight: 400;
	color: var(--rwl-deep);
}
.rwl-valuecta__call .rwl-icon { color: var(--rwl-accent-mid); }

/* Both step lists are four items. auto-fit put three on one row and left the
   fourth stranded beside a hole, so the count is pinned instead: four across,
   then two, then one. Two never orphans a four-item list. */
.rwl-steps--wide { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1120px) { .rwl-steps--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .rwl-steps--wide { grid-template-columns: 1fr; } }

.rwl-quotes__more { margin-top: 2rem; text-align: center; }

/* Pillars sit on navy by default; this is the variant for a light band. */
.rwl-pillars--light .rwl-pillar {
	background: #fff;
	border-color: var(--rwl-line);
}
.rwl-pillars--light .rwl-pillar__title { color: var(--rwl-ink); }
.rwl-pillars--light .rwl-pillar__body { color: var(--rwl-muted); }

/* ---------------------------------------------------------------- footer -- */

/* Same structure as themes/brokerboost-flagship, but white.
 *
 * The flagship paints it with --bbt-primary. Here the closing band above it is
 * already navy, so a navy footer made the bottom fifth of every page one
 * continuous blue block with a hairline through it. White separates the two and
 * lets the logo sit on its own background without a plate. */

/*
 * The footer, continuous with the closer above it.
 *
 * It used to be white with a cream legal strip, which meant the bottom of every
 * page was three surfaces in a row: a glowing navy band, a hard edge, white, and
 * then cream. The glow Adam liked was doing its work and then hitting a wall an
 * inch below.
 *
 * Now the closer and the footer share one ground, with no border between them,
 * and a second much wider glow sits at the top of the footer continuing the same
 * light. Read together they are one object: light falls from the closer's
 * headline and dies out somewhere around the legal line.
 *
 * Everything else is subtraction — the logo came down from 96px, the columns
 * tightened, and the legal strip is now a darker shelf rather than a different
 * material.
 */
.rwl-foot {
	position: relative;
	background: var(--rwl-deep);
	color: rgba(255, 255, 255, .70);
	overflow: hidden;
}

/* The continuation of the closer's light. Wider and fainter than the one above
   it, so it reads as the same source falling further rather than a second lamp. */
.rwl-foot::before {
	content: '';
	position: absolute;
	top: -70%; left: 50%;
	width: 74rem; height: 52rem;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(231, 210, 174, .10) 0%, transparent 64%);
	pointer-events: none;
}

.rwl-foot__in {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4.5vw, 68px);
	padding-block: clamp(40px, 5vw, 60px);
}

.rwl-foot__brand { flex: 1 1 300px; }
.rwl-foot__col { flex: 0 1 190px; }

.rwl-foot__brand .rwl-logo { margin-bottom: .9rem; }
.rwl-foot__brand .rwl-logo__img { height: 64px; }

.rwl-foot__name { margin: 0; font-family: var(--rwl-display); font-size: 1.1rem; font-weight: 400; color: #fff; }
.rwl-foot__firm {
	margin: 2px 0 12px;
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* --rwl-accent is a dark blue and vanishes here; the light tint is the only
	   member of the brand family that survives on this ground. */
	color: var(--rwl-brand-lt);
}
.rwl-foot__blurb { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .60); font-size: .9rem; }

.rwl-foot__h {
	margin: 0 0 12px;
	font-family: var(--rwl-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.rwl-foot__menu { list-style: none; margin: 0; padding: 0; }
.rwl-foot__menu a,
.rwl-foot__link {
	display: block;
	padding: 4px 0;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	font-size: .92rem;
	transition: color .18s var(--rwl-ease);
}
.rwl-foot__menu a:hover,
.rwl-foot__link:hover { color: #fff; text-decoration: none; }

.rwl-foot__addr { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .88rem; }
.rwl-foot__social { margin: 14px 0 0; font-size: .88rem; }
.rwl-foot__social a { color: var(--rwl-brand-lt); }

/* A darker shelf rather than a different material. The hairline is white at low
   alpha so it reads as a fold in the same surface, not a seam between two. */
.rwl-foot__legal {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, .09);
	background: rgba(0, 0, 0, .18);
}
.rwl-foot__legal-in { padding-block: 20px; font-size: .76rem; color: rgba(255, 255, 255, .48); line-height: 1.65; }
.rwl-foot__legal-in p { margin: 0 0 6px; }
.rwl-foot__legal-in a { color: rgba(255, 255, 255, .68); }
.rwl-foot__legal-in a:hover { color: #fff; }

.rwl-foot__legalnav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 10px 0; }
.rwl-foot__legalnav a { text-decoration: underline; text-underline-offset: 2px; }

.rwl-foot__eho { display: flex; align-items: center; gap: 8px; }

/* The agent sign-in, as on the new demos: one pill on its own line directly
   above the legal links. A lock, the words, a small arrow, all in the label's
   own ink: white on the dark footer, the brand color on hover. 44px tall. */
.rwl-foot__legal-in .rwl-foot__signin { margin: 14px 0 6px; }
.rwl-foot__legal-in .rwl-signin {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	padding: 0 1.1rem 0 .95rem;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	font-family: var(--rwl-body-font);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	transition: background-color .25s var(--rwl-ease), border-color .25s var(--rwl-ease), color .25s var(--rwl-ease);
}
.rwl-signin__lock { flex: none; opacity: .82; }
.rwl-signin__go { flex: none; opacity: .82; transition: transform .25s var(--rwl-ease), opacity .25s var(--rwl-ease); }
.rwl-foot__legal-in .rwl-signin:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (hover: hover) {
	.rwl-foot__legal-in .rwl-signin:hover { background: #fff; border-color: #fff; color: var(--rwl-brand); }
	.rwl-signin:hover .rwl-signin__lock { opacity: 1; }
	.rwl-signin:hover .rwl-signin__go { transform: translateX(3px); opacity: 1; }
}
.rwl-foot__legal-in .rwl-signin:active { background: rgba(255, 255, 255, .16); }
@media (prefers-reduced-motion: reduce) {
	.rwl-signin, .rwl-signin__go { transition: none; }
	.rwl-signin:hover .rwl-signin__go { transform: none; }
}

/* The Equal Housing mark is now real SVG geometry — see rwl_eho_mark(). */
.rwl-eho { flex: 0 0 auto; opacity: .85; }

/* --------------------------------------------------------- property search -- */

/* A mockup. It has to look like a working search or it undersells the site, and
   it has to be obviously a form or nobody will try it. */

.rwl-searchband {
	position: relative;
	z-index: 5;
	/* Rides up over the hero so it reads as part of it. */
	margin-top: -3.5rem;
	padding-bottom: 1rem;
}
@media (max-width: 900px) { .rwl-searchband { margin-top: -1.5rem; } }

.rwl-section--searchtop { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.rwl-section--tight { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.rwl-search {
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 10px;
	box-shadow: var(--rwl-shadow-lg);
}

.rwl-search--page { box-shadow: var(--rwl-shadow); }

.rwl-search__row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr auto;
	gap: .75rem;
	align-items: end;
}
@media (max-width: 900px) {
	.rwl-search__row { grid-template-columns: 1fr 1fr; }
	.rwl-search__field--wide { grid-column: 1 / -1; }
	.rwl-search__submit { grid-column: 1 / -1; }
}

.rwl-search__field { display: grid; gap: .3rem; min-width: 0; }

.rwl-search__field label {
	font-family: var(--rwl-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rwl-muted);
}

.rwl-search__field input,
.rwl-search__field select {
	width: 100%;
	padding: .7rem .8rem;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 5px;
	color: var(--rwl-ink);
	font-family: var(--rwl-body-font);
	font-size: .95rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s var(--rwl-ease), box-shadow .2s var(--rwl-ease);
}

.rwl-search__field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--rwl-deep) 50%),
		linear-gradient(135deg, var(--rwl-deep) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.4rem;
	cursor: pointer;
}

.rwl-search__field input:focus,
.rwl-search__field select:focus {
	border-color: var(--rwl-deep-lt);
	box-shadow: 0 0 0 3px rgba(201, 184, 150, .12);
	outline: none;
}

.rwl-search__submit .rwl-btn { width: 100%; padding-block: .78rem; }

.rwl-search__more { margin-top: .85rem; }
.rwl-search__more summary {
	display: inline-block;
	font-family: var(--rwl-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rwl-deep-lt);
	cursor: pointer;
	list-style: none;
}
.rwl-search__more summary::-webkit-details-marker { display: none; }
.rwl-search__more summary::after { content: ' +'; }
.rwl-search__more[open] summary::after { content: ' \2013'; }

.rwl-search__row--more {
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
	margin-top: .85rem;
	padding-top: .85rem;
	border-top: 1px solid var(--rwl-line-soft);
}

/* ------------------------------------------------------------------ creed -- */

.rwl-creed__call {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255, 255, 255, .86);
	font-size: .98rem;
}
.rwl-creed__call strong { color: var(--rwl-accent-lt); }
.rwl-creed__call:hover { color: #fff; }
.rwl-creed__call .rwl-icon { color: var(--rwl-accent-lt); }

.rwl-glyph { color: var(--rwl-faint); }

/* ---------------------------------------------------------------- slider -- */

/* A real horizontal scroller with scroll-snap, not a JS carousel. Trackpad,
   swipe, keyboard and the arrow buttons all work without special-casing any of
   them — the buttons just call scrollBy(). */

.rwl-slider__controls { display: flex; align-items: center; gap: .5rem; }

.rwl-slider__btn {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 50%;
	color: var(--rwl-deep);
	cursor: pointer;
	transition: background .2s var(--rwl-ease), border-color .2s var(--rwl-ease), opacity .2s var(--rwl-ease);
}
.rwl-slider__btn:hover { background: var(--rwl-deep); border-color: var(--rwl-deep); color: #fff; }
.rwl-slider__btn[disabled] { opacity: .35; cursor: default; }
.rwl-slider__btn[disabled]:hover { background: #fff; border-color: var(--rwl-line); color: var(--rwl-deep); }

.rwl-slider__track {
	display: grid;
	grid-auto-flow: column;
	/* Likewise a floor that is not zero, so the track overflows. */
	/* The cap used to be a flat 21rem, which is narrower than the container on
	   any phone above ~400px: a 336px card sat in a 390px track and left ~54px
	   of dead space on the right, so the carousel read as left-aligned rather
	   than centred. Falling back to 100% of the track means the card fills the
	   width on a phone and still peeks the next one on a tablet. */
	grid-auto-columns: min(84vw, 21rem, 100%);
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for the card hover lift and its shadow, which would otherwise be
	   clipped by the scroll container. */
	padding: .5rem .25rem 1.5rem;
	margin-inline: -.25rem;
	scrollbar-width: thin;
}

.rwl-slider__track::-webkit-scrollbar { height: 6px; }
.rwl-slider__track::-webkit-scrollbar-thumb { background: var(--rwl-line); border-radius: 6px; }
.rwl-slider__track::-webkit-scrollbar-track { background: transparent; }

.rwl-slider__slide { scroll-snap-align: start; min-width: 0; }

/*
 * On a phone the card is centred in the viewport with a symmetric peek either
 * side, rather than sitting flush against the left gutter with one card showing
 * on the right. Both are legitimate; this one reads as deliberate rather than
 * as a grid that happened to be cut off, which is the point on a site whose job
 * is to look more expensive than the client's current one.
 *
 * The negative margin lets the track escape the wrap's gutter so the peeking
 * cards run to the screen edge; the matching scroll-padding is what actually
 * centres the snap target, and without it the first and last cards cannot reach
 * the middle.
 */
@media (max-width: 899px) {
	.rwl-slider__track {
		grid-auto-columns: 78vw;
		margin-inline: calc(var(--rwl-gutter) * -1);
		padding-inline: 11vw;
		scroll-padding-inline: 11vw;
	}
	.rwl-slider__slide { scroll-snap-align: center; }
}
.rwl-slider__slide .rwl-card { height: 100%; }

@media (min-width: 900px) {
	/* A FIXED track width, not minmax(0, …).
	 *
	 * With a zero minimum every column is allowed to shrink, and a grid inside
	 * an overflow container will always take that offer — so twelve slides
	 * collapsed to 80px each and squeezed into the visible width instead of
	 * overflowing. scrollWidth equalled clientWidth, which is the tell: nothing
	 * to scroll, because nothing overflowed. A single length forces the track to
	 * that size and the container to scroll. */
	.rwl-slider__track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}

/* ------------------------------------------------- masthead over the hero -- */

/*
 * On the front page the masthead floats over the hero photograph and resolves
 * to the normal white bar as you scroll. Everywhere else it is opaque from the
 * first pixel, because only the front page has a dark image to float over.
 *
 * Two mechanisms, deliberately:
 *
 *   - the BACKGROUND interpolates continuously off --rwl-shrink, so the bar
 *     arrives smoothly rather than snapping;
 *   - the FOREGROUND (nav text, logo, CTA) swaps on the .is-solid class the
 *     scroll handler sets past 60%, with a transition doing the blending.
 *
 * The foreground is not interpolated through the same variable on purpose.
 * Doing so makes legibility depend on a value JS rewrites every frame, and the
 * failure mode is white text on a white bar. A class is either present or not,
 * so the worst case is "solid too early", never "invisible".
 *
 * The hero is pulled up under the masthead rather than the masthead being taken
 * out of flow — a fixed bar would force every other page to compensate for it.
 */
.rwl-home .rwl-hero { margin-top: calc(var(--rwl-header-h) * -1); }
.rwl-home .rwl-hero__inner { padding-top: var(--rwl-header-h); }

.rwl-home .rwl-header__bar {
	background: rgba(255, 255, 255, var(--rwl-shrink));
	border-bottom-color: rgba(228, 222, 210, var(--rwl-shrink));
}

/* The light state: only while over the photograph. */
.rwl-home .rwl-header:not(.is-solid) .rwl-nav__list > li > a,
.rwl-home .rwl-header:not(.is-solid) .rwl-nav__toggle,
.rwl-home .rwl-header:not(.is-solid) .rwl-callnow {
	color: #fff;
}

.rwl-home .rwl-header:not(.is-solid) .rwl-burger__box i { background: #fff; }

/* The hover underline is a gold-era gradient; on the photograph it reads as
   mud, so it becomes plain white until the bar arrives. */
.rwl-home .rwl-header:not(.is-solid) .rwl-nav__list > li > a::after { background: #fff; }

.rwl-header .rwl-nav__list > li > a,
.rwl-header .rwl-nav__toggle,
.rwl-header .rwl-callnow { transition: color .28s var(--rwl-ease); }

/* The submenu panel is its own white surface and is never part of the swap. */
.rwl-home .rwl-nav__sub a { color: var(--rwl-body); }

/*
 * The masthead CTA. Solid navy on a navy photograph disappears, so over the
 * hero it is an outlined button and fills in once the bar is there.
 */
.rwl-header__actions .rwl-btn--sm { transition: background .28s var(--rwl-ease), border-color .28s var(--rwl-ease); }

.rwl-home .rwl-header:not(.is-solid) .rwl-header__actions .rwl-btn--sm {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .75);
	color: #fff;
}

/* The light lockup sits on top of the dark one and fades out as the bar lands. */
.rwl-logo { position: relative; }
.rwl-logo__img--light {
	position: absolute;
	inset-block-start: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s var(--rwl-ease);
}
.rwl-home .rwl-header:not(.is-solid) .rwl-logo__img--light { opacity: 1; }

/* No JS: .is-solid is never added and --rwl-shrink never moves, so the masthead
   would sit transparent forever over a hero that has been pulled up under it.
   The document only gains .js once the inline script in header.php runs. */
html:not(.js) .rwl-home .rwl-hero { margin-top: 0; }
html:not(.js) .rwl-home .rwl-hero__inner { padding-top: 0; }
html:not(.js) .rwl-home .rwl-header__bar { background: #fff; }
html:not(.js) .rwl-logo__img--light { display: none; }

.rwl-rent__all { margin: 1.5rem 0 0; }

/* ------------------------------------------------------ search notice -- */

/*
 * Reuses the inquiry modal's veil and panel wholesale — it is the same object,
 * just carrying a message instead of a form. Only the width and the button row
 * differ, so only those are declared.
 */
.rwl-modal__panel--sm { max-width: 34rem; }

.rwl-note__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.6rem;
}

.rwl-note__actions .rwl-btn { flex: 1 1 auto; justify-content: center; }

/* ------------------------------------------------------- agent page -- */

/*
 * The facts block. This is what carries the eight agents who have neither a bio
 * nor a review: a direct line, an email and a state licence number, presented
 * as a proper specification rather than as leftovers. A definition list because
 * that is genuinely what it is, which also gives screen readers the pairing.
 */
.rwl-agentfacts {
	display: grid;
	gap: .85rem 2rem;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--rwl-line);
}

@media (min-width: 560px) {
	.rwl-agentfacts { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

.rwl-agentfacts dt {
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rwl-muted);
}

.rwl-agentfacts dd {
	margin: .3rem 0 0;
	font-family: var(--rwl-display);
	font-size: 1.02rem;
	color: var(--rwl-ink);
	/* Licence numbers and long emails must not push the column open. */
	overflow-wrap: anywhere;
}

.rwl-agentfacts a { color: var(--rwl-accent); }
.rwl-agentfacts a:hover { text-decoration: underline; }

.rwl-agent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 1.9rem;
}

/* The monogram at portrait size, for an agent with no headshot yet. */
.rwl-agentcard__initials--lg {
	border-radius: 8px;
	font-size: clamp(3.5rem, 9vw, 6rem);
	letter-spacing: .04em;
}

/* ------------------------------------------------- review attribution -- */

.rwl-quote__via--google {
	display: inline-flex;
	align-items: center;
	gap: .32em;
}

/* Sized in em so the mark tracks the caption rather than being pinned to a
   pixel size that stops matching the moment the type scale changes. */
.rwl-gmark {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	/* The optical centre of the G sits slightly above the text baseline. */
	transform: translateY(.04em);
}

.rwl-quote__via--google > span { line-height: 1; }

/* ----------------------------------------------------------- agent cards -- */

/*
 * The team slider's card. Narrower than a property card on purpose — a
 * portrait, a name and a role is the whole job, and fitting more of them in
 * view is what makes fifteen people read as a roster rather than a queue.
 */
.rwl-slider--team .rwl-slider__track { grid-auto-columns: min(62vw, 15rem, 100%); }

@media (min-width: 900px) {
	.rwl-slider--team .rwl-slider__track { grid-auto-columns: calc((100% - 5rem) / 5); }
}

.rwl-agentcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 8px;
	overflow: hidden;
	color: inherit;
	transition: transform .25s var(--rwl-ease), box-shadow .25s var(--rwl-ease), border-color .25s var(--rwl-ease);
}

.rwl-agentcard:hover {
	transform: translateY(-4px);
	border-color: var(--rwl-brand-lt);
	box-shadow: var(--rwl-shadow);
}

.rwl-agentcard__photo { position: relative; background: var(--rwl-sky); }

/* The monogram, for anyone whose headshot has not arrived. */
.rwl-agentcard__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	font-family: var(--rwl-display);
	font-size: 2.4rem;
	color: var(--rwl-brand);
	background: var(--rwl-sky);
}

.rwl-agentcard__body { padding: .95rem 1rem 1.15rem; }

.rwl-agentcard__name {
	display: block;
	font-family: var(--rwl-display);
	font-size: 1.12rem;
	line-height: 1.2;
	color: var(--rwl-ink);
}

.rwl-agentcard__role {
	display: block;
	margin-top: .3rem;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rwl-muted);
}

.rwl-agentcard:hover .rwl-agentcard__name { color: var(--rwl-accent); }

/* --------------------------------------------------------------- filters -- */

.rwl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--rwl-line);
}

.rwl-filter {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	background: #fff;
	border: 1px solid var(--rwl-line);
	border-radius: 999px;
	color: var(--rwl-body);
	font-family: var(--rwl-display);
	font-size: .78rem;
	font-weight: 400;
	transition: background .2s var(--rwl-ease), border-color .2s var(--rwl-ease), color .2s var(--rwl-ease);
}
.rwl-filter:hover { border-color: var(--rwl-deep); color: var(--rwl-deep); }

.rwl-filter.is-on {
	background: var(--rwl-deep);
	border-color: var(--rwl-deep);
	color: #fff;
}

.rwl-filter__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding-inline: .3rem;
	border-radius: 999px;
	background: var(--rwl-tint-2);
	color: var(--rwl-muted);
	font-size: .68rem;
}
.rwl-filter.is-on .rwl-filter__n { background: rgba(255, 255, 255, .18); color: #fff; }

/* --------------------------------------------------------------- headshot -- */

/* Her headshot is square, so it gets a square frame. It was being forced into a
   3/4 portrait, which cropped it and blew it up far larger than the section
   needed. Capped so it sits beside the text rather than dominating it. */
.rwl-figure--square { aspect-ratio: 1 / 1; }

.rwl-split__media--headshot { max-width: 26rem; margin-inline: auto; }

/* A placeholder that fills whatever frame it lands in — the card, the slider,
   the single-property hero — rather than collapsing to its min-height. */
.rwl-figure--empty.rwl-figure--wide,
.rwl-figure--empty.rwl-figure--hero,
.rwl-figure--empty.rwl-figure--square { min-height: 0; }

.rwl-listing__repd {
	margin: 0 0 .4rem;
	font-family: var(--rwl-display);
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}

/* ------------------------------------------------------- hero phone, card -- */

.rwl-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.35rem;
	font-family: var(--rwl-display);
	font-size: 1.15rem;
	font-weight: 400;
	color: #fff;
}
.rwl-hero__phone .rwl-icon { color: var(--rwl-accent-lt); }
.rwl-hero__phone:hover { color: var(--rwl-accent-lt); }
.rwl-hero__phone + .rwl-hero__note { margin-top: .5rem; }

/* The representation line is the reason a sold listing is worth showing. */
.rwl-card__repd {
	margin-bottom: .5rem;
	font-family: var(--rwl-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}

/* ------------------------------------------------------- mobile call button -- */

/* Desktop already carries the number in the utility bar, so this is the phone's
   home only on the sizes where that bar is hidden. */
.rwl-callnow { display: none; }

@media (max-width: 1040px) {
	.rwl-callnow {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		white-space: nowrap;
		/* Flat fill, not the metal gradient the other gold buttons use. That
		   gradient runs dark at the corners and bright through the middle, which
		   is fine across a 200px button and reads as a smudge across a 43px one. */
		background: var(--rwl-accent-lt);
		background-image: none;
		border-color: var(--rwl-accent-lt);
		color: var(--rwl-deep);
		/* A real touch target. It was 43x39 — under the 44px minimum and visibly
		   squatter than the burger sitting next to it. */
		min-height: 44px;
		min-width: 44px;
		padding: .6rem 1rem;
		border-radius: 6px;
	}

	.rwl-callnow:hover {
		background: var(--rwl-accent-mid);
		background-image: none;
		border-color: var(--rwl-accent-mid);
		color: var(--rwl-deep);
		box-shadow: none;
	}

	/* The brand navy, so it picks up the logo sitting beside it. */
	.rwl-callnow .rwl-icon { color: var(--rwl-deep); width: 17px; height: 17px; }
}

/* Below this the words go and the icon carries it — at 380px a labeled button
   plus a burger leaves the logo nowhere to sit. */
@media (max-width: 400px) {
	/* Icon only, and square — a squashed rectangle with a glyph floating in it
	   is what made this look broken. */
	.rwl-callnow span { display: none; }
	.rwl-callnow { padding: 0; width: 44px; height: 44px; }
}

.rwl-hero__phone strong { color: var(--rwl-accent-lt); font-weight: 700; white-space: nowrap; }

@media (max-width: 520px) {
	.rwl-hero__phone { font-size: 1.02rem; align-items: flex-start; }
	.rwl-hero__phone .rwl-icon { margin-top: .3rem; }
}

/* ------------------------------------------------------------ team roster -- */

/* Six members, so a grid rather than six full-width rows. The broker keeps the
   wide treatment because she is the reason to choose the brokerage. */
@media (min-width: 860px) {
	.rwl-team { grid-template-columns: 1fr 1fr; }
	.rwl-team .rwl-member:first-child { grid-column: 1 / -1; }
	.rwl-team .rwl-member:not(:first-child) { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }

	/* A two-person brokerage. :nth-child(2):last-child matches only when the
	   second member is also the final one, so a roster of two gets two full
	   cards instead of one wide card and one stranded half beside a hole. Three
	   or more still pair up as before. */
	.rwl-team .rwl-member:nth-child(2):last-child {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}
}

.rwl-member__license {
	margin: .75rem 0 0;
	font-family: var(--rwl-display);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rwl-faint);
}

/* A card with no bio should sit tight rather than leave the gap the bio left. */
.rwl-member__bio:empty { display: none; }

/* A heading section immediately above another section doubles its vertical
   padding, which reads as a missing block rather than as breathing room. */
.rwl-section--flush { padding-bottom: 0; }
.rwl-head--tight { margin-bottom: 0; }

/* ------------------------------------------------------- listing address plate --
   Stands in for the listing photo. See rwl_listing_media() for why most synced
   listings arrive without one. It has to read as a designed panel, because on
   this site it is the common case. */
.rwl-plate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .85rem;
	padding: 2rem 1.5rem;
	text-align: center;
	background:
		repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .022) 14px 28px),
		linear-gradient(160deg, #1A1615 0%, var(--rwl-deep) 55%, #131110 100%);
}

.rwl-plate__addr {
	font-family: var(--rwl-display);
	font-size: clamp(1.05rem, 1.9vw, 1.45rem);
	font-weight: 400;
	line-height: 1.25;
	color: #fff;
	text-wrap: balance;
}

.rwl-plate__rule {
	width: 42px;
	height: 2px;
	background: var(--rwl-accent);
}

.rwl-plate__city {
	font-family: var(--rwl-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

/* The hero on a single listing is far taller than a card, so it needs room. */
.rwl-figure--hero.rwl-plate { min-height: clamp(15rem, 34vw, 26rem); }

.rwl-foot__blurb--sm { font-size: .82rem; }

/* ------------------------------------------------------------ hero search --
   This brokerage is on the IDX plan, so the search sits inside the hero. It has
   to stay legible over a photograph, which the page variant never has to do:
   the panel is translucent-dark rather than white, and the labels invert. */
.rwl-hero__search { margin: 1.75rem 0 1.25rem; max-width: 62rem; }

/*
 * The hero search panel: light frosted glass over the photograph.
 *
 * It was a 62% warm-charcoal veil carried over from the previous client, which
 * on a blue-green aerial read as a dirty smudge. This is the opposite — a light
 * material that lifts the photograph rather than covering it.
 *
 * Two things make it read as glass rather than as a flat white box: a real blur
 * doing the work at low opacity, and `saturate()`, which keeps the water and
 * the greenery showing through in colour instead of going milky grey. The inner
 * hairline is the classic glass edge — a light top rim catching the light.
 *
 * The panel is light, so the labels flip to ink. That is the whole reason the
 * old rules cannot simply have their alpha lowered: white-on-light would fail.
 */
.rwl-search--hero {
	background: rgba(255, 255, 255, .52);
	border-color: rgba(255, 255, 255, .65);
	box-shadow:
		0 18px 44px rgba(16, 14, 13, .28),
		inset 0 1px 0 rgba(255, 255, 255, .55);
	backdrop-filter: blur(22px) saturate(1.5);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
}

.rwl-search--hero .rwl-search__field label { color: var(--rwl-ink); }

/*
 * The fields stay solidly white so they still read as things you type into —
 * on a translucent panel an equally translucent input disappears into it. The
 * hairline border is what separates white-on-light; without it the fields merge
 * into the glass.
 */
.rwl-search--hero .rwl-search__field input,
.rwl-search--hero .rwl-search__field select {
	background: #fff;
	border-color: rgba(16, 14, 13, .14);
}

.rwl-search--hero .rwl-search__field input::placeholder { color: var(--rwl-faint); }

.rwl-search--hero .rwl-search__more summary { color: var(--rwl-body); }
.rwl-search--hero .rwl-search__more summary:hover { color: var(--rwl-accent); }

/*
 * Safari on iOS honours backdrop-filter; a browser that does not would render a
 * 52%-white box with no blur, which is legible but flat. Give those a more
 * opaque panel so the type never sits on a half-transparent ground.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rwl-search--hero { background: rgba(255, 255, 255, .88); }
}

/* The disclosure and the result line. */
.rwl-search__more { margin-top: .8rem; }

.rwl-search__more summary {
	font-family: var(--rwl-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rwl-muted);
	cursor: pointer;
}

.rwl-search__row--more {
	grid-template-columns: repeat(3, 1fr);
	margin-top: .75rem;
}
@media (max-width: 900px) { .rwl-search__row--more { grid-template-columns: 1fr 1fr; } }

.rwl-search__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
	margin: 1rem 0 0;
	font-size: .95rem;
	color: var(--rwl-body);
}

.rwl-search__clear {
	font-family: var(--rwl-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rwl-accent);
}

/* ============================================================= markets === */

/*
 * The market grid.
 *
 * Each card is an area's own boundary, drawn from OpenStreetMap geometry —
 * see TYN_Areas. The shape is the picture, so it gets the space a photograph
 * would and the caption sits under it rather than over it.
 *
 * Cards whose outline has not been cached yet carry .rwl-market--noshape and
 * simply centre their caption. That has to look deliberate, because on a cold
 * cache it is what every card looks like.
 */

.rwl-markets__grid {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
}

/* Nine towns since she added Riverside & Avondale, so three across at every
   desktop width — four across leaves a row of one and two holes. */
.rwl-markets__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .rwl-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .rwl-markets__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }

.rwl-market__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	height: 100%;
	padding: 1.5rem 1rem 1.25rem;
	/* White, not the cream ground — a cream card on a cream page has no edge. */
	background: var(--rwl-white);
	border: 1px solid var(--rwl-line);
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	transition: border-color .22s var(--rwl-ease), transform .22s var(--rwl-ease), box-shadow .22s var(--rwl-ease);
}

.rwl-market__link:hover {
	border-color: var(--rwl-accent);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px -20px rgba(16, 10, 12, .4);
}

.rwl-market__shape {
	display: block;
	width: 96px; height: 96px;
	margin-bottom: .55rem;
}

/* The silhouette itself. Filled rather than stroked: at this size a 1px
   outline of a municipal boundary is a grey haze, and a solid shape reads as
   a place. */
.rwl-market__shape .rwl-shape { width: 100%; height: 100%; display: block; }
.rwl-market__shape .rwl-shape path {
	fill: var(--rwl-accent);
	opacity: .16;
	transition: opacity .22s var(--rwl-ease);
}
.rwl-market__link:hover .rwl-shape path { opacity: .34; }

.rwl-market__name {
	font-family: var(--rwl-display);
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--rwl-ink);
}

.rwl-market__note {
	color: var(--rwl-muted);
	font-size: .82rem;
	line-height: 1.45;
}

.rwl-market__cta {
	margin-top: .55rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rwl-accent);
	opacity: 0;
	transform: translateY(3px);
	transition: opacity .22s var(--rwl-ease), transform .22s var(--rwl-ease);
}
.rwl-market__link:hover .rwl-market__cta,
.rwl-market__link:focus-visible .rwl-market__cta { opacity: 1; transform: none; }

/* Keep the caption vertically centred when there is no shape to sit under. */
.rwl-market--noshape .rwl-market__link { justify-content: center; padding-block: 2.25rem; }

/* ================================================================ pair === */

.rwl-pair__photo {
	margin: 2.5rem auto 0;
	max-width: 900px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 26px 60px -34px rgba(16, 10, 12, .55);
}
.rwl-pair__photo img { display: block; width: 100%; height: auto; }

.rwl-pair__grid {
	margin-top: 2.25rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
	max-width: 900px;
	margin-inline: auto;
}
@media (max-width: 780px) { .rwl-pair__grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.rwl-pair__name { margin: 0 0 .15rem; font-family: var(--rwl-display); font-size: 1.5rem; color: var(--rwl-ink); }
.rwl-pair__role {
	margin: 0 0 .7rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--rwl-accent);
}
.rwl-pair__bio  { margin: 0 0 .9rem; color: var(--rwl-body); font-size: .95rem; }
.rwl-pair__more {
	font-size: .82rem; font-weight: 600; color: var(--rwl-accent); text-decoration: none;
}
.rwl-pair__more:hover { text-decoration: underline; }

/* ================================================== mobile header controls ==
 *
 * The call button and the menu button sit next to each other and were built at
 * different times, which showed: 44px tall with a 6px radius and a flat red
 * fill against roughly 38px with a 4px radius and a hairline border. Two
 * controls a thumb-width apart have to look like one set of controls, or the
 * masthead reads as unfinished before a word of the site is read.
 *
 * So the burger is now the same 44px square with the same radius, and it takes
 * the hero omnibar's glass — blur plus a desaturating filter, which is what
 * keeps the surface neutral over whatever photograph is behind it rather than
 * picking up its colour. The call button stays solid: these should be the same
 * SIZE, not the same weight. Calling is the thing worth doing, and the button
 * that does it should be the one with the fill.
 */

.rwl-burger {
	width: 44px;
	height: 44px;
	padding: 0;
	display: none;
	place-items: center;
	border-radius: 6px;
	border: 1px solid rgba(16, 14, 13, .12);
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(18px) saturate(.6);
	backdrop-filter: blur(18px) saturate(.6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
	transition: background .25s var(--rwl-ease), border-color .25s var(--rwl-ease),
	            transform .18s var(--rwl-ease);
}

@media (max-width: 1040px) { .rwl-burger { display: grid; } }

/* A press that answers. Nothing else in the masthead moves on tap. */
.rwl-burger:active { transform: scale(.94); }

.rwl-burger__box { width: 18px; }
.rwl-burger__box i { height: 1.5px; border-radius: 1px; }
.rwl-burger__box i + i { margin-top: 4.5px; }

/*
 * Over the home hero the header is transparent and the backdrop is a dark
 * photograph, so a white glass would be a bright chip on a dark scene and the
 * white bars inside it would disappear. Same material, inverted: a dark tint
 * with a white hairline, which reads as frosted rather than as a hole.
 */
.rwl-home .rwl-header:not(.is-solid) .rwl-burger {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .34);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Browsers without backdrop-filter get a solid chip instead of a see-through
   one — legible either way, which is the only requirement. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rwl-burger { background: rgba(255, 255, 255, .92); }
	.rwl-home .rwl-header:not(.is-solid) .rwl-burger { background: rgba(16, 14, 13, .42); }
}

/* The X state fills in, so the control that closes the drawer is unmistakably
   the live one while the drawer is open. */
.rwl-burger[aria-expanded="true"],
.rwl-home .rwl-header:not(.is-solid) .rwl-burger[aria-expanded="true"] {
	background: var(--rwl-accent-mid);
	border-color: var(--rwl-accent-mid);
	box-shadow: none;
}
.rwl-burger[aria-expanded="true"] .rwl-burger__box i,
.rwl-home .rwl-header:not(.is-solid) .rwl-burger[aria-expanded="true"] .rwl-burger__box i {
	background: #fff;
}

/* ============================================================ drawer entry ==
 *
 * The drawer was a flat white sheet cross-fading in — correct, and inert. On a
 * phone this panel IS the navigation, so it is worth the few frames it takes to
 * feel like something opened rather than something appeared.
 *
 * Three things happen at once. The panel is the same glass as the omnibar and
 * the menu button, so the three surfaces are visibly one material. It settles
 * down and up to its resting size instead of arriving there. And the links
 * arrive in sequence, which is what makes a list read as a list rather than as
 * a block of text that faded in.
 *
 * The stagger is nth-child rather than an inline --i, so this is a stylesheet
 * change with no markup behind it and nothing to keep in sync. Eight items is
 * more than these menus carry; past that the last ones share the final delay,
 * which is the right failure — a ninth link is late, never missing.
 */

.rwl-drawer {
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(30px) saturate(1.1);
	backdrop-filter: blur(30px) saturate(1.1);
	transform: translateY(-10px) scale(.985);
	transform-origin: 50% 0;
	transition:
		opacity .3s var(--rwl-ease),
		visibility .3s var(--rwl-ease),
		transform .42s cubic-bezier(.16, .84, .32, 1);
}

.rwl-drawer.is-open { transform: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rwl-drawer { background: rgba(255, 255, 255, .97); }
}

/* Resting state of every row: down and out. */
.rwl-drawer__nav .rwl-nav__item,
.rwl-drawer__foot > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity .34s var(--rwl-ease),
		transform .44s cubic-bezier(.16, .84, .32, 1);
}

.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item,
.rwl-drawer.is-open .rwl-drawer__foot > * {
	opacity: 1;
	transform: none;
}

/* 55ms apart. Fast enough that the whole menu is settled in about a third of a
   second, slow enough to read as a sequence rather than a flicker. */
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(1) { transition-delay: .06s; }
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(2) { transition-delay: .115s; }
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(3) { transition-delay: .17s; }
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(4) { transition-delay: .225s; }
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(5) { transition-delay: .28s; }
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(6) { transition-delay: .335s; }
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(7) { transition-delay: .39s; }
.rwl-drawer.is-open .rwl-drawer__nav .rwl-nav__item:nth-child(n+8) { transition-delay: .445s; }

.rwl-drawer.is-open .rwl-drawer__foot > *:nth-child(1) { transition-delay: .40s; }
.rwl-drawer.is-open .rwl-drawer__foot > *:nth-child(2) { transition-delay: .455s; }

/* Closing runs immediately and together. A staggered exit makes a menu feel
   slow to dismiss, which is the one thing a menu must never feel. */
.rwl-drawer:not(.is-open) .rwl-drawer__nav .rwl-nav__item,
.rwl-drawer:not(.is-open) .rwl-drawer__foot > * { transition-delay: 0s; }

/*
 * Honour the OS setting. Someone who has asked for less motion still needs the
 * menu, so the panel and the rows still change state — they just do it without
 * travelling or waiting their turn.
 */
@media (prefers-reduced-motion: reduce) {
	.rwl-drawer,
	.rwl-drawer.is-open,
	.rwl-drawer__nav .rwl-nav__item,
	.rwl-drawer__foot > * {
		transform: none;
		transition-duration: .01ms;
		transition-delay: 0s !important;
	}
	.rwl-burger { transition-duration: .01ms; }
}

/*
 * While the drawer is open the header still floats above it, and over the home
 * hero that header is in its light state -- so the white lockup was sitting on
 * the drawer's near-white glass and all but disappeared. The dark lockup is
 * always rendered underneath it, so fading the light one out is the whole fix.
 *
 * Driven by a body class rather than :has() so it works the same everywhere,
 * and kept separate from rwl-locked, which the inquiry modal also sets --
 * that one opens over a dark scrim where the light logo is correct.
 */
body.rwl-nav-open .rwl-logo__img--light,
body.rwl-nav-open.rwl-home .rwl-header:not(.is-solid) .rwl-logo__img--light { opacity: 0; }

/* =========================================== the four-part rule, repeated ==
 *
 * One motif carries the whole palette: a four-part bar under every section
 * heading, running the coast from the water to the dune — Atlantic teal, surf
 * aqua, sunset coral, sea-grass.
 *
 * This is the difference between a colourful site and a site that could not
 * pick a colour. Five hues scattered across five unrelated components reads as
 * indecision; the same five in one shape, repeated on every heading, reads as
 * a brand. Yessenia Storing's pine / sandstone / red heading rule is the same
 * idea, and themes/CLAUDE.md trap 12 is the rule that produced it: the lockup
 * gets a short two-tone rule carrying the brand colours, never a monogram.
 *
 * The colours in it are FILLS. Aqua at 2.4:1 and sea-grass at 2.8:1 could not
 * carry a word, and in a 3px bar they never have to.
 */
.rwl-rule {
	/* Four stops, hard-edged, no blending — gradients between these hues go
	   muddy through the teal/coral midpoint. Widened to 72px so four bands are
	   each still legible rather than four slivers. */
	width: 72px;
	background: linear-gradient(90deg,
		var(--rwl-brand) 0%,   var(--rwl-brand) 25%,
		var(--rwl-surf)  25%,  var(--rwl-surf)  50%,
		var(--rwl-coral) 50%,  var(--rwl-coral) 75%,
		var(--rwl-dune)  75%,  var(--rwl-dune)  100%);
	box-shadow: inset 0 0 0 1px rgba(16, 14, 13, .07);
}

/*
 * Coral is the call to action, teal is the furniture.
 *
 * The gradient here was three hardcoded hexes of flag red (#8E1B29 / #C6293C /
 * #B22234) left over from the theme this was copied from. Swapping the :root
 * tokens did not touch them and a grep for the old client's NAME did not find
 * them either — this is trap 16 exactly, and it survived until the rendered
 * page was sampled pixel by pixel and the button came back #AF363F on a site
 * with no crimson in its palette.
 *
 * Sunset coral is 4.1:1 on the cream ground: right for a button, and it is the
 * only warm thing on a mostly teal-and-sand page, so it is unmistakably the
 * thing to press.
 */
.rwl-btn--accent {
	background: linear-gradient(135deg, var(--rwl-coral-dk) 0%, var(--rwl-coral-br) 58%, var(--rwl-coral) 100%);
	border-color: transparent;
	color: #fff;
}
.rwl-btn--accent:hover {
	background: linear-gradient(135deg, var(--rwl-coral-dk) 0%, var(--rwl-coral-br) 58%, var(--rwl-coral) 100%);
	filter: brightness(1.07);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(140, 109, 59, .55);
}

/* The same four-part rule the hero closes on, above the footer — so the
   page opens and closes on the same motif that sits under every heading. */
.rwl-foot::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	z-index: 2;
	background: linear-gradient(90deg,
		var(--rwl-brand) 0%,   var(--rwl-brand) 25%,
		var(--rwl-surf)  25%,  var(--rwl-surf)  50%,
		var(--rwl-coral) 50%,  var(--rwl-coral) 75%,
		var(--rwl-dune)  75%,  var(--rwl-dune)  100%);
}

/* The stat band gets the full four-part rule as its top edge, so the credentials
   strip reads as a ribbon rather than a grey band. */
.rwl-creds { border-top: 3px solid transparent; border-image: linear-gradient(90deg,
		var(--rwl-brand) 0%,   var(--rwl-brand) 25%,
		var(--rwl-surf)  25%,  var(--rwl-surf)  50%,
		var(--rwl-coral) 50%,  var(--rwl-coral) 75%,
		var(--rwl-dune)  75%,  var(--rwl-dune)  100%) 1; }

/* Eyebrows run teal, not coral. Coral is reserved for the thing to press —
   spending it on every section label is what makes an accent stop working. */
.rwl-eyebrow:not(.rwl-eyebrow--light) { color: var(--rwl-brand); }

.rwl-nav__list > li > a::after { background: var(--rwl-coral); }

/* The hero closes on the four-part rule, full width — the same four colours in the
   same order as the bar under every heading and in the favicon. */
.rwl-hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 5px;
	z-index: 3;
	background: linear-gradient(90deg,
		var(--rwl-brand) 0%,   var(--rwl-brand) 25%,
		var(--rwl-surf)  25%,  var(--rwl-surf)  50%,
		var(--rwl-coral) 50%,  var(--rwl-coral) 75%,
		var(--rwl-dune)  75%,  var(--rwl-dune)  100%);
}

/* One red button state, on the primary call to action only. */
.rwl-btn--accent:hover {
	background: var(--rwl-red);
	border-color: var(--rwl-red);
	color: #fff;
}

/* The portrait frame follows the photograph rather than imposing a square on
   it. Her headshot is 4:5, cropped from a 6400x4547 original, and object-fit:
   contain below means the frame is whatever the file is — so nothing can be
   cropped off the crown, which is the failure this lineage kept producing.
   Note .rwl-figure--tall still gets 16/11 under 900px further up; that is a
   LANDSCAPE box and it would take the crop off the top of a head. No template
   here uses --tall, so it is dead code, but do not point a headshot at it. */
.rwl-split__media--portrait { max-width: 24rem; margin-inline: auto; }

.rwl-figure--portrait { aspect-ratio: auto; }

.rwl-figure--portrait img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
}

@media (max-width: 900px) {
	.rwl-split__media--portrait { max-width: 19rem; }
}

/* The brokerage's mark, in the footer and nowhere else on the site.
   Adam, after her call: she wants House & Haven less prominent. It is out of
   the lockup, out of the hero eyebrow and out of her role line. What keeps the
   site compliant is its presence beside the contact details down here —
   Florida 61J2-10.025 wants the brokerage's licensed name "above, below or
   adjacent to the point of contact information" on a website. Smaller and
   quieter than it was: attribution, not co-branding. */
.rwl-foot__firmmark {
	display: block;
	width: auto;
	/* Her own House & Haven rule line, cut from the horizontal lockup she
	   sent. 150px made it a smudge — understated is not the same as
	   illegible, and this is the brokerage's licensed name. */
	max-width: 230px;
	height: auto;
	margin-top: 1.5rem;
	opacity: .82;
}

@media (max-width: 560px) { .rwl-foot__firmmark { max-width: 200px; } }


/* ================================================ the hero video loop ==
 *
 * The poster is a real <img> so it paints with the page; the video fades in
 * over it only once it can actually play, or the fade shows a black box while
 * the first frames arrive.
 */
.rwl-hero__poster,
.rwl-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

.rwl-hero__video {
	opacity: 0;
	transition: opacity .9s var(--rwl-ease);
	pointer-events: none;
}

.rwl-hero__video.is-ready { opacity: 1; }

/*
 * At 900px and under the <picture> swaps in hero-mobile.jpg and theme.js loads
 * hero-mobile.mp4 — both 3:4 portrait, both cut from her own sold homes.
 *
 * The inherited rule here was `object-position: 60% 30%`, written to keep a
 * flag and a porch in a previous client's photograph. On a centred 3:4 crop it
 * just pushed the house off to one side. Centred, and the poster and the video
 * are framed identically so the crossfade between them does not jump.
 */
@media (max-width: 900px) {
	.rwl-hero__poster,
	.rwl-hero__video { object-position: 50% 50%; }
}

/* ==================================================== the floating call ==
 *
 * Red, white and blue rather than a single brand colour: a white pill with a
 * navy label, an Old Glory red icon plate, and the three-part band along the
 * bottom edge that the hero and the footer also carry. White is the ground
 * because the pill sits over photographs and a navy pill on a navy-scrimmed
 * hero disappears.
 */
.rwl-callbar {
	position: fixed;
	right: clamp(.9rem, 2vw, 1.5rem);
	bottom: clamp(.9rem, 2vw, 1.5rem);
	z-index: 80;
}

.rwl-callbar__call {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	padding: .7rem 1.15rem .8rem .7rem;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 14px 34px -12px rgba(16, 14, 13, .55), 0 2px 6px rgba(16, 14, 13, .16);
	text-decoration: none;
	overflow: hidden;
	transition: transform .22s var(--rwl-ease), box-shadow .22s var(--rwl-ease);
}
.rwl-callbar__call:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(16, 14, 13, .6); }

/* The flag band, along the bottom edge of the pill. */
.rwl-callbar__call::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--rwl-brand) 0%,   var(--rwl-brand) 25%,
		var(--rwl-surf)  25%,  var(--rwl-surf)  50%,
		var(--rwl-coral) 50%,  var(--rwl-coral) 75%,
		var(--rwl-dune)  75%,  var(--rwl-dune)  100%);
}

.rwl-callbar__ico {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--rwl-red);
	color: #fff;
}
.rwl-callbar__ico svg { width: 17px; height: 17px; }

.rwl-callbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.rwl-callbar__txt strong {
	font-family: var(--rwl-display);
	font-size: .95rem;
	font-weight: 400;
	color: var(--rwl-brand);
}
.rwl-callbar__txt em {
	font-style: normal;
	font-size: .82rem;
	font-weight: 600;
	color: var(--rwl-red);
	letter-spacing: .01em;
}

/* ================================================ mobile: logo and hero ==
 *
 * The lockup is stacked, so the same height that reads well on a desktop bar
 * swallows a phone masthead.
 */
@media (max-width: 720px) {
	/*
	 * The masthead overflowed: measured at a 500px viewport the burger's right
	 * edge sat at 521px, so scrollWidth beat clientWidth by 21px and the button
	 * was partly off-screen. Logo 290 + actions 187 does not fit in 500.
	 *
	 * The header's Call Now is what goes. The floating pill carries the number
	 * on every screen and is closer to the thumb, so a second call control in
	 * the masthead was buying nothing and costing the burger its place.
	 */
	.rwl-header__actions .rwl-callnow { display: none; }
	.rwl-header__inner { gap: .75rem; }

	/*
	 * Size the logo through the tokens, not with height:auto.
	 *
	 * The height is a calc that interpolates on --rwl-shrink, which is what
	 * makes the masthead shrink as you scroll. Overriding it with height:auto
	 * — which an earlier pass here did — pins the logo at one size and quietly
	 * removes the shrink on phones, where the bar can least afford the room.
	 * max-width stays only as a guard against a very wide lockup.
	 */
	/* 44px was too small once the lockup gained her emblem — the name set at
	   about 16px on a phone. Measured at 390px the logo ended at x=196 with the
	   burger past x=330, so there was ~130px of dead space beside it. 64/44
	   uses it: the lockup renders 256px wide and still clears the burger. */
	:root { --rwl-logo-max: 64px; --rwl-logo-min: 44px; }
	.rwl-logo--header .rwl-logo__img { max-width: 68vw; }
}

/* ------------------------------------------- drawer: is-open, and only that --
 *
 * `.rwl-nav__item:focus-within > .rwl-nav__sub` is (0,3,0) and the drawer's own
 * collapsed rule is (0,2,0), so focus-within wins inside the drawer too. On a
 * phone the tapped link keeps focus, which pinned the section open — the first
 * tap worked and the section could then never be collapsed again.
 *
 * Hover and focus-within are a desktop affordance. In the drawer the only thing
 * that opens a section is is-open, set by the tap handler.
 */
.rwl-drawer__nav .rwl-nav__item:hover > .rwl-nav__sub,
.rwl-drawer__nav .rwl-nav__item:focus-within > .rwl-nav__sub {
	opacity: 0;
	max-height: 0;
	padding-bottom: 0;
}

.rwl-drawer__nav .rwl-nav__item.is-open > .rwl-nav__sub,
.rwl-drawer__nav .rwl-nav__item.is-open:hover > .rwl-nav__sub,
.rwl-drawer__nav .rwl-nav__item.is-open:focus-within > .rwl-nav__sub {
	opacity: 1;
	max-height: 22rem;
	padding-bottom: .6rem;
}


/* ================================================ no dark bands anywhere ==
 *
 * Adam asked for dark, was shown dark, rejected it — and then rejected
 * light-with-dark-bands as still too dark (memory: feedback_dark_themes_too_dark).
 * The settled answer for this lineage is FULLY light, so the one remaining
 * near-black band on the page is converted here rather than by editing the
 * template that asks for it. Keeping the `--dark` class name means the
 * markup and every sibling theme still read the same; only what it means
 * changed.
 *
 * It still has to be a BAND — a page of unbroken cream has no rhythm. So it
 * becomes the most saturated light thing on the site: a pale-aqua-to-sand
 * wash, edged top and bottom with the four-part rule, carrying ink type.
 */
.rwl-section--dark {
	background: linear-gradient(168deg, var(--rwl-surf-pale) 0%, var(--rwl-shell) 46%, var(--rwl-sand) 100%);
	color: var(--rwl-body);
	position: relative;
}
.rwl-section--dark::before,
.rwl-section--dark::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--rwl-brand) 0%,   var(--rwl-brand) 25%,
		var(--rwl-surf)  25%,  var(--rwl-surf)  50%,
		var(--rwl-coral) 50%,  var(--rwl-coral) 75%,
		var(--rwl-dune)  75%,  var(--rwl-dune)  100%);
}
.rwl-section--dark::before { top: 0; }
.rwl-section--dark::after  { bottom: 0; }

.rwl-section--dark h1,
.rwl-section--dark h2,
.rwl-section--dark h3 { color: var(--rwl-ink); }

/* The creed sat white-on-near-black. Same hierarchy, inverted. */
.rwl-creed__goal   { color: var(--rwl-ink); }
.rwl-creed__close  { color: var(--rwl-brand); font-weight: 600; }
.rwl-creed__attrib { color: var(--rwl-muted); }
.rwl-creed__call   { color: var(--rwl-body); }
.rwl-creed__call strong,
.rwl-creed__call .rwl-icon { color: var(--rwl-brand); }
.rwl-creed__call:hover { color: var(--rwl-ink); }

/* ======================================= the town grid carries the thesis ==
 *
 * THE GROUPING IS BY CARD POSITION, so markets() has to be ordered on purpose
 * and this comment has to say what the two groups mean — inherited, it said
 * "barrier islands", which is true of nowhere near Jacksonville.
 *
 * Here the first FIVE are the river towns — Riverside & Avondale and
 * Jacksonville itself, then Orange Park, Fleming Island and Middleburg on the
 * far bank of the St Johns and Black Creek — washed in the river aqua. The
 * last four are the beaches, washed in sand. The counts are in the nth-child
 * selectors below, so adding a town means changing them: she added Riverside
 * on 2026-09-27 and the split moved from 4/4 to 5/4.
 *
 * It also fixes a real flatness problem. These cards were white on cream with
 * a hairline border and a faint map outline, and on a page sold on its colour
 * they were the largest and dullest block in it.
 *
 * The wash is a tint behind the card, never behind the text: the name and note
 * keep ink and body colours at full contrast on a ground no darker than 8%.
 */
.rwl-market:nth-child(-n+5) .rwl-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--rwl-surf-pale) 100%);
	border-color: #D0D9DB;
}
.rwl-market:nth-child(n+6) .rwl-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, #F9EEEB 100%);
	border-color: #F0D4CE;
}

/* A colour chip on the top edge of every card — river aqua or beach sand — so
   the grouping survives at phone width, where the cards stack into a single
   column and the two-by-four reading is lost. */
.rwl-market__link { position: relative; overflow: hidden; }
.rwl-market__link::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
}
.rwl-market:nth-child(-n+5) .rwl-market__link::before { background: var(--rwl-surf); }
.rwl-market:nth-child(n+6)  .rwl-market__link::before { background: var(--rwl-sand-dp); }

.rwl-market:nth-child(-n+5) .rwl-market__link:hover { border-color: var(--rwl-surf-dk); }
.rwl-market:nth-child(n+6)  .rwl-market__link:hover { border-color: var(--rwl-dune-dk); }

/* The map outline was a pale grey wash that read as a smudge on three cards
   and was invisible on the five whose boundary never resolved. Give it the
   band's own colour so it reads as intentional artwork either way. */
.rwl-market:nth-child(-n+5) .rwl-market__shape svg * { fill: var(--rwl-surf); opacity: .5; }
.rwl-market:nth-child(n+6)  .rwl-market__shape svg * { fill: var(--rwl-sand-dp); opacity: .62; }

/* ------------------------------------------------- the closer, also light --
 *
 * Same call as .rwl-section--dark above: this was a near-black block sitting
 * directly on top of an already-dark footer, which stacked into roughly a
 * third of the page being dark on a site briefed as fully light. It keeps its
 * weight by being the most saturated light band instead — river-tinted, edged
 * with the four-part rule — so the eye still stops on it.
 */
.rwl-closer {
	background: linear-gradient(168deg, var(--rwl-surf-pale) 0%, var(--rwl-shell) 52%, var(--rwl-sand) 100%);
	color: var(--rwl-body);
	border-top: 4px solid transparent;
	border-image: linear-gradient(90deg,
		var(--rwl-brand) 0%,   var(--rwl-brand) 25%,
		var(--rwl-surf)  25%,  var(--rwl-surf)  50%,
		var(--rwl-coral) 50%,  var(--rwl-coral) 75%,
		var(--rwl-dune)  75%,  var(--rwl-dune)  100%) 1;
}
.rwl-closer::before {
	background: radial-gradient(circle, rgba(201, 184, 150, .16) 0%, transparent 62%);
}
.rwl-closer__title { color: var(--rwl-ink); }
.rwl-closer__lede  { color: var(--rwl-body); }
/* The eyebrow was teal-on-near-black and all but invisible. */
.rwl-closer .rwl-eyebrow { color: var(--rwl-brand); }

/* --------------------------------------------------- footer contrast fixes --
 *
 * scripts/contrast-audit.js checked 48 elements on the home page and failed
 * three, all in the footer and all marginal: the two column headings at
 * 4.27:1 and the phone number at 4.32:1, against 4.5:1 required. Marginal is
 * still failing, and these are small text on a dark ground, which is the
 * combination people actually struggle with.
 */
.rwl-foot__h { color: rgba(255, 255, 255, .62); }
.rwl-foot em { color: rgba(255, 255, 255, .72); font-style: normal; }

/* The floating call pill's number sat on --rwl-coral, which is 4.32:1 on the
   pill's white ground — right for a button fill, wrong for 13px text. The
   darker coral is 5.2:1 and is visually the same colour at this size. */
.rwl-callbar__txt em { color: var(--rwl-coral-dk); }

/* The closer's secondary button was .rwl-btn--ghost-light: a white outline
   with white type, drawn for the near-black band this section used to be. On
   the light band it is now, it was a pale ghost on cream — present, rendered,
   effectively invisible. Same class of mistake as trap 4. Inside the closer it
   becomes a teal outline instead. */
.rwl-closer .rwl-btn--ghost-light {
	border-color: var(--rwl-brand);
	color: var(--rwl-brand);
}
.rwl-closer .rwl-btn--ghost-light:hover {
	background: var(--rwl-brand);
	border-color: var(--rwl-brand);
	color: #fff;
}

/* "1 Atlantic Avenue, Ocean / City, NJ 08226" — the footer column is narrow
   enough to break the town in half. Keep the city-state-zip together. */
.rwl-foot__addr { text-wrap: balance; }

/* The licence line under an agent's name was --rwl-faint, which is 2.7:1 on
   the card — fine as a decorative grey, and this is not decorative. California
   (and most states) require the number to be legible in advertising. */
.rwl-member__license { color: var(--rwl-muted); }

/* === upgrade-lineage: frames and figures === */
/*
 * Added by scripts/upgrade-lineage.py. See that file for why each exists.
 */

/* A transparent GROUP cutout: wide, anchored to the bottom of a soft brand
   panel, never cropped. */
.rwl-split__media--team { max-width: none; width: 100%; }
.rwl-figure--team {
	aspect-ratio: auto;
	margin: 0;
	padding: 1.5rem 1rem 0;
	border-radius: 16px;
	background: linear-gradient(180deg, var(--rwl-shell) 0%, var(--rwl-tint-2) 100%);
	overflow: hidden;
	position: relative;
}
.rwl-figure--team img {
	display: block; width: 100%; height: auto;
	object-fit: contain; object-position: center bottom;
}

/* NO HEADSHOT: a photograph of the market in the agent's slot. Cropped to a
   calm landscape, because it is a place and cropping a place costs nothing —
   the opposite rule from a face. */
.rwl-split__media--scene { max-width: none; width: 100%; }
.rwl-figure--scene {
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--rwl-shadow-lg);
}
.rwl-figure--scene img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Figures set large; word labels untouched. */
.rwl-creds__label--num {
	font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--rwl-brand);
}
.rwl-creds__label--num + .rwl-creds__note {
	margin-top: .55rem;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
}

/* A small SQUARE headshot (homes.com serves 300x300): centred and capped so it
   is never enlarged past its source, instead of cropped into a portrait frame
   that loses the sides of the face. 'shape' => 'square' in team(). */
.rwl-split__media--square { max-width: 22rem; margin-inline: auto; }
.rwl-split__media--square .rwl-figure--square { border-radius: 16px; overflow: hidden; }
@media (max-width: 720px) { .rwl-split__media--square { max-width: 17rem; } }

/* === install-features: feature sections === */
/*
 * Added by scripts/install-features.py. Tones use the theme's four roles, so
 * each site's sections come out in its own palette.
 */
.rwl-tone--brand { --tone: var(--rwl-brand); --tone-pale: var(--rwl-brand-pale); }
.rwl-tone--coral { --tone: var(--rwl-coral); --tone-pale: var(--rwl-coral-pale); }
.rwl-tone--surf  { --tone: var(--rwl-surf-dk); --tone-pale: var(--rwl-surf-pale); }
.rwl-tone--dune  { --tone: var(--rwl-dune-dk); --tone-pale: var(--rwl-dune-pale); }

.rwl-feat__note { max-width: 44rem; margin: 2.25rem auto 0; text-align: center; color: var(--rwl-muted); font-size: .95rem; }

/* journey: a line that draws, stops that pop in turn */
.rwl-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.25rem; position: relative; }
.rwl-journey::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--rwl-brand), var(--rwl-coral), var(--rwl-dune), var(--rwl-surf)); transform-origin: left center; }
.rwl-journey__stop { position: relative; display: flex; flex-direction: column; gap: .4rem; }
.rwl-journey__dot { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--rwl-white);
	border: 3px solid var(--tone); color: var(--tone); font-weight: 700; font-size: .85rem; position: relative; z-index: 1; box-shadow: 0 6px 18px -10px var(--tone); }
.rwl-journey__when { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone); font-weight: 600; margin-top: .35rem; }
.rwl-journey__label { font-family: var(--rwl-display); font-size: 1.3rem; line-height: 1.15; color: var(--rwl-ink); font-weight: 400; }
.rwl-journey__body { color: var(--rwl-body); font-size: .95rem; line-height: 1.55; }

/* bento: coloured tiles, one big counting number */
.rwl-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rwl-bento__tile { position: relative; border-radius: 18px; padding: 1.6rem 1.5rem 1.7rem; background: var(--tone-pale); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
	overflow: hidden; transition: transform .35s var(--rwl-ease), box-shadow .35s var(--rwl-ease); }
.rwl-bento__tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.rwl-bento__tile:hover { transform: translateY(-4px); box-shadow: var(--rwl-shadow-lg); }
.rwl-bento__tile--wide { grid-column: span 2; }
.rwl-bento__tile--big { background: var(--tone); color: #fff; border-color: transparent; }
.rwl-bento__tile--big::after { display: none; }
.rwl-bento__tile--big .rwl-bento__title, .rwl-bento__tile--big .rwl-bento__body { color: #fff; }
.rwl-bento__big { display: block; font-family: var(--rwl-display); font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); line-height: .95; margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.rwl-bento__num { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--tone); font-weight: 700; margin-bottom: .9rem; }
.rwl-bento__title { font-family: var(--rwl-display); font-size: 1.35rem; line-height: 1.15; margin: 0 0 .5rem; color: var(--rwl-ink); font-weight: 400; }
.rwl-bento__body { margin: 0; color: var(--rwl-body); font-size: .95rem; line-height: 1.55; }

/* split: two panels facing each other */
.rwl-splitfeat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.rwl-splitfeat__panel { border-radius: 20px; padding: 2rem 1.9rem; background: var(--tone-pale); border-top: 5px solid var(--tone); }
.rwl-splitfeat__eye { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tone); }
.rwl-splitfeat__title { font-family: var(--rwl-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin: .35rem 0 .7rem; color: var(--rwl-ink); font-weight: 400; }
.rwl-splitfeat__body { color: var(--rwl-body); margin: 0 0 1rem; }
.rwl-splitfeat__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rwl-splitfeat__points li { position: relative; padding-left: 1.4rem; color: var(--rwl-body); }
.rwl-splitfeat__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tone); }
.rwl-splitfeat__join { align-self: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--rwl-ink); color: #fff; font-family: var(--rwl-display); font-size: 1.25rem; }

/* timeline: years down a drawn line */
.rwl-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; position: relative; }
.rwl-timeline::before { content: ""; position: absolute; left: 6.2rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 3px;
	background: linear-gradient(180deg, var(--rwl-brand), var(--rwl-coral), var(--rwl-dune), var(--rwl-surf)); transform-origin: top center; }
.rwl-timeline__item { display: grid; grid-template-columns: 5.2rem 1fr; gap: 2.2rem; padding-block: .9rem; position: relative; }
.rwl-timeline__item::before { content: ""; position: absolute; left: 5.85rem; top: 1.45rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--rwl-white); border: 3px solid var(--tone); }
.rwl-timeline__when { text-align: right; font-family: var(--rwl-display); font-size: 1.6rem; line-height: 1.2; color: var(--tone); }
.rwl-timeline__card strong { display: block; font-family: var(--rwl-display); font-weight: 400; font-size: 1.3rem; color: var(--rwl-ink); margin-bottom: .25rem; }
.rwl-timeline__card p { margin: 0; color: var(--rwl-body); }

@media (max-width: 900px) {
	.rwl-journey { grid-template-columns: 1fr; gap: 1.4rem; padding-left: .2rem; }
	.rwl-journey::before { left: 1.4rem; right: auto; top: 1.4rem; bottom: 1.4rem; width: 3px; height: auto; transform-origin: top center; }
	.rwl-journey__stop { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: 1rem; }
	.rwl-journey__stop > :not(.rwl-journey__dot) { grid-column: 2; }
	.rwl-journey__dot { grid-row: span 3; }
	.rwl-bento { grid-template-columns: 1fr 1fr; }
	.rwl-splitfeat { grid-template-columns: 1fr; }
	.rwl-splitfeat__join { justify-self: center; }
}
@media (max-width: 560px) {
	.rwl-bento { grid-template-columns: 1fr; }
	.rwl-bento__tile--wide { grid-column: auto; }
	.rwl-timeline::before { left: 4.4rem; }
	.rwl-timeline__item { grid-template-columns: 3.6rem 1fr; gap: 1.6rem; }
	.rwl-timeline__item::before { left: 4.05rem; }
	.rwl-timeline__when { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: no-preference) {
	html.js .rwl-journey::before { transform: scaleX(0); transition: transform 1.4s var(--rwl-ease) .15s; }
	html.js .rwl-journey.is-in::before { transform: scaleX(1); }
	html.js .rwl-journey .rwl-journey__stop { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--rwl-ease), transform .6s var(--rwl-ease); transition-delay: calc(.25s + var(--i) * .18s); }
	html.js .rwl-journey.is-in .rwl-journey__stop { opacity: 1; transform: none; }
	html.js .rwl-journey .rwl-journey__dot { transform: scale(.4); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.35s + var(--i) * .18s); }
	html.js .rwl-journey.is-in .rwl-journey__dot { transform: none; }
	html.js .rwl-timeline::before { transform: scaleY(0); transition: transform 1.6s var(--rwl-ease) .1s; }
	html.js .rwl-timeline.is-in::before { transform: scaleY(1); }
	html.js .rwl-timeline .rwl-timeline__item { opacity: 0; transform: translateX(18px); transition: opacity .6s var(--rwl-ease), transform .6s var(--rwl-ease); transition-delay: calc(.2s + var(--i) * .2s); }
	html.js .rwl-timeline.is-in .rwl-timeline__item { opacity: 1; transform: none; }
	html.js .rwl-splitfeat__panel[data-rwl-reveal] { transform: translateX(calc((var(--i) * 2 - 1) * 28px)); }
	html.js .rwl-splitfeat__panel[data-rwl-reveal].is-in { transform: none; }
	html.js .rwl-splitfeat__join[data-rwl-reveal] { transform: scale(.3) rotate(-90deg); transition-delay: .35s; }
	html.js .rwl-splitfeat__join[data-rwl-reveal].is-in { transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
	html.js .rwl-journey::before { transform: scaleY(0); }
	html.js .rwl-journey.is-in::before { transform: scaleY(1); }

	/*
	 * Below 900px the split panels stack full width, so the sideways reveal
	 * above puts one 8px off the left edge and the other 8px past the right:
	 * scrollWidth 398 against a 390 viewport. Invisible twice over —
	 * body{overflow-x:hidden} means no scrollbar appears, and the transform
	 * clears itself the moment the panel scrolls into view. Reveal vertically
	 * on a phone, where there is no room to come in from the side anyway.
	 */
	html.js .rwl-splitfeat__panel[data-rwl-reveal] { transform: translateY(18px); }
	html.js .rwl-splitfeat__panel[data-rwl-reveal].is-in { transform: none; }
}

/* long reviews: the first 46 words, and the rest in place (never cut off) */
.rwl-quote__more { margin-top: .75rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--rwl-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rwl-quote__full[hidden] { display: none; }

/* Four tiles sit 2 x 2; a 'wide' tile would leave a hole in a three-column row. */
@media (min-width: 561px) {
	.rwl-bento:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rwl-bento:has(> :nth-child(4):last-child) .rwl-bento__tile--wide { grid-column: auto; }
}

/* The MLS notice that has to sit under any sold data. Quieter than the licence
   line above it — it is a required disclosure, not a piece of the argument. */
.rwl-foot__mls {
	max-width: 60rem;
	margin-top: .35rem;
	font-size: .74rem;
	line-height: 1.5;
	opacity: .72;
}

/* ------------------------------------------------------ the Instagram strip --
 *
 * Six 4:5 tiles, snapshotted into the theme (parts/feed.php explains why it is
 * not an embed). The frame matches the files exactly, so nothing is re-cropped
 * in the browser. */
.rwl-feed__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: .7rem;
	margin: 2.4rem 0 0;
	padding: 0;
	list-style: none;
}
.rwl-feed__cell { margin: 0; }
.rwl-feed__cell a {
	display: block;
	position: relative;
	/* 4:5, matching the files. Square cropped her own wordmark off her own
	   graphics — the thing the section exists to show. */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 12px;
	background: var(--rwl-surf-pale);
	box-shadow: 0 1px 2px rgba(36, 31, 29, .10);
	transition: transform .35s var(--rwl-ease), box-shadow .35s var(--rwl-ease);
}
.rwl-feed__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rwl-feed__cell a:hover,
.rwl-feed__cell a:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(36, 31, 29, .18);
}
.rwl-feed__cta { margin-top: 1.9rem; text-align: center; }

@media (max-width: 900px) { .rwl-feed__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .rwl-feed__grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }

/* HUD's official Equal Housing Opportunity artwork is BLACK on transparent, and
   this footer is near-black — so the mark shipped present, rendered and
   invisible, with only the words carrying the disclosure. Reversed out, which
   is a standard presentation of the mark. Ported from themes/larry-mullinix;
   rwl_eho_mark() came across without it. */
.rwl-eho--official {
	width: auto;
	height: 34px;
	vertical-align: middle;
	filter: brightness(0) invert(1);
	opacity: .9;
}

/*
 * CALL BUTTON — her face instead of the icon plate.
 *
 * The source is a 256px square cut around her face from the 6400x4547
 * original, so nothing is cropped at the crown (feedback_headshot_frames), and
 * the frame is 1:1 so `cover` has nothing to take.
 */
.rwl-callbar__call { padding-left: .55rem; }
.rwl-callbar__ico--face {
	position: relative;
	width: 2.9rem;
	height: 2.9rem;
	background: none;
}
.rwl-callbar__face {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	/* Square source in a square frame, so `cover` crops nothing and
	   object-position would be a no-op — the framing is done in the file. */
	object-fit: cover;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rwl-dune);
}
.rwl-callbar__badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--rwl-brand);
	color: #fff;
	box-shadow: 0 0 0 2px #fff;
}
.rwl-callbar__badge svg { width: 11px; height: 11px; }

/* .rwl-icon colours every icon with the accent, which is this badge's own
   fill — the glyph disappeared into it. White on espresso is 16.3:1. */
.rwl-callbar__badge .rwl-icon { color: #fff; }

/* ------------------------------------------- the three-panel Experience row --
 *
 * Her request, 2026-09-27: Property Management · New Construction · Real Estate
 * Investment, three boxes under the existing headline. The two-panel grid is
 * `1fr auto 1fr` with the "&" medallion in the middle column, which cannot hold
 * three, and the medallion is not rendered when there are three.
 */
.rwl-splitfeat--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1040px) { .rwl-splitfeat--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .rwl-splitfeat--3 { grid-template-columns: 1fr; } }

/* Four, from 2026-09-29: she added Residential Real Estate at the front and
   moved Property Management to the end. Four across needs more room than three
   did, so it breaks to 2x2 earlier — at four columns the bullet lines wrap to
   two or three words each and the panels stop reading as lists. */
.rwl-splitfeat--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1240px) { .rwl-splitfeat--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .rwl-splitfeat--4 { grid-template-columns: 1fr; } }

/* The sideways reveal is written for a pair — `(var(--i) * 2 - 1) * 28px` puts
   a third panel 84px to the right, which is trap 55's draggable phone. Three
   and four panels always reveal vertically. */
@media (prefers-reduced-motion: no-preference) {
	html.js .rwl-splitfeat--3 .rwl-splitfeat__panel[data-rwl-reveal],
	html.js .rwl-splitfeat--4 .rwl-splitfeat__panel[data-rwl-reveal] { transform: translateY(18px); }
	html.js .rwl-splitfeat--3 .rwl-splitfeat__panel[data-rwl-reveal].is-in,
	html.js .rwl-splitfeat--4 .rwl-splitfeat__panel[data-rwl-reveal].is-in { transform: none; }
}

/* Trap 33: --tone is a FILL. The panel eyebrow used it as text, which on the
   gold tone measured under 4.5:1 on cream. --tone-ink is the text-safe one. */
.rwl-tone--brand { --tone-ink: var(--rwl-brand); }
.rwl-tone--coral { --tone-ink: var(--rwl-coral-dk); }
.rwl-tone--surf  { --tone-ink: var(--rwl-brand); }
.rwl-tone--dune  { --tone-ink: var(--rwl-coral-dk); }
.rwl-splitfeat__eye,
.rwl-journey__when,
.rwl-bento__num { color: var(--tone-ink, var(--tone)); }

/* ------------------------------------------------------- the RW watermark --
 *
 * Her request, 2026-09-27: "use it subtly throughout the site where
 * appropriate, but keep it separate from the logo." So it is NOT in the
 * lockup — the header and footer carry her REMA WILSON / REAL ESTATE wordmark
 * alone — and it appears here as a large, very low-contrast ornament behind
 * the creed, which is the one band on the page with no photograph and no
 * competing artwork.
 *
 * aria-hidden by construction: it is a background, so it is never announced
 * and never selectable, and at 5% it cannot interfere with the type over it
 * (the creed's worst reading is unchanged at 8.9:1).
 */
.rwl-creed { position: relative; overflow: hidden; }
.rwl-creed::after {
	content: "";
	position: absolute;
	right: -4rem;
	top: 50%;
	width: min(34rem, 46vw);
	aspect-ratio: 1 / 1;
	transform: translateY(-50%);
	background: url("../img/mark.png") center / contain no-repeat;
	opacity: .09;
	pointer-events: none;
	z-index: 0;
}
.rwl-creed > * { position: relative; z-index: 1; }

@media (max-width: 760px) {
	.rwl-creed::after { right: -6rem; width: 22rem; opacity: .07; }
}

/* Her Jeep photograph on /rema/. A banner is a ~4:1 band and this is a
   standing figure, so the default centre crop shows the grille and her knees.
   She sits right of centre with her head about 14% down the file. */
.rwl-banner--jeep .rwl-banner__media img { object-position: 54% 16%; }
@media (max-width: 900px) {
	.rwl-banner--jeep .rwl-banner__media img { object-position: 58% 14%; }
}

/* ==================================================== the RW watermark ==
 *
 * Rema, 2026-09-27: "You can use the watermark here and there where you think
 * works visually" — and Adam's example was the Meet Your Agent cards. So it
 * appears in three places and no more: behind "Meet your agent" on the home
 * page, in the corner of each qualification card on her own page, and behind
 * the creed, where it already was. Any more than that and it stops reading as
 * a mark and starts reading as a texture.
 *
 * Both grounds are light, so they take mark-ink.png — the flat espresso
 * silhouette. The gold artwork is invisible at these opacities on cream, which
 * is the whole reason the ink variant exists.
 *
 * These rules sit at the end of the sheet deliberately: .rwl-pillar and
 * .rwl-section--split are both declared earlier, and a media query adds no
 * specificity (trap 51).
 */

.rwl-section--split {
	position: relative;
	/* clip, not hidden: hidden makes this a scroll container and would kill any
	   position: sticky inside it (trap 38). */
	overflow-x: clip;
}

.rwl-section--split::before {
	content: "";
	position: absolute;
	/* Right, not left, and stronger -- Adam, 2026-09-27. On the home page the
	   split is reversed, so her photograph occupies the right half and a ring
	   centred behind it would be almost entirely hidden. It is anchored to the
	   bottom-right corner instead, where roughly half of it falls in the open
	   margin below and beside the photograph and the rest reads through the
	   section's own background. */
	right: -9rem;
	bottom: -7rem;
	width: min(34rem, 48vw);
	aspect-ratio: 1 / 1;
	background: url("../img/mark-ink.png") center / contain no-repeat;
	opacity: .11;
	pointer-events: none;
	z-index: 0;
}

/* The split's own children have to outrank it or the prose sits behind the
   ghost and the portrait loses its stacking context. */
.rwl-section--split > .rwl-split { position: relative; z-index: 1; }

@media (max-width: 900px) {
	/* On a phone the column is full width, so a mark that big sits directly
	   under the paragraph text rather than beside it -- smaller, and kept in
	   the corner. */
	.rwl-section--split::before { right: -6rem; bottom: -4rem; width: 20rem; opacity: .085; }
}

/* Her four qualification cards on /rema/ — the mark tucked into the corner,
   bleeding off two edges so it reads as a watermark and not as an icon. */
.rwl-pillars--light .rwl-pillar {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.rwl-pillars--light .rwl-pillar::after {
	content: "";
	position: absolute;
	right: -2.4rem;
	bottom: -2.8rem;
	width: 9.5rem;
	aspect-ratio: 1 / 1;
	background: url("../img/mark-ink.png") center / contain no-repeat;
	opacity: .07;
	pointer-events: none;
	z-index: -1;
}

/* The creed is NOT one of these: parts/creed.php gives it rwl-section--dark, so
   it keeps the gold mark.png. The ink silhouette would be a black smear on it.
   (I nearly switched it over here on the assumption that every band in this
   lineage is a light wash. Two of them are not.) */

/* The brokerage's licensed name, above the office address on /contact/.
   Set in the display face at the weight of the address rather than as another
   heading — it is a fact about where she hangs her license, not a label. */
.rwl-contact__firm {
	margin: .3rem 0 0;
	font-family: var(--rwl-display);
	font-size: .98rem;
	letter-spacing: .01em;
	color: var(--rwl-ink);
}

/* ------------------------------------------- the lockup's aspect ratio --
 *
 * Her real lockup is 841x151 — 5.6:1, where the generated one it replaced was
 * 4.5:1. That matters because .rwl-logo__img sets an explicit `height` with
 * `width: auto`, and on a phone `max-width: 68vw` then clamps the width while
 * the height stays where it was put. For a replaced element whose height is
 * NOT auto, CSS does not recompute the height from the ratio — so the image is
 * squashed horizontally rather than scaled down. Measured at 390px: a 265x64
 * box holding a 5.57:1 picture, her name condensed to 74% of its width. It
 * looks like a font choice, not a bug, which is why it needs a note.
 *
 * object-fit keeps the ratio whatever the box does; object-position keeps the
 * lockup flush left so it does not drift away from the edge of the bar.
 */
.rwl-logo__img {
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 720px) {
	/* Sized so the box and the picture agree: 76vw is 296px on a 390px phone,
	   which at 5.57:1 is 53px tall — so a 54px box has no dead band under the
	   wordmark. Wider and taller than the 64px box it replaces actually
	   rendered, and it still leaves 94px for the burger. */
	:root { --rwl-logo-max: 54px; --rwl-logo-min: 40px; }
	.rwl-logo--header .rwl-logo__img { max-width: 76vw; }
}

/* ------------------------------------ the lockup, rebuilt white (2026-09-27)
 *
 * Adam: "make the site logo clearer and start white, slightly smaller".
 *
 * Clearer meant dropping her file's colour, not sharpening it. site-logo-b.jpg
 * is a JPEG, so the compressor treated her logo as a photograph and left a
 * grey-green fringe on every serif hairline; unpremultiplying the colour when
 * keying it off the black spread that fringe further. logo.png and
 * logo-light.png are now painted from the MASK alone — pure white over the
 * hero, the site's bronze on the scrolled white bar — at 1682x302, so the
 * masthead is sharp at 2x. Nothing of her letterforms is lost; only the
 * metallic gradient is, and at 46px tall that gradient was the mud.
 *
 * Sized down a step at both widths, as asked.
 */
:root { --rwl-logo-max: 80px; --rwl-logo-min: 50px; }

@media (max-width: 720px) {
	:root { --rwl-logo-max: 48px; --rwl-logo-min: 36px; }
	/* 48px at 5.57:1 is 267px, inside 70vw (273px) on a 390px phone, so the
	   cap never engages and the picture is never clamped (see the aspect-ratio
	   note above). */
	.rwl-logo--header .rwl-logo__img { max-width: 70vw; }
}

/* ---------------------------------------- the phone hero's top gap ------
 *
 * Adam: "the hero on mobile has a big gap on the top, fit it all to look very
 * nice."
 *
 * Two paddings were stacking. .rwl-hero carries padding-block:
 * clamp(5rem, 10vh, 7rem) — 90px on a 900px-tall phone — and
 * .rwl-home .rwl-hero__inner separately reserves var(--rwl-header-h) (96px) to
 * clear the masthead. Together that put the eyebrow at y=192 under a 96px
 * header: 96px of dead photograph between the logo and the first word, which
 * is most of what a prospect sees before they scroll.
 *
 * The inner's reservation is the one that is load-bearing, so the hero's own
 * top padding goes and the inner gains the breathing room instead. Measured
 * after: eyebrow at 128, content ending at 702, hero 750 tall.
 */
@media (max-width: 720px) {
	.rwl-home .rwl-hero {
		padding-top: 0;
		padding-bottom: 3rem;
	}
	.rwl-home .rwl-hero__inner { padding-top: calc(var(--rwl-header-h) + 2rem); }
}

/* -------------------------------- the masthead over the photograph ------
 *
 * Everything in the transparent bar is white — the lockup now, the nav links,
 * the call link and the burger — and it sits on the top of the hero, which is
 * exactly where the hero's own scrim is deliberately weakest so the sky keeps
 * its colour. Measured on the deployed page with the lockup's own alpha mask
 * as the stencil: the brightest 1% of the ground under the wordmark ran
 * 4.14:1 at 390px and 4.66:1 at 1440. The phone is the one that matters and it
 * was short.
 *
 * Two background layers rather than a pseudo-element: the bar is unpositioned
 * inside a sticky, z-indexed header, so an ::before behind it has several ways
 * to come out invisible. The white is listed FIRST so it paints on top and
 * occludes the wash as the solid bar arrives — one opacity to keep in sync
 * instead of two.
 */
/*
 * The wash does NOT go on the bar. A gradient is clipped to its own box, so a
 * wash strong enough to carry the nav has to fall to zero inside the bar's
 * last few pixels, and that draws a hard horizontal line the full width of the
 * hero — it reads as a stray border, which is worse than the contrast problem
 * it fixes. It goes on .rwl-hero__scrim instead, below, where it has the whole
 * top of the photograph to fade out over.
 *
 * The bar keeps the white it always had.
 */

/* The nav links are the part of a transparent masthead that never gets
   measured, and here they were the part that failed: over the cloud bank at
   the top of the hero the ground under them ran L=.17-.30, so white measured
   3.0:1 on "Talk to Rema" and 3.4:1 on "About" while the lockup beside them
   passed. The wash above is shaped to hold its strength through the whole bar
   rather than fading out at 62%, which is exactly where the links sit, and
   these carry a shadow for the same reason the lockup does. */
.rwl-home .rwl-header:not(.is-solid) .rwl-nav__list > li > a,
.rwl-home .rwl-header:not(.is-solid) .rwl-nav__toggle,
.rwl-home .rwl-header:not(.is-solid) .rwl-callnow,
.rwl-home .rwl-header:not(.is-solid) .rwl-header__actions .rwl-btn--sm {
	text-shadow: 0 1px 3px rgba(12, 10, 9, .55);
}

/* A soft shadow under the white lockup as well. The wash fixes the average
   ground; this is what keeps a hairline serif readable if it happens to fall
   across a bright cloud. Only on the light copy — on the white bar it would
   just look smudged. */
.rwl-logo__img--light { filter: drop-shadow(0 1px 3px rgba(12, 10, 9, .45)); }

/* ------------------------------------------- the hero lede, compact -----
 *
 * Adam, 2026-09-27: "lets make her subhead paragraph more compact / smaller".
 *
 * It is 380 characters, which is a lot for a hero, and it was set at 19.2/31.7
 * on desktop and 17.2/28.3 on a phone — 1.65 leading, right for body copy in an
 * article and loose for a paragraph that has to read as a caption under a
 * three-line name. Measured before: 190px tall over six lines at 1440, and
 * 283px over ten lines at 390, where it filled more of the hero than the
 * headline did.
 *
 * Smaller type and tighter leading, and slightly wider measure on desktop so
 * the line count comes down with the size rather than going up.
 */
.rwl-hero__lede {
	font-size: 1.06rem;
	line-height: 1.56;
	max-width: 52ch;
	margin-top: 1.05rem;
	/* The wider measure left "nothing." alone on a sixth line. */
	text-wrap: pretty;
}

@media (max-width: 900px) {
	.rwl-hero__lede {
		font-size: .95rem;
		line-height: 1.52;
		max-width: none;
		margin-top: .85rem;
	}
	/* The headline and the eyebrow close up with it, so the block reads as one
	   unit rather than three stacked ones. */
	.rwl-hero .rwl-eyebrow { margin-bottom: .55rem; }
	.rwl-hero__actions { margin-top: 1.5rem; }
}

/* ============================================ the closing Jeep band =====
 *
 * Her Jeep photograph as the background of the home page's last section, with
 * a heading and one button on it — Adam, 2026-09-27, "similar to the top of
 * her about page. super simple contact rema". Same construction as
 * .rwl-banner: cover image, scrim, white type. See parts/photo-cta.php for
 * why it is the same frame as /rema/'s banner.
 */
.rwl-jeepcta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(24rem, 58vh, 33rem);
	padding-block: clamp(3.5rem, 8vh, 5.5rem);
	overflow: hidden;
}

.rwl-jeepcta__media { position: absolute; inset: 0; z-index: 0; }

/* Scored offline at four framings before deploying: at 414px tall the band cut
   her head off at every vertical position that also kept the Jeep, so the band
   is taller (520px at 1440) and sits near the top of the file. Shows her to
   the hips, the whole front of the Jeep and the street behind it. */
.rwl-jeepcta__media img { object-position: 60% 6%; }

/*
 * Heavier on the left than .rwl-banner's, because the type here is centred in
 * the band rather than sitting at the bottom, and because a white Jeep in full
 * sun is the brightest ground on the site. Measured after deploying.
 */
.rwl-jeepcta__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(16, 18, 22, .78) 0%, rgba(16, 18, 22, .60) 38%, rgba(16, 18, 22, .26) 72%, rgba(16, 18, 22, .20) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .22) 0%, rgba(16, 18, 22, .10) 45%, rgba(16, 18, 22, .34) 100%);
}

/* No max-width here: .rwl-wrap is a centred, page-width container, so
   narrowing it pushes the content into the middle of the band instead of
   sitting it on the left gutter where the scrim is heaviest. The title takes
   its own measure below. */
.rwl-jeepcta__in {
	position: relative;
	z-index: 2;
}

.rwl-jeepcta__title {
	max-width: 18ch;
	margin: 0 0 1.6rem;
	color: #fff;
	text-shadow: 0 1px 2px rgba(10, 12, 16, .55), 0 2px 18px rgba(10, 12, 16, .45);
}

@media (max-width: 900px) {
	.rwl-jeepcta {
		min-height: 22rem;
		padding-block: 3.25rem;
	}
	/* On a phone the band is nearly square, so a centred cut loses her
	   entirely to the passenger door. */
	.rwl-jeepcta__media img { object-position: 52% 30%; }
	.rwl-jeepcta__scrim {
		background:
			linear-gradient(to bottom, rgba(16, 18, 22, .34) 0%, rgba(16, 18, 22, .52) 48%, rgba(16, 18, 22, .66) 100%);
	}
	/* NOT full width here. A full-bleed button is right on a flat band and
	   wrong on this one: it runs the width of the phone and crosses her
	   legs. Its own width keeps it on the left, clear of her. */
	.rwl-jeepcta__in .rwl-btn { width: auto; justify-content: center; }
}

/* ========================================= the footer follow row ========
 *
 * Rema, 2026-09-29, with her own marketing banner as the reference: "Can we go
 * with something like this including the IG handler and FB etc going across
 * the bottom... make the footer super nice".
 *
 * A full-width band between the columns and the legal line, printing the
 * HANDLES rather than the platform names. Her banner sets FOLLOW ME in
 * letterspaced gold caps beside the glyph, so this does too.
 *
 * It replaces `.rwl-foot__social`, three words in the contact column.
 */
.rwl-foot__follow {
	border-top: 1px solid rgba(255, 255, 255, .09);
}

.rwl-foot__follow-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 2.2rem;
	padding-block: 1.15rem;
}

.rwl-foot__follow-h {
	font-family: var(--rwl-display);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rwl-surf);
}

.rwl-foot__follow-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rwl-foot__follow-list a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .92rem;
	color: rgba(255, 255, 255, .82);
}

/* .rwl-icon paints every glyph with the accent, which on this near-black band
   is the gold — right for the mark, and it keeps the handle itself white so
   the row reads as text with an icon rather than as a row of gold. */
.rwl-foot__follow-list .rwl-icon { color: var(--rwl-surf); }
.rwl-foot__follow-list a:hover { color: #fff; }
.rwl-foot__follow-list a:hover .rwl-icon { color: var(--rwl-dune); }

@media (max-width: 640px) {
	/* Stacked, because three handles side by side wrap into a ragged block
	   that reads as a list with no label. The container turns to a column too:
	   left as a row, "FOLLOW ME" centres itself against a three-item stack and
	   ends up beside the middle handle, which reads as a caption on that one
	   rather than a heading for all three. */
	.rwl-foot__follow-in { flex-direction: column; align-items: flex-start; gap: .85rem; }
	.rwl-foot__follow-list { flex-direction: column; align-items: flex-start; gap: .7rem; }
}

/* --------------------------------- her real lockup, 2026-09-29 ----------
 *
 * The masthead lockup is now her own reference file: REMA WILSON in white, the
 * gold rule with its diamond, REAL ESTATE beneath. That is three lines where
 * the last one was two, so the aspect went 5.57:1 -> 4.36:1 and her NAME is
 * only 38% of the file's height rather than about 60% of it. Sized at the old
 * 80px the name would have come out a third smaller than before without a word
 * of it being asked for, so the box grows to keep the name where it was.
 *
 * 96px at 4.36:1 is 419px wide, inside a 128px bar. The phone's 58px is 253px,
 * inside the 78vw cap (304px at 390) so the cap never engages and the picture
 * is never clamped (see the aspect-ratio note further up).
 */
/*
 * The masthead carries the FULL lockup from 2026-10-02 — Adam: "the logo in
 * the footer that has the house and haven logo at the bottom ... can we add
 * that to the main site logo on the header? and resize the logo appropriately
 * so its not too large?"
 *
 * Five lines instead of three takes the ratio 4.36:1 -> 2.84:1, and her NAME
 * is now about 25% of the file's height rather than 38%. At the old 96px her
 * name would have rendered a third smaller with nobody asking, so the box
 * grows — but only to 104px, which is 295px wide inside a 128px bar, rather
 * than to the ~150px it would take to put her name back where it was. That is
 * the "not too large" part: the brokerage lines cost height, and her name
 * giving some of it back is the trade.
 */
:root { --rwl-logo-max: 104px; --rwl-logo-min: 64px; }

@media (max-width: 720px) {
	/* 70px is 199px wide, well inside the 78vw cap (304px at 390) so the
	   picture is never clamped, and it fits a 96px bar with room either side. */
	:root { --rwl-logo-max: 70px; --rwl-logo-min: 52px; }
	.rwl-logo--header .rwl-logo__img { max-width: 78vw; }
}

/* The footer's is the FULL stack — five lines, 2.84:1 — so it needs its own
   height or it renders her name at about 18px. */
.rwl-logo--footer .rwl-logo__img { height: 118px; }
.rwl-foot__brand .rwl-logo__img { height: 118px; }

@media (max-width: 860px) {
	.rwl-logo--footer .rwl-logo__img,
	.rwl-foot__brand .rwl-logo__img { height: 96px; }
}

/* ------------------------------------- the Jeep bands, pulled back -----
 *
 * Rema, 2026-09-29: "for all the jeep banners she would like them not as
 * zoomed in."
 *
 * There is no zoom control to turn. Both bands are `object-fit: cover`, so how
 * much of the photograph you see is decided entirely by the band's own aspect
 * against the file's — and the file is 988x756 (1.31:1), the widest clean crop
 * that exists. Her wide marketing banner has her name, House & Haven and an
 * Instagram handle burnt into its left half, so it cannot give a wider source.
 *
 * The only honest way to show more of the picture is to make the bands taller.
 * /rema/'s was 352px at 1440 — 4.1:1, about 32% of the file's height visible;
 * at 480px it is 3:1 and shows about 44%. The home page's goes 522px -> ~620,
 * 56% visible. Both re-framed lower now there is room for her whole figure
 * rather than her shoulders.
 */
.rwl-banner--jeep { min-height: clamp(21rem, 52vh, 30rem); }
/* 30% put the window below her head: at 468px tall from a 1102px scaled file
   there are 634px of play, and 30% of that starts at y=190 while her crown is
   at about 132. Anything above ~20% keeps her whole. */
.rwl-banner--jeep .rwl-banner__media img { object-position: 56% 8%; }

@media (max-width: 900px) {
	/* A phone box is near-square, so it was barely cropping to begin with —
	   about 85% of the file's width shows. It only needs the vertical nudge. */
	.rwl-banner--jeep { min-height: 23rem; }
	/* Same slice as the closing band, same cause: at 368px a phone shows x
	   0.31-0.73 of a 2.5:1 file and she stands at 0.68-0.79, so her right
	   side fell off the frame. 69% puts her at 261-362 of 390 — her own
	   third, and this banner's type is bottom-LEFT, so they do not meet.
	   No vertical crop at this height, so the y value does nothing. */
	.rwl-banner--jeep .rwl-banner__media img { object-position: 69% 50%; }
}

/*
 * Taller again, 2026-09-29: "the footer of her jeep image it is still too
 * zoomed in especially on desktop". 594px at 1440 showed 54% of the file's
 * height; 768px shows 70%, which is most of the photograph — her whole figure,
 * the whole front of the Jeep, the street and the building behind it.
 *
 * This is the ceiling without changing what the band is. At 1440 wide the file
 * scales to 1102px tall, so showing all of it needs a 1102px band — taller
 * than the hero. The only other way to de-zoom is to stop full-bleeding the
 * photograph, which is a different section.
 */
.rwl-jeepcta { min-height: clamp(30rem, 82vh, 48rem); }
.rwl-jeepcta__media img { object-position: 58% 10%; }

@media (max-width: 900px) {
	/*
	 * She was sliced down the middle on phones. The file is 2.5:1 and a phone
	 * band is nearly square, so `cover` crops the sides hard: at 400px tall it
	 * showed x 0.32-0.71 of the picture, and she stands at 0.68-0.79. Her left
	 * shoulder was the last thing in frame.
	 *
	 * Shorter is what un-crops it, because the less height `cover` has to fill
	 * the less it has to scale up: 304px shows x 0.49-1.00 instead, which is
	 * her whole figure head to feet, the whole Jeep and the street behind it.
	 * Pinned to the right edge rather than centred on her, so the reconstructed
	 * left third of the frame (see CREDITS.md) never appears on a phone at all.
	 */
	.rwl-jeepcta { min-height: 19rem; }
	/*
	 * 63%, not the right edge. Pinned right she is whole but lands in the
	 * MIDDLE of a phone frame, so the heading and the button sit on top of
	 * her — which is the same complaint in a different form. At 63% the
	 * window is x 0.31-0.82 and she stands at 284-368 of 390: her own third
	 * of the frame, with the Jeep's front and the street left of her for the
	 * type to sit on.
	 */
	.rwl-jeepcta__media img { object-position: 63% 50%; }
}

/* ================================== the footer, second pass (2026-09-29) ==
 *
 * Adam: "can we make the footer a lot better specially the design of the Live
 * beautifully. Live Jacksonville. and the social profiles to look better."
 *
 * Both were plain text under a five-line gold lockup, which made the whole
 * left column read as a caption. Her own marketing banner is the reference for
 * both: the tagline set large in the serif on two lines with a short gold rule
 * between them, and the social row as a deliberate object rather than a list.
 */
.rwl-foot__tag {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
	margin: 1.5rem 0 0;
}

.rwl-foot__tag-line {
	font-family: var(--rwl-display);
	font-size: clamp(1.45rem, 2.1vw, 1.9rem);
	line-height: 1.12;
	letter-spacing: .005em;
	color: #fff;
}

/* The rule between her two lines, as her banner draws it: short, gold, and
   sitting in the gap rather than under the type. */
.rwl-foot__tag-rule {
	display: block;
	width: 3.2rem;
	height: 1px;
	margin: .25rem 0;
	background: linear-gradient(90deg, var(--rwl-surf), rgba(201, 184, 150, .12));
}

/* ------------------------------------------------ the follow row -------- */

.rwl-foot__follow-list a {
	gap: .7rem;
	padding: .5rem .95rem .5rem .5rem;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 999px;
	font-size: .9rem;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .88);
	transition: border-color .2s var(--rwl-ease), background-color .2s var(--rwl-ease), color .2s var(--rwl-ease);
}

/* The glyph gets its own disc so the chip reads as a badge rather than as a
   bordered sentence — and so the three sit on a common left edge whatever the
   glyph's own width is. */
.rwl-foot__follow-list .rwl-icon {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	box-sizing: content-box;
	padding: .42rem;
	border-radius: 50%;
	background: rgba(201, 184, 150, .12);
	color: var(--rwl-surf);
	transition: background-color .2s var(--rwl-ease), color .2s var(--rwl-ease);
}

.rwl-foot__follow-list a:hover {
	border-color: rgba(201, 184, 150, .55);
	background: rgba(201, 184, 150, .07);
	color: #fff;
}
.rwl-foot__follow-list a:hover .rwl-icon { background: var(--rwl-surf); color: var(--rwl-brand); }

/* .42 measured about 4.1:1 on this near-black band — passable for a small
   caps label and not comfortable. .58 is 6.4:1 and still reads as a label
   rather than as a fourth item in the row. */
.rwl-foot__follow-h { color: rgba(255, 255, 255, .58); }

@media (max-width: 640px) {
	/* Chips side by side on a phone rather than one per line: they are short
	   now that each is a pill, and three stacked pills is a column of buttons
	   nobody asked for. */
	.rwl-foot__follow-list { flex-direction: row; flex-wrap: wrap; gap: .6rem; }
	.rwl-foot__follow-list a { font-size: .84rem; padding-right: .8rem; }
}

/* ========================== the Jeep bands show the WHOLE photo now ======
 *
 * Adam, 2026-10-02: "we need to remove the lines and text, and make it so that
 * this whole photo is there - because now its too zoomed in on her and we need
 * to use the wide photo."
 *
 * rema-banner.jpg is her full 2.5:1 banner frame with the typography painted
 * out, so there is finally a source wide enough to show entire. The way to
 * show all of a `cover` image is to give the band the file's own aspect ratio:
 * at 1440 that is 576px, at 1920 it is 768px, and nothing is cropped at any
 * width. min-height has to be cleared explicitly or the earlier clamps win and
 * the ratio never gets to apply.
 *
 * Phones keep a min-height instead. At 390px the file's ratio would be a 156px
 * strip, so the phone crops the sides — it already showed about 85% of the
 * width and that is the one width where cropping is right.
 */
@media (min-width: 901px) {
	.rwl-jeepcta,
	.rwl-banner--jeep {
		aspect-ratio: 2880 / 1296;
		min-height: 0;
	}
	/* Nothing is cropped, so there is nothing to position. */
	.rwl-jeepcta__media img,
	.rwl-banner--jeep .rwl-banner__media img { object-position: center; }
}

/* ------------------------------ the hero headline, footer-style ---------
 *
 * Her tagline on two lines with the short gold rule between them, matching the
 * footer block she liked (Adam, 2026-10-02). It is an H1, so the rule has to be
 * decorative only — it is a <span aria-hidden>, not a border, so a screen
 * reader hears "Live beautifully. Live Jacksonville." and nothing else.
 */
.rwl-hero__title--split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* The rule carries its own margins; a gap here as well put the two lines
	   about 2rem apart and they stopped reading as one headline. */
	gap: 0;
}

.rwl-hero__title-line { display: block; }

/*
 * The footer's rule is 1px fading to nothing, which works on a near-black
 * band. Measured over the hero photograph it rendered 72x1 with the gradient
 * intact and was invisible — a hairline has nothing to sit against on a busy
 * picture. Solid, 2px, and shadowed the way the headline is.
 */
/*
 * Solid where it starts, fading out to the right. A rule that fades at both
 * ends has no anchor on a photograph and reads as a smudge; one that is solid
 * all the way across reads as a bar. The shadow is on the solid half only,
 * which is what keeps it legible over the sky without making the tail look
 * dirty as it goes.
 */
.rwl-hero__title-rule {
	display: block;
	width: 4.75rem;
	height: 2px;
	margin: .34rem 0 .4rem;
	border-radius: 2px;
	background: linear-gradient(90deg,
		var(--rwl-surf) 0%,
		var(--rwl-surf) 42%,
		rgba(201, 184, 150, .55) 72%,
		rgba(201, 184, 150, 0) 100%);
	filter: drop-shadow(0 1px 2px rgba(10, 12, 16, .6));
}

/* The lede sat 17px under a two-line serif headline, which read as one block.
   The hero's own lede margin is the lineage's body spacing; this headline is
   taller than the one it was written for. */
.rwl-hero__title--split + .rwl-lede,
.rwl-hero__title--split ~ .rwl-hero__lede { margin-top: 1.75rem; }

@media (max-width: 900px) {
	.rwl-hero__title-rule { width: 3.9rem; height: 2px; margin: .26rem 0 .32rem; }
	.rwl-hero__title--split ~ .rwl-hero__lede { margin-top: 1.4rem; }
}

/* ------------------------------ the Jeep photograph, pulled back (2026-10-05)
 *
 * Rema: "make the banners much more further back... I want it to look more
 * lifestyle than close up." The file is now her same photograph with the
 * frame extended on the top, right and bottom (Canva Magic Expand; her own
 * pixels are untouched, see CREDITS.md), 2880x1296. She stands at about 54%
 * across and fills about 58% of the height, where she used to fill 92%.
 *
 * Above 900px both bands take the file's ratio (the rule above), so the whole
 * frame shows. On phones the band is nearly square and `cover` crops the
 * sides: these positions keep her right of centre with the Jeep's nose and
 * the street to her left, where the type sits.
 */
/*
 * Phones get their own taller cut (rema-banner-mobile.jpg, 1500x1218, printed
 * as a <picture> source by rwl_image()): more canopy above her and more street
 * below, so she fills about 45% of a phone band instead of 58%. The home band
 * is the file's own ratio, so nothing is cropped there.
 */
.rwl-figure picture { display: contents; }
@media (max-width: 900px) {
	.rwl-jeepcta__media img { object-position: 50% 50%; }
	.rwl-banner--jeep .rwl-banner__media img { object-position: 62% 50%; }
}

/* ------------------------------- her statement, as paragraphs -----------
 *
 * Adam, 2026-10-05, on /rema/: "her text is massive... i think she wants to
 * keep all of it."
 *
 * Every word is still there. What made it read as a wall was that 614
 * characters sat in a single block — 249px on desktop, 350px on a phone — in
 * the display serif at 18.4px, which is LARGER than her own bio underneath it.
 * So the densest thing on the page was also the loudest, and it came first.
 *
 * Three paragraphs now, at the same size as the bio it sits above rather than
 * above it, with the leading opened up. Nothing is cut and nothing is smaller
 * than the body copy around it.
 */
.rwl-pull p {
	margin: 0;
	line-height: 1.62;
}

.rwl-pull p + p {
	margin-top: .85rem;
}

.rwl-pull {
	font-size: clamp(1rem, .98rem + .15vw, 1.06rem);
	padding: 1.3rem 1.5rem;
}