/* ============================================================
   02. BASE — fonts, reset, typography, layout primitives
   ============================================================ */

/* ---------- Self-hosted webfonts -------------------------
   Poppins (SIL OFL) matches the reference site's voice.
   Latin subset only: 4 weights, ~31 KB total. No third-party
   request, so no render-blocking round trip to Google.      */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/Poppins-Regular-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/Poppins-Medium-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/Poppins-SemiBold-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/Poppins-Bold-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ============================================================
   Reset
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-700);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Belt-and-braces against horizontal overflow on mobile */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink-900); font-weight: 600; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a  { color: var(--brand-700); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }
address { font-style: normal; }
sub, sup { font-size: 0.72em; line-height: 0; }


/* ============================================================
   Typography scale
   ============================================================ */

.h1, h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 700;
}
.h2, h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 600;
}
.h3, h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: 600;
}
.h4, h4 {
  font-size: var(--fs-h4);
  line-height: 1.45;
  font-weight: 600;
}

/* Lede — the supporting sentence under a heading */
.lede {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--ink-500);
  max-width: 62ch;
}

/* Kicker — the small label above a heading */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-700);
}
.kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--brand-500);
  flex: none;
}
.on-dark .kicker { color: var(--brand-300); }

/* Section index — "01 / Enterprise Scale" */
.band-index {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 0.85rem;
}
.on-dark .band-index { color: var(--brand-300); }

/* Tabular figures keep columns of numbers aligned now that the
   monospace face is gone. */
.mono, .cas, .num, .stat-num, .metric b, .pstat b {
  font-variant-numeric: tabular-nums;
}

/* Text on navy */
.on-dark { color: var(--on-navy-mut); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lede { color: var(--on-navy-mut); }


/* ============================================================
   Layout primitives
   ============================================================ */

.shell {
  width: min(100% - (var(--gut) * 2), var(--measure));
  margin-inline: auto;
}

.band { padding-block: var(--section); }
.band--tight { padding-block: var(--section-tight); }
.band--white { background: var(--surface); }
.band--alt   { background: var(--surface-alt); }
.band--tint  { background: var(--surface-tint); }
.band--navy  { background: var(--navy-900); }

/* Section head — heading left, lede right on wide screens */
.band-head {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2.75rem);
  align-items: end;
  margin-bottom: clamp(2rem, 3.4vw, 3.25rem);
}
@media (min-width: 900px) {
  .band-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .band-head--stack { grid-template-columns: 1fr; }
  .band-head--stack .lede { max-width: 70ch; }
}
.band-head > div { min-width: 0; }

/* Centred variant, for sections that read better symmetrical */
.band-head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.band-head--center .lede { max-width: 68ch; }
.band-head--center .kicker { justify-content: center; }
.band-head--center .band-index { text-align: center; }


/* ============================================================
   Accessibility
   ============================================================ */

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: var(--z-skip);
  background: var(--brand-700);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.75rem 1.35rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--t-med) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.band--navy :focus-visible,
.foot :focus-visible { outline-color: var(--brand-300); }

.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;
}


/* ============================================================
   Motion policy
   ------------------------------------------------------------
   The brief asks for minimal animation. There is no entrance
   choreography anywhere in this build — content is painted in
   its final state, which also means it is fully visible with
   JavaScript disabled or still loading. What remains are short
   state transitions on things the user is actually touching.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   Print
   ============================================================ */

@media print {
  .nav, .nav-drawer, .skip-link, .hero-cta,
  .form, .cat-tools, .toc { display: none !important; }
  body { background: #fff; color: #000; }
  .band--navy, .band--alt, .band--tint, .hero {
    background: #fff !important; color: #000 !important;
  }
  .on-dark h1, .on-dark h2, .on-dark h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}