/* ============================================================
   LOXLEY FOREST — HOME PAGE STYLES
   ============================================================ */

/* --- Section 2: Opening Statement --- */
.section--linen .body-large {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Section 3: Three Pillars --- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.pillar {
  display: flex;
  flex-direction: column;
}

.pillar__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 32px;
}

.pillar__image {
  aspect-ratio: 4 / 5;
  width: 100%;
  transition: transform 0.6s var(--ease-natural);
}

.pillar:hover .pillar__image {
  transform: scale(1.03);
}

.pillar__content {
  padding: 0 4px;
}

.pillar__content .eyebrow {
  margin-bottom: 14px;
}

.pillar__content .headline-section {
  font-size: clamp(24px, 2.4vw, 32px);
  margin-bottom: 16px;
}

.pillar__content .body-text {
  color: var(--stone);
  margin-bottom: 24px;
}

.pillar__link {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s ease, color 0.3s ease;
}

.pillar__link:hover {
  gap: 14px;
  color: var(--gold-dark);
}

.pillar__link span {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.pillar__link:hover span {
  transform: translateX(2px);
}

/* --- Section 6: Builder's Story --- */
.builder-story {
  min-height: 70vh;
}

/* --- Section 8: Location Distances --- */
.location-distances__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 36px;
}

.location-distance {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--parchment);
}

.location-distance__city {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--stone);
}

.location-distance__time {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--forest-deep);
}

/* ============================================================
   RESPONSIVE — HOME
   ============================================================ */

@media (max-width: 1199px) {
  .pillars {
    gap: 28px;
  }

  .pillar__content .headline-section {
    font-size: clamp(22px, 2.2vw, 28px);
  }
}

@media (max-width: 767px) {
  .pillars {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 100%;
    margin: 0 auto;
  }

  .pillar__image {
    aspect-ratio: 4 / 3;
  }

  .pillar__content .headline-section {
    font-size: clamp(22px, 5.5vw, 28px);
  }

  .location-distances__grid {
    grid-template-columns: 1fr;
  }

  .location-distance__time {
    font-size: 18px;
  }

  .builder-story {
    min-height: 60vh;
  }

  .builder-story .cta-block__content {
    padding: 48px 20px;
  }
}

@media (max-width: 380px) {
  .pillars {
    gap: 40px;
  }

  .pillar__content .headline-section {
    font-size: 20px;
  }
}