/* ==========================================================================
   Layout — page structure, containers, section rhythm
   Mobile-first; breakpoints at 40em (~640px) and 56.25em (~900px), chosen
   where the card grid and consultation split actually break.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-md) var(--space-sm);
  padding-inline: var(--container-gutter);
}

/* --------------------------------------------------------------------------
   Main — section rhythm and content containers
   -------------------------------------------------------------------------- */

.site-main > section + section {
  margin-block-start: var(--space-2xl);
}

.site-main {
  margin-block-end: var(--space-2xl);
}

.hero {
  max-inline-size: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.about,
.services,
.consultation {
  max-inline-size: calc(var(--container-max) + 2 * var(--container-gutter));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* --------------------------------------------------------------------------
   Services grid — 1 column, then 2, then 4
   -------------------------------------------------------------------------- */

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem);
  justify-content: center;
  gap: var(--space-lg) var(--space-md);
  margin-block-start: var(--space-xl);
}

@media (min-width: 40em) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 22rem));
  }
}

@media (min-width: 56.25em) {
  .services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Consultation — stacked, then two-column split
   -------------------------------------------------------------------------- */

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

@media (min-width: 56.25em) {
  .consultation {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--space-2xl);
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  padding-inline: var(--container-gutter);
  background-color: var(--color-surface-brand);
}

.site-footer__logo {
  inline-size: 75vw;
}