/* ==========================================================================
   Layout: containers, section rhythm, grid helpers

   Sitewide breakpoint scale - mobile-first, content-driven (a component only
   gets a query at the tier where its own content needs more room, not every
   tier everywhere):
     base     320-480px  small phones (no query)
     >=481px             large phones
     >=768px             tablets
     >=1024px            small laptops
     >=1280px            desktop
     >=1536px            large desktop
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container-narrow {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px) {
  .container, .container-narrow { padding-inline: var(--space-6); }
}

.section {
  padding-block: var(--space-9);
}
.section--sm { padding-block: var(--space-8); }
.section--lg { padding-block: clamp(5rem, 3rem + 8vw, 10rem); }
.section--alt { background: var(--paper-2); }
.section--dark {
  background: var(--dark);
  color: var(--text-dark);
  position: relative;
  overflow: hidden;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-dark); }
.section--dark p { color: var(--text-dark-2); }
.section--dark .eyebrow { color: var(--amber); }
.section--dark .eyebrow::before { background: currentColor; }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-8);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head h2 { margin-top: var(--space-3); }
.section-head p { margin-top: var(--space-4); font-size: var(--fs-lg); }

.grid {
  display: grid;
  gap: var(--space-5);
}
.grid--2 { grid-template-columns: repeat(1, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 481px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--reverse .split__media { order: 2; }
}

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}