.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section{ padding-block: var(--section-pad); position: relative; }
.section-tight{ padding-block: calc(var(--section-pad) * .6); }

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

.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-xs{ gap: var(--space-xs); }
.gap-sm{ gap: var(--space-sm); }
.gap-md{ gap: var(--space-md); }
.gap-lg{ gap: var(--space-lg); }
.wrap{ flex-wrap: wrap; }
.justify-between{ justify-content: space-between; }
.justify-center{ justify-content: center; }
.items-center{ align-items: center; }

.grid{ display: grid; gap: var(--space-lg); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-12{ grid-template-columns: repeat(12, 1fr); }

/* minmax(0, ...) so a column can shrink below its widest content; a bare 1fr stretched the contact page past a 360px phone */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: minmax(0, 1fr); }
}

.text-center{ text-align: center; }
.text-muted{ color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-primary-brand{ color: var(--text-accent); }
.text-accent{ color: var(--accent); }
.balance{ text-wrap: balance; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.eyebrow::before{
  content:'';
  width: 22px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--orange-300));
  border-radius: 2px;
}

.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-sm{ margin-top: var(--space-sm); }
.mt-md{ margin-top: var(--space-md); }
.mt-lg{ margin-top: var(--space-lg); }
.mt-xl{ margin-top: var(--space-xl); }
.mb-sm{ margin-bottom: var(--space-sm); }
.mb-md{ margin-bottom: var(--space-md); }
.mb-lg{ margin-bottom: var(--space-lg); }
.mb-xl{ margin-bottom: var(--space-xl); }

.max-w-sm{ max-width: 42ch; }
.max-w-md{ max-width: 60ch; }
.max-w-lg{ max-width: 78ch; }
.mx-auto{ margin-inline:auto; }

.notch-tr{ clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.notch-bl{ clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); }

/* Two-column span inside .grid-3; on phones the grid is one column, so the span must go too
   (an inline span there created a phantom second column and squeezed the sidebar). */
.span-2{ grid-column: span 2; }
@media (max-width: 640px){ .span-2{ grid-column: auto; } }