/* ===== L|S REAL ESTATE GROUP — CSS VARIABLES ===== */
:root {
  /* Brand Colors */
  --ls-navy: #1a2a3a;
  --ls-navy-deep: #0f1a26;
  --ls-gold: #c9a96e;
  --ls-gold-light: #dfc089;
  --ls-gold-dark: #85671f;
  --ls-white: #ffffff;
  --ls-off-white: #f7f5f0;
  --ls-warm-gray: #e8e4dc;
  --ls-text: #2c2c2c;
  --ls-text-light: #6b6b6b;
  --ls-text-on-dark: #c5c5c5;

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', 'Helvetica Neue', sans-serif;

  /* Transitions */
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.25s ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* Layout */
  --max-width: 1200px;
  --max-width-wide: 1400px;
  --header-height: 70px;
  /* Height of the fixed header at the top of the page (top bar + logo row); heroes start below it */
  --header-offset: 127px;
  --section-pad: 100px;
  --section-pad-mobile: 60px;
}
/* The top bar runs on two lines below 1024px (css/header.css) */
@media (max-width: 1023px) { :root { --header-offset: 147px; } }