/* ────────────────────────────────────────────────────────────────────────
 * Hub Realty — shared community page stylesheet.
 *
 * Single source of truth for the 8 community pages. All page-specific
 * markup lives in /communities/<slug>.php; all visual styling lives here.
 *
 * Class prefix `c` = community-page-only (cnav, chero, cunit, cgallery,
 * camen, cpets, cvoices, cvisit, csisters, cfoot). This avoids
 * collision with the homepage's existing classes (.nav, .hero, etc.).
 * ──────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Native scroll only. We deliberately do NOT set scroll-behavior: smooth
 * — even though it's spec'd to affect only programmatic scrolls, some
 * browsers (notably Chrome on certain platforms) apply subtle scroll
 * smoothing for user input when it's enabled, which makes the page
 * feel weighted. Anchor-link smoothness isn't worth that trade-off.
 * scroll-snap is also deliberately absent — both would compromise the
 * crisp native scroll feel. */

:root {
  --navy:   #0a1628;
  --navy2:  #111d30;
  --gold:   #c9a34a;
  --gold2:  #e0ba65;
  --gold3:  #f5d685;
  --cream:  #faf8f3;
  --cream2: #f2ede1;
  --white:  #ffffff;
  --grey:   #7a8494;
  --lgrey:  #e8e3d8;
  --text:   #1a2235;
  --serif:  'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --sans:   'Outfit', 'Outfit Fallback', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky-footer pattern: body fills the viewport vertically, all sections
   * sit at the top, and .cfoot { margin-top: auto } pushes the footer flush
   * to the bottom on short pages. On tall pages where content exceeds the
   * viewport, margin-top: auto resolves to 0 and the footer sits naturally
   * after the last section. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Explicit — some browsers default flex gap to non-zero in certain
   * version/UA combinations, which would create a thin pale band of body
   * background between sections. Zeroing it removes that ambiguity. */
  gap: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ─── Shared primitives ──────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 1rem;
}
.section { padding: 5.5rem 1.5rem; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 .6rem;
  line-height: 1.15;
}
.section-sub {
  font-size: .95rem;
  color: var(--grey);
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}
.btn {
  display: inline-block;
  padding: .9rem 1.7rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  border-radius: 2px;
}
.btn:hover { background: var(--gold2); border-color: var(--gold2); }
.btn-outline { background: transparent; color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--navy); }
.btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--navy); }

/* ─── 1. NAV — community-branded ─────────────────────────────────────── */
.cnav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  /* Solid navy — was rgba(.92) + backdrop-filter: blur(10px), which on
   * some Safari/WebKit versions renders as a dark cast over the whole
   * page rather than blurring only the area behind the nav. Solid bg
   * gives the same visual weight at the top without that rendering risk. */
  background: var(--navy);
  border-bottom: 1px solid rgba(201, 163, 74, .18);
}
.cnav-inner {
  /* Full-width: no max-width / no centered margin. Navy bg already
   * fills edge-to-edge from .cnav; this row spans the entire viewport
   * width with 3rem inset on each side so left logo group and right
   * link/CTA group sit flush against the breathing-room padding. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 3rem;
}
.cnav-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  line-height: 1;
}
.cnav-mark {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.cnav-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.cnav-name {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--gold2);
  line-height: 1;
}
.cnav-location {
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-top: .4rem;
  line-height: 1;
}
.cnav-links { display: flex; gap: 1.8rem; margin-left: auto; }
.cnav-links a {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  font-weight: 500;
  transition: color .2s;
}
.cnav-links a:hover { color: var(--gold2); }
.cnav-cta {
  background: var(--gold);
  color: var(--navy);
  padding: .55rem 1.1rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  transition: background .2s;
}
.cnav-cta:hover { background: var(--gold2); }
.cnav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--gold2);
  font-size: 1.4rem;
  cursor: pointer;
}

/* ─── 1b. RESIDENT TOOLS (nav dropdown) ──────────────────────────────────
 * Desktop: a hover/focus dropdown that sits inside .cnav-links and matches
 * the rest of the nav typography. Mobile overrides (see media query) flatten
 * it into an always-visible, grouped section so residents never have to dig
 * for the Pool Pass / Pay Rent / etc. links. */
.cnav-rt { position: relative; display: flex; align-items: center; }
.cnav-rt-toggle {
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  font-weight: 500;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s;
}
.cnav-rt-toggle:hover,
.cnav-rt:hover .cnav-rt-toggle,
.cnav-rt.open .cnav-rt-toggle,
.cnav-rt:focus-within .cnav-rt-toggle { color: var(--gold2); }
.cnav-rt-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .2s;
}
.cnav-rt:hover .cnav-rt-caret,
.cnav-rt.open .cnav-rt-caret,
.cnav-rt:focus-within .cnav-rt-caret { transform: rotate(180deg); }
.cnav-rt-menu {
  position: absolute;
  top: calc(100% + .9rem);
  right: 0;
  min-width: 232px;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, .07);
  border-top: 2px solid var(--gold);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1),
              transform .25s cubic-bezier(.22, 1, .36, 1);
  z-index: 110;
  display: flex;
  flex-direction: column;
}
/* Invisible bridge spanning the gap between the trigger and the menu, so the
 * cursor can travel straight down into the menu without ever leaving the
 * hover area (no flicker/close while crossing the gap). */
.cnav-rt-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -.9rem; height: .9rem;
}
.cnav-rt:hover .cnav-rt-menu,
.cnav-rt.open .cnav-rt-menu,
.cnav-rt:focus-within .cnav-rt-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cnav-rt-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;                 /* comfortable tap/click target */
  padding: 0 1.2rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: color .2s, background .2s, padding-left .2s;
}
.cnav-rt-menu a:last-child { border-bottom: 0; }
.cnav-rt-menu a:hover {
  color: var(--gold2);
  background: rgba(255, 255, 255, .03);
  padding-left: 1.5rem;
}
/* Mobile-only bits — hidden on desktop */
.cnav-rt-heading { display: none; }
.cnav-apply-mobile { display: none; }

/* ─── 2. HERO (cinematic image + community name ONLY) ────────────────── */
/* Photo at 100% natural brightness everywhere — no gradient, no scrim,
 * no panel. The only thing in the hero is the community name as a
 * wordmark, anchored ~60% down the frame. All supporting content
 * (eyebrow / tagline / meta / CTA) lives in the .cintro section below. */
.chero {
  position: relative;
  /* Full viewport across browsers (vh → svh → dvh cascade) */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--white);
}
/* Apple-style hero parallax — background-attachment: fixed pins the
 * image to the viewport while subsequent sections slide up over it.
 * Background-position is animated (instead of transform: scale) so the
 * Ken Burns drift coexists cleanly with the parallax — the image
 * subtly pans vertically while staying viewport-pinned. */
.chero-bg {
  /* DEAD/legacy: no page uses .chero-bg (all heroes use .chero-fade). Stripped
     of the old background-attachment:fixed + animated background-position that
     caused per-scroll-frame repaints. Kept only as a selector reference. */
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Position-only Ken Burns drift around --hero-y (no transform: scale).
 * The drift is ±2% around the configured center, plus a subtle horizontal
 * pan ±2%, so the photo never feels static but also never visibly zooms. */
/* Position-only Ken Burns drift around --hero-y. The drift is ±2%
 * around the configured center, plus a subtle horizontal pan ±2%, so
 * the photo never feels static but also never visibly zooms. */
@keyframes chero-pan {
  from { background-position: 48% calc(var(--hero-y, 50%) - 2%); }
  to   { background-position: 52% calc(var(--hero-y, 50%) + 2%); }
}
@media (prefers-reduced-motion: reduce) {
  .chero-bg { animation: none; }
}
/* iOS Safari does not support background-attachment: fixed properly
 * (renders bg at full viewport scale and breaks on scroll). Override
 * to scroll on mobile so the image behaves normally rather than
 * breaking. Desktop browsers all support fixed correctly. */
@media (max-width: 768px) {
  .chero-bg { background-attachment: scroll; }
}
/* Wordmark composition — lower-left third, editorial magazine framing.
 * The wordmark sits in a designed corner of the hero, not floating across
 * the middle. Roman serif (not italic) reads cleanly against the lower
 * portion of the photo. A single tall thin gold rule to the LEFT frames
 * the name editorially — quotation-bar convention that survives on busy
 * photos because vertical lines don't fight horizontal photo elements
 * (railings, foliage). Tight letter-edge text shadows pair with a
 * localized radial-gradient pocket (.chero-pocket) so legibility comes
 * from a tonal floor rather than heavy shadow weight. */
.chero-content {
  position: absolute;
  top: 65%;
  left: 3rem;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  max-width: calc(100% - 6rem);
}
.chero-rule {
  display: block;
  width: 2px;
  height: 5.6rem;
  background: var(--gold);
  flex-shrink: 0;
  /* Light shadow keeps the gold rule visible on lighter photo regions. */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}
.chero-h1 {
  font-family: var(--serif);
  font-style: normal;
  font-size: 7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-align: left;
  /* Warm off-white (cream undertone) — more refined against the photo
   * than pure white, which can read too clinical. */
  color: #faf6ef;
  margin: 0;
  /* Tight letter-edge crisping. The localized .chero-pocket gradient
   * provides the tonal floor; these shadows just sharpen the letterforms. */
  text-shadow:
    0 0   1px rgba(0, 0, 0, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.70),
    0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Localized darkening pocket — an elliptical radial gradient confined
 * to the lower-left where the wordmark sits. Max opacity 0.35 at the
 * center; fades to fully transparent by 70% of the ellipse radius.
 * The right ~60% and upper ~50% of the hero stay completely untouched —
 * the photo carries the rest of the frame on its own. */
.chero-pocket {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 35% at 18% 70%,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.22) 30%,
    rgba(0, 0, 0, 0)    70%
  );
}

/* Location tag — bottom-RIGHT corner. The wordmark + vertical rule
 * live in the lower-LEFT, so the location tag goes opposite to balance
 * the composition. Three-corner anchor: wordmark lower-left, location
 * lower-right, scroll indicator bottom-center. */
.chero-tag {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-end;
}
.chero-tag-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
}
.chero-tag-text {
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  line-height: 1;
  /* Four-layer letter-edge shadow stack — same legibility approach as the
   * wordmark. Tight inner crisping + soft outer halo so the gold caps
   * read against any region of the photo. */
  text-shadow:
    0 0   1px rgba(0, 0, 0, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.60),
    0 3px 8px rgba(0, 0, 0, 0.40);
}

/* Scroll indicator — a hairline gold vertical rule at the bottom-center
 * of the hero with a slow opacity pulse. Reads as "there's more below"
 * without yelling. Respects prefers-reduced-motion. */
.chero-scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: 1px;
  height: 40px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: chero-scroll-pulse 2.5s ease-in-out infinite alternate;
}
@keyframes chero-scroll-pulse {
  from { opacity: 0.4; }
  to   { opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .chero-scroll { animation: none; opacity: 0.7; }
}

/* Visually-hidden accessibility helper — preserves an h1 for screen
 * readers + SEO without putting the heading on screen. The visible page
 * title chain (nav community name + intro eyebrow/subhead) carries the
 * brand and context for sighted users. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── 2a. FADE + PARALLAX HERO (colonial-village.php) ─────────────────
 * Used on pages that swap out the static .chero markup for .chero-fade.
 * Standard 100vh hero — no sticky pinning, no scroll runway. On scroll:
 *   • Photo translates upward at 0.5× scroll speed (0.3× on mobile)
 *     via transform: translateY set by community.js. Replaces the
 *     background-attachment: fixed approach, which is buggy on Windows
 *     Chrome + iOS Safari.
 *   • Wordmark + rules + scroll indicator fade opacity 1 → 0 across
 *     the first viewport-height of scroll.
 * .chero-fade-bg is taller than the hero (180vh) so the parallax
 * translateY can shift the photo without revealing the navy bg below.
 * Ken Burns pan runs in parallel as a background-position animation —
 * separate property from transform, so the two animations coexist. */
.chero-fade {
  position: relative;
  height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}
/* --hero-y is a per-page override for the vertical bg anchor (default 50%).
 * Set inline via style="--hero-y: 60%" when a community's photo has the
 * building anchored lower in the frame and needs more bottom visible.
 *
 * Height is 100vh (not 180vh) so background-size: cover renders the photo
 * at its natural cover sizing for the viewport — not scaled up to fill a
 * tall buffer container. The transform parallax (driven by community.js
 * at 0.3× scroll speed) only shifts the photo's local position within
 * .chero-fade; it doesn't require extra image height because the gap that
 * the parallax creates above the visible region is always off-screen. */
/* Hero photo — PINNED via GPU transform driven by community.js (§3), NOT
 * background-attachment: fixed. (That was removed 2026-06-15: it forced a
 * full-viewport repaint on EVERY scroll frame — the main scroll-jank source.)
 * The photo sits on its own compositor layer; community.js translates it DOWN
 * by scrollY each frame (passive + rAF, absolute value — no drift) so it stays
 * anchored to the viewport while .chero-fade and the opaque sections below
 * scroll UP over it — the "content scrolls over a fixed hero" effect, restored
 * without the jank. The translate is compositor-only (no per-frame repaint).
 *
 * Ken Burns (the slow zoom) lives on ::before as a transform: scale, so it
 * never fights the JS translate on the parent. Mobile (≤768px) + touch +
 * reduced-motion get a normal hero (community.js skips the transform there;
 * iOS has no reliable fixed/pin and a per-frame transform on touch can jank —
 * smoothness wins). The opaque .cglance below covers the photo as it slides up. */
.chero-fade-bg {
  --hero-y: 55%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  transform: translate3d(0, 0, 0);  /* community.js overwrites Y to pin the photo */
  will-change: transform;
  backface-visibility: hidden;
}
.chero-fade-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: 50% var(--hero-y, 55%);
  background-repeat: no-repeat;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  animation: chero-zoom 24s ease-in-out infinite alternate;
}
@keyframes chero-zoom {
  from { transform: translateZ(0) scale(1); }
  to   { transform: translateZ(0) scale(1.06); }
}
/* Mobile swap — use --hero-img-mobile crop if the page emits one. No pin on
 * mobile (community.js leaves transform untouched, so the photo scrolls
 * normally with the hero — a clean, smooth standard hero). */
@media (max-width: 768px) {
  .chero-fade-bg { transform: none; }
  .chero-fade-bg::before {
    background-image: var(--hero-img-mobile, var(--hero-img));
  }
}
@media (prefers-reduced-motion: reduce) {
  .chero-fade-bg { transform: none; }
  .chero-fade-bg::before { animation: none; }
}

/* Overlay groups everything that fades on scroll — wordmark composition
 * + scroll indicator. JS sets opacity on this container, letting both
 * children cross-fade together. pointer-events:none keeps faded-out
 * markup from intercepting clicks (lightbox imagery sits behind once
 * the hero scrolls away). */
.chero-fade-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .chero-fade-overlay { opacity: 1 !important; }
}

.chero-fade-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 0 1.5rem;
  width: 100%;
}
.chero-fade-rule {
  display: block;
  width: 120px;
  height: 1px;
  background: var(--gold);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.chero-fade-h1 {
  font-family: var(--serif);
  font-style: normal;
  font-size: 7rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  color: #faf6ef;
  margin: 0;
  text-align: center;
  text-shadow:
    0 0 30px rgba(0, 0, 0, 0.50),
    0 0 60px rgba(0, 0, 0, 0.40),
    0 2px  4px rgba(0, 0, 0, 0.50);
}
@media (max-width: 1024px) and (min-width: 769px) {
  .chero-fade-h1 { font-size: 5.5rem; }
  .chero-fade-rule { width: 100px; }
}
/* Mobile (≤768px) overrides for .chero-fade live in the unified MOBILE
 * REDESIGN block at the bottom of this stylesheet, not inline here. */

/* ─── 2b. INTRO (editorial bridge — eyebrow, tagline, meta, CTA) ─────── */
.cintro {
  background: var(--cream);
  padding: 5rem 1.5rem;
  text-align: center;
}
.cintro-inner {
  max-width: 960px;
  margin: 0 auto;
}
.cintro-eyebrow {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 2rem;
}
.cintro-subhead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 2.5rem;
}
.cintro-meta-block {
  margin-bottom: 2.8rem;
}
.cintro-meta-block::before,
.cintro-meta-block::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: var(--gold);
  margin: 1.2rem auto;
}
.cintro-meta {
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
  margin: 0;
}
.cintro-meta strong { color: var(--gold); font-weight: 700; }

/* ─── 3. AT A GLANCE ─────────────────────────────────────────────────── */
.cglance {
  background: var(--navy);
  color: var(--white);
  padding: 2.6rem 1.5rem;
}
.cglance-inner {
  display: grid;
  /* 3 narrow + 1 wide for the rent panel (the feature) */
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1.5rem;
}
.cglance-item {
  text-align: center;
  padding: 0 1rem;
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.cglance-item:first-child { border-left: 0; }
.cglance-value {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--gold2);
  line-height: 1.1;
  margin-bottom: .35rem;
}
.cglance-label {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
/* Feature panel — make rent the visual anchor */
.cglance-item.feature .cglance-value {
  font-size: 2.85rem;
  color: var(--gold3);
  letter-spacing: -.01em;
  margin-bottom: .55rem;
}
.cglance-item.feature .cglance-label {
  color: rgba(255, 255, 255, .7);
  font-size: .62rem;
}

/* ─── 4. OVERVIEW (editorial 2-col) ──────────────────────────────────── */
.coverview { background: var(--cream); }
.coverview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.coverview-text { padding-right: 1rem; }
.coverview-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 1.4rem;
  line-height: 1.2;
}
.coverview-text p {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1rem;
  font-weight: 300;
  color: var(--text);
}
.coverview-text p strong { font-weight: 500; color: var(--navy); }
/* Drop cap on the first paragraph — magazine treatment */
.coverview-text p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 5rem;
  line-height: .85;
  font-weight: 600;
  color: var(--gold);
  float: left;
  margin: .25rem .7rem -.1rem 0;
  padding: 0;
}
.coverview-address {
  margin-top: 1.8rem;
  padding: 1.1rem 1.4rem;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  font-size: .92rem;
  line-height: 1.55;
}
.coverview-address strong {
  display: block;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .25rem;
  font-weight: 600;
}
.coverview-img {
  height: 480px;
  overflow: hidden;
}
.coverview-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ─── 5. RESIDENCES (data-forward unit cards, 2-col grid) ────────────── */
.cresidences { background: var(--cream); }
.cunit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* Orphan centering — when a 2-col grid has an odd item count, the trailing
 * card alone in the last row would sit left-aligned with empty space on the
 * right. Span both columns and justify-self center so it lands on the
 * horizontal center of the row, constrained to the natural single-card
 * width so it doesn't stretch wide. Affects 5-unit (Black Rock) and 3-unit
 * (Coleman, Cypress) layouts. */
.cunit-grid > .cunit-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: calc((100% - 1.8rem) / 2);
}
.cunit-card {
  background: var(--white);
  border: 1px solid var(--lgrey);
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
/* !important defeats the higher-specificity .fade-up.visible transform
 * rule so the hover lift wins. Without it, after fade-up resolves to
 * translateY(0), the hover state can't override transform from a lower-
 * specificity selector. */
.cunit-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(10, 22, 40, .08);
}
.cunit-img {
  height: 280px;
  background: var(--white);
  border-bottom: 1px solid var(--lgrey);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
/* WebP <picture> wrappers must be transparent to layout so the inner <img>
   keeps sizing against its real container (.cunit-img/.tile/.coverview-img/
   .caerial-poster) — an unsized <picture> box otherwise lets the image
   overflow its card (floor-plan overflow bug, fixed 2026-06-15). */
picture { display: contents; }
.cunit-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
.cunit-body { padding: 1.5rem 1.7rem 1.7rem; }
.cunit-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 .9rem;
  line-height: 1.2;
}
.cunit-stats {
  display: flex;
  gap: 1.8rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--lgrey);
}
.cunit-stat-label {
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: .25rem;
  font-weight: 600;
}
.cunit-stat-value {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
}
.cunit-actions {
  display: flex;
  gap: .9rem;
  align-items: center;
}
.cunit-link {
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.cunit-link:hover { color: var(--gold2); border-color: var(--gold2); }
.cunit-apply {
  margin-left: auto;
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  border: 1px solid var(--navy);
  padding: .55rem .95rem;
  transition: background .2s, color .2s;
  border-radius: 2px;
}
.cunit-apply:hover { background: var(--navy); color: var(--white); }

/* ─── 6. GALLERY (image-forward, asymmetric grid) ────────────────────── */
.cgallery { background: var(--white); }
.cgallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.cgallery-grid .tile {
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.cgallery-grid .tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.cgallery-grid .tile:hover img { transform: scale(1.05); }
.cgallery-grid .tile.lg   { grid-column: span 2; grid-row: span 2; }
.cgallery-grid .tile.wide { grid-column: span 2; }
.cgallery-grid .tile.tall { grid-row: span 2; }

/* ─── 7. AERIAL ──────────────────────────────────────────────────────── */
.caerial {
  background: var(--navy);
  color: var(--white);
}
.caerial .section-title { color: var(--white); }
.caerial .section-sub   { color: rgba(255, 255, 255, .65); }
.caerial-video {
  /* Modern responsive video container — aspect-ratio handles the 16:9
   * shape natively (96%+ browser support in 2026). The legacy
   * padding-bottom hack stays as a fallback for the few remaining
   * browsers without aspect-ratio support. */
  position: relative;
  aspect-ratio: 16 / 9;
  padding-bottom: 0;
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid rgba(201, 163, 74, .3);
  overflow: hidden;
}
.caerial-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Custom click-to-play poster (replaces YouTube's default red play UI) */
.caerial-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.caerial-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, filter .3s ease;
}
.caerial-poster:hover img { transform: scale(1.02); filter: brightness(1.05); }
.caerial-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(10, 22, 40, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s, transform .2s, border-color .2s;
  pointer-events: none;
}
.caerial-poster:hover .caerial-play {
  background: rgba(201, 163, 74, .25);
  border-color: var(--gold2);
  transform: translate(-50%, -50%) scale(1.06);
}
.caerial-play svg {
  width: 32px; height: 32px;
  fill: var(--gold);
  margin-left: 5px; /* optical centering of the triangle */
}

/* ─── 7b. FLOOR PLAN DIAGRAMS (townhomes only) ─────────────────────────
 * Three-figure level-by-level layout grid below Residences. Used only by
 * townhomes-colonial-village.php since that's the only community with
 * multi-level layout diagrams that apply across all units. */
.cfloorplans { background: var(--cream2); }
.cfloorplans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.cfloorplan {
  background: var(--white);
  border: 1px solid var(--lgrey);
  padding: 1rem 1rem 1.1rem;
  text-align: center;
  transition: box-shadow .25s, transform .25s;
}
.cfloorplan:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(10, 22, 40, .08);
}
.cfloorplan img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  background: var(--cream);
  cursor: zoom-in;
}
.cfloorplan figcaption {
  margin-top: .85rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 600;
}
.cfloorplans-pdf { text-align: center; margin: 2rem 0 0; }
.cfloorplans-pdf a {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.cfloorplans-pdf a:hover { color: var(--gold2); border-color: var(--gold2); }
@media (max-width: 768px) {
  .cfloorplans-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cfloorplan img { height: 260px; }
}

/* ─── 8. AMENITIES (variable category count, monoline icons) ──────────
 * Communities vary in how many amenity category groups they emit — most
 * have 4 (Kitchen & Bath / Climate & Comfort / Building & Service /
 * Community), but Black Rock and Coleman have only 3 (no Community
 * group). Using a hardcoded repeat(4, 1fr) would render 3 columns
 * left-anchored with empty space on the right. auto-fit collapses the
 * trailing empty track and justify-content: center centers the
 * remaining tracks across the 1200px container. minmax(220px, 270px)
 * keeps each column at the same visual width regardless of count, so
 * 3-cat and 4-cat layouts look like the same column-style with one
 * column removed rather than 3 stretched columns. */
.camen { background: var(--cream); }
.camen-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 270px));
  justify-content: center;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.camen-cat-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--gold);
}
.camen-list { list-style: none; padding: 0; margin: 0; }
.camen-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .88rem;
  padding: .35rem 0;
  color: var(--text);
  font-weight: 300;
  line-height: 1.35;
}
.camen-list li svg {
  flex-shrink: 0;
  color: var(--gold);
  width: 18px;
  height: 18px;
}

/* ─── 9. PETS (slim inline call-out) ─────────────────────────────────── */
.cpets {
  background: var(--white);
  padding: 3.5rem 1.5rem;
}
.cpets-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.cpets-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  margin: 0;
}
.cpets-title small {
  display: block;
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: .35rem;
}
.cpets-card {
  padding: 1.1rem 1.3rem;
  background: var(--cream);
  border-left: 3px solid var(--gold);
}
.cpets-card h4 {
  font-size: .92rem;
  margin: 0 0 .35rem;
  color: var(--navy);
  font-weight: 600;
}
.cpets-card p {
  margin: 0;
  font-size: .85rem;
  color: var(--text);
  line-height: 1.5;
  font-weight: 300;
}
.cpets-fee {
  display: block;
  margin-top: .4rem !important;
  font-size: .78rem !important;
  color: var(--grey) !important;
  font-style: italic;
}

/* ─── 10. RESIDENT VOICES ────────────────────────────────────────────── */
.cvoices { background: var(--navy); color: var(--white); }
.cvoices .section-title { color: var(--white); }
.cvoices .section-sub   { color: rgba(255, 255, 255, .65); }
.cvoices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* Count-aware modifier — when a community has fewer than 3 testimonials,
 * the base 3-column grid leaves trailing empty cells with the cards
 * left-anchored. Coleman currently has 2 verified Google reviews; the
 * --2 modifier centers them as 2 wider columns. */
.cvoices-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
}
/* Single verified review (e.g. Coleman) — one centered, readable column. */
.cvoices-grid--1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}
.cvoice {
  position: relative;
  padding: 2.5rem 1.5rem 1.2rem;
}
.cvoice::before {
  content: '\201C';
  position: absolute;
  top: -.5rem;
  left: -.2rem;
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: .35;
}
.cvoice-text {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 1.3rem;
  font-weight: 400;
}
.cvoice-author {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold2);
  font-weight: 600;
}
.cvoices-source {
  text-align: center;
  margin-top: 2.5rem;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

/* ─── 11. VISIT (leasing office) ─────────────────────────────────────── */
.cvisit { background: var(--cream); }
.cvisit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.cvisit-block h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--navy);
  margin: 0 0 1.1rem;
  font-weight: 600;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--gold);
}
.cvisit-block dl { margin: 0; }
.cvisit-block dt {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 1rem 0 .25rem;
  font-weight: 600;
}
.cvisit-block dt:first-of-type { margin-top: 0; }
.cvisit-block dd {
  margin: 0 0 .4rem;
  font-size: 1rem;
  color: var(--text);
  font-weight: 400;
}
.cvisit-block dd a {
  color: var(--navy);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.cvisit-block dd a:hover { border-bottom-color: var(--gold); }
.cvisit-map {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 3.5rem auto 0;
  border: 1px solid rgba(201, 163, 74, .3);
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream); /* shows behind iframe while it lazy-loads */
  box-shadow: 0 14px 40px rgba(10, 22, 40, .12),
              0  2px  8px rgba(10, 22, 40, .06);
}
.cvisit-map iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}
@media (max-width: 1024px) {
  .cvisit-map iframe { height: 360px; }
}
@media (max-width: 768px) {
  .cvisit-map { margin-top: 2.5rem; }
  .cvisit-map iframe { height: 280px; }
}

/* ─── 12. SISTER COMMUNITIES (slim quiet strip, NOT a section) ───────── */
.csisters {
  padding: 2.5rem 1.5rem;
  background: var(--cream);
  border-top: 1px solid var(--lgrey);
  border-bottom: 1px solid var(--lgrey);
}
.csisters-inner { max-width: 1200px; margin: 0 auto; }
.csisters-label {
  font-size: .55rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 600;
  margin-bottom: 1.3rem;
  text-align: center;
}
.csisters-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 2.4rem;
}
.csisters-list a {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.2;
  transition: color .2s;
  text-align: center;
}
.csisters-list a:hover { color: var(--gold); }
.csisters-list a small {
  display: block;
  font-family: var(--sans);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 400;
  margin-top: .2rem;
}

/* ─── 13. FOOTER ─────────────────────────────────────────────────────── */
.cfoot {
  background: #060e17;
  color: rgba(255, 255, 255, .35);
  padding: 3rem 1.5rem 1.6rem;
  margin-top: auto;  /* push to bottom when content is shorter than viewport */
}
.cfoot-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.cfoot-brand .name {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gold2);
  margin-bottom: .25rem;
  font-weight: 600;
}
.cfoot-brand .sub {
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.cfoot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.cfoot-links a {
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
  transition: color .2s;
}
.cfoot-links a:hover { color: var(--gold2); }
.cfoot-bottom {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .65rem;
  color: rgba(255, 255, 255, .3);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .05);
  margin-top: 1.5rem;
}
/* Footer legal-links row — slim secondary nav for Privacy/Terms/etc.
 * Sits between the main nav links and the copyright line; lower
 * hierarchy than .cfoot-links via smaller type and dimmer color. */
.cfoot-legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.6rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.cfoot-legal a {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  transition: color .2s;
}
.cfoot-legal a:hover { color: var(--gold2); }

/* ─── 14. Fade-up animation ──────────────────────────────────────────── */
/* Sections fade in + slide up 24px as they enter the viewport. The JS
 * adds .visible when the element crosses the threshold. transition-delay
 * is set inline by the JS for a 60ms-per-sibling stagger.
 *
 * Duration 500ms (not 900ms) — long reveals can feel like the page is
 * dragging during fast scroll. Short reveals stay crisp and don't
 * compete with native scroll momentum. */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1),
              transform .5s cubic-bezier(.22, 1, .36, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ─── 14b. Magnetic hover ───────────────────────────────────────────────
 * The shared /assets/magnetic.js tags each magnetic target with this
 * class. The CSS transition smooths the snap-back when the cursor
 * leaves the activation radius. Module identical for homepage and
 * community pages so the gold pills feel the same everywhere. */
.magnetic {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              background-color .2s,
              border-color .2s,
              color .2s;
  will-change: transform;
}


/* ─── 15. Lightbox ───────────────────────────────────────────────────── */
#lb-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 22, 40, .95);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overscroll-behavior: contain;
  touch-action: none;
}
#lb-overlay.lb-open { display: flex; }
#lb-img {
  max-width: 95%;
  max-height: 95vh;
  border: 2px solid var(--gold);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  background: var(--white);
}
#lb-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: transparent;
  color: var(--white);
  border: 0;
  font-size: 2.5rem;
  cursor: pointer;
  line-height: 1;
}
/* Prev/next arrows — gold glyph on a semi-transparent circle, vertically
 * centered, ≥44px touch targets. Only shown when the open image belongs
 * to a group of 2+ (#lb-overlay.lb-multi, set by community.js). */
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(201, 163, 74, .55);
  background: rgba(10, 22, 40, .55);
  color: var(--gold2);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  z-index: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#lb-overlay.lb-multi .lb-arrow { display: flex; }
.lb-arrow:hover,
.lb-arrow:focus-visible {
  background: rgba(10, 22, 40, .85);
  color: var(--gold3);
  border-color: var(--gold2);
}
#lb-prev { left: 1.25rem; }
#lb-next { right: 1.25rem; }
@media (max-width: 600px) {
  .lb-arrow { width: 46px; height: 46px; font-size: 2rem; }
  #lb-prev { left: .4rem; }
  #lb-next { right: .4rem; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .chero-h1 { font-size: 5.5rem; }
  .chero-content { left: 2rem; gap: 1.2rem; max-width: calc(100% - 4rem); }
  .chero-rule { height: 4.4rem; }
  .chero-tag { right: 2rem; bottom: 2.2rem; }
  .cintro { padding: 4rem 1.5rem; }
  .cintro-subhead { font-size: 1.75rem; }
  .cglance-inner { grid-template-columns: repeat(2, 1fr); }
  .cglance-item:nth-child(odd) { border-left: 0; }
  .cglance-item:nth-child(3), .cglance-item:nth-child(4) {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .coverview-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .coverview-img { height: 360px; }
  .camen-categories { grid-template-columns: 1fr 1fr; }
  .cpets-inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
}

/* ─── Mobile responsive (≤ 768px) ────────────────────────────────────────
 * Minimal scaling of the desktop design for phone-width viewports. NOT a
 * separate mobile design — sections stack, type scales down one step,
 * gutter tightens. Keeps the desktop visual hierarchy intact. */
@media (max-width: 768px) {
  /* Spacing + gutter */
  .section { padding: 3.5rem 1.25rem; }

  /* Nav: hamburger out, slide-out menu, hide header Apply pill.
   * The menu shows the SAME links as desktop — main links, then the
   * Resident Tools group expanded inline, then a prominent Apply. It
   * scrolls if it runs past the viewport rather than dropping links, and
   * every row is a >=44px tap target. */
  .cnav-inner { padding: .8rem 1.2rem; gap: 1rem; }
  .cnav-mark { height: 40px; }
  .cnav-brand { gap: .55rem; }
  .cnav-name { font-size: 1.35rem; }
  .cnav-location { font-size: .5rem; letter-spacing: .22em; }
  .cnav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    padding: .25rem 0 .75rem;
    gap: 0;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-top: 1px solid rgba(201, 163, 74, .18);
    box-shadow: 0 24px 40px rgba(0, 0, 0, .45);
  }
  .cnav-links.open { display: flex; }
  /* Direct (main) links */
  .cnav-links > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1.4rem;
    font-size: .82rem;
    letter-spacing: .12em;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  /* Resident Tools: drop the desktop dropdown chrome and show the group
   * expanded inline so nothing is hidden behind an extra tap. */
  .cnav-rt { display: block; position: static; }
  .cnav-rt-toggle { display: none; }
  .cnav-rt-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: rgba(255, 255, 255, .025);
  }
  .cnav-rt-heading {
    display: block;
    padding: .85rem 1.4rem .35rem;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold2);
  }
  .cnav-rt-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1.4rem 0 1.8rem;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: none;
    white-space: normal;
    color: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .cnav-rt-menu a:hover { padding-left: 1.8rem; background: rgba(255, 255, 255, .04); }

  /* Apply stays prominent inside the menu */
  .cnav-apply-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: .9rem 1.4rem .25rem;
    background: var(--gold);
    color: var(--navy);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
    transition: background .2s;
  }
  .cnav-apply-mobile:hover { background: var(--gold2); }

  .cnav-toggle { display: block; order: 3; }
  .cnav-cta { display: none; }

  /* Hero typography scales down */
  .chero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }
  .chero-h1 { font-size: 3.5rem; letter-spacing: -0.005em; }
  .chero-content { left: 1.2rem; gap: 1rem; max-width: calc(100% - 2.4rem); }
  .chero-rule { height: 2.8rem; }
  .chero-tag { right: 1.2rem; bottom: 1.5rem; gap: .6rem; }
  .chero-tag-rule { width: 40px; }
  .chero-tag-text { font-size: .82rem; letter-spacing: 0.2em; }
  .chero-scroll { height: 32px; }
  .chero-fade-h1 { font-size: 3rem; }

  /* Intro + At a Glance stack their typography */
  .cintro { padding: 3rem 1.25rem; }
  .cintro-subhead { font-size: 1.5rem; }
  .cintro-meta { font-size: .85rem; letter-spacing: .18em; }

  /* At a Glance stays at 2 columns on phone width (NOT 1-col, that crammed). */
  .cglance-inner { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .cglance-value { font-size: 1.5rem; }
  .cglance-item.feature .cglance-value { font-size: 2.2rem; }

  /* Residences: 1-column stack of full unit cards */
  .cunit-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .cunit-img { height: 240px; }

  /* Amenities stays at 2 cols (already 2-col at 1024px, keep here too) */
  .camen-categories { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }

  /* Gallery: stack to single column */
  .cgallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: .75rem;
  }
  .cgallery-grid .tile,
  .cgallery-grid .tile.lg,
  .cgallery-grid .tile.wide,
  .cgallery-grid .tile.tall {
    grid-column: auto;
    grid-row: auto;
    height: 60vw;
  }

  /* Pet Policy 3-col strip → 1 col */
  .cpets-inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }

  /* Voices stack */
  .cvoices-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Visit stack */
  .cvisit-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Footer stack */
  .cfoot-inner { grid-template-columns: 1fr; text-align: center; }
  .cfoot-links { justify-content: center; }
}

/* ─── Very small phones (≤ 480px) ───────────────────────────────────────
 * One additional step down for cramped widths: At a Glance to 1-col. */
@media (max-width: 480px) {
  .chero-h1 { font-size: 2.6rem; }
  .chero-rule { height: 2.1rem; }
  .chero-fade-h1 { font-size: 2.6rem; }
  .chero-fade-rule { width: 56px; }
  .cintro-subhead { font-size: 1.3rem; }
  .section-title { font-size: 1.65rem; }
  .cglance-inner { grid-template-columns: 1fr; }
  .cglance-item:nth-child(n) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 1rem;
  }
  .cglance-item:first-child { border-top: 0; padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
 * LINEWORK THEME — production rollout 2026-06-10.
 * The Blue Linework scheme (round-4 sandbox winner) promoted site-wide:
 * white/minimal base, navy type, --hub-blue #4a90c2 family used as
 * STRUCTURE (rules, borders, underlines, outlined buttons, icon strokes),
 * never as fill. Deep #2f6e96 is the only blue allowed as small text on
 * light (5.54:1); #4a90c2 is lines/large/decorative only (3.47:1).
 * Community nav is transparent over the hero and becomes the solid white
 * Linework bar on scroll (.scrolled via community.js) or menu open.
 * These rules intentionally override the legacy navy/gold values above.
 * ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Round-4 blue family — the ONLY blues on the page */
  --hub-blue:      #4a90c2;  /* rules / borders / large numerals */
  --hub-blue-deep: #2f6e96;  /* text-safe blue; outlined-button fill state */
  --hub-blue-tint: #e8f1f8;  /* single hover-feedback exception */
  --hub-blue-band: #cfe4f2;  /* declared for parity; unused as fill */
  --hub-blue-ice:  #9fd0f0;  /* hero rules on photo, lightbox glyphs */

  /* Legacy variable remap (community.css hooks) */
  --navy:  #0a1628;
  --navy2: #102036;
  --gold:  var(--hub-blue);       /* gold's old decorative jobs → blue line */
  --gold2: var(--hub-blue-deep);  /* hover/text steps → text-safe deep blue */
  --gold3: var(--hub-blue-deep);
  --cream:  #ffffff;              /* every section field goes white */
  --cream2: #ffffff;
  --white:  #ffffff;
  --lgrey:  rgba(74, 144, 194, .35);  /* minor hairlines turn blue */
  --grey:   #51637a;              /* support gray, 6.1:1 on white */
  --text:   #0a1628;              /* navy body text */
}

body { background: #ffffff; color: #0a1628; }

/* ── NAV: transparent over the hero photo, transitioning to the solid
 *    Linework bar after ~80px of scroll (community.js toggles .scrolled;
 *    the mobile menu opening also forces the solid state). ─────────────── */
.cnav {
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
/* Legibility scrim (2026-06-11): readers complained the floating header was
 * hard to read on bright hero photos. A dark gradient pocket sits behind the
 * header zone (~120px, fading out), text-shadows strengthened. The scrim
 * fades away with the same transition when the bar goes solid. */
.cnav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(100% + 44px);
  background: linear-gradient(to bottom,
              rgba(8, 16, 28, .52) 0%,
              rgba(8, 16, 28, .30) 62%,
              rgba(8, 16, 28, 0) 100%);
  opacity: 1;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: -1;
}
.cnav.scrolled::before,
.cnav.menu-open::before { opacity: 0; }

.cnav-mark { transition: filter .45s ease; }
/* Transparent state: white type + soft shadow floating on the photo */
.cnav:not(.scrolled):not(.menu-open) .cnav-mark {
  content: url('/images/whitelogo.png');
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)) drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
}
.cnav:not(.scrolled):not(.menu-open) .cnav-name {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);
}
.cnav:not(.scrolled):not(.menu-open) .cnav-location {
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);
}
.cnav:not(.scrolled):not(.menu-open) .cnav-links > a:not(.cnav-apply-mobile) {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);
}
.cnav:not(.scrolled):not(.menu-open) .cnav-links > a:not(.cnav-apply-mobile):hover { color: var(--hub-blue-ice); }
/* The dropdown panel is white in BOTH header states — its links stay navy
 * (the > combinator above keeps the floating-white treatment off them, and
 * this re-assertion guards against future selector drift). */
.cnav:not(.scrolled):not(.menu-open) .cnav-rt-menu a {
  color: rgba(10, 22, 40, .8);
  text-shadow: none;
}
.cnav:not(.scrolled):not(.menu-open) .cnav-rt-toggle {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);
}
.cnav:not(.scrolled):not(.menu-open) .cnav-cta {
  border-color: rgba(255, 255, 255, .9);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);
}
.cnav:not(.scrolled):not(.menu-open) .cnav-cta:hover {
  background: #ffffff;
  color: var(--hub-blue-deep);
  text-shadow: none;
}
.cnav:not(.scrolled):not(.menu-open) .cnav-toggle {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .45);
}
/* Solid state: the Linework bar */
.cnav.scrolled,
.cnav.menu-open {
  background: #ffffff;
  border-bottom: 2px solid var(--hub-blue);
  box-shadow: 0 4px 24px rgba(10, 22, 40, .08);
}
.cnav-mark { content: url('/images/navylogo.png'); }
.cnav-name { color: #0a1628; }
.cnav-location { color: #51637a; }
.cnav-links a { color: rgba(10, 22, 40, .75); }
.cnav-links a:hover { color: var(--hub-blue-deep); }
/* APPLY — the linework signature: outlined, fills only on hover */
.cnav-cta {
  background: transparent;
  border: 2px solid var(--hub-blue-deep);
  color: var(--hub-blue-deep);
  padding: calc(.55rem - 2px) calc(1.1rem - 2px);
  transition: background .2s, color .2s, border-color .2s;
}
.cnav-cta:hover { background: var(--hub-blue-deep); color: #ffffff; }
.cnav-toggle { color: var(--hub-blue-deep); }
.cnav-rt-toggle { color: rgba(10, 22, 40, .75); }
.cnav-rt-toggle:hover,
.cnav-rt:hover .cnav-rt-toggle,
.cnav-rt.open .cnav-rt-toggle,
.cnav-rt:focus-within .cnav-rt-toggle { color: var(--hub-blue-deep); }

/* Dropdown: white panel ruled with blue hairlines */
.cnav-rt-menu {
  background: #ffffff;
  border: 1px solid rgba(74, 144, 194, .45);
  border-top: 2px solid var(--hub-blue);
  box-shadow: 0 18px 44px rgba(10, 22, 40, .14);
}
.cnav-rt-menu a {
  color: rgba(10, 22, 40, .8);
  border-bottom: 1px solid rgba(74, 144, 194, .25);
}
.cnav-rt-menu a:hover {
  color: var(--hub-blue-deep);
  background: var(--hub-blue-tint);  /* the single tint exception */
}

/* ── HERO: photo untouched; rules become ice-blue lines on the image ──── */
.chero-fade { background: #0a1628; }   /* photo backing only, never visible */
.chero-fade-h1 { color: #ffffff; }
.chero-fade-rule { background: var(--hub-blue-ice); box-shadow: 0 1px 4px rgba(4, 12, 24, .4); }
/* static-hero variants (coverage parity — unused on this page) */
.chero-rule, .chero-tag-rule, .chero-scroll { background: var(--hub-blue-ice); }
.chero-tag-text { color: #ffffff; }
.chero-h1 { color: #ffffff; }

/* ── INTRO: white, deep-blue small caps, blue meta rules ─────────────── */
.cintro { background: #ffffff; }
.cintro-eyebrow { color: var(--hub-blue-deep); }
.cintro-subhead { color: #0a1628; }
.cintro-meta { color: #0a1628; }
.cintro-meta strong { color: var(--hub-blue-deep); }
.cintro-meta-block::before,
.cintro-meta-block::after { background: var(--hub-blue); }

/* ── Shared primitives ───────────────────────────────────────────────── */
.eyebrow { color: var(--hub-blue-deep); }
.section-title { color: #0a1628; }
.section-sub { color: #51637a; }

/* BUTTONS — outlined everywhere; the hover fill is the ONLY filled state */
.btn {
  background: transparent;
  border: 2px solid var(--hub-blue-deep);
  color: var(--hub-blue-deep);
  padding: calc(.9rem - 1px) calc(1.7rem - 1px);
}
.btn:hover { background: var(--hub-blue-deep); border-color: var(--hub-blue-deep); color: #ffffff; }
.btn-outline { background: transparent; color: var(--hub-blue-deep); border-color: var(--hub-blue-deep); }
.btn-outline:hover { background: var(--hub-blue-deep); border-color: var(--hub-blue-deep); color: #ffffff; }
.btn-outline-white { background: transparent; color: #ffffff; border-color: #ffffff; }
.btn-outline-white:hover { background: #ffffff; color: var(--hub-blue-deep); }

/* ── AT A GLANCE: white band FRAMED by blue rules, deep-blue numerals ── */
.cglance {
  background: #ffffff;
  color: #0a1628;
  border-top: 2px solid var(--hub-blue);
  border-bottom: 2px solid var(--hub-blue);
}
.cglance-item { border-left: 1px solid var(--hub-blue); }
.cglance-item:first-child { border-left: 0; }
.cglance-value { color: var(--hub-blue-deep); }
.cglance-label { color: #51637a; }
.cglance-item.feature .cglance-value { color: var(--hub-blue-deep); }
.cglance-item.feature .cglance-label { color: #51637a; }

/* ── OVERVIEW: white, blue drop cap (5rem = decorative), ruled card ──── */
.coverview { background: #ffffff; }
.coverview-text p { color: #0a1628; }
.coverview-text p strong { color: #0a1628; }
.coverview-text p:first-of-type::first-letter { color: var(--hub-blue); }
.coverview-address {
  background: #ffffff;
  border: 1px solid var(--hub-blue);
  border-left: 3px solid var(--hub-blue);
}
.coverview-address strong { color: var(--hub-blue-deep); }
.coverview-img { border: 1px solid var(--hub-blue); }

/* ── RESIDENCES: white cards drawn with 1px blue borders ─────────────── */
.cresidences { background: #ffffff; }
.cunit-card {
  background: #ffffff;
  border: 1px solid var(--hub-blue);
  box-shadow: none;
}
.cunit-card:hover {
  border-color: var(--hub-blue-deep);
  box-shadow: 0 8px 22px rgba(10, 22, 40, .08);
}
/* Cooper's mobile feedback (2026-06-10): outer card border stays, but the
 * INTERNAL divider lines (under the floor-plan image, under the stats row)
 * looked heavy — whitespace separates the card's sections instead. */
.cunit-img { background: #ffffff; border-bottom: 0; padding-bottom: 1.25rem; }
.cunit-name { color: #0a1628; }
.cunit-stats { border-bottom: 0; padding-bottom: .35rem; margin-bottom: 1.15rem; }
.cunit-stat-label { color: #51637a; }
.cunit-stat-value { color: #0a1628; }
.cunit-link { color: var(--hub-blue-deep); border-bottom: 1px solid var(--hub-blue); }
.cunit-link:hover { color: #0a1628; border-bottom-color: var(--hub-blue-deep); }
.cunit-apply {
  background: transparent;
  border: 2px solid var(--hub-blue-deep);
  color: var(--hub-blue-deep);
  padding: calc(.55rem - 1px) calc(.95rem - 1px);
}
.cunit-apply:hover { background: var(--hub-blue-deep); color: #ffffff; }

/* ── FLOOR PLANS: ruled white section, blue-bordered diagram cards ───── */
.cfloorplans {
  background: #ffffff;
  border-top: 2px solid var(--hub-blue);
  border-bottom: 2px solid var(--hub-blue);
}
.cfloorplan {
  background: #ffffff;
  border: 1px solid var(--hub-blue);
  box-shadow: none;
}
.cfloorplan:hover {
  border-color: var(--hub-blue-deep);
  box-shadow: 0 8px 22px rgba(10, 22, 40, .08);
}
.cfloorplan img { background: #ffffff; }
.cfloorplan figcaption { color: #0a1628; }
.cfloorplans-pdf a { color: var(--hub-blue-deep); border-bottom: 1px solid var(--hub-blue); }
.cfloorplans-pdf a:hover { color: #0a1628; border-bottom-color: var(--hub-blue-deep); }

/* ── GALLERY: white field, each photo framed by a 1px blue line ──────── */
.cgallery { background: #ffffff; }
.cgallery-grid .tile { border: 1px solid var(--hub-blue); }

/* ── AERIAL: ruled white section (was a navy band) ───────────────────── */
.caerial {
  background: #ffffff;
  color: #0a1628;
  border-top: 2px solid var(--hub-blue);
  border-bottom: 2px solid var(--hub-blue);
}
.caerial .section-title { color: #0a1628; }
.caerial .section-sub { color: #51637a; }
.caerial .eyebrow { color: var(--hub-blue-deep); }
.caerial-video { border: 2px solid var(--hub-blue); }
.caerial-play {
  border: 2px solid var(--hub-blue-deep);
  background: rgba(255, 255, 255, .78);
}
.caerial-poster:hover .caerial-play {
  background: #ffffff;
  border-color: var(--hub-blue-deep);
}
.caerial-play svg { fill: var(--hub-blue-deep); }

/* ── AMENITIES: blue-ruled headings, deep-blue icon strokes ──────────── */
.camen { background: #ffffff; }
.camen-cat-title { color: #0a1628; border-bottom: 2px solid var(--hub-blue); }
.camen-list li { color: #0a1628; }
.camen-list li svg { color: var(--hub-blue-deep); }

/* ── PETS: white strip, cards drawn in blue line ─────────────────────── */
.cpets { background: #ffffff; }
.cpets-title { color: #0a1628; }
.cpets-title small { color: var(--hub-blue-deep); }
.cpets-card {
  background: #ffffff;
  border: 1px solid var(--hub-blue);
  border-left: 3px solid var(--hub-blue);
}
.cpets-card h4 { color: #0a1628; }
.cpets-card p { color: #0a1628; }
.cpets-fee { color: #51637a !important; }

/* ── VOICES (coverage parity — page may not render it) ───────────────── */
.cvoices { background: #ffffff; color: #0a1628; }
.cvoices .section-title { color: #0a1628; }
.cvoices .section-sub { color: #51637a; }
.cvoice::before { color: var(--hub-blue); opacity: .35; }
.cvoice-text { color: #0a1628; }
.cvoice-author { color: var(--hub-blue-deep); }
.cvoices-source { color: #51637a; }

/* ── VISIT: blue-ruled headings, line-framed map ─────────────────────── */
.cvisit { background: #ffffff; }
.cvisit-block h3 { color: #0a1628; border-bottom: 2px solid var(--hub-blue); }
.cvisit-block dt { color: #51637a; }
.cvisit-block dd { color: #0a1628; }
.cvisit-block dd a { color: #0a1628; }
.cvisit-block dd a:hover { border-bottom-color: var(--hub-blue); }
.cvisit-map {
  background: #ffffff;
  border: 1px solid var(--hub-blue);
  border-radius: 0;
  box-shadow: 0 8px 22px rgba(10, 22, 40, .08);
}

/* ── SISTERS: quiet white strip between blue hairlines ───────────────── */
.csisters {
  background: #ffffff;
  border-top: 1px solid var(--hub-blue);
  border-bottom: 1px solid var(--hub-blue);
}
.csisters-label { color: #51637a; }
.csisters-list a { color: #0a1628; }
.csisters-list a:hover { color: var(--hub-blue-deep); }
.csisters-list a small { color: #51637a; }

/* ── FOOTER: white close, one 2px blue top rule, navy text ───────────── */
.cfoot {
  background: #ffffff;
  color: #51637a;
  border-top: 2px solid var(--hub-blue);
}
.cfoot-brand .name { color: #0a1628; }
.cfoot-brand .sub { color: #51637a; }
.cfoot-links a { color: rgba(10, 22, 40, .78); }
.cfoot-links a:hover { color: var(--hub-blue-deep); }
.cfoot-bottom {
  color: #51637a;
  border-top: 1px solid rgba(74, 144, 194, .35);
}
.cfoot-legal { border-top: 1px solid rgba(74, 144, 194, .25); }
.cfoot-legal a { color: #51637a; }
.cfoot-legal a:hover { color: var(--hub-blue-deep); }

/* ── LIGHTBOX: dark theatre, blue-OUTLINED transparent arrows ────────── */
#lb-overlay { background: rgba(10, 22, 40, .95); }
#lb-img { border: 2px solid var(--hub-blue); background: #ffffff; }
#lb-close { color: #ffffff; }
.lb-arrow {
  background: transparent;
  border: 2px solid var(--hub-blue);
  color: var(--hub-blue-ice);
}
.lb-arrow:hover,
.lb-arrow:focus-visible {
  background: transparent;
  border-color: var(--hub-blue-ice);
  color: #ffffff;
}

/* ── RESPONSIVE: blue hairlines at the 1024px glance re-wrap ─────────── */
@media (max-width: 1024px) {
  .cglance-item:nth-child(3), .cglance-item:nth-child(4) {
    border-top: 1px solid rgba(74, 144, 194, .5);
  }
}

/* ── MOBILE NAV: white panel ruled in blue, outlined APPLY ───────────── */
/* Single-column widths: the desktop orphan-centering rule
 * (.cunit-card:last-child:nth-child(odd) max-width ~50%) must not apply —
 * it squeezed the last card (e.g. Black Rock's Two Bedroom) on phones.
 * All cards render full-width and identical in one column. */
@media (max-width: 768px) {
  .cunit-grid > .cunit-card:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .cnav-links {
    background: #ffffff;
    border-top: 2px solid var(--hub-blue);
    box-shadow: 0 24px 40px rgba(10, 22, 40, .16);
  }
  .cnav-links > a { border-bottom: 1px solid rgba(74, 144, 194, .3); }
  .cnav-rt-menu { background: #ffffff; border: 0; box-shadow: none; }
  .cnav-rt-heading { color: var(--hub-blue-deep); }
  .cnav-rt-menu a {
    color: rgba(10, 22, 40, .8);
    border-bottom: 1px solid rgba(74, 144, 194, .25);
  }
  .cnav-rt-menu a:hover { background: var(--hub-blue-tint); }
  /* a.cnav-apply-mobile (0,2,1) outranks `.cnav-links a` color */
  .cnav-links a.cnav-apply-mobile {
    background: transparent;
    border: 2px solid var(--hub-blue-deep);
    color: var(--hub-blue-deep);
    border-radius: 3px;
  }
  .cnav-links a.cnav-apply-mobile:hover {
    background: var(--hub-blue-deep);
    color: #ffffff;
  }
}

/* ── 480px glance stack: blue hairline separators ────────────────────── */
@media (max-width: 480px) {
  .cglance-item:nth-child(n) { border-top: 1px solid rgba(74, 144, 194, .5); }
  .cglance-item:first-child { border-top: 0; }
}


/* ════════════════════════════════════════════════════════════════════════
 * GALLERY CROP TUNING (2026-06-11)
 * Per-image object-position overrides for gallery tiles whose default
 * 50% 50% crop chopped the subject. Targeted by filename fragment so the
 * fix follows the photo wherever it appears. Reviewed all 8 community
 * galleries at 1366px and 390px — only the three photos below cropped
 * badly; everything else (incl. overview + unit-card images) is left at
 * the default so well-composed tiles aren't disturbed.
 * ════════════════════════════════════════════════════════════════════════ */

/* Brittany Springs — exterior-02 (4:3 photo in a 2.66:1 wide tile): the
 * centered band sliced the roofline off the building. Bias the crop up to
 * keep the full roof + porches; drops foreground lawn instead. */
.cgallery-grid .tile img[src*="brittany-springs-exterior-02"] {
  object-position: 50% 30%;
}

/* Dutchess — exterior-03 (actually the playground photo): centered crop
 * clipped the top of the play-structure canopy. Nudge up to keep the
 * canopy; loses a little of the slide's run-out at the bottom. */
.cgallery-grid .tile img[src*="dutchess-exterior-03"] {
  object-position: 50% 35%;
}

/* Ridgefield — exterior-02 (blossoming trees over brick buildings): the
 * centered band was almost all tree canopy with the buildings reduced to
 * a sliver at the bottom edge. Bias down so the building facades sit in
 * frame under the blossoms; drops empty sky at the top. */
.cgallery-grid .tile img[src*="ridgefield-exterior-02"] {
  object-position: 50% 65%;
}

/* ── Facebook link in the Visit block (2026-06-11) — Linework language ── */
.cvisit-fb {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #2f6e96;
  border-bottom: 1px solid #4a90c2;
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.cvisit-fb:hover { color: #0a1628; border-bottom-color: #2f6e96; }
.cvisit-fb svg { flex-shrink: 0; }