/* ==========================================================================
   Base — typography scale, layout primitives, utilities
   ========================================================================== */

/* ----------  Layout  ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

.section { position: relative; padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Alternating full-bleed bands give the page rhythm */
.band-dark {
  background: var(--c-ink);
  color: var(--c-alu-bright);
  position: relative;
  isolation: isolate;
}
.band-dark::before {
  /* faint knurled cap-ridge texture */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--knurl);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}
.band-light { background: var(--c-bone); color: var(--c-text); }
.band-surface { background: var(--c-surface); color: var(--c-text); }

.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--c-alu-bright); }
.band-dark p { color: var(--c-alu); }

/* Skip link */
.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 2000;
  padding: .7rem 1.2rem;
  background: var(--c-brand);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip:focus { top: 0; }

/* ----------  Typography  ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: .94;
  letter-spacing: -.032em;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: -.012em; }

/* One-word italic emphasis inside display headings */
.display em, h1 em, h2 em {
  font-style: italic;
  color: var(--c-brand);
}
.band-dark .display em,
.band-dark h1 em,
.band-dark h2 em { color: var(--c-brand-bright); }

/* Eyebrow label with the signature leading hairline */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--f-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-brass);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.band-light .eyebrow, .band-surface .eyebrow { color: var(--c-brand-deep); }

.lead {
  font-size: clamp(1.075rem, .5vw + 1rem, 1.3rem);
  line-height: 1.62;
  color: var(--c-muted);
  max-width: 62ch;
}
.band-dark .lead { color: var(--c-alu); }

.prose p { max-width: 68ch; margin-bottom: 1.15em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--c-text); }
.band-dark .prose strong { color: var(--c-alu-bright); }

.muted { color: var(--c-muted); }

/* Section head block */
.sec-head { max-width: 68ch; margin-bottom: clamp(2.4rem, 4.5vw, 4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head p { margin-top: 1.1rem; }

/* Gold hairline that draws itself in on reveal */
.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--c-brass), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
  margin-block: 1.75rem;
}
.is-visible .rule, .rule.is-visible { transform: scaleX(1); }

/* Oversized ghost numerals behind process steps */
.ghost-num {
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  line-height: 1;
  font-weight: 500;
  color: currentColor;
  opacity: .1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
}

/* Tabular figures for any spec/stat number */
.tnum { font-variant-numeric: tabular-nums; }

/* ----------  Grid helpers  ---------- */
.grid { display: grid; gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Split layout where the media may bleed past the container edge */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--media-first .split__media { order: -1; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--media-first .split__media { order: 0; }
}
@media (max-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* ----------  Media  ---------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-ink-2);
  box-shadow: var(--sh-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--tall { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media--wide { aspect-ratio: 16 / 10; }

/* Image bleeding past the grid edge for asymmetry */
.bleed-r { margin-right: calc(var(--gut) * -1); }
.bleed-l { margin-left: calc(var(--gut) * -1); }
@media (max-width: 860px) {
  .bleed-r, .bleed-l { margin-inline: 0; }
}

/* ----------  Utilities  ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.hide-desktop { display: none; }

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