/* /bc_client/agents/assets/css/agents.landing.css
   Public agent landing page (agents/index.cfm) only. Loaded by the page's dedicated
   header include (agents/assets/includes/header.cfm).

   Two deliberate deviations from shared/design-system.md, approved for this page:
   1. A display serif plus a script accent face. Everywhere else in the app is single-family.
      This page is a consumer marketing surface, not an app screen.
   2. Its own palette. The luxury greens and golds below are defaults. When a tenant has
      uploaded a theme.css, the page adds .has-tenant-theme and the primary tones defer to
      that tenant's --bc-primary / --bc-primary-2.

   Contrast notes (WCAG AA): --lux-accent is decorative and for large text only (3.85:1 on
   the deep green). Small text on cream uses --lux-accent-ink (4.5:1) or --lux-text. */

/* Palette lives at :root, NOT on .bc-agent-lux: the shared header and footer sit outside
   the wrapper and style themselves from these variables. Scoping them to the wrapper made
   var(--lux-primary-ink) undefined out there, and an undefined variable in background is
   "invalid at computed-value time", i.e. a silently transparent header. This stylesheet
   loads only on the agent landing page, so :root here cannot leak anywhere else. */
:root {
	--lux-primary: #1d3a2f;
	--lux-primary-ink: #142019;
	--lux-accent: #b1895b;
	--lux-accent-ink: #8a6a3f;
	--lux-cream: #f7f3ec;
	--lux-card: #ffffff;
	--lux-text: #26302a;
	--lux-muted: #5d6b63;
	--lux-line: rgba(29, 58, 47, .12);
	--lux-shadow: 0 2px 10px rgba(20, 32, 25, .06), 0 12px 32px rgba(20, 32, 25, .08);
	--lux-radius: 14px;
	--lux-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--lux-script: 'Great Vibes', 'Segoe Script', cursive;
}

.bc-agent-lux {
	background: var(--lux-cream);
	color: var(--lux-text);
	overflow-x: hidden;
}

/* Tenant brand colors take over the primary tones; gold and cream stay constant.
   The wrapper-level rule covers the page content everywhere. The :has() rule lifts the
   same override to :root so the header and footer follow the tenant color too; on a
   browser without :has() they simply keep the luxury green, which always works with the
   white-transparent tenant logo. */
.bc-agent-lux.has-tenant-theme {
	--lux-primary: var(--bc-primary, #1d3a2f);
	--lux-primary-ink: var(--bc-primary-2, #142019);
}

:root:has(.bc-agent-lux.has-tenant-theme) {
	--lux-primary: var(--bc-primary, #1d3a2f);
	--lux-primary-ink: var(--bc-primary-2, #142019);
}

.bc-agent-lux h1,
.bc-agent-lux h2,
.bc-agent-lux h3,
.bc-agent-lux h4 {
	font-family: var(--lux-serif);
	font-weight: 600;
	color: var(--lux-primary-ink);
	letter-spacing: -0.01em;
}

.bc-agent-lux p { color: var(--lux-text); }

.bc-agent-lux a { color: var(--lux-primary); }
.bc-agent-lux a:hover { color: var(--lux-accent-ink); }

.bc-agent-lux .lux-section {
	padding: 56px 0;
}

/* The anchor nav is sticky, so an anchor jump would otherwise park the section
   heading underneath it. Applies to native jumps and to the smooth-scroll handler.
   Sized for the taller logo-carrying bar. */
.bc-agent-lux [id] {
	scroll-margin-top: 96px;
}

.bc-agent-lux .lux-section-title {
	font-size: 1.9rem;
	margin-bottom: 1.5rem;
}

.bc-agent-lux .lux-eyebrow {
	font-family: var(--lux-script);
	font-size: 2rem;
	line-height: 1;
	color: var(--lux-accent);
	margin-bottom: .25rem;
}

/* Buttons ---------------------------------------------------------------- */

.bc-agent-lux .lux-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.6rem;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.bc-agent-lux .lux-btn:hover,
.bc-agent-lux .lux-btn:focus {
	text-decoration: none;
	transform: translateY(-1px);
}

.bc-agent-lux .lux-btn-primary {
	background: var(--lux-primary);
	color: #fff;
}

.bc-agent-lux .lux-btn-primary:hover,
.bc-agent-lux .lux-btn-primary:focus {
	background: var(--lux-primary-ink);
	color: #fff;
	box-shadow: 0 8px 20px rgba(20, 32, 25, .25);
}

.bc-agent-lux .lux-btn-outline {
	background: transparent;
	border-color: var(--lux-primary);
	color: var(--lux-primary);
}

.bc-agent-lux .lux-btn-outline:hover,
.bc-agent-lux .lux-btn-outline:focus {
	background: var(--lux-primary);
	color: #fff;
}

.bc-agent-lux .lux-btn-block { width: 100%; }

/* Visible focus everywhere (the dark green buttons swallow the browser default). */
.bc-agent-lux a:focus-visible,
.bc-agent-lux button:focus-visible,
.bc-agent-lux input:focus-visible,
.bc-agent-lux select:focus-visible,
.bc-agent-lux textarea:focus-visible {
	outline: 3px solid var(--lux-accent);
	outline-offset: 2px;
}

/* Page chrome --------------------------------------------------------------
   The page has its own header/footer includes under agents/assets/includes/, so
   plain element selectors here style exactly one page's markup. */

body.bg-body {
	background: var(--lux-cream);
}

/* This page uses its own header/footer includes (agents/assets/includes/), so there is
   no shared <header> bar to fight with: the sticky .lux-nav below IS the header. */

footer {
	background: var(--lux-primary-ink);
	color: rgba(255, 255, 255, .78);
	font-family: var(--lux-serif);
}

footer .text-body-alt,
footer a {
	color: rgba(255, 255, 255, .85);
}

footer a:hover { color: #fff; }

footer .container { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Powered-by badge (markup lives in agents/assets/includes/footer.cfm) */
.bc-powered-by-light { color: #fff; opacity: .65; text-decoration: none; letter-spacing: .02em; transition: opacity .15s ease; }
.bc-powered-by-light:hover { color: #fff; opacity: 1; text-decoration: none; }
.bc-powered-by-light strong { font-weight: 600; }

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

.lux-nav {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: rgba(247, 243, 236, .96);
	border-bottom: 1px solid var(--lux-line);
	backdrop-filter: saturate(140%) blur(6px);
}

.lux-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: .55rem 0;
}

.lux-nav-brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.lux-nav-brand img {
	max-height: 48px;
	max-width: 220px;
	width: auto;
}

/* Fallback for tenants with only the white-transparent logo: a dark chip keeps it visible
   on the cream bar. */
.lux-nav-brand-chip {
	background: var(--lux-primary-ink);
	border-radius: 8px;
	padding: .35rem .7rem;
}

.lux-nav-brand-chip img { max-height: 34px; }

.lux-nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.lux-nav-links::-webkit-scrollbar { display: none; }

/* Mobile hamburger + dropdown panel */
.lux-nav-toggle {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: .4rem .55rem;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--lux-primary);
	cursor: pointer;
}

.lux-nav-panel {
	padding: .35rem 0 1.1rem;
	border-top: 1px solid var(--lux-line);
}

.lux-nav-panel-link {
	display: block;
	padding: .8rem .25rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lux-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--lux-line);
}

.lux-nav-panel-link:hover { color: var(--lux-accent-ink); text-decoration: none; }

.lux-nav-links a {
	white-space: nowrap;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lux-primary);
	text-decoration: none;
	padding: .35rem 0;
	border-bottom: 2px solid transparent;
}

.lux-nav-links a:hover {
	color: var(--lux-accent-ink);
	border-bottom-color: var(--lux-accent);
	text-decoration: none;
}

.lux-nav .lux-btn { padding: .5rem 1.15rem; font-size: .82rem; }

/* Hero -------------------------------------------------------------------- */

.lux-hero {
	position: relative;
	/* The base carries only the photo plus a neutral darkening gradient for depth.
	   The BRAND tint lives on the ::before layer below, because it must come from
	   var(--lux-primary-ink) (which a tenant theme overrides) and CSS variables
	   cannot be spliced into an rgba() component. An element layer with opacity
	   works in every browser; color-mix() would cut off older ones. */
	background:
		linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .45)),
		url('/bc_client/agents/assets/img/agent-hero-luxury.jpg') center / cover no-repeat;
	color: #fff;
	padding: 72px 0 84px;
}

/* Brand tint overlay: follows the tenant's palette via --lux-primary-ink.
   Kept deliberately subtle: the neutral gradient above carries the text
   contrast, the tint only colors the mood. This opacity is the taste knob. */
.lux-hero::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: var(--lux-primary-ink);
	opacity: .42;
}

/* Hero content rides above the tint layer. */
.lux-hero .container {
	position: relative;
	z-index: 1;
}

.lux-hero h1,
.lux-hero h2,
.lux-hero h3 { color: #fff; }

.lux-hero p { color: rgba(255, 255, 255, .92); }

.lux-hero-photo {
	width: 100%;
	max-width: 400px;
	/* height:auto beats the img height="533" presentational hint. Without it the attribute
	   pins the height while responsive CSS shrinks the width, which stretched the photo into
	   a narrow tower on phones, and a pinned height also disables aspect-ratio entirely. */
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 18px;
	border: 1px solid rgba(177, 137, 91, .55);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .38);
	background: var(--lux-primary-ink);
}

.lux-name {
	font-size: clamp(2.6rem, 6vw, 4.2rem);
	line-height: 1.02;
	margin: 0 0 .5rem;
}

.lux-title {
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	margin-bottom: .75rem;
}

.lux-location {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--lux-accent);
	font-size: 1rem;
	margin-bottom: 1.25rem;
}

.lux-bio {
	max-width: 46rem;
	font-size: 1.02rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .92);
}

/* Bio is formatted server-side into paragraphs and bullet lists */
.lux-bio p { margin: 0 0 .9em; color: inherit; }
.lux-bio p:last-child { margin-bottom: 0; }
.lux-bio ul { margin: 0 0 .9em 1.15em; padding: 0; }
.lux-bio ul:last-child { margin-bottom: 0; }
.lux-bio li { margin-bottom: .35em; }

/* Long-bio clamp. Applied by JS only (the unclamped full text is the no-JS default),
   and only when the text genuinely overflows. */
.lux-bio-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lux-bio-toggle {
	display: inline-block;
	margin-top: .35rem;
	padding: 0;
	background: none;
	border: 0;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.lux-bio-toggle:hover { color: var(--lux-accent); }

/* Get in Touch card ------------------------------------------------------- */

.lux-contact-card {
	background: var(--lux-card);
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
	padding: 1.75rem;
}

/* The card sits INSIDE the hero, whose heading rule paints h2 white for the dark
   backdrop. Re-assert ink here or "Get in Touch" is white-on-white. */
.lux-contact-card h2,
.lux-hero .lux-contact-card h2 {
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
	color: var(--lux-primary-ink);
}

/* Prefixed with .bc-agent-lux on purpose: these components are anchors, and the broad
   ".bc-agent-lux a" color rule would otherwise outrank an unprefixed class selector
   (that is exactly how the social icons once rendered green-on-green). */
.bc-agent-lux .lux-contact-row {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--lux-line);
	color: var(--lux-text);
	text-decoration: none;
}

.bc-agent-lux .lux-contact-row:last-of-type { border-bottom: 0; }

.bc-agent-lux .lux-contact-row:hover { color: var(--lux-text); text-decoration: none; background: rgba(177, 137, 91, .06); }

.lux-contact-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(29, 58, 47, .07);
	color: var(--lux-primary);
	font-size: 1.05rem;
}

.lux-contact-value {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.lux-contact-label {
	flex: 0 0 auto;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lux-accent-ink);
}

.lux-social-heading {
	margin: 1.4rem 0 .75rem;
	font-family: var(--lux-serif);
	font-size: 1.05rem;
	color: var(--lux-primary-ink);
}

.lux-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.bc-agent-lux .lux-social-circle {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--lux-primary);
	color: #fff;
	font-size: 1.05rem;
	text-decoration: none;
	transition: transform .15s ease, background-color .15s ease;
}

.bc-agent-lux .lux-social-circle:hover {
	background: var(--lux-accent-ink);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.bc-agent-lux .lux-social-circle svg { width: 16px; height: 16px; fill: currentColor; }

/* MLS search + gate ------------------------------------------------------- */

.lux-idx-badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lux-accent-ink);
	margin-bottom: .35rem;
}

.lux-idx-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lux-accent);
	box-shadow: 0 0 0 3px rgba(177, 137, 91, .22);
}

.lux-panel {
	background: var(--lux-card);
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
	padding: 1.5rem;
}

/* Locked panel stretches to the gate card's height (bootstrap columns already stretch),
   so the two sides of the section read as one composed block instead of a short box
   floating beside a tall card. */
.lux-panel-fill {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.lux-panel-fill .lux-idx-locked { flex: 1 1 auto; }

.lux-idx-frame {
	width: 100%;
	height: 800px;
	min-height: 520px;
	border: 1px solid var(--lux-line);
	border-radius: 10px;
	background: var(--lux-cream);
}

/* Multi-MLS "Also search" chips under the embedded portal */
.bc-agent-lux .lux-more-boards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-top: 1.1rem;
}

.lux-more-boards-label {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lux-muted);
}

.bc-agent-lux .lux-more-board-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .95rem;
	background: var(--lux-card);
	border: 1px solid var(--lux-line);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--lux-primary);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.bc-agent-lux .lux-more-board-link:hover {
	border-color: var(--lux-accent);
	color: var(--lux-accent-ink);
	text-decoration: none;
	transform: translateY(-1px);
}

.bc-agent-lux .lux-idx-open {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--lux-muted);
}

.lux-idx-locked {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 460px;
	padding: 2rem;
	border: 1px dashed rgba(29, 58, 47, .25);
	border-radius: 10px;
	background: rgba(29, 58, 47, .03);
	color: var(--lux-muted);
}

/* The withheld-listings teaser behind the lock message. Photos are AI-generated set
   dressing and stay only lightly blurred (a house photo asserts nothing); the price,
   address, and beds/baths lines are INVENTED and carry their own extra blur so the
   combined effect keeps that text unreadable at any zoom short of deliberate effort.
   Do not weaken these blur values: legible fake prices on an agent page stop being
   decoration and start being fabricated listing advertising. */
.lux-skel-grid {
	position: absolute;
	top: 14px; right: 14px; bottom: 14px; left: 14px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: 14px;
	filter: blur(1.5px);
	opacity: .85;
	pointer-events: none;
	user-select: none;
}

.lux-skel-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--lux-line);
	border-radius: 10px;
}

.lux-skel-img {
	flex: 1 1 auto;
	min-height: 60px;
	border-radius: 6px;
	background-color: #e6dfd2;
	background-size: cover;
	background-position: center;
}

.lux-skel-card-1 .lux-skel-img { background-image: url('/bc_client/agents/assets/img/idx-teaser-1.jpg'); }
.lux-skel-card-2 .lux-skel-img { background-image: url('/bc_client/agents/assets/img/idx-teaser-2.jpg'); }
.lux-skel-card-3 .lux-skel-img { background-image: url('/bc_client/agents/assets/img/idx-teaser-3.jpg'); }
.lux-skel-card-4 .lux-skel-img { background-image: url('/bc_client/agents/assets/img/idx-teaser-4.jpg'); }
.lux-skel-card-5 .lux-skel-img { background-image: url('/bc_client/agents/assets/img/idx-teaser-5.jpg'); }
.lux-skel-card-6 .lux-skel-img { background-image: url('/bc_client/agents/assets/img/idx-teaser-6.jpg'); }

.lux-skel-price {
	font-weight: 700;
	font-size: .95rem;
	color: var(--lux-primary-ink);
	filter: blur(3.5px);
}

.lux-skel-addr,
.lux-skel-meta {
	font-size: .78rem;
	color: var(--lux-muted);
	filter: blur(3px);
	white-space: nowrap;
	overflow: hidden;
}

.lux-idx-locked-msg {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	max-width: 24rem;
	padding: 1.75rem 2rem;
	text-align: center;
	background: rgba(247, 243, 236, .94);
	border: 1px solid var(--lux-line);
	border-radius: 12px;
	box-shadow: var(--lux-shadow);
}

.lux-idx-locked-msg strong { color: var(--lux-primary-ink); font-size: 1.05rem; }
.lux-idx-locked-msg .fa { font-size: 2rem; color: var(--lux-accent); }

.lux-gate-card {
	background: var(--lux-card);
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
	border-top: 4px solid var(--lux-accent);
	padding: 1.75rem;
}

.lux-gate-lock {
	width: 52px;
	height: 52px;
	margin: 0 auto .9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--lux-primary);
	color: #fff;
	font-size: 1.25rem;
}

.lux-gate-card h2 { font-size: 1.35rem; text-align: center; }
.lux-gate-card .lux-gate-pitch { text-align: center; color: var(--lux-muted); font-size: .92rem; }

.lux-gate-note {
	display: flex;
	gap: .5rem;
	margin-top: .9rem;
	font-size: .8rem;
	color: var(--lux-muted);
	line-height: 1.5;
}

/* Forms ------------------------------------------------------------------- */

.bc-agent-lux .form-control {
	border-radius: 8px;
	border: 1px solid rgba(29, 58, 47, .18);
	padding: .7rem .9rem;
	height: auto;
	font-size: .95rem;
	color: var(--lux-text);
	background: #fff;
}

.bc-agent-lux .form-control:focus {
	border-color: var(--lux-primary);
	box-shadow: 0 0 0 .15rem rgba(29, 58, 47, .12);
}

.bc-agent-lux label {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lux-muted);
	margin-bottom: .35rem;
}

.bc-agent-lux .lux-consent label {
	text-transform: none;
	letter-spacing: normal;
	font-size: .82rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--lux-muted);
}

/* White card, mockup-style; sits in the composed band with the chip lists and the
   interior photo. */
.lux-form-card {
	background: var(--lux-card);
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
	padding: 1.75rem;
	height: 100%;
}

.lux-form-card .lux-section-title { font-size: 1.45rem; }

.lux-title-icon { color: var(--lux-accent-ink); margin-right: .35rem; font-size: .9em; }

.lux-side-title {
	font-size: 1.3rem;
	margin-bottom: 1rem;
}

.lux-chip-grid-compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
.lux-chip-grid-compact .lux-chip { padding: .8rem .9rem; }

.lux-interior-photo {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
}

.lux-form-note {
	display: flex;
	align-items: center;
	gap: .45rem;
	justify-content: center;
	margin-top: .9rem;
	font-size: .78rem;
	color: var(--lux-muted);
}

/* php-email-form / validate.js contract (carried over from agents.custom.css) */
.validate { color: #d9534f; font-size: .82rem; margin-top: .25rem; display: none; }
.bc-agent-lux .loading,
.bc-agent-lux .error-message,
.bc-agent-lux .sent-message { display: none; margin-bottom: .75rem; font-size: .9rem; }
.bc-agent-lux .error-message { color: #d9534f; }
.bc-agent-lux .sent-message { color: #2e7d54; }

/* Chips: specializations and languages ------------------------------------ */

.lux-chip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: .85rem;
}

.lux-chip {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .95rem 1.1rem;
	background: var(--lux-card);
	border: 1px solid var(--lux-line);
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(20, 32, 25, .04);
	transition: transform .15s ease, box-shadow .15s ease;
}

.lux-chip:hover {
	transform: translateY(-2px);
	box-shadow: var(--lux-shadow);
}

.lux-chip .fa {
	color: var(--lux-accent-ink);
	font-size: 1.15rem;
	flex: 0 0 auto;
}

.lux-chip-label {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.25;
}

.lux-chip-sub {
	display: block;
	font-weight: 400;
	font-size: .78rem;
	color: var(--lux-muted);
}

/* Feature strip ----------------------------------------------------------- */

.lux-feature-strip { background: #fff; border-top: 1px solid var(--lux-line); }

.lux-feature-card { padding: 1.25rem .5rem; }

.lux-feature-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(29, 58, 47, .07);
	color: var(--lux-primary);
	font-size: 1.35rem;
	margin-bottom: 1rem;
}

.lux-feature-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.lux-feature-card p { color: var(--lux-muted); font-size: .92rem; line-height: 1.65; margin: 0; }

/* Sticky mobile action bar ------------------------------------------------ */

.lux-mobile-bar { display: none; }

@media (max-width: 767.98px) {
	.lux-mobile-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1030;
		display: flex;
		background: var(--lux-primary-ink);
		box-shadow: 0 -4px 18px rgba(0, 0, 0, .25);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.lux-mobile-bar a {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .2rem;
		padding: .6rem .25rem;
		color: rgba(255, 255, 255, .9);
		font-size: .68rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		text-decoration: none;
		border-right: 1px solid rgba(255, 255, 255, .1);
	}

	.lux-mobile-bar a:last-child { border-right: 0; }
	.lux-mobile-bar a:hover,
	.lux-mobile-bar a:active { background: var(--lux-primary); color: #fff; text-decoration: none; }
	.lux-mobile-bar .fa { font-size: 1.05rem; }

	/* Keep the bar from covering the footer's last line. */
	body { padding-bottom: 62px; }
}

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

/* The hidden state is gated on .lux-js, which the page script adds on load. Without
   JavaScript (or if the script errors) nothing is ever hidden, so content always renders. */
@media (prefers-reduced-motion: no-preference) {
	.lux-js .lux-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .6s ease, transform .6s ease;
	}

	.lux-js .lux-reveal.in-view {
		opacity: 1;
		transform: none;
	}
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	.lux-hero-photo { max-width: 320px; }
	.lux-idx-frame { height: 700px; }
}

@media (max-width: 991.98px) {
	.lux-hero { padding: 52px 0 60px; text-align: center; }
	.lux-hero .lux-location { justify-content: center; }
	.lux-hero-photo { max-width: 260px; margin: 0 auto 1.75rem; }
	/* Centered stack looks right for the name/photo, but body copy reads badly centered:
	   the bio and its Show more toggle stay left-aligned. */
	.lux-bio { margin-left: auto; margin-right: auto; text-align: left; }
	.lux-bio-toggle { display: block; text-align: left; }
	.lux-contact-card { margin-top: 2rem; text-align: left; }
	.lux-section { padding: 44px 0; }
	.lux-gate-card { margin-top: 1.5rem; }
	.lux-idx-frame { height: 620px; }
}

@media (max-width: 767.98px) {
	/* Slightly stronger tint on small screens: text sits directly over the busiest
	   part of the photo there. Same brand variable, just more of it. */
	.lux-hero::before { opacity: .58; }

	.lux-nav-inner { padding: .45rem 0; }
	.lux-nav-brand img { max-height: 34px; max-width: 165px; }
	.lux-nav-brand-chip img { max-height: 26px; }
	.lux-nav .lux-btn { padding: .45rem .9rem; font-size: .75rem; }
	.lux-hero-photo { max-width: 210px; }
	.lux-section-title { font-size: 1.55rem; }
	.lux-form-section { padding: 1.5rem; }
	.lux-contact-card, .lux-gate-card, .lux-panel { padding: 1.25rem; }
	.lux-idx-frame { height: 560px; min-height: 460px; }
	.lux-chip-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.lux-idx-locked { min-height: 340px; padding: 1.25rem; }
	.lux-bio-clamped { -webkit-line-clamp: 7; }
	.lux-skel-grid { grid-template-columns: repeat(2, 1fr); }
	.lux-skel-card:nth-child(n+5) { display: none; }
}

@media (max-width: 479.98px) {
	.lux-name { font-size: 2.3rem; }
	.lux-eyebrow { font-size: 1.6rem; }
	.lux-hero-photo { max-width: 175px; }
	.lux-contact-label { display: none; }
}

/* ============================================================
   Client reviews (#reviews)
   Sits between the contact band and the trust strip. Cream section, white
   cards, so it keeps the page's existing alternating rhythm.
   ============================================================ */

.bc-agent-lux .lux-reviews-head {
	text-align: center;
	margin-bottom: 2.25rem;
}

.bc-agent-lux .lux-reviews-agg {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: .65rem;
}

.bc-agent-lux .lux-reviews-stars {
	color: var(--lux-accent);
	font-size: 1.15rem;
	letter-spacing: .1em;
}

/* Small text on cream, so this uses the darker gold that clears AA. */
.bc-agent-lux .lux-reviews-agg-text {
	font-weight: 600;
	color: var(--lux-accent-ink);
}

.bc-agent-lux .lux-reviews-count {
	color: var(--lux-muted);
	font-weight: 400;
}

.bc-agent-lux .lux-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.35rem;
}

.bc-agent-lux .lux-review-card {
	background: var(--lux-card);
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
	padding: 1.6rem 1.5rem;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.bc-agent-lux .lux-review-stars {
	color: var(--lux-accent);
	font-size: 1rem;
	letter-spacing: .08em;
	margin-bottom: .75rem;
}

/* The client's words carry the section, so they get the display face and room
   to breathe rather than being treated as a caption. */
.bc-agent-lux .lux-review-card blockquote {
	font-family: var(--lux-serif);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--lux-text);
	margin: 0 0 1.1rem;
	flex: 1;
}

.bc-agent-lux .lux-review-card figcaption {
	border-top: 1px solid var(--lux-line);
	padding-top: .85rem;
}

.bc-agent-lux .lux-review-who {
	display: block;
	font-weight: 600;
	color: var(--lux-primary);
}

/* City and month only. The client's identity and address stay private; this is
   here because local provenance is what makes a review believable. */
.bc-agent-lux .lux-review-meta {
	display: block;
	font-size: .85rem;
	color: var(--lux-muted);
	margin-top: .15rem;
}

@media (max-width: 767.98px) {
	.lux-reviews-grid { grid-template-columns: 1fr; }
	.lux-review-card { padding: 1.35rem 1.25rem; }
	.lux-review-card blockquote { font-size: 1rem; }
}

/* The quiet outbound link under the review cards. Deliberately understated:
   the reviews above carry the section, and this just says there is more of
   the same somewhere a skeptic can verify independently. */
.bc-agent-lux .lux-reviews-google {
	text-align: center;
	margin-top: 1.75rem;
}

.bc-agent-lux .lux-reviews-google a {
	display: inline-block;
	border: 1px solid var(--lux-accent);
	color: var(--lux-accent-ink);
	border-radius: 9px;
	padding: .55rem 1.2rem;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.bc-agent-lux .lux-reviews-google a:hover,
.bc-agent-lux .lux-reviews-google a:focus {
	background: var(--lux-accent);
	color: #fff;
	text-decoration: none;
}

.bc-agent-lux .lux-reviews-google .fa {
	margin-right: .35rem;
}

.bc-agent-lux .lux-reviews-google .fa-external-link {
	margin-right: 0;
	margin-left: .35rem;
	font-size: .75em;
	opacity: .7;
}

/* ============================================================
   Reviews in the hero: average badge under the title, showcased
   quote under the headshot, Verified Client marker
   ============================================================ */

/* Hero rating badge, links to #reviews. Sits on the dark hero photo,
   so text is light like .lux-title, not the accent-ink browns. */
.bc-agent-lux .lux-hero-rating {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: .1rem 0 1rem;
	text-decoration: none;
}

.bc-agent-lux .lux-hero-rating:hover,
.bc-agent-lux .lux-hero-rating:focus {
	text-decoration: none;
}

.bc-agent-lux .lux-hero-rating-stars {
	color: var(--lux-accent);
	font-size: 1.05rem;
	letter-spacing: .08em;
}

.bc-agent-lux .lux-hero-rating-text {
	font-weight: 600;
	color: rgba(255, 255, 255, .92);
	font-size: .95rem;
}

.bc-agent-lux .lux-hero-rating-count {
	color: rgba(255, 255, 255, .68);
	font-weight: 400;
}

.bc-agent-lux .lux-hero-rating:hover .lux-hero-rating-text {
	color: #fff;
}

/* Showcase quote card under the headshot. Deliberately shallow: the quote and
   one wrapping meta line, nothing stacked. */
.bc-agent-lux .lux-showcase-review {
	background: var(--lux-card);
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
	padding: .95rem 1.1rem;
	margin: 1.1rem 0 0;
	max-width: 400px;
	text-align: left;
}

.bc-agent-lux .lux-showcase-quote {
	font-family: var(--lux-serif);
	font-size: .95rem;
	line-height: 1.55;
	color: var(--lux-text);
	margin: 0 0 .55rem;
}

.bc-agent-lux .lux-showcase-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .55rem;
}

.bc-agent-lux .lux-showcase-stars {
	color: var(--lux-accent);
	font-size: .72rem;
	letter-spacing: .06em;
}

.bc-agent-lux .lux-showcase-who {
	font-weight: 600;
	font-size: .85rem;
	color: var(--lux-primary);
}

.bc-agent-lux .lux-showcase-meta .lux-verified {
	margin-top: 0;
	font-size: .72rem;
}

/* Inline expand for a truncated showcase quote. Styled as text, not a button:
   the card must stay quiet. */
.bc-agent-lux .lux-showcase-more {
	background: none;
	border: 0;
	padding: 0;
	margin-left: .15rem;
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--lux-accent-ink);
	cursor: pointer;
	white-space: nowrap;
}

.bc-agent-lux .lux-showcase-more:hover,
.bc-agent-lux .lux-showcase-more:focus {
	text-decoration: underline;
}

/* The quiet way from the spotlight to the rest of the proof. Rides the meta
   line, pushed to its right edge; wraps under it when the name runs long. */
.bc-agent-lux .lux-showcase-link {
	margin-left: auto;
	font-size: .78rem;
	font-weight: 600;
	color: var(--lux-accent-ink);
	text-decoration: none;
	white-space: nowrap;
}

.bc-agent-lux .lux-showcase-link:hover,
.bc-agent-lux .lux-showcase-link:focus {
	color: var(--lux-accent-ink);
	text-decoration: underline;
}

.bc-agent-lux .lux-showcase-link .fa-angle-down {
	margin-left: .2rem;
	font-size: .9em;
}

/* Verified marker (showcase card + review cards). Every review comes from a
   private invitation tied to a closed transaction, so the claim is literal. */
.bc-agent-lux .lux-verified {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--lux-accent-ink);
	margin-top: .2rem;
	cursor: help;
}

.bc-agent-lux .lux-verified .fa-check-circle {
	color: var(--lux-accent);
}

@media (max-width: 991.98px) {
	/* The hero centers below 992px and the photo centers with margin auto;
	   on tablet the quote card follows the photo. */
	.bc-agent-lux .lux-showcase-review { margin: 0 auto; max-width: 320px; }
}

@media (max-width: 767.98px) {
	/* On phones the card renders from its second slot, after the bio, so the
	   introduction (photo, name, title, rating) is never interrupted. It needs
	   its own breathing room there. */
	.bc-agent-lux .lux-showcase-review { margin: 1.25rem auto 0; max-width: 340px; }
}