/* ==========================================================================
   03. LAYOUT UTILITIES
   Container, section rhythm, shared grids, spacing helpers and the
   scroll-reveal transition classes driven by assets/js/modules/scroll-reveal.js.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

section { position: relative; }

.section-pad { padding-block: var(--sp-7); }

.section-head {
  max-width: 700px;
  margin-bottom: var(--sp-6);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.section-head.center .eyebrow::before { display: none; }
.section-head.center .section-lead { margin-inline: auto; }

.bg-soft { background: var(--bg-soft); }

/* --- Grids ---------------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.grid-2 > * { min-width: 0; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.grid-3 > * { min-width: 0; }

/* --- Spacing helpers ------------------------------------------------------ */
.stack-sm { margin-top: var(--sp-3); }

/* White-stroked icons sitting on a dark panel */
.icon-invert { color: var(--white); }

/* --- Scroll reveal -------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }