/**************************************************************************************/
/*
    Fonts

 * Font Mapping Explanation:
 *
 * ZalandoSansExpanded is used for headings (h1, h2).
 * Outfit is used for body text, labels, UI elements.
 *
 * Weights available for each family:
 *   ExtraBold (800), Bold (700), SemiBold (600),
 *   Medium (500), Regular (400), Light (300), ExtraLight (200)
 *
 * Use the named @font-face family directly (e.g. font-family: "ZalandoSansExpanded-Bold")
 * rather than relying on font-weight fallback, for consistent cross-browser rendering.
*/
/**************************************************************************************/

@font-face {
    font-family: 'ZalandoSansExpanded-ExtraBold';
    src: url('/files/templates/main-2026/fonts/ZalandoSansExpanded-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSansExpanded-Bold';
    src: url('/files/templates/main-2026/fonts/ZalandoSansExpanded-Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSansExpanded-SemiBold';
    src: url('/files/templates/main-2026/fonts/ZalandoSansExpanded-SemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSansExpanded-Medium';
    src: url('/files/templates/main-2026/fonts/ZalandoSansExpanded-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSansExpanded-Regular';
    src: url('/files/templates/main-2026/fonts/ZalandoSansExpanded-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSansExpanded-Light';
    src: url('/files/templates/main-2026/fonts/ZalandoSansExpanded-Light.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ZalandoSansExpanded-ExtraLight';
    src: url('/files/templates/main-2026/fonts/ZalandoSansExpanded-ExtraLight.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit-ExtraBold';
    src: url('/files/templates/main-2026/fonts/Outfit-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit-Bold';
    src: url('/files/templates/main-2026/fonts/Outfit-Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit-SemiBold';
    src: url('/files/templates/main-2026/fonts/Outfit-SemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit-Medium';
    src: url('/files/templates/main-2026/fonts/Outfit-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit-Regular';
    src: url('/files/templates/main-2026/fonts/Outfit-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit-Light';
    src: url('/files/templates/main-2026/fonts/Outfit-Light.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Outfit-ExtraLight';
    src: url('/files/templates/main-2026/fonts/Outfit-ExtraLight.ttf') format('truetype');
    font-display: swap;
}


@font-face {
    font-family: 'Sen-ExtraBold';
    src: url('/files/templates/main-2026/fonts/Sen-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sen-Bold';
    src: url('/files/templates/main-2026/fonts/Sen-Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sen-SemiBold';
    src: url('/files/templates/main-2026/fonts/Sen-SemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sen-Medium';
    src: url('/files/templates/main-2026/fonts/Sen-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sen-Regular';
    src: url('/files/templates/main-2026/fonts/Sen-Regular.ttf') format('truetype');
    font-display:swap;
}

/**************************************************************************************/
/*
    Keyframes
*/
/**************************************************************************************/

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/**************************************************************************************/
/*
    Reset
*/
/**************************************************************************************/

html, body, div, ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6, pre, form, dfn, del,
p, blockquote, fieldset, input, textarea, select,
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section,
button, canvas, video {
    margin: 0;
    padding: 0;
}


/**************************************************************************************/
/*
    CSS Custom Properties  —  VCC Brand Tokens
    
    Colour reference (Figma "Colours / Palette"):
    
    Main:
      --vcc-carmine          #BE1E20   Primary red  (also used as logo colour)
      --vcc-state-grey       #607783   Cool mid-grey (nav, UI surfaces)
      --vcc-snow             #EFEFEF   Off-white background
      --vcc-midnight-violet  #2D1B35   Dark accent (footers, dark sections)

    Grayscale:
      --vcc-white            #FFFFFF
      --vcc-light-grey       #606A6A   (verify against Figma)
      --vcc-grey             #474F4F
      --vcc-shadow-grey      #2F3333

    Functional:
      --vcc-black            #1A1A1A   Body text / dark headings
      --vcc-dark             #333333   Default text colour (matches current h1/p usage)

    Layout:
      --main-top-margin      Height of the fixed navbar — update if navbar height changes
      --wrapper-padding      Horizontal gutter inside .wrapper
*/
/**************************************************************************************/

:root {
    /* --- Brand colours --- */
    --vcc-carmine: #BE1E2D;
    --vcc-carmine-dark: #8F161A; /* hover / pressed state for primary buttons  */
    --vcc-state-grey: #748386;
    --vcc-state-grey-light: #E6ECF0; /* tinted backgrounds, input borders  */
    --vcc-snow: #FBF9FF;
    --vcc-midnight-violet: #2C1224;
    /* --- Grayscale --- */
    --vcc-white: #FFFFFF;
    --vcc-light-grey: #F0F0F0; /* section backgrounds*/
    --vcc-grey: #807F83;
    --vcc-shadow-grey: #272932;
    --vcc-dark: #333333; /* default text colour*/
    --vcc-black: #1A1A1A;
    /* --- Section background helpers --- */
    --vcc-section-grey-one: #FAFAFA;
    --vcc-section-grey-two: #F0F0F0;
    --vcc-section-grey-three: #F5F5F5;
    /* --- Button helpers --- */
    --vcc-white-button-hover: linear-gradient(0deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100%), rgba(126,125,130,0.10);
    /* --- Layout --- */
    --main-top-margin: 0px;
    --wrapper-padding: 48px;
    /* --- Typography scale (desktop) --- */
    --font-h1: 40px;
    --font-h2: 32px;
    --font-h3: 20px;
    --font-lead: 24px;
    --font-p: 18px;
    --font-sm: 15px;
    --lh-h1: 130%;
    --lh-h2: 120%;
    --lh-h3: 120%;
    --lh-lead: 150%;
    --lh-p: 130%;
    --lh-sm: 130%;
    --top-bar-h: 40px;
    --nav-h: 80px;
    --mainheader-height: auto;
}


/**************************************************************************************/
/*
    Global box-sizing & rendering
*/
/**************************************************************************************/

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

* {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    scroll-behavior: smooth !important;
}


/**************************************************************************************/
/*
    Layout helpers
*/
/**************************************************************************************/

.wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--wrapper-padding);
}

/* Accessibility: visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/**************************************************************************************/
/*
    Loading wheel
*/
/**************************************************************************************/

#loading-wheel {
    max-width: 80px;
    height: 80px;
    border: 12px solid var(--vcc-carmine);
    border-top: 12px solid #696969;
    border-radius: 50%;
    margin: 40vh auto;
    animation: spin 0.8s ease-in infinite;
}


/**************************************************************************************/
/*
    Body & main
*/
/**************************************************************************************/

body {
    background-color: var(--vcc-white);
    color: var(--vcc-dark);
    
}

main {
    margin-top: var(--main-top-margin);
    min-height: calc(100svh - var(--main-top-margin) );
}

    main > section {
        /*overflow: hidden;*/
    }

button {
    cursor: pointer;
}


/**************************************************************************************/
/*
    Typography  —  Desktop (base)
    
    Heading font : ZalandoSansExpanded  (geometric, expanded — brand voice)
    Body font    : Outfit               (clean, readable — body / UI copy)
*/
/**************************************************************************************/

h1 {
    color: var(--vcc-dark);
    font-family: "ZalandoSansExpanded-Medium" /*"ZalandoSansExpanded-Bold"*/;
    font-size: var(--font-h1);
    font-style: normal;
    line-height: var(--lh-h1);
}

h2 {
    color: var(--vcc-dark);
    font-family: "ZalandoSansExpanded-SemiBold";
    font-size: var(--font-h2);
    font-style: normal;
    line-height: var(--lh-h2);
}

h3 {
    color: var(--vcc-dark);
    font-family: "Outfit-Medium";
    font-size: var(--font-h3);
    font-style: normal;
    line-height: var(--lh-h3);
    letter-spacing: 0.2px;
}

h4 {
    color: var(--vcc-dark);
    font-family: "Outfit-SemiBold";
    font-size: 18px;
    font-style: normal;
    line-height: 120%;
}

h5 {
    color: var(--vcc-dark);
    font-family: "Outfit-SemiBold";
    font-size: 16px;
    font-style: normal;
    line-height: 120%;
}

h6 {
    color: var(--vcc-dark);
    font-family: "Outfit-Medium";
    font-size: 14px;
    font-style: normal;
    line-height: 120%;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Lead — large intro paragraph */
.lead {
    color: var(--vcc-dark);
    font-family: "Outfit-Light";
    font-size: var(--font-lead);
    font-style: normal;
    line-height: var(--lh-lead);
    }

    p {
        color: var(--vcc-dark);
        font-family: "Outfit-Light";
        font-size: var(--font-p);
        font-style: normal;
        line-height: var(--lh-p);
    }

    small,
    .text-small {
        color: var(--vcc-dark);
        font-family: "Outfit-Light";
        font-size: var(--font-sm);
        font-style: normal;
        line-height: var(--lh-sm);
    }
    /* Labels / tags / eyebrows */
    .label,
    .eyebrow {
        font-family: "Outfit-SemiBold";
        font-size: 13px;
        line-height: 100%;
        text-transform: uppercase;
        letter-spacing: 1.2px;
    }
    /**************************************************************************************/
    /*
    Select / form base
*/
    /**************************************************************************************/

    select {
        font-family: "Outfit-Regular";
        font-size: 16px;
        font-style: normal;
        line-height: 150%;
        color: var(--vcc-dark);
    }

        select option {
            font-family: "Outfit-Regular";
            font-size: 16px;
            color: var(--vcc-dark);
            text-transform: capitalize;
        }

        select optgroup {
            font-family: "Outfit-Regular";
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.64px;
            color: var(--vcc-dark);
            opacity: 0.6;
        }
    /**************************************************************************************/
    /*
    Links
*/
    /**************************************************************************************/

    a {
        color: var(--vcc-carmine);
        text-decoration: none;
    }

        a:hover {
            text-decoration: underline;
        }
    /**************************************************************************************/
    /*
    Images
*/
    /**************************************************************************************/

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    /**************************************************************************************/
    /*
    Responsive  —  Tablet 
*/
    /**************************************************************************************/

    @media (max-width: 1024px) {

        :root {
            --top-bar-h: 0px;
            --nav-h: 70px;
            /* Tablet type scale */
            --font-h1: 28px;
            --font-h2: 24px;
            --font-h3: 20px;
            --font-lead: 20px;
            --font-p: 16px;
            --font-sm: 14px;
            /* All Tablet/mobile line-heights are 130% */
            --lh-h1: 130%;
            --lh-h2: 130%;
            --lh-h3: 130%;
            --lh-lead: 130%;
            --lh-p: 130%;
            --lh-sm: 130%;
        }
    }
    /**************************************************************************************/
    /*
    Responsive  —  Mobile 
*/
    /**************************************************************************************/


    @media (max-width: 960px) {
        :root {
            --top-bar-h: 0px;
            --nav-h: 70px;
            --mainheader-height: 70px;
            --wrapper-padding: 24px /*24px*/;
            /* Mobile type scale from Figma */
            --font-h1: 28px;
            --font-h2: 24px;
            --font-h3: 20px; 
            --font-lead: 20px; 
            --font-p: 16px;
            --font-sm: 14px; 
            /* All mobile line-heights are 130% */
            --lh-h1: 130%;
            --lh-h2: 130%;
            --lh-h3: 130%;
            --lh-lead: 130%;
            --lh-p: 130%;
            --lh-sm: 130%;
        }
    }

    .banner-tag {
        display: flex;
    }

.banner-label {
    font-family: Outfit, Outfit-Regular;
    color: var(--Shadow-Grey, #272932);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    position: relative;
    align-content: space-evenly;
}
    /**************************************************************************************/
    /*
    CTA
*/
    /**************************************************************************************/
    .cta-banner {
        background-color: #BE1E2D;
        background-image: url(/Files/templates/main-2026/images/banner-pattern.webp), radial-gradient(66.71% 52.22% at 71.58% 58.86%, rgba(44,18,36,0.5) 0%, #2C1224 100%);
        /*margin-bottom: 48px;*/
    }

        .cta-banner .cta-body {
            display: flex;
            align-items: stretch;
        }

        .cta-banner .cta-text {
            /*        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 48px;
        padding-top: 80px;
        padding-bottom: 80px;
        width: 60%;*/
            flex: 1 1 60%;
            padding: 80px 0 80px 0;
            box-sizing: border-box;
            min-width: 0;
        }

            .cta-banner .cta-text .cta-header {
                color: #FFF;
                font-family: "Outfit-Light";
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 130%;
            }

            .cta-banner .cta-text .cta-title {
                color: #FFF;
                /* Desktop/H2 */
                font-family: "ZalandoSansExpanded-Regular";
                font-size: 32px;
                font-style: normal;
                font-weight: 600;
                line-height: 120%; /* 38.4px */
                margin-top: 24px;
                margin-bottom: 32px;
            }

                .cta-banner .cta-text .cta-title .yellow {
                    color: #EAD78E;
                }

            .cta-banner .cta-text .cta-button {
                background: var(--Carmine, #BE1E2D);
                display: inline-flex;
                padding: 8px 12px 8px 16px;
                align-items: center;
                gap: 10px;
                cursor: pointer;
                max-width: 135px;
            }

                .cta-banner .cta-text .cta-button:hover {
                    background: var(--Midnight-Violet, #2C1224);
                    text-decoration: unset;
                }

                .cta-banner .cta-text .cta-button span {
                    color: #FFF;
                    font-family: "Outfit-Regular";
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 24px; /* 171.429% */
                    letter-spacing: 0.28px;
                }

        .cta-banner .cta-right {
            /*        display: flex;
        align-items: end;
        width: 40%;*/
            flex: 0 0 40%;
            background-image: url('/Files/templates/main-2026/images/cta-banner.webp');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right bottom;
            min-height: 340px;
        }

    @media (max-width: 1200px) {
        .cta-banner .cta-text {
            flex: 1 1 55%;
        }

        .cta-banner .cta-right {
            flex: 1 1 45%;
        }
    }

    @media (max-width: 1040px) {
        .cta-banner .cta-text {
            flex: 1 1 50%;
            padding: 40px 0 40px 0;
        }

        .cta-banner .cta-right {
            flex: 1 1 50%;
        }
    }


    @media (max-width: 1024px) {
        .cta-banner .cta-text {
            flex: 1 1 45%;
        }

        .cta-banner .cta-right {
            flex: 1 1 55%;
        }
    }

    @media (max-width: 991px) {
        .cta-banner .cta-text {
            flex: 1 1 45%;
        }

        .cta-banner .cta-right {
            flex: 1 1 55%;
        }
    }

    @media (max-width: 834px) {
        .cta-banner .cta-text .cta-title {
            font-size: 28px;
        }
    }

    @media (max-width: 767px) {
        .cta-banner {
            margin-bottom: 24px;
        }

            .cta-banner .cta-body {
                flex-direction: column;
            }

            .cta-banner .cta-text {
                flex: unset;
                padding: 48px 0 24px 0;
            }

                .cta-banner .cta-text .cta-title {
                    font-size: 24px;
                }

                .cta-banner .cta-text .cta-button {
                    max-width: unset;
                    width: 100%;
                    justify-content: space-between;
                }

                .cta-banner .cta-text .cta-header {
                    font-size: 14px;
                }

            .cta-banner .cta-right {
                flex: unset;
                min-height: 263px;
                background-position: center bottom;
            }
    }


    @media (max-width: 484px) {
        .cta-banner .cta-right {
            min-height: 52.436vw;
        }
    }