/*
 * Advantage Premier Realty.
 *
 * Light theme, drawn from the logo: a deep navy, a metallic gold, and the pale
 * sky blue that appears in one of the two roofs. On white, with a very slightly
 * cool tint for alternating bands.
 *
 * The inversion from legacy-peak is worth stating, because most of the rules
 * here are the mirror of that theme's. There the page was near-black and the
 * problem was keeping photographs from punching holes in it. Here the page is
 * white and the problem is the opposite: navy and gold are both dark and
 * saturated, so they have to be rationed or the page turns into a brochure from
 * 2006. Navy carries structure — header, footer, two full-bleed bands. Gold is
 * an accent only: rules, numerals, the primary button. Body text is a soft
 * near-black, never pure #000.
 */

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

:root {
	/* Sampled from the logo rather than guessed. The navy is far deeper and more
	   saturated than a generic "brand blue", and the metal is amber — every gold
	   pixel in the lockup sits at hue 37-42, which is orange. An earlier pass had
	   it at a pale yellow and it read as a different company. */
	--ap-navy:       #043568;
	--ap-navy-dk:    #022444;
	--ap-navy-lt:    #0A5199;
	--ap-sky:        #A9CDE9;

	/* Three weights of the same amber. The deep one exists because the mid tone
	   only reaches 3.8:1 on white — fine for a heading, short of AA for the small
	   uppercase eyebrows, which is where accent colour actually gets used. */
	--ap-gold:       #A6650A;
	--ap-gold-mid:   #C07E08;
	--ap-gold-lt:    #E9A814;
	--ap-gold-metal: linear-gradient(135deg, #B97506 0%, #E9A814 55%, #D8980A 100%);

	--ap-ink:        #16223A;
	--ap-body:       #4C5768;
	--ap-muted:      #6B7686;
	--ap-faint:      #939CAA;

	--ap-white:      #FFFFFF;
	--ap-tint:       #F5F8FC;
	--ap-tint-2:     #EDF2F8;
	--ap-line:       #E1E8F0;
	--ap-line-soft:  #EEF2F7;

	--ap-display:    'Montserrat', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
	--ap-body-font:  'Poppins', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

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

	/* Header interpolates between these as --ap-shrink runs 0 → 1. */
	--ap-header-h:   128px;
	--ap-bar-max:    128px;
	--ap-bar-min:    76px;
	--ap-logo-max:   92px;
	--ap-logo-min:   56px;
	--ap-shrink:     0;

	--ap-ease:       cubic-bezier(.22, .61, .36, 1);
	--ap-shadow:     0 1px 2px rgba(22, 34, 58, .04), 0 8px 24px -12px rgba(22, 34, 58, .12);
	--ap-shadow-lg:  0 2px 4px rgba(22, 34, 58, .05), 0 20px 48px -20px rgba(22, 34, 58, .2);
}

@media (max-width: 1040px) {
	:root {
		--ap-header-h: 96px;
		--ap-bar-max:  96px;
		--ap-bar-min:  62px;
		--ap-logo-max: 68px;
		--ap-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(--ap-white);
	color: var(--ap-body);
	font-family: var(--ap-body-font);
	font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.apr-locked { overflow: hidden; }

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

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

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

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

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

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

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

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

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

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

.apr-section--navy h1,
.apr-section--navy h2,
.apr-section--navy h3 { color: #fff; }

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

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

.apr-eyebrow--light { color: var(--ap-gold-lt); }

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

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

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

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

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

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

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

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

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

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

.apr-btn:hover {
	background: var(--ap-navy-dk);
	border-color: var(--ap-navy-dk);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px rgba(23, 55, 107, .5);
}
.apr-btn:active { transform: translateY(0); }

/* Gold is the primary call to action. Dark ink on gold rather than white —
   white on this gold fails contrast badly. */
.apr-btn--gold {
	background: var(--ap-gold-metal);
	border-color: transparent;
	color: #26200A;
}
.apr-btn--gold:hover {
	background: var(--ap-gold-metal);
	filter: brightness(1.06);
	color: #26200A;
	box-shadow: 0 12px 26px -12px rgba(185, 117, 6, .55);
}

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

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

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

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

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

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

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

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

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

.apr-icon { flex-shrink: 0; color: var(--ap-gold-lt); transition: color .2s var(--ap-ease); }
.apr-utility__list a:hover .apr-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. */
	.apr-utility { display: none; }
}

/* --------------------------------------------------------------- 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. */
.apr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--ap-header-h);
	pointer-events: none;
}

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

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

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

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

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

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

.apr-logo__name {
	font-family: var(--ap-display);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ap-navy);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.apr-drawer__foot { display: flex; flex-direction: column; gap: 1rem; }
.apr-drawer__call {
	font-family: var(--ap-display);
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	color: var(--ap-navy);
}

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

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

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

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

.apr-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(23, 55, 107, .03) 12px 24px),
		var(--ap-tint-2);
}

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

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

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

.apr-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 pushes the sunset further, so the warmth
 * is strongest where the eye is free to enjoy it. */
.apr-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 88% 24%, rgba(233, 168, 20, .1) 0%, transparent 55%),
		linear-gradient(to right, rgba(24, 19, 14, .88) 0%, rgba(24, 19, 14, .62) 46%, rgba(24, 19, 14, .18) 78%, rgba(24, 19, 14, .36) 100%),
		linear-gradient(to bottom, rgba(20, 16, 12, .44) 0%, rgba(20, 16, 12, .05) 42%, rgba(20, 16, 12, .58) 100%);
}

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

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

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

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

.apr-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(--ap-navy-dk);
}

.apr-banner__media { position: absolute; inset: 0; z-index: 0; }
.apr-banner__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(10, 26, 55, .9) 0%, rgba(10, 26, 55, .7) 55%, rgba(10, 26, 55, .5) 100%),
		linear-gradient(to bottom, rgba(10, 26, 55, .45) 0%, rgba(10, 26, 55, .3) 50%, rgba(10, 26, 55, .65) 100%);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* A sold listing should not look like an available one. */
.apr-status--sold,
.apr-status--closed { background: var(--ap-ink); }
.apr-status--pending,
.apr-status--under-contract { background: var(--ap-gold); color: #26200A; }
.apr-status--coming-soon { background: var(--ap-navy-lt); }

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

.apr-card__price {
	margin-bottom: .35rem;
	font-family: var(--ap-display);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ap-navy);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.apr-member__photo { position: relative; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.apr-field input:focus,
.apr-field select:focus,
.apr-field textarea:focus {
	border-color: var(--ap-navy-lt);
	box-shadow: 0 0 0 3px rgba(42, 84, 152, .12);
	outline: none;
}

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

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

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

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

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

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

.apr-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(15, 37, 73, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

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

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

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

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

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

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

.apr-closer::before {
	content: '';
	position: absolute;
	top: -45%; left: 50%;
	width: 44rem; height: 44rem;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(233, 168, 20, .16) 0%, transparent 62%);
	pointer-events: none;
}

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

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

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

.apr-backlink { margin-top: 2.5rem; font-family: var(--ap-display); font-weight: 700; }

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

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

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

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

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

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

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

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

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

/* 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. */
.apr-drawer__nav .apr-nav__list { width: 100%; gap: 0; }

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

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

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

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

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

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

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

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

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

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

.apr-creds__label {
	display: block;
	font-family: var(--ap-display);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ap-navy);
}
.apr-creds__note {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--ap-muted);
}

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

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

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

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

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

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

.apr-creed__quote { margin: 0; }

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

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

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

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

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

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

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

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

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

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

/* Pillars sit on navy by default; this is the variant for a light band. */
.apr-pillars--light .apr-pillar {
	background: #fff;
	border-color: var(--ap-line);
}
.apr-pillars--light .apr-pillar__title { color: var(--ap-ink); }
.apr-pillars--light .apr-pillar__body { color: var(--ap-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. */

.apr-foot { background: #fff; color: var(--ap-body); border-top: 1px solid var(--ap-line); }

.apr-foot__in {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 5vw, 80px);
	padding-block: clamp(44px, 6vw, 68px);
}

.apr-foot__brand { flex: 1 1 320px; }
.apr-foot__col { flex: 0 1 210px; }

.apr-foot__brand .apr-logo { margin-bottom: 1rem; }
.apr-foot__brand .apr-logo__img { height: 96px; }

.apr-foot__name { margin: 0; font-family: var(--ap-display); font-size: 1.15rem; font-weight: 700; color: var(--ap-ink); }
.apr-foot__firm {
	margin: 2px 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ap-gold);
}
.apr-foot__blurb { margin: 0; max-width: 42ch; color: var(--ap-muted); font-size: .95rem; }

.apr-foot__h {
	margin: 0 0 14px;
	font-family: var(--ap-display);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ap-navy);
}

.apr-foot__menu { list-style: none; margin: 0; padding: 0; }
.apr-foot__menu a,
.apr-foot__link {
	display: block;
	padding: 5px 0;
	color: var(--ap-body);
	text-decoration: none;
	font-size: .95rem;
}
.apr-foot__menu a:hover,
.apr-foot__link:hover { color: var(--ap-navy); text-decoration: underline; }

.apr-foot__addr { margin: 12px 0 0; color: var(--ap-muted); font-size: .9rem; }
.apr-foot__social { margin: 14px 0 0; font-size: .9rem; }
.apr-foot__social a { color: var(--ap-navy-lt); }

.apr-foot__legal { border-top: 1px solid var(--ap-line); background: var(--ap-tint); }
.apr-foot__legal-in { padding-block: 22px; font-size: .78rem; color: var(--ap-muted); line-height: 1.6; }
.apr-foot__legal-in p { margin: 0 0 6px; }
.apr-foot__legal-in a { color: var(--ap-navy-lt); }

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

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

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

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

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

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

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

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

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

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

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

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

.apr-search__field input:focus,
.apr-search__field select:focus {
	border-color: var(--ap-navy-lt);
	box-shadow: 0 0 0 3px rgba(10, 81, 153, .12);
	outline: none;
}

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

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

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

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

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

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

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

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

.apr-slider__track {
	display: grid;
	grid-auto-flow: column;
	/* Likewise a floor that is not zero, so the track overflows. */
	grid-auto-columns: min(84vw, 21rem);
	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;
}

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

.apr-slider__slide { scroll-snap-align: start; min-width: 0; }
.apr-slider__slide .apr-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. */
	.apr-slider__track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}

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

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

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

.apr-filter.is-on {
	background: var(--ap-navy);
	border-color: var(--ap-navy);
	color: #fff;
}

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

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

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

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

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

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

/* ------------------------------------------------------- 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. */
.apr-callnow { display: none; }

@media (max-width: 1040px) {
	.apr-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(--ap-gold-lt);
		background-image: none;
		border-color: var(--ap-gold-lt);
		color: var(--ap-navy);
		/* 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;
	}

	.apr-callnow:hover {
		background: var(--ap-gold-mid);
		background-image: none;
		border-color: var(--ap-gold-mid);
		color: var(--ap-navy);
		box-shadow: none;
	}

	/* The brand navy, so it picks up the logo sitting beside it. */
	.apr-callnow .apr-icon { color: var(--ap-navy); 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. */
	.apr-callnow span { display: none; }
	.apr-callnow { padding: 0; width: 44px; height: 44px; }
}

.apr-hero__phone strong { color: var(--ap-gold-lt); font-weight: 700; white-space: nowrap; }

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

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

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

/* ------------------------------------------------------- listing address plate --
   Stands in for the listing photo. See apr_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. */
.apr-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, #0b2650 0%, var(--ap-navy) 55%, #05306a 100%);
}

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

.apr-plate__rule {
	width: 42px;
	height: 2px;
	background: var(--ap-gold);
}

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

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