/* ─────────────────────────────────────────────────────────────────────────────────────────
   PROPERTY SHOWCASE V2 (BRA-QGLJ07)

   Converted from the Bramlett prototype at bp-showcase.replit.app. Values are MEASURED from the
   rendered prototype (computed styles and its Tailwind classes), not estimated from screenshots.

   ISOLATION IS THE POINT OF THIS FILE'S LOCATION. It is a static file linked by StyleStack's
   `showcaseV2` stack and by nothing else, so it loads on v2 pages only. It must never be
   imported into a component: every page is served by one catch-all route, so Next would bundle
   an import into that route's CSS and ship it site-wide. The rest of the site is styled by the
   vendored production bundle, which is compiled Tailwind v3 with class names like `.py-20`;
   v2 uses `sv2-` names so the two can never meet even where both are present.

   Because no other page loads it, this file may style `html` and `body` and carry its own reset:
   v2 pages load none of the vendored CSS, so there is no other preflight underneath.

   ONE LAYOUT, TWO SKINS. Spec section 19, and measured: the prototype's dark and light pages
   have identical markup at identical height and differ only in the custom properties below.
   ───────────────────────────────────────────────────────────────────────────────────────── */

.sv2 {
  /* Dark is the default skin (spec section 6: "default luxury look"). HSL channels, as in the
     prototype, so `hsl(var(--x) / a)` gives the translucent variants it uses. */
  --background: 212 25% 15%;   /* Estate Blue #1D2630 */
  --foreground: 44 29% 94%;    /* Sand White */
  --card: 212 25% 18%;
  --primary: 108 7% 49%;       /* 5-Star Forest #788475 */
  --primary-foreground: 44 29% 94%;
  --secondary: 30 11% 60%;     /* Timeless Taupe */
  --muted: 212 20% 25%;
  --muted-foreground: 30 11% 60%;
  --accent: 171 11% 79%;       /* Service Teal */
  --border: 212 20% 25%;
  --destructive: 0 62% 30%;

  /*
   * BRAMLETT'S OWN FACES (BRA-RCW1EG), from the Adobe Fonts kit every page loads (StyleStack),
   * replacing the prototype's Space Grotesk / Work Sans / Playfair Display. Measured on the live
   * site: headings and navigation are halyard-display, body copy is halyard-text.
   *
   * The prototype's serif accents (price, city line, feature headings) become Halyard Display, in
   * italic where the prototype was italic. That mirrors the logo itself, "Bramlett *Partners*":
   * the brand's accent is Halyard's own italic, not a second family.
   *
   * The kit carries 400 and 500 only, roman and italic. So nothing here asks for 300 or 700: a
   * weight the kit lacks is synthesised by the browser, which looks smeared, especially bold.
   */
  --font-sans: 'halyard-text', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'halyard-display', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'halyard-display', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'halyard-display', 'Helvetica Neue', Arial, sans-serif;
  --nav-h: 5rem;
}

.sv2[data-theme='light'] {
  --background: 44 29% 96%;
  --foreground: 212 25% 15%;
  --card: 44 20% 99%;
  --primary: 108 12% 35%;
  --primary-foreground: 44 29% 96%;
  --secondary: 30 15% 85%;
  --muted: 44 15% 90%;
  --muted-foreground: 212 15% 45%;
  --accent: 171 15% 70%;
  --border: 212 15% 80%;
  --destructive: 0 62% 50%;
}

/* ── Reset, scoped to the v2 document ─────────────────────────────────────────────────── */

html:has(.sv2) { scroll-behavior: smooth; scroll-padding-top: var(--nav-h, 5rem); }
@media (prefers-reduced-motion: reduce) { html:has(.sv2) { scroll-behavior: auto; } }
body.sv2-body { margin: 0; }
body.sv2-body main { display: block; }

.sv2 {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*
 * Every reset rule is wrapped in :where(), which has ZERO specificity, so any component class
 * outranks it by construction. Written as plain `.sv2 button` (0,1,1) it outranked
 * `.sv2-btn--primary` (0,1,0) and silently stripped Schedule Tour's background: the same trap
 * deviations.css documents for the vendored bundle. Do not "simplify" these back.
 */
:where(.sv2) *, :where(.sv2) *::before, :where(.sv2) *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); }
:where(.sv2) :where(h1, h2, h3, p, ul, ol, figure, dl, dd, blockquote) { margin: 0; }
:where(.sv2) :where(ul, ol) { list-style: none; padding: 0; }
:where(.sv2) :where(h1, h2, h3) {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
:where(.sv2) :where(img, iframe, svg) { display: block; max-width: 100%; }
:where(.sv2) a { color: inherit; text-decoration: none; }
:where(.sv2) button { font: inherit; color: inherit; background: none; cursor: pointer; padding: 0; }
:where(.sv2) :focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

.sv2-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .sv2-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .sv2-container { padding-inline: 3rem; } }

.sv2-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Buttons: sharp corners throughout (spec section 19) ──────────────────────────────── */

.sv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.sv2-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.sv2-btn--ghost:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.sv2-btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding-inline: 1.5rem;
}
.sv2-btn--primary:hover { background: hsl(var(--primary) / 0.9); }
.sv2-btn--outline { border-color: hsl(var(--border)); }
.sv2-btn--outline:hover { border-color: hsl(var(--primary) / 0.5); }

/* ── Navigation: frosted bar that hides on scroll down (spec section 7) ───────────────── */

.sv2-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: hsl(var(--background) / 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
  transition: transform 0.3s ease;
}
.sv2-nav[data-hidden='true'] { transform: translateY(-100%); }
.sv2-nav__bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sv2-nav__address {
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.sv2-nav__links { display: none; align-items: center; gap: 1.5rem; margin-inline: 2rem; }
@media (min-width: 1024px) { .sv2-nav__links { display: flex; } }
.sv2-nav__link {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: hsl(var(--muted-foreground));
  transition: color 0.15s;
}
.sv2-nav__link:hover { color: hsl(var(--foreground)); }
.sv2-nav__ctas { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.sv2-nav__contact { display: none; }
@media (min-width: 768px) { .sv2-nav__contact { display: inline-flex; } }
.sv2-nav__tour { display: none; }
@media (min-width: 768px) { .sv2-nav__tour { display: inline-flex; } }
.sv2-nav__menu-btn { display: inline-flex; padding: 0.5rem; margin-right: -0.5rem; }
.sv2-nav__menu-btn svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) { .sv2-nav__menu-btn { display: none; } }
.sv2-nav__panel {
  display: none;
  border-top: 1px solid hsl(var(--border));
  padding-block: 0.5rem 1rem;
}
.sv2-nav[data-open='true'] .sv2-nav__panel { display: block; }
@media (min-width: 1024px) { .sv2-nav__panel, .sv2-nav[data-open='true'] .sv2-nav__panel { display: none; } }
.sv2-nav__panel a { display: block; padding: 0.75rem 0; }

/*
 * Mobile: both CTAs pinned to the bottom of the screen (spec section 7), as one edge-to-edge bar
 * (BRA-YUY6PQ), modelled on the quick-actions bar at new.dochenrealtors.com: 58px tall, an 80%
 * ground, two equal text targets split by a 39px hairline, a soft upward shadow, and the home
 * indicator's safe area added below rather than taken out of the targets.
 *
 * The ground is never the skin's --background: the bar is the brand's call to action, not more
 * page. Light skin: Estate Blue on sand. Dark skin: 5-Star Forest, because Estate Blue IS the dark
 * page and the bar vanished into it. On Forest the text is full Sand White, not the 85% used on
 * blue: Sand White on #788475 is only about 3.6:1, so the text spends no alpha of its own.
 */
.sv2-mobile-ctas {
  --bar-h: 58px;
  --bar-bg: 212 25% 15%;            /* Estate Blue */
  --bar-fg: hsl(44 29% 94% / 0.85); /* Sand White */
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: hsl(var(--bar-bg) / 0.8); /* 20% see-through, both skins */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 -4px 4px rgb(0 0 0 / 0.08);
  border-top: 1px solid hsl(44 29% 94% / 0.12);
}
.sv2-mobile-ctas__btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bar-fg);
  transition: color 0.15s;
}
.sv2-mobile-ctas__btn:hover, .sv2-mobile-ctas__btn:active { color: hsl(44 29% 94%); }
.sv2-mobile-ctas__btn:focus-visible { outline: 2px solid hsl(44 29% 94%); outline-offset: -4px; }
.sv2-mobile-ctas__divider { flex-shrink: 0; align-self: center; width: 1px; height: 39px; background: hsl(44 29% 94% / 0.5); }
.sv2:not([data-theme='light']) .sv2-mobile-ctas {
  --bar-bg: 108 7% 49%;             /* 5-Star Forest */
  --bar-fg: hsl(44 29% 94%);
}
@media (min-width: 768px) { .sv2-mobile-ctas { display: none; } }
/* The unbranded twin (BRA-RGAJWZ) has no bar, so nothing to clear. */
@media (max-width: 767.98px) { .sv2:not(.sv2--unbranded) { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }

/* ── Hero (spec section 9) ────────────────────────────────────────────────────────────── */

.sv2-hero {
  /*
   * DELIBERATE DEPARTURE FROM THE PROTOTYPE. The hero is a photo under a dark overlay in BOTH
   * skins, so its accent must not follow the theme. The prototype's light skin uses its darker
   * green here (rgb(83,100,79)), and the price measured ~2.6:1 against the darkened photo, under
   * the 3:1 minimum for large text and hard to read; the dark skin's sage clears it at ~4.5:1.
   * So the hero's label and price use the dark-skin sage in both skins. Everything else in the
   * light skin is as the prototype has it. To restore the prototype exactly, delete this line.
   */
  --hero-accent: 108 7% 49%;
  position: relative;
  height: 80vh;
  min-height: 32rem;
  width: 100%;
  overflow: hidden;
  background: #000;
}
@media (min-width: 768px) { .sv2-hero { height: 90vh; } }
.sv2-hero__media, .sv2-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv2-hero__media img { object-fit: cover; object-position: center 40%; max-width: none; }
.sv2-hero__media::before,
.sv2-hero__media::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sv2-hero__media::before { background: rgb(0 0 0 / 0.3); }
.sv2-hero__media::after { background: linear-gradient(to top, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.2), transparent); }
.sv2-hero__photos {
  position: absolute;
  top: 6rem;
  right: 1rem;
  z-index: 20;
  height: 2.5rem;
  padding-inline: 1rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 9999px;
  background: rgb(0 0 0 / 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.sv2-hero__photos:hover { background: rgb(0 0 0 / 0.6); }
@media (min-width: 768px) { .sv2-hero__photos { top: 8rem; right: 3rem; } }
.sv2-hero__photos .sv2-short { display: inline; }
.sv2-hero__photos .sv2-long { display: none; }
@media (min-width: 768px) {
  .sv2-hero__photos .sv2-short { display: none; }
  .sv2-hero__photos .sv2-long { display: inline; }
}
.sv2-hero__body {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 6rem;
  /* Phone: the whole block centres (BRA-0TQCAS). `align-items` shrink-wraps each line so the
     centring is of the TEXT, not of full-width boxes; `text-align` handles the ones that wrap. */
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .sv2-hero__body { padding-bottom: 8rem; align-items: stretch; text-align: left; }
}
/*
 * The status eyebrow ("Under Contract", "Just Listed") above the hero heading, with the short
 * rule under it (BRA-WBN9UM). Sized and tracked past the shared `.sv2-label` so it reads as a
 * header line rather than a caption, and white like the heading and city line beneath it --
 * every one of them sits on the same darkened photo, in both themes, so the accent colour the
 * eyebrow used to take was the only thing in the stack that changed with the theme.
 *
 * The rule is a pseudo-element, so it exists only when there IS a status and needs no markup.
 */
.sv2-hero__label {
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  margin-bottom: 0.75rem;
}
.sv2-hero__label::after {
  content: '';
  display: block;
  width: 50px;
  border-top: solid 1.5px #fff;
  margin-top: 15px;
  margin-inline: auto;
}
@media (min-width: 768px) { .sv2-hero__label::after { margin-inline: 0; } }
.sv2-hero__title {
  color: #fff;
  font-size: 2.25rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) { .sv2-hero__title { font-size: 4.5rem; margin-bottom: 0.75rem; } }
@media (min-width: 1024px) { .sv2-hero__title { font-size: 6rem; } }
.sv2-hero__city {
  font-family: var(--font-accent);
  color: rgb(255 255 255 / 0.8);
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) { .sv2-hero__city { font-size: 1.5rem; line-height: 2rem; margin-bottom: 1.5rem; } }
@media (min-width: 1024px) { .sv2-hero__city { font-size: 1.875rem; line-height: 2.25rem; } }
.sv2-hero__facts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: rgb(255 255 255 / 0.9);
  font-weight: 400; /* prototype 300; the kit has no light weight */
  letter-spacing: 0.025em;
  font-size: 1.125rem;
  line-height: 1.75rem;
  align-items: center;
}
@media (min-width: 768px) {
  .sv2-hero__facts { flex-direction: row; align-items: center; gap: 1rem; font-size: 1.25rem; }
}
.sv2-hero__price {
  font-family: var(--font-accent);
  font-style: italic;
  color: hsl(var(--hero-accent, var(--primary)));
  font-size: 1.5rem;
  line-height: 2rem;
}
@media (min-width: 768px) {
  .sv2-hero__price { font-size: 1.875rem; line-height: 2.25rem; margin-right: 1rem; }
}
.sv2-hero__stats {
  display: flex;
  /* Wraps (BRA-XKE1HZ): multi-unit listings state beds and baths per unit
     ("Unit A: 2 / Unit B: 3"), which no longer collapse to one number and are too long for
     one line on a phone. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  justify-content: center;
}
@media (min-width: 768px) {
  .sv2-hero__stats { gap: 0.25rem 1.5rem; margin-top: 0; font-size: 1rem; line-height: 1.5rem; }
}
.sv2-hero__divider { width: 1px; height: 1rem; background: rgb(255 255 255 / 0.3); }
@media (min-width: 768px) { .sv2-hero__divider { display: none; } }
/* Per-unit beds/baths (BRA-XYSTDT): one stat per line on phones, no dividers to leave hanging. */
@media (max-width: 767.98px) {
  .sv2-hero__stats--stack { flex-direction: column; gap: 0.35rem; }
  .sv2-hero__stats--stack .sv2-hero__divider { display: none; }
}
.sv2-hero__scroll {
  display: none;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  color: rgb(255 255 255 / 0.5);
}
.sv2-hero__scroll svg { width: 1.5rem; height: 1.5rem; animation: sv2-bob 2s ease-in-out infinite; }
@media (min-width: 768px) { .sv2-hero__scroll { display: block; } }
@keyframes sv2-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/*
 * No photos yet: "Professional photography coming soon" (BRA-X0LYS3, replacing BRA-WHHH5G's
 * plain band). 541 of 1,257 listings had no photos at the v2 switch, plus 9 whose only image was
 * the legacy placeholder banner. The hero tells the buyer the shoot is on its way: the address
 * block beside a line-drawn house in a camera viewfinder, on Estate Blue lit with a Forest glow.
 *
 * Dark ground in BOTH skins, like the photo hero, because the hero's type is white by design.
 * Everything is in flow (no absolute layers), so nothing can collide at any width: stacked and
 * centred on phones, two columns from 768px. The selectors pair `.sv2-hero--pending` with the
 * class they override, so they outrank the photo hero's rules regardless of source order.
 */
.sv2-hero--pending {
  height: auto;
  min-height: 0;
  background:
    radial-gradient(52rem 30rem at 80% 40%, hsl(108 7% 49% / 0.22), transparent 70%),
    radial-gradient(36rem 22rem at 0% 110%, hsl(171 11% 79% / 0.07), transparent 70%),
    hsl(212 25% 13%);
  border-bottom: 1px solid hsl(44 29% 94% / 0.08);
}
.sv2-hero--pending .sv2-hero__body {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 2.5rem);
  padding-bottom: 3.5rem;
}
.sv2-pending__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sv2-pending__note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid hsl(44 29% 94% / 0.22);
  border-radius: 9999px;
  background: hsl(44 29% 94% / 0.06);
  color: hsl(44 29% 94% / 0.92);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
}
.sv2-pending__note svg { width: 1rem; height: 1rem; flex-shrink: 0; color: hsl(171 11% 79%); }

/* The viewfinder: corner brackets around the drawing, 4:3 like a frame of film. */
.sv2-pending__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 16rem);
  aspect-ratio: 4 / 3;
  color: hsl(44 29% 94% / 0.72);
}
.sv2-pending__art { width: 74%; height: auto; }
.sv2-pending__sparkle { color: hsl(171 11% 79%); animation: sv2-twinkle 3.2s ease-in-out infinite; }
.sv2-pending__sparkle--2 { animation-delay: 1.1s; }
.sv2-pending__sparkle--3 { animation-delay: 2.1s; }
@keyframes sv2-twinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sv2-pending__sparkle { animation: none; } }
.sv2-pending__corner {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border: 0 solid hsl(44 29% 94% / 0.55);
}
.sv2-pending__corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.sv2-pending__corner--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.sv2-pending__corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.sv2-pending__corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

@media (min-width: 768px) {
  .sv2-hero--pending .sv2-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 4rem;
    min-height: 72vh;
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 5rem;
  }
  .sv2-pending__text { grid-column: 1; grid-row: 1; align-items: flex-start; text-align: left; }
  .sv2-pending__frame { grid-column: 2; grid-row: 1; justify-self: end; width: min(100%, 26rem); }
  .sv2-pending__corner { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .sv2-hero__scroll svg { animation: none; } }

/* ── Sections ─────────────────────────────────────────────────────────────────────────── */

/*
 * Section rhythm: 3rem on phones, 5rem from 768px up (BRA-NQFSEP). Mobile-first like the rest
 * of this stylesheet, and 768px is the same breakpoint the hero and the facts row turn at.
 *
 * These three rules are the page's ENTIRE set of block padding -- .sv2-section covers details,
 * video, schools, walkability and documents. `.sv2-map` is deliberately absent: it is a
 * full-bleed 500px iframe with no padding to shrink.
 */
.sv2-section { padding-block: 3rem; border-top: 1px solid hsl(var(--border)); }
.sv2-section--card { background: hsl(var(--card)); }
.sv2-section--tint { background: hsl(var(--secondary) / 0.2); }
.sv2-section__title { font-size: 1.875rem; line-height: 2.25rem; margin-bottom: 2rem; }
.sv2-muted { color: hsl(var(--muted-foreground)); }

/* Details: description and features at 7/12, sticky spec card at 5/12. */
.sv2-details { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .sv2-details { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sv2-details__main { grid-column: span 7 / span 7; }
  .sv2-details__aside { grid-column: span 5 / span 5; padding-left: 3rem; }
}
@media (min-width: 768px) { .sv2-details .sv2-section__title { font-size: 2.25rem; line-height: 2.5rem; } }
.sv2-prose {
  color: hsl(var(--muted-foreground));
  /* 1rem, not the 1.125rem this started at (BRA-YBIOSM): the About the Property copy is the
     longest run of text on the page and was setting larger than the spec card beside it. */
  font-size: 1rem;
  line-height: 1.625;
  max-width: 65ch;
  overflow-wrap: break-word;
}
/* `PropertyRichText` emits plain p/ul/li/a (and verbatim HTML on 92 legacy rows), so spacing
   is per element. Lists get their bullets back: the reset above strips them. */
.sv2-prose :where(p, ul, ol, blockquote, div > div) { margin: 0 0 1.5rem; }
.sv2-prose > :last-child, .sv2-prose > * > :last-child { margin-bottom: 0; }
.sv2-prose :where(ul) { list-style: disc; padding-left: 1.25rem; }
.sv2-prose :where(ol) { list-style: decimal; padding-left: 1.25rem; }
.sv2-prose :where(li) { margin-bottom: 0.375rem; }
.sv2-prose :where(li) ::marker { color: hsl(var(--primary)); }
.sv2-prose :where(ul ul) { margin: 0.375rem 0 0; }
.sv2-prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.sv2-prose a:hover { color: hsl(var(--foreground)); }
.sv2-prose :where(strong, b) { color: hsl(var(--foreground)); font-weight: 500; }
.sv2-prose :where(blockquote) { border-left: 2px solid hsl(var(--primary)); padding-left: 1rem; font-style: italic; }
.sv2-features { margin-top: 3rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .sv2-features { grid-template-columns: 1fr 1fr; } }
.sv2-features h3 {
  font-family: var(--font-accent);
  font-style: italic;
  letter-spacing: normal;
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1rem;
}
.sv2-features ul { display: grid; gap: 0.5rem; }
.sv2-features li { display: flex; align-items: center; gap: 0.5rem; color: hsl(var(--muted-foreground)); }
.sv2-features li::before {
  content: '';
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  background: hsl(var(--primary));
}
.sv2-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  padding: 2rem;
}
@media (min-width: 1024px) { .sv2-details .sv2-card { position: sticky; top: 8rem; } }
.sv2-card h3 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 1.5rem; }
/*
 * The spec rows are separated by their own bottom border, so a grid `gap` between them lands
 * on ONE side of each rule: a row had 1.75rem above it (gap + padding) and 0.75rem below,
 * which read as every row sitting high in its slot -- worst on Address, whose value wraps to
 * two lines (BRA-WUV4IF). The gap is gone and the padding carries the whole rhythm, so the
 * space above and below a row is the same 1.25rem and the row centres between its rules.
 *
 * The last row drops its border: it is a separator with nothing after it to separate.
 */
.sv2-specs { display: grid; }
.sv2-specs div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
}
.sv2-specs div:last-child { border-bottom: 0; padding-bottom: 0; }
.sv2-specs dt { color: hsl(var(--muted-foreground)); }
.sv2-specs dd { margin: 0; text-align: right; }
.sv2-specs .sv2-strong { font-weight: 500; }

/* Gallery: masonry grid, every third photo full width (spec section 8). */
.sv2-gallery { padding-block: 3rem; background: hsl(var(--background)); }
.sv2-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sv2-grid { grid-template-columns: 1fr 1fr; } }
.sv2-tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  /* Seen only until a lazy-loaded photo arrives: without it an unloaded tile is invisible, which
     on a slow connection reads as a broken page. The photo covers it completely once loaded. */
  background: hsl(var(--muted));
}
@media (min-width: 768px) {
  .sv2-tile { aspect-ratio: 3 / 2; }
  .sv2-tile--full { grid-column: span 2 / span 2; }
}
.sv2-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  transition: transform 0.7s ease;
}
.sv2-tile__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0);
  opacity: 0;
  transition: background-color 0.5s, opacity 0.5s;
}
.sv2-tile__veil span {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  background: rgb(0 0 0 / 0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sv2-tile:hover img, .sv2-tile:focus-visible img { transform: scale(1.05); }
.sv2-tile:hover .sv2-tile__veil, .sv2-tile:focus-visible .sv2-tile__veil { background: rgb(0 0 0 / 0.2); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sv2-tile img { transition: none; } }

/* Video tour. */
.sv2-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  background: hsl(var(--secondary) / 0.3);
  border-radius: 0.5rem;
  overflow: hidden;
}
.sv2-video iframe { width: 100%; height: 100%; border: 0; }

/* GreatSchools. */
.sv2-heading-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.sv2-heading-row .sv2-section__title { margin-bottom: 0; }
.sv2-heading-row > svg { width: 2rem; height: 2rem; color: hsl(var(--primary)); flex-shrink: 0; }
.sv2-schools { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sv2-schools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv2-school {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.15s;
}
.sv2-school:hover { border-color: hsl(var(--primary) / 0.3); }
.sv2-school__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sv2-school h3 { font-family: var(--font-sans); letter-spacing: normal; font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; }
.sv2-school p { font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.sv2-rating {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  font-weight: 500; /* prototype 700; the kit stops at 500 */
  color: #fff;
  background: #ca8a04; /* 6-7 */
}
.sv2-rating[data-band='high'] { background: #16a34a; }
.sv2-rating[data-band='low'] { background: #dc2626; }
.sv2-rating[data-band='none'] { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.sv2-bar { margin-top: auto; width: 100%; height: 0.375rem; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.sv2-bar span { display: block; height: 100%; border-radius: 9999px; background: #eab308; }
.sv2-bar span[data-band='high'] { background: #22c55e; }
.sv2-bar span[data-band='low'] { background: #ef4444; }
.sv2-note { margin-top: 1rem; font-size: 0.75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }

/* Walkability. */
/* 48rem, not the prototype's 42rem: at 42rem each card is 320px, which leaves the title ~136px
   beside the 96px ring, so "Walk Score" wrapped while "Bike Score" did not. */
.sv2-walk { display: grid; gap: 2rem; max-width: 48rem; }
@media (min-width: 768px) { .sv2-walk { grid-template-columns: 1fr 1fr; } }
.sv2-section--walk .sv2-section__title { margin-bottom: 3rem; }
.sv2-score {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sv2-ring { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; }
.sv2-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sv2-ring__track { stroke: hsl(var(--muted)); }
.sv2-ring__fill { stroke: hsl(var(--primary)); stroke-linecap: round; }
.sv2-ring strong { position: relative; font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.sv2-score__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.sv2-score__head svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); flex-shrink: 0; }
.sv2-score h3 { font-family: var(--font-sans); letter-spacing: normal; font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; white-space: nowrap; }
.sv2-score .sv2-score__desc { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; }

/* Documents. */
.sv2-docs { display: grid; gap: 1rem; }
@media (min-width: 768px) { .sv2-docs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sv2-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv2-doc {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  transition: border-color 0.15s;
}
.sv2-doc:hover { border-color: hsl(var(--primary) / 0.3); }
.sv2-doc__icon {
  flex-shrink: 0;
  padding: 0.75rem;
  border-radius: 9999px;
  background: hsl(var(--muted));
  color: hsl(var(--primary));
  transition: background-color 0.15s, color 0.15s;
}
.sv2-doc__icon svg { width: 1.5rem; height: 1.5rem; }
.sv2-doc:hover .sv2-doc__icon { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.sv2-doc__name { font-weight: 500; margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.sv2-doc__kind { color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }
.sv2-doc__open { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: hsl(var(--primary)); }
.sv2-doc__open svg { width: 0.75rem; height: 0.75rem; }

/* Map: full-bleed, 500px (the prototype's height; its own map never loaded). */
.sv2-map { height: 500px; width: 100%; border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.sv2-map iframe { width: 100%; height: 100%; border: 0; }

/* Agent footer. */
.sv2-footer { padding-block: 3rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
@media (min-width: 768px) {
  .sv2-section, .sv2-gallery, .sv2-footer { padding-block: 5rem; }
}
.sv2-footer__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2rem; }
@media (min-width: 768px) { .sv2-footer__inner { flex-direction: row; } }
.sv2-agent { display: flex; align-items: center; gap: 1.5rem; }
.sv2-agent__photo { width: 5rem; height: 5rem; border-radius: 9999px; object-fit: cover; border: 1px solid hsl(var(--border)); flex-shrink: 0; }
.sv2-agent__name { font-family: var(--font-accent); letter-spacing: normal; font-size: 1.125rem; line-height: 1.75rem; }
.sv2-agent__title { color: hsl(var(--primary)); font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.sv2-agent__lines { display: grid; gap: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.sv2-agent__lines a:hover { color: hsl(var(--foreground)); }
.sv2-brand { display: flex; justify-content: center; color: hsl(var(--foreground)); }
@media (min-width: 768px) { .sv2-brand { justify-content: flex-end; } }
/* The horizontal "Bramlett Partners" wordmark (public/new-images/logo-image.svg), inlined in
   currentColor so it is Sand White on the dark skin and Estate Blue on the light one. */
.sv2-brand svg { width: 13rem; height: auto; max-width: 100%; }
@media (min-width: 768px) { .sv2-brand svg { width: 15rem; } }
/* The existing showcase footer's line (components/property/PropertyFooter.tsx): the copyright
   mark, the year, Bramlett Partners, All Rights Reserved. */
.sv2-copyright {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}
.sv2-copyright svg { width: 15px; height: 14px; flex-shrink: 0; }
.sv2-copyright strong { font-weight: 500; color: hsl(var(--foreground)); }

/* ── Lightbox (spec section 8) ────────────────────────────────────────────────────────── */

.sv2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgb(0 0 0 / 0.95);
  color: #fff;
}
.sv2-lightbox[data-open='true'] { display: flex; align-items: center; justify-content: center; }
.sv2-lightbox__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem 1rem 9rem; }
@media (min-width: 768px) { .sv2-lightbox__stage { padding: 4rem 5rem 7rem; } }
.sv2-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sv2-lightbox__close { position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; z-index: 3; padding: 0.5rem; opacity: 0.7; }
.sv2-lightbox__close:hover { opacity: 1; }
.sv2-lightbox__close svg { width: 1.5rem; height: 1.5rem; }
.sv2-lightbox__arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 9999px;
  background: rgb(0 0 0 / 0.4);
}
.sv2-lightbox__arrow:hover { background: rgb(0 0 0 / 0.7); }
.sv2-lightbox__arrow svg { width: 1rem; height: 1rem; }
.sv2-lightbox__arrow--prev { left: 1rem; }
.sv2-lightbox__arrow--next { right: 1rem; }
@media (min-width: 768px) { .sv2-lightbox__arrow { display: inline-flex; } }
.sv2-lightbox__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5rem;
  z-index: 2;
  padding-block: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 0.8);
  background: rgb(0 0 0 / 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .sv2-lightbox__count { bottom: 1rem; left: 50%; right: auto; transform: translateX(-50%); padding-inline: 1rem; background: none; backdrop-filter: none; } }
.sv2-lightbox__ctas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: hsl(var(--background) / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}
.sv2-lightbox__ctas .sv2-btn { flex: 1; }
@media (min-width: 768px) {
  .sv2-lightbox__ctas {
    left: 50%;
    right: auto;
    bottom: 3rem;
    transform: translateX(-50%);
    padding: 0.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    background: rgb(0 0 0 / 0.8);
    color: #fff;
  }
  .sv2-lightbox__ctas .sv2-btn { flex: none; border-radius: 9999px; }
}

/* ── Dialogs: Contact Agent and Schedule Tour ─────────────────────────────────────────── */

.sv2-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}
.sv2-dialog::backdrop { background: rgb(0 0 0 / 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sv2-dialog__inner { padding: 2rem; display: grid; gap: 1.25rem; }
.sv2-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sv2-dialog__head h2 { font-size: 1.5rem; line-height: 2rem; }
.sv2-dialog__x { padding: 0.25rem; opacity: 0.7; }
.sv2-dialog__x:hover { opacity: 1; }
.sv2-dialog__x svg { width: 1.25rem; height: 1.25rem; }
.sv2-contact-row { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); overflow-wrap: anywhere; }
.sv2-contact-row svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); flex-shrink: 0; }
.sv2-contact-row a { font-weight: 500; }
.sv2-contact-row a:hover { color: hsl(var(--primary)); }

.sv2-form { display: grid; gap: 1rem; }
.sv2-form__row { display: grid; gap: 1rem; }
@media (min-width: 480px) { .sv2-form__row { grid-template-columns: 1fr 1fr; } }
.sv2-field { display: grid; gap: 0.375rem; }
.sv2-field label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.sv2-field input, .sv2-field select, .sv2-field textarea {
  width: 100%;
  font: inherit;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: 0.75rem;
}
.sv2-field input:focus, .sv2-field select:focus, .sv2-field textarea:focus { outline: none; border-color: hsl(var(--primary)); }
.sv2-field textarea { min-height: 6rem; resize: vertical; }
.sv2-form__error { color: hsl(var(--destructive)); font-size: 0.875rem; }
.sv2-form__fine { font-size: 0.75rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.sv2-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sv2-form .sv2-btn--primary { width: 100%; min-height: 3rem; }
.sv2-form .sv2-btn--primary[disabled] { opacity: 0.6; cursor: progress; }