/* (c) 2026 The Lowry Group at Coldwell Banker Realty. All rights reserved. Proprietary — unauthorized copying, reuse, or redistribution prohibited. */
/* ==========================================================================
   THE LOWRY GROUP — BASE / RESET / TYPOGRAPHY
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text-on-black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  color: inherit;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 500; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 var(--space-sm); }

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--text-on-black-muted);
  max-width: 640px;
}

/* ---- Eyebrow / kicker label ------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold-dim);
}

.eyebrow.align-left::before { display: none; }
.eyebrow.align-left { justify-content: flex-start; }

/* ---- Layout helpers ----------------------------------------------------*/
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section {
  /* Was var(--space-2xl) (8rem) top and bottom — that's the token used
     elsewhere for hero padding and grid gaps too, so rather than changing
     it globally (and affecting things that weren't too airy), this rule
     gets its own tighter fixed value. Cuts the hero-to-content gap and the
     gap before the footer on every page, at every viewport. */
  padding: 5.5rem 0;
}

.section-tight { padding: 3.5rem 0; }

.section-light {
  background: var(--ivory);
  color: var(--text-dark);
}

.section-light .eyebrow::before,
.section-light .eyebrow::after { background: var(--gold-dim); }

.section-light .lede { color: var(--text-muted); }

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
  border: none;
  margin: 0;
}

.center { text-align: center; }
.text-center { text-align: center; margin-left: auto; margin-right: auto; }

.grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 780px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 2.1em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  border-radius: 2px;
  transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
  white-space: nowrap;
}

.btn-gold {
  background: var(--gold);
  color: var(--black);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-outline {
  background: transparent;
  color: var(--text-on-black);
  border-color: var(--gold-dim);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.section-light .btn-outline {
  color: var(--text-dark);
  border-color: var(--gold-dim);
}
.section-light .btn-outline:hover { border-color: var(--gold); color: var(--gold-dim); }

.btn-sm { padding: 0.7em 1.5em; font-size: 0.72rem; }

/* ---- Focus states for accessibility ------------------------------------*/
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ---- Scrollbar (webkit) ------------------------------------------------*/
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 6px; }