/* =========================================================================
   MORE, REALTORS®  —  more-realtors.css
   Single design-system stylesheet. Hosted on S3 and referenced from every
   page rendered by the CMS.

   Sections (in order):
     1. Tokens (CSS custom properties)
     2. Reset
     3. Base typography
     4. Layout primitives
     5. Mock chrome (header / footer)
     6. Components
        6.1 Hero (home)
        6.2 Path cards
        6.3 Page topper (interior pages)
        6.4 Section heading
        6.5 Numbered services grid
        6.6 Closing CTA
        6.7 Body copy
        6.8 Legal long-form
     7. Responsive (single breakpoint)

   Brand colors:
     red    #B72327
     navy   #1F2A4D
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* color */
  --more-red:   #B72327;
  --more-navy:  #1F2A4D;
  --ink:        #1a1a1a;
  --ink-soft:   #444;
  --ink-muted:  #666;
  --paper:      #ffffff;
  --paper-soft: #fafafa;
  --rule:       #e5e5e5;

  /* type */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
                Arial, sans-serif;
  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-base:  1.55;

  /* layout */
  --container-max: 1180px;
  --gutter:        24px;

  /* radius / borders */
  --rule-thin:  1px solid var(--rule);
  --rule-thick: 2px solid var(--rule);
}


/* -------------------------------------------------------------------------
   2. Reset (modern, minimal)
   ------------------------------------------------------------------------- */

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

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; height: auto; }

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

button { font: inherit; cursor: pointer; }


/* -------------------------------------------------------------------------
   3. Base typography
   ------------------------------------------------------------------------- */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-base);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { font-weight: 400; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--more-navy);
}

p { line-height: var(--leading-base); }


/* -------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Used to wrap a full-width band that itself has a container inside */
.band {
  width: 100%;
}

/* Vertical rhythm between major sections */
.section { padding-block: 64px; }
.section--tight { padding-block: 40px; }
.section--loose { padding-block: 96px; }

/* Surface variants */
.surface-paper       { background: var(--paper); }
.surface-paper-soft  { background: var(--paper-soft); }
.surface-navy        { background: var(--more-navy); color: #fff; }
.surface-red         { background: var(--more-red);  color: #fff; }
.surface-ink         { background: var(--ink);       color: #fff; }


/* -------------------------------------------------------------------------
   5. Mock chrome (header + footer)
   These rules also style what the platform renders in production.
   ------------------------------------------------------------------------- */

.site-header {
  background: var(--paper);
  border-bottom: var(--rule-thin);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}
.site-header__logo {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--more-red);
  text-decoration: none;
}
.site-header__nav ul {
  display: flex;
  gap: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--more-navy);
}
.site-header__nav a:hover { color: var(--more-red); }

.site-footer {
  background: var(--ink);
  color: #d8d8d8;
  padding-block: 40px;
  font-size: 13px;
}
.site-footer__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 2fr;
  align-items: start;
}
.site-footer__brand .logo {
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.site-footer__cols {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
.site-footer h5 {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.site-footer ul li { margin-bottom: 6px; }
.site-footer a:hover { color: #fff; }
.site-footer__legal {
  border-top: 1px solid #2a2a2a;
  margin-top: 32px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}


/* -------------------------------------------------------------------------
   6.1 Hero (home)
   ------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 460px;
}
.hero__type {
  background: var(--more-red);
  color: #fff;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.88;
}
.hero__headline {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-block: 14px 16px;
}
.hero__lede {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.94;
  max-width: 38ch;
}
.hero__photo {
  background-color: #1a1a1a;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* -------------------------------------------------------------------------
   6.2 Path cards (sit directly under the hero)
   ------------------------------------------------------------------------- */

.path-cards {
  background: var(--paper-soft);
  padding-block: 32px;
}
.path-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.path-card {
  display: block;
  background: var(--paper);
  border: var(--rule-thin);
  border-top: 4px solid;
  padding: 22px 24px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.path-card--consumer { border-top-color: var(--more-navy); }
.path-card--agent    { border-top-color: var(--more-red); }
.path-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}
.path-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--more-red);
}
.path-card__headline {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--more-navy);
  margin-block: 8px 6px;
}
.path-card__copy {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.path-card__cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--more-navy);
}
.path-card:hover .path-card__cta { color: var(--more-red); }


/* -------------------------------------------------------------------------
   6.3 Page topper (interior pages)
   ------------------------------------------------------------------------- */

.page-topper {
  background: var(--more-navy);
  color: #fff;
  padding-block: 56px;
}
.page-topper__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--more-red);
}
.page-topper__headline {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-block: 12px 14px;
  color: #fff;
}
.page-topper__lede {
  font-size: 15px;
  opacity: 0.88;
  max-width: 56ch;
}


/* -------------------------------------------------------------------------
   6.4 Section heading (in-page section header)
   ------------------------------------------------------------------------- */

.section-heading { margin-bottom: 28px; }
.section-heading__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--more-red);
}
.section-heading__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--more-navy);
  margin-top: 6px;
}


/* -------------------------------------------------------------------------
   6.5 Numbered services grid
   ------------------------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 36px;
}
.service {
  border-top: 2px solid var(--more-red);
  padding-top: 14px;
}
.service__num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--more-red);
}
.service__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--more-navy);
  margin-top: 4px;
}
.service__copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 6px;
}


/* -------------------------------------------------------------------------
   6.6 Closing CTA block
   ------------------------------------------------------------------------- */

.cta {
  background: var(--more-red);
  color: #fff;
  text-align: center;
  padding-block: 56px;
}
.cta__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.88;
}
.cta__headline {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-block: 10px 22px;
  color: #fff;
}
.cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Buttons (used inside CTA and standalone) */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 14px 22px;
  border: 2px solid transparent;
  text-transform: uppercase;
}
.btn--primary {
  background: #fff;
  color: var(--more-red);
}
.btn--secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn--primary:hover   { background: var(--more-navy); color: #fff; }
.btn--secondary:hover { background: #fff; color: var(--more-red); }

/* Standalone primary button used outside the CTA block */
.btn--navy { background: var(--more-navy); color: #fff; }
.btn--navy:hover { background: var(--more-red); }


/* -------------------------------------------------------------------------
   6.7 Body copy block (About, Vision, Mission, Contact)
   ------------------------------------------------------------------------- */

.prose {
  max-width: 68ch;
}
.prose h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--more-navy);
  margin-top: 32px;
  margin-bottom: 8px;
}
.prose h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--more-navy);
  margin-top: 20px;
  margin-bottom: 6px;
}
.prose p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.prose ul {
  margin: 8px 0 14px 0;
  padding-left: 0;
}
.prose ul li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 2px;
  background: var(--more-red);
}
.prose strong { color: var(--more-navy); }


/* -------------------------------------------------------------------------
   6.8 Legal long-form (Terms, Privacy)
   ------------------------------------------------------------------------- */

.legal {
  max-width: 75ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.legal h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--more-navy);
  margin-top: 28px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.legal p { margin-bottom: 10px; }
.legal a {
  color: var(--more-red);
  text-decoration: underline;
}


/* -------------------------------------------------------------------------
   7. Responsive (≤ 768px)
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Layout primitives */
  .section { padding-block: 44px; }
  .section--loose { padding-block: 56px; }

  /* Header nav */
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .site-header__nav ul {
    flex-wrap: wrap;
    gap: 12px 18px;
    font-size: 11px;
  }

  /* Hero stacks */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__type { padding: 36px 24px; }
  .hero__photo { min-height: 220px; }

  /* Path cards stack */
  .path-cards__grid { grid-template-columns: 1fr; }

  /* Page topper tighter */
  .page-topper { padding-block: 36px; }

  /* Services grid stacks */
  .services { grid-template-columns: 1fr; gap: 22px; }

  /* CTA tighter */
  .cta { padding-block: 40px; }
  .cta__buttons { flex-direction: column; align-items: stretch; }
  .btn { display: block; }

  /* Footer columns stack */
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}