/* =============================================================================
   SELLER BILLBOARD (PROPERTY DETAILS) - CONSOLIDATED CSS
   ========================================================================== */

/* =============================================================================
   LIGHTBOX STYLES
   ========================================================================== */
.h2v-lightbox {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.95) !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.h2v-lightbox-image {
	max-width: 90% !important;
	max-height: 90% !important;
	object-fit: contain !important;
}

.h2v-lightbox-close {
	position: absolute !important;
	top: 20px !important;
	right: 30px !important;
	font-size: 40px !important;
	color: white !important;
	cursor: pointer !important;
	z-index: 1000000 !important;
	background: rgba(0, 0, 0, 0.5) !important;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

.h2v-lightbox-close:hover {
	background: rgba(0, 0, 0, 0.8) !important;
}

.h2v-lightbox-prev,
.h2v-lightbox-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 60px !important;
	color: white !important;
	cursor: pointer !important;
	padding: 20px !important;
	user-select: none !important;
	z-index: 1000000 !important;
	background: rgba(0, 0, 0, 0.5) !important;
	border-radius: 5px !important;
}

.h2v-lightbox-prev:hover,
.h2v-lightbox-next:hover {
	background: rgba(0, 0, 0, 0.8) !important;
}

.h2v-lightbox-prev {
	left: 20px !important;
}

.h2v-lightbox-next {
	right: 20px !important;
}

.h2v-lightbox-counter {
	position: absolute !important;
	bottom: 20px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	color: white !important;
	font-size: 18px !important;
	background: rgba(0, 0, 0, 0.7) !important;
	padding: 10px 20px !important;
	border-radius: 5px !important;
	z-index: 1000000 !important;
}

/* =============================================================================
   HEADER SECTION
   ========================================================================== */
.h2v-vd-header-embed {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--h2c-green);
}

/* =============================================================================
   THE PROPERTY HEADER  (#S, 2026-09-25)  — supersedes #Q's strip
   =============================================================================
   #Q made this a 90px strip and put the address, price and status on the photo.
   Two things were wrong with that: it looked unfinished, and the overlay never
   rendered at all on a real listing -- renderHero() opens with
   `hero.innerHTML = ''`, which ran a few milliseconds after the overlay was
   built and destroyed it.

   So the header is back above the photo, and it is SIZED BY ITS CONTENT rather
   than by a fixed height: two columns, the taller one decides.

     LEFT   address (Georgia italic, white, two lines) -> price (gold, the
            biggest thing here) -> status pill
     RIGHT  the brokerage logo in its white card, its name and its licence

   THE LICENCE IS STILL THE POINT. FL 61J2-10.025 attaches to the advertising,
   and this header is the advertising. It sits with the branding it identifies
   and it does not wrap.
   ============================================================================= */
.h2v-vd-header-bar {
	padding: 18px 20px;
	background: var(--h2c-green);
	border-bottom: 4px solid var(--h2c-gold-bright);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
}

/* ---- left column --------------------------------------------------------- */
/* A GRID so the pill sits BESIDE the price rather than under it. Stacked, the
   three rows made the header 202px; the brief's target is 150-170 and the pill
   is the one line that does not need one of its own. */
.h2v-vd-header-bar .h2v-vdh-headline {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 4px;
	justify-items: start;
	align-items: center;
	min-width: 0;
}
.h2v-vd-header-bar .h2v-vdh-headline #h2v-vdh-address { grid-column: 1 / 3; grid-row: 1; }
.h2v-vd-header-bar .h2v-vdh-headline .h2v-vdh-price   { grid-column: 1; grid-row: 2; }
.h2v-vd-header-bar .h2v-vdh-headline .h2v-vdh-state {
	grid-column: 2; grid-row: 2; align-self: center;
}

.h2v-vd-header-bar .h2v-vdh-headline #h2v-vdh-address {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 27px;
	line-height: 1.22;
	color: #ffffff;
	margin: 0;
	padding: 0;
}

/* The biggest text in the header, deliberately: the price is what a buyer
   scans for. Arial rather than the serif -- a long number in italic Georgia
   reads as decoration. */
.h2v-vdh-price {
	font-family: Arial, Helvetica, sans-serif;
	/* 30px (#T). At 40 it was shouting over a header whose job is to introduce
	   the property, not to be the property. Still the largest text here -- the
	   address is 27 -- which is the thing that actually has to hold. */
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--h2c-gold);
	margin: 2px 0 0;
}

/* THE STATE IS TEXT, NOT A CHIP (#T). The pill had a background, a border and
   a shape, all of which competed with the price for the same corner of the
   header -- and it spent that attention saying "LIVE", which is the ordinary
   case. It only renders now for a state a buyer needs (Draft, Archived, Sold,
   Suspended); live and under review render nothing at all.

   The type is the FL LICENSE line's, verbatim -- 12px, weight 500, 2px
   tracking, uppercase, --h2c-gold -- because these are the two pieces of
   small print in this header and they should look like siblings. The gold is
   --h2c-gold rather than the licence's --h2c-gold-bright: this sits on the
   green beside the price, which is --h2c-gold, and matching the price it
   follows beats matching the line diagonally opposite it.

   The separator is a ::before so the JS writes a word and nothing else -- no
   punctuation smuggled into a data field, and an empty state cannot leave a
   stray dot behind. */
/* #h2v-vdh-status.h2v-vdh-state, not .h2v-vdh-state alone. The element carries
   the id #h2v-vdh-status from the Webflow markup, and #h2v-vdh-status above
   sets `color:#ffffff; font-size:24px` -- an id beats any number of classes, so
   the class rule was being ignored for exactly those properties and the state
   rendered white at 24px. Every check passed except the colour, which is what
   showed it. */
#h2v-vdh-status.h2v-vdh-state,
.h2v-vdh-state {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--h2c-gold);
	white-space: nowrap;
}
#h2v-vdh-status.h2v-vdh-state::before,
.h2v-vdh-state::before {
	content: '\00B7';
	margin-right: 10px;
	letter-spacing: 0;
}
#h2v-vdh-status.h2v-vdh-state:empty,
.h2v-vdh-state:empty { display: none; }

/* ---- right column -------------------------------------------------------- */
/* A COLUMN, and every property stated. The base .h2v-vdh-brand-block rule
   further down is `position:absolute; flex-direction:column; align-items:center`
   -- it pinned this to the old header's right edge. #Q set display without
   setting flex-direction and inherited `column` by accident; this states the
   lot so nothing is inherited by surprise. */
.h2v-vd-header-bar .h2v-vdh-brand-block {
	position: static !important;
	top: auto !important;
	right: auto !important;
	transform: none !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
	/* #U: one vertical axis. The card, the name and the licence were flush
	   RIGHT, so the card -- much narrower than the name -- hung off the end of
	   it rather than sitting over it. Centred, the three read as one block. */
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	text-align: center;
}

/* 90x59 (#U). NOT a size anyone liked the look of -- it is the size that makes
   this block the same height as the one opposite. The left block is the address
   on two lines plus the price: 103px. This block is card + 6 + name 16 + 6 +
   licence 16, so the card has 59px to work with, and 90 keeps the 130:85 ratio
   the card already had. Change the address size or the gaps and this number is
   wrong again -- the check asserts the two heights, not the card. */
.h2v-vd-header-bar .h2v-vdh-logo-card {
	width: 90px !important;
	height: 59px !important;
	margin: 0 !important;
	flex: 0 0 auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 0;
}

.h2v-vd-header-bar .h2v-vdh-broker-name,
.h2v-vd-header-bar .h2v-vdh-broker-license {
	text-align: center !important;
	margin: 0 !important;
	width: auto !important;
	max-width: 260px;
}
.h2v-vd-header-bar .h2v-vdh-broker-name { line-height: 1.25; }
/* A LICENCE NUMBER IS ONE TOKEN. "FL LICENSE / CQ1000461" across two lines is
   the same defect as the email address that broke at its hyphen (#F4): the one
   string here a regulator or a buyer would actually check, rendered as two. */
.h2v-vd-header-bar .h2v-vdh-broker-license { white-space: nowrap; }

   positioned element, so it CANNOT drift from the logo. Before #79 the
   header carried the logo and no licence at all, and the only licences on
   the page sat ~2,200px down in the agent footer.

   The wrapper owns the absolute positioning that used to live on the card,
   which is what makes the licence track the branding on every breakpoint
   instead of needing its own coordinates. */
.h2v-vdh-brand-block {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}



/* BRAND GOLD, on Chris's instruction, with the trade-off recorded.

   var(--h2c-gold-bright) on this header's var(--h2c-green) measures 2.23:1 -- under the 4.5:1 WCAG
   AA wants at 12px. That is a known, deliberate choice: the gold is the
   brand mark these billboards are built around, and consistency across the
   three licences won over the ratio.

   Worth knowing for later: a DEEPER gold makes this worse, not better.
   Contrast against a mid-tone teal improves by going lighter, and the
   arithmetic says nothing recognisable as gold can reach 4.5:1 here --
   var(--h2c-green) needs a foreground luminance of about 0.96, which is essentially
   off-white. The nearest on-brand option that clears it is #FFFBEB, a warm
   near-white at 4.52:1; a true pale gold like #FAF3D0 still only reaches
   4.20:1. Named, not substituted. */

/* Brokerage logo card on the right side of the property header.
   Mirrors the agent-header treatment (white card + gold border) so
   the two billboard sections feel like they belong together. The
   logo wordmark stacks above a 2-line live-HTML tagline (matches
   the menu logo treatment — easier to maintain than baking the
   tagline into the PNG). Roughly square so it sits well next to
   the address text on the left. */
.h2v-vdh-logo-card {
	width: 180px;
	height: 120px;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	border: 2px solid var(--h2c-gold-bright);
	border-radius: 6px;
	flex-shrink: 0;
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	box-sizing: border-box;
	gap: 6px;
}

.h2v-vdh-logo-card .h2v-vd-logo-img {
	max-width: 100%;
	max-height: 48px;
	object-fit: contain;
	display: block;
}

.h2v-vdh-logo-card .h2v-vd-logo-tagline {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h2c-green);
	line-height: 1.3;
	text-align: center;
}

#h2v-vdh-address {
	/* #P: the marketing heading, same values as the agent and brokerage
	   billboards. This page was Arial 30px w600 and matched neither
	   family. */
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0;
	padding: 0;
	font-size: 30px;
	line-height: 1.1;
	color: #ffffff;
	/* #P: the trailing `font-weight: 600; font-family: Arial` that used to sit
	   here is gone. It was AFTER the declarations above and therefore won --
	   the italic and the letter-spacing applied while the serif silently did
	   not, which is the failure mode where a font change looks half-applied. */
}

#h2v-vdh-status {
	margin: 6px 0 0 0;
	padding: 0;
	font-size: 24px;
	line-height: 1.1;
	color: #ffffff;
	font-weight: 500;
	font-family: Arial, sans-serif;
	opacity: 0.95;
}

#h2v-vdh-badges {
	display: flex;
	gap: 10px;
	padding: 14px 20px 28px 20px;
	background: var(--h2c-green);
	flex-wrap: wrap;
}

.h2v-vdh-badge {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	font-family: Arial, sans-serif;
	letter-spacing: 0.5px;
	backdrop-filter: blur(4px);
}

/* =============================================================================
   BODY SECTION
   ========================================================================== */
.h2v-vd-body-embed {
	max-width: 1200px;
	margin: 0 auto;
	background: #f4f6f6;
	padding-bottom: 40px;
}

/* Hero Image */
#h2v-vdb-hero {
	width: 100%;
	/* #Q: taller. It was 420px under a ~240px header; the header is now 76px,
	   so the photo gains what the header gave up and then some. */
	height: 560px;
	background: linear-gradient(135deg, var(--h2c-green) 0%, var(--h2c-green-dark) 100%);
	background-size: cover;
	background-position: center;
	position: relative;
	border-radius: 0 0 14px 14px;
	overflow: hidden;
}

/* #S: the hero overlay that used to be described here is gone -- the address,
   price and status are in the header again. #T then replaced the status chip
   with .h2v-vdh-state, a plain word; see the header section above. */

.h2v-vdb-photo-count {
	position: absolute;
	bottom: 24px;
	right: 24px;
	background: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	padding: 10px 18px;
	border-radius: 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	/* Above the overlay (z-index 5) and still clickable -- the overlay sets
	   pointer-events:none precisely so it cannot swallow this. */
	z-index: 10;
}

/* Snapshot Stats Card */
/* Three stats, not four — lot size was removed 2026-09-03 (we no longer
   collect it). The stat's markup is in the Webflow page and cannot be deleted
   from here, so it is hidden below and removed from the DOM by renderSnapshot.
   :has() is already used elsewhere in these billboard stylesheets. */
.h2v-vd-stat:has(#vd-lot) {
	display: none;
}

.h2v-vd-snapshot {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 32px 24px;
	margin: -24px 24px 0 24px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 5;
}

.h2v-vd-stat {
	text-align: center;
}

.h2v-vd-stat span {
	display: block;
	font-size: 34px;
	font-weight: 700;
	color: var(--h2c-green);
	margin-bottom: 6px;
}

.h2v-vd-stat label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #888;
	font-weight: 600;
}

/* Highlights */
#h2v-vd-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 32px 24px 0 24px;
}

.h2v-highlight {
	background: #ffffff;
	border-left: 4px solid var(--h2c-green);
	color: var(--h2c-green);
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	/* A flex item's default min-width is AUTO, which means it refuses to shrink
	   below its own text. A feature can be 40 characters (the wizard's cap), and
	   one long enough to exceed the container then pushed the whole page wider
	   than the viewport — taking every other card with it, which is why the
	   description looked too wide too. min-width:0 lets it shrink; break-word
	   lets the text wrap inside the chip instead of stretching it. */
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Description */
.h2v-vd-description {
	margin: 32px 24px 0 24px;
	padding: 32px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.h2v-vd-description h2 {
	font-size: 22px;
	color: var(--h2c-green);
	margin-bottom: 14px;
}

#h2v-vd-description {
	font-size: 15px;
	line-height: 1.7;
	color: #111827;
}

/* Details Grid */
.h2v-vd-details {
	margin: 32px 24px 0 24px;
	padding: 32px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.h2v-vd-details h2 {
	font-size: 22px;
	color: var(--h2c-green);
	margin-bottom: 20px;
}

#h2v-vd-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.h2v-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	background: #f8f9f9;
	border-radius: 10px;
	font-size: 14px;
}

.h2v-detail-label {
	font-weight: 600;
	color: #111827;
}

.h2v-detail-value {
	font-weight: 700;
	color: #333;
}

/* Actions */
.h2v-vd-actions {
	display: flex;
	gap: 16px;
	margin: 40px 24px 0 24px;
}

.h2v-vd-btn {
	/* THE LABEL IS ONE WORD'S WORTH OF FURNITURE, NOT PROSE (#O, 2026-09-25).
	   Reported as "VIEW DETAIL S" / "REQU EST SHOWING" -- a control whose name
	   had come apart. I could not reproduce a split INSIDE a word on the served
	   pages (overflow-wrap computes normal, there is no letter-spacing and no
	   stray soft hyphen), but I can reproduce the two-line wrap at <=320px, and
	   an uppercase centred label on two lines reads as a broken word at a
	   glance. nowrap removes the whole class either way: a button label that
	   cannot wrap cannot break, whatever font or size the reader's browser
	   decides to use. */
	white-space: nowrap;
	flex: 1;
	padding: 16px 22px;
	border: none;
	background: #ffffff;
	color: var(--h2c-green);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 11px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.h2v-vd-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.h2v-vd-btn:disabled {
	cursor: not-allowed;
}

.h2v-vd-btn-primary {
	background: linear-gradient(135deg, var(--h2c-green) 0%, var(--h2c-green-dark) 100%);
	color: #ffffff;
}

.h2v-vd-btn-primary:disabled {
	/* #P: flat, like every other gradient on these pages. #6a8284 went
	   with it -- a disabled control needs one muted colour, not two. */
	background: var(--h2c-green-muted);
}

/* Spinner animation */
.fa-spinner.fa-spin {
	animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* =============================================================================
   AGENT HEADER SECTION
   ========================================================================== */
#h2v-billboard-agent-header {
	background: var(--h2c-green);
	padding: 25px 20px;
	border-bottom: 4px solid var(--h2c-gold-bright);
	position: relative;
	font-family: Arial, sans-serif;
}

/* Broker Logo — duplicate of the rule in billboard-agent.css; the two
   files MUST stay in sync. Logo height tuned (145) so the logo +
   View-All-Listings button stack matches the agent photo's 188px
   height in the agent header. */
#h2v-billboard-agent-header .h2v-billboard-broker-logo {
	position: absolute;
	top: 25px;
	right: 20px;
	width: 180px;
	height: 145px;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	border: 2px solid var(--h2c-gold-bright);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	box-sizing: border-box;
	gap: 6px;
}

#h2v-billboard-agent-header .h2v-billboard-broker-logo .h2v-vd-logo-img {
	max-width: 100%;
	max-height: 48px;
	object-fit: contain;
	display: block;
}

#h2v-billboard-agent-header .h2v-billboard-broker-logo .h2v-vd-logo-tagline {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--h2c-green);
	line-height: 1.3;
	text-align: center;
}

#h2v-billboard-agent-header .h2v-billboard-broker-logo:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* Agent Content Layout */
#h2v-billboard-agent-header .h2v-billboard-agent-content {
	display: flex;
	align-items: flex-start;
	gap: 60px;
	min-height: 188px;
}

#h2v-billboard-agent-header .h2v-billboard-agent-photo {
	width: 180px;
	height: 180px;
	background: #dddddd no-repeat top center;
	background-size: cover;
	border: 4px solid var(--h2c-gold-bright);
	flex-shrink: 0;
}

#h2v-billboard-agent-header .h2v-billboard-agent-info {
	color: #ffffff;
	flex: 1;
}

/* Agent Identity */
#h2v-billboard-agent-header .h2v-billboard-agent-name {
	font-size: 42px;
	font-weight: 400;
	margin: 0 0 6px 0;
	letter-spacing: 1px;
	font-style: italic;
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1;
}

#h2v-billboard-agent-header .h2v-billboard-agent-title {
	font-size: 12px;
	margin-bottom: 14px;
	color: var(--h2c-gold-bright);
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#h2v-billboard-agent-header .h2v-billboard-divider {
	width: 70px;
	height: 1px;
	background: var(--h2c-gold-bright);
	margin: 16px 0;
}

/* Agent Meta */
#h2v-billboard-agent-header .h2v-billboard-agent-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}

#h2v-billboard-agent-header .h2v-billboard-agent-meta-item {
	white-space: normal;
}

/* Contact Row */
#h2v-billboard-agent-header .h2v-billboard-agent-contact-row {
	display: flex;
	align-items: center;
	gap: 36px;
	font-size: 14px;
	flex-wrap: wrap;
}

#h2v-billboard-agent-header .h2v-billboard-contact-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

#h2v-billboard-agent-header .h2v-billboard-contact-icon {
	width: 28px;
	height: 28px;
	background: rgba(212, 175, 55, 0.3);
	border-radius: 50%;
	border: 1px solid var(--h2c-gold-bright);
	flex-shrink: 0;
}

#h2v-billboard-agent-header .h2v-billboard-contact-phone {
	color: #ffffff;
	font-weight: 600;
	white-space: nowrap;
}

#h2v-billboard-agent-header .h2v-billboard-contact-btn {
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid rgba(212, 175, 55, 0.7);
	background: rgba(212, 175, 55, 0.15);
}

#h2v-billboard-agent-header .h2v-billboard-contact-btn:hover {
	background: rgba(212, 175, 55, 0.35);
}

#h2v-billboard-agent-header .h2v-secondary {
	opacity: 0.85;
}

#h2v-billboard-agent-header .h2v-billboard-contact-email {
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

#h2v-billboard-agent-header .h2v-billboard-contact-email:hover {
	text-decoration: underline;
}

/* Broker Listings Links — bottom edge aligns with agent photo bottom
   (25 + 188 = 213; 180 top + 33 height = 213). */
.h2v-billboard-broker-link.h2v-broker-link-top {
	position: absolute;
	top: 180px;
	right: 20px;
	color: var(--h2c-gold-bright);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	/* #P: sentence case, with every other control. The markup already
	   says "View All Listings" -- only the CSS was shouting. */
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.1);
	padding: 6px 12px;
	border-radius: 4px;
	border: 1px solid rgba(212, 175, 55, 0.5);
	/* #AA: backdrop-filter removed. A blur on a TEXT LINK frosts whatever
	   sits behind it, and once #X made this element position:static it sat
	   in the header's flow blurring a strip across the top of the card.
	   The element is removed in JS now; the declaration goes too, so
	   re-adding the link does not bring the strip back with it. */
	white-space: nowrap;
}

.h2v-billboard-broker-link.h2v-broker-link-top:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border-color: var(--h2c-gold-bright);
}

.h2v-billboard-broker-link-bottom-wrap {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.h2v-billboard-broker-link.h2v-broker-link-bottom {
	color: var(--h2c-gold-bright);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
	padding: 8px 14px;
	border-radius: 6px;
	background: rgba(212, 175, 55, 0.15);
	border: 1px solid rgba(212, 175, 55, 0.5);
}

.h2v-billboard-broker-link.h2v-broker-link-bottom:hover {
	background: rgba(212, 175, 55, 0.25);
	color: #ffffff;
	transform: translateX(4px);
}

.h2v-broker-link-icon {
	font-size: 16px;
}

.h2v-broker-link-arrow {
	transition: transform 0.3s ease;
}

.h2v-billboard-broker-link.h2v-broker-link-bottom:hover .h2v-broker-link-arrow {
	transform: translateX(4px);
}

/* Broker Banner */
.h2v-billboard-broker-banner {
	background: #f8f8f8;
	border-bottom: 1px solid #e0e0e0;
	padding: 12px 20px;
}

.h2v-billboard-broker-banner-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 15px;
	justify-content: space-between;
	flex-wrap: wrap;
}

.h2v-broker-banner-icon {
	font-size: 18px;
}

.h2v-broker-banner-text {
	font-size: 14px;
	color: #111827;
	font-family: Arial, sans-serif;
}

.h2v-broker-banner-text strong {
	color: var(--h2c-green);
	font-weight: 600;
}

.h2v-billboard-broker-banner-link {
	color: var(--h2c-green);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 6px 14px;
	border-radius: 4px;
	border: 1px solid var(--h2c-green);
	background: white;
	white-space: nowrap;
}

.h2v-billboard-broker-banner-link:hover {
	background: var(--h2c-green);
	color: white;
}

/* =============================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* Tablet and below */
@media (max-width: 900px) {
	#h2v-vd-details {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	#h2v-vdh-address {
		font-size: 24px;
	}
	
	#h2v-vdh-status {
		font-size: 20px;
	}

	.h2v-vd-snapshot {
		/* Was 2 columns for a 2x2 of four stats. Three stats fit one row. */
		grid-template-columns: repeat(3, 1fr);
	}

	.h2v-vd-actions {
		flex-direction: column;
	}
}

/* Mobile and agent header adjustments — center everything on narrow
   viewports so the broker logo, View All Listings button, agent name,
   tagline, and contact rows all align (mirrors billboard-agent.css). */
@media (max-width: 700px) {
	#h2v-billboard-agent-header .h2v-billboard-agent-content {
		flex-direction: column;
		align-items: center;
		gap: 25px;
		min-height: auto;
	}

	#h2v-billboard-agent-header .h2v-billboard-agent-info {
		text-align: center;
		width: 100%;
	}

	#h2v-billboard-agent-header .h2v-billboard-divider {
		margin: 16px auto;
	}

	#h2v-billboard-agent-header .h2v-billboard-agent-contact-row {
		align-items: center;
	}

	#h2v-billboard-agent-header .h2v-billboard-broker-logo {
		position: static;
		display: flex;
		margin: 0 auto 14px auto;
		width: 160px;
		height: 110px;
	}

	.h2v-billboard-broker-link.h2v-broker-link-top {
		position: static;
		display: block;
		margin: 0 auto 14px auto;
		text-align: center;
		font-size: 11px;
		padding: 5px 10px;
		width: fit-content;
	}

	.h2v-billboard-broker-banner-content {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	#h2v-vdh-address {
		font-size: 22px;
	}

	#h2v-vdh-status {
		font-size: 18px;
	}

	.h2v-vd-snapshot {
		grid-template-columns: 1fr;
		margin-top: -16px;
	}
}

/* =============================================================================
   LISTING-HEADER MOBILE FIX
   ==========================================================================
   The broker logo card is injected via JS with `position: absolute;
   right: 20px; top: 50%`. On phones it overlaps (or sits behind) the
   address — we override the inline styles to drop it below the address,
   centered. !important is required to beat the inline styles. Also
   tightens the heavy desktop padding so the page doesn't horizontally
   overflow on a 375px viewport. */
@media (max-width: 700px) {
	/* Webflow's parent container (container-69 / w-container) keeps a
	   desktop max-width on mobile, leaving big gray gutters on either
	   side of the content. Force full viewport width below 700px so
	   the embed actually uses the screen. Also collapse the section's
	   own top padding so the teal header sits flush at the top of the
	   viewport instead of leaving the body's dotted background showing. */
	section.hv-section {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
	}

	section.hv-section .container-69,
	section.hv-section .w-container {
		max-width: 100% !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.bodywbg {
		background: #ffffff !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Kill any top padding/margin on every wrapper between body and our
	   teal header. Webflow Designer often sets section/container padding
	   that creates a white band above embeds on mobile. */
	section.hv-section,
	section.hv-section .container-69,
	section.hv-section .w-container,
	section.hv-section .code-embed-100,
	section.hv-section .w-embed {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	.h2v-vd-header-embed {
		margin-top: 0 !important;
	}

	/* Detail rows: tighter, larger text, label and value sit together
	   centered instead of being thrown to opposite edges of a 400px row. */
	/* ---------------------------------------------------------------------
	   THE ACTUAL CAUSE OF THE MOBILE OVERFLOW (found 2026-09-03).

	   Webflow's own stylesheet pins the two divs that wrap this entire
	   billboard to a fixed width:

	     .code-embed-97 … .code-embed-102 { width: 900px; max-width: none; }

	   .code-embed-100 (header) and .code-embed-101 (body) are those divs, so
	   the content block was 900px wide on a 390px phone — the features and the
	   description were not too wide, the CONTAINER was, and they inherited it.
	   `max-width: none` is what defeated the ordinary max-width:100% guard.

	   Three earlier passes tightened the cards' own padding and made the
	   features stack, and none of it could have worked: nothing inside a
	   900px box can make the box narrower. The agent and brokerage pages use
	   .code-embed-44/45, which Webflow sets to width:100%, which is exactly
	   why those two pages always looked right.

	   Matched on a substring rather than the numbers: Webflow renumbers these
	   classes when the page is edited, and a hardcoded .code-embed-101 would
	   silently stop matching the day someone touches the page.
	   --------------------------------------------------------------------- */
	section.hv-section .w-embed,
	section.hv-section [class*="code-embed-"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	#h2v-vd-details {
		gap: 6px;
	}

	.h2v-detail-row {
		justify-content: center;
		gap: 12px;
		padding: 10px 14px;
		font-size: 15px;
	}

	.h2v-detail-label {
		color: #111827;
	}

	.h2v-detail-value {
		color: #111827;
	}

	/* Watch Video / Take 3D Tour shouldn't be banner-wide on phones. */
	.h2v-vd-actions {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin: 24px 16px 0 16px;
	}

	.h2v-vd-actions .h2v-vd-btn {
		max-width: 280px;
		width: 100%;
	}

	.h2v-vd-header-bar {
		padding: 20px 16px;
		text-align: center;
	}

	/* The WRAPPER now carries the positioning, so it is the thing that has to
	   go static here. The card's own overrides stay for the size change. */
	.h2v-vd-header-bar .h2v-vdh-brand-block {
		position: static !important;
		top: auto !important;
		right: auto !important;
		transform: none !important;
		margin: 16px auto 0 auto !important;
	}

	.h2v-vd-header-bar .h2v-vdh-logo-card {
		position: static !important;
		top: auto !important;
		right: auto !important;
		transform: none !important;
		margin: 0 auto !important;
		width: 140px !important;
		height: 90px !important;
	}

	#h2v-vdh-address {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.h2v-vd-details {
		margin: 24px 12px 0 12px;
		padding: 20px 16px;
	}

	.h2v-detail-row {
		padding: 10px 14px;
		font-size: 13px;
	}

	/* ---------------------------------------------------------------------
	   FEATURES + DESCRIPTION — the two cards this block forgot.
	   .h2v-vd-details beside them was given mobile spacing; these kept the
	   desktop 24px margin + 32px padding, which is 112px of horizontal chrome
	   on a 375px screen against the sibling's 56px. Matched to the sibling,
	   which is the rule when a surface already has one.
	   --------------------------------------------------------------------- */

	/* Features stack VERTICALLY on a phone. As a wrapping row, one long
	   feature sits alone on its line and the rest jump around it; as a column
	   every feature is a full-width row and reads as a list. */
	#h2v-vd-highlights {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 24px 12px 0 12px;
	}

	.h2v-vd-description {
		margin: 24px 12px 0 12px;
		padding: 20px 16px;
	}

	.h2v-vd-description h2 {
		font-size: 18px;
	}

	/* A pasted description can carry a URL or an unbroken run of characters
	   with nowhere to wrap, which would push the card wide on its own. */
	#h2v-vd-description {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/* =============================================================================
   BILLBOARD - LEAD / SHOWING REQUEST PANEL
   ========================================================================== */

#h2v-lead-panel {
	margin: 20px 0px 20px 0px;   /* increased spacing */
	padding: 32px;
	background: #ffffff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	font-family: Arial, sans-serif;

	/* NEW: subtle separation line */
	border-top: 4px solid #e6ecec;
}

/* =============================================================================
   HEADER
   ========================================================================== */

#h2v-lead-panel .h2v-lead-header {
	font-size: 22px;
	color: var(--h2c-green);
	margin-bottom: 10px;
	font-weight: 600;
}

#h2v-lead-panel .h2v-lead-subheader {
	font-size: 14px;
	color: #111827;
	margin-bottom: 24px;
}

/* =============================================================================
   FORM LAYOUT
   ========================================================================== */

#h2v-lead-panel .h2v-lead-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

#h2v-lead-panel .h2v-lead-full {
	grid-column: span 2;
}

/* =============================================================================
   INPUTS
   ========================================================================== */

#h2v-lead-panel input,
#h2v-lead-panel textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1px solid #ddd;
	font-size: 14px;
	font-family: Arial, sans-serif;
	background: #f8f9f9;
	color: #1f2937;
	outline: none;
	transition: border 0.2s ease, box-shadow 0.2s ease;
}

#h2v-lead-panel input::placeholder,
#h2v-lead-panel textarea::placeholder {
	color: #9ca3af;
	opacity: 1;
}

#h2v-lead-panel input:-webkit-autofill,
#h2v-lead-panel textarea:-webkit-autofill {
	-webkit-text-fill-color: #1f2937 !important;
	-webkit-box-shadow: 0 0 0 1000px #f8f9f9 inset !important;
	transition: background-color 5000s ease-in-out 0s;
}

#h2v-lead-panel input:focus,
#h2v-lead-panel textarea:focus {
	border-color: var(--h2c-green);
	box-shadow: 0 0 0 2px rgba(74, 124, 126, 0.15);
	background: #ffffff;
}

#h2v-lead-panel textarea {
	min-height: 110px;
	resize: vertical;
}

/* =============================================================================
   BUTTON
   ========================================================================== */

#h2v-lead-panel .h2v-lead-submit {
	/* THE LABEL IS ONE WORD'S WORTH OF FURNITURE, NOT PROSE (#O, 2026-09-25).
	   Reported as "VIEW DETAIL S" / "REQU EST SHOWING" -- a control whose name
	   had come apart. I could not reproduce a split INSIDE a word on the served
	   pages (overflow-wrap computes normal, there is no letter-spacing and no
	   stray soft hyphen), but I can reproduce the two-line wrap at <=320px, and
	   an uppercase centred label on two lines reads as a broken word at a
	   glance. nowrap removes the whole class either way: a button label that
	   cannot wrap cannot break, whatever font or size the reader's browser
	   decides to use. */
	white-space: nowrap;
	margin-top: 10px;
	padding: 16px 22px;
	border: none;
	background: linear-gradient(135deg, var(--h2c-green) 0%, var(--h2c-green-dark) 100%);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 11px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#h2v-lead-panel .h2v-lead-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* =============================================================================
   STATUS MESSAGE
   ========================================================================== */

#h2v-lead-panel .h2v-lead-status {
	margin-top: 18px;
	font-size: 14px;
	font-weight: 600;
	display: none;
}

#h2v-lead-panel .h2v-lead-success {
	color: var(--h2c-green);
}

#h2v-lead-panel .h2v-lead-error {
	color: var(--h2c-bad);
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	#h2v-lead-panel .h2v-lead-form {
		grid-template-columns: 1fr;
	}

	#h2v-lead-panel .h2v-lead-full {
		grid-column: span 1;
	}
}

/* =============================================================================
   ACTION ROW (RIGHT-ALIGNED PRIMARY CTA)
   ========================================================================== */

#h2v-lead-panel .h2v-lead-actions {
	display: flex;
	justify-content: flex-end;   /* pushes button to the right */
	align-items: center;
	margin-top: 18px;
}
/* ============================================================================
   UNDER REVIEW — page-level overlay for a listing awaiting agent sign-off.

   Deliberately a VIEW treatment over clean assets: nothing is baked into the
   photos, the video or the generated panels, so approving a listing removes
   this by flipping one field rather than regenerating the package.

   A fixed TOP bar plus a repeating diagonal wash. The wash is
   pointer-events:none and sits under the bar, so the page stays fully
   readable and clickable — the agent is reviewing it, not just looking at it.
============================================================================ */
body.h2v-under-review::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(180, 83, 9, 0.055) 0px,
		rgba(180, 83, 9, 0.055) 2px,
		rgba(180, 83, 9, 0)     2px,
		rgba(180, 83, 9, 0)     22px
	);
}

/* THE BAR IS AT THE TOP (#B4, 2026-09-24). It used to sit at the bottom,
   where an agent opening the page met the listing first and the words "not
   published yet" only if they scrolled to the end -- the wrong way round for
   the one fact they need before reading anything else.

   Still viewport-fixed, so it stays put while scrolling. Fixed means it is
   out of flow and would sit OVER the first content row, so its height is
   reserved at the HEAD of the page instead of the foot.

   --h2v-review-banner-h is measured and set by billboard-listing.js after the
   banner mounts, because the bar wraps to two lines on narrow screens and a
   single hardcoded height would under-reserve exactly where it matters most.
   The value here is the one-line fallback for the pre-measurement paint. */
body.h2v-under-review {
	padding-top: calc(
		var(--h2v-review-banner-h, 64px) + env(safe-area-inset-top, 0px)
	);
}

.h2v-review-banner {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 18px;
	background: var(--h2c-warn);
	color: #ffffff;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.h2v-review-badge {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
}

.h2v-review-text {
	font-size: 14px;
	line-height: 1.45;
}

@media (max-width: 560px) {
	.h2v-review-banner { padding: 10px 14px; gap: 8px; }
	/* Narrow screens wrap the bar; the measured var covers it, this is only
	   the fallback for the first paint. */
	body.h2v-under-review {
		padding-top: calc(
			var(--h2v-review-banner-h, 92px) + env(safe-area-inset-top, 0px)
		);
	}
	.h2v-review-text   { font-size: 13px; text-align: center; }
}

/* =============================================================================
   THE PROPERTY HEADER ON A PHONE  (#S, 2026-09-25)  — LAST ON PURPOSE
   =============================================================================
   The @media (max-width: 700px) block earlier in this file re-centres and
   re-sizes the brand block with !important, written for the old absolutely-
   positioned header. Same specificity, same !important, so the winner is
   whichever comes LAST -- and on #Q's first pass mine did not, which is why
   desktop looked right while the phone kept a 140x90 centred logo.

   Two columns become one: the address and price first, the brand block under
   them, both left-aligned. Stacking keeps the licence on one line at 360px,
   which side-by-side does not.
   ============================================================================= */
@media (max-width: 767px) {
	/* Restated here because it lived inside the #Q overlay section this pass
	   deletes -- removing that block would otherwise have quietly taken the
	   phone's hero height with it. */
	#h2v-vdb-hero { height: 400px; }
	.h2v-vd-header-bar {
		padding: 18px 16px !important;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		text-align: left !important;
	}
	.h2v-vd-header-bar .h2v-vdh-headline #h2v-vdh-address {
		font-size: 21px;
		letter-spacing: .5px;
	}
	.h2v-vdh-price { font-size: 24px; }
	/* #U: stacked as before, but centred on its own axis like the desktop
	   block. The address and price above it stay left -- they are the page's
	   heading; this is a mark, and a mark centres. */
	.h2v-vd-header-bar .h2v-vdh-brand-block {
		align-items: center !important;
		text-align: center !important;
		margin: 0 !important;
	}
	/* Same 69% step-down the desktop card just took, keeping 130:85. */
	.h2v-vd-header-bar .h2v-vdh-logo-card {
		width: 72px !important;
		height: 47px !important;
		margin: 0 !important;
	}
	.h2v-vd-header-bar .h2v-vdh-broker-name,
	.h2v-vd-header-bar .h2v-vdh-broker-license {
		text-align: center !important;
	}
}