/* RELUX — core stylesheet
   Three palettes + three type sets + motion levels, toggled via body attrs.
*/

:root {
  /* defaults (noir palette, editorial type, default density) */
  --bg: #0c0b0a;
  --bg-soft: #151311;
  --ink: #ebe6dd;
  --ink-soft: #9a958b;
  --ink-dim: #5e594f;
  --line: rgba(235, 230, 221, 0.12);
  --accent: oklch(0.78 0.12 85);
  --accent-2: oklch(0.72 0.14 50);
  --grain: 0.035;

  --f-display: 'Instrument Serif', 'Times New Roman', serif;
  --f-body: 'Inter Tight', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --u: 8px;
  --pad-section: clamp(64px, 10vw, 160px);
  --pad-gutter: clamp(20px, 4vw, 48px);

  --dur-fast: 180ms;
  --dur: 520ms;
  --dur-slow: 1200ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --motion: 1;
}

/* ───── Palette: Ivory ───── */
body[data-palette="ivory"] {
  --bg: #f4f0e8;
  --bg-soft: #ece6d9;
  --ink: #1a1a1d;
  --ink-soft: #4a4945;
  --ink-dim: #8c8a82;
  --line: rgba(26, 26, 29, 0.14);
  --accent: oklch(0.35 0.08 250);
  --accent-2: oklch(0.45 0.1 30);
  --grain: 0.02;
}

/* ───── Palette: Mono ───── */
body[data-palette="mono"] {
  --bg: #fafafa;
  --bg-soft: #efefed;
  --ink: #0a0a0a;
  --ink-soft: #4a4a4a;
  --ink-dim: #8a8a8a;
  --line: rgba(10,10,10,0.12);
  --accent: oklch(0.6 0.18 30);
  --accent-2: oklch(0.5 0.14 260);
  --grain: 0.015;
}

/* ───── Type sets ───── */
body[data-typeset="modern"] {
  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-body: 'Manrope', system-ui, sans-serif;
}
body[data-typeset="classic"] {
  --f-display: 'Newsreader', 'Times New Roman', serif;
  --f-body: 'Geist', system-ui, sans-serif;
}

/* ───── Density ───── */
body[data-density="airy"]  { --pad-section: clamp(96px, 14vw, 220px); }
body[data-density="dense"] { --pad-section: clamp(48px, 7vw, 96px); }

/* ───── Base ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* film grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--ink); color: var(--bg); }

/* ───── Type styles ───── */
.t-display {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.t-mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
}
.t-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-kicker {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.italic { font-style: italic; font-feature-settings: 'ss01'; }

/* ───── Scroll ticker ───── */
.scroll-ticker {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  z-index: 1000;
  transition: transform 80ms linear;
}

/* ───── Nav ───── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px var(--pad-gutter);
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
  justify-self: start;
}
.nav-mark-r {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.nav-mark:hover .nav-mark-r { transform: rotate(-8deg) scale(1.1); }
.nav-mark-word {
  overflow: hidden;
  display: inline-block;
  max-width: 0;
  transition: max-width var(--dur) var(--ease);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.nav-mark:hover .nav-mark-word,
.nav-mark:focus-visible .nav-mark-word { max-width: 180px; }

/* Compass wordmark — MRED IDX compliance: brokerage always visible */
.nav-mark-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: currentColor;
  opacity: 0.25;
  margin: 0 14px;
  align-self: center;
  transform: translateY(1px);
}
.nav-mark-compass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
}
.nav-mark-compass-small {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
}
.nav-mark-compass img {
  /* slightly larger than the RELUX "R" per the brokerage requirement */
  height: 26px !important;
  width: auto;
  display: block;
  filter: invert(1);
}
/* Light nav surfaces (if any) — keep black */
body[data-palette="cream"] .nav-mark-compass img,
body[data-palette="bone"] .nav-mark-compass img {
  filter: none;
}
body[data-palette="noir"] .nav-mark-compass-small,
.nav--dark .nav-mark-compass-small {
  color: rgba(255,255,255,0.55);
}

@media (max-width: 720px) {
  .nav-mark-compass-small { display: none; }
  .nav-mark-sep { margin: 0 10px; }
  .nav-mark-compass img { height: 20px; }
}

.nav-center { justify-self: center; }
.nav-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-self: end;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.on:not(.nav-cta)::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  overflow: hidden;
}
.nav-cta-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.nav-cta:hover .nav-cta-arrow { transform: translateX(6px) rotate(-45deg); }

.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-center, .nav-links { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    justify-self: end;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(235,230,221,0.18);
    background: transparent; cursor: pointer; color: var(--ink);
  }
  .nav-toggle span { display: block; width: 22px; height: 1px; background: currentColor; }

  /* Full-screen overlay nav.
     Solid dark navy (no alpha) so background videos / images can't
     bleed through. iOS Safari's backdrop-filter is unreliable behind
     translucent fixed elements, and the prior 0.97 alpha left enough
     transparency for hero video frames to show through and make the
     menu links hard to read. Solid background = readable on every
     device, period. z-index also bumped to 9999 to beat any stacking
     context introduced by transform/filter elsewhere on the page. */
  .nav-mobile {
    position: fixed; inset: 0;
    background: #0a0f1a;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    gap: 4px;
    font-family: var(--f-display);
    color: var(--ink);
    z-index: 9999;
    overflow-y: auto;
    animation: nav-mobile-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes nav-mobile-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .nav-mobile a {
    display: block;
    width: 80%;
    max-width: 400px;
    text-align: center;
    color: #f5f0e8;
    text-decoration: none;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    padding: 20px 0;
    border-bottom: 1px solid rgba(201, 169, 110, 0.2);
    transition: color 0.18s ease;
    /* Beat any inherited link color from a parent — some hero
       overlay rules color anchors gold which clashes with the
       cream we want here. */
  }
  .nav-mobile a:last-child { border-bottom: none; }
  .nav-mobile a:hover,
  .nav-mobile a:active,
  .nav-mobile a.on { color: var(--accent); }
  .nav-mobile-close {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(201, 169, 110, 0.4);
    color: var(--accent);
    font-size: 28px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
  }
  .nav-mobile-close:hover {
    color: #fff;
    border-color: var(--accent);
    background: rgba(201, 169, 110, 0.12);
  }
  /* When the menu is open, lock body scroll. The Nav component sets
     this via inline overflow on body, but a CSS hook is here as a
     belt-and-suspenders against scroll-bleed bugs. */
  body:has(.nav-mobile) { overflow: hidden; }
}

/* ───── Shift / color-cycle text ───── */
.shift-text { display: inline-block; }
.shift-char {
  display: inline-block;
  transition: color calc(var(--dur-fast) * var(--motion)) var(--ease),
              transform calc(var(--dur-fast) * var(--motion)) var(--ease);
}
.shift-text:hover .shift-char {
  color: oklch(0.78 0.18 calc(var(--i) * 20deg + 40deg));
  transform: translateY(calc(sin(var(--i) * 0.7) * -4px));
}

/* ───── Reveal ───── */
.reveal {
  opacity: 0;
  transform: translateY(calc(24px * var(--motion)));
  filter: blur(calc(6px * var(--motion)));
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease),
    filter var(--dur-slow) var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ───── Marquee ───── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.marquee-track {
  display: inline-flex;
  gap: 40px;
  animation: mq linear infinite;
  will-change: transform;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.02em;
  padding: 0 20px;
}
.marquee-dot { color: var(--accent); font-size: 0.6em; }
@keyframes mq { to { transform: translateX(-33.33%); } }

/* ───── Magnetic link ───── */
.mag-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform var(--dur) var(--ease);
}

/* ───── Footer ───── */
.footer {
  position: relative;
  background: var(--bg-soft);
  color: var(--ink);
  padding: clamp(60px, 8vw, 120px) var(--pad-gutter) 0;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.footer-mark {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 0.9;
  margin-bottom: 16px;
}
.footer-tag { max-width: 380px; color: var(--ink-soft); line-height: 1.5; }
.footer-compass {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 260px;
}
.footer-compass-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
}
.footer-compass img {
  height: 32px;
  width: auto;
  display: block;
  filter: invert(1);
}
/* Light footer surfaces — keep black */
body[data-palette="cream"] .footer-compass img,
body[data-palette="bone"] .footer-compass img {
  filter: none;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-head {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.footer-col a {
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: var(--accent); transform: translateX(4px); }
.footer-addr {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
  transition: color var(--dur-fast) var(--ease);
}
.footer-addr:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: 24px 0 40px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-mega {
  font-family: var(--f-display);
  font-size: clamp(100px, 24vw, 380px);
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.08;
  letter-spacing: -0.04em;
  margin: 0 -2vw -0.2em;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ───── Tweaks panel ───── */
.tweaks {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9000;
  width: 280px;
  background: rgba(20, 18, 16, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 18px;
  color: #fff;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.tweaks-head {
  display: flex; justify-content: space-between;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.22em;
  opacity: 0.7;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tweaks-dot { color: #4ade80; }
.tweaks-row { margin-bottom: 14px; }
.tweaks-row label {
  display: flex; justify-content: space-between;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.6;
  margin-bottom: 8px;
}
.tweaks-val { opacity: 1; color: #fbbf24; }
.tweaks-pills {
  display: flex; gap: 4px;
}
.tweaks-pill {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  transition: all var(--dur-fast) var(--ease);
}
.tweaks-pill:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.tweaks-pill.on {
  color: #0c0b0a;
  background: #ebe6dd;
  border-color: #ebe6dd;
}
.tweaks input[type=range] {
  width: 100%;
  accent-color: #fbbf24;
}

/* ───── Section scaffolding ───── */
.section {
  padding: var(--pad-section) var(--pad-gutter);
  position: relative;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(40px, 5vw, 80px);
  gap: 40px;
  flex-wrap: wrap;
}
.section-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.section-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

/* ───── Buttons ───── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: translateY(0); }
.btn-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(6px); }
.btn-solid {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-solid::before { background: var(--accent); transform: translateY(101%); }
.btn-solid:hover { color: var(--ink); }
.btn-solid:hover::before { transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────
   Hero video — black background while loading so the loading
   state looks intentional, never a white flash.
   ───────────────────────────────────────────────────────────── */
.hero-video, .x30-hero { background: #0a0a0a; }

/* ─────────────────────────────────────────────────────────────
   Mobile redesign — videos play, but UI is finger-friendly.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* No horizontal scroll anywhere */
  html, body { overflow-x: hidden; }

  /* Hero video shrinks to 45vh; text overlays it */
  .hero,
  .x30-hero {
    min-height: 0 !important;
    height: 45vh !important;
  }
  .hero-media,
  .hero-video { height: 100%; }
  .hero video,
  .x30-hero video { height: 100% !important; }

  /* Hero typography — keep bold + scannable */
  .hero-heading,
  .x30-hero-title { font-size: clamp(36px, 9vw, 48px) !important; line-height: 1.05 !important; }
  .hero-foot-blurb,
  .x30-hero-sub   { font-size: 1rem !important; line-height: 1.45 !important; }
  .hero-content   { padding: 80px var(--pad-gutter, 20px) 24px !important; }
  .hero-foot      { gap: 12px !important; }

  /* Section headings + body */
  h2 { font-size: 1.8rem !important; line-height: 1.15 !important; }
  h3 { font-size: 1.4rem !important; line-height: 1.2 !important; }
  p, li { font-size: 1rem; line-height: 1.6; }

  /* Tighter section padding */
  section, .x30-section, .hood-section, .featured, .invest, .team-hero,
  .x30-mapsection, .x30-niche, .x30-briefing, .x30-leaders {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Touch targets ≥ 44px */
  .btn, .x30-btn, .nav-toggle, .nav-cta, .listings-status-tab, .x30-map-toggle {
    min-height: 44px;
  }
  .btn, .x30-btn { padding: 12px 20px; }

  /* Form input zoom-prevention on iOS — ≥ 16px font-size */
  input, textarea, select { font-size: 16px !important; }

  /* Featured listing cards single column */
  .fl-grid, .listings-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats grid 2-column */
  .hubidx-totals,
  .hood-snap-grid,
  .x30-citystats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* X30 map shorter on mobile */
  .x30-map-canvas { height: 300px !important; }

  /* Hood focus map shorter */
  .hood-page > div[style*="height: 320px"] { height: 250px !important; }

  /* Cross-link pill stacks on mobile — copy block on top, full-width CTA below */
  .hood-cross-link {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .hood-cross-link a.btn {
    justify-self: stretch !important;
    text-align: center;
  }

  /* Q&A blocks become single-column stacks on mobile */
  .hood-qa { grid-template-columns: 1fr !important; }
  .hood-qa-item { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Hero CTA wraps under the headline on mobile */
  .hood-hero { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Footer columns stack vertically */
  .footer-cols { grid-template-columns: 1fr !important; }
  .footer-col { margin-bottom: 24px; }
}