/* ==========================================================================
   base.css
   Design tokens, reset, typography and buttons. Loaded first on every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* This is a brand site: it commits to one light visual world in both OS
     themes, so pin the scheme and keep form controls / scrollbars consistent. */
  color-scheme: light;

  /* Brand — sampled from the supplied logo SVGs and Figma fills */
  --navy: #0a3161;
  --navy-deep: #082647;
  --crimson: #b31942;
  --crimson-bright: #e8125c;
  --ink: #0c1520;

  /* Surfaces.
     --bg-hero is matched EXACTLY to the flat backdrop baked into
     assets/img/gradient.svg (#f2f2f2). That match is load-bearing: it lets the
     gradient artwork be cropped, moved or rotated by the parallax without ever
     showing a rectangle edge, because everything outside the pink is the same
     colour as the hero itself. */
  --bg: #f5f5f5;
  --bg-hero: #f2f2f2;
  --bg-strip: #efefef;
  --white: #fff;

  /* Text */
  --muted: rgba(12, 21, 32, 0.7);
  --soft: rgba(12, 21, 32, 0.42);
  --ghost: rgba(12, 21, 32, 0.07);
  --line: rgba(12, 21, 32, 0.12);

  /* On dark */
  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-soft: rgba(255, 255, 255, 0.5);
  --on-dark-line: rgba(255, 255, 255, 0.18);

  /* Layout */
  --gutter: clamp(20px, 6vw, 120px);
  --content: 1440px;
  --section-y: clamp(64px, 7.4vw, 132px);
  --radius-card: 20px;
  --radius-btn: 18px;
  --radius-media: 18px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 88px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 2.05;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, .display {
  font-family: 'Kumbh Sans', system-ui, sans-serif;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
}
.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;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
/* Figma: Kumbh Sans 400 / 65 / lh 105 (sub-page H1). Home H1 runs larger. */
.display {
  font-size: clamp(34px, 4.9vw, 82px);
  line-height: 1.13;
  text-transform: uppercase;
}
.display--sm { font-size: clamp(32px, 4.1vw, 65px); }

/* Figma: Kumbh Sans 400 / 50 / lh 72 */
.h2 {
  font-size: clamp(27px, 2.95vw, 50px);
  line-height: 1.3;
}
.h3 {
  font-size: clamp(19px, 1.35vw, 25px);
  line-height: 1.38;
  font-weight: 500;
}
.h4 {
  font-size: clamp(18px, 1.15vw, 22px);
  line-height: 1.45;
  font-weight: 500;
}

/* Two-tone headline treatment used throughout the Figma file:
   the trailing phrase drops to a soft grey. */
.h-soft { color: var(--soft); }
.h-crimson { color: var(--crimson); }

/* Figma: Poppins 400 / 18 / lh 39 */
.body {
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 2.05;
  color: var(--muted);
}

/* Figma: Poppins 400 / 21 / lh 39, ink @ 70% */
.lead {
  font-size: clamp(16px, 1.2vw, 21px);
  line-height: 1.86;
  color: var(--muted);
}

.small {
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.9;
  color: var(--muted);
}

.measure    { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

/* Eyebrow — crimson rounded square + label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Kumbh Sans', sans-serif;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--crimson);
  flex: none;
}
.section--navy .eyebrow,
.section--dark .eyebrow { color: #fff; }

/* Uppercase kicker used under the sub-page H1 */
.kicker {
  font-size: clamp(14px, 1.15vw, 21px);
  line-height: 1.86;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sec-head { margin-bottom: clamp(34px, 3.6vw, 60px); }
.sec-head--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sec-head--center .eyebrow { justify-content: center; }
.sec-head > * + * { margin-top: 20px; }

.center-x { display: flex; justify-content: center; }
.mt-40 { margin-top: clamp(28px, 3vw, 44px); }
.mt-28 { margin-top: 28px; }

/* --------------------------------------------------------------------------
   5. Buttons — Figma: radius 18, padding 17/24, height 54
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: 'Kumbh Sans', sans-serif;
  font-size: clamp(14px, 0.95vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--navy    { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #0d3f7d; box-shadow: 0 12px 28px rgba(10, 49, 97, 0.25); }

.btn--crimson { background: var(--crimson); color: #fff; }
.btn--crimson:hover { background: #cd1d4d; box-shadow: 0 12px 28px rgba(179, 25, 66, 0.28); }

.btn--ghost {
  background: transparent;
  border-color: rgba(12, 21, 32, 0.28);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(12, 21, 32, 0.04); }

.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }

.btn--outline-light {
  background: transparent;
  border-color: var(--on-dark-line);
  color: #fff;
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Small pill used inside cards */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(10, 49, 97, 0.4);
  border-radius: 14px;
  font-family: 'Kumbh Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.pill:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.card--navy .pill { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.card--navy .pill:hover { background: #fff; color: var(--navy); border-color: #fff; }

.pill--crimson {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
}
.pill--crimson:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Arrow that nudges on hover */
.btn .arrow,
.pill .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow,
.pill:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   20. Scroll animation base states
   The JS sets the animated values; these are the "from" states so the page
   never flashes un-styled if a trigger has not been created yet.
   -------------------------------------------------------------------------- */
/* No will-change here on purpose: GSAP promotes each element while it is
   actually tweening and releases it afterwards. Hinting all ~16 animated
   elements up front just pinned that many layers for the life of the page. */

.js [data-anim='rise'],
.js [data-anim='stagger'] > * { opacity: 0; }

/* [data-anim="lines"] is revealed with a clip wipe on the heading itself, so
   there are no injected wrappers and the browser keeps ownership of wrapping. */

/* If JS never boots, show everything. */
.no-js [data-anim] { opacity: 1 !important; transform: none !important; }

/* --------------------------------------------------------------------------
   22. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .progress, .team__nav { display: none !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body { font-size: 16px; }
}

@media (max-width: 620px) {
  /* Keep paired CTAs on one line — stacked full-width buttons ate a whole
     screenful in the hero. They share the row and shrink to fit. */
  .btn-row {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .btn-row > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
    font-size: 13px;
    min-height: 50px;
  }
  /* A lone button should not stretch across the full width. */
  .btn-row > .btn:only-child { flex: 0 1 auto; }
}