/* =========================================================
   03-layout.css — LAYOUT PRIMITIVES
   Depends on: 01-tokens.css
   ========================================================= */

.page-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 0 var(--sp-6) var(--sp-16);
}

.container        { width: 100%; max-width: var(--max-content); }
.container--narrow { width: 100%; max-width: var(--max-narrow); }

.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section + .section { margin-top: var(--sp-8); }

/* Two-column hero */
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  max-width: var(--max-content);
}
@media (min-width: 700px) {
  .hero-grid { flex-direction: row; align-items: flex-start; gap: var(--sp-12); }
}

/* Services flex row */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 880px;
}

/* Countdown row */
.countdown-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(var(--sp-3), 3vw, var(--sp-8));
  flex-wrap: wrap;
}