/* ==========================================================================
   Layout — container, grid, section rhythm, shared structural helpers
   ========================================================================== */

/* --- Container ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

/* --- Section rhythm ----------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight  { padding-block: clamp(56px, 8vh, 96px); }
.section--muted  { background: var(--bg-muted); }
.section--dark {
  background: var(--bg-dark);
  color: var(--text-invert);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--text-invert); }
.section--dark p  { color: var(--text-invert-soft); }
.section--darker { background: var(--bg-darker); }

/* Soft hairline between adjoining light sections */
.section + .section:not(.section--dark):not(.section--muted)::before {
  content: "";
  position: absolute;
  inset-inline: var(--gutter);
  top: 0;
  height: 1px;
  background: var(--line);
}

/* --- 12-column grid ----------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 32px);
}
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Section header (eyebrow + title + intro) --------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--steel-500);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass-500);
}
.section--dark .eyebrow { color: var(--text-invert-soft); }
.eyebrow--invert { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 16px rgba(6, 24, 46, 0.55); }
.eyebrow--invert::before { background: var(--brass-500); }

.section-head { max-width: 56ch; }
.section-head--wide { max-width: 72ch; }
.section-head .eyebrow { margin-bottom: var(--space-4); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head .lead { margin-top: var(--space-2); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* --- Full-bleed media band ---------------------------------------------- */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-inline: -50vw;
}

/* --- Accessibility helpers ---------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--navy-800);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: var(--fw-medium);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Flow utility (vertical rhythm) ------------------------------------- */
.flow > * + * { margin-top: var(--flow, 1.25em); }