/* ============================================================
   LHAFIX — Base / reset / element defaults / layout primitives
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"] { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 900; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p  { max-width: 68ch; text-wrap: pretty; }

strong, b { font-weight: 700; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* skip link */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 1000;
  background: #fff; color: var(--ink);
  padding: .7rem 1.1rem; border-radius: var(--r-sm);
  box-shadow: var(--sh-md); font-weight: 700;
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- Layout primitives ---- */
.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); position: relative; }
.section--alt  { background: var(--bg-alt); }
.section--tint { background: var(--blue-soft); }
.section--dark {
  background-color: var(--navy-1);
  background-image: var(--hero-grad);
  color: var(--dark-text);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* ---- Eyebrow — the "— LABEL —" motif lifted from the logo ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  opacity: .5;
}
.eyebrow--solo::before { display: none; }
.section--dark .eyebrow { color: var(--blue-bright); }

/* ---- Section heading block ---- */
.s-head { max-width: 58ch; }
.s-head > h2 { margin-top: 1.1rem; }
.s-head > p  {
  margin-top: 1.1rem;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.6;
}
.section--dark .s-head > p { color: var(--dark-text-muted); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head--center .eyebrow { justify-content: center; }
.s-head--center > p { margin-inline: auto; }

/* two-tone heading accent — echoes the LHA·FIX silver/blue split */
.hl { color: var(--accent); }
.section--dark .hl { color: var(--blue-bright); }

/* ---- Lenis smooth-scroll (required helper styles) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- Reveal: pre-animation state (only when JS is active) ---- */
.js [data-reveal],
.js [data-reveal-child] { opacity: 0; }

/* ---- Word-by-word heading reveal ----
   main.js splits the text of any [data-word-reveal] element into
   one <span class="word-reveal__w"> per word at runtime, then fades
   them in with a stagger. The heading stays visibility:hidden (not
   opacity — so it never takes up the wrong space) until that split
   has happened, avoiding a flash of the un-split heading. */
.js [data-word-reveal] { visibility: hidden; }
.word-reveal__w { display: inline-block; }

/* ---- Page transitions (progressive enhancement, JS-driven) ----
   `pt-entering` is set by an inline head script, before paint, only
   when this page was navigated to via an internal link click (see
   main.js). Everyone else (first visit, refresh, back/forward,
   external referral, no-JS) never gets these classes and the page
   just renders normally with no delay. */
html.pt-entering body { opacity: 0; transform: translateY(7px); }
body { transition: opacity .26s var(--ease), transform .26s var(--ease); }
/* IMPORTANT: this must be the literal keyword `none`, not translateY(0).
   Any real transform FUNCTION on <body> — even a zero-value one — turns
   it into a CSS "containing block" for every position:fixed descendant,
   which includes .nav. That silently breaks the fixed navbar: it starts
   scrolling away with the page instead of staying pinned to the
   viewport, on every page reached via an in-site link click (i.e. most
   of the site, for a real visitor). `none` does not have this effect. */
html.pt-entering.pt-run body { opacity: 1; transform: none; }

body.pt-leaving {
  opacity: 0 !important;
  transform: translateY(-7px);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal-child] { opacity: 1 !important; }
  html.pt-entering body { opacity: 1 !important; transform: none !important; }
  body.pt-leaving { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Utilities ---- */
.u-center     { text-align: center; }
.u-mt-1 { margin-top: .5rem; }  .u-mt-2 { margin-top: 1rem; }
.u-mt-3 { margin-top: 1.5rem; } .u-mt-4 { margin-top: 2rem; }
.u-mt-5 { margin-top: 3rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}