/* ============================================================
   BOUNDS & SAKHOEUN — Luxury Real Estate
   Design System: Deep Navy · Warm Cream · Champagne Gold
   Front-end prototype — RE/MAX Equity Group
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://api.fontshare.com/v2/css?f[]=fraunces@400,500,600,700&f[]=general-sans@400,500,600,700&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  /* Core palette */
  --navy-900: #0b1a30;   /* deepest — hero overlays, footer */
  --navy-800: #10233f;   /* primary dark surface */
  --navy-700: #17304f;   /* dark section bg */
  --navy-600: #1f3d63;   /* hover / borders on dark */
  --navy-500: #2c4f78;   /* muted navy */

  --cream-50:  #fbf8f2;  /* lightest surface */
  --cream-100: #f6f1e7;  /* primary light bg */
  --cream-200: #efe7d7;  /* alt light section */
  --cream-300: #e4d8c2;  /* borders on light */

  --champagne-400: #cba869; /* accent gold */
  --champagne-500: #b8934e; /* deeper gold for text/links */
  --champagne-300: #ddc79a; /* soft gold highlight */

  --taupe-500: #6d6455;  /* muted support text (darkened for legibility) */
  --taupe-400: #857b6b;

  --ink-900: #111c29;    /* body text on light */
  --ink-700: #2a3746;    /* darker body copy for stronger contrast */

  --white: #ffffff;
  --remax-red: #d0021b;
  --remax-blue: #003da5;

  /* Semantic — LIGHT (default) */
  --bg: var(--cream-100);
  --bg-alt: var(--cream-50);
  --bg-elevated: var(--white);
  --surface-dark: var(--navy-800);
  --text: var(--ink-900);
  --text-muted: var(--taupe-500);
  --text-on-dark: #f2f5fa;
  --text-on-dark-muted: #bccbde;
  --accent: var(--champagne-500);
  --accent-soft: var(--champagne-400);
  --border: var(--cream-300);
  --border-dark: var(--navy-600);

  /* Type scale */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;
  --text-hero: clamp(2.75rem, 6vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 3px rgba(11,26,48,0.08);
  --shadow: 0 8px 30px rgba(11,26,48,0.10);
  --shadow-lg: 0 24px 60px rgba(11,26,48,0.16);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 90px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 450;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p { color: var(--ink-700); }
.section-head p, .lead { color: var(--ink-700); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}

.lead { font-size: var(--text-lg); color: var(--ink-700); line-height: 1.75; font-weight: 450; }
.serif-accent { font-family: var(--font-display); font-style: italic; color: var(--accent); }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-24) 0; }
.section-sm { padding: var(--space-16) 0; }

.section-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-on-dark); }
.section-dark p { color: var(--text-on-dark-muted); }
.section-alt { background: var(--bg-alt); }
.section-cream2 { background: var(--cream-200); }

.section-head { max-width: 640px; margin-bottom: var(--space-12); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head.center .eyebrow { margin-right: 0; }

/* ---------- Brand mark accents (creative logo touches) ---------- */
/* Small gold house-mark centered above section titles */
.section-head.center .kk-crest {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto var(--space-4);
  opacity: 0.92;
}
.section-alt .section-head.center .kk-crest,
.section-dark .section-head.center .kk-crest { opacity: 0.95; }

/* Hero brand crest — elegant mark above the eyebrow */
.hero-crest {
  display: block;
  width: 78px;
  height: auto;
  margin-bottom: var(--space-5);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
  animation: crestIn 1s var(--ease-out) both;
}
@keyframes crestIn { from { opacity: 0; transform: translateY(12px) scale(.96);} to { opacity: 1; transform: none; } }

/* Oversized faint watermark (footer / CTA backgrounds) */
.kk-watermark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  width: min(560px, 60%);
  height: auto;
}
.kk-watermark--tr { top: -4%; right: -6%; transform: rotate(6deg); }
.kk-watermark--bl { bottom: -8%; left: -5%; transform: rotate(-4deg); }
.site-footer { position: relative; overflow: hidden; }
.site-footer .container { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: all 0.35s var(--ease-out);
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--navy-900);
  box-shadow: 0 6px 20px rgba(184,147,78,0.28);
}
.btn-primary:hover { background: var(--champagne-400); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(184,147,78,0.38); }
.btn-navy {
  background: var(--navy-800);
  color: var(--text-on-dark);
}
.btn-navy:hover { background: var(--navy-700); transform: translateY(-2px); }
.btn-outline {
  border-color: var(--navy-800);
  color: var(--navy-800);
  background: transparent;
}
.btn-outline:hover { background: var(--navy-800); color: var(--text-on-dark); }
.btn-outline-light {
  border-color: rgba(255,255,255,0.4);
  color: var(--text-on-dark);
  background: transparent;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: var(--accent); color: var(--accent-soft); }
.btn-ghost { color: var(--accent); padding: 0.5rem 0; }
.btn-ghost:hover { color: var(--champagne-400); gap: var(--space-3); }
.btn-ghost .arrow { transition: transform 0.3s var(--ease); }
.btn-ghost:hover .arrow { transform: translateX(4px); }
.btn-lg { padding: 1.05rem 2.25rem; font-size: var(--text-base); }
.btn-block { width: 100%; justify-content: center; }

.btn-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all 0.4s var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-img { aspect-ratio: 4/3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.06); }
.card-body { padding: var(--space-6); }

/* ---------- Grid ---------- */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
/* Carousel affordances are mobile-only — hidden on desktop */
.carousel-hint, .carousel-dots { display: none; }

/* ---------- Badges / chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 100px;
  background: var(--cream-200);
  color: var(--ink-700);
  border: 1px solid var(--border);
}
.chip-gold { background: rgba(203,168,105,0.14); color: var(--champagne-500); border-color: rgba(203,168,105,0.35); }
.section-dark .chip { background: rgba(255,255,255,0.07); color: var(--text-on-dark-muted); border-color: rgba(255,255,255,0.14); }

/* ---------- Card / caption note ---------- */
.card-note {
  font-size: var(--text-sm);
  color: var(--taupe-500);
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
/* neighborhood/guide card descriptions need stronger contrast */
.neigh-card .card-note, .card-body .card-note { font-style: normal; color: var(--ink-700); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.gold { color: var(--accent); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.transparent { background: transparent; }
.site-header.solid {
  background: rgba(251,248,242,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: flex; align-items: center; gap: 12px; }
/* ---- Real Kent + Kionna logo lockup (replaces old crest + text) ---- */
.site-logo {
  display: block;
  width: auto;
  height: 60px;              /* larger, more prominent lockup */
  max-width: min(420px, 64vw);
  object-fit: contain;
  transition: transform var(--dur, .3s) var(--ease-out, ease), filter .3s ease;
}
.brand:hover .site-logo { transform: translateY(-1px) scale(1.02); }
/* Header logo swaps with header state: light lockup over the dark hero
   (transparent header), navy lockup once the header goes solid/cream. */
.site-header .site-logo--light { display: none; }
.site-header.transparent .site-logo--dark { display: none; }
.site-header.transparent .site-logo--light { display: block; }
.site-header.solid .site-logo--dark { display: block; }
.site-header.solid .site-logo--light { display: none; }
.footer-brand-link { display: inline-block; }
.footer-logo {
  height: auto;
  width: clamp(240px, 26vw, 360px);
  max-width: 360px;
}
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; }
.brand-text { line-height: 1.05; }
.brand { flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: 0.01em; display: block; }
.brand-sub { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; display: block; margin-top: 1px; }

/* header color states */
.site-header.transparent .brand-name,
.site-header.transparent .nav-link { color: var(--text-on-dark); }
.site-header.transparent .brand-sub { color: var(--text-on-dark-muted); }
.site-header.transparent .brand-mark { color: var(--champagne-400); }
.site-header.solid .brand-name { color: var(--navy-800); }
.site-header.solid .brand-mark { color: var(--champagne-500); }
.site-header.solid .nav-link { color: var(--ink-700); }

.nav-desktop { display: flex; align-items: center; gap: 1.35rem; margin: 0 auto; padding: 0 1.25rem; flex-wrap: nowrap; }
.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px;
  background: var(--accent); transition: width 0.3s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover, .nav-link.active { color: var(--accent); }
.nav-link-btn { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; display: inline-flex; align-items: center; }
.nav-has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); pointer-events: auto; }
.nav-link:focus-visible, .nav-link-btn:focus-visible, .btn:focus-visible, .dropdown a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.nav-has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--space-2); min-width: 220px;
  opacity: 0; visibility: hidden; transition: all 0.28s var(--ease-out); pointer-events: none;
}
.nav-has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); pointer-events: auto; }
.dropdown a { display: block; padding: 10px 14px; font-size: var(--text-sm); border-radius: var(--radius-sm); color: var(--ink-700); transition: all 0.2s; }
.dropdown a:hover { background: var(--cream-100); color: var(--accent); }

.header-cta { display: flex; align-items: center; gap: var(--space-6); }
.header-phone { font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap; opacity: 0.92; }
.nav-link { white-space: nowrap; }
.site-header.transparent .header-phone { color: var(--text-on-dark); }
.site-header.solid .header-phone { color: var(--navy-800); }
.header-phone:hover { color: var(--accent); }

.burger { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px; z-index: 120; }
.burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: all 0.3s var(--ease); }
.site-header.transparent .burger { color: var(--text-on-dark); }
.site-header.solid .burger { color: var(--navy-800); }

/* ---------- Mobile Nav ---------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 110;
  background: var(--navy-900);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + var(--space-8)) var(--space-6) var(--space-8);
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { color: var(--text-on-dark); font-family: var(--font-display); font-size: var(--text-2xl); padding: var(--space-3) 0; border-bottom: 1px solid var(--navy-700); transition: color 0.2s, padding-left 0.25s; }
.mobile-nav a:hover { color: var(--accent); padding-left: 8px; }
.mobile-nav a.mnav-sub { font-size: var(--text-lg); color: var(--text-on-dark-muted); border-bottom-color: var(--navy-800); }
.mobile-nav a.mnav-sub:hover { color: var(--accent); }
.mobile-nav-cta { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-close { position: absolute; top: 22px; right: 22px; color: var(--text-on-dark); font-size: 2rem; line-height: 1; width: 40px; height: 40px; }
body.nav-open { overflow: hidden; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--text-on-dark);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,26,48,0.88) 0%, rgba(11,26,48,0.62) 45%, rgba(11,26,48,0.30) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 720px; padding-top: var(--header-h); }
.hero h1 { color: var(--white); font-size: var(--text-hero); font-weight: 500; margin-bottom: var(--space-6); }
.hero .lead { color: #dbe3ee; font-size: var(--text-xl); max-width: 560px; margin-bottom: var(--space-8); }
.hero .eyebrow { color: var(--champagne-300); }

/* ---- image hero ---- */
.hero-image .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-image .hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 80% 10%, rgba(203,168,105,0.16) 0%, rgba(203,168,105,0) 55%); pointer-events: none; }
.hero-image .hero-media::after { z-index: 2; }

/* ---- cinematic Ken Burns motion on the image hero (self-contained, no scroll-parallax) ---- */
.hero-kenburns .hero-media { overflow: hidden; }
.hero-kenburns .hero-fallback {
  transform-origin: 72% 55%;
  will-change: transform;
  animation: heroKenBurns 26s ease-in-out infinite alternate both;
}
@keyframes heroKenBurns {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.16) translate3d(-1.4%, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kenburns .hero-fallback { animation: none; transform: scale(1.04); }
}

/* ---- video hero ---- */
.hero-video .hero-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-video .hero-vid.is-ready { opacity: 1; }
.hero-fallback-mobile { display: none; }
.hero-video .hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
}
/* champagne warmth veil above the video, below the navy gradient */
.hero-video .hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 78% 12%, rgba(203,168,105,0.18) 0%, rgba(203,168,105,0) 55%);
  mix-blend-mode: screen; pointer-events: none;
}
.hero-video .hero-media::after { z-index: 2; }

/* page hero (smaller inner-page banner) */
.page-hero {
  position: relative; min-height: 56vh; display: flex; align-items: flex-end;
  color: var(--text-on-dark); overflow: hidden; padding-bottom: var(--space-16);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,38,0.82) 0%, rgba(9,22,42,0.68) 45%, rgba(11,26,48,0.92) 100%); }
.page-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,20,38,0.78) 0%, rgba(8,20,38,0.30) 55%, transparent 100%); }
.page-hero-content { position: relative; z-index: 2; padding-top: var(--header-h); text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.page-hero h1 { color: var(--white); font-size: clamp(2.5rem, 5vw, 4rem); }
.page-hero .lead { color: #eef2f8; max-width: 620px; margin-top: var(--space-4); font-weight: 500; }
.page-hero .eyebrow { color: var(--champagne-300); }
.page-hero .breadcrumb { color: #cdd7e6; }

/* breadcrumb */
.breadcrumb { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--text-on-dark-muted); margin-bottom: var(--space-4); text-transform: uppercase; }
.breadcrumb a:hover { color: var(--accent-soft); }

/* ============================================================
   STICKY MOBILE CTA BAR
   ============================================================ */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none;
  background: var(--navy-900);
  border-top: 1px solid var(--navy-600);
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
  gap: 8px;
  box-shadow: 0 -6px 24px rgba(11,26,48,0.3);
}
.sticky-cta a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px; border-radius: var(--radius); font-weight: 600; font-size: var(--text-sm);
}
.sticky-cta .sc-call { background: var(--accent); color: var(--navy-900); }
.sticky-cta .sc-text { background: transparent; border: 1.5px solid var(--navy-500); color: var(--text-on-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--navy-900); color: var(--text-on-dark-muted); padding: var(--space-16) 0 var(--space-6); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--navy-700); }
.footer-brand .brand-name { color: var(--white); font-size: 1.35rem; }
.footer-brand .brand-mark { color: var(--champagne-400); }
.footer-brand p { color: var(--text-on-dark-muted); margin-top: var(--space-4); max-width: 300px; font-size: var(--text-sm); }
.footer-col h5 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne-300); margin-bottom: var(--space-4); font-weight: 600; }
.footer-col a, .footer-col li { display: block; font-size: var(--text-sm); color: var(--text-on-dark-muted); padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent-soft); }
.footer-contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--text-on-dark); }
.footer-contact-item .gold { color: var(--champagne-400); }

/* Brokerage / compliance strip — slim horizontal affiliation row, integrated (not a bulky card).
   RE/MAX logo (black+blue) sits on a small refined light chip so it reads on navy. */
.brokerage-strip { display: flex; align-items: center; gap: 16px; padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--navy-700); }
.brokerage-strip__logo { flex: 0 0 auto; display: inline-flex; align-items: center; background: var(--cream-100); border: 1px solid rgba(198,161,90,0.28); border-radius: 8px; padding: 8px 12px; }
.brokerage-strip__logo img { display: block; width: auto; height: 26px; }
.brokerage-strip__text { display: flex; flex-direction: column; gap: 2px; }
.brokerage-strip__name { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-300); font-weight: 600; }
.brokerage-strip__addr { font-size: 0.72rem; line-height: 1.5; color: #b8c4d4; }
.brokerage-strip__meta { font-size: 0.7rem; line-height: 1.5; color: #7f8ea3; }

/* Brokerage card — retained ONLY for the Contact page light section (white card so logo reads on cream) */
.brokerage-card { margin-top: var(--space-5); background: var(--cream-100); border: 1px solid rgba(198,161,90,0.35); border-radius: 12px; padding: 16px 18px 14px; max-width: 300px; }
.brokerage-card__label { display: block; font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne-500, #b08d3f); font-weight: 700; margin-bottom: 10px; }
.brokerage-card__logo { margin-bottom: 12px; }
.brokerage-card__logo img { display: block; width: 100%; max-width: 210px; height: auto; }
.brokerage-card__meta { font-size: 0.72rem; line-height: 1.5; color: #3c4657; margin: 0 0 4px; }
.brokerage-card__addr { font-size: 0.72rem; line-height: 1.5; color: #6b7a8f; margin: 0; }
.brokerage-card--light { background: #fff; box-shadow: 0 10px 30px -18px rgba(11,26,48,0.35); }
.brokerage-card--light .brokerage-card__meta { color: var(--ink-900, #1a2333); }

/* ---- footer bottom: organized, tidy hierarchy ---- */
.footer-bottom { padding-top: var(--space-5); font-size: var(--text-xs); line-height: 1.7; color: #7f8ea3; }

/* footer nav accordions (Explore/Company): DESKTOP = plain open columns (no toggle) */
.footer-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: default; }
.footer-acc > summary::-webkit-details-marker { display: none; }
.footer-acc > summary::marker { content: ""; }
.footer-acc > summary h5 { margin-bottom: var(--space-4); }
.footer-acc .acc-chev { display: none; }
.footer-acc .footer-acc-body { display: block; }
.footer-acc:not([open]) .footer-acc-body { display: block; }

/* Legal & Compliance — collapsible accordion on ALL breakpoints so the disclaimer stays tucked away */
.footer-legal-acc { display: block; margin-bottom: var(--space-4); }
.footer-legal-acc > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0; -webkit-tap-highlight-color: transparent;
}
.footer-legal-acc > summary::-webkit-details-marker { display: none; }
.footer-legal-acc__title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #93a1b5; font-weight: 600; }
.footer-legal-acc > summary:hover .footer-legal-acc__title { color: var(--champagne-300); }
.footer-legal-acc .acc-chev {
  display: block; width: 7px; height: 7px; border-right: 1.5px solid #93a1b5;
  border-bottom: 1.5px solid #93a1b5; transform: rotate(45deg);
  transition: transform .25s ease; flex: 0 0 auto;
}
.footer-legal-acc[open] .acc-chev { transform: rotate(-135deg); }
.footer-legal-acc .footer-acc-body { display: block; padding-top: var(--space-3); }
.footer-legal-acc:not([open]) .footer-acc-body { display: none; }
.footer-disclaimer { max-width: 820px; font-size: 0.72rem; line-height: 1.65; color: #7f8ea3; margin: 0; }
.footer-prototype { margin-top: var(--space-3); color: #7f8ea3; font-size: 0.7rem; font-style: italic; display: block; }

/* baseline row: copyright · legal links · credit — one clean line, evenly distributed */
.footer-baseline {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  padding-top: var(--space-4); border-top: 1px solid var(--navy-700);
}
.footer-copy { color: #93a1b5; font-size: 0.72rem; }
.footer-legal-links { display: flex; gap: var(--space-4); }
.footer-legal-links a { color: #93a1b5; font-size: 0.72rem; text-decoration: none; transition: color 0.2s; }
.footer-legal-links a:hover { color: var(--accent-soft); }
.footer-credit { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.02em; color: #5d6b80; }
.footer-credit a { color: #7f8ea3; text-decoration: none; transition: color 0.2s; }
.footer-credit a:hover { color: var(--champagne-300); }

/* social row */
.social-row { display: flex; gap: 12px; margin-top: var(--space-6); }
.social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--navy-600); display: flex; align-items: center; justify-content: center; color: var(--text-on-dark-muted); transition: all 0.3s; }
.social-row a:hover { background: var(--accent); color: var(--navy-900); border-color: var(--accent); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .header-phone { display: none; }
}
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .nav-desktop, .header-cta .btn, .header-phone { display: none !important; }
  .burger { display: flex !important; }
  .sticky-cta { display: flex; }
  /* Clear the fixed sticky CTA so it never covers the footer's last line */
  .site-footer { padding-bottom: calc(var(--space-6) + 64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 1024px) {
  :root { --header-h: 68px; }
  .burger { display: flex; }
  .sticky-cta { display: flex; }

  /* ---- SHARED MOBILE HEADER: always a solid cream sticky bar ----
     On internal pages the header starts .transparent and only turns solid on
     scroll. On mobile that transparent bar overlaps the dark hero, so the white
     brand text stacks on top of the hero breadcrumb/eyebrow and reads like a
     duplicated logo inside the hero. Force the header solid + sticky on mobile
     so the brand shows exactly once, at the top, and never overlaps hero text. */
  .site-header,
  .site-header.transparent {
    background: rgba(251,248,242,0.97) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
    height: var(--header-h);
  }
  .site-header .brand-name,
  .site-header.transparent .brand-name { color: var(--navy-800) !important; }
  .site-header .brand-sub,
  .site-header.transparent .brand-sub { color: var(--text-muted) !important; }
  .site-header .brand-mark,
  .site-header.transparent .brand-mark { color: var(--champagne-500) !important; }
  .site-header .burger,
  .site-header.transparent .burger { color: var(--navy-800) !important; }
  /* ---- MOBILE: keep video motion, but no fixed/parallax jump ---- */
  .parallax, .moving-image {
    transform: none !important;
    background-attachment: scroll !important;
    background-position: center center !important;
  }
  /* Slimmer, cleaner header */
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1.05rem; }
  .brand-sub { font-size: 0.55rem; letter-spacing: 0.18em; }
  /* keep the wide lockup height-sized so it fits the mobile header bar */
  .site-logo { height: 48px; max-width: 66vw; }
  .footer-logo { height: auto; width: 250px; max-width: 78vw; }
  /* mobile header is always solid cream -> always show the navy lockup,
     even when the header still carries the .transparent class */
  .site-header .site-logo--dark,
  .site-header.transparent .site-logo--dark { display: block !important; }
  .site-header .site-logo--light,
  .site-header.transparent .site-logo--light { display: none !important; }
  /* Calmer vertical rhythm — less scrolling before the point */
  .section { padding: var(--space-10) 0; }
  .section-sm { padding: var(--space-8) 0; }
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  .grid-2, .grid-4, .grid-5 { grid-template-columns: 1fr; }

  /* ---- FIX: 3-up card grids were crushing text on mobile.
     Turn them into a readable, premium swipe carousel instead. ---- */
  .grid-3 {
    display: flex; flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0; padding: var(--space-1) 20px var(--space-2);
    scroll-padding: 0 20px;
  }
  .grid-3 > * {
    flex: 0 0 88%; min-width: 88%; max-width: 88%;
  }
  .grid-3::-webkit-scrollbar { display: none; }
  .grid-3 > * { scroll-snap-align: center; }
  /* cards inside the carousel: no forced equal height that stretches empty space */
  .grid-3 .card, .grid-3 .prop-card { height: auto; }
  .grid-3 .card-body .angle { overflow-wrap: break-word; word-break: normal; }

  /* ---- Carousel affordances (swipe cue, edge fade, dots) ---- */
  .carousel-hint {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--champagne-500); margin: 0 20px var(--space-3); opacity: 0.9;
  }
  .carousel-hint .arrow { animation: nudge 1.6s ease-in-out infinite; }
  .carousel-hint .swipe-dot-track {
    width: 26px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--champagne-400), transparent);
  }
  @keyframes nudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }
  /* right-edge fade to imply more content */
  .carousel-fade { position: relative; }
  .carousel-wrap { position: relative; --fade-op: 1; }
  .carousel-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: var(--space-2);
    width: 24px; pointer-events: none; z-index: 2; opacity: calc(var(--fade-op) * 0.6); transition: opacity .3s ease;
    background: linear-gradient(90deg, transparent, var(--cream-100));
  }
  .section-alt .carousel-wrap::after { background: linear-gradient(90deg, transparent, var(--cream-50)); }
  .carousel-dots {
    display: flex; justify-content: center; gap: 7px; margin-top: var(--space-4);
  }
  .carousel-dots .cdot {
    width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
    background: #cfc4ad; opacity: 0.55; transition: all .3s ease; cursor: pointer;
  }
  .carousel-dots .cdot.active { opacity: 1; width: 22px; border-radius: 4px; background: var(--champagne-500); }

  /* ---- Premium neighborhood card refinement ---- */
  .neigh-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 8px 26px rgba(11,26,48,0.10); }
  .neigh-card .card-img { aspect-ratio: 16/11; position: relative; }
  .neigh-card .card-img img { width: 100%; height: 100%; object-fit: cover; }
  .neigh-card .card-body { padding: var(--space-6) var(--space-6) var(--space-6); }
  .neigh-name { font-size: 1.4rem; line-height: 1.12; margin: 0 0 var(--space-3); }
  .neigh-tag { font-size: 1.0rem; line-height: 1.5; color: var(--ink-700); margin: 0 0 var(--space-5); }
  .neigh-stats { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
  .neigh-stats li {
    display: flex; flex-direction: column; gap: 3px;
    padding: var(--space-3) 0; border-top: 1px solid var(--border);
  }
  .neigh-stats .ns-label {
    font-family: var(--font-sans); font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--champagne-500);
  }
  .neigh-stats .ns-val { font-size: 1.0rem; line-height: 1.45; color: var(--ink-900); }
  .neigh-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
    color: var(--navy-900); text-decoration: none;
    padding: var(--space-4) 0 0; border-top: 2px solid var(--champagne-400);
    width: 100%;
  }
  .neigh-cta .arrow { margin-left: auto; color: var(--champagne-500); transition: transform .25s ease; }
  .neigh-card .card-img .nc-chip { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; }
  /* Shorter, static-image hero — sharp poster, no cutoff */
  .hero { min-height: 80vh; }
  .hero-content { max-width: 100%; width: 100%; padding-left: var(--space-6); padding-right: var(--space-6); }
  .hero h1 { font-size: clamp(2.1rem, 6.5vw, 3.2rem); line-height: 1.08; max-width: 100%; overflow-wrap: break-word; }
  .hero-media img, .hero-fallback { object-fit: cover; object-position: center center; }
  /* sharp portrait poster on mobile/tablet, hide the landscape one */
  .hero-fallback-desktop { display: none !important; }
  .hero-fallback-mobile { display: block !important; z-index: -1 !important; }
  .hero-media::after { background: linear-gradient(180deg, rgba(11,26,48,0.58) 0%, rgba(11,26,48,0.38) 45%, rgba(11,26,48,0.92) 100%); }
  .hero .lead { font-size: var(--text-base); line-height: 1.55; max-width: 100%; }
  /* Swap to the short, single-line eyebrow + concise lead on mobile */
  .eb-full, .lead-full { display: none; }
  .eb-short, .lead-short { display: inline; }
  /* Hero: two solid buttons + a quiet text link for Meet the Team */
  .hero-meet {
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: var(--champagne-300) !important; text-decoration: underline; text-underline-offset: 4px;
    padding: var(--space-2) 0 !important; width: auto !important; font-size: var(--text-sm) !important;
  }
  /* Sticky CTA clearance: no body padding (which would leave a trailing navy gap).
     Instead the footer carries extra bottom padding so the fixed CTA overlaps navy
     footer space (navy-on-navy, invisible) and the footer still sits flush. The CTA
     also auto-hides once the footer scrolls into view (IntersectionObserver). */
  body { padding-bottom: 0; }
  /* the carousel section and the New Construction section need to breathe on mobile */
  .neigh-carousel-section { padding-bottom: var(--space-10); }
  .new-construction-section { padding-top: var(--space-10); padding-bottom: var(--space-12); }
  .carousel-dots { margin-bottom: var(--space-4); }
  /* ============================================================
     MOBILE FOOTER — compact, premium, accordion-based
     ============================================================ */
  .site-footer { padding: var(--space-12) 0 var(--space-6); }
  .footer-top {
    display: block; padding-bottom: var(--space-5); border-bottom: 1px solid var(--navy-700);
  }
  /* Brand block — tighter */
  .footer-brand { margin-bottom: var(--space-5); }
  .footer-brand p { font-size: var(--text-sm); line-height: 1.5; margin-top: var(--space-3); max-width: 100%; }
  .footer-brand .social-row { margin-top: var(--space-4); }
  .social-row a { width: 34px; height: 34px; }

  /* Accordions: collapsible rows on mobile */
  .footer-acc { border-top: 1px solid var(--navy-700); }
  .footer-acc > summary {
    cursor: pointer; padding: var(--space-4) 0; margin: 0;
    display: flex; align-items: center; justify-content: space-between;
    list-style: none; -webkit-tap-highlight-color: transparent;
  }
  .footer-acc > summary h5 { margin: 0 !important; }
  .footer-acc .acc-chev {
    display: block; width: 9px; height: 9px; border-right: 1.5px solid var(--champagne-300);
    border-bottom: 1.5px solid var(--champagne-300); transform: rotate(45deg);
    transition: transform .25s ease; margin-right: 3px; flex: 0 0 auto;
  }
  .footer-acc[open] .acc-chev { transform: rotate(-135deg); }
  .footer-acc .footer-acc-body { padding: 0 0 var(--space-4); display: block; }
  .footer-acc .footer-acc-body a { padding: 7px 0; margin: 0; font-size: var(--text-sm); }

  /* Get in Touch — compact quick-contact, no oversized block */
  .footer-col:not(.footer-acc) { border-top: 1px solid var(--navy-700); padding: var(--space-4) 0 var(--space-2); }
  .footer-col:not(.footer-acc) h5 { margin-bottom: var(--space-3); }
  .footer-contact-item { margin-bottom: var(--space-2); font-size: var(--text-sm); }

  /* Compact brokerage strip on mobile — small logo chip + compliance text, stays short */
  .brokerage-strip { gap: 12px; padding: var(--space-4) 0; }
  .brokerage-strip__logo { padding: 6px 10px; }
  .brokerage-strip__logo img { height: 22px; }
  .brokerage-strip__meta { font-size: 0.68rem; }
  /* Compact brokerage card on mobile — Contact page only */
  .brokerage-card { margin-top: var(--space-3); padding: 13px 14px 12px; max-width: 260px; }
  .brokerage-card__logo img { max-width: 168px; }

  /* Bottom: legal accordion (collapsed), then stacked centered baseline */
  .footer-bottom { padding-top: var(--space-4); line-height: 1.6; }
  .footer-legal-acc { margin-bottom: var(--space-3); }
  .footer-legal-acc > summary { justify-content: flex-start; }
  .footer-legal-acc .footer-disclaimer { font-size: 0.68rem; line-height: 1.65; max-width: 100%; }
  .footer-legal-acc .footer-prototype { font-size: 0.66rem; }
  /* baseline stacks + centers on mobile */
  .footer-baseline { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding-top: var(--space-3); }
  .footer-legal-links { gap: var(--space-3); }
  .footer-copy, .footer-legal-links a { font-size: 0.68rem; }
  .footer-credit { margin-left: 0; font-size: 0.66rem; }

  /* sticky CTA minimizes (slides away) once the footer is in view, so the
     bottom of the page reads clean and uncrowded */
  .sticky-cta { transition: transform .3s ease, opacity .3s ease; }
  .sticky-cta.is-minimized { transform: translateY(120%); opacity: 0; pointer-events: none; }

  /* ---- mobile declutter: give content room to breathe ---- */
  .section-head { margin-bottom: var(--space-6); }
  .section-head.center { padding: 0 var(--space-2); }
  .lead { font-size: var(--text-base); }
  .split { gap: var(--space-8); }
  .btn-row { flex-wrap: wrap; gap: var(--space-3); }

  /* ---- reusable mobile carousel: turn heavy grids into swipe rows ---- */
  .m-scroll {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: var(--space-4); margin: 0 calc(-1 * var(--space-4));
    padding-left: var(--space-4); padding-right: var(--space-4);
  }
  .m-scroll::-webkit-scrollbar { display: none; }
  .m-scroll > * { scroll-snap-align: start; }
  .m-hint { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-2); }
}
@media (min-width: 1025px) { .m-hint { display: none; } .eb-short, .lead-short { display: none; } }

@media (max-width: 640px) {
  /* Hero: trim to essentials so it never feels crowded */
  .hero-content .eyebrow { font-size: 11px; letter-spacing: 0.14em; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.12; margin-bottom: var(--space-4); }
  .hero .lead { font-size: var(--text-base); max-width: 100%; margin-bottom: var(--space-6); }
  /* Only show the first two trust chips on small phones to reduce clutter */
  .hero-content .chip:nth-child(n+3) { display: none; }
  .btn-row .btn { width: 100%; justify-content: center; }
  /* Cards & modules: softer padding */
  .module { padding: var(--space-6); }
  .card-body { padding: var(--space-5); }
  .prop-body { padding: var(--space-5); }
  .feature { padding: var(--space-5); }
  /* Property cards: fewer facts on mobile */
  .prop-meta span:nth-child(n+3) { display: none; }
  /* Tighter type scale for dense sections */
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  /* Forms: comfortable taps, no iOS zoom, full-width submit */
  input, select, textarea { font-size: 16px !important; }
  .btn-block, form .btn[type="submit"], form button[type="submit"] { width: 100%; }
}
@media (max-width: 520px) {
  /* Keep a consistent, comfortable 22px gutter on small phones — never 16px.
     (Global mobile alignment system below standardizes this at <=768px.) */
  .container, .container-narrow { padding: 0 22px; }
  .btn-row .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   MOBILE HOMEPAGE CURATION (<=768px)
   Curated, calm luxury order — hide redundant desktop modules,
   trim repetitive content, fix the bottom gap. Desktop untouched.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Fix white/cream gap below the footer ---- */
  html, body { background: var(--navy-900); overflow-x: hidden; }
  main { background: var(--cream-100); display: block; }
  /* Footer carries the sticky-CTA clearance in its OWN navy bottom padding, so the
     footer stays flush to the viewport bottom with no trailing gap of any color. */
  .site-footer { margin-bottom: 0 !important; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* ---- Hide redundant modules on mobile homepage ---- */
  .m-hide { display: none !important; }

  /* ---- Curated section order on the homepage ----
     Target: Hero -> Choose Your Path -> Trust Strip -> Why K&K
     -> Featured Preview (properties) -> Communities -> Reviews -> Final CTA */
  body.home main { display: flex; flex-direction: column; }
  body.home main > .hero { order: 1; }
  body.home main > [style*="--m-order"] { order: var(--m-order); }
  /* the shared final CTA band has no --m-order; force it last */
  body.home main > section:last-child { order: 20; }

  /* ---- Trust strip: keep compact, it's the single proof row ---- */
  .home-trust-strip { padding: var(--space-10) 0; }

  /* ---- Why Kent & Kionna: show 4 clean cards on mobile ----
     Construction Insight (1), Land & Development (2), People-First Service (3),
     Local Knowledge (5). Hide Seller Strategy (4) + Elevated Marketing (6). */
  .home-why .feature-grid .feature:nth-child(4),
  .home-why .feature-grid .feature:nth-child(6) { display: none; }
  .home-why .feature { padding: var(--space-5); }
  .home-why .feature p { font-size: var(--text-sm); line-height: 1.5; }
  .home-why .section-head h2 { font-size: clamp(1.7rem, 6.5vw, 2.1rem); line-height: 1.14; }

  /* ---- Reviews: collapse the heavy grid into a curated preview ----
     Keep the summary row + ONE featured review + CTA. Hide the rest. */
  .home-reviews .awards-strip,
  .home-reviews .review-platforms,
  .home-reviews .cs-head,
  .home-reviews .rev-companions,
  .home-reviews .cs-row-bottom,
  .home-reviews .reviews-source-note,
  .home-reviews .rev-sample { display: none !important; }
  .home-reviews .trust-summary { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .home-reviews .trust-sub { display: none; }
  .home-reviews .cs-row-top { display: block; }
  .home-reviews .rev-featured { margin: 0; }
  .home-reviews { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .home-reviews .trust-cta { margin-top: var(--space-8); }
  .home-reviews .trust-cta p { font-size: var(--text-sm); }
  /* only one CTA button in the reviews block on mobile */
  .home-reviews .trust-cta-actions .btn:nth-child(n+2) { display: none; }

  /* ---- LUXURY MOBILE HERO ----
     The homepage <main> has an opaque cream background, which was hiding the
     negative-z hero media. Paint the SAME approved desktop hero image (mobile
     crop) + deep-navy overlay directly on the .hero so it matches desktop and
     keeps white text readable. Overlay is stronger at the top/bottom (where the
     eyebrow, headline, and buttons sit) and lighter through the middle so the
     premium golden-hour image reads through. */
  .hero {
    min-height: 78vh;
    background-image:
      linear-gradient(rgba(11,26,48,0.66) 0%, rgba(11,26,48,0.42) 45%, rgba(11,26,48,0.72) 100%),
      url("../img/hero-summer-mobile.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  /* Hide the video + the redundant fallback <img> layers; the CSS bg is the poster */
  .hero-video .hero-vid,
  .hero-media { display: none !important; }
  /* Keep the champagne veil off since media is hidden; text sits on the navy bg */
  .hero-content { position: relative; z-index: 2; }
  .hero h1 { color: var(--white) !important; }
  .hero .lead { color: #e7edf5 !important; }
  .hero .eyebrow { color: var(--champagne-300) !important; }

  /* ---- Hero: two solid buttons side-by-side + quiet Meet link on its own line ---- */
  .hero .btn-row { align-items: center; }
  .hero .btn-row .btn-primary,
  .hero .btn-row .btn-outline-light:not(.hero-meet) {
    flex: 1 1 0; width: auto !important; min-width: 0;
  }
  .hero .btn-row .hero-meet {
    flex: 1 0 100%; width: 100% !important; text-align: center;
    margin-top: var(--space-2); color: #fff !important; border-color: transparent;
    text-decoration: underline; text-underline-offset: 4px; background: transparent;
  }
  /* Trust chips are redundant with the Trust Strip below — hide on mobile home */
  body.home .hero-content .chip { display: none !important; }
  body.home .hero-content > div:last-child { display: none !important; }

  /* ---- GLOBAL INTERNAL PAGE HERO FIX ----
     Same root cause as the homepage hero: .page-hero-media sits at z-index:-2,
     so the opaque cream <main> paints over the image + dark overlay, leaving
     light hero text floating on cream. Give the hero a solid navy base and lift
     the media + overlay into the hero's own stacking context (positive z),
     with content on top. Works for every page regardless of its hero image. */
  .page-hero {
    min-height: 56vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + var(--space-8)) var(--space-6) var(--space-10);
    background: var(--navy-900);
    isolation: isolate;
  }
  .page-hero-media { z-index: 0; }
  .page-hero-media img { opacity: 0.92; }
  /* the dark navy overlays sit above the image, below the text */
  .page-hero-media::before { z-index: 2; background: linear-gradient(180deg, rgba(9,20,38,0.66) 0%, rgba(11,26,48,0.82) 100%); }
  .page-hero-media::after { z-index: 1; }
  .page-hero-content { z-index: 3; padding-top: 0; max-width: 100%; }
  /* subtle, small breadcrumb — not a heavy top-edge bar */
  .page-hero .breadcrumb { color: rgba(255,255,255,0.72) !important; font-size: 0.72rem; letter-spacing: 0.08em; margin-bottom: var(--space-3); }
  .page-hero .eyebrow { color: var(--champagne-300) !important; font-size: 0.72rem; letter-spacing: 0.22em; }
  .page-hero h1 { color: #fff !important; font-size: clamp(2.05rem, 8.5vw, 2.7rem); line-height: 1.08; margin-top: var(--space-2); margin-bottom: var(--space-3); }
  .page-hero .lead { color: rgba(255,255,255,0.9) !important; font-size: var(--text-base); line-height: 1.55; max-width: 34rem; }

  /* ---- Kill ALL moving/parallax imagery on mobile for smoothness ---- */
  .hero-bg, .parallax, .moving-image,
  .cinematic-media, .cine-media, .section-media img, .stats-bg img,
  .page-hero-media, .page-hero-media img {
    transform: none !important;
    animation: none !important;
    background-attachment: scroll !important;
    background-position: center center !important;
  }

  /* ============================================================
     GLOBAL MOBILE SPACING SYSTEM — luxury vertical rhythm.
     Consistent breathing room between sections, headings, and
     carousels so nothing feels cramped or overlapped. Desktop
     is untouched (all rules scoped to <=768px). Overrides the
     tighter .section padding set earlier in this same query.
     ============================================================ */
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  /* clean separation after any hero into the first real section */
  .hero + .section,
  .page-hero + .section,
  .page-hero + section { padding-top: 60px; }

  /* section heads: room above + below, no collision with cards below */
  .section-head { margin-bottom: 30px; }
  .section-head.center { padding: 0 var(--space-4); }
  .section-head .eyebrow { margin-bottom: 14px; }
  .section-head h2 { margin-bottom: 16px; line-height: 1.12; }
  .section-head p, .section-head .lead { margin-bottom: 0; }

  /* decorative crest above section titles: smaller + spaced, never crowding */
  .section-head.center .kk-crest { width: 38px; margin-bottom: 18px; }

  /* carousels / card rows must not start tight under the heading */
  .path-grid, .prop-carousel, .m-scroll, .grid-3,
  .communities-carousel, .reviews-carousel { margin-top: 22px; }

  /* ---- CHOOSE YOUR PATH: fix the cramped hero->section transition ---- */
  .home-path { padding-top: 60px; padding-bottom: 56px; }
  .home-path .section-head.center { margin-bottom: 8px; }
  .home-path .section-head .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; }
  .home-path .section-head h2 { font-size: clamp(1.7rem, 7vw, 2.15rem); line-height: 1.1; margin-bottom: 0; }
  .home-path .path-grid { margin-top: 28px; }

  /* ---- sticky CTA clearance: keep it off page content ---- */
  body.home main > section:last-child,
  main > .section:last-child,
  main > section:last-child { padding-bottom: 40px; }

  /* ============================================================
     GLOBAL MOBILE ALIGNMENT & READABILITY SYSTEM
     One consistent gutter + type ceiling for EVERY page so no
     section leans left, hugs the edge, or over-sizes a heading.
     Placed last in the <=768px query so it wins over earlier rules.
     Desktop is untouched. ============================================================ */

  /* 1) One shared gutter on the OUTER wrappers only (24px), never touching the
     edge. Children like .section-head / .split inherit the gutter from their
     .container parent, so they must NOT add their own (would double to 48px). */
  .container, .container-narrow, .footer-inner {
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  /* Heroes: put the 24px gutter on the hero SHELL explicitly (authoritative),
     and zero the inner .container so we never double up. */
  .page-hero { padding-left: 24px !important; padding-right: 24px !important; }
  .hero .container, .page-hero .container { padding-left: 0 !important; padding-right: 0 !important; }
  /* .team-band-inner already carries the .container class, so it inherits the
     24px gutter above — do NOT re-add padding here (would double to 48px). */
  /* section-head.center set 16px earlier — neutralize so it aligns to the
     container gutter (its parent .container already provides 24px). */
  .section-head.center { padding-left: 0; padding-right: 0; }

  /* 2) Responsive heading ceiling — nothing dominates or falls off the left.
     Applies to base tags AND the bespoke display titles. */
  h1, .hero h1, .page-hero h1 {
    font-size: clamp(2rem, 8.2vw, 2.7rem) !important;
    line-height: 1.08;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  h2, .team-band-title {
    font-size: clamp(1.7rem, 6.6vw, 2.25rem) !important;
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  h3 { font-size: clamp(1.35rem, 5vw, 1.75rem) !important; line-height: 1.18; }

  /* 3) Readable measure for body copy across every page */
  p, .lead, .team-band-sub, .page-hero .lead, .hero .lead {
    line-height: 1.58;
    max-width: 100%;
  }

  /* 4) The team "One Team · Two Perspectives" band: relax the tight 16ch wrap
     so the title balances over ~3 lines instead of a heavy left-leaning stack,
     and align eyebrow/title/sub to the same left edge as the rest of the page. */
  .team-band-title { max-width: none; font-size: clamp(1.6rem, 6.2vw, 2.05rem) !important; margin-top: 0.4rem; margin-bottom: 1rem; }
  .team-band-sub { max-width: 100%; font-size: var(--text-base); }
  .team-band-copy { text-align: left; }
  .team-band { padding: 64px 0; }

  /* 5) Ensure the sticky Call/Text/Contact bar never sits on the last content.
     Every page's last section clears the ~72px bar + safe-area. */
  main > .section:last-child,
  main > section:last-child { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}