/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding-top: var(--space-xl);
}

/* Let the hero content span the full viewport width instead of being
   capped at the site's normal 1280px content column, so it fills wide
   screens instead of leaving large empty margins on both sides. Other
   sections keep the normal contained width. */
.hero > .container {
  max-width: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hero__title {
  font-size: var(--text-3xl);
}

.hero__supporting {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 48ch;
  line-height: var(--leading-normal);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

/* =========================================================
   Section grids
   ========================================================= */
.experiences__grid {
  display: grid;
  justify-content: center;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}

.experiences__grid--featured {
  margin-bottom: var(--space-2xl);
}

.experiences__grid--more {
  grid-template-columns: minmax(0, 1fr);
}

.brand-experience__grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: minmax(0, 1fr);
}

.why__grid {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}

.audience__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}

.process__list {
  list-style: none;
  max-width: 640px;
}

.portfolio__grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   404 page
   ========================================================= */
.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.not-found__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  max-width: 48ch;
}

.not-found__code {
  font-family: var(--font-label);
  font-size: var(--text-2xl);
  color: var(--color-accent-strong);
}