/* ==========================================================================
   TeamTrek V3 — Reset, base type, layout primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;        /* JS owns smooth scrolling */
  scroll-padding-top: var(--scroll-offset);
  /* `clip`, never `hidden`: hidden turns the element into a scroll container
     and position:sticky descendants stop pinning. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: 1.6;
  color: var(--neutral-800);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--primary-200); color: var(--primary-900); }

:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--primary-900); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
  font-weight: var(--weight-semi);
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   Type scale — the single hierarchy used by every section
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: var(--weight-bold); letter-spacing: -.02em; color: var(--neutral-900); }

.display   { font-size: var(--text-display);   line-height: 1.03; letter-spacing: -.045em; font-weight: var(--weight-bold); }
.display-2 { font-size: var(--text-display-2); line-height: 1.05; letter-spacing: -.04em;  font-weight: var(--weight-bold); }
.h2 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -.035em; font-weight: var(--weight-bold); }
.h3 { font-size: var(--text-h3); line-height: 1.2;  letter-spacing: -.025em; font-weight: var(--weight-bold); }
.h4 { font-size: var(--text-h4); line-height: 1.3;  letter-spacing: -.015em; font-weight: var(--weight-semi); }

.body-lg { font-size: var(--text-body-lg); line-height: 1.62; }
.body-sm { font-size: var(--text-sm); line-height: 1.6; }
.lead  { color: var(--neutral-600); }
.muted { color: var(--neutral-500); }
.dim   { color: var(--neutral-500); }
.max-copy { max-width: 62ch; }
.tnum { font-variant-numeric: tabular-nums; }

/* Eyebrow — one label style sitewide: teal, uppercase, tracked */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; line-height: 1rem;
  font-weight: var(--weight-semi);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--primary-700);
}
.eyebrow--on-dark { color: var(--primary-300); }
.eyebrow--muted { color: var(--neutral-500); }
.eyebrow__num { color: var(--neutral-400); font-variant-numeric: tabular-nums; }
.eyebrow--on-dark .eyebrow__num { color: var(--neutral-600); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: 1320px; }

.section { padding-block: var(--section-y); position: relative; }
.section--lg { padding-block: var(--section-y-lg); }
.section--white { background: #fff; }
.section--n50   { background: var(--neutral-50); }
.section--n100  { background: var(--neutral-100); }
.section--p50   { background: var(--primary-50); }
.section--dark  { background: var(--ink-900); color: #fff; }
.section--rule-t { border-top: 1px solid var(--neutral-200); }
.section--rule-b { border-bottom: 1px solid var(--neutral-200); }

.section__head { max-width: 46rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { margin-top: 1rem; }
.section__copy { margin-top: 1.125rem; color: var(--neutral-600); }
.section__split-head {
  display: grid; gap: 1.5rem; align-items: end;
}

/* Grid/flex children default to min-width:auto, which lets nowrap content
   force a track wider than the viewport. Everything laid out in a track
   opts back into shrinking. */
.section__split-head > *,
.grid-safe > * { min-width: 0; }

/* Icons */
.icon {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--18 { width: 18px; height: 18px; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
.icon--bold { stroke-width: 2.25; }
.icon--fill { fill: currentColor; stroke: none; }

/* Fractal-noise texture over dark bands */
.noise { position: relative; }
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}