/* Harborview Commons — original design system.
   A refined coastal-contemporary identity: flat parchment/teal colour bands,
   a characterful serif display face paired with a plain grotesk for body
   copy and UI chrome, tight poster-style section headlines, hairline
   borders with near-flat shadows at rest, pill-shaped marketing CTAs
   contrasted against small-radius utility controls, and a big/small radius
   contrast between showcase photography and interactive chrome.
   Palette/type/spacing take general inspiration from modern multifamily
   marketing sites but all values below are original, not copied from any
   reference site. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/worksans-variable.woff2') format('woff2');
}

:root {
  /* Color */
  --hv-ink: #1b211d;
  --hv-deep: #143430;
  --hv-teal: #33645c;
  --hv-teal-light: #5a8a81;
  --hv-brass: #c79552;
  --hv-brass-dark: #9c6a2e;
  --hv-cream: #f7f1e6;
  --hv-sand: #efe4d0;
  --hv-white: #ffffff;
  --hv-line: #e1d5ba;
  --hv-success: #2f7a52;
  --hv-error: #b8452a;
  --hv-fp-wall: #b9a67c;
  --hv-fp-room: #fdfbf6;

  /* Type — Fraunces (a characterful variable serif) for headings/display
     numbers, Work Sans for body copy and UI chrome. Both self-hosted
     (public/fonts) so there's no CDN dependency; the system stacks behind
     each are just the loading/offline fallback. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing rhythm — tighter, more contemporary fluid-feeling scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 5.5rem;

  --container-w: 1200px;
  --radius: 4px;          /* small, flat radius for buttons/inputs/badges/utility chrome */
  --radius-lg: 24px;       /* large radius for showcase photography/media cards — deliberate contrast */
  --shadow-soft: 0 1px 2px rgba(17, 26, 23, 0.07), 0 10px 24px rgba(17, 26, 23, 0.07);
  --shadow-lift: 0 20px 44px rgba(17, 26, 23, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--hv-ink);
  background: var(--hv-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  color: var(--hv-deep);
}
h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0 0 var(--space-sm); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hv-brass-dark);
  margin-bottom: var(--space-xs);
  display: inline-block;
}
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
section { padding: var(--space-2xl) 0; scroll-margin-top: 88px; }
@media (max-width: 720px) {
  section { padding: var(--space-xl) 0; scroll-margin-top: 72px; }
}
.section-head {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.section-head p { color: var(--hv-teal); font-size: 1.05rem; }
.alt-bg { background: var(--hv-sand); }

/* Buttons — pill-shaped, uppercase, semibold marketing CTAs; small
   flat-radius outline/ghost buttons (below) are the deliberate exception. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.85rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; box-shadow: none; transform: none; }
.btn-primary { background: var(--hv-brass); color: var(--hv-white); }
.btn-primary:hover { background: var(--hv-brass-dark); box-shadow: var(--shadow-soft); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.7); border-width: 1.5px; color: var(--hv-white); }
.btn-outline:hover { background: rgba(255,255,255,0.14); border-color: var(--hv-white); }
.btn-dark {
  background: transparent;
  border: 1.5px solid var(--hv-teal);
  border-radius: var(--radius);
  color: var(--hv-teal);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.15rem;
}
.btn-dark:hover { background: var(--hv-teal); color: var(--hv-white); box-shadow: none; }
.btn-small { padding: 0.55rem 1.1rem; font-size: 0.78rem; }
.btn-block { width: 100%; }

/* Header / nav */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  color: var(--hv-white);
  padding: 1.35rem 0;
  transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease, backdrop-filter 0.25s ease;
}
.site-header.scrolled {
  background: rgba(20, 45, 41, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.85rem 0;
  box-shadow: var(--shadow-soft);
}
/* Home page only: nav stays out of the way of the full-bleed hero and
   reveals itself once the visitor scrolls past it — visibility (not just
   opacity) is included in the transition so the hidden nav links are
   genuinely untabbable/unclickable until then, not just invisible. */
.site-header.hero-nav {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease,
    background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease, backdrop-filter 0.25s ease;
}
.site-header.hero-nav.scrolled {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--hv-white);
  flex: none;
}
.logo-mark {
  display: flex;
  width: 30px; height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--hv-brass);
}
.logo-mark svg { width: 20px; height: 20px; }
.logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--hv-brass); }
.nav-cta-item { margin-left: var(--space-xs); padding-left: var(--space-md); border-left: 1px solid rgba(255,255,255,0.2); }
.nav-cta-item .btn { text-decoration: none; }
.nav-phone { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav-phone svg { width: 16px; height: 16px; flex: none; }
/* Desktop header: keep the phone compact (icon only). The full number stays
   visible in the slide-in mobile menu (below), the contact panel, and footer. */
.nav-phone-num { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--hv-white);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(8, 14, 13, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

/* The full nav (5 links + phone + CTA) can't fit alongside the logo below
   ~1200px, so the slide-in menu takes over there rather than at 860px. */
@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 78vw);
    background: var(--hv-deep);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-lg);
    box-shadow: var(--shadow-lift);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 450;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1rem; }
  .nav-phone-num { display: inline; } /* full number shown in the slide-in menu */
  .nav-cta-item { margin-left: 0; padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.2); padding-top: var(--space-lg); width: 100%; }
  .nav-cta-item .btn { width: 100%; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--hv-white);
  background: var(--hv-ink);
  overflow: hidden;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14,24,22,0.15) 0%, rgba(14,24,22,0.25) 55%, rgba(14,24,22,0.82) 100%);
}
.hero-mute-toggle {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(20,45,41,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--hv-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hero-mute-toggle svg { width: 18px; height: 18px; }
.hero-mute-toggle .hero-mute-x { display: none; }
.hero-mute-toggle[aria-pressed="true"] .hero-mute-waves { display: none; }
.hero-mute-toggle[aria-pressed="true"] .hero-mute-x { display: block; }
.hero-mute-toggle:hover { background: rgba(20,45,41,0.7); }
.hero-inner {
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  max-width: var(--container-w);
  margin: 0 auto;
  width: 100%;
}
.hero-tag { color: rgba(255,255,255,0.85); }
.hero h1 { color: var(--hv-white); max-width: 14ch; text-transform: none; }
.hero-sub {
  max-width: 46ch;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-lg);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-meta {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.25);
  flex-wrap: wrap;
}
.hero-meta div strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.hero-meta div span { font-size: 0.8rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}
.about-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-media-group { position: relative; }
.about-media-accent {
  position: absolute;
  left: -8%;
  bottom: -10%;
  width: 44%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 6px solid var(--hv-cream);
}
.about-media-accent img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .about-media-accent {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: var(--space-md);
    border-width: 0;
  }
}
.about-highlights {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.about-highlights li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.98rem;
  color: var(--hv-teal);
}
.about-highlights li::before {
  content: '';
  flex: none;
  width: 8px; height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--hv-brass);
}

/* Amenities */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 980px) { .amenities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .amenities-grid { grid-template-columns: 1fr; } }
.amenity-card {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.amenity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.amenity-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--hv-sand);
  color: var(--hv-teal);
  margin-bottom: var(--space-sm);
}
.amenity-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.amenity-card p { font-size: 0.92rem; color: var(--hv-teal); margin: 0; }

/* Amenities page — photographed signature spaces, bento-style */
.amen-hero .amen-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-photo-credit {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  margin: 0;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  text-align: right;
}
.hero-photo-credit a { color: rgba(255,255,255,0.75); text-decoration: underline; }
.hero-photo-credit a:hover { color: var(--hv-white); }
.amen-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  grid-auto-flow: dense;
  gap: var(--space-md);
}
.amen-feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}
.amen-feature:hover { box-shadow: var(--shadow-lift); }
.amen-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.amen-feature:hover img { transform: scale(1.045); }
.amen-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,14,13,0.05) 0%, rgba(8,14,13,0.15) 35%, rgba(8,14,13,0.55) 65%, rgba(8,14,13,0.9) 100%);
}
.amen-feature-body { position: relative; z-index: 1; padding: var(--space-md); }
.amen-feature-body h3 { color: var(--hv-white); margin-bottom: 0.3rem; font-size: 1.15rem; }
.amen-feature-body p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.85); max-width: 34ch; }
.amen-feature.is-large { grid-column: span 2; grid-row: span 2; }
.amen-feature.is-large .amen-feature-body h3 { font-size: 1.5rem; }
.amen-feature.is-large .amen-feature-body p { font-size: 0.95rem; max-width: 38ch; }
@media (max-width: 980px) {
  .amen-feature-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .amen-feature.is-large { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .amen-feature-grid { grid-template-columns: 1fr; }
  .amen-feature.is-large { grid-column: span 1; }
}

.cta-band-actions { display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }

/* Floor plans */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}
.plan-card {
  background: var(--hv-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hv-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}
.plan-card:hover { box-shadow: var(--shadow-lift); }
.plan-media {
  aspect-ratio: 16 / 11;
  position: relative;
}
.plan-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--hv-deep);
  color: var(--hv-white);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
}
.plan-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.plan-name { font-size: 1.2rem; margin: 0; text-transform: none; }
.plan-specs {
  display: flex;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--hv-teal);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hv-line);
}
.plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--hv-brass-dark);
  margin: 0.2rem 0 0.4rem;
}
.plan-price span { font-family: var(--font-body); font-size: 0.75rem; color: var(--hv-teal); font-weight: 600; text-transform: none; }
.plan-body .btn { margin-top: auto; align-self: flex-start; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: var(--space-xs);
}
.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: flex-end;
  padding: 0.75rem 1rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  transition: box-shadow 0.25s ease;
}
.gallery-item:hover { box-shadow: var(--shadow-lift); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,14,13,0.62) 100%);
}
.gallery-item span { position: relative; z-index: 1; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-item.tall { grid-row: span 1; }
}

/* ============ Dedicated gallery page (gallery.html) ============ */
.gallery-page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  color: var(--hv-white);
  background: var(--hv-ink);
  overflow: hidden;
}
.gallery-page-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery-page-hero .hero-vignette {
  background: linear-gradient(180deg, rgba(14,24,22,0.35) 0%, rgba(14,24,22,0.3) 45%, rgba(14,24,22,0.9) 100%);
}
.gallery-page-hero-inner {
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) var(--space-md) var(--space-xl);
  max-width: var(--container-w);
  margin: 0 auto;
  width: 100%;
}
.gallery-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  margin-bottom: var(--space-md);
  transition: color 0.2s ease;
}
.gallery-back-link:hover { color: var(--hv-white); }
.gallery-page-hero h1 { color: var(--hv-white); max-width: 18ch; text-transform: none; }
.gallery-page-hero-sub {
  max-width: 50ch;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
}
.gallery-count-meta {
  margin-top: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gallery-page-body { padding: var(--space-xl) 0 var(--space-2xl); }
.gallery-page-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.full-gallery-grid {
  grid-auto-rows: 260px;
  gap: var(--space-sm);
}
@media (max-width: 860px) { .full-gallery-grid { grid-auto-rows: 190px; } }

.full-gallery-item { transition: box-shadow 0.25s ease, transform 0.35s ease; }
.full-gallery-item .hv-photo img { transition: transform 0.5s ease; }
.full-gallery-item:hover .hv-photo img { transform: scale(1.05); }
.full-gallery-item.is-hidden { display: none; }
.gallery-item-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  background: rgba(255,255,255,0.92);
  color: var(--hv-deep);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
}

.gallery-cta-band {
  margin-top: var(--space-2xl);
  background: linear-gradient(135deg, var(--hv-deep), #0e211d);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--hv-white);
}
.gallery-cta-band h2 { color: var(--hv-white); }
.gallery-cta-band p { color: rgba(255,255,255,0.78); max-width: 46ch; margin: 0 auto var(--space-md); }
.gallery-cta-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }

/* Neighborhood */
.hood-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 860px) { .hood-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }
.hood-map {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--hv-sand);
}
#hoodMap { width: 100%; height: 100%; }
.hv-map-pin span {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--hv-brass);
  border: 2px solid var(--hv-white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.hv-map-pin--home span {
  width: 20px; height: 20px;
  background: var(--hv-deep);
  border-color: var(--hv-brass);
}
.leaflet-popup-content-wrapper { border-radius: var(--radius); font-family: var(--font-body); }
.leaflet-popup-content { font-size: 0.85rem; color: var(--hv-ink); }
.hood-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.hood-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.85rem 0.6rem;
  margin: 0 -0.6rem;
  border-bottom: 1px solid var(--hv-line);
  border-radius: var(--radius);
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.hood-list li:hover { background: rgba(199,149,82,0.1); padding-left: 1rem; }
.hood-list li.active { background: rgba(199,149,82,0.16); }
.hood-list li.active b { color: var(--hv-brass-dark); }
.hood-list li b { color: var(--hv-deep); }
.hood-list li span { color: var(--hv-brass-dark); font-weight: 600; white-space: nowrap; }

/* Contact / inquiry */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
}
@media (max-width: 940px) { .contact-wrap { grid-template-columns: 1fr; gap: var(--space-lg); } }
.contact-info { color: var(--hv-white); }
.contact-info a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.28); }
.contact-info a:hover { color: var(--hv-brass); border-color: var(--hv-brass); }
.contact-panel {
  background: var(--hv-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-md);
}
.contact-panel .section-head { color: var(--hv-white); }
.contact-panel .section-head p { color: rgba(255,255,255,0.75); }
.contact-panel h2 { color: var(--hv-white); }
.agent-card {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: var(--space-sm);
  margin-top: var(--space-md);
}
.agent-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--hv-brass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  flex: none;
}
.agent-card div span { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.65); }

.form-card {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lift);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
/* .field doubles as a <fieldset> wrapper for pill-button groups (Bedrooms/
   Bathrooms/Parking) so screen readers announce a group label — reset the
   UA fieldset/legend chrome so it matches the plain-div .field look. */
.field { margin-bottom: var(--space-sm); border: 0; padding: 0; min-width: 0; }
.field label,
.field legend {
  display: block;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hv-teal);
  margin-bottom: 0.35rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--hv-line);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--hv-cream);
  color: var(--hv-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--hv-brass);
  box-shadow: 0 0 0 3px rgba(199, 149, 82, 0.22);
  background: var(--hv-white);
}
.field textarea { resize: vertical; min-height: 90px; }
.field-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--hv-teal); }
.field-consent input { width: auto; margin-top: 0.2rem; }
.field-error { color: var(--hv-error); font-size: 0.8rem; margin-top: 0.3rem; display: none; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--hv-error); box-shadow: 0 0 0 3px rgba(184, 69, 42, 0.18); }
.field.invalid .field-error { display: block; }

.form-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius);
  font-size: 0.92rem;
  display: none;
}
.form-status.success { display: block; background: rgba(47,122,82,0.12); color: var(--hv-success); border: 1px solid rgba(47,122,82,0.35); }
.form-status.error { display: block; background: rgba(184,69,42,0.1); color: var(--hv-error); border: 1px solid rgba(184,69,42,0.35); }
.form-status.loading { display: block; background: rgba(51,100,92,0.08); color: var(--hv-teal); }

/* Footer */
.site-footer {
  background: var(--hv-ink);
  color: rgba(255,255,255,0.72);
  padding: var(--space-xl) 0 var(--space-md);
  font-size: 0.88rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--hv-white); font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-sm); }
.site-footer .logo { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.25rem; color: var(--hv-white); margin-bottom: var(--space-xs); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { text-decoration: none; color: inherit; }
.site-footer a:hover { color: var(--hv-brass); }
.footer-bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}
.fair-housing { max-width: 760px; line-height: 1.6; }

/* Fade-in on scroll */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.in-view { opacity: 1; transform: translateY(0); }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--hv-white); color: var(--hv-ink);
  padding: 0.5rem 1rem; z-index: 1000;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* ============ Placeholder media (richer than a flat gradient) ============ */
.hv-media {
  position: relative;
  overflow: hidden;
  background: var(--hv-media-bg, linear-gradient(135deg, #234b45, #143430));
  display: flex;
  align-items: flex-end;
}
.hv-media::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 34px),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(0,0,0,0.18), transparent 45%);
  mix-blend-mode: overlay;
}
.hv-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8,14,13,0.55) 100%);
}
.hv-media-label {
  position: relative;
  z-index: 1;
  padding: 1rem;
  color: rgba(255,255,255,0.95);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============ Hero background video (Vimeo embed) ============
   object-fit doesn't reliably cover an <iframe>'s rendered content across
   browsers, so this uses the standard fixed-aspect-ratio "overscan" trick
   instead: size the iframe in viewport units at the embed's 16:9 ratio,
   let min-width/min-height pick up whichever dimension is the constraint,
   and center it — always covers the box regardless of viewport shape. */
.hero-video-wrap {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--hv-ink);
}
.hero-video-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw; /* 16:9 */
  min-width: 177.78vh; min-height: 100vh; /* 16:9 */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* ============ Scrollspy nav ============ */
.site-nav a.active { color: var(--hv-brass); }
.site-nav a { position: relative; }
.site-nav a:not(.btn)::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 2px; background: var(--hv-brass);
  transition: right 0.25s ease;
}
.site-nav a.active:not(.btn)::after { right: 0; }

/* ============ Animated counters ============ */
.hero-meta div strong { display: block; font-variant-numeric: tabular-nums; }

/* ============ Card tilt ============ */
.amenity-card, .plan-card { will-change: transform; }

/* ============ Floor plan filters + carousel ============ */
.plan-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: var(--space-lg);
}
.plan-filter-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--hv-line);
  background: var(--hv-white);
  color: var(--hv-teal);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.plan-filter-btn:hover { border-color: var(--hv-brass); color: var(--hv-brass-dark); }
.plan-filter-btn.active { background: var(--hv-teal); border-color: var(--hv-teal); color: var(--hv-white); }

.plan-carousel { position: relative; }
.plan-viewport { overflow: hidden; }
.plan-track {
  display: flex;
  gap: var(--space-md);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  cursor: grab;
}
.plan-track:active { cursor: grabbing; }
.plan-track .plan-card {
  flex: 0 0 calc(25% - (var(--space-md) * 3 / 4));
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.3s ease;
  user-select: none;
}
.plan-card.is-hidden { display: none; }
@media (max-width: 980px) { .plan-track .plan-card { flex-basis: calc(50% - (var(--space-md) / 2)); } }
@media (max-width: 620px) { .plan-track .plan-card { flex-basis: 86%; } }

.plan-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hv-line);
  background: var(--hv-white);
  color: var(--hv-deep);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  z-index: 5;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.plan-arrow:hover { background: var(--hv-teal); border-color: var(--hv-teal); color: var(--hv-white); }
.plan-arrow:disabled { opacity: 0.32; cursor: default; pointer-events: none; }
.plan-arrow.prev { left: -22px; }
.plan-arrow.next { right: -22px; }
@media (max-width: 620px) { .plan-arrow { display: none; } }

.plan-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: var(--space-md); }
.plan-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hv-line); border: none; cursor: pointer; padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.plan-dot.active { background: var(--hv-brass); transform: scale(1.3); }

.plan-avail-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,0.95);
  color: var(--hv-success);
  border: 1px solid rgba(47,122,82,0.3);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============ Gallery lightbox ============ */
.gallery-item { cursor: pointer; border: none; }
.gallery-item:hover .hv-media-label { text-decoration: underline; }

.hv-lightbox {
  position: fixed; inset: 0;
  z-index: 2000;
  background: rgba(10,16,15,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.hv-lightbox.open { display: flex; }
.hv-lightbox-stage {
  position: relative;
  width: min(920px, 100%);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hv-lightbox-stage .hv-media,
.hv-lightbox-stage .hv-photo { width: 100%; height: 100%; position: absolute; inset: 0; }
.hv-lightbox-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: var(--space-sm) var(--space-md);
  color: var(--hv-white);
  font-size: 0.85rem;
}
.hv-lightbox-close,
.hv-lightbox-prev,
.hv-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--hv-white);
  border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.hv-lightbox-close:hover,
.hv-lightbox-prev:hover,
.hv-lightbox-next:hover { background: var(--hv-white); color: var(--hv-teal); }
.hv-lightbox-close { top: -18px; right: -18px; }
.hv-lightbox-prev { left: -60px; top: 50%; transform: translateY(-50%); }
.hv-lightbox-next { right: -60px; top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) {
  .hv-lightbox { padding: var(--space-md); }
  .hv-lightbox-close { top: -50px; right: 0; }
  .hv-lightbox-prev { left: 0; }
  .hv-lightbox-next { right: 0; }
}

/* ============ Real photo tiles (gallery/about) ============ */
.hv-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hv-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hv-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,14,13,0.68) 100%);
}
.hv-photo .hv-media-label { position: relative; z-index: 1; }

/* ============ Mood-mesh placeholder media (photographic stand-in) ============ */
.hv-media {
  position: relative;
  overflow: hidden;
  background: var(--hv-media-bg, linear-gradient(135deg, #234b45, #143430));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.hv-media::before {
  content: '';
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,0.34), transparent 44%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,0.22), transparent 40%),
    radial-gradient(circle at 68% 78%, rgba(0,0,0,0.4), transparent 48%),
    radial-gradient(circle at 8% 88%, rgba(0,0,0,0.26), transparent 42%);
  filter: blur(6px);
}
.hv-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, transparent 30%, rgba(8,14,13,0.68) 100%);
}
.hv-media-wave {
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  height: 22%;
  background: rgba(8,14,13,0.32);
  clip-path: polygon(
    0% 100%, 0% 55%, 8.33% 20%, 16.66% 55%, 25% 20%, 33.33% 55%, 41.66% 20%,
    50% 55%, 58.33% 20%, 66.66% 55%, 75% 20%, 83.33% 55%, 91.66% 20%, 100% 55%, 100% 100%
  );
  z-index: 0;
}
.hv-media-icon {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  z-index: 0;
}
.hv-media-icon svg { width: 40%; height: 40%; stroke-width: 1.6; }
.hv-media-label {
  position: relative;
  z-index: 1;
  padding: 1rem;
  color: rgba(255,255,255,0.95);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}


/* ============ Floor plan schematic panel ============ */
.plan-floorplan {
  background: #fdfbf6;
  color: var(--hv-deep);
  padding: var(--space-sm);
}
.fp-svg { width: 100%; height: 100%; background: var(--hv-fp-room); }
.fp-wall { fill: none; stroke: var(--hv-fp-wall); stroke-width: 9; stroke-linejoin: miter; }
.fp-door { fill: none; stroke: var(--hv-brass); stroke-width: 2; stroke-dasharray: 3 3; }
.fp-window { stroke: var(--hv-brass); stroke-width: 4; stroke-linecap: round; }
.fp-north { fill: var(--hv-fp-wall); opacity: 0.7; }
.fp-fixture { fill: none; stroke: var(--hv-fp-wall); stroke-width: 1.4; }
.fp-fixture-fill { fill: var(--hv-fp-room); stroke: var(--hv-fp-wall); stroke-width: 1.4; }
.fp-fixture-dashed { fill: none; stroke: var(--hv-fp-wall); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; }
.fp-hatch-line { stroke: var(--hv-fp-wall); stroke-width: 1; opacity: 0.55; }
.fp-counter { fill: var(--hv-sand); stroke: var(--hv-fp-wall); stroke-width: 1; }
.fp-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--hv-deep);
}
.fp-label-lg { font-size: 11px; fill: var(--hv-deep); }
.fp-label-sm { font-size: 7.5px; }
.fp-dim { font-size: 6.5px; font-weight: 500; letter-spacing: 0.01em; fill: var(--hv-teal-light); }

/* Floor-plate site plan (whole-floor diagram, not a single unit) */
.fplate-suite { fill: var(--hv-fp-room); stroke: var(--hv-fp-wall); stroke-width: 4; transition: fill 0.2s ease, stroke 0.2s ease; }
.fplate-suite.is-available { fill: var(--hv-sand); }
.fplate-suite-num { font-size: 15px; font-weight: 700; fill: var(--hv-deep); text-anchor: middle; transition: fill 0.2s ease; }
/* Touchable suites — available units only; leased/unavailable ones stay
   inert (no cursor, no hover, not in the tab order). Tapping or clicking
   selects the suite here on the floor plate and in the list beside it. */
.fplate-suite-group.is-selectable { cursor: pointer; }
.fplate-suite-group.is-selectable:hover .fplate-suite,
.fplate-suite-group.is-selectable:focus-visible .fplate-suite {
  fill: #e3c793;
  stroke: var(--hv-brass);
}
.fplate-suite-group.is-selectable:focus-visible { outline: 2px solid var(--hv-brass-dark); outline-offset: 2px; }
.fplate-suite.is-selected { fill: var(--hv-brass); stroke: var(--hv-brass-dark); stroke-width: 6; }
.fplate-suite.is-selected ~ .fplate-suite-num { fill: var(--hv-white); }
.fplate-core { fill: var(--hv-line); stroke: var(--hv-fp-wall); stroke-width: 4; }
.fplate-core-label { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; fill: var(--hv-teal); text-anchor: middle; }
.fplate-room { fill: var(--hv-fp-room); stroke: var(--hv-fp-wall); stroke-width: 6; }
.fplate-room-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; fill: var(--hv-deep); text-anchor: middle; }
.fplate-street-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; fill: var(--hv-teal-light); }
.fplate-notch { fill: var(--hv-fp-room); stroke: var(--hv-fp-wall); stroke-width: 2; }
.fplate-shaft { fill: var(--hv-fp-room); stroke: var(--hv-fp-wall); stroke-width: 4; }
.fplate-shaft-hatch { stroke: var(--hv-fp-wall); stroke-width: 1.4; opacity: 0.6; }
.fplate-north-shaft { stroke: var(--hv-deep); stroke-width: 2; stroke-linecap: round; }
.fplate-north-head { fill: var(--hv-deep); }
.fplate-north-label { font-size: 13px; font-weight: 700; fill: var(--hv-deep); }
.fplate-floor-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--hv-teal-light); }

/* ============ Book-a-tour wizard ============ */
.btn-outline-dark { background: transparent; border: 1.5px solid var(--hv-line); color: var(--hv-deep); }
.btn-outline-dark:hover { background: var(--hv-sand); border-color: var(--hv-teal); }
.btn-outline-dark:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.bt-intro {
  background: var(--hv-deep);
  color: var(--hv-white);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.bt-intro h1 { color: var(--hv-white); }
.bt-intro p { max-width: 46ch; margin: 0 auto; color: rgba(255,255,255,0.8); }

.bt-wizard { padding: var(--space-lg) 0; }

.bt-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  flex-wrap: wrap;
}
.bt-progress li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hv-line);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color 0.25s ease;
}
/* Track segment: rendered as each item's own leading edge so it survives
   flex-wrap on narrow screens instead of relying on one full-width bar. */
.bt-progress li:not(:first-child)::before {
  content: '';
  width: 2.5rem;
  height: 2px;
  background: var(--hv-line);
  transition: background 0.25s ease;
}
.bt-progress li.is-active::before,
.bt-progress li.is-done::before { background: var(--hv-teal); }
.bt-progress-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--hv-line);
  color: var(--hv-line);
  font-size: 0.8rem;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.bt-progress-num svg { width: 13px; height: 13px; }
.bt-progress li.is-active,
.bt-progress li.is-done { color: var(--hv-deep); }
.bt-progress li.is-active .bt-progress-num { background: var(--hv-brass); border-color: var(--hv-brass); color: var(--hv-white); }
.bt-progress li.is-done .bt-progress-num { background: var(--hv-teal); border-color: var(--hv-teal); color: var(--hv-white); }

.bt-error, .co-error {
  display: none;
  background: rgba(184,69,42,0.1);
  border: 1px solid rgba(184,69,42,0.35);
  color: var(--hv-error);
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin-bottom: var(--space-lg);
  font-size: 0.9rem;
}
.bt-error.is-visible, .co-error.is-visible { display: block; }

/* bt-footer is a sticky bottom action bar (see .bt-footer below) — its
   sticky range engages as soon as it would leave the viewport, which is
   well before a tall step's own content finishes scrolling into view.
   Without reserved space, it visually floats on top of (and blocks taps on)
   whatever step content is still below it — confirmed on mobile where it
   covered the first row of time slots. Reserving space here, on every step,
   keeps all step content scrollable clear of the bar. Sized for the bar's
   tallest state (recap row + button row). */
.bt-step { padding: 0 0 9rem; }
.bt-step h2 { text-align: center; margin-bottom: 0.4rem; }
.bt-step-sub { text-align: center; color: var(--hv-teal); margin-bottom: var(--space-md); }
.bt-subheading {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hv-teal);
  margin: var(--space-lg) 0 var(--space-sm);
}
/* A plain heading isn't enough to read as "you can stop here" — a hairline
   above it marks the required/optional boundary without the heavy
   border+shadow look (dropped elsewhere per feedback that it looked bad). */
.bt-subheading-divided { padding-top: var(--space-md); border-top: 1px solid var(--hv-line); }
/* var(--hv-line) is a border color (very light tan) — legible for hairlines,
   not for text. Same low-contrast issue as the calendar weekday header and
   timezone note (now var(--hv-teal)); fixed here too since this hint sits
   right next to those on the same page. */
.bt-hint { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--hv-teal); }

.bt-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.bt-unit-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--hv-white);
  border: 2px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bt-unit-card:hover { box-shadow: var(--shadow-soft); }
.bt-unit-card.is-selected { border-color: var(--hv-brass); box-shadow: var(--shadow-soft); }
.bt-unit-media {
  flex: none;
  width: 64px;
  aspect-ratio: 3 / 4;
  background: var(--hv-cream);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bt-unit-media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.bt-unit-media:hover img { transform: scale(1.12); }
.bt-unit-media:focus-visible { outline: 2px solid var(--hv-brass-dark); outline-offset: 2px; }
.bt-unit-body { min-width: 0; }
.bt-unit-card h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.bt-unit-card p { font-size: 0.85rem; color: var(--hv-teal); margin: 0; }
.bt-unit-card .bt-unit-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--hv-brass-dark);
  background: var(--hv-sand);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.bt-unit-card .bt-unit-avail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  font-size: 0.78rem;
}
.bt-unit-avail::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.bt-unit-avail.is-available { color: var(--hv-success); }
.bt-unit-avail.is-available::before { background: var(--hv-success); box-shadow: 0 0 0 3px rgba(47, 122, 82, 0.2); }
.bt-unit-avail.is-waitlist { color: var(--hv-teal); }
.bt-unit-avail.is-waitlist::before { background: var(--hv-teal); box-shadow: 0 0 0 3px rgba(51, 100, 92, 0.16); }
.bt-unit-card .bt-unit-building { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hv-teal); opacity: 0.75; margin-bottom: 0.2rem; }

.bt-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bt-pill {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--hv-line);
  background: var(--hv-white);
  color: var(--hv-teal);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bt-pill:hover { border-color: var(--hv-brass); }
.bt-pill.is-selected { background: var(--hv-teal); border-color: var(--hv-teal); color: var(--hv-white); }

/* Calendar and slot list used to be two disconnected blocks (a bordered
   card on the left, nothing but floating buttons on the right) — visually
   unbalanced, especially once the slot list is shorter than the calendar.
   One shared card with an internal divider reads as a single surface. */
.bt-datetime-card {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
}
.bt-datetime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}
@media (max-width: 800px) { .bt-datetime-grid { grid-template-columns: 1fr; gap: 0; } }

.bt-calendar { display: flex; flex-direction: column; }
.bt-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.bt-cal-label { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--hv-deep); }
.bt-cal-nav {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hv-line);
  background: var(--hv-white);
  color: var(--hv-deep);
  cursor: pointer;
  font-size: 1rem;
}
.bt-cal-nav:hover { background: var(--hv-sand); }
.bt-cal-nav:disabled { opacity: 0.3; cursor: default; }
.bt-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hv-teal);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.bt-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bt-cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--hv-ink);
  font-size: 0.88rem;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.bt-cal-day:hover:not(:disabled) { background: var(--hv-sand); }
.bt-cal-day.is-today { font-weight: 700; color: var(--hv-brass-dark); }
/* Soft tint on bookable days so availability reads at a glance across the
   whole month, not just from a 4px dot you have to hunt for. */
.bt-cal-day.has-availability:not(.is-selected) { background: rgba(51, 100, 92, 0.08); }
.bt-cal-day.has-availability:not(.is-selected):hover { background: var(--hv-sand); }
.bt-cal-day.has-availability::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hv-teal);
}
.bt-cal-day.is-selected { background: var(--hv-brass); color: var(--hv-white); }
.bt-cal-day.is-selected.has-availability::after { background: var(--hv-white); }
.bt-cal-day:disabled { color: var(--hv-line); cursor: default; }
.bt-cal-day.is-empty { visibility: hidden; }

.bt-cal-legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: var(--space-sm) 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--hv-teal);
}
.bt-cal-legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hv-teal); flex: none; }

.bt-slots-panel {
  padding-top: var(--space-xs);
  padding-left: var(--space-lg);
  border-left: 1px solid var(--hv-line);
  display: flex;
  flex-direction: column;
}
@media (max-width: 800px) {
  .bt-slots-panel { padding-left: 0; padding-top: var(--space-lg); margin-top: var(--space-lg); border-left: none; border-top: 1px solid var(--hv-line); }
}
#btSlotsHeading { margin-top: 0; }
.bt-slots-tz { margin: -0.35rem 0 var(--space-sm); font-size: 0.78rem; color: var(--hv-teal); }

/* #btSlots is a vertical stack: an empty/skeleton message, or one
   .bt-slot-group per time-of-day bucket, each wrapping its own
   .bt-slot-grid of buttons. */
.bt-slots { display: flex; flex-direction: column; gap: var(--space-sm); }
.bt-slot-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hv-teal);
  margin: 0 0 0.5rem;
}
.bt-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
.bt-slots-empty { color: var(--hv-teal); font-size: 0.92rem; }
.bt-slot {
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--hv-line);
  background: var(--hv-white);
  color: var(--hv-ink);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bt-slot:hover { border-color: var(--hv-brass); }
.bt-slot.is-selected { background: var(--hv-teal); border-color: var(--hv-teal); color: var(--hv-white); }

.bt-slot-skeleton {
  grid-column: span 1;
  height: 38.5px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--hv-sand) 25%, var(--hv-cream) 50%, var(--hv-sand) 75%);
  background-size: 200% 100%;
  animation: bt-skeleton-pulse 1.3s ease-in-out infinite;
}
@keyframes bt-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-slot-skeleton { animation: none; background: var(--hv-sand); }
}

/* Lives inside .bt-footer (see below) rather than as a separate element
   above it — .bt-footer is a sticky bottom bar, so anything meant to be
   visible alongside it needs to be part of that same sticky block, not a
   sibling that the bar can independently scroll over. */
.bt-selection-recap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  padding: 0.6rem 0.85rem;
  background: rgba(51, 100, 92, 0.08);
  border: 1px solid rgba(51, 100, 92, 0.25);
  border-radius: var(--radius);
  color: var(--hv-deep);
  font-size: 0.9rem;
  font-weight: 600;
}
.bt-selection-recap[hidden] { display: none; }
.bt-selection-recap svg { width: 16px; height: 16px; flex: none; color: var(--hv-teal); }

/* Matches .bt-datetime-card: step 2 got a single elevated white surface
   instead of loose fields floating on the page background, so step 3 gets
   the same treatment for a consistent wizard look. */
.bt-contact-card {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
}
.bt-contact-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 860px) { .bt-contact-grid { grid-template-columns: 1fr; } }
.bt-contact-grid textarea { width: 100%; min-height: 90px; padding: 0.7rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--hv-line); background: var(--hv-cream); font-family: var(--font-body); font-size: 0.95rem; resize: vertical; }

.bt-summary {
  background: var(--hv-sand);
  border-radius: var(--radius);
  padding: var(--space-md);
  position: sticky;
  top: 100px;
}
.bt-summary dl { margin: 0; display: grid; gap: var(--space-sm); }
.bt-summary dl > div { display: flex; justify-content: space-between; gap: var(--space-sm); border-bottom: 1px solid var(--hv-line); padding-bottom: 0.6rem; }
.bt-summary dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hv-teal); font-weight: 700; }
.bt-summary dd { margin: 0; font-weight: 600; color: var(--hv-deep); text-align: right; }

.bt-footer {
  margin-top: var(--space-lg);
  padding: var(--space-md) 0;
  position: sticky;
  bottom: 0;
  background: var(--hv-cream);
  z-index: 5;
}
.bt-footer-actions { display: flex; justify-content: space-between; align-items: center; }

/* Keyboard focus outlines for the wizard's custom controls — none of these
   had a visible focus state before (buttons/pills/calendar cells all
   suppress the native outline via their own background/border styling). */
.bt-cal-day:focus-visible,
.bt-cal-nav:focus-visible,
.bt-slot:focus-visible,
.bt-pill:focus-visible,
.bt-unit-card:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--hv-brass-dark);
  outline-offset: 2px;
}

/* ============ Checkout ("Reserve This Unit") ============ */
.co-intro {
  background: var(--hv-deep);
  color: var(--hv-white);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.co-intro h1 { color: var(--hv-white); }
.co-intro p { max-width: 46ch; margin: 0 auto; color: rgba(255,255,255,0.8); }

.co-checkout { padding: var(--space-lg) 0 var(--space-xl); }
.co-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 860px) {
  .co-grid { grid-template-columns: 1fr; }
}

.co-section {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lift);
  margin-bottom: var(--space-md);
}
.co-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  margin: 0 0 var(--space-md);
}
.co-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--hv-brass);
  color: var(--hv-white);
  font-size: 0.8rem;
  font-weight: 700;
}
.co-section-sub { font-size: 0.85rem; color: var(--hv-teal); margin: -0.4rem 0 var(--space-sm); }

.co-addons { display: flex; flex-direction: column; gap: var(--space-sm); }
.co-addon-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--space-sm);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.co-addon-row:hover { border-color: var(--hv-brass); }
.co-addon-row.is-checked { border-color: var(--hv-brass); background: rgba(199, 149, 82, 0.08); }
.co-addon-row input[type="checkbox"] { flex: none; width: auto; margin: 0.2rem 0 0; }
.co-addon-body { flex: 1; min-width: 0; }
.co-addon-name { display: block; font-weight: 600; color: var(--hv-deep); }
.co-addon-desc { display: block; font-size: 0.82rem; color: var(--hv-teal); margin-top: 0.15rem; }
.co-addon-price { flex: none; font-weight: 700; color: var(--hv-brass-dark); white-space: nowrap; }
.co-addon-price span { font-weight: 500; font-size: 0.78rem; color: var(--hv-teal); }

.co-card-input-wrap { position: relative; }
.co-card-input-wrap input { padding-right: 3.4rem; }
.co-card-brand {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  background: var(--hv-sand);
  color: var(--hv-brass-dark);
  pointer-events: none;
}
.co-card-brand.is-visa { background: #1a3a6e; color: #fff; }
.co-card-brand.is-mastercard { background: #eb5b2c; color: #fff; }
.co-card-brand.is-amex { background: #016fd0; color: #fff; }
.co-card-brand.is-discover { background: #e57722; color: #fff; }

/* Order summary — sticky sidebar, Stripe/Shopify-style running total that
   updates immediately when a promo code is applied. */
.co-summary { position: sticky; top: 100px; }
.co-summary-card {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lift);
}
.co-summary-unit { display: flex; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--hv-line); }
.co-summary-thumb { flex: none; width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; background: var(--hv-fp-room); border: 1px solid var(--hv-line); }
.co-summary-thumb img,
.co-summary-thumb .fp-svg-wrap,
.co-summary-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-summary-unit-body h3 { font-size: 1rem; margin: 0 0 0.2rem; }
.co-summary-unit-body p { font-size: 0.8rem; color: var(--hv-teal); margin: 0; }

.co-promo { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--hv-line); }
.co-promo label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--hv-teal); margin-bottom: 0.35rem; }
.co-promo-row { display: flex; gap: 0.5rem; }
.co-promo-row input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--hv-line);
  background: var(--hv-cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--hv-ink);
}
.co-promo-row input:focus {
  outline: none;
  border-color: var(--hv-brass);
  box-shadow: 0 0 0 3px rgba(199, 149, 82, 0.22);
  background: var(--hv-white);
}
.co-promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(47,122,82,0.12);
  border: 1px solid rgba(47,122,82,0.35);
  color: var(--hv-success);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.5rem 0.45rem 0.8rem;
  border-radius: 999px;
}
.co-promo-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
}
.co-promo-error { color: var(--hv-error); font-size: 0.8rem; margin: 0.4rem 0 0; }

.co-summary-lines { margin: 0 0 var(--space-sm); }
.co-summary-line { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 0.85rem; padding: 0.35rem 0; color: var(--hv-ink); }
.co-summary-line dt { font-weight: 500; }
.co-summary-line dd { margin: 0; font-weight: 600; white-space: nowrap; }
.co-summary-line.is-discount dd { color: var(--hv-success); }

.co-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hv-line);
  margin-bottom: var(--space-md);
  font-weight: 700;
}
.co-summary-total strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--hv-brass-dark); }

.co-secure-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--hv-teal);
  margin: var(--space-sm) 0 0;
  text-align: center;
}
.co-secure-note svg { width: 14px; height: 14px; flex: none; }

/* ============ Unit detail page (photo carousel + specs) ============ */
.unit-page { padding: var(--space-lg) 0 var(--space-xl); }
.unit-back-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hv-teal);
  text-decoration: none;
  margin-bottom: var(--space-md);
}
.unit-back-link:hover { color: var(--hv-brass-dark); }

.unit-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-xl);
}
@media (max-width: 860px) { .unit-hero-grid { grid-template-columns: 1fr; } }

.unit-carousel-main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hv-sand);
  box-shadow: var(--shadow-lift);
}
.unit-carousel-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unit-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(20, 52, 48, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--hv-white);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.unit-carousel-arrow:hover { background: var(--hv-white); color: var(--hv-teal); }
.unit-carousel-arrow.prev { left: 14px; }
.unit-carousel-arrow.next { right: 14px; }
.unit-carousel-caption {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hv-white);
  background: rgba(20, 52, 48, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
.unit-carousel-counter {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  background: rgba(20, 52, 48, 0.55);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.unit-carousel-dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: var(--space-sm); }
.unit-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hv-line); border: none; cursor: pointer; padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.unit-carousel-dot.active { background: var(--hv-brass); transform: scale(1.3); }

.unit-info { padding-top: var(--space-xs); }
.unit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hv-teal);
  margin-bottom: 0.6rem;
}
.unit-badge::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hv-line); }
.unit-badge.is-available { color: var(--hv-success); }
.unit-badge.is-available::before { background: var(--hv-success); box-shadow: 0 0 0 3px rgba(47, 122, 82, 0.18); }
.unit-badge.is-waitlist::before { background: var(--hv-teal); box-shadow: 0 0 0 3px rgba(51, 100, 92, 0.16); }
.unit-info h1 { margin: 0 0 0.3rem; }
.unit-price { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--hv-brass-dark); margin: 0 0 0.3rem; }
.unit-price span { font-family: var(--font-body); font-size: 0.85rem; color: var(--hv-teal); font-weight: 600; }
.unit-specs { font-size: 0.95rem; color: var(--hv-teal); margin: 0 0 0.6rem; }
.unit-tagline { font-size: 1.05rem; color: var(--hv-ink); margin: 0 0 var(--space-sm); }
.unit-features { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: 0.4rem; }
.unit-features li { font-size: 0.88rem; color: var(--hv-teal); padding-left: 1.3rem; position: relative; }
.unit-features li::before {
  content: '';
  position: absolute; left: 0; top: 0.35rem;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--hv-brass);
}
.unit-cta { display: flex; flex-direction: column; gap: 0.5rem; }
.unit-cta-secondary { display: flex; gap: 0.5rem; }
.unit-cta-secondary .btn { flex: 1; white-space: nowrap; }

.unit-section { margin-bottom: var(--space-xl); }
.unit-section h2 { margin-bottom: var(--space-md); }
.unit-floorplan-media {
  background: var(--hv-fp-room);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  max-width: 640px;
}
.unit-floorplan-media .fp-svg-wrap,
.unit-floorplan-media img { width: 100%; display: block; }

.unit-tour-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hv-line);
  box-shadow: var(--shadow-lift);
  background: var(--hv-sand);
}
.unit-tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.unit-carousel-tour-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hv-white);
  background: rgba(199, 149, 82, 0.92);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
}
.unit-carousel-tour-badge svg { width: 14px; height: 14px; }
.unit-carousel-tour-badge:hover { background: var(--hv-brass-dark); }

.unit-others-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.unit-other-card {
  display: block;
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.unit-other-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.unit-other-media { aspect-ratio: 4 / 3; background: var(--hv-fp-room); }
.unit-other-media img,
.unit-other-media .fp-svg-wrap,
.unit-other-media svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.unit-other-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.unit-other-body h3 { font-size: 1rem; margin: 0 0 0.2rem; text-transform: none; }
.unit-other-body p { font-size: 0.8rem; color: var(--hv-teal); margin: 0; }

/* ============ Dedicated Floor Plans page ============ */
.fpp-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: flex-end;
  color: var(--hv-white);
  overflow: hidden;
  padding-top: 120px;
}
.fpp-hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.fpp-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}
.fpp-hero h1 { color: var(--hv-white); max-width: 18ch; text-transform: none; }
.fpp-hero-sub { max-width: 54ch; font-size: 1.1rem; color: rgba(255,255,255,0.9); }
.fpp-hero-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.25);
  flex-wrap: wrap;
}
.fpp-hero-stats div strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.fpp-hero-stats div span { font-size: 0.8rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 720px) { .fpp-hero { min-height: 44vh; padding-top: 100px; } }

/* Floating glass filter bar — overlaps the hero's bottom edge, then docks
   under the header on scroll (position: sticky keeps both states in one
   rule set, no separate "docked" class needed). */
.fpp-filterbar-wrap {
  position: sticky;
  top: 88px; /* clears the fixed site header — matches its scroll-margin-top elsewhere */
  z-index: 100;
  padding: 0 var(--space-md);
}
.fpp-filterbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 44px rgba(17, 26, 23, 0.16), 0 2px 6px rgba(17, 26, 23, 0.06);
  padding: var(--space-sm) var(--space-lg);
  margin: calc(var(--space-lg) * -1) auto 0;
}
.fpp-filter-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.fpp-filter-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hv-teal);
  margin-right: 0.2rem;
}
.fpp-filterbar .plan-filter-btn {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.76rem;
  border-width: 1.5px;
}
.fpp-price-select {
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--hv-line);
  background: var(--hv-white);
  color: var(--hv-teal);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.fpp-price-select:hover { border-color: var(--hv-brass); }
.fpp-filterbar-result {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--hv-teal);
  font-weight: 700;
  white-space: nowrap;
}
.fpp-clear-btn {
  background: rgba(199, 149, 82, 0.14);
  border: none;
  color: var(--hv-brass-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.fpp-clear-btn:hover { background: rgba(199, 149, 82, 0.26); }
@media (max-width: 720px) {
  .fpp-filterbar-wrap { top: 72px; }
  .fpp-filterbar { gap: var(--space-sm); padding: var(--space-sm) var(--space-md); margin-top: calc(var(--space-md) * -1); border-radius: var(--radius); }
  .fpp-filterbar-result { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Grid section head — deliberately left-aligned (unlike the centered
   .fpp-building-intro above it), so the two sections read as different
   tools: "explore the building" (centered, exploratory) vs. "compare the
   five plans" (left-aligned, utility/table-like), rather than two
   near-identical blocks that feel redundant. */
.fpp-grid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.fpp-grid-head .section-head { text-align: left; margin: 0; max-width: 560px; }
.fpp-sort { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.fpp-sort label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hv-teal); white-space: nowrap; }
@media (max-width: 640px) {
  .fpp-grid-head .section-head { text-align: center; margin: 0 auto; }
  .fpp-grid-head { justify-content: center; text-align: center; }
  .fpp-sort { margin: 0 auto; }
}

/* Grid */
.fpp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
@media (max-width: 1023px) { .fpp-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } }
@media (max-width: 639px) { .fpp-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* A real, bounded card again — background, border, radius, one shadow that
   grows on hover. (A borderless "listing tile" version of this lived here
   briefly; it didn't read as a distinct clickable card at all, so back to
   a proper box.) */
.fpp-card {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 26, 23, 0.05), 0 8px 20px rgba(17, 26, 23, 0.06);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}
.fpp-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 56px -16px rgba(17, 26, 23, 0.28), 0 8px 20px rgba(17, 26, 23, 0.1);
  border-color: rgba(199, 149, 82, 0.45);
}
/* 4:3 landscape — this box leads with a real per-unit photo (portrait 3:4
   cropped those far too tight/tall), and it happens to suit the floor-plan
   diagrams (HV_FLOORPLAN_SVGS, all viewBox 320x220, ~1.45:1) much better
   too: at the old 3:4 they sat letterboxed with a lot of empty space
   above/below; at 4:3 they nearly fill the box. Flush inside the card now
   (no radius/shadow of its own — the card's own box handles that), so only
   the top corners round to match the card's. */
.fpp-card-media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: #fdfbf6;
  border-bottom: 1px solid var(--hv-line);
}
/* Photos and the floor-plan diagram occupy the same box, stacked, toggled
   via the .fpp-media-tab pair below — only one .fpp-card-view is ever
   unhidden at a time. */
.fpp-card-view { position: absolute; inset: 0; }
.fpp-card-view-plan { cursor: pointer; background: #fdfbf6; }
.fpp-card-view-photos { background: var(--hv-ink); }

.fpp-card-media-zoom {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--hv-teal);
  box-shadow: 0 2px 10px rgba(17, 26, 23, 0.16);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fpp-card-media-zoom svg { width: 16px; height: 16px; }
.fpp-card:hover .fpp-card-media-zoom,
.fpp-card-view-plan:focus-visible .fpp-card-media-zoom { opacity: 1; }
.fpp-card-view-plan img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-sm);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fpp-card-view-plan .fp-svg-wrap { width: 100%; height: 100%; }
.fpp-card-view-plan svg.fp-svg {
  padding: var(--space-sm);
  box-sizing: border-box;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fpp-card:hover .fpp-card-view-plan img,
.fpp-card:hover .fpp-card-view-plan svg.fp-svg { transform: scale(1.04); }

/* Fallback for a real floor plan whose own file is a PDF, not an image — an
   <img> can't render one, so this stands in wherever the shared
   realFloorPlanMediaHtml (dashq-client.js, used by both floorplans.js and
   unit.js) picks it over an <img>/.fp-svg-wrap. */
.hv-floorplan-pdf-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-sm);
  color: var(--hv-teal);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.hv-floorplan-pdf-link svg { width: 40px; height: 40px; }
.hv-floorplan-pdf-link:hover { color: var(--hv-brass-dark); }

/* Real per-unit photo carousel — leads the card now; the floor-plan
   diagram above is a tap away via the tab switcher below. */
.fpp-card-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fpp-card:hover .fpp-card-photo-img { transform: scale(1.04); }
.fpp-card-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 45, 41, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--hv-white);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fpp-card-photo-nav:hover { background: rgba(20, 45, 41, 0.82); }
.fpp-card-photo-nav.prev { left: 10px; }
.fpp-card-photo-nav.next { right: 10px; }
.fpp-card-photo-count {
  position: absolute;
  bottom: 46px; right: 12px;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--hv-white);
  background: rgba(20, 45, 41, 0.55);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

/* Photos / Floor Plan segmented toggle — bottom-center, clear of the status
   badge (top-left) and 3D Tour badge (top-right). */
.fpp-card-media-tabs {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 10px rgba(17, 26, 23, 0.16);
}
.fpp-media-tab {
  border: none;
  background: transparent;
  color: var(--hv-teal);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.fpp-media-tab.is-active { background: var(--hv-deep); color: var(--hv-white); }
.fpp-card-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hv-deep);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(17, 26, 23, 0.16);
}
.fpp-card-badge::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.fpp-card-badge.is-available::before { background: var(--hv-success); box-shadow: 0 0 0 3px rgba(47, 122, 82, 0.2); }
.fpp-card-badge.is-waitlist::before { background: var(--hv-teal); box-shadow: 0 0 0 3px rgba(51, 100, 92, 0.16); }
.fpp-card-badge.is-pending { color: var(--hv-teal); }
.fpp-card-badge.is-pending::before { background: var(--hv-line); box-shadow: 0 0 0 3px rgba(225, 213, 186, 0.4); }
/* 3D Tour badge — links straight to unit.html's #tour section (same visual
   language as .unit-carousel-tour-badge there) rather than duplicating the
   Matterport embed here in a second lightbox. */
.fpp-card-tour-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hv-white);
  background: rgba(199, 149, 82, 0.92);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.fpp-card-tour-badge svg { width: 13px; height: 13px; flex: none; }
.fpp-card-tour-badge:hover { background: var(--hv-brass-dark); }
.fpp-card-info { padding: var(--space-lg); }
.fpp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); margin-bottom: 0.3rem; }
.fpp-card-head h3 { font-size: 1.3rem; margin: 0; text-transform: none; letter-spacing: -0.01em; }
.fpp-card-head h3 a { text-decoration: none; }
.fpp-card-head h3 a:hover { text-decoration: underline; color: var(--hv-brass-dark); }
.fpp-card-price { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--hv-brass-dark); white-space: nowrap; }
.fpp-card-price span { font-family: var(--font-body); font-size: 0.68rem; color: var(--hv-teal); font-weight: 600; }
.fpp-card-price .fpp-price-pending { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--hv-teal); }

/* Floor + beds/baths/sqft collapsed into one slim line (was a floor label
   line plus a separate row of three pill chips) — one clean fact line
   instead of two competing ones. */
.fpp-card-meta { font-size: 0.85rem; color: var(--hv-teal); margin: 0 0 0.6rem; }

.fpp-card-urgency { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--hv-teal); margin: 0 0 0.5rem; }
.fpp-card-urgency::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--hv-brass); }
.fpp-card-urgency.is-low-stock { color: var(--hv-error); }
.fpp-card-urgency.is-low-stock::before { background: var(--hv-error); animation: fpp-urgency-pulse 1.6s ease-in-out infinite; }
@keyframes fpp-urgency-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 69, 42, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(184, 69, 42, 0); } }

/* Tagline restyled as a short editorial pull-quote (serif italic, a brass
   rule instead of quote marks) rather than a plain sentence. */
.fpp-card-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--hv-teal);
  border-left: 2px solid var(--hv-brass);
  padding-left: 0.7rem;
  margin: 0 0 var(--space-md);
}

/* CTA — no filled button, no button row. A single confident text link
   (the kind of "View listing" link a booking-search result uses, not an
   e-commerce "Add to Cart"), with the tour link as a quieter second line
   underneath — this is the biggest deliberate departure from the standard
   pricing-card pattern (name/specs/button-stack) every competitor defaults
   to. */
.fpp-card-cta { margin-top: var(--space-sm); }
.fpp-card-reserve-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--hv-brass-dark);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(199, 149, 82, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.fpp-card-reserve-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.fpp-card-reserve-link:hover { border-color: var(--hv-brass-dark); gap: 0.65rem; }
.fpp-card-reserve-link:hover svg { transform: translateX(3px); }
.fpp-card-tour-link {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hv-teal);
  text-decoration: none;
}
.fpp-card-tour-link:hover { color: var(--hv-brass-dark); text-decoration: underline; }

/* Floor-plan-diagram fullscreen viewer — reuses the gallery's .hv-lightbox
   overlay, but the stage drops the fixed photo aspect-ratio/crop: these are
   technical drawings (portrait or landscape), so they're centered at their
   natural aspect ratio on the same off-white diagram background as the
   card, not stretched into a 16/10 frame. Shared by the Floor Plans grid
   and the Book a Tour residence picker — hence the page-neutral name. */
.hv-plan-lightbox-stage {
  aspect-ratio: unset;
  width: auto;
  max-width: min(760px, 92vw);
  max-height: 85vh;
  background: #fdfbf6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
}
/* Widths are chained percentages down to the <svg>/<img> itself —
   align-items would otherwise shrink-wrap the media container to its
   (still-unsized) content, leaving the diagram nothing real to resolve its
   own 100% against. */
.hv-plan-lightbox-stage > div { width: 100%; }
.hv-plan-lightbox-stage .fp-svg-wrap { width: 100%; }
.hv-plan-lightbox-stage svg.fp-svg { width: 100%; height: auto; max-height: 70vh; }
.hv-plan-lightbox-stage img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
/* The shared .hv-lightbox-close is styled for a dark photo backdrop and
   sits just outside the stage box — invisible here against an off-white
   stage, and clipped anyway by the stage's own overflow: hidden. Pulled
   inside the bounds and recolored for this stage only. */
.hv-plan-lightbox .hv-lightbox-close {
  top: 12px; right: 12px;
  background: rgba(17, 26, 23, 0.06);
  border-color: rgba(17, 26, 23, 0.14);
  color: var(--hv-teal);
}
.hv-plan-lightbox .hv-lightbox-close:hover { background: var(--hv-teal); color: var(--hv-white); }
.hv-plan-lightbox-stage .hv-lightbox-caption {
  position: static;
  color: var(--hv-teal);
  text-align: center;
  font-weight: 600;
  padding-top: var(--space-sm);
}

/* Interactive site-plan browser — "Explore by Floor" */
.fpp-building-intro { max-width: 620px; margin: 0 auto var(--space-md); text-align: center; }
.fpp-building-intro h2 { margin-bottom: 0.5rem; }
.fpp-floornav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--hv-deep);
  color: var(--hv-cream);
  padding: 0.9rem var(--space-md);
  border-radius: var(--radius) var(--radius) 0 0;
}
.fpp-floornav-btn {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--hv-cream);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.fpp-floornav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }
.fpp-floornav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fpp-floornav-label { text-align: center; min-width: 12rem; }
.fpp-floornav-label strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.fpp-floornav-label span { font-size: 0.78rem; opacity: 0.8; }
.fpp-building-widget {
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid var(--hv-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hv-white);
}
.fpp-building-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  align-items: stretch;
}
/* Photo + floor plate stack together in one left column, so the suite list
   beside them runs as one continuous column alongside both — not just
   alongside the floor plate, with the photo stranded above on its own
   full-width row. */
.fpp-building-left { display: flex; flex-direction: column; border-right: 1px solid var(--hv-line); }
.fpp-floorplate { padding: var(--space-sm); background: var(--hv-fp-room); flex: 1; }
.fpp-floorplate svg { width: 100%; height: auto; display: block; }

/* Real-photo building elevation banner — one full-width photo you click
   directly to jump to a floor (top of the photo = roof, bottom = lobby),
   with a floating "Floor N" tag marking the current selection and a
   lighter ghost tag previewing whatever floor the cursor is over. The
   prev/next arrows in the header above do the same thing, for anyone who
   doesn't notice the photo itself is clickable. */
.fpp-building-elevation { padding: var(--space-sm); border-bottom: 1px solid var(--hv-line); }
/* Fixed to the source photo's own aspect ratio (1344x710) rather than a
   flat pixel height — with a fluid, responsive width, a fixed height would
   force object-fit: cover to crop a different, unpredictable amount of the
   image at every viewport size, which is exactly what threw off the floor
   band calibration below (measured against the full, uncropped image).
   Matching the ratio exactly means the photo is never cropped at all, so
   those measurements hold true at any width. */
.fpp-elev-photo {
  position: relative;
  aspect-ratio: 1344 / 710;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hv-deep);
  cursor: pointer;
}
.fpp-elev-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.fpp-elev-photo:hover > img { transform: scale(1.035); }
.fpp-elev-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,52,48,0.3) 0%, rgba(20,52,48,0.04) 35%, rgba(20,52,48,0.12) 75%, rgba(20,52,48,0.45) 100%);
}
/* Spotlight on whichever floor's slice of the photo the cursor is over —
   an SVG overlay rather than a plain rectangle, because the photo is a
   3-quarter angle render: the real floor lines slope toward the building's
   near corner, so the highlight has to follow a polygon (set in JS,
   floorPolygonPath) instead of a straight top/bottom band. .fpp-elev-dim is
   the full photo rect with that polygon cut out as a hole (fill-rule:
   evenodd), which is what dims everything outside the hovered floor;
   .fpp-elev-band-outline traces the same polygon as a stroke only, standing
   in for the old border-top/border-bottom accent lines. */
.fpp-elev-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fpp-elev-overlay.is-visible { opacity: 1; }
.fpp-elev-dim { fill: rgba(8, 14, 13, 0.55); transition: d 0.15s ease; }
.fpp-elev-band-outline {
  fill: none;
  stroke: rgba(255, 214, 140, 0.85);
  stroke-width: 1.5;
  transition: d 0.15s ease;
}
.fpp-elev-hint {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(20,52,48,0.55);
  color: var(--hv-cream);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  pointer-events: none;
}
/* Positioned via inline top/left (set in JS to the actual click/hover point
   on the photo, not just a fixed horizontal center) — a plain floating
   label with no pointer/tail, so it reads as "pinned at this exact spot"
   rather than a speech-bubble pointing at something below it. */
.fpp-elev-tag,
.fpp-elev-tag-ghost {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 3;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}
.fpp-elev-tag {
  background: var(--hv-ink);
  color: var(--hv-cream);
  transition: top 0.2s ease, left 0.2s ease;
}
.fpp-elev-tag-ghost {
  background: rgba(247,241,230,0.94);
  color: var(--hv-ink);
  font-size: 0.8rem;
  opacity: 0.95;
}
.fpp-suite-list { height: 100%; overflow-y: auto; }
.fpp-suite-row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--hv-line);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.fpp-suite-row:last-child { border-bottom: none; }
/* Selected from the floor plate (or this row itself) — same brass accent
   used for the selected suite there, so the two stay visually linked. */
.fpp-suite-row.is-selected { background: rgba(199, 149, 82, 0.1); box-shadow: inset 3px 0 0 var(--hv-brass); }
.fpp-suite-top { display: flex; align-items: flex-start; gap: var(--space-md); }
.fpp-suite-main { flex: 1; min-width: 0; cursor: pointer; border-radius: var(--radius); }
.fpp-suite-main:focus-visible { outline: 2px solid var(--hv-brass-dark); outline-offset: 2px; }
.fpp-suite-main h4 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.fpp-suite-specs { font-size: 0.82rem; color: var(--hv-teal); margin: 0; }
.fpp-suite-status { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hv-success); }
.fpp-suite-price-col { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; text-align: right; }
.fpp-suite-price { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--hv-brass-dark); }
.fpp-suite-price span { font-family: var(--font-body); font-size: 0.68rem; color: var(--hv-teal); font-weight: 600; }
/* "Loading…"/"Contact us" fallbacks — quiet body text, not the bold display
   font .fpp-suite-price uses for a real number, so a still-loading or
   no-price row doesn't read as a second heading next to the suite name. */
.fpp-suite-price-pending { font-size: 0.85rem; font-weight: 600; color: var(--hv-teal); }
.fpp-suite-contact-link { font-size: 0.85rem; font-weight: 600; color: var(--hv-teal); text-decoration: none; }
.fpp-suite-contact-link:hover { color: var(--hv-brass-dark); text-decoration: underline; }

/* Reserve/Apply/Book a Tour — real pill buttons, not plain text links, with
   one clear primary (filled) and two secondary (outline). Three genuinely
   different intents (rent now / apply / just come look) now read as
   different weight instead of identical loose text competing for the same
   attention. The chevron (→ full unit details) stays lowest-commitment of
   the four, at the end of the row. */
.fpp-suite-cta-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.fpp-suite-btn {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--hv-line);
  color: var(--hv-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fpp-suite-btn:hover { border-color: var(--hv-brass); color: var(--hv-brass-dark); background: rgba(199, 149, 82, 0.08); }
.fpp-suite-btn-primary { background: var(--hv-brass); border-color: var(--hv-brass); color: var(--hv-white); }
.fpp-suite-btn-primary:hover { background: var(--hv-brass-dark); border-color: var(--hv-brass-dark); color: var(--hv-white); }
.fpp-suite-chevron {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--hv-teal);
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fpp-suite-chevron svg { width: 18px; height: 18px; }
.fpp-suite-chevron:hover, .fpp-suite-chevron:focus-visible { opacity: 1; background: rgba(199, 149, 82, 0.12); color: var(--hv-brass-dark); }
.fpp-suite-empty { padding: var(--space-lg) var(--space-md); text-align: center; color: var(--hv-teal); font-size: 0.85rem; }
.fpp-building-note { max-width: 720px; margin: var(--space-sm) auto 0; text-align: center; font-size: 0.78rem; color: var(--hv-teal); opacity: 0.85; }
@media (max-width: 860px) {
  .fpp-building-body { grid-template-columns: 1fr; }
  .fpp-building-left { border-right: none; border-bottom: 1px solid var(--hv-line); }
  .fpp-suite-list { max-height: 420px; }
}

/* Empty state */
.fpp-empty {
  text-align: center;
  background: linear-gradient(180deg, var(--hv-sand), var(--hv-cream));
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-md);
  margin-top: var(--space-lg);
}
.fpp-empty p { color: var(--hv-teal); margin-bottom: var(--space-md); }

/* Closing CTA banner */
.fpp-closing {
  position: relative;
  overflow: hidden;
  color: var(--hv-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  margin: 0 auto var(--space-2xl);
  max-width: var(--container-w);
}
.fpp-closing-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.fpp-closing::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,15,0.6) 0%, rgba(10,16,15,0.8) 100%);
}
.fpp-closing > :not(.fpp-closing-photo) { position: relative; z-index: 1; }
.fpp-closing h2 { color: var(--hv-white); }
.fpp-closing p { color: rgba(255, 255, 255, 0.85); max-width: 52ch; margin: 0 auto var(--space-md); }
.fpp-closing .hero-ctas { justify-content: center; }

/* Homepage floor-plans teaser (replaces the old in-page carousel) */
.fp-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.fp-teaser-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #fdfbf6;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}
.fp-teaser-card:hover { box-shadow: var(--shadow-lift); }
.fp-teaser-plan {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  color: var(--hv-deep);
}
.fp-teaser-plan .fp-svg { width: 100%; height: 100%; }
.fp-teaser-plan img { width: 100%; height: 100%; object-fit: contain; }
.fp-teaser-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--hv-deep);
}
.fp-teaser-name {
  color: var(--hv-white);
  font-weight: 700;
  font-size: 0.95rem;
}
.fp-teaser-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--hv-brass);
  white-space: nowrap;
}
@media (max-width: 860px) { .fp-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fp-teaser-grid { grid-template-columns: 1fr; } }
.fp-teaser-actions { display: flex; justify-content: center; }

/* Homepage photo-gallery teaser (full gallery now lives on gallery.html) */
.gallery-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.gallery-teaser-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}
.gallery-teaser-card .hv-photo,
.gallery-teaser-card .hv-photo img { width: 100%; height: 100%; }
.gallery-teaser-card:hover { box-shadow: var(--shadow-lift); }
@media (max-width: 860px) { .gallery-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-teaser-grid { grid-template-columns: 1fr; } }
.gallery-teaser-actions { display: flex; justify-content: center; }

/* Homepage amenities teaser (full amenities now live on amenities.html) */
.amenities-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.amenities-teaser-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease;
}
.amenities-teaser-card .hv-photo,
.amenities-teaser-card .hv-photo img { width: 100%; height: 100%; }
.amenities-teaser-card:hover { box-shadow: var(--shadow-lift); }
@media (max-width: 860px) { .amenities-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .amenities-teaser-grid { grid-template-columns: 1fr; } }

/* ============ "Wow factor" motion system (js/cinematic.js, js/micro-interactions.js) ============
   Shared, sitewide, JS-driven enhancements — kept in one place so every page's
   "alive" treatment (slow Ken Burns zoom on showcase photography, a hero
   cursor-spotlight, real-time social-proof pulses) reads as one consistent
   system rather than a pile of one-off page tweaks. See CONTENT_NOTES.md for
   what's simulated vs. real behind each of these. */

/* Ken Burns — a slow, continuous zoom/pan cinematic.js opts real showcase
   photos into (never grid thumbnails, which would look busy at scale). Only
   ever added to an <img> whose parent already clips overflow (.hv-photo,
   .about-media, .unit-carousel-main, etc.), so the zoom never spills past
   its rounded frame. */
@keyframes hv-kenburns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
.hv-kenburns { animation: hv-kenburns 24s ease-in-out infinite alternate; transform-origin: 55% 45%; will-change: transform; }

/* Reusable "live" pulse dot — real-time social proof (homepage conditions
   strip, floor-plan teaser activity line) and the tide widget's "now" marker
   all share this one dot rather than each defining their own pulse. */
.hv-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hv-success);
  flex: none;
  animation: hv-live-pulse 1.8s ease-in-out infinite;
}
@keyframes hv-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,122,82,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(47,122,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,122,82,0); }
}

/* Aggregate "N people exploring floor plans right now" line — reuses
   .fpp-card-urgency's color/weight but centered as a standalone line rather
   than left-aligned inside a card. */
.fpp-card-urgency.is-centered { justify-content: center; margin: -0.25rem 0 var(--space-lg); }

/* ============ Live Harbor Conditions strip (homepage, js/tide-widget.js) ============
   A slim, always-current strip directly under the hero: the visitor's real
   local time, a simulated tide state for the fictional harbor, and (when
   there's real traffic to show) a live count of people exploring floor plans
   right now. See CONTENT_NOTES.md → "Live Harbor Conditions strip" for
   exactly what's real vs. illustrative here. */
.hv-conditions-strip {
  background: var(--hv-deep);
  color: var(--hv-white);
  padding: var(--space-sm) 0;
}
.hv-conditions-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.hv-condition {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}
.hv-condition strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--hv-white);
  font-variant-numeric: tabular-nums;
}
.hv-condition-icon { width: 16px; height: 16px; flex: none; color: var(--hv-brass); }
.hv-condition-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.18); flex: none; }
.hv-tide-mini { width: 30px; height: 20px; flex: none; overflow: visible; }
.hv-tide-mini .hv-tide-water { transition: y 1.2s ease, height 1.2s ease; }
@media (max-width: 720px) {
  .hv-conditions-inner { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hv-condition-divider:last-of-type { display: none; }
}

/* ============ Ambient soundscape control (homepage, js/soundscape.js) ============
   No new UI — the existing #heroMuteToggle already means "sound on/off" for
   the hero video, so js/soundscape.js hooks the same button rather than
   adding a second control. Nothing to style here beyond what already exists. */

@media (prefers-reduced-motion: reduce) {
  .hv-kenburns { animation: none; }
  .hv-live-dot { animation: none; }
}
.amenities-teaser-actions { display: flex; justify-content: center; }

/* ============ Floor-plans page — floor-switch choreography (js/floorplans.js) ============
   The "Explore by Floor" browser previously snapped between floors and
   filter states instantly (a full innerHTML rebuild with no transition).
   These rules back three related moves: the floor-plate diagram and suite
   list cross-fading on a floor/filter change, the current-floor tag on the
   building photo gliding to its new position (the tag's own top/left
   transition already existed below in .fpp-elev-tag — the fix that makes it
   actually fire lives in floorplans.js, which now updates that element in
   place instead of recreating it every time), and grid cards rising in with
   a slight stagger instead of appearing all at once. */
.fpp-floorplate,
.fpp-suite-list {
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.fpp-floorplate.is-swapping,
.fpp-suite-list.is-swapping {
  opacity: 0;
  transform: translateY(4px);
}

.fpp-card.is-entering { opacity: 0; transform: translateY(14px) scale(0.98); }

/* A quick pop on a card's price the moment real pricing data first arrives
   (replacing "Loading…"), so the switch from placeholder to real number
   reads as something arriving rather than silently changing underneath the
   visitor. */
@keyframes fpp-price-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.fpp-card-price.is-fresh { animation: fpp-price-pop 0.5s ease-out; transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  .fpp-floorplate, .fpp-suite-list { transition: none; }
  .fpp-card, .fpp-card-media { transition: none; }
}

/* ============ Rental Application (apply.html) ============ */
.ap-intro {
  background: var(--hv-deep);
  color: var(--hv-white);
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}
.ap-intro h1 { color: var(--hv-white); }
.ap-intro p { max-width: 46ch; margin: 0 auto; color: rgba(255,255,255,0.8); }

.ap-wizard { padding: var(--space-lg) 0; }

.ap-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 860px) { .ap-grid { grid-template-columns: 1fr; } }

.ap-summary { position: sticky; top: 100px; }
.ap-summary-card {
  background: var(--hv-sand);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.ap-summary-lines { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-sm); }
.ap-summary-lines > div { display: flex; justify-content: space-between; gap: var(--space-sm); border-bottom: 1px solid var(--hv-line); padding-bottom: 0.6rem; }
.ap-summary-lines dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hv-teal); font-weight: 700; }
.ap-summary-lines dd { margin: 0; font-weight: 600; color: var(--hv-deep); text-align: right; }

.ap-card {
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  max-width: 620px;
  margin: 0 auto;
}
.ap-divider { border: none; border-top: 1px solid var(--hv-line); margin: var(--space-md) 0; }
.ap-rental-lines dd { font-weight: 700; }
.ap-total-line dt, .ap-total-line dd { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--hv-deep); }

.ap-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--hv-ink);
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.ap-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--hv-brass); flex: none; cursor: pointer; }

/* Applicant list + add-new form (step 3) */
.ap-applicant-list { display: grid; gap: var(--space-sm); margin-bottom: var(--space-md); max-width: 620px; margin-left: auto; margin-right: auto; }
.ap-applicant-card {
  background: var(--hv-sand);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
  position: relative;
}
.ap-applicant-card h4 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.ap-applicant-card p { margin: 0.15rem 0; font-size: 0.85rem; color: var(--hv-teal); display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.ap-applicant-card p svg { width: 14px; height: 14px; flex: none; }
.ap-applicant-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--hv-brass-dark);
  background: rgba(199,149,82,0.14);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.ap-applicant-remove {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(27,33,29,0.08);
  color: var(--hv-teal);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.ap-applicant-remove:hover { background: var(--hv-error); color: var(--hv-white); }

.ap-add-applicant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto var(--space-lg);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--hv-teal);
  font-size: 0.85rem;
  font-weight: 600;
}
.ap-add-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--hv-brass);
  color: var(--hv-white);
  font-size: 1.4rem;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ap-add-applicant-btn:hover .ap-add-icon { background: var(--hv-brass-dark); transform: scale(1.06); }

.ap-add-applicant-form {
  max-width: 620px;
  margin: 0 auto var(--space-lg);
  background: var(--hv-white);
  border: 1px solid var(--hv-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
}
.ap-add-applicant-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: var(--space-sm); }

/* Document signature (step 3) */
.ap-sign-card p:first-child { margin-top: 0; }
.ap-signed-badge {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: var(--space-sm);
  padding: 0.6rem 0.9rem;
  background: rgba(47,122,82,0.1);
  border: 1px solid rgba(47,122,82,0.3);
  color: var(--hv-success);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
}
.ap-signed-badge svg { width: 16px; height: 16px; flex: none; }
.ap-sign-hint { margin-top: var(--space-sm); font-size: 0.82rem; color: var(--hv-teal); }

/* Same branded focus ring the rest of the site's custom controls get
   (.bt-pill/.bt-unit-card/etc.) — these two use bespoke shapes rather than
   .btn, so they don't inherit it automatically. */
.ap-add-applicant-btn:focus-visible,
.ap-applicant-remove:focus-visible {
  outline: 2px solid var(--hv-brass-dark);
  outline-offset: 2px;
}

/* Payment (step 4) */
.ap-payment-card { max-width: 480px; }
.ap-payment-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  margin-bottom: var(--space-md);
}
.ap-payment-amount span { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hv-teal); font-weight: 700; }
.ap-payment-amount strong { font-family: var(--font-display); font-size: 2.2rem; color: var(--hv-brass-dark); }

/* application-received.html */
.ap-received-rep { color: rgba(255,255,255,0.85); font-size: 0.92rem; margin-top: -0.5rem; margin-bottom: var(--space-sm); }
.ap-received-rep a { color: var(--hv-white); text-decoration: underline; }