/* ==========================================================================
   LAYOUT  ·  Container, section rhythm, shared heads, utilities
   ========================================================================== */

.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--space-section);
}

/* --- Section head --------------------------------------------------------
   Eyebrow, heading, then the signature underline: the brand's "underline
   what matters" gesture, drawn in on scroll.
   ----------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-end: var(--space-xl);
}

/* Mobile: short UI text and headings are centred. */
@media (max-width: 47.99rem) {
  .section-head {
    align-items: center;
    text-align: center;
  }
}

/* --- Icons --------------------------------------------------------------- */
.icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex: none;
  stroke: currentColor;
}

.icon--xs {
  inline-size: 1rem;
  block-size: 1rem;
}

/* The filled copper full stop inside each line icon. */
.icon .dot,
.sprite .dot {
  fill: var(--dot, var(--copper));
  stroke: none;
}

.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

/* --- Accessibility helpers ---------------------------------------------- */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--gutter);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--copper-strong);
  color: #fff;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  inset-block-start: var(--space-sm);
}

/* --- Reveal primitive -----------------------------------------------------
   Hidden only while `.js-motion` is on <html>, which motion.js removes if
   GSAP is missing or reduced motion is requested. No-JS shows everything.
   ----------------------------------------------------------------------- */
.js-motion [data-reveal]:not(.is-in),
.js-motion [data-stagger] > *:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}