/* ==========================================================================
   Layout — page shell, sections, bands, grids
   ========================================================================== */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Sections stack with their own top padding rather than margins, so a band
   can be inserted anywhere without collapsing-margin surprises. */
.section { padding: var(--space-96) 0 0; }
.section--first { padding-top: var(--space-88); }
.section--tight { padding-top: var(--space-56); }
.section--closed { padding-bottom: var(--space-96); }

/* --- Bands: full-bleed colour ------------------------------------------- */
.band { position: relative; overflow: hidden; }

.band--dark {
  background: var(--vigil);
  color: var(--paper);
  padding: var(--space-88) 0;
}
.band--terracotta {
  background: var(--grad-terracotta);
  padding: var(--space-88) 0;
}
.band--mist {
  background: var(--paper-2);
  padding: 84px 0;
}
.band--strip {
  background: var(--paper-2);
  padding: 34px 0;
}

/* Content inside a band must clear the motif behind it. */
.band__inner { position: relative; z-index: var(--z-content); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--vigil);
  color: var(--paper);
  padding: 116px 0 104px;
}
.hero--page { padding: 92px 0 88px; }

.hero__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-56);
  align-items: center;
}

/* --- Grids -------------------------------------------------------------- */
/* auto-fit + minmax so columns reflow on their own; align-items: start so a
   short card never stretches to match a tall neighbour. */
.grid {
  display: grid;
  gap: var(--space-20);
  align-items: start;
}
.grid--wide  { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--tight { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid--stage { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--cols  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-44); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-56);
  align-items: center;
}
.split--form {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: start;
}

/* A row that splits into copy on the left and one action on the right,
   wrapping to stacked on narrow screens. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-44);
  align-items: center;
  justify-content: space-between;
}

.stack { display: flex; flex-direction: column; gap: var(--space-20); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* --- The wedge field: brand motif as ambient texture -------------------- */
.wedge-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-motif);
}
.wedge-field svg { position: absolute; overflow: visible; }
.wedge-field--light svg { fill: var(--ink); }
.wedge-field--dark svg  { fill: var(--paper); }