/* layout.css — page layout primitives */

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  line-height: 1.5;
  color: var(--dg-gray-900);
  background: var(--dg-bg);
}

/* Basic typography */
h1, h2, h3 {
  line-height: 1.2;
}

h1 { margin: 0 0 10px; }
h2 { margin: 0 0 18px; font-size: 26px; }
h3 { margin: 0 0 8px; }

.lead {
  font-size: 18px;
  color: #2b2b2b;
  margin: 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 100px 0;
}

.section--muted {
  background: var(--dg-gray-100);
}

.section--cta {
  color: #fff;
  padding: 48px 0;
}

/* HERO (background image set in page.css so each page can choose its own) */
.hero--bg {
  position: relative;
  padding: 120px 0;
  min-height: 560px;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

/* If you add a hero overlay layer in markup later, this is ready */
.hero__overlay {
  position: absolute;
  inset: 0;
}

@media (max-width: 900px) {
  .section {
    padding: 44px 0;
  }
  .hero--bg {
    padding: 72px 0;
    min-height: 420px;
    background-position: center top;
  }
}