@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-var.woff2") format("woff2-variations"),
       url("../fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --color-primary:        #15375A;
  --color-primary-deep:   #003459;
  --color-secondary:      #112232;
  --color-secondary-dark: #0F1E2C;
  --color-accent:         #E7B66A;
  --color-accent-deep:    #D48828;

  --color-background:     #F2F1EC;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #FAFAF8;

  --color-text:           #141414;
  --color-heading:        #252525;
  --color-slate:          #58626C;
  --color-muted:          #6A6A6A;
  --color-border:         #E3E1DA;
  --color-border-strong:  #112232;

  --color-on-dark:        #F2F1EC;
  --color-on-dark-muted:  rgba(242, 241, 236, .74);

  --color-focus:          #E7B66A;

  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.19vw, 1.10rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.32vw, 1.32rem);
  --step-2:  clamp(1.32rem, 1.18rem + 0.60vw, 1.72rem);
  --step-3:  clamp(1.60rem, 1.32rem + 1.18vw, 2.40rem);
  --step-4:  clamp(1.95rem, 1.45rem + 2.10vw, 3.30rem);
  --step-5:  clamp(2.35rem, 1.40rem + 4.05vw, 4.60rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-base:  1.62;

  --tracking-display: -0.028em;
  --tracking-eyebrow:  0.20em;
  --tracking-button:   0.10em;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.25rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --section-y: clamp(3.75rem, 2.2rem + 6.4vw, 8.25rem);

  --container:      1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.15rem, 0.55rem + 2.6vw, 3rem);

  --header-topbar-h: 38px;
  --header-nav-h:    86px;
  --header-h: calc(var(--header-topbar-h) + var(--header-nav-h));
  --logo-block-w: 288px;

  --radius-xs: 3px;
  --radius-s:  6px;
  --radius-m:  10px;
  --radius-l:  18px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(15, 30, 44, .06), 0 2px 8px rgba(15, 30, 44, .05);

  --shadow-card: 0 3px 11px rgba(20, 20, 20, .085), 0 1px 3px rgba(20, 20, 20, .05);
  --shadow-m: 0 8px 22px rgba(15, 30, 44, .09), 0 2px 6px rgba(15, 30, 44, .05);
  --shadow-l: 0 26px 60px rgba(15, 30, 44, .17), 0 6px 16px rgba(15, 30, 44, .07);

  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
}

@media (max-width: 900px) {
  :root {
    --header-topbar-h: 0px;
    --header-nav-h: 68px;
    --logo-block-w: auto;
  }
}