/* Niveau Grotesk Font Family */
@font-face {
    font-family: 'Niveau Grotesk';
    src: url('/fonts/NiveauGrotesk-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Niveau Grotesk';
    src: url('/fonts/NiveauGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Niveau Grotesk';
    src: url('/fonts/NiveauGrotesk-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Niveau Grotesk';
    src: url('/fonts/NiveauGrotesk-Bold-Italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Niveau Grotesk';
    src: url('/fonts/NiveauGrotesk-Black-Italic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Hero / Landing Title */
.fl-xxxl-title {
    font-family: var(--font-secondary);
    font-weight: var(--font-bold);
    font-size: clamp(var(--font-xl), var(--font-xxxl), var(--font-xxxl));
    text-transform:capitalize;
}


.fl-hero-title,
.fl-hero-title-cap {
    font-family: var(--font-secondary);
    font-weight: var(--font-extra-light);
    font-size: clamp(var(--font-xl), var(--font-xxl), var(--font-xxl));
    line-height: var(--lh-tight);
}

.fl-hero-title-cap {
    text-transform: capitalize;
}

.fl-title {
    font-family: var(--font-secondary);
    font-size: var(--font-xl);
    font-weight: var(--font-light);
    text-transform: capitalize;
}

/* Eyebrow / Kicker */
.fl-eyebrow,
.fl-eyebrow-cap {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: var(--font-medium);
    line-height: var(--lh-normal);
    letter-spacing: 0.02em;
    padding-bottom: 32px;
}
.fl-eyebrow-cap {
    text-transform: capitalize;
}

/* Statement / Lede */
.fl-lede {
    font-family: var(--font-secondary);
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    font-weight: var(--font-light);
    line-height: var(--lh-normal);
    color: var(--col-flint);
}

.fl-lede-sm {
    font-family: var(--font-secondary);
    font-size: clamp(1rem, 1.75vw, 2.25rem);
    font-weight: var(--font-light);
    line-height: var(--lh-normal);
    color: var(--col-flint);
}

.fl-std-para {
    font-family: var(--font-primary);
    font-size: var(--font-m);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
}

.fl-headline {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: var(--font-normal);
    line-height: var(--lh-normal);
    color: var(--col-flint);
}


/* Primary family (10) */
/* XS */
.fl-font-xs-l-pf {
    font-family: var(--font-primary);
    font-size: var(--font-xs);
    line-height: var(--lh-normal);
    font-weight: var(--font-light);
    color: var(--col-flint);
}

.fl-font-xs-n-pf {
    font-family: var(--font-primary);
    font-size: var(--font-xs);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

/* S */
.fl-font-s-l-pf {
    font-family: var(--font-primary);
    font-size: var(--font-s);
    line-height: var(--lh-normal);
    font-weight: var(--font-light);
    color: var(--col-flint);
}

.fl-font-s-n-pf {
    font-family: var(--font-primary);
    font-size: var(--font-s);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

/* M (body) */
.fl-font-m-n-pf {
    font-family: var(--font-primary);
    font-size: var(--font-m);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

.fl-font-m-m-pf {
    font-family: var(--font-primary);
    font-size: var(--font-m);
    line-height: var(--lh-normal);
    font-weight: var(--font-medium);
    color: var(--col-flint);
}



/* L (display/subhead) */
.fl-font-l-n-pf {
    font-family: var(--font-primary);
    font-size: var(--font-l);
    line-height: var(--lh-tight);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

.fl-font-l-sb-pf {
    font-family: var(--font-primary);
    font-size: var(--font-l);
    line-height: var(--lh-tight);
    font-weight: var(--font-semi-bold);
    color: var(--col-flint);
}

.fl-font-l-l-pf {
    font-family: var(--font-primary);
    font-size: var(--font-l);
    line-height: var(--lh-normal);
    font-weight: var(--font-light);
    color: var(--col-flint);
}

/* XL (display) */
.fl-font-xl-n-pf {
    font-family: var(--font-primary);
    font-size: var(--font-xl);
    line-height: var(--lh-tight);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

.fl-font-xl-b-pf {
    font-family: var(--font-primary);
    font-size: var(--font-xl);
    line-height: var(--lh-tight);
    font-weight: var(--font-bold);
    color: var(--col-flint);
}

/* Secondary family (10) */
/* XS */
.fl-font-xs-l-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-xs);
    line-height: var(--lh-normal);
    font-weight: var(--font-light);
    color: var(--col-flint);
}

.fl-font-xs-n-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-xs);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

/* S */
.fl-font-s-l-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-s);
    line-height: var(--lh-normal);
    font-weight: var(--font-light);
    color: var(--col-flint);
}

.fl-font-s-n-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-s);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

/* M (body) */
.fl-font-m-n-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-m);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

.fl-font-m-m-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-m);
    line-height: var(--lh-normal);
    font-weight: var(--font-medium);
    color: var(--col-flint);
}

/* L (display/subhead) */
.fl-font-l-n-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-l);
    line-height: var(--lh-tight);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

.fl-font-l-sb-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-l);
    line-height: var(--lh-tight);
    font-weight: var(--font-semi-bold);
    color: var(--col-flint);
}

/* XL (display) */
.fl-font-xl-n-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-xl);
    line-height: var(--lh-tight);
    font-weight: var(--font-normal);
    color: var(--col-flint);
}

.fl-font-xl-b-sf {
    font-family: var(--font-secondary);
    font-size: var(--font-xl);
    line-height: var(--lh-tight);
    font-weight: var(--font-bold);
    color: var(--col-flint);
}

.fl-muted {
    font-family: var(--font-primary);
    font-size: var(--font-s);
    line-height: var(--lh-normal);
    font-weight: var(--font-normal);
    color: var(--col-basalt);
    font-style:italic;
}