/* ============================================================
   Plush Homes Company - Realtors
   White leads, black carries the contrast, gold stays an accent.
   Type: Cormorant Garamond (display) + Jost (text), from Google Fonts.
   ============================================================ */

:root {
	--ink: #141414;
	--ink-soft: #565656;
	--muted: #8a8a8a;
	--paper: #ffffff;
	--stone: #f7f5f1;
	--line: #e6e2dc;
	--black: #0f0f0f;
	--gold: #B88138;
	--gold-dark: #96682a;
	--gold-soft: #efe4d0;
	--gold-bright: #dcb266; /* gold for type on dark photos; the brand gold sinks into amber city light */
	--nav-h: 78px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: var(--ink);
	background: var(--paper);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
	line-height: 1.15;
	color: var(--ink);
	letter-spacing: 0.005em;
}
strong { font-weight: 500; }
a { color: inherit; text-decoration: none; }
/* height: auto so width/height attributes (kept for layout stability) never pin a height once CSS sizes the box */
img, video { max-width: 100%; height: auto; display: block; }
section { scroll-margin-top: var(--nav-h); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 840px; margin: 0 auto; padding: 0 28px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.notranslate { }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 16px 34px;
	background: var(--black); color: #fff;
	font-family: 'Jost', sans-serif;
	font-size: 12px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
	border: 1px solid var(--black); cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-1px); }
.btn i { font-size: 11px; transition: transform 0.25s; }
.btn:hover i { transform: translateX(3px); }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.75); }
.btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Quiet text link with a gold hairline that draws on hover */
.link-line {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--ink); padding-bottom: 4px; position: relative;
}
.link-line::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
	background: var(--line); transition: background 0.25s;
}
.link-line:hover::after { background: var(--gold); }
.link-line i { font-size: 10px; color: var(--gold); transition: transform 0.25s; }
.link-line:hover i { transform: translateX(3px); }

/* ---------- Section heads ---------- */
.eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	font-size: 11px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase;
	color: var(--gold); margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
.head-center { text-align: center; margin-bottom: 64px; }
.head-center .eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--gold); }
.section-title { font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 22px; }
.section-lead { color: var(--ink-soft); max-width: 640px; font-size: 17px; }
.head-center .section-lead { margin: 0 auto; }
.section-pad { padding: 128px 0; position: relative; }
.section-pad-sm { padding: 88px 0; position: relative; }
.bg-stone { background: var(--stone); }
.bg-black { background: var(--black); color: rgba(255,255,255,0.82); }
.bg-black h1, .bg-black h2, .bg-black h3 { color: #fff; }
.bg-black .section-lead { color: rgba(255,255,255,0.72); }
.bg-black .eyebrow { color: var(--gold); }
.hairline { height: 1px; background: var(--line); }

/* ---------- Navigation ---------- */
.nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: rgba(255,255,255,0.97);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, box-shadow 0.3s;
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px rgba(20,20,20,0.05); }
.nav-inner {
	height: var(--nav-h);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 0 36px;
}
.nav-logo { flex-shrink: 0; display: block; }
.nav-logo img { height: 46px; width: auto; }
.nav-menu {
	display: flex; gap: 30px; list-style: none;
	font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 500;
}
.nav-menu > li { white-space: nowrap; }
.nav-menu a {
	display: inline-block; position: relative; padding: 6px 0;
	color: var(--ink); transition: color 0.2s;
}
.nav-menu a::after {
	content: ''; position: absolute; left: 0; bottom: 0;
	width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease;
}
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }
.nav-menu a.active { color: var(--gold-dark); }
.nav-menu .mobile-only { display: none; }
.nav-side { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.nav-contact {
	font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 500;
	padding: 10px 20px; border: 1px solid var(--ink); color: var(--ink);
	transition: background 0.25s, color 0.25s; white-space: nowrap;
}
.nav-contact:hover { background: var(--ink); color: #fff; }
.nav-login {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 400;
	color: var(--muted); white-space: nowrap; transition: color 0.2s;
}
.nav-login i { font-size: 10px; }
.nav-login:hover { color: var(--gold-dark); }
.nav-toggle {
	display: none; background: none; border: none; cursor: pointer;
	width: 40px; height: 40px; color: var(--ink); font-size: 20px;
}

/* ---------- Home hero: full frame, centered ----------
   A dark photograph of the city (black sky, gold light) carries white type
   and the gold monogram, the composition Monica chose for her own site. */
.hero {
	position: relative; height: 100vh; min-height: 620px; max-height: 1000px;
	overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: var(--black); color: #fff; text-align: center;
}
.hero > picture { display: contents; }
.hero-bg, .hero-video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-bg { animation: heroDrift 28s ease-out forwards; }
@keyframes heroDrift { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } }
.hero-video { opacity: 0; transition: opacity 1.6s ease; }
.hero-video.playing { opacity: 1; }
.hero.has-video .hero-bg { animation: none; }
/* Cinematic darkening. The night picture needs only a whisper; the daytime
   aerial (variant "aerial") gets the deeper treatment her old site used. */
.hero::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.14) 45%, rgba(0,0,0,0.42) 100%);
}
.hero.variant-aerial::after {
	background: linear-gradient(180deg, rgba(8,8,8,0.62) 0%, rgba(8,8,8,0.52) 50%, rgba(8,8,8,0.68) 100%);
}
.hero-content {
	position: relative; z-index: 2; width: 100%;
	padding: calc(var(--nav-h) + 24px) 28px 60px;
	display: flex; flex-direction: column; align-items: center;
	transform: translateY(-5vh);
}
/* A soft pool of shadow behind the words only; the picture stays as shot */
.hero-content::before {
	content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
	width: min(1100px, 120vw); height: 110%; transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.42) 40%, rgba(0,0,0,0) 70%);
	pointer-events: none;
}
.hero-mark { width: 74px; height: 74px; margin-bottom: 34px; opacity: 0.95; }
.hero-kicker {
	display: inline-flex; align-items: center; gap: 14px;
	font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 500;
	color: var(--gold-bright); margin-bottom: 26px;
	text-shadow: 0 1px 12px rgba(0,0,0,0.85);
}
.hero-kicker::before, .hero-kicker::after { content: ''; width: 34px; height: 1px; background: var(--gold-bright); }
.hero-kicker .dot { color: var(--gold-bright); }
.hero h1 {
	color: #fff; font-size: clamp(44px, 6.4vw, 92px); font-weight: 400;
	line-height: 1.02; max-width: 16ch; margin: 0 auto 26px;
	text-shadow: 0 2px 26px rgba(0,0,0,0.5);
}
.hero h1 em { font-style: italic; color: var(--gold-bright); }
.hero-sub { font-size: 18px; font-weight: 300; max-width: 560px; margin: 0 auto 44px; color: rgba(255,255,255,0.86); }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-scroll {
	position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2;
	color: rgba(255,255,255,0.7); font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero-scroll::after { content: ''; width: 1px; height: 44px; background: rgba(255,255,255,0.45); }
.hero-scroll:hover { color: var(--gold); }

/* ---------- Interior page hero ---------- */
.page-hero {
	position: relative; overflow: hidden; color: #fff;
	min-height: 440px; height: 56vh; max-height: 640px;
	display: flex; align-items: flex-end;
	margin-top: var(--nav-h);
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.58) 100%);
}
.page-hero .container { position: relative; z-index: 2; padding-bottom: 64px; }
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero .eyebrow::before { background: var(--gold); }
.page-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 66px); font-weight: 400; margin-bottom: 14px; max-width: 18ch; }
.page-hero p { font-size: 18px; max-width: 560px; color: rgba(255,255,255,0.88); }
/* Text-only variant for pages without artwork */
.page-hero.plain { background: var(--stone); color: var(--ink); min-height: 0; height: auto; max-height: none; }
.page-hero.plain::after { display: none; }
.page-hero.plain .container { padding: 96px 28px 64px; }
.page-hero.plain h1 { color: var(--ink); }
.page-hero.plain p { color: var(--ink-soft); }
.page-hero.plain .eyebrow { color: var(--gold); }

/* ---------- Pathways (home: what do you need?) ----------
   Six doors, each with a photograph that is black and white until hovered,
   the same move as the agent portraits, so the two read as one idea. */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.path { position: relative; display: block; background: var(--paper); }
.path-media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone); }
.path-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: grayscale(1); transition: filter .5s ease, transform .8s ease;
}
.path:hover .path-media img, .path:focus-visible .path-media img { filter: none; transform: scale(1.04); }
/* gold hairline that draws across the bottom of the photo on hover */
.path-media::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
	background: var(--gold); transition: width .5s ease;
}
.path:hover .path-media::after { width: 100%; }
.path-body { display: block; padding: 26px 4px 8px; }
.path .num { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; display: block; }
.path h3 { font-size: 27px; margin-bottom: 8px; }
.path p { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; max-width: 32ch; }
.path .go {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 500;
}
.path .go i { color: var(--gold); font-size: 10px; transition: transform 0.25s; }
.path:hover .go i { transform: translateX(4px); }

/* ---------- Statement / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.statement { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.25; font-weight: 400; margin-bottom: 28px; }
.statement em { font-style: italic; color: var(--gold-dark); }
.prose p { color: var(--ink-soft); margin-bottom: 18px; font-size: 16.5px; }
.prose p:last-child { margin-bottom: 0; }
/* Photo with the offset gold hairline, the site's one decorative flourish */
.frame { position: relative; }
.frame img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.frame.wide img { aspect-ratio: 4 / 3; }
.frame::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	border: 1px solid var(--gold); transform: translate(18px, 18px); pointer-events: none;
}

/* ---------- Facts row ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.fact .num { font-family: 'Cormorant Garamond', serif; font-size: 44px; line-height: 1; color: var(--ink); }
.fact .num small { font-size: 22px; color: var(--gold); margin-left: 2px; }
.fact .lbl { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin-top: 10px; font-weight: 500; }

/* ---------- Service points ---------- */
.points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.points-3 { grid-template-columns: repeat(3, 1fr); }
.point { padding-top: 22px; border-top: 1px solid var(--line); }
.point .ico { color: var(--gold); font-size: 18px; margin-bottom: 16px; }
.point h3 { font-size: 24px; margin-bottom: 8px; }
.point p { font-size: 15px; color: var(--ink-soft); }
.checks { list-style: none; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink-soft); font-size: 16px; }
.checks li::before {
	content: ''; position: absolute; left: 0; top: 12px; width: 16px; height: 1px; background: var(--gold);
}

/* ---------- Areas ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 12px; }
.area {
	padding: 12px 22px; border: 1px solid var(--line); font-size: 14px; letter-spacing: 0.5px;
	color: var(--ink); background: #fff; transition: border-color 0.25s, color 0.25s;
}
.area:hover { border-color: var(--gold); color: var(--gold-dark); }
.area.primary { border-color: var(--ink); }

/* ---------- Widget wraps ---------- */
.widget-wrap { position: relative; }
.search-wrap { padding: 40px; background: var(--stone); }
.listings-wrap { padding: 28px; background: #fff; border: 1px solid var(--line); }
.widget-empty {
	padding: 40px; border: 1px dashed var(--line); text-align: center; color: var(--ink-soft); font-size: 15px;
}

/* ---------- Quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.quote { padding-top: 26px; border-top: 1px solid var(--line); }
.quote .stars { color: var(--gold); font-size: 11px; letter-spacing: 3px; margin-bottom: 18px; }
.quote p { font-family: 'Cormorant Garamond', serif; font-size: 23px; line-height: 1.4; color: var(--ink); margin-bottom: 22px; }
.quote .who { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; }
.quote .who small { display: block; color: var(--muted); font-weight: 400; letter-spacing: 1.5px; font-size: 11px; margin-top: 4px; }

/* ---------- Awards ---------- */
.awards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.award { display: flex; gap: 22px; align-items: flex-start; padding: 30px; border: 1px solid var(--line); background: #fff; }
.award i { color: var(--gold); font-size: 22px; margin-top: 4px; }
.award h3 { font-size: 22px; margin-bottom: 4px; }
.award p { font-size: 14px; color: var(--ink-soft); }

/* ---------- Broker ---------- */
.broker-grid { display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: center; }
.broker-grid .frame { max-width: 340px; }
.broker-grid .frame img { aspect-ratio: 1 / 1; }
.sig { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 30px; color: var(--ink); margin-top: 26px; }
.sig small { display: block; font-family: 'Jost', sans-serif; font-style: normal; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin-top: 4px; font-weight: 500; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.contact-form input, .contact-form select, .contact-form textarea {
	width: 100%; padding: 14px 0; border: none; border-bottom: 1px solid var(--line);
	background: transparent; font-family: inherit; font-size: 16px; font-weight: 300; color: var(--ink);
	border-radius: 0; transition: border-color 0.25s;
}
.contact-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--gold); }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .btn { justify-self: start; margin-top: 10px; }
.contact-note { font-size: 12px; color: var(--muted); margin-top: 16px; }
.contact-banner { grid-column: 1 / -1; padding: 16px 20px; font-size: 15px; border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.contact-banner.ok { border-color: var(--gold); color: var(--ink); }
.contact-banner.ok i { color: var(--gold); }
.contact-banner.bad { border-color: #c9332f; color: #9b1f1c; }
.contact-card { padding-top: 6px; }
.contact-card h3 { font-size: 30px; margin-bottom: 26px; }
.contact-card ul { list-style: none; }
.contact-card li { display: flex; gap: 18px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink-soft); }
.contact-card li:last-child { border-bottom: 1px solid var(--line); }
.contact-card li i { color: var(--gold); width: 16px; text-align: center; margin-top: 6px; font-size: 14px; }
.contact-card li a:hover { color: var(--gold-dark); }
.contact-card .lbl { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.socials { display: flex; gap: 10px; margin-top: 26px; }
.socials a {
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); color: var(--ink); font-size: 14px; transition: all 0.25s;
}
.socials a:hover { border-color: var(--gold); color: var(--gold-dark); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(32px, 4vw, 50px); margin-bottom: 18px; }
.cta-band p { max-width: 560px; margin: 0 auto 34px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
footer { background: var(--black); color: rgba(255,255,255,0.7); padding: 84px 0 34px; font-size: 14.5px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 56px; margin-bottom: 64px; }
.footer-top img.flogo { height: 54px; width: auto; margin-bottom: 22px; }
.footer-top p { max-width: 320px; }
.footer-top h4 {
	color: #fff; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 3px;
	text-transform: uppercase; margin-bottom: 22px; font-weight: 500;
}
.footer-top ul { list-style: none; }
.footer-top li { margin-bottom: 11px; }
.footer-top a { transition: color 0.2s; }
.footer-top a:hover { color: var(--gold); }
.footer-top .addr li { display: flex; gap: 12px; align-items: flex-start; }
.footer-top .addr i { color: var(--gold); width: 14px; text-align: center; margin-top: 6px; font-size: 12px; }
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.12); padding-top: 28px;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px;
	font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.footer-bottom .fair { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer-bottom .fair span { display: inline-flex; align-items: center; gap: 8px; }
.footer-bottom .fair i { color: var(--gold); }
.footer-powered { display: inline-flex; align-items: center; gap: 8px; }
.footer-powered a { color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.2); }
.footer-powered a:hover { color: #fff; }

/* ---------- Interstitial (login moved) ---------- */
.moved { max-width: 560px; margin: 0 auto; padding: 100px 24px; text-align: center; }
.moved > img { height: 56px; margin: 0 auto 44px; }
.moved h1 { font-size: 40px; margin-bottom: 18px; }
.moved p { color: var(--ink-soft); margin-bottom: 14px; }
.moved .note { font-size: 13px; color: var(--muted); margin-top: 26px; }

/* ============================================================
   BrokerChamp widgets
   The widget JS injects its own stylesheet at runtime, after site.css, so the
   [data-bc-widget] mount is in every selector to out-rank its single-class rules.
   ============================================================ */
[data-bc-widget] { max-width: 1200px; margin: 0 auto; }

/* Black-and-white portraits that come to life on hover. The widget's own
   grayscale rule only sets the filter and its hover-zoom transition lists only
   transform, so this rule owns both properties. */
[data-bc-widget].bcw-widget[data-bcw-grayscale-images="true"] .bcw-card-media img {
	transition: filter .35s ease, transform .45s ease;
}
[data-bc-widget].bcw-widget[data-bcw-grayscale-images="true"] .bcw-card:hover .bcw-card-media img,
[data-bc-widget].bcw-widget[data-bcw-grayscale-images="true"] .bcw-card:focus-visible .bcw-card-media img {
	filter: none;
}
/* Square corners and a stone backdrop; the rounded default reads as an app, not a boutique */
[data-bc-widget].bcw-widget[data-bcw-theme] .bcw-card-media { border-radius: 0; background: var(--stone); }
[data-bc-widget] .bcw-card-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--ink); }
[data-bc-widget] .bcw-card-meta { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 500; }
/* No-photo agent tiles: stone tile, initials in a gold ring */
[data-bc-widget] .bcw-card-avatar {
	background: var(--stone); color: var(--gold-dark); overflow: hidden;
}
[data-bc-widget] .bcw-card-avatar span {
	position: relative; width: 84px; height: 84px;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 28px; letter-spacing: 1px;
	border: 1px solid var(--gold); border-radius: 50%; background: rgba(255,255,255,0.7);
}
/* Carousel shell stays transparent on the white page */
[data-bc-widget] .bcw-carousel-shell, [data-bc-widget] .bcw-marquee-shell { background: transparent; }
/* Forms: black buttons, gold focus, square corners */
[data-bc-widget] .bcw-idx-gate,
[data-bc-widget] .bcw-loan,
[data-bc-widget] .bcw-careers { margin-left: auto; margin-right: auto; }
.search-wrap [data-bc-widget] .bcw-idx-gate { background: #fff; border-radius: 0; }
[data-bc-widget] .bcw-idx-gate-btn,
[data-bc-widget] .bcw-cma-btn,
[data-bc-widget] .bcw-loan-btn,
[data-bc-widget] .bcw-careers-btn {
	background-color: var(--black); border-radius: 0;
	letter-spacing: 2px; text-transform: uppercase; font-size: 12px;
}
[data-bc-widget] .bcw-idx-gate-btn:hover, [data-bc-widget] .bcw-idx-gate-btn:focus,
[data-bc-widget] .bcw-cma-btn:hover, [data-bc-widget] .bcw-cma-btn:focus,
[data-bc-widget] .bcw-loan-btn:hover, [data-bc-widget] .bcw-loan-btn:focus,
[data-bc-widget] .bcw-careers-btn:hover, [data-bc-widget] .bcw-careers-btn:focus { background-color: var(--gold); }
[data-bc-widget] .bcw-idx-gate-input,
[data-bc-widget] .bcw-cma-input,
[data-bc-widget] .bcw-loan-input,
[data-bc-widget] .bcw-careers-input { border-radius: 0; }
[data-bc-widget] .bcw-idx-gate-input:focus,
[data-bc-widget] .bcw-cma-input:focus,
[data-bc-widget] .bcw-loan-input:focus,
[data-bc-widget] .bcw-careers-input:focus {
	border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184, 129, 56, 0.18);
}


/* ---------- Scroll reveal (JS adds the class; no-JS visitors see everything) ---------- */
.reveal-init { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-init.revealed { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1240px) {
	.nav-menu { gap: 22px; font-size: 11px; letter-spacing: 1.8px; }
	.nav-contact { display: none; }
}
@media (max-width: 1080px) {
	.nav-menu {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; flex-direction: column; gap: 0; padding: 12px 36px 28px;
		border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
		font-size: 13px; letter-spacing: 2.5px;
	}
	.nav-menu.open { display: flex; }
	.nav-menu > li { border-bottom: 1px solid var(--line); }
	.nav-menu > li:last-child { border-bottom: none; }
	.nav-menu a { display: block; padding: 16px 0; }
	.nav-menu a::after { display: none; }
	.nav-menu .mobile-only { display: block; }
	.nav-menu .mobile-only a { color: var(--muted); font-size: 11px; }
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.nav-login { display: none; }
	.split, .split.reverse { grid-template-columns: 1fr; gap: 48px; }
	.split.reverse > :first-child { order: 0; }
	.paths { grid-template-columns: 1fr 1fr; gap: 24px; }
	.quotes { grid-template-columns: 1fr; gap: 36px; }
	.broker-grid { grid-template-columns: 1fr; gap: 48px; }
	.broker-grid .frame { max-width: 300px; }
	.footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 820px) {
	:root { --nav-h: 68px; }
	.nav-inner { padding: 0 20px; }
	.nav-logo img { height: 38px; }
	.section-pad { padding: 88px 0; }
	.section-pad-sm { padding: 64px 0; }
	.head-center { margin-bottom: 44px; }
	.container, .container-narrow { padding: 0 20px; }
	/* Portrait frame: the sky is the top two thirds, so the words live there */
	.hero { height: 92vh; min-height: 640px; align-items: flex-start; }
	.hero-content { padding-top: calc(var(--nav-h) + 40px); transform: none; }
	.hero-mark { width: 58px; height: 58px; margin-bottom: 26px; }
	.hero h1 { font-size: clamp(40px, 11vw, 56px); }
	.hero-kicker { font-size: 10px; letter-spacing: 2.5px; white-space: nowrap; gap: 10px; }
	.hero-kicker::before, .hero-kicker::after { width: 22px; }
	.hero-sub { font-size: 16px; margin-bottom: 30px; }
	.hero-scroll { display: none; }
	.hero h1 { max-width: none; }
	.page-hero { min-height: 360px; height: 48vh; }
	.page-hero .container { padding-bottom: 44px; }
	.contact-grid { grid-template-columns: 1fr; gap: 48px; }
	.points, .points-3 { grid-template-columns: 1fr; gap: 28px; }
	.awards { grid-template-columns: 1fr; }
	.facts { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
	.fact .num { font-size: 34px; }
	.search-wrap { padding: 18px; }
	.listings-wrap { padding: 14px; }
	.frame::before { transform: translate(12px, 12px); }
}
@media (max-width: 600px) {
	.paths { grid-template-columns: 1fr; gap: 36px; }
	.contact-form { grid-template-columns: 1fr; }
	.facts { grid-template-columns: 1fr; gap: 22px; }
	.footer-top { grid-template-columns: 1fr; gap: 34px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.btn { padding: 15px 26px; }
}

/* ---------- Ornament divider (the monogram between sections) ---------- */
.ornament {
	display: flex; align-items: center; justify-content: center; gap: 22px;
	margin: 0 auto 72px; max-width: 520px;
}
.ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ornament img { width: 40px; height: 40px; opacity: 0.9; }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.step { padding-top: 22px; border-top: 1px solid var(--line); }
.step .num { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--gold); letter-spacing: 2px; display: block; margin-bottom: 16px; }
.step h3 { font-size: 24px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-soft); }
.quotes.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 1080px) { .steps { grid-template-columns: 1fr 1fr; } .quotes.two { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Background video on interior heroes (Little Rock aerial) ---------- */
.page-hero video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 1.4s ease;
}
.page-hero video.playing { opacity: 1; }

/* ---------- Click-to-play video (Monica's brand film) ---------- */
.video-frame { position: relative; }
.video-frame::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	border: 1px solid var(--gold); transform: translate(18px, 18px); pointer-events: none;
}
.video-frame video {
	position: relative; z-index: 1; display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover; background: #000;
}
.video-frame .play {
	position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.9);
	background: rgba(15,15,15,0.35); backdrop-filter: blur(4px);
	color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.video-frame .play i { margin-left: 4px; }
.video-frame .play:hover { background: var(--gold); border-color: var(--gold); transform: translate(-50%, -50%) scale(1.05); }
.video-frame.is-playing .play { display: none; }
.video-frame .cap {
	margin-top: 22px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--muted); font-weight: 500;
}
@media (max-width: 820px) { .video-frame::before { transform: translate(12px, 12px); } .video-frame .play { width: 64px; height: 64px; font-size: 18px; } }