/* Let section titles use the available laptop width without changing their copy. */
@media (min-width: 1101px) {
  .section-opening {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 30px;
  }

  .section-opening h2 {
    max-width: none;
    text-wrap: wrap;
  }

  .contact {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
  }

  .contact h2 {
    font-size: 33px;
    text-wrap: wrap;
  }

  .contact-actions {
    align-items: flex-start;
  }

  .detail-practical {
    column-gap: 45px;
  }
}

/* Put example titles above the two-column explanation so they can read in one line. */
@media (min-width: 801px) {
  .detail-example > .wrap {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    column-gap: 60px;
    row-gap: 0;
    align-items: start;
  }

  .detail-example > .wrap > div {
    display: contents;
  }

  .detail-example .section-label,
  .detail-example h2 {
    grid-column: 1 / -1;
  }

  .detail-example h2 {
    margin-bottom: 18px;
    text-wrap: wrap;
  }

  .detail-example p:not(.section-label) {
    grid-column: 1;
    grid-row: 3;
  }

  .detail-example small {
    grid-column: 1;
    grid-row: 4;
  }

  .detail-example ol {
    grid-column: 2;
    grid-row: 3 / 5;
  }
}

/* The contact heading spans the page; the introductory copy and form sit below. */
.enquiry-page {
  row-gap: 20px;
}

.enquiry-heading {
  grid-column: 1 / -1;
}

.enquiry-heading .section-label {
  margin-bottom: 18px;
}

.enquiry-heading h1 {
  font-size: clamp(40px, 4.5vw, 65px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: 1.08;
  margin: 0 0 18px;
  text-wrap: wrap;
}

.enquiry-intro {
  padding-top: 10px;
}

@media (max-width: 700px) {
  .enquiry-heading h1 {
    font-size: 44px;
    margin-bottom: 25px;
  }
}