.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--dark {
  background: var(--black);
  color: var(--paper);
}
.section--charcoal {
  background: var(--charcoal);
  color: var(--paper);
}
.section--light {
  background: var(--paper);
  color: var(--black);
}
.section__head {
  display: grid;
  gap: 1.75rem;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.section__head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
.section__head--split .lead {
  justify-self: start;
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(3rem, 5vw, 5rem) var(--gutter);
  align-items: center;
}
.about__text {
  grid-column: 1 / span 5;
  display: grid;
  gap: 2rem;
}
.about__visual {
  grid-column: 7 / span 6;
  position: relative;
}

/* ---------- Services ---------- */
.services {
  border-top: 1px solid var(--line-dark);
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(3rem, 5vw, 5rem) var(--gutter);
}
.contact__intro {
  grid-column: 1 / span 5;
  display: grid;
  gap: 2rem;
  align-content: start;
}
.contact__form-wrap {
  grid-column: 7 / span 6;
}

/* ---------- Footer ---------- */
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem var(--gutter);
}