/* ==========================================================================
   Home page
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-xl), 5vw, var(--space-3xl)) var(--section-gap);
}


.hero__title {
  max-width: 22ch;
  color: var(--color-teal);
}

.hero__title em {
  color: var(--color-orange-dark);
  font-style: normal;
}

.hero__lede {
  margin-block-start: var(--space-md);
  color: var(--color-orange-deep);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.hero__intro {
  max-width: 62ch;
  margin-block-start: var(--space-lg);
}

.hero__media {
  margin-block-start: clamp(var(--space-xl), 4vw, var(--space-2xl));
  aspect-ratio: 21 / 9;
}

@media (min-width: 48em) {
  .hero__intro {
    /* Sits under the lede but indented, echoing the reference layout. */
    margin-inline-start: clamp(0px, 8vw, 8rem);
  }
}

/* --- Vision & mission ----------------------------------------------------- */

.purpose__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 48em) {
  .purpose__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
    align-items: start;
  }
}

.purpose__statement + .purpose__statement {
  margin-block-start: var(--space-xl);
}

.purpose__heading {
  margin-block-end: var(--space-2xs);
  color: var(--color-orange-dark);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
}

.purpose__media--small {
  margin-block-start: var(--space-xl);
  aspect-ratio: 4 / 3;
}

.purpose__media--large {
  aspect-ratio: 3 / 2;
}

@media (min-width: 48em) {
  .purpose__media--large {
    margin-block-start: var(--space-3xl);
  }
}

/* --- Offerings ------------------------------------------------------------ */

.offerings__list {
  display: grid;
  gap: var(--space-2xl);
  margin: 0;
}

@media (min-width: 56em) {
  .offerings__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--space-xl), 6vw, var(--space-4xl));
    row-gap: 0;
  }

  /* Zigzag ladder: one item per row, alternating right then left, each
     pulled up so it interlocks with the one above. */
  .offerings__item {
    grid-column: 2;
  }

  .offerings__item:nth-child(even) {
    grid-column: 1;
  }

  .offerings__item:nth-child(1) {
    grid-row: 1;
  }
  .offerings__item:nth-child(2) {
    grid-row: 2;
  }
  .offerings__item:nth-child(3) {
    grid-row: 3;
  }
  .offerings__item:nth-child(4) {
    grid-row: 4;
  }

  .offerings__item:nth-child(n + 2) {
    margin-block-start: calc(var(--space-2xl) * -1);
  }
}

/* Scope note: states what the firm is not. */
.offerings__scope {
  max-width: 62ch;
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--color-orange);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 56em) {
  .offerings__scope {
    margin-block-start: var(--space-3xl);
  }
}

/* --- Contact -------------------------------------------------------------- */

.contact {
  background-color: var(--color-surface-alt);
}

.contact__head {
  text-align: center;
}

.contact__title {
  color: var(--color-orange-dark);
  font-weight: var(--weight-regular);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.contact__intro {
  max-width: 48ch;
  margin: var(--space-md) auto 0;
}

.contact__form {
  margin-block-start: var(--space-xl);
}