/* ================================
   STATS
================================ */

.stats-section {
  padding: 150px 0 130px;

  background: var(--off-white);
}

.section-intro {
  max-width: 850px;
}

.section-intro h2 {
  margin-top: 25px;

  font-size: clamp(45px, 6vw, 82px);

  line-height: 0.98;

  letter-spacing: -0.045em;

  font-weight: 500;
}

.section-intro h2 span {
  color: #999993;
}

.section-intro p {
  max-width: 520px;

  margin-top: 30px;

  font-size: 16px;

  line-height: 1.8;

  color: #686863;
}

.stats-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  margin-top: 110px;

  border-top: 1px solid #d8d8d2;
}

.stat-item {
  padding: 38px 25px 0;

  border-right: 1px solid #d8d8d2;
}

.stat-item:first-child {
  padding-left: 0;
}

.stat-item:last-child {
  border-right: none;
}

.stat-number {
  display: block;

  font-family: var(--font-display);

  font-size: clamp(45px, 5vw, 75px);

  line-height: 1;

  letter-spacing: -0.05em;
}

.stat-label {
  display: block;

  margin-top: 15px;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.14em;

  color: #888881;
}

/* ================================
   DEVELOPMENT
================================ */

.development-section {
  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  min-height: 720px;

  background: var(--charcoal);

  color: var(--white);
}

.development-image {
  position: relative;

  min-height: 600px;

  overflow: hidden;
}

.development-image img {
  height: 100%;

  object-fit: cover;

  opacity: 0.8;
}

.image-number {
  position: absolute;

  z-index: 2;

  top: 35px;
  left: 35px;

  font-family: var(--font-display);

  font-size: 12px;

  color: var(--yellow);
}

.development-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 80px;
}

.development-content h2 {
  margin-top: 25px;

  font-size: clamp(45px, 5vw, 75px);

  line-height: 0.98;

  letter-spacing: -0.05em;

  font-weight: 500;
}

.development-content h2 span {
  color: var(--yellow);
}

.development-content p {
  max-width: 480px;

  margin-top: 28px;

  color: rgba(255, 255, 255, 0.62);

  font-size: 15px;

  line-height: 1.8;
}

.development-content .text-link {
  margin-top: 45px;

  color: var(--yellow);
}

/* ================================
   LAND
================================ */

.land-section {
  padding: 150px 0;

  background: var(--off-white);
}

.section-heading-row {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 60px;
}

.section-heading-row h2 {
  margin-top: 25px;

  font-size: clamp(45px, 5vw, 75px);

  line-height: 0.98;

  letter-spacing: -0.05em;

  font-weight: 500;
}

.section-heading-row h2 span {
  color: #999993;
}

.land-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}

.land-card {
  background: #ffffff;
}

.land-card-image {
  position: relative;

  aspect-ratio: 1.25;

  overflow: hidden;
}

.land-card-image img {
  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;
}

.land-card:hover .land-card-image img {
  transform: scale(1.05);
}

.plot-status {
  position: absolute;

  top: 15px;
  left: 15px;

  padding: 8px 11px;

  background: var(--yellow);

  color: var(--black);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

.land-card-content {
  padding: 28px;
}

.land-card-content > span {
  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.15em;

  color: #999993;
}

.land-card h3 {
  margin-top: 12px;

  font-size: 34px;

  font-weight: 500;
}

.land-meta {
  display: flex;

  gap: 20px;

  margin-top: 22px;

  padding-top: 18px;

  border-top: 1px solid #deded8;
}

.land-meta span {
  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.1em;

  color: #777770;
}

/* ================================
   FINAL CTA
================================ */

.final-cta {
  position: relative;

  padding: 170px 0;

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}

.cta-grid {
  position: absolute;

  inset: 0;

  opacity: 0.08;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);

  background-size: 80px 80px;
}

.final-cta .container {
  position: relative;
}

.final-cta h2 {
  margin-top: 25px;

  font-size: clamp(55px, 7vw, 100px);

  line-height: 0.92;

  letter-spacing: -0.05em;

  font-weight: 500;
}

.final-cta h2 span {
  color: var(--yellow);
}

.final-cta .btn {
  margin-top: 45px;
}

/* ================================
   FOOTER
================================ */

.site-footer {
  padding: 65px 0 30px;

  background: var(--charcoal);

  color: var(--white);
}

.footer-top {
  display: flex;

  justify-content: space-between;
}

.footer-brand strong {
  font-family: var(--font-display);

  font-size: 18px;

  letter-spacing: 0.08em;
}

.footer-brand p {
  margin-top: 12px;

  font-size: 12px;

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.45);
}

.footer-links {
  display: flex;

  gap: 30px;
}

.footer-links a {
  font-size: 10px;

  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom {
  display: flex;

  justify-content: space-between;

  margin-top: 70px;

  padding-top: 25px;

  border-top: 1px solid var(--border);

  font-size: 9px;

  letter-spacing: 0.08em;

  color: rgba(255, 255, 255, 0.35);
}
