@font-face {
  font-family: 'Fixel';
  src: url('../fonts/FixelVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fixel';
  src: url('../fonts/FixelVariableItalic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --beige-darker: #F8F4EC;
  --beige-light:  #FDFBF7;
  --lavender:     #988BC1;
  --indigo:       #4A4377;

  --text-white:           #FFFFFF;
  --text-violet:          #5A5987;
  --text-light-lavender:  #C1C1DB;

  --accent-secondary:  #F9A858;
  --accent-primary-1:  #F9674E;
  --accent-primary-2:  #F78C5E;
  --accent-live:       #00c43c;

  --gradient-full: linear-gradient(180deg,
  #F9674E 0%, #F78C5E 25%, #F9A858 50%, #988BC1 75%, #4A4377 100%);
  --gradient-black-white: radial-gradient(circle, #000000 0%, #FFFFFF 100%);

  --fs-h6: 1.25rem;
  --fs-nav: 0.875rem;  --ls-nav: 0.2em;
  --fs-btn1: 1rem; --fs-btn2: 1.125rem;
  --fs-logo: 1.875rem; --ls-logo: 0.2em;
}

:root {
  --gap-h2: clamp(1.75rem, calc(1.41912rem + 1.4118vw), 1.875rem);
  --fs-h2: clamp(1.9375rem, calc(1.33088rem + 2.5882vw), 2.625rem);
  --fs-h3: clamp(1.75rem, calc(1.63971rem + 0.4706vw), 1.875rem);
  --fs-h4: clamp(1.25rem, calc(1.17347rem + 0.3265vw), 1.5rem);
  --fs-body: 1rem;
  --gap-para: 1.5rem;

  --fs-hero-h1:       clamp(2.375rem, calc(1.98875rem + 1.6471vw), 2.8125rem);
  --lh-hero-h1:       clamp(2.86875rem, calc(2.565625rem + 1.2941vw), 3.2125rem);
  --fs-hero-preamble: clamp(0.9375rem, calc(0.882375rem + 0.2353vw), 1rem);
  --lh-hero-preamble: clamp(1.40625rem, calc(1.3235rem + 0.3529vw), 1.5rem);
  --fs-hero-kicker:   var(--fs-hero-preamble);
  --lh-hero-kicker:   var(--lh-hero-preamble);
  --fs-hero-text:     clamp(0.875rem, calc(0.7646875rem + 0.4706vw), 1rem);
  --lh-hero-text:     clamp(1.3125rem, calc(1.14705rem + 0.7059vw), 1.5rem);

  --hero-pad-top:    clamp(2.5rem, calc(0.294375rem + 9.4118vw), 5rem);
  --hero-gap-title:  clamp(2.1875rem, calc(1.911875rem + 1.1765vw), 2.5rem);
  --hero-gap-kicker: var(--hero-gap-title);
  --hero-gap-text:   clamp(0rem, calc(-1.32375rem + 5.6471vw), 1.5rem);
  --hero-gap-btn:    clamp(1.6875rem, calc(0.970625rem + 3.0588vw), 2.5rem);
  --hero-btn-h:      clamp(2.5rem, calc(1.948125rem + 2.3529vw), 3.125rem);
  --hero-btn-gap:    clamp(0.625rem, calc(2.271875rem - 3.2941vw), 1.5rem);
}

@media (min-width: 800px) {
  :root {
    --gap-h2: 1.875rem;
    --fs-h2: 3rem;
    --fs-h3: 1.875rem;
    --fs-body: 1rem;

    --fs-hero-h1: clamp(2.875rem, calc(2.1625rem + 1.044vw), 3.125rem);
    --lh-hero-h1: clamp(3.1875rem, calc(3.00625rem + 0.334vw), 3.3125rem);
    --fs-hero-preamble: 1rem;  --lh-hero-preamble: 1.5rem;
    --fs-hero-text: 1rem;      --lh-hero-text: 1.5rem;
    --hero-pad-top: 5rem;  --hero-gap-title: 2.5rem;
    --hero-gap-text: var(--lh-hero-text);
    --hero-gap-btn: 2.5rem;  --hero-btn-h: 3.125rem;  --hero-btn-gap: 0.625rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --gap-h2: clamp(1.875rem, calc(-3.125rem + 6.25vw), 3.125rem);
    --fs-h2: clamp(3rem, calc(1.5rem + 1.875vw), 3.375rem);
    --fs-h3: clamp(2.125rem, calc(1.625rem + 0.625vw), 2.25rem);
    --gap-para: clamp(1.5rem, calc(0.75rem + 0.9375vw), 1.6875rem);

    --fs-hero-h1:       clamp(3.125rem, calc(-1.125rem + 5.3125vw), 4.1875rem);
    --lh-hero-h1:       clamp(3.3125rem, calc(-1.1875rem + 5.625vw), 4.4375rem);
    --fs-hero-preamble: clamp(1rem, calc(0.5rem + 0.625vw), 1.125rem);
    --lh-hero-preamble: clamp(1.5rem, calc(0.75rem + 0.9375vw), 1.6875rem);
    --fs-hero-kicker:   clamp(1rem, 1.25vw, 1.25rem);
    --lh-hero-kicker:   clamp(1.5rem, 1.875vw, 1.875rem);
    --fs-hero-text:     var(--fs-hero-kicker);
    --lh-hero-text:     var(--lh-hero-kicker);
    --hero-gap-btn:     clamp(2.5rem, 3.125vw, 3.125rem);
  }
}

@media (min-width: 1600px) {
  :root {
    --gap-h2: 3.125rem;
    --fs-h2: 3.375rem;
    --fs-h3: 2.25rem;
    --fs-body: 1.125rem;

    --fs-hero-h1: 4.1875rem; --lh-hero-h1: 4.4375rem;
    --fs-hero-preamble: 1.125rem; --lh-hero-preamble: 1.6875rem;
    --fs-hero-kicker: 1.25rem; --lh-hero-kicker: 1.875rem;
    --fs-hero-text: 1.25rem;  --lh-hero-text: 1.875rem;
    --hero-gap-btn: 3.125rem;
  }
}

h1 { font-weight: 700; line-height: 1.06; }

h2 {
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: .02em;
  margin-bottom: var(--gap-h2);
}

h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }

h4 { font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; }

h6 { font-weight: 700; font-size: var(--fs-h6); line-height: 1.3; }

p, li {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.section-intro p:not(:last-child) { margin-bottom: var(--gap-para); }

em { font-style: italic; font-weight: 700; }

.accent1 { font-style: italic; color: var(--lavender); }
.accent2 { font-style: italic; }

.t-small { font-size: var(--fs-small); line-height: 1.45; }

.t-nav {
  font-family: 'Fixel', sans-serif; font-weight: 600;
  font-stretch: 100%; font-variation-settings: 'wdth' 100;
  font-size: var(--fs-nav); line-height: 1;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.t-btn1-caps { font-family: 'Fixel', sans-serif; font-weight: 600; font-stretch: 100%; font-variation-settings: 'wdth' 100; font-size: var(--fs-btn1); line-height: 1; text-transform: uppercase; }
.t-btn1      { font-family: 'Fixel', sans-serif; font-weight: 500; font-stretch: 100%; font-variation-settings: 'wdth' 100; font-size: var(--fs-btn1); line-height: 1; text-transform: uppercase; }
.t-btn2-caps { font-family: 'Fixel', sans-serif; font-weight: 600; font-stretch: 100%; font-variation-settings: 'wdth' 100; font-size: var(--fs-btn2); line-height: 1; text-transform: uppercase; }
.t-btn-secondary { font-family: 'Fixel', sans-serif; font-weight: 500; font-stretch: 100%; font-variation-settings: 'wdth' 100; font-size: var(--fs-btn1); line-height: 1; }
.t-advantage { font-family: 'Fixel', sans-serif; font-weight: 600; font-stretch: 100%; font-variation-settings: 'wdth' 100; font-size: var(--fs-btn2); line-height: 1; }
.t-logo {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: var(--fs-logo); line-height: 1; letter-spacing: var(--ls-logo);
}