/*
 * Palette set by scripts/set-palette.py.
 *
 * RE/MAX's own blue and red, in four shades: the RE/MAX theme shared with the
 * Gary Donalson and Rick Tritschler builds, here for Paul Ruth, RE/MAX Dallas Suburbs
 *
 *   RE/MAX blue      #003DA5  structure: headings, buttons, footer, the ink
 *   RE/MAX sky blue  #4F86D9  fills, rules, washes — never text
 *   RE/MAX red       #DC1C2E  the warm accent and the thing to press
 *   Crimson          #9B1B30  the fourth stop in the rule — fills only
 *
 * Carried in one repeated four-part rule under every heading.
 * Fully light, on a cool ground.
 *
 * Measured (WCAG):
 *   brand on ground     9.0:1
 *   white on brand      9.5:1
 *   coral on ground     4.7:1
 *   white on coral      4.9:1
 *   surf on ground      3.5:1  large type / fills only
 *   dune on ground      7.7:1
 *   body on ground      8.6:1
 */

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

:root {
	--pru-brand:      #003DA5;
	--pru-brand-mid:  #2458B2;
	--pru-brand-lt:   #8CA8D6;
	--pru-brand-pale: #E6ECF6;

	--pru-accent:       #003DA5;
	--pru-accent-mid:   #2458B2;
	--pru-accent-lt:    #4F86D9;
	--pru-accent-metal: linear-gradient(135deg, #003287 0%, #245EBC 52%, #003DA5 100%);

	--pru-surf:       #4F86D9;
	--pru-surf-dk:    #3E69A9;
	--pru-surf-pale:  #EAF0FA;

	--pru-coral:      #DC1C2E;
	--pru-coral-br:   #E2404F;
	--pru-coral-dk:   #BD1828;
	--pru-coral-pale: #FCE8EA;

	--pru-dune:       #9B1B30;
	--pru-dune-dk:    #741424;
	--pru-dune-pale:  #F3E4E6;

	--pru-sand:       #DCE4EE;
	--pru-sand-dp:    #C3CFDD;

	--pru-red:        #DC1C2E;

	--pru-deep:       #001B4A;
	--pru-deep-dk:    #00112E;
	--pru-deep-lt:    #00286B;
	--pru-stone:      #5C6D84;

	--pru-ink:        #001B4A;
	--pru-body:       #33496E;
	--pru-muted:      #5C6D8B;
	--pru-faint:      #8C98AE;

	--pru-white:      #FFFFFF;
	--pru-shell:      #F7F9FB;
	--pru-tint:       #F7F9FB;
	--pru-tint-2:     #EDF1F6;
	--pru-sky:        #E6ECF6;
	--pru-line:       #E1E6ED;
	--pru-line-soft:  #EFF2F6;

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

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

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

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


@media (max-width: 1040px) {
	:root {
		--pru-header-h: 96px;
		--pru-bar-max:  96px;
		--pru-bar-min:  62px;
		--pru-logo-max: 68px;
		--pru-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(--pru-shell);
	color: var(--pru-body);
	font-family: var(--pru-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: hidden makes body a scroll container and kills every
	   position: sticky below it — the listing ask box (traps 38, 55). */
	overflow-x: clip;
}

body.pru-locked { overflow: hidden; }

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

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

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--pru-display);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.018em;
	color: var(--pru-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(--pru-deep-lt); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--pru-accent-lt); color: var(--pru-ink); }

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

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

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

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

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

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

.pru-section--tint { background: var(--pru-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. */
.pru-section--dark {
	background: var(--pru-deep);
	color: rgba(255, 255, 255, .82);
}

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

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

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

.pru-eyebrow--light { color: var(--pru-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. */
.pru-hero .pru-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);
}

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

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

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

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

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

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

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

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

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

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

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

.pru-btn:hover {
	background: var(--pru-deep-dk);
	border-color: var(--pru-deep-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(0, 27, 74, .5);
}
.pru-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 (#002563) sitting on a navy gradient — effectively invisible — and
 * a gold drop shadow. White on #003DA5 is 9.8:1 and needs no argument.
 */
.pru-btn--accent {
	background: var(--pru-accent-metal);
	border-color: transparent;
	color: #FFFFFF;
}
.pru-btn--accent:hover {
	background: var(--pru-accent-metal);
	filter: brightness(1.08);
	color: #FFFFFF;
	box-shadow: 0 12px 26px -12px rgba(0, 61, 165, .55);
}

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

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

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

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

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

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

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

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

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

.pru-icon { flex-shrink: 0; color: var(--pru-accent-lt); transition: color .2s var(--pru-ease); }
.pru-utility__list a:hover .pru-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. */
	.pru-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.
 */
.pru-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;
}

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

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

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

.pru-utility__list .pru-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.
 */
.pru-lang--drawer {
	align-self: center;
	background: var(--pru-sky);
	font-size: .82rem;
}

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

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

.pru-lang--drawer .pru-lang__off:hover {
	background: rgba(79, 134, 217, .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. */
.pru-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--pru-header-h);
	pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 1040px) {
	.pru-nav { display: none; }
	.pru-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 .pru-callnow and would otherwise win silently. */
	.pru-header__actions .pru-btn:not(.pru-callnow) { display: none; }
}

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

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

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

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

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

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

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

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

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

.pru-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(0, 27, 74, .03) 12px 24px),
		var(--pru-tint-2);
}

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

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

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

.pru-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 --pru-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 aerial of a sunlit barrier island 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
 * .pru-hero__title and .pru-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.
 */
.pru-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.
		 */
		linear-gradient(to bottom, rgba(16, 18, 22, 0) 16%, rgba(16, 18, 22, .30) 30%, rgba(16, 18, 22, .30) 62%, rgba(16, 18, 22, 0) 78%),
		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%);
}

.pru-hero__inner { position: relative; z-index: 2; max-width: 54rem; }
.pru-hero__title { color: #fff; }
.pru-hero__lede { color: rgba(255, 255, 255, .88); max-width: 46ch; margin-top: 1.25rem; }

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

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

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

.pru-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(--pru-deep-dk);
}

.pru-banner__media { position: absolute; inset: 0; z-index: 0; }
.pru-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%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pru-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(--pru-line);
	border-radius: 8px;
}

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

.pru-member__photo { position: relative; }

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

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

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

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

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

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

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

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

.pru-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) { .pru-listing__body { grid-template-columns: 1fr; } }

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

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

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

.pru-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(--pru-tint);
	border: 1px solid var(--pru-line);
	border-radius: 8px;
}
.pru-empty__mark { opacity: .7; }
.pru-empty h2 { font-size: 1.3rem; }
.pru-empty p { color: var(--pru-muted); margin-bottom: .5rem; }

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

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

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

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

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

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

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

.pru-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) { .pru-contact { grid-template-columns: 1fr; } }

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

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

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

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

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

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

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

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

.pru-field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--pru-deep) 50%),
		linear-gradient(135deg, var(--pru-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;
}

.pru-field input:focus,
.pru-field select:focus,
.pru-field textarea:focus {
	border-color: var(--pru-deep-lt);
	box-shadow: 0 0 0 3px rgba(79, 134, 217, .12);
	outline: none;
}

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

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

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

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

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

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

.pru-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 27, 74, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.pru-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(--pru-shadow-lg);
	transform: translateY(14px) scale(.99);
	transition: transform .3s var(--pru-ease);
}
.pru-modal.is-open .pru-modal__panel { transform: translateY(0) scale(1); }

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

.pru-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(--pru-muted);
	font-size: 1.55rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s var(--pru-ease), border-color .2s var(--pru-ease);
}
.pru-modal__close:hover { color: var(--pru-deep); border-color: var(--pru-line); }

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

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

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

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

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

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

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

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

.pru-pagination { margin-top: 2.75rem; }
.pru-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pru-pagination .page-numbers {
	padding: .5rem .9rem;
	border: 1px solid var(--pru-line);
	border-radius: 4px;
	color: var(--pru-body);
	font-size: .88rem;
}
.pru-pagination .page-numbers.current,
.pru-pagination .page-numbers:hover {
	border-color: var(--pru-deep);
	background: var(--pru-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(--pru-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(--pru-ink) !important; }
.bb-legal-container h2,
.bb-legal-container h3 { margin: 2.25rem 0 .75rem; line-height: 1.25; font-family: var(--pru-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(--pru-deep-lt) !important; text-decoration: underline; }
.bb-legal-container hr { border: 0; border-top: 1px solid var(--pru-line); margin: 2rem 0; }

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

@media (prefers-reduced-motion: no-preference) {
	html.js [data-pru-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .7s var(--pru-ease), transform .7s var(--pru-ease);
	}
	html.js [data-pru-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) {
	.pru-section { padding-block: clamp(3rem, 10vw, 4rem); }
	.pru-card__body { padding: 1.15rem; }
	.pru-service { padding: 1.6rem 1.3rem; }
	.pru-listing__titles { flex-direction: column; align-items: flex-start; }
	.pru-listing__price { text-align: left; }
}

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

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

.pru-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. */
.pru-nav__toggle {
	display: inline-flex;
	align-items: center;
	padding: .25rem;
	background: none;
	border: 0;
	color: var(--pru-ink);
	cursor: pointer;
	transition: transform .2s var(--pru-ease);
}
.pru-nav__item.is-open > .pru-nav__toggle { transform: rotate(180deg); }

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

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

.pru-nav__sub a {
	display: block;
	padding: .55rem 1.1rem;
	font-size: .78rem;
	text-transform: none;
	letter-spacing: .01em;
	color: var(--pru-body);
}
.pru-nav__sub a::after { display: none; }
.pru-nav__sub a:hover { background: var(--pru-tint); color: var(--pru-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. */
.pru-drawer__nav .pru-nav__list { width: 100%; gap: 0; }

.pru-drawer__nav .pru-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(--pru-line);
}

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

/* The row is the control, so it should look like one under the finger. */
.pru-drawer__nav .pru-nav__item.has-children { cursor: pointer; }
.pru-drawer__nav .pru-nav__item.has-children:active { background: var(--pru-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. */
.pru-drawer__nav .pru-nav__toggle {
	grid-column: 3;
	display: inline-flex;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--pru-deep);
}

.pru-drawer__nav .pru-nav__sub {
	grid-column: 1 / -1;
	background: var(--pru-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(--pru-ease), opacity .2s var(--pru-ease), padding .3s var(--pru-ease);
}

.pru-drawer__nav .pru-nav__item.is-open > .pru-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

.pru-creed__quote { margin: 0; }

.pru-creed__goal {
	font-family: var(--pru-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;
}

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

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

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

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

.pru-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(--pru-tint);
	border: 1px solid var(--pru-line);
	border-left: 4px solid var(--pru-accent-mid);
	border-radius: 8px;
}
@media (max-width: 820px) { .pru-valuecta { grid-template-columns: 1fr; } }

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

.pru-valuecta__call {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--pru-display);
	font-weight: 400;
	color: var(--pru-deep);
}
.pru-valuecta__call .pru-icon { color: var(--pru-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. */
.pru-steps--wide { grid-template-columns: repeat(4, 1fr); }

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

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

/* Pillars sit on navy by default; this is the variant for a light band. */
.pru-pillars--light .pru-pillar {
	background: #fff;
	border-color: var(--pru-line);
}
.pru-pillars--light .pru-pillar__title { color: var(--pru-ink); }
.pru-pillars--light .pru-pillar__body { color: var(--pru-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.
 */
.pru-foot {
	position: relative;
	background: var(--pru-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. */
.pru-foot::before {
	content: '';
	position: absolute;
	top: -70%; left: 50%;
	width: 74rem; height: 52rem;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(141, 176, 230, .10) 0%, transparent 64%);
	pointer-events: none;
}

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

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

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

.pru-foot__name { margin: 0; font-family: var(--pru-display); font-size: 1.1rem; font-weight: 400; color: #fff; }
.pru-foot__firm {
	margin: 2px 0 12px;
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* --pru-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(--pru-brand-lt);
}
.pru-foot__blurb { margin: 0; max-width: 40ch; color: rgba(255, 255, 255, .60); font-size: .9rem; }

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

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

.pru-foot__addr { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .88rem; }
.pru-foot__social { margin: 14px 0 0; font-size: .88rem; }
.pru-foot__social a { color: var(--pru-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. */
.pru-foot__legal {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, .09);
	background: rgba(0, 0, 0, .18);
}
.pru-foot__legal-in { padding-block: 20px; font-size: .76rem; color: rgba(255, 255, 255, .48); line-height: 1.65; }
.pru-foot__legal-in p { margin: 0 0 6px; }
.pru-foot__legal-in a { color: rgba(255, 255, 255, .68); }
.pru-foot__legal-in a:hover { color: #fff; }

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

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

/* The Equal Housing mark is now real SVG geometry — see pru_eho_mark(). */
.pru-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. */

.pru-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) { .pru-searchband { margin-top: -1.5rem; } }

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

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

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

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

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

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

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

.pru-search__field select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--pru-deep) 50%),
		linear-gradient(135deg, var(--pru-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;
}

.pru-search__field input:focus,
.pru-search__field select:focus {
	border-color: var(--pru-deep-lt);
	box-shadow: 0 0 0 3px rgba(79, 134, 217, .12);
	outline: none;
}

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

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

.pru-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(--pru-line-soft);
}

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

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

.pru-glyph { color: var(--pru-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(). */

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

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

.pru-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;
}

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

.pru-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) {
	.pru-slider__track {
		grid-auto-columns: 78vw;
		margin-inline: calc(var(--pru-gutter) * -1);
		padding-inline: 11vw;
		scroll-padding-inline: 11vw;
	}
	.pru-slider__slide { scroll-snap-align: center; }
}
.pru-slider__slide .pru-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. */
	.pru-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 --pru-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.
 */
.pru-home .pru-hero { margin-top: calc(var(--pru-header-h) * -1); }
.pru-home .pru-hero__inner { padding-top: var(--pru-header-h); }

.pru-home .pru-header__bar {
	background: rgba(255, 255, 255, var(--pru-shrink));
	border-bottom-color: rgba(225, 230, 237, var(--pru-shrink));
}

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

.pru-home .pru-header:not(.is-solid) .pru-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. */
.pru-home .pru-header:not(.is-solid) .pru-nav__list > li > a::after { background: #fff; }

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

/* The submenu panel is its own white surface and is never part of the swap. */
.pru-home .pru-nav__sub a { color: var(--pru-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.
 */
.pru-header__actions .pru-btn--sm { transition: background .28s var(--pru-ease), border-color .28s var(--pru-ease); }

.pru-home .pru-header:not(.is-solid) .pru-header__actions .pru-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. */
.pru-logo { position: relative; }
.pru-logo__img--light {
	position: absolute;
	inset-block-start: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s var(--pru-ease);
}
.pru-home .pru-header:not(.is-solid) .pru-logo__img--light { opacity: 1; }

/* No JS: .is-solid is never added and --pru-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) .pru-home .pru-hero { margin-top: 0; }
html:not(.js) .pru-home .pru-hero__inner { padding-top: 0; }
html:not(.js) .pru-home .pru-header__bar { background: #fff; }
html:not(.js) .pru-logo__img--light { display: none; }

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

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

/*
 * Reuses the enquiry 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.
 */
.pru-modal__panel--sm { max-width: 34rem; }

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

.pru-note__actions .pru-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.
 */
.pru-agentfacts {
	display: grid;
	gap: .85rem 2rem;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--pru-line);
}

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

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

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

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

.pru-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. */
.pru-agentcard__initials--lg {
	border-radius: 8px;
	font-size: clamp(3.5rem, 9vw, 6rem);
	letter-spacing: .04em;
}

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

.pru-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. */
.pru-gmark {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	/* The optical centre of the G sits slightly above the text baseline. */
	transform: translateY(.04em);
}

.pru-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.
 */
.pru-slider--team .pru-slider__track { grid-auto-columns: min(62vw, 15rem, 100%); }

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

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

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

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

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

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

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

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

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

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

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

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

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

.pru-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(--pru-tint-2);
	color: var(--pru-muted);
	font-size: .68rem;
}
.pru-filter.is-on .pru-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. */
.pru-figure--square { aspect-ratio: 1 / 1; }

.pru-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. */
.pru-figure--empty.pru-figure--wide,
.pru-figure--empty.pru-figure--hero,
.pru-figure--empty.pru-figure--square { min-height: 0; }

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

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

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

/* The representation line is the reason a sold listing is worth showing. */
.pru-card__repd {
	margin-bottom: .5rem;
	font-family: var(--pru-display);
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pru-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. */
.pru-callnow { display: none; }

@media (max-width: 1040px) {
	.pru-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(--pru-accent-lt);
		background-image: none;
		border-color: var(--pru-accent-lt);
		color: var(--pru-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;
	}

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

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

/* Below this the words go and the icon carries it — at 380px a labelled 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. */
	.pru-callnow span { display: none; }
	.pru-callnow { padding: 0; width: 44px; height: 44px; }
}

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

@media (max-width: 520px) {
	.pru-hero__phone { font-size: 1.02rem; align-items: flex-start; }
	.pru-hero__phone .pru-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) {
	.pru-team { grid-template-columns: 1fr 1fr; }
	.pru-team .pru-member:first-child { grid-column: 1 / -1; }
	.pru-team .pru-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. */
	.pru-team .pru-member:nth-child(2):last-child {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}
}

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

/* A card with no bio should sit tight rather than leave the gap the bio left. */
.pru-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. */
.pru-section--flush { padding-bottom: 0; }
.pru-head--tight { margin-bottom: 0; }

/* ------------------------------------------------------- listing address plate --
   Stands in for the listing photo. See pru_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. */
.pru-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, #002E7C 0%, var(--pru-deep) 55%, #00225B 100%);
}

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

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

.pru-plate__city {
	font-family: var(--pru-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. */
.pru-figure--hero.pru-plate { min-height: clamp(15rem, 34vw, 26rem); }

.pru-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. */
.pru-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.
 */
.pru-search--hero {
	background: rgba(255, 255, 255, .52);
	border-color: rgba(255, 255, 255, .65);
	box-shadow:
		0 18px 44px rgba(0, 27, 74, .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);
}

.pru-search--hero .pru-search__field label { color: var(--pru-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.
 */
.pru-search--hero .pru-search__field input,
.pru-search--hero .pru-search__field select {
	background: #fff;
	border-color: rgba(0, 27, 74, .14);
}

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

.pru-search--hero .pru-search__more summary { color: var(--pru-body); }
.pru-search--hero .pru-search__more summary:hover { color: var(--pru-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))) {
	.pru-search--hero { background: rgba(255, 255, 255, .88); }
}

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

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

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

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

.pru-search__clear {
	font-family: var(--pru-display);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pru-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 .pru-market--noshape and
 * simply centre their caption. That has to look deliberate, because on a cold
 * cache it is what every card looks like.
 */

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

@media (max-width: 1040px) { .pru-markets__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .pru-markets__grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }

.pru-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(--pru-white);
	border: 1px solid var(--pru-line);
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	transition: border-color .22s var(--pru-ease), transform .22s var(--pru-ease), box-shadow .22s var(--pru-ease);
}

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

.pru-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. */
.pru-market__shape .pru-shape { width: 100%; height: 100%; display: block; }
.pru-market__shape .pru-shape path {
	fill: var(--pru-accent);
	opacity: .16;
	transition: opacity .22s var(--pru-ease);
}
.pru-market__link:hover .pru-shape path { opacity: .34; }

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

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

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

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

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

.pru-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);
}
.pru-pair__photo img { display: block; width: 100%; height: auto; }

.pru-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) { .pru-pair__grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.pru-pair__name { margin: 0 0 .15rem; font-family: var(--pru-display); font-size: 1.5rem; color: var(--pru-ink); }
.pru-pair__role {
	margin: 0 0 .7rem;
	font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--pru-accent);
}
.pru-pair__bio  { margin: 0 0 .9rem; color: var(--pru-body); font-size: .95rem; }
.pru-pair__more {
	font-size: .82rem; font-weight: 600; color: var(--pru-accent); text-decoration: none;
}
.pru-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.
 */

.pru-burger {
	width: 44px;
	height: 44px;
	padding: 0;
	display: none;
	place-items: center;
	border-radius: 6px;
	border: 1px solid rgba(0, 27, 74, .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(--pru-ease), border-color .25s var(--pru-ease),
	            transform .18s var(--pru-ease);
}

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

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

.pru-burger__box { width: 18px; }
.pru-burger__box i { height: 1.5px; border-radius: 1px; }
.pru-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.
 */
.pru-home .pru-header:not(.is-solid) .pru-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))) {
	.pru-burger { background: rgba(255, 255, 255, .92); }
	.pru-home .pru-header:not(.is-solid) .pru-burger { background: rgba(0, 27, 74, .42); }
}

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

.pru-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(--pru-ease),
		visibility .3s var(--pru-ease),
		transform .42s cubic-bezier(.16, .84, .32, 1);
}

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

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

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

.pru-drawer.is-open .pru-drawer__nav .pru-nav__item,
.pru-drawer.is-open .pru-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. */
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(1) { transition-delay: .06s; }
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(2) { transition-delay: .115s; }
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(3) { transition-delay: .17s; }
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(4) { transition-delay: .225s; }
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(5) { transition-delay: .28s; }
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(6) { transition-delay: .335s; }
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(7) { transition-delay: .39s; }
.pru-drawer.is-open .pru-drawer__nav .pru-nav__item:nth-child(n+8) { transition-delay: .445s; }

.pru-drawer.is-open .pru-drawer__foot > *:nth-child(1) { transition-delay: .40s; }
.pru-drawer.is-open .pru-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. */
.pru-drawer:not(.is-open) .pru-drawer__nav .pru-nav__item,
.pru-drawer:not(.is-open) .pru-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) {
	.pru-drawer,
	.pru-drawer.is-open,
	.pru-drawer__nav .pru-nav__item,
	.pru-drawer__foot > * {
		transform: none;
		transition-duration: .01ms;
		transition-delay: 0s !important;
	}
	.pru-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 pru-locked, which the enquiry modal also sets --
 * that one opens over a dark scrim where the light logo is correct.
 */
body.pru-nav-open .pru-logo__img--light,
body.pru-nav-open.pru-home .pru-header:not(.is-solid) .pru-logo__img--light { opacity: 0; }

/* ============================================== the shore 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.
 */
.pru-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(--pru-brand) 0%,   var(--pru-brand) 25%,
		var(--pru-surf)  25%,  var(--pru-surf)  50%,
		var(--pru-coral) 50%,  var(--pru-coral) 75%,
		var(--pru-dune)  75%,  var(--pru-dune)  100%);
	box-shadow: inset 0 0 0 1px rgba(0, 27, 74, .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.
 */
.pru-btn--accent {
	background: linear-gradient(135deg, var(--pru-coral-dk) 0%, var(--pru-coral-br) 58%, var(--pru-coral) 100%);
	border-color: transparent;
	color: #fff;
}
.pru-btn--accent:hover {
	background: linear-gradient(135deg, var(--pru-coral-dk) 0%, var(--pru-coral-br) 58%, var(--pru-coral) 100%);
	filter: brightness(1.07);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(220, 28, 46, .55);
}

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

/* The stat band gets the full shore rule as its top edge, so the credentials
   strip reads as a ribbon rather than a grey band. */
.pru-creds { border-top: 3px solid transparent; border-image: linear-gradient(90deg,
		var(--pru-brand) 0%,   var(--pru-brand) 25%,
		var(--pru-surf)  25%,  var(--pru-surf)  50%,
		var(--pru-coral) 50%,  var(--pru-coral) 75%,
		var(--pru-dune)  75%,  var(--pru-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. */
.pru-eyebrow:not(.pru-eyebrow--light) { color: var(--pru-brand); }

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

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

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

/* The portrait frame follows the photograph rather than imposing a square on
   it — his headshot is 4:5 and a square crop takes off his hair and his arms. */
.pru-split__media--portrait { max-width: 24rem; margin-inline: auto; }

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

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

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

/* The brokerage mark in the footer. White artwork on the near-black ground it
   was recoloured for; capped so it sits under his own name rather than beside
   it, which is the way the relationship actually reads. */
.pru-foot__firmmark {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
	margin-top: 1.5rem;
	opacity: .92;
}

@media (max-width: 560px) { .pru-foot__firmmark { max-width: 180px; } }


/* ================================================ 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.
 */
.pru-hero__poster,
.pru-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

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

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

/*
 * At 900px and under the <picture> swaps in hero-mobile.jpg, a 3:4 crop with
 * the flag right of centre. A phone shows about two-thirds of its width, so it
 * is pulled right to keep the flag and the porch; a tablet shows the full width
 * and loses height instead, so it is pulled up to keep the top of the flag.
 */
@media (max-width: 900px) {
	.pru-hero__poster { object-position: 60% 30%; }
}

/* ==================================================== 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.
 */
.pru-callbar {
	position: fixed;
	right: clamp(.9rem, 2vw, 1.5rem);
	bottom: clamp(.9rem, 2vw, 1.5rem);
	z-index: 80;
}

.pru-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(0, 27, 74, .55), 0 2px 6px rgba(0, 27, 74, .16);
	text-decoration: none;
	overflow: hidden;
	transition: transform .22s var(--pru-ease), box-shadow .22s var(--pru-ease);
}
.pru-callbar__call:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(0, 27, 74, .6); }

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

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

.pru-callbar__txt { display: flex; flex-direction: column; line-height: 1.15; }
.pru-callbar__txt strong {
	font-family: var(--pru-display);
	font-size: .95rem;
	font-weight: 400;
	color: var(--pru-brand);
}
.pru-callbar__txt em {
	font-style: normal;
	font-size: .82rem;
	font-weight: 600;
	color: var(--pru-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.
	 */
	.pru-header__actions .pru-callnow { display: none; }
	.pru-header__inner { gap: .75rem; }

	/*
	 * Size the logo through the tokens, not with height:auto.
	 *
	 * The height is a calc that interpolates on --pru-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.
	 */
	:root { --pru-logo-max: 44px; --pru-logo-min: 30px; }
	.pru-logo--header .pru-logo__img { max-width: 52vw; }
}

/* ------------------------------------------- drawer: is-open, and only that --
 *
 * `.pru-nav__item:focus-within > .pru-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.
 */
.pru-drawer__nav .pru-nav__item:hover > .pru-nav__sub,
.pru-drawer__nav .pru-nav__item:focus-within > .pru-nav__sub {
	opacity: 0;
	max-height: 0;
	padding-bottom: 0;
}

.pru-drawer__nav .pru-nav__item.is-open > .pru-nav__sub,
.pru-drawer__nav .pru-nav__item.is-open:hover > .pru-nav__sub,
.pru-drawer__nav .pru-nav__item.is-open:focus-within > .pru-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 shore rule, carrying ink type.
 */
.pru-section--dark {
	background: linear-gradient(168deg, var(--pru-surf-pale) 0%, var(--pru-shell) 46%, var(--pru-sand) 100%);
	color: var(--pru-body);
	position: relative;
}
.pru-section--dark::before,
.pru-section--dark::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--pru-brand) 0%,   var(--pru-brand) 25%,
		var(--pru-surf)  25%,  var(--pru-surf)  50%,
		var(--pru-coral) 50%,  var(--pru-coral) 75%,
		var(--pru-dune)  75%,  var(--pru-dune)  100%);
}
.pru-section--dark::before { top: 0; }
.pru-section--dark::after  { bottom: 0; }

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

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

/* ======================================= the town grid carries the thesis ==
 *
 * The community grid, ordered by where the sales actually are. The eight-town
 * grid is where that is easiest to SHOW rather than state: the first four are
 * barrier islands and the last four are the mainland behind them, so the
 * islands are washed in surf aqua and the mainland in sand. Read the grid
 * and the split explains itself before the copy does.
 *
 * 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%.
 */
.pru-market:nth-child(-n+4) .pru-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--pru-surf-pale) 100%);
	border-color: #CCD8ED;
}
.pru-market:nth-child(n+5) .pru-market__link {
	background: linear-gradient(180deg, #FFFFFF 0%, #FCE8EA 100%);
	border-color: #F6C6CB;
}

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

.pru-market:nth-child(-n+4) .pru-market__link:hover { border-color: var(--pru-surf-dk); }
.pru-market:nth-child(n+5)  .pru-market__link:hover { border-color: var(--pru-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. */
.pru-market:nth-child(-n+4) .pru-market__shape svg * { fill: var(--pru-surf); opacity: .5; }
.pru-market:nth-child(n+5)  .pru-market__shape svg * { fill: var(--pru-sand-dp); opacity: .62; }

/* ------------------------------------------------- the closer, also light --
 *
 * Same call as .pru-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 — teal-tinted, edged
 * with the shore rule — so the eye still stops on it.
 */
.pru-closer {
	background: linear-gradient(168deg, var(--pru-surf-pale) 0%, var(--pru-shell) 52%, var(--pru-sand) 100%);
	color: var(--pru-body);
	border-top: 4px solid transparent;
	border-image: linear-gradient(90deg,
		var(--pru-brand) 0%,   var(--pru-brand) 25%,
		var(--pru-surf)  25%,  var(--pru-surf)  50%,
		var(--pru-coral) 50%,  var(--pru-coral) 75%,
		var(--pru-dune)  75%,  var(--pru-dune)  100%) 1;
}
.pru-closer::before {
	background: radial-gradient(circle, rgba(79, 134, 217, .16) 0%, transparent 62%);
}
.pru-closer__title { color: var(--pru-ink); }
.pru-closer__lede  { color: var(--pru-body); }
/* The eyebrow was teal-on-near-black and all but invisible. */
.pru-closer .pru-eyebrow { color: var(--pru-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.
 */
.pru-foot__h { color: rgba(255, 255, 255, .62); }
.pru-foot em { color: rgba(255, 255, 255, .72); font-style: normal; }

/* The floating call pill's number sat on --pru-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. */
.pru-callbar__txt em { color: var(--pru-coral-dk); }

/* The closer's secondary button was .pru-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. */
.pru-closer .pru-btn--ghost-light {
	border-color: var(--pru-brand);
	color: var(--pru-brand);
}
.pru-closer .pru-btn--ghost-light:hover {
	background: var(--pru-brand);
	border-color: var(--pru-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. */
.pru-foot__addr { text-wrap: balance; }

/* The licence line under an agent's name was --pru-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. */
.pru-member__license { color: var(--pru-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. */
.pru-split__media--team { max-width: none; width: 100%; }
.pru-figure--team {
	aspect-ratio: auto;
	margin: 0;
	padding: 1.5rem 1rem 0;
	border-radius: 16px;
	background: linear-gradient(180deg, var(--pru-shell) 0%, var(--pru-tint-2) 100%);
	overflow: hidden;
	position: relative;
}
.pru-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. */
.pru-split__media--scene { max-width: none; width: 100%; }
.pru-figure--scene {
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--pru-shadow-lg);
}
.pru-figure--scene img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Figures set large; word labels untouched. */
.pru-creds__label--num {
	font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--pru-brand);
}
.pru-creds__label--num + .pru-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(). */
.pru-split__media--square { max-width: 22rem; margin-inline: auto; }
.pru-split__media--square .pru-figure--square { border-radius: 16px; overflow: hidden; }
@media (max-width: 720px) { .pru-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.
 */
.pru-tone--brand { --tone: var(--pru-brand); --tone-pale: var(--pru-brand-pale); }
.pru-tone--coral { --tone: var(--pru-coral); --tone-pale: var(--pru-coral-pale); }
.pru-tone--surf  { --tone: var(--pru-surf-dk); --tone-pale: var(--pru-surf-pale); }
.pru-tone--dune  { --tone: var(--pru-dune-dk); --tone-pale: var(--pru-dune-pale); }

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

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

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

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

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

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

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

/* long reviews: the first 46 words, and the rest in place (never cut off) */
.pru-quote__more { margin-top: .75rem; background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--pru-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pru-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) {
	.pru-bento:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pru-bento:has(> :nth-child(4):last-child) .pru-bento__tile--wide { grid-column: auto; }
}

/* Headshots in square frames: Rick's source is 815x975, so a square frame is
   wider than it and has to crop top or bottom — bias it to keep the crown
   (memory: feedback_headshot_frames). */
.pru-figure--square img { object-position: center 18%; }

/* HUD official EHO artwork on the dark footer: white, like the words beside it. */
.pru-eho--official { width: auto; height: 34px; vertical-align: middle; filter: brightness(0) invert(1); opacity: .9; }

/* Filled number tiles carry small white type, so each gets a deep stop of its
   hue: RE/MAX's darker blue and a crimson, both well over 4.5:1 with white. */
.pru-bento__tile--big.pru-tone--surf { background: #1D4F9E; }
.pru-bento__tile--big.pru-tone--dune { background: #9B1B30; }

.pru-markets__credit { margin: 1.5rem 0 0; text-align: center; font-size: .74rem; color: var(--pru-muted); }
.pru-markets__credit a { color: inherit; text-decoration: underline; }

/* RE/MAX palette (2026-09-21): the second row of town cards takes the red side
   of the brand instead of the grey "sand" token, so the grid reads blue row,
   red row. */
.pru-market:nth-child(n+5) .pru-market__link::before { background: var(--pru-coral); }
.pru-market:nth-child(n+5) .pru-market__shape svg * { fill: var(--pru-coral); opacity: .42; }


/* ---------------------------------------------------------------------------
   Ken Burns hero (trap 58/65), ported from themes/nora-scheinberg. Frames hold
   at full opacity until 38% while the next fades in from 33.333%, so the sum
   never drops and the hero never flashes its background colour.
   ------------------------------------------------------------------------- */
.pru-kb { overflow: hidden; }

.pru-kb__frame {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	will-change: opacity, transform;
	animation: pru-kb var(--pru-kb-cycle, 27s) linear infinite;
}

/* A reduced-motion visitor, or a browser that never runs the animation, must
   still see the first photograph rather than three transparent pictures over
   the hero's background colour. */
.pru-kb__frame:first-child { opacity: 1; }

.pru-kb__frame img,
.pru-kb__frame .pru-hero__poster,
.pru-kb__frame .pru-kb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@keyframes pru-kb {
	0%       { opacity: 0; transform: scale(1);     }
	4%       { opacity: 1; transform: scale(1.011); }
	33.333%  { opacity: 1; transform: scale(1.09);  }
	38%      { opacity: 0; transform: scale(1.103); }
	100%     { opacity: 0; transform: scale(1.103); }
}

/* Trap 58: a media query that re-shows something hidden in a base rule has to
   say `display`. There is no display:none here for exactly that reason — the
   frames are positioned and animating at every width, and the <source> inside
   each <picture> is what swaps in the portrait crop under 900px. */

@media (prefers-reduced-motion: reduce) {
	/* !important: front-page.php sets animation-name inline, which beats any
	   stylesheet rule — without it reduced-motion visitors still get the loop. */
	.pru-kb__frame { animation: none !important; opacity: 0; transform: none; }
	.pru-kb__frame:first-child { opacity: 1; }
}


/* ---------------------------------------------------------------------------
   Call button: Paul's face in a white-and-red ring where the icon plate was,
   the phone as a small RE/MAX-blue badge (trap 59, from themes/monica-hudson).
   The source is a 192px square with headroom, so the 1:1 frame crops nothing.
   ------------------------------------------------------------------------- */
.pru-callbar__call { padding-left: .55rem; }
.pru-callbar__ico--face {
	position: relative;
	width: 3rem;
	height: 3rem;
	background: none;
}
.pru-callbar__face {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pru-coral);
}
.pru-callbar__badge {
	position: absolute;
	right: -3px;
	bottom: -3px;
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--pru-brand);
	color: #fff;
	box-shadow: 0 0 0 2px #fff;
}
.pru-callbar__badge svg { width: 11px; height: 11px; }
.pru-callbar__badge .pru-icon { color: #fff; }

/* ---------------------------------------------------------------------------
   Paul's fixes, last in the sheet so they win (trap 51).
   - Hero phone number: white, not the lifted blue. Over a bright photograph
     the accent is the lower-contrast choice (trap 24 amendment); the blue
     stays on the icon, where it is decoration.
   - The creed band's number never breaks mid-number on a phone.
   - Phone lockup at 72/46px and 64vw (trap 12 amendment). This lockup is
     2.2:1, so height is the real limiter; the inherited 44px left the
     RE/MAX Dallas Suburbs subline — the sponsoring broker TREC 535.155 asks
     for — about 6px tall.
   ------------------------------------------------------------------------- */
.pru-hero__phone strong { color: #fff; }
.pru-creed__call strong { white-space: nowrap; }
@media (max-width: 720px) {
	:root { --pru-logo-max: 72px; --pru-logo-min: 46px; }
	.pru-logo--header .pru-logo__img { max-width: 64vw; }
}

/* Phone hero scrim. On a phone the type runs full width, so the desktop's
   left-to-right band does nothing useful; this replaces all three layers
   with one vertical shape, dense where there is type (nav 0-9%, eyebrow to
   lede 17-52%, the call line 88-93%) and light across the search panel,
   which carries its own glass. Scored offline over all three phone frames
   at the real 390x1055 cover crop (tmp/paul-ruth/scrim-score.py, 2nd pct):
   nav 3.08, eyebrow 4.83, title 4.54, lede 4.66, call line 4.74 worst case.
   The inherited scrim measured 2.20:1 on the call line. Neutral, never
   tinted (feedback_hero_treatment). */
@media (max-width: 900px) {
	.pru-hero__scrim {
		background: linear-gradient(to bottom,
			rgba(16, 18, 22, .42) 0%,
			rgba(16, 18, 22, .34) 10%,
			rgba(16, 18, 22, .48) 17%,
			rgba(16, 18, 22, .48) 52%,
			rgba(16, 18, 22, .18) 60%,
			rgba(16, 18, 22, .18) 84%,
			rgba(16, 18, 22, .58) 88%,
			rgba(16, 18, 22, .58) 93%,
			rgba(16, 18, 22, .36) 100%);
	}
}

/* Trap 42: the transparent masthead over the Ken Burns loop scored 3.30-3.81:1
   on the nav across the three desktop frames (tmp/paul-ruth/scrim-desk.py).
   A neutral wash as a SECOND background layer, under the white that fades in
   with --pru-shrink, so the white occludes it as the bar turns solid and
   there is no second opacity to keep in sync. At .28 through the text row
   the worst frame measures 5.1:1+. It fades to nothing at the bar's bottom
   edge so it never reads as a band. */
.pru-home .pru-header__bar {
	background:
		linear-gradient(rgba(255, 255, 255, var(--pru-shrink)), rgba(255, 255, 255, var(--pru-shrink))),
		linear-gradient(to bottom, rgba(16, 18, 22, .30) 0%, rgba(16, 18, 22, .26) 72%, rgba(16, 18, 22, 0) 100%);
}
html:not(.js) .pru-home .pru-header__bar { background: #fff; }

/* Trap 33/60: --pru-faint is used ONLY as text here (via-platform line,
   breadcrumb, listing fact labels, placeholders, glyph) and measured 2.76-2.91:1.
   Darkened in place, same blue-gray hue, rather than rewriting eight rules. */
:root { --pru-faint: #5E6B83; }

/* Trap 66: the light eyebrow resolved to the lifted accent blue everywhere
   except the hero, so every inner banner's eyebrow measured 3.74-4.17:1 on
   its photograph while the home page passed. It only ever sits on a
   photograph on this site (hero + banners), so it is white with the hero's
   shadow everywhere, and the banner scrim deepens .62/.46/.30 -> .70/.56/.42. */
.pru-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);
}
.pru-banner__scrim {
	background:
		linear-gradient(to right, rgba(16, 18, 22, .70) 0%, rgba(16, 18, 22, .56) 55%, rgba(16, 18, 22, .42) 100%),
		linear-gradient(to bottom, rgba(16, 18, 22, .24) 0%, rgba(16, 18, 22, .12) 50%, rgba(16, 18, 22, .42) 100%);
}


/* Single-listing ask box: the Larry Mullinix standard, ported from
   themes/lashelle-washington (themes/CLAUDE.md, "The single property page"). */
.pru-listing__aside {
	position: sticky;
	top: calc(var(--pru-header-h) + 1.5rem);
	align-self: start;
}
.pru-askbox__actions {
	display: grid; gap: .65rem;
}
@media (max-width: 900px) {
	.pru-listing__aside { order: -1; position: static; }
}
/* Which house this enquiry is about, set by theme.js from the button. */
.pru-form__about {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	background: var(--pru-tint);
	border-radius: 8px;
	font-size: .93rem;
	color: var(--pru-ink);
}
.pru-form__about-label {
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pru-coral);
}

/* Trap 55: on a phone the side-sliding reveals push the page 8px wider than
   the screen until they fire, so it drags sideways as you scroll. Vertical
   there — the direction the reader is already going. */
@media (max-width: 900px) {
	html.js .pru-timeline .pru-timeline__item { transform: translateY(18px); }
	html.js .pru-splitfeat__panel[data-pru-reveal] { transform: translateY(18px); }
}

/* See the note at the end of theme.js: tucked on phones while the hero search shows. */
.pru-callbar { transition: opacity .3s ease, transform .3s ease; }
.pru-callbar.is-tucked { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* Per-frame shade for the two brightest hero photos (the white race car, the
   pale curving walk). It lives on the frame, so it fades with it and the other
   four photographs stay untouched. .18 brings the car's headline from 2.55 to
   3.56:1 and every phone band past 4.5 (tmp/paul-ruth/scrim-*.py). */
.pru-kb__frame::after { content: ""; position: absolute; inset: 0; background: rgba(16, 18, 22, var(--pru-shade, 0)); pointer-events: none; }


/* ---------------------------------------------------------------------------
   Paul Ruth Racing (templates/racing.php, parts/racing-band.php).
   Video cards ported from themes/david-weiss.
   ------------------------------------------------------------------------- */
.pru-video { position: relative; }
.pru-video.is-playing { aspect-ratio: 16 / 9; }
.pru-video__btn { position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--pru-tint-2);
	border: 1px solid var(--pru-line); }
.pru-video__still { width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--pru-ease); }
.pru-video__btn:hover .pru-video__still { transform: scale(1.04); }
.pru-video__play { position: absolute;
	inset: 0;
	margin: auto;
	width: 3.4rem;
	height: 3.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(10, 10, 10, .82);
	color: #fff;
	transition: background .25s var(--pru-ease), transform .25s var(--pru-ease); }
.pru-video__btn:hover .pru-video__play { background: var(--pru-brand); transform: scale(1.06); }
.pru-video__tag { position: absolute;
	left: .7rem;
	top: .7rem;
	padding: .3rem .6rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--pru-brand);
	color: #fff;
	border-radius: 2px; }
.pru-video__title { margin: .85rem 0 0;
	font-family: var(--pru-display);
	font-size: 1.12rem;
	line-height: 1.3;
	color: var(--pru-ink); }
.pru-video__note { margin: .3rem 0 0; font-size: .9rem; color: var(--pru-muted); }
.pru-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pru-racing__videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pru-racing__three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pru-racing__attrib { display: block; margin-top: .6rem; font-family: var(--pru-body-font); font-size: .85rem; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--pru-muted); }
.pru-racing__where { display: block; margin-bottom: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pru-coral-dk); }
.pru-racing__team { max-width: 46rem; text-align: center; }
.pru-racing__team .pru-rule { margin-left: auto; margin-right: auto; }
.pru-racing__links { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.pru-split__body .pru-btn + .pru-btn, .pru-prose + .pru-btn { margin-top: .5rem; }
@media (max-width: 900px) {
	.pru-racing__videos, .pru-racing__three { grid-template-columns: 1fr; }
}

/* Call/text consent box on every inquiry form (launch rule). From themes/mike-rex. */
.pru-field--consent { margin-top: .25rem; }
.pru-consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .78rem; line-height: 1.5; color: var(--pru-muted); cursor: pointer; }
.pru-consent input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--pru-brand); }
.pru-consent a { color: var(--pru-coral-dk); }


/* ---------------------------------------------------------------------------
   IDX suite (2026-10-06). The suite brings its own card, search and listing
   styles, colored from its design tokens; these are only the theme-side seams.
   ------------------------------------------------------------------------- */
.pru-idx-more { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 2rem 0 0; }
.pru-idx-grid { margin-top: 1.5rem; }
.pru-account { display: inline-flex; align-items: center; }
.pru-idx-account { max-width: 70rem; }
/* The sign-in control sits in the masthead beside Talk to Paul; on a phone it
   moves into the drawer (a link to /my-account/) so the bar keeps its logo. */
@media (max-width: 900px) { .pru-header__actions .pru-account { display: none; } }
/* The search is a full-height app: no closing band or footer under the map. */
body:has(.bbis-ps) .pru-closer { display: none; }

/* The suite's account bar in the masthead: one quiet "Login" link in the nav's
   own style, not a second red button beside Talk to Paul (sign-up is on the
   account page it opens). White over the home hero, ink once the bar is solid
   — its default pale blue measured unreadable on the photographs. */
.pru-account .bbis.bbis .bbis-acct-bar__cta { display: none; }
.pru-account .bbis.bbis .bbis-acct-bar__link,
.pru-account .bbis.bbis .bbis-acct-bar__faves,
.pru-account .bbis.bbis .bbis-acct-bar__btn {
	color: var(--pru-ink);
	font-family: var(--pru-display);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: 1;
}
.pru-home .pru-header:not(.is-solid) .pru-account .bbis.bbis .bbis-acct-bar__link,
.pru-home .pru-header:not(.is-solid) .pru-account .bbis.bbis .bbis-acct-bar__faves,
.pru-home .pru-header:not(.is-solid) .pru-account .bbis.bbis .bbis-acct-bar__btn {
	color: #fff;
	text-shadow: 0 1px 2px rgba(10, 12, 16, .55);
}

/* The MLS credit line, directly under the footer and in its colors. */
.pru-mlsnote { background: var(--pru-deep-dk); border-top: 1px solid rgba(255, 255, 255, .12); padding: 1rem 0 5.5rem; color: rgba(255, 255, 255, .72); font-size: .75rem; line-height: 1.6; }
.pru-mlsnote p { margin: 0 0 .35rem; }
.pru-mlsnote a { color: inherit; text-decoration: underline; }
.pru-mlsnote img { max-height: 28px; width: auto; background: #fff; border-radius: 4px; padding: 3px 5px; vertical-align: middle; margin: 0 8px 4px 0; }


/* ---------------------------------------------------------------------------
   The hero search bar (parts/hero-omnibar.php) — glass capsule + glass chips.

   The glass carries a light smoke, not clear white: the hero cycles six
   photographs and one is a white race car, where clear frosted glass plus
   white type washes out. Measured over every frame after this shipped.
   ------------------------------------------------------------------------- */
.pru-omni { max-width: 46rem; margin: 0 0 1.4rem; }
.pru-omni__bar,
.pru-omni__chip > span {
	background: rgba(14, 22, 40, .34);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, .5);
	box-shadow: 0 10px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
	color: #fff;
}
.pru-omni__bar {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .5rem .5rem .5rem 1.5rem;
	border-radius: 999px;
	transition: border-color .2s ease, background .2s ease;
}
.pru-omni__bar:focus-within { border-color: #fff; background: rgba(14, 22, 40, .46); }
.pru-omni__bar .pru-icon { color: #fff; flex: none; width: 1.25rem; height: 1.25rem; }
.pru-omni__bar input[type="text"] {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	color: #fff;
	font: inherit;
	font-size: 1.15rem;
	padding: .7rem 0;
}
.pru-omni__bar input[type="text"]::placeholder { color: rgba(255, 255, 255, .92); opacity: 1; }
.pru-omni__go {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.pru-omni__go:hover, .pru-omni__go:focus-visible { background: var(--pru-coral); transform: translateX(2px); }
.pru-omni__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.pru-omni__chip { cursor: pointer; text-decoration: none; }
.pru-omni__chip input { position: absolute; opacity: 0; pointer-events: none; }
.pru-omni__chip > span {
	display: inline-block;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: background .2s ease, border-color .2s ease;
}
.pru-omni__chip:hover > span { background: rgba(14, 22, 40, .5); border-color: #fff; }
/* The selected search type is the red one: Homes for sale on arrival. */
.pru-omni__chip input:checked + span { background: rgba(220, 28, 46, .92); border-color: rgba(255, 255, 255, .7); }
.pru-omni__chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 900px) {
	.pru-omni__bar { padding-left: 1.1rem; gap: .6rem; }
	.pru-omni__bar input[type="text"] { font-size: 1rem; }
	.pru-omni__go { width: 2.7rem; height: 2.7rem; }
	.pru-omni__chips { gap: .45rem; }
	.pru-omni__chip > span { padding: .5rem .85rem; font-size: .84rem; }
}

/* Simple hero (2026-10-06): headline, search bar, chips. Exactly one screen
   tall, counting the utility bar above it where that bar shows. */
.pru-hero--simple {
	min-height: 0;
	height: calc(100vh - 2.5rem);
	height: calc(100svh - 2.5rem);
	padding-block: 0;
}
.pru-hero--simple .pru-hero__inner { padding-bottom: 3rem; }
.pru-hero--simple .pru-hero__title { margin: 0 0 1.6rem; }
@media (max-width: 1040px) {
	.pru-hero--simple { height: 100vh; height: 100svh; }
}