:root {

  --font-text: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fluid-unit: 17;
  --fluid-container: clamp(768px, 100vw, 1920px);

  --navy: #071B3E;
  --navy-deep: #041029;
  --navy-abyss: #030B1C;
  --navy-2: #0C2350;
  --navy-3: #12305F;
  --navy-05: rgba(7, 27, 62, .05);
  --navy-08: rgba(7, 27, 62, .08);
  --navy-11: rgba(7, 27, 62, .11);
  --navy-16: rgba(7, 27, 62, .16);
  --navy-22: rgba(7, 27, 62, .22);
  --navy-40: rgba(7, 27, 62, .40);
  --navy-48: rgba(7, 27, 62, .48);
  --navy-68: rgba(7, 27, 62, .68);
  --navy-72: rgba(7, 27, 62, .72);
  --navy-78: rgba(7, 27, 62, .78);
  --navy-90: rgba(7, 27, 62, .9);

  --amber: #FFBF00;
  --amber-warm: #FFA21A;
  --amber-hot: #FFF1C7;
  --amber-55: rgba(255, 191, 0, .55);
  --amber-24: rgba(255, 191, 0, .24);
  --amber-12: rgba(255, 191, 0, .12);
  --amber-00: rgba(255, 191, 0, 0);

  --slate: #777F98;
  --slate-ink: #5A627A;
  --slate-light: #A3AABF;

  --paper: #F4F5F7;
  --paper-82: rgba(244, 245, 247, .82);
  --paper-62: rgba(244, 245, 247, .62);
  --paper-48: rgba(244, 245, 247, .48);
  --paper-16: rgba(244, 245, 247, .16);
  --paper-14: rgba(244, 245, 247, .14);
  --paper-10: rgba(244, 245, 247, .10);
  --paper-07: rgba(244, 245, 247, .07);
  --paper-00: rgba(244, 245, 247, 0);
  --white: #fff;

  --ink: var(--navy);
  --ink-2: var(--navy-2);
  --ink-3: var(--navy-3);
  --black: var(--navy-deep);
  --ink-05: var(--navy-05);
  --ink-08: var(--navy-08);
  --ink-11: var(--navy-11);
  --ink-16: var(--navy-16);
  --ink-22: var(--navy-22);
  --ink-40: var(--navy-40);
  --ink-48: var(--navy-48);
  --ink-68: var(--navy-68);
  --ink-72: var(--navy-72);
  --ink-78: var(--navy-78);
  --signal: var(--amber);
  --signal-amber: var(--amber-warm);
  --signal-hot: var(--amber-hot);
  --signal-24: var(--amber-24);
  --signal-12: var(--amber-12);

  --island: rgba(4, 16, 41, .82);
  --pill-glass: rgba(7, 27, 62, .9);
  --scrim-nav: rgba(3, 11, 28, .72);

  --logo-front: var(--amber);
  --logo-back: var(--navy);
  --logo-yellow: var(--navy);
  --logo-force: var(--slate);

  --bg: var(--paper);
  --text: var(--navy);
  --text-2: var(--navy-68);
  --text-meta: var(--navy-72);
  --text-4: var(--slate-ink);
  --line: var(--navy-16);
  --card: var(--navy-05);
  --on-dark: var(--paper);
  --on-dark-2: var(--paper-82);
  --on-dark-3: var(--slate-light);
  --line-dark: var(--paper-16);
  --line-dark-soft: var(--paper-07);
  --placeholder: var(--navy-2);

  --fs-4xs: max(.65625em, 10px);
  --fs-3xs: max(.6875em, 10px);
  --fs-2xs: max(.75em, 10px);
  --fs-xs: max(.78125em, 10px);
  --fs-s: max(.875em, 10.5px);
  --fs-sm: .9375em;
  --fs-m: 1em;
  --fs-ml: 1.125em;
  --fs-l: 1.25em;
  --fs-xl: 1.375em;
  --fs-2xl: 1.5em;
  --fs-3xl: 1.75em;
  --fs-4xl: 2em;
  --fs-5xl: 2.25em;
  --fs-6xl: 2.5em;
  --fs-7xl: 2.875em;
  --fs-8xl: 3em;
  --fs-9xl: 3.375em;
  --fs-10xl: 5em;
  --fs-11xl: 6em;
  --fs-12xl: 8.75em;

  --h0: var(--fs-12xl);
  --h1: var(--fs-11xl);
  --h2: var(--fs-8xl);
  --h3: var(--fs-4xl);
  --h4: var(--fs-3xl);
  --h5: var(--fs-2xl);
  --h6: var(--fs-xl);
  --statement: var(--fs-7xl);
  --lead: var(--fs-4xl);

  --lh-90: .9;
  --lh-100: 1;
  --lh-104: 1.04;
  --lh-112: 1.12;
  --lh-120: 1.2;
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;
  --lh-155: 1.55;

  --tr-micro: -.005em;
  --tr-1: -.01em;
  --tr-2: -.02em;
  --tr-3: -.03em;
  --tr-display: -.045em;
  --tr-figure: -.055em;

  --sp-0125: .125em;
  --sp-025: .25em;
  --sp-0375: .375em;
  --sp-05: .5em;
  --sp-0625: .625em;
  --sp-075: .75em;
  --sp-0875: .875em;
  --sp-1: 1em;
  --sp-125: 1.25em;
  --sp-1375: 1.375em;
  --sp-15: 1.5em;
  --sp-175: 1.75em;
  --sp-2: 2em;
  --sp-25: 2.5em;
  --sp-3: 3em;
  --sp-35: 3.5em;
  --sp-4: 4em;
  --sp-45: 4.5em;
  --sp-5: 5em;
  --sp-6: 6em;
  --sp-7: 7em;
  --sp-75: 7.5em;
  --sp-8: 8em;
  --sp-10: 10em;
  --sp-105: 10.5em;
  --sp-12: 12em;
  --sp-1275: 12.75em;
  --sp-14: 14em;

  --page-x: 3em;
  --section-y: 6em;
  --gutter: 1.5em;
  --gap-tight: .5em;
  --container: 1920px;
  --col: calc((100vw - var(--gutter) * 11) / 12);
  --col-3: calc(var(--col) * 3 + var(--gutter) * 2);
  --col-4: calc(var(--col) * 4 + var(--gutter) * 3);
  --col-5: calc(var(--col) * 5 + var(--gutter) * 4);
  --col-6: calc(var(--col) * 6 + var(--gutter) * 5);
  --col-7: calc(var(--col) * 7 + var(--gutter) * 6);
  --col-8: calc(var(--col) * 8 + var(--gutter) * 7);
  --col-10: calc(var(--col) * 10 + var(--gutter) * 9);
  --nav-w: 30em;
  --inset: .5em;

  --r-3xs: .25rem;
  --r-2xs: .375rem;
  --r-xs: .5rem;
  --r-sm: .75rem;
  --r-m: 1rem;
  --r-ml: 1.25rem;
  --r-l: 1.5rem;
  --r-xl: 2rem;
  --r-hero: 20px;
  --r-round: 999px;

  --blur-nav: blur(10px) saturate(130%);
  --blur-bar: blur(18px) saturate(130%);
  --blur-chip: blur(12px);
  --blur-ghost: blur(8px);
  --blur-backdrop: blur(5px);
  --glass: rgba(7, 27, 62, .24);

  --ease: cubic-bezier(.645, .045, .355, 1);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-strong: cubic-bezier(.86, 0, .07, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .24s;
  --t: .45s;
  --t-slow: .6s;

  --scrim-hero: linear-gradient(rgba(3, 11, 28, .42), rgba(3, 11, 28, .06) 32%, rgba(3, 11, 28, .44) 72%, rgba(3, 11, 28, .78));
  --scrim-media: linear-gradient(rgba(4, 16, 41, .62), rgba(4, 16, 41, .24) 44%, rgba(4, 16, 41, .78));
  --scrim-top: linear-gradient(rgba(4, 16, 41, .72) 0%, rgba(4, 16, 41, .28) 52%, rgba(4, 16, 41, 0) 100%);

  --media-fallback:
    radial-gradient(120% 90% at 78% 18%, rgba(255, 162, 26, .20), rgba(255, 162, 26, 0) 55%),
    radial-gradient(90% 70% at 12% 92%, rgba(255, 191, 0, .10), rgba(255, 191, 0, 0) 60%),
    linear-gradient(160deg, #10295A 0%, #071B3E 55%, #030B1C 100%);
}

@media (min-width: 1440px) {
  :root { --fluid-unit: 15; }
}

@media (max-width: 991px) {
  :root { --page-x: 1.25em; }
}

@media (max-width: 767px) {
  :root {
    --fluid-unit: 20;
    --h0: var(--fs-11xl);
    --h1: var(--fs-10xl);
    --statement: var(--fs-6xl);
    --lead: var(--fs-3xl);
    --nav-w: 30em;
  }
}

@media (max-width: 479px) {
  :root {
    --page-x: 1em;
    --h1: var(--fs-9xl);
    --h2: var(--fs-7xl);
    --statement: var(--fs-4xl);
    --lead: var(--fs-3xl);
    --nav-w: 34.5em;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-4xs: 12px;
    --fs-3xs: 12px;
    --fs-2xs: 12px;
    --fs-xs: 12px;
    --fs-s: 12px;
    --fs-sm: 15px;
    --fs-m: 16px;
    --fs-ml: 16px;
    --fs-l: 17px;
    --fs-xl: 19px;
    --fs-2xl: 21px;
    --fs-3xl: 24px;
    --fs-4xl: 28px;
    --fs-5xl: 30px;
    --fs-6xl: 32px;
    --fs-7xl: 36px;
    --fs-8xl: 40px;
    --fs-9xl: 44px;
    --tr-label: .03em;

    --h2: var(--fs-8xl);
    --h3: var(--fs-4xl);
    --h4: var(--fs-3xl);
    --h5: var(--fs-2xl);
    --h6: var(--fs-xl);
    --statement: var(--fs-8xl);
    --lead: var(--fs-3xl);
  }
}

@media (max-width: 479px) {
  :root {
    --h1: clamp(40px, 12vw, 48px);
    --h2: clamp(34px, 10.2vw, 40px);
    --statement: clamp(32px, 9.4vw, 40px);
    --lead: 22px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --fs-4xs: max(.65625em, 12px);
    --fs-3xs: max(.6875em, 12px);
    --fs-2xs: max(.75em, 12px);
    --fs-xs: max(.78125em, 12px);
    --fs-s: max(.875em, 12px);
    --fs-sm: max(.9375em, 14px);
    --fs-m: max(1em, 16px);
    --fs-ml: max(1.125em, 16px);
    --fs-l: max(1.25em, 17px);
    --fs-xl: max(1.375em, 18px);
    --fs-2xl: max(1.5em, 20px);
    --fs-3xl: max(1.75em, 21px);
    --fs-4xl: max(2em, 24px);
    --fs-7xl: max(2.875em, 30px);
    --fs-8xl: max(3em, 34px);
    --tr-label: .02em;
  }
}
