@font-face {
    font-family: Outfit;
    src: url('../font/Outfit-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

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

/* || ----------------------------- SITE VARS */

:root {
    /* APP */
    --col-bg-app-bright: #fff;
    --col-bg-app-dark: #1b1f31;
    --col-logo-dark: #484b59;
    --col-logo-bright: #fff;
    --font-questrial: 'Outfit', 'Arial';
    --font-outfit: 'Outfit', 'Arial';
    --font-sourcecode: 'SourceCode', 'Arial';

    /* Font size */
    --font-size-xs: 0.75rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2.3rem;
    --font-size-xxxl: 4rem;
    --font-size-xxxxl: 8rem;

    /* Font spacing */
    --font-spacing-p: 0.05rem;

    /* Font colours */
    --col-ci-green-primary: #56da98;
    --col-ci-green-secondary: #008463;
    --col-font-main-black: #1a221b;
    --col-font-main-blue: #2f44ba;
    --col-font-main-white: #f6f6f6;
    --col-font-main-navigation-over: #00ae83;
    --col-font-main-navigation-active: #fff;
    --col-font-main-navigation-static: #1a221b;
    --col-font-highlight: #3b4450;
    --col-font-gray: #b8b8b8;
    --col-font-link-static: var(--col-ci-green-secondary);

    /* Background colours */
    --col-bg-main-navigation-static: #f0f0f0;
    --col-bg-main-navigation-active: var(--col-ci-green-secondary);
    --col-bg-topbar: #f6f6f6e2;
    --col-bg-burgermenu-static: #fff;
    --col-bg-contentbtn-static: var(--col-ci-green-secondary);
    --col-bg-contentbtn-active: var(--col-ci-green-secondary);
    --col-bg-contentbtn-white: #fafafa;
    --col-bg-mediafiles: #fafafa;
    --col-bg-trans-white: #fafafade;
    --col-bg-procent-card: #9275e8;
    --col-bg-slider-card: #dcdcdc;
    --col-bg-feature-listing: #f8f8f8;
    --col-bg-videoslider-content: #f8f8f8;
    --col-bg-cta-teaser-blue: #5b3eb2;
    --col-bg-cta-fs-blue: #5b3eb2;
    --col-bg-white: #fff;
    --col-bg-footer: #f5f5f5;
    --col-bg-gray: #ccc;
    --col-bg-image-white: #ffffffa3;
    --col-bg-image-gray: #f1f1f1;
    --col-bg-png-images: #eff0f3;
    --col-bg-flyout: #fdffe0;
    --col-bg-card-text: #eeeeeec1;
    --col-bg-card-info: #f8f8f8;
    --col-bg-line-dashed: #dadada;
    --col-content-brightness: #ffffffc9;
    --col-bg-filter-tab: #fff;
    --col-bg-language-navigation: #1d4846;
    --col-bg-green-bright: #a7fad1;
    --col-bg-green-dark: #1d4846;
    --col-bg-green-footnote: #577666;

    /* Icon colours */
    --col-icon-burgermenu-close: var(--col-font-main-black);
    --col-icon-slider-arrow: #2f44ba;
    --col-icon-feature-logos: #b5b5b5;

    /* PillTag colours */
    --col-pilltag-relief-bg: #a6ffc2;
    --col-pilltag-scructure-bg: #ffd1a6;
    --col-pilltag-security-bg: #a6b5ff;
    --col-pilltag-neutral-bg: #fff;

    /* Line colours */
    --col-outline-gray-bright: #c9c9c9;
    --col-bg-divider: #c9c9c9;

    /* Border radius */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 1.5rem;
    --border-radius-xl: 10rem;
    --border-radius-xxl: 20rem;
    --border-radius-round: 9999px;

    /* Border colours */
    --col-bg-border-gray: #bebebe;

    /* IMG colours */
    --col-img-brightness: #0000007d;

    /* Padding */
    --maincontainer-horizontal-padding-desktop: 1.5rem;
    --maincontainer-horizontal-padding-mobile: 2rem;
    --maincontainer-vertical-padding-desktop: 15rem;
    --maincontainer-vertical-padding-mobile: 8rem;
    --btn-main-padding-text: 1.25rem;
    --btn-main-padding-item: 0.5rem;
    --content-elements-padding: 2rem;

    /* Sizes */
    --top-bar-height-desktop: 6rem;
    --top-bar-height-mobile: 5rem;
    --top-bar-width-desktop: calc(100% - var(--maincontainer-horizontal-padding-desktop));
    --top-bar-pos-left-desktop: 0.7rem;
    --top-bar-pos-left-mobile: 0.7rem;
}

/* || ----------------------------- OVERALL SETTINGS */

html {
    overflow-y: scroll;
}

html,
body {
    font-size: 100%;
    margin: 0;
    overscroll-behavior: none;
    scroll-behavior: auto !important;
    -ms-overflow-style: none;
}

@media (width > 300px) {
    html {
        font-size: 16px;
    }
}

@media (width > 1920px) {
    html {
        font-size: 16px;
    }
}

@media (width > 2559px) {
    html {
        font-size: 19px;
    }
}

@media (width > 3840px) {
    html {
        font-size: 28px;
    }
}

body {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--col-bg-app-bright);
}

#smooth-wrapper {
    height: 100%;
    overflow: hidden;
    background-color: var(--col-bg-app-bright);
}

#smooth-content {
    min-height: 100%;
    will-change: transform;
}

button {
    all: unset;
    cursor: pointer;
}

.styled-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
    padding-right: 2rem;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--col-font-main-black);
    width: 6rem !important;
}

/* || ----------------------------- TYPE */

h1 {
    font-family: var(--font-outfit);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.2px;
    display: inline-block;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: balance;
}

@media (min-width: 300px) and (max-width: 767px) {
    h1 {
        font-size: var(--font-size-xxl);
    }
}

@media (min-width: 768px) {
    h1 {
        font-size: var(--font-size-xxxl);
    }
}

h2 {
    font-family: var(--font-outfit);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.2px;
    display: inline-block;
    font-weight: 300;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@media (min-width: 300px) and (max-width: 767px) {
    h2 {
        font-size: var(--font-size-md);
    }
}

@media (min-width: 768px) {
    h2 {
        font-size: var(--font-size-xl);
    }
}

h3 {
    font-family: var(--font-outfit);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.2px;
    display: inline-block;
    font-weight: 400;
    text-wrap: balance;
}

@media (min-width: 300px) and (max-width: 767px) {
    h3 {
        font-size: var(--font-size-md);
    }
}

@media (min-width: 768px) {
    h3 {
        font-size: var(--font-size-xl);
    }
}

.text-white {
    color: var(--col-font-main-white);
}

.text-blue {
    color: var(--col-font-main-blue);
}

.text-black {
    color: var(--col-font-main-black);
}

.text-highlight {
    color: var(--col-font-highlight);
}

.text-gray {
    color: var(--col-font-gray);
}

address {
    margin: 0;
    padding: 0;
}

p,
address,
.longcopy-p {
    font-style: normal;
    font-family: var(--font-outfit);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.4;
    letter-spacing: 0.02rem;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-weight: 300;
}

ul li,
ol li,
.longcopy-p li {
    font-family: var(--font-outfit);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.4;
    letter-spacing: 0.02rem;
    margin: 0;
    padding: 0;
    font-weight: 300;
    position: relative;
    padding-left: 0.8em;
    display: block;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

ul li::before {
    content: '•';
    position: absolute;
    left: 0;
}

.longcopy-p p {
    margin: 0 0 1rem;
}

.address p {
    margin: 0 0 1rem;
}

.longcopy-p p,
.longcopy-p ul,
.longcopy-p ol {
    margin: 0 0 1rem;
}

.longcopy-p ul,
.longcopy-p ol {
    padding-left: 1rem;
}

.pill-tag p {
    font-family: var(--font-sourcecode);
    letter-spacing: 0.1rem;
    margin: 0;
}

@media (min-width: 300px) and (max-width: 767px) {
    .pill-tag p {
        font-size: var(--font-size-xs);
    }
}

@media (min-width: 768px) {
    .pill-tag p {
        font-size: var(--font-size-sm);
    }
}

.longcopy-p p:last-child {
    margin-bottom: 0;
}

.longcopy-p li + li {
    margin-top: 0.35rem;
}

@media (min-width: 300px) and (max-width: 767px) {
    p,
    address,
    .longcopy-p {
        font-size: var(--font-size-sm);
    }
}

@media (min-width: 768px) {
    p,
    address,
    .longcopy-p {
        font-size: var(--font-size-lg);
    }
}

@media (min-width: 300px) and (max-width: 767px) {
    ul li,
    ol li {
        font-size: var(--font-size-sm);
    }
}

@media (min-width: 768px) {
    ul li,
    ol li {
        font-size: var(--font-size-lg);
    }
}

span {
    font-family: var(--font-outfit);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-weight: 400;
}

mark {
    background: none;
}

strong {
    font-weight: 500;
}

.lead {
    font-size: var(--font-size-xl);
}

@media (min-width: 300px) and (max-width: 767px) {
    .lead {
        font-size: var(--font-size-sm);
    }
}

.p-xl {
    font-size: var(--font-size-xxl);
    line-height: 1.3;
    font-weight: 400;
}

@media (min-width: 300px) and (max-width: 767px) {
    .p-xl {
        font-size: var(--font-size-lg);
    }
}

.p-xxl {
    font-size: var(--font-size-xxl);
    line-height: 1.3;
    font-weight: 500;
}

@media (min-width: 300px) and (max-width: 767px) {
    .p-xxl {
        font-size: var(--font-size-xl);
    }
}

.p-xxxxl {
    font-size: var(--font-size-xxxxl);
    line-height: 1;
}

@media (min-width: 1480px) {
    .p-xxxxl {
        font-size: var(--font-size-xxxxl);
    }
}

@media (min-width: 300px) and (max-width: 1479px) {
    .p-xxxxl {
        font-size: var(--font-size-xxxl);
    }
}

.p-large {
    font-family: var(--font-questrial);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.2px;
    display: inline-block;
    font-weight: 400;
}

@media (min-width: 300px) and (max-width: 767px) {
    .p-large {
        font-size: var(--font-size-sm);
    }
}

@media (min-width: 768px) {
    .p-large {
        font-size: var(--font-size-xl);
    }
}

.p-smallcopy {
    font-size: var(--font-size-xs);
}

.fw-300 {
    font-weight: 300;
}

.fw-500 {
    font-weight: 500;
}

.page-title-info {
    font-family: var(--font-sourcecode);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    display: inline-block;
    font-weight: 400;
    font-size: var(--font-size-xs);
}

/* || ----------------------------- MAIN HOLDER */

#main {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 0;
    opacity: 1;
}

.full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* || ----------------------------- FLEX */

.text-right {
    flex-direction: row-reverse;
}

.text-left {
    flex-direction: row;
}

/* || ----------------------------- LAZY LOAD */

.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 650ms;
}

/* || ----------------------------- CONTENT BTN */

.bg-colour-mainnav {
    background-color: var(--col-bg-main-navigation-static);
}

.bg-colour-white {
    background-color: var(--col-bg-contentbtn-white);
}

.content-navigation-btn {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    height: 3rem;
    max-width: max-content;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    padding-left: var(--btn-main-padding-text);
    padding-right: var(--btn-main-padding-text);
    white-space: nowrap;
}

.content-btn-medium {
    padding-left: var(--btn-main-padding-text);
    padding-right: var(--btn-main-padding-text);
    height: 3rem;
}

@media (max-width: 1023px) {
    .content-btn-large {
        font-size: var(--font-size-sm);
    }
}

@media (min-width: 1024px) {
    .content-btn-large {
        height: 6rem;
        padding-left: calc(var(--btn-main-padding-text) * 3);
        padding-right: calc(var(--btn-main-padding-text) * 3);
    }
}

/* || ----------------------------- LOTTIE */

.lottie-animation {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lottie-animation .svg {
    width: 100%;
    height: 100%;
}

/* || ----------------------------- IMG */

img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.image-bg-white {
    background-color: var(--col-bg-image-white);
}

.image-bg-gray {
    background-color: var(--col-bg-image-gray);
}

.img-brightness {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background-color: var(--col-img-brightness);
}

#content-brightness {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    background-color: var(--col-content-brightness);
    display: none;
    z-index: 10;
    opacity: 0;
}

/* || ----------------------------- UI */
.with-underline {
    border-bottom: 0.0625rem dashed var(--col-bg-border-gray);
}

.underline-dashed {
    display: block;
    width: calc(100% + var(--content-elements-padding) * 2);
    height: 0;
    border-bottom: 0.12rem dashed var(--col-bg-line-dashed);
}

.underline-solid {
    display: block;
    width: calc(100% + var(--content-elements-padding) * 2);
    height: 0;
    border-bottom: 0.12rem solid var(--col-bg-line-dashed);
}

#holder-orientationchange-msg {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--col-bg-app-bright);
    z-index: 9999999;
}

@media screen and (max-width: 1023px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #holder-orientationchange-msg {
        display: flex;
        flex-direction: row;
        gap: var(--content-elements-padding);
        justify-content: center;
        align-items: center;
    }
}

.pill-tag {
    position: relative;
    width: fit-content;
    height: max-content;
    background-color: #00ffa0;
    border-radius: var(--border-radius-round);
    box-shadow: #0000001a 0 1px 2px 0;
}

.pill-tag h3 {
    font-family: var(--font-sourcecode);
    letter-spacing: 0.1rem;
    margin: 0;
    line-height: 0;
}

@media (min-width: 300px) and (max-width: 767px) {
    .pill-tag h3 {
        font-size: var(--font-size-xs);
    }
}

@media (min-width: 768px) {
    .pill-tag h3 {
        font-size: var(--font-size-sm);
    }
}

/* || ----------------------------- SVG */

svg {
    display: block;
    pointer-events: none;
}

/* || ----------------------------- LINK AHREF */

a {
    pointer-events: auto;
    color: var(--col-font-link-static);
    font-weight: 400;
    text-decoration: underline;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    transition:
        color 0.3s ease,
        text-decoration 0.3s ease;
}

a:hover {
    color: var(--col-font-link-static);
    text-decoration: none;
}

.btn-icon-external {
    padding-left: 1rem;
}

.btn-icon-arrow {
    padding-left: 1rem;
    padding-top: 0.1rem;
}

/* || ----------------------------- COPYRIGHT */

#holder-copyright {
    position: relative;
    padding-top: var(--content-elements-padding);
    left: 0;
    width: 30rem;
}

@media (min-width: 300px) and (max-width: 1023px) {
    #holder-copyright {
        width: 100%;
    }
}