/* Layout primitives + the repeating section rhythm. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 90px); }
.section--alt { background: var(--bg-2); }
/* The CTA follows an already-padded section — drop its top padding so the gap
   between them is single, not doubled. */
.cta-section { padding-top: 0; }

/* CTA banner — shared across all pages. */
.cta-banner { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.cta-banner .bg { position: absolute; inset: 0; z-index: -2; }
.cta-banner .bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) brightness(0.6); }
.cta-banner .bg::after { content: ""; position: absolute; inset: 0; background: var(--overlay); }
.cta-banner .inner { padding: clamp(48px, 8vw, 110px) clamp(24px, 5vw, 80px); text-align: center; }
.cta-banner h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-banner p { color: rgba(255,255,255,0.82); max-width: 48ch; margin: 0.8em auto 32px; }
.cta-banner .btn-primary { background: var(--accent); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 22px; }
.section-head h2 { margin-bottom: 0.4em; }
.section-head .lede { margin-top: 0.6em; }

.section-head.split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.section-head.split > div { max-width: 640px; }

.divider { height: 1px; background: var(--line); border: 0; }
.gold-rule { width: 56px; height: 2px; background: var(--accent); border: 0; }

.grid { display: grid; gap: clamp(20px, 2.5vw, 36px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Scroll-reveal: hidden until JS adds .is-visible. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}