/* ===========================
   FONTS
   =========================== */

@font-face {
    font-family: "Fjalla One";
    src: url("/fonts/fjalla-one/FjallaOne-Regular.woff2") format("woff2"),
        url("/fonts/fjalla-one/FjallaOne-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/open-sans/OpenSans-Regular.woff2") format("woff2"),
        url("/fonts/open-sans/OpenSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/open-sans/OpenSans-SemiBold.woff2") format("woff2"),
        url("/fonts/open-sans/OpenSans-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
        url("/fonts/roboto/Roboto-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ===========================
   BASE VARIABLES (MOBILE-FIRST)
   =========================== */

:root {
    /* Typography families */
    --font-heading: "Fjalla One", sans-serif;
    --font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Text colors */
    --text-color-primary: #003934;
    --text-color-emphasis: #AA1717;
    --text-color-footer: #ffffff;

    /* Page color */
    --page-color-primary: #ffffff;

    /* Module colors background */
    --bg-module-white: #ffffff;
    --bg-module-grey: #EDEDED;
    --bg-module-black: #000000;
    --bg-module-light-blue: #e4f2fe;
    --bg-module-gradient-aqua-moderate: linear-gradient(135deg, #e0faff 0%, #b6edf9 50%, #49d3f2 100%);
    --bg-module-gradient-green-moderate: linear-gradient(135deg, #def7e7 0%, #c0eacb 50%, #93d9a5 100%);
    --bg-module-gradient-purple-moderate: linear-gradient(135deg, #e3e9ff 0%, #b7c7ff 50%, #88abf2 100%);
    --bg-module-gradient-red-moderate: linear-gradient(135deg, #fdeeee 0%, #f6caca 50%, #ee8f8f 100%);
    --bg-footer: #000000;
    --bg-linkedin-blue: #0761c1;

    /* CTA colors background */
    --bg-primary-cta: #000000;
    --color-primary-cta-text: #ffffff;
    --color-secondary-cta-text: rgb(255, 255, 255);

    /* Card colors */
    --bg-card-off-white: rgba(255, 255, 255, 0.05);
    --border-card-white: #ffffff;


    /* Spacing */
    --container-gap: 1.5rem;

    --page-margin: 0rem;

    --page-padding: 1rem;
    --card-padding: 1.5rem;
    --module-padding: 3rem;


    /* Font sizes (mobile baseline) */
    --fs-h1: 2.8rem;
    --fs-h2: 2.0rem;
    --fs-h3: 1.6rem;
    --fs-body: 1.6rem;
    --fs-cta: 2.2rem;
    --fs-card-heading: 1.8rem;
    --fs-card-subheading: 2rem;

    /* Line heights - scaling multipliers */
    --lh-tight: 1.15;
    --lh-body: 1.55;

    /* SwiperJS pagination spacing */
    --swiper-pagination-bottom: 0px;

    /* Img sizes */
    --img-logo-header-height: 3rem;
}

/* ===========================
   RESPONSIVE VARIABLE OVERRIDES
   =========================== */

/* XS MOBILE: 320px - 360px */
@media (min-width: 320px) and (max-width: 374px) {
    :root {
        --carousel-card-padding: 1.6rem;
        --module-padding: 1rem;
        --fs-card-heading: 1.6rem;
        --fs-card-subheading: 1.4rem;

    }

}

/* MOBILE: 375px - 767px */
@media (min-width: 375px) and (max-width: 767px) {
    :root {
        /* Spacing */
        --page-margin: 0rem;

        --page-padding: 1rem;
        --card-padding: 0.75rem;
        --carousel-card-padding: 1.6rem;
        --hero-padding: 2rem 0.5rem 1.2rem 0.5rem;
        --module-padding: 0.5rem;
        --header-padding: 1rem 2rem;
        --pagination-padding: 0.4rem;

        /* Font sizes */
        --fs-h1: 4.2rem;
        --fs-h2: 2.8rem;
        --fs-h3: 1.8rem;
        --fs-body: 1.4rem;
        --fs-cta: 2.0rem;
        --fs-card-heading: 1.6rem;
        --fs-card-subheading: 1.5rem;

        --fs-eyebrow: 0.9rem;

        /* Img sizes */
        --img-logo-header-height: 3rem;
    }
}

/* TABLET: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        /* Spacing */
        --page-padding: 1rem 2rem;
        --card-padding: 1rem;
        --carousel-card-padding: 2rem;

        --module-padding: 2rem;
        --header-padding: 1rem 4rem;

        /* Font sizes */
        --fs-h1: 4.2rem;
        --fs-h2: 3.0rem;
        --fs-h3: 2.0rem;
        --fs-body: 1.5rem;
        --fs-cta: 2.2rem;
        --fs-card-heading: 2rem;
        --fs-card-subheading: 1.6rem;

        --fs-eyebrow: 1rem;

        /* Img sizes */
        --img-logo-header-height: 5rem;

        /* SwiperJS pagination spacing */
        --swiper-pagination-bottom: 5px;

    }
}

/* LAPTOP: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    :root {
        /* Spacing */
        --page-padding: 4rem 4rem;
        --card-padding: 1rem;
        --carousel-card-padding: 2.2rem;
        --header-padding: 1rem 6rem;

        /* Font sizes */
        --fs-h1: 5.0rem;
        --fs-h2: 3.8rem;
        --fs-h3: 2.8rem;
        --fs-body: 1.7rem;
        --fs-cta: 2.4rem;
        --fs-card-heading: 2.6rem;
        --fs-card-subheading: 1.8rem;

        --fs-eyebrow: 1.1rem;

        /* SwiperJS pagination spacing */
        --swiper-pagination-bottom: 1px;

        /* Img sizes */
        --img-logo-header-height: 6rem;

    }
}

/* MONITOR: 1440px - 1999px */
@media (min-width: 1440px) and (max-width: 1999px) {
    :root {
        /* Spacing */
        --page-padding: 2rem 6rem;
        --card-padding: 1rem;
        --carousel-card-padding: 2.4rem;
        --header-padding: 1rem 8rem;

        --header-margin: 0rem 50rem 0rem 50rem;
        --footer-margin: 0rem 6rem 0rem 6rem;

        /* Font sizes */
        --fs-h1: 6.2rem;
        --fs-h2: 5.0rem;
        --fs-h3: 4.0rem;
        --fs-body: 1.8rem;
        --fs-cta: 3.0rem;
        --fs-card-heading: 3.2rem;
        --fs-card-subheading: 2rem;
        --fs-eyebrow: 1.3rem;

        /* Img sizes */
        --img-logo-header-height: 7rem;

        /* SwiperJS pagination spacing */
        --swiper-pagination-bottom: 3px;
    }
}

/* XL MONITOR: 2000px+ */
@media (min-width: 2000px) {
    :root {
        /* Spacing */
        --page-padding: 4rem 50rem;
        --card-padding: 1rem;
        --carousel-card-padding: 3rem;
        --header-padding: 1rem 2rem 1rem 2rem;

        --header-margin: 0rem 50rem 0rem 50rem;
        --footer-margin: 0rem 50rem 0rem 50rem;

        /* Font sizes */
        --fs-h1: 6.2rem;
        --fs-h2: 5.0rem;
        --fs-h3: 4.0rem;
        --fs-body: 2.1rem;
        --fs-cta: 3.0rem;
        --fs-card-heading: 4rem;
        --fs-card-subheading: 2.5rem;
        --fs-eyebrow: 2.0rem;

        /* Img sizes */
        --img-logo-header-height: 8.5rem;


    }
}

/* ===========================
   RESET / BASE
   =========================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    /* 1rem = 10px */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--page-color-primary);
    color: var(--text-color-primary);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    overflow-x: hidden;
}

main.default-landing-page {
    flex: 1;
    /* pushes footer down when content is short */
}

/* Links & media */

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

a:hover,
a:focus-visible {
    text-decoration: underline;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ===========================
   TYPOGRAPHY
   =========================== */

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--text-color-primary);
    line-height: var(--lh-tight);
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4,
h5,
h6,
p,
li,
a {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Vertical rhythm */

h1+h2 {
    margin-top: 0.25rem;
}

h1+p,
h2+p,
h3+p {
    margin-top: 0.5rem;
}

p+p {
    margin-top: 0.75rem;
}