/* ────────────────────────────────────────────────────────────────────────
 * 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', Georgia, serif;
  --sans:   'Outfit', 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: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: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;
}
.cnav-rt:hover .cnav-rt-menu,
.cnav-rt:focus-within .cnav-rt-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cnav-rt-menu a {
  display: block;
  padding: .7rem 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 {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: chero-pan 20s ease-in-out infinite alternate;
  will-change: background-position;
}
/* 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 background-attachment: fixed (pure CSS, no JS).
 * The photo stays anchored to the viewport while .chero-fade and the
 * sections below scroll over it. .cglance (and every subsequent section)
 * has an opaque bg so the photo is covered as those sections slide up.
 * Mobile falls back to background-attachment: scroll because iOS Safari
 * has long-standing rendering bugs with fixed-attachment on touch scroll. */
.chero-fade-bg {
  --hero-y: 55%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: 50% var(--hero-y, 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: chero-pan 20s ease-in-out infinite alternate;
}
/* Mobile swap — if a community page emits --hero-img-mobile, use it on
 * narrow viewports. Falls back to the desktop image if no mobile crop.
 * Also drop fixed-attachment on mobile (iOS Safari quirk). */
@media (max-width: 768px) {
  .chero-fade-bg {
    background-image: var(--hero-img-mobile, var(--hero-img));
    background-attachment: scroll;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chero-fade-bg {
    animation: none;
    background-position: 50% var(--hero-y, 55%);
  }
}

/* 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);
}
.chero-fade-scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 40px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: chero-scroll-pulse 2.5s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .chero-fade-scroll { animation: none; opacity: 0.7; }
}

@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;
}
.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;
}
.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;
}
#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;
}

/* ─── 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; }
}