/* ==========================================================
   LAYERS 1–2 · PAGE STRUCTURE, WIDTHS & SECTION SPACING
   Mobile-first: everything is one column here.
   responsive.css switches grids to multi-column.
   ========================================================== */

/* ---- Containers: full-bleed section backgrounds, centred content ---- */
.container {
  width: 100%;
  max-width: calc(var(--w-lg) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--md { max-width: calc(var(--w-md) + 2 * var(--gutter)); }
.container--sm { max-width: calc(var(--w-sm) + 2 * var(--gutter)); }
.container--xs { max-width: calc(var(--w-xs) + 2 * var(--gutter)); }

/* Fix 4 · one container per section, sized from the reference (tokens.css) */
.container--videos   { max-width: calc(var(--w-videos)   + 2 * var(--gutter)); }
.container--research { max-width: calc(var(--w-research) + 2 * var(--gutter)); }
.container--pillars  { max-width: calc(var(--w-pillars)  + 2 * var(--gutter)); }
.container--factors  { max-width: calc(var(--w-factors)  + 2 * var(--gutter)); }
.container--steps    { max-width: calc(var(--w-steps)    + 2 * var(--gutter)); }
.container--impact   { max-width: calc(var(--w-impact)   + 2 * var(--gutter)); }
.container--roadmap  { max-width: calc(var(--w-roadmap)  + 2 * var(--gutter)); }
.container--journey  { max-width: calc(var(--w-journey)  + 2 * var(--gutter)); }
.container--faq      { max-width: calc(var(--w-faq)      + 2 * var(--gutter)); }

/* Fix 1 · scale content (not backgrounds) with the viewport on desktop.
   --page-scale is 1 on mobile/tablet; see responsive.css for desktop steps. */
.container,
.hero__brand { zoom: var(--page-scale); }

/* ---- Sections ---- */
.section          { padding-block: var(--section-y); }
.section--tight   { padding-block: var(--section-y-tight); }
.section--green   { background: var(--green-800); color: var(--white); }
.section--dark    { background: var(--dark-panel); color: var(--white); }
.section--grey    { background: var(--grey-band); }

/* ---- Vertical rhythm helpers ---- */
.stack    > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-5); }

/* ---- Grids ---- */
.grid            { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.grid--2-always  { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.video-grid      { gap: var(--space-3); }
.steps-grid      { gap: var(--space-7) var(--space-6); }

/* ---- Hero layout ---- */
.hero { background: var(--green-800); color: var(--white); padding-bottom: 0; }
.hero__brand { display: flex; justify-content: center; }  /* badge sits flush with the top edge */
.hero__inner {
  max-width: calc(var(--w-hero) + 2 * var(--gutter));
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
}
.hero__text  { text-align: center; padding-bottom: var(--space-2); }
.hero__media { justify-self: center; width: min(260px, 75%); margin-top: var(--space-2); }  /* mobile: photo under the text, on the bottom edge */
.hero__media img { border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .25); }   /* photo card rising from the bottom edge */

/* ---- Footer layout ---- */
.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: center;
}