﻿/* theme vars */
:root {
    --brand-color: #e03c31;
    /*globals*/
    --ink-color: #1E1E1E;
    --ink-color-inactive: #666;
    --body-bg: #f4f4f4;
    --card-bg: #fff;
    --card-border-color: #E2E2E2;
    --card-border-width: 1px;
    --card-border-radius: 24px;
    --card-border-radius-lg: 40px;
    --card-box-shadow-x: 16px;
    --card-box-shadow-y: 16px;
    --card-box-shadow-blur: 20px;
    --card-box-shadow-color: rgb(0 0 0 / 10%);
    --card-box-shadow: var(--card-box-shadow-x) var(--card-box-shadow-x) var(--card-box-shadow-x) var(--card-box-shadow-color);
    --card-border: var(--card-border-width) solid var(--card-border-color);
    --tag-background-color: #FFF;
    --tag-color: var(--ink-color);
    --link-color-active: var(--ink-color);
    --ui-card-text-color: var(--ink-color);
    --button-radius: 9999px;
    --btn-primary-bg: var(--brand-color);
    --btn-primary-bg-hover: var(--color-primary-red-2);
    --main-content-padding: 0 16px;
    --var-container-width-medium: 800px;
    --site-header-height: 80px;
    --site-header-height--lg: 168px;
    /*theme-switcher*/
    --theme-switcher-light-fill: var(--ink-color);
    --theme-switcher-dark-fill: none;
    --theme-switcher-toggle-bg: var(--card-bg);
    --theme-switcher-toggle-color: var(--brand-color);
    /*Hero*/
    --hero2-bg-image: url(/_res/themes/shoutdigital/images/light/hero2.jpg);
    --hero2-bg-color: #F4F4F4;
    --hero2-heading-color: var(--ink-color);
    --hero2-btn-bg: var(--brand-color);
    --hero2-btn-color: #ffffff;
    --hero2-tag-image: url("/_res/themes/shoutdigital/images/light/when-it-matters-shout.png");
    --hero2-tag-color: #a2a2a2;
    /*Body*/
    --body-bg: #F4F4F4;
    --main-bg: #F4F4F4;
    --main-bg-alt: #e7e6e6;
    --body-text-color: var(--ink-color);
    --header-bg: #F4F4F4;
    /*Heading*/
    --heading-color: var(--ink-color);
    /*IconCard*/
    --icon-bg: var(--card-bg);
    --icon-border-color: var(--card-border-color);
    --icon-shadow: var(--card-box-shadow);
    --icon-card-url: url(/_res/themes/shoutdigital/images/light/icon-card.svg);
    /*Icons */
    --icon-aichip-url: url(/_res/themes/shoutdigital/icons/light/aichip.svg);
    --icon-arrow-url: url(/_res/themes/shoutdigital/icons/light/arrow.svg);
    --icon-chat-url: url(/_res/themes/shoutdigital/icons/light/chat.svg);
    --icon-code-url: url(/_res/themes/shoutdigital/icons/light/code.svg);
    --icon-cloud-url: url(/_res/themes/shoutdigital/icons/light/cloud.svg);
    --icon-lightbulb-url: url(/_res/themes/shoutdigital/icons/light/lightbulb.svg);
    --icon-lightning-url: url(/_res/themes/shoutdigital/icons/light/lightning.svg);
    --icon-sliders-url: url(/_res/themes/shoutdigital/icons/light/sliders.svg);
    --icon-pie-url: url(/_res/themes/shoutdigital/icons/light/pie.svg);
    --icon-squares-url: url(/_res/themes/shoutdigital/icons/light/squares.svg);
    --icon-wletter-url: url(/_res/themes/shoutdigital/icons/light/wletter.svg);
    --icon-rocket-url: url(/_res/themes/shoutdigital/icons/light/rocket.svg);
    /*Icons */
    --icon-brand-aichip-url: url(/_res/themes/shoutdigital/icons/brand/aichip.svg);
    --icon-brand-arrow-url: url(/_res/themes/shoutdigital/icons/brand/arrow.svg);
    --icon-brand-chat-url: url(/_res/themes/shoutdigital/icons/brand/chat.svg);
    --icon-brand-cloud-url: url(/_res/themes/shoutdigital/icons/brand/cloud.svg);
    --icon-brand-code-url: url(/_res/themes/shoutdigital/icons/brand/code.svg);
    --icon-brand-lightbulb-url: url(/_res/themes/shoutdigital/icons/brand/lightbulb.svg);
    --icon-brand-lightning-url: url(/_res/themes/shoutdigital/icons/brand/lightning.svg);
    --icon-brand-pie-url: url(/_res/themes/shoutdigital/icons/brand/pie.svg);
    --icon-brand-rocket-url: url(/_res/themes/shoutdigital/icons/brand/rocket.svg);
    --icon-brand-sliders-url: url(/_res/themes/shoutdigital/icons/brand/sliders.svg);
    --icon-brand-squares-url: url(/_res/themes/shoutdigital/icons/brand/squares.svg);
    --icon-brand-wletter-url: url(/_res/themes/shoutdigital/icons/brand/wletter.svg);
    /*Hr*/
    --hr-url: url(/_res/themes/shoutdigital/images/light/hr.svg);
    --hr-color: var(--ink-color);
    /*cs-spot*/
    --cs-spot-bg: var(--card-bg);
    --cs-spot-border: var(--card-border);
    --cs-spot-shadow: var(--card-box-shadow);
    --cs-spot-padding-bottom: calc(var(--card-box-shadow-blur) + 4px);
    /*newsletter*/
    --nl-card-bg: var(--brand-color);
    /*filter-list*/
    --filter-list-option-color: var(--ink-color);
    --filter-list-option-color-selected: #fff;
    --filter-list-option-bg: #fff;
    --filter-list-option-bg-selected: var(--btn-primary-bg);
    --filter-list-option-bg-hover: #ffaba5;
    --filter-list-option-shadow: var(--card-box-shadow);
    --filter-list-option-radius: var(--card-border-radius-lg);
    /*stylised List Bg*/
    --stylised-list-bg: url(/_res/themes/shoutDigital/images/light/list-background.jpg);
    /*banner*/
    --banner-bg-image: url("/_res/themes/shoutDigital/images/dark/hero2.jpg");
    /*Clamps*/
    --clamp-min: 320;
    --clamp-max: 1200;
    --clamp-range: calc(var(--clamp-max) - var(--clamp-min));
}
/*:root[data-theme="dark"] {*/
:root {
    /*globals*/
    --ink-color: #fff;
    --ink-color-inactive: #b2b2b2;
    --card-bg: #242424;
    --card-border-color: #4c4c4c;
    --tag-background-color: #494e55;
    --body-bg: #17191b;
    /*theme-switcher*/
    --theme-switcher-light-fill: none;
    --theme-switcher-dark-fill: var(--ink-color);
    /*Hero*/


    --hero2-bg-image: url("/_res/themes/shoutDigital/images/dark/hero2.jpg");
    --hero2-bg-image-video: url("/_res/themes/shoutDigital/images/dark/hero2-video-frame1.jpg");
    --hero2-bg-color: #17191b;
    --hero2-edge-text-color: #ffffff;
    --hero2-tag-image: url("/_res/themes/shoutDigital/images/dark/when-it-matters-shout.png");
    /*Body*/
    --body-bg: var(--color-mono-grey-7);
    --main-bg: var(--color-mono-grey-7);
    --main-bg-alt: #363636;
    --header-bg: var(--color-mono-grey-7);
    /*IconCard*/
    --icon-card-url: url(/_res/themes/shoutdigital/images/dark/icon-card.svg);
    /*Icons*/
    --icon-arrow-url: url(/_res/themes/shoutdigital/icons/dark/arrow.svg);
    --icon-aichip-url: url(/_res/themes/shoutdigital/icons/dark/aichip.svg);
    --icon-lightbulb-url: url(/_res/themes/shoutdigital/icons/dark/lightbulb.svg);
    --icon-chat-url: url(/_res/themes/shoutdigital/icons/dark/chat.svg);
    --icon-code-url: url(/_res/themes/shoutdigital/icons/dark/code.svg);
    --icon-cloud-url: url(/_res/themes/shoutdigital/icons/dark/cloud.svg);
    --icon-lightning-url: url(/_res/themes/shoutdigital/icons/dark/lightning.svg);
    --icon-pie-url: url(/_res/themes/shoutdigital/icons/dark/pie.svg);
    --icon-rocket-url: url(/_res/themes/shoutdigital/icons/dark/rocket.svg);
    --icon-sliders-url: url(/_res/themes/shoutdigital/icons/dark/sliders.svg);
    --icon-squares-url: url(/_res/themes/shoutdigital/icons/dark/squares.svg);
    --icon-wletter-url: url(/_res/themes/shoutdigital/icons/dark/wletter.svg);
    /*Hr*/
    --hr-url: url(/_res/themes/shoutdigital/images/dark/hr.svg);
    /*cs-spot*/
    /*filter-list*/
    --filter-list-option-bg: #3b3b3b;
    --filter-list-option-bg-hover: #cb5b52;
    /*stylised List Bg*/
    --stylised-list-bg: url(/_res/themes/shoutDigital/images/dark/list-background.jpg);
}



    :root .extra-row-gap .umb-block-grid__layout-container {
        row-gap: clamp(32px, calc(20.4px + 3.64vw), 64px)
    }

    :root .extra-row-gap .umb-block-grid > .umb-block-grid__layout-container {
        row-gap: clamp(90px, calc(52.18px + 11.818vw), 194px);
    }

html,
body {
    overflow-x: hidden;
    overflow-y: visible;
    min-height: 100vh;
}
    body.disable-scroll {
        position: fixed;
        width: 100%;
        height: auto;
        overflow: scroll;
    }
#main {
    overflow-x: hidden;
    overflow-y: visible;
    min-height: 100vh;
}
.extra-row-gap #main,
.hero2,
.hero3 {
    margin-bottom: clamp(32px, calc(20.4px + 3.64vw), 80px)
}

:root .body--landing-umbraco ui-grid[for^=content-card] {
    gap: clamp(32px, calc(20.4px + 3.64vw), 64px)
}


body {
    background-color: var(--body-bg);
}

section[rte] {
    --title-margin-bottom: 2.5rem;
    --body-text-margin-bottom: 2rem;

    .title-xxl, .title-xl, .title-l, .title-m, .title-s, p {
        line-height: 1.4;
    }

    .title-xxl {
        font-size: clamp(32px, 4.5vw, 44px);
    }

    .title-xl {
        font-size: clamp(28px, 3.8vw, 38px);
    }

    .title-l {
        font-size: clamp(24px, 3.2vw, 32px)
    }

    .title-m {
        font-size: clamp(22px, 2.6vw, 28px);
    }

    .title-s {
        font-size: clamp(20px, 2.2vw, 24px);
    }
}

ui-content-card[look=articleCard] [slot=body] h3 {
    margin-bottom: 2rem !important;
}

:root ui-content-card[look=articleCard] [slot=body] {
    padding: 0;
}
/*Light Mode only*/
:root:not([data-theme="dark"]) ui-container[style*="--ui-container-container-background-color"], :root:not([data-theme="dark"]) ui-container[style*="--ui-container-background-color"] {
    --ui-container-container-background-color: var(--main-bg-alt) !important;
    --ui-container-background-color: var(--main-bg-alt) !important;
}

:root:not([data-theme="dark"]) .table--theme-alternate tbody tr {
    --table-row-background: var(--main-bg);
}

    :root:not([data-theme="dark"]) .table--theme-alternate tbody tr:nth-child(2n) {
        --table-row-background: var(--main-bg-alt);
    }

:root:not([data-theme="dark"]) body .section-intro {
    background-image: linear-gradient(180deg, var(--main-bg-alt), var(--main-bg));
}

:root ui-button {
    --ui-button-border-base-radius: var(--button-radius)
}

    :root ui-button[look=outline-primary] {
        --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) var(--brand-color);
        --ui-button-color: var(--ink-color);
    }

        :root ui-button[look=outline-primary]:hover {
            --ui-button-color: var(--ink-color);
        }


/*:root:not([data-theme="dark"]) ui-button[look=secondary] {
        --ui-button-color: var(--color-mono-white);
        --ui-button-background-color: var(--color-mono-black);
    }
   :root:not([data-theme="dark"]) ui-button[look=outline-primary] {
            --ui-button-color: var(--color-mono-white);
            --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) var(--color-mono-white);
        }*/

:root:not([data-theme="dark"]) ui-button[look=outline-secondary] {
    --ui-button-color: var(--color-mono-black);
    --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) var(--color-mono-black);
}


:root:not([data-theme="dark"]) .section-intro .section-intro__image {
    filter: drop-shadow(6px 3px 11px #c3c3c3);
}

:root .rte.rte--grey-rounded {
    background: var(--card-bg);
}

:root .rte.rte--code {
    border-color: var(--card-border-color);
    color: var(--ink-color);
}

:root ui-container {
    --ui-container-container-padding: 0 23px;
}

@media (min-width: 1328px) {
    :root ui-container {
        --ui-container-container-padding: 0;
    }
}

@media (min-width: 1200px) {
    :root ui-container[breakpointXlarge=containerLarge] {
        --ui-container-container-width: 1296px;
    }
}

:root main > .main-content {
    --main-content-width: 100%;
}
/*section-intro*/
:root body .section-intro {
    --ui-section-intro-background-color: var(--main-bg);
    --ui-section-intro-color: var(--ink-color);
    transition: opacity 1s ease-in-out;
}

    :root body .section-intro h1 {
        color: var(--ui-section-intro-color);
    }

    :root body .section-intro ui-tag {
        --ui-tag-background-color: var(--tag-background-color);
        --ui-tag-color: var(--tag-color);
    }

    :root body .section-intro p {
        line-height: 1.4;
    }

:root body ui-container.hr:after {
    border-bottom-color: var(--ink-color);
}

:root body ui-link-list ui-icon, :root body ui-link ui-icon {
    --ui-icon-color: var(--ink-color);
}
/*rte*/
:root body :is(h1, h2, h3, h4, h5, h6, p, li, td, th, tr, input[type="text"], input[type="email"], select, picture, textarea, .c-forms .umbraco-forms-fieldset .umbraco-forms-container label:not(ui-footer *)) {
    --text-colour: var(--ink-color);
    color: var(--ink-color);
    border-color: var(--ink-color);
}

:root body :is(h1 + div, h2 + div, h3 + div, h4+ div, h5+ div, h6+ div) {
    color: var(--ink-color);
}

:root body ol a, :root body p a, :root body ul a {
    --link-color: var(--brand-color);
    --link-color-active: var(--brand-color) !important;
}

    :root body ol a:hover, :root body p a:hover, :root body ul a:hover {
        --link-color-active: var(--brand-color) !important;
    }

    :root body ol a:hover, :root body p a:hover, :root body ul a:hover {
        text-decoration: underline;
        /*--link-color: var(--ink-color);*/
    }

body {
    background-color: var(--body-bg) !important;
}

:root #site-header {
    --ui-header-height: var(--site-header-height);
    background-color: transparent !important;
    --ui-button-border-base-radius: var(--button-radius);
    height: var(--site-header-height);
}

@media (min-width: 1200px) {
    :root #site-header {
        height: var(--site-header-height--lg);
    }
}



:root #site-header:has(+ .hero2), :root #site-header:has(+ .hero3) {
    box-shadow: none;
}

:root #site-header .nav-control--cross {
    --nav-control-icon-color: var(--brand-color);
    --nav-control-line-icon-height: 2px;
    background-color: transparent;
}

    :root #site-header .nav-control--cross .u-icon {
        transition-duration: 0s;
    }

        :root #site-header .nav-control--cross .u-icon:after {
            --nav-control-line-icon-width: 16px;
            left: 8px;
        }

    :root #site-header .nav-control--cross.active .u-icon:after {
        --nav-control-line-icon-width: 20px;
    }

:root #site-header .nav-control.active .u-icon {
    width: 0;
    right: 35px;
}

:root #site-header .nav-control .u-icon::after,
:root #site-header .nav-control .u-icon::before {
    transition-duration: 0.15s;
}

:root #site-header .nav-control.active .u-icon::after,
:root #site-header .nav-control.active .u-icon::before {
    --nav-control-line-icon-height: 2px;
    --nav-control-line-icon-width: 23px;
    transition-duration: 0.15s;
    left: 0;
}


#site-header ui-overlay.menu-overlay {
    --overlay-background: var(--body-bg);
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .1);
}

#site-header ui-accordion-menu[look=menu] ui-nav-item {
    --ui-nav-item-background-color: transparent;
    --ui-nav-item-hover-background-color: transparent;
}


#site-header > ui-group {
    padding: 0 8px 0 16px;
}

@media (min-width: 1200px) {
    #site-header > ui-group {
        padding: 0 16px;
    }
}

@media (min-width: 1328px) {
    :root #site-header {
        height: 168px;
    }

    :root ui-header::part(head-container) {
        max-width: 1296px !important;
        padding: 0;
    }

    #site-header > ui-group {
        padding: 0;
    }

    #site-header ui-button[look=primary] {
        --ui-button-padding: 12px 12px;
        --ui-button-width: 178px;
    }
}



#site-header .site-header__links {
    flex: 1 0 50%;
    max-width: 50%;
    justify-content: flex-end;
    gap: 8px;
}

@media (min-width: 400px) {
    #site-header .site-header__links {
        gap: 16px;
    }
}

@media (min-width: 1200px) {
    #site-header .site-header__links {
        max-width: 80%;
        gap: 82px
    }
}

#site-header ui-grid h3, #site-header ui-grid p {
    --content-text-primary: var(--ink-color);
    color: var(--ink-color);
    --ui-icon-color: transparent;
}

#site-header ui-content-card[look=summaryCard]::part(article) {
    gap: 24px;
}

#site-header ui-content-card[look=summaryCard] img[slot=head] {
    height: 200px;
    flex: 0 0 200px;
    max-width: 200px;
}

#site-header ui-grid ui-link a, #site-header ui-grid ui-link a {
    --ui-link-color: var(--brand-color);
    --ui-icon-color: var(--brand-color);
}

#site-header ui-content-card[look=summaryCard] [slot=body] h3 {
    font-size: 20px;
}

#site-header ui-grid ui-icon::part(path) {
    fill: transparent;
    stroke: var(--ink-color);
}

#site-header ui-content-card[look=summaryCard] {
    --ui-card-background-color: var(--body-bg)
}

#site-header ui-button[look=outline-secondary] {
    --ui-button-color: var(--ink-color);
    --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) var(--ink-color);
}

#site-header ui-button svg {
    fill: transparent;
}

    #site-header ui-button svg path {
        stroke: var(--ink-color);
    }

#site-header ui-overlay.menu-overlay ui-tabbed-megamenu::part(tabControls) {
    border-color: var(--ink-color);
}

#site-header ui-overlay.menu-overlay ui-tabbed-megamenu {
    --tabbed-components-tab-color: var(--ink-color-inactive);
    --tabbed-components-active-tab-color: var(--ink-color);
    --tabbed-components-list-background-color: transparent;
    --tabbed-components-tab-content-background-color: transparent;
    --tabbed-megamenu-background-color: var(--body-bg);
    --tabbed-components-tab-content-padding: 64px 32px;
    --tabbed-components-list-padding: 55px 32px;
    background-color: var(--body-bg);
    box-shadow: inset 0px 20px 20px -20px rgba(0, 0, 0, .1);
}

@media (min-width: 1440px) {
    #site-header ui-overlay.menu-overlay ui-tabbed-megamenu {
        --tabbed-components-tab-content-padding: 64px 64px;
    }
}

#site-header ui-overlay.menu-overlay ui-tabbed-megamenu > div > ui-icon::part(path) {
    fill: var(--ink-color) !important;
}

#site-header > ui-group div:nth-child(2) ui-nav {
    display: none;
}

@media (min-width: 1200px) {
    #site-header > ui-group div:nth-child(2) ui-nav {
        flex: 1 1 auto; /* takes all remaining middle space */
        display: flex;
        justify-content: center; /* contents inside are centred */
        --ui-nav-justify-content: center;
    }
}

#site-header > ui-group div:nth-child(2) ui-nav ui-icon {
    --ui-icon-stroke-color: var(--ink-color) !important;
}

#site-header ui-nav-item {
    color: var(--ink-color) !important;
    font-weight: bold;
}

#site-header .header__brand {
    color: var(--ink-color) !important;
    padding-top: 7px;
    width: 150px;
}

@media (max-width: 400px) {
    #site-header .header__brand {
        padding-top: 12px;
        width: 120px;
    }
}

#mobilePrimaryNavigation-control {
    min-width: 48px;
    border-radius: 8px;
    height: 48px;
    padding: 8px;
    width: 48px;
}

#site-header .header__brand svg {
    fill: currentColor;
}

#engage-cockpit, body .loader {
    display: none !important;
}

:root ui-footer .footer__group.footer__group--0, :root ui-footer .footer__group.footer__group--1, :root ui-footer .footer__group.footer__group--2 {
    --footer-nav-group-width: 1296px;
    --ui-group-max-width: 1296px;
}

:root ui-footer .footer__group.footer__group--0 {
    padding: 24px;
    --ui-group-gap: 24px;
    --ui-group-flex-direction: row;
    --ui-group-flex-wrap: wrap;
}

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--0 {
        padding: 38px 38px 56px;
        --ui-group-gap: 48px;
    }
}

:root ui-footer .footer__group.footer__group--0 > div ui-image {
    --ui-image-width: 111px;
    padding: 0;
    margin-bottom: 44px;
}

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--0 > div ui-image {
        --ui-image-width: 150px;
        margin-bottom: 34px;
    }
}

:root ui-footer .footer__group.footer__group--0 > div {
    width: calc(50% - 12px);
    margin-bottom: 36px;
}

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--0 > div {
        margin-bottom: 0;
    }
}

:root ui-footer .footer__group.footer__group--0 > div:first-of-type,
:root ui-footer .footer__group.footer__group--0 > div:last-of-type {
    width: 100%;
}

:root ui-footer .footer__group.footer__group--1 {
    --ui-group-width: 100%;
    background-color: var(--brand-color);
    padding: 0 24px;
    height: 48px;
    --ui-group-align-items: center;
}

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--1 {
        height: 64px;
    }
}


:root ui-footer .footer__group.footer__group--1 > div {
    flex: 1 1 auto; /* fill remaining space */
    width: auto;
}

    :root ui-footer .footer__group.footer__group--1 > div:last-of-type {
        flex: 0 0 24px;
        width: 24px;
    }

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--1 > div:last-of-type {
        flex: 0 0 40px;
        width: 40px;
    }
}

:root ui-footer .footer__group.footer__group--1 [part=social] {
    max-height: 24px;
}

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--1 [part=social] {
        max-height: 40px;
    }
}

:root ui-footer .footer__group.footer__group--1 .roundal.linkedin {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: var(--button-radius);
    height: var(--size-24);
    width: var(--size-24);
    --ui-icon-width: 12px;
    --ui-icon-color: var(--brand-color);
    padding: 0;
}

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--1 .roundal.linkedin {
        height: 40px;
        width: 40px;
        padding: 0;
    }
}

:root ui-footer .footer__group.footer__group--1 .roundal.linkedin ui-icon {
    width: 8px;
}

@media (min-width: 1200px) {
    :root ui-footer .footer__group.footer__group--1 .roundal.linkedin ui-icon {
        width: 18px;
    }
}


:root ui-footer .footer__group.footer__group--1 p {
    font-size: var(--size-12);
    line-height: var(--size-16);
}

@media (min-width: 1200px) {

    :root ui-footer .footer__group.footer__group--1 p {
        font-size: 17.5px;
        line-height: var(--size-24);
    }
}




:root ui-footer .footer__group:not([part=social]) ui-nav {
    --ui-nav-gap-mobile: 8px;
}

:root ui-footer ui-nav ui-nav-item {
    --ui-nav-item-font-size: 12px;
    --ui-nav-item-line-height: 16px;
}

@media (min-width: 1200px) {
    :root ui-footer ui-nav ui-nav-item {
        --ui-nav-item-font-size: 18px;
        --ui-nav-item-line-height: 24px;
    }
}


ui-footer .footer__group.footer__group--0 h4 {
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 12px;
}

@media (min-width: 1200px) {
    ui-footer .footer__group.footer__group--0 h4 {
        font-size: 21px;
        line-height: 32px;
        margin-bottom: 37px;
    }
}

.theme-switcher {
    width: 102px;
    display: flex !important;
    align-items: center;
    gap: 5px;
    color: var(--ink-color); /* drives currentColor */
}

.theme-switcher {
    stroke: currentColor;
    fill: currentColor;
}

    .theme-switcher .light, .theme-switcher .dark {
        cursor: pointer;
    }

    .theme-switcher .light {
        fill: var(--theme-switcher-light-fill);
    }

    .theme-switcher .dark {
        fill: var(--theme-switcher-dark-fill);
    }

.theme-switcher__toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}

    .theme-switcher__toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .theme-switcher__toggle span {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: var(--theme-switcher-toggle-bg);
        border-radius: var(--button-radius);
        transition: background 0.2s;
    }

        .theme-switcher__toggle span::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            left: 2px;
            top: 2px;
            background: var(--theme-switcher-toggle-color);
            border-radius: var(--button-radius);
            transition: transform 0.2s;
        }

    .theme-switcher__toggle input:checked + span::before {
        transform: translateX(18px);
    }

.hero2 {
    position: relative;
    margin-top: calc(var(--site-header-height) * -1);
    overflow: hidden;
}

    .hero2 > *:not(.hero2__bg) {
        position: relative;
        z-index: 1;
    }

@media (min-width: 965px) {
    .hero2 {
        min-height: auto;
    }
}

@media (min-width: 1200px) {
    .hero2 {
        margin-top: calc(var(--site-header-height--lg) * -1);
    }
}

.hero2__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--hero2-bg-image);
    background-repeat: no-repeat;
    background-size: 1440px 748px;
    background-position: -260px -46px;
}
.hero2__bg--video {
    background-image: var(--hero2-bg-image-video);
    background-size: cover;
    background-position: 0;
}

.hero2__video {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero2__grid {
    display: grid;
    grid-template-columns: 1fr 60px;
    grid-template-rows: auto auto;
    grid-column-gap: 46px;
    grid-row-gap: 46px;
    overflow: visible;
    padding: 46px 16px;
    max-width: 1316px;
    margin-inline: auto;
    width: 100%;
    margin-top: var(--site-header-height);
}

    .hero2__grid:has(.hero2__1 + .hero2__2-1 + .hero2__3-1) {
        grid-template-rows: auto auto auto;
    }

@media (max-width: 1199px) {
    .hero2__grid:has(.hero2__1 + .hero2__3-2) {
        grid-row-gap: 16px;
    }

    .hero2__grid:has(.hero2__1 + .hero2__2-1 + .hero2__3-1) {
        grid-row-gap: 32px;
    }
}

@media (min-width: 1200px) {
    .hero2__grid {
        padding: 0 16px 80px;
        align-items: flex-start;
        grid-template-columns: 1fr 80px;
        grid-row-gap: 56px;
        margin-top: var(--site-header-height--lg);
    }
}

@media (min-width: 1360px) {
    .hero2__grid {
        padding-left: 0;
        padding-right: 0;
    }
}



@media (min-width: 965px) {
    .hero2__bg {
        background-size: cover;
        background-position: 0;
    }
}


.hero2__1 {
    grid-column: 1 / -1;
    grid-row: 1;
}

@media (min-width: 965px) {
    .hero2__1, .hero2__2-1, .hero2__3-1 {
        grid-column: 1;
    }

    .hero2__2-1--1 {
        min-height: 46px;
    }
}

.hero2__2-1,
.hero2__3-1 {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero2__3-2 {
    grid-column: 2;
    align-self: end;
    justify-self: center;
    display: flex;
    flex-direction: column;
}

@media (max-width: 964.9px) {
    .hero2__2-1:has(+ .hero2__3-1) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 965px) {
    .hero2__3-2 {
        grid-row: 1 / -1;
    }
}


.hero__content {
    display: block;
    color: var(--hero2-heading-color);
    max-width: 940px;

    h1, p {
        font-size: clamp( calc(var(--font-size-min) * 1px), calc( (var(--font-size-min) * 1px) + calc(var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--clamp-min) * 1px)) / var(--clamp-range)) ), calc(var(--font-size-max) * 1px) );
        line-height: clamp( calc(var(--line-height-min) * 1px), calc( (var(--line-height-min) * 1px) + calc(var(--line-height-max) - var(--line-height-min)) * ((100vw - (var(--clamp-min) * 1px)) / var(--clamp-range)) ), calc(var(--line-height-max) * 1px) );
    }


    h1 {
        --font-size-min: 28;
        --line-height-min: 40;
        --font-size-max: 56;
        --line-height-max: 72;
        margin: 0;
        font-weight: 400;
        max-width: 100%;
        color: inherit;
    }

    @media (min-width: 1200px) {
        h1 {
            position: relative;
            top: -8px;
        }
    }

    p {
        --font-size-min: 16;
        --line-height-min: 24;
        --font-size-max: 24;
        --line-height-max: 36;
        text-wrap: balance;
    }

    h1:empty {
        display: none;
    }

    p:last-of-type {
        margin-bottom: 0;
    }
}

.hero2--has-snippet .hero__content {
    h1 {
        --font-size-min: 28;
        --line-height-min: 40;
        --font-size-max: 40;
        --line-height-max: 56;
    }

    p {
        --font-size-min: 12;
        --line-height-min: 20;
        --font-size-max: 16;
        --line-height-max: 28;
    }
}

.hero2 a.hero2__btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--button-radius);
    background: var(--hero2-btn-bg);
    color: var(--hero2-btn-color);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    width: 80%;
    min-width: 200px;
    max-width: 80%;
    justify-self: start; /* left aligned in the cell */
}

@media (min-width: 480px) {
    .hero2 a.hero2__btn {
        max-width: min(400px, 80%);
        justify-self: center;
    }
}

@media (min-width: 1200px) {
    .hero2 a.hero2__btn {
        max-width: 288px;
    }
}



.hero2__3-2 > .hero2__tag {
    display: block;
    width: 58px;
    height: 95px;
    margin-top: auto;
    background-image: var(--hero2-tag-image);
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 1200px) {
    .hero2__3-2 > .hero2__tag {
        width: 80px;
        height: 126px;
    }
}


.hero3 {
    display: grid;
    gap: 42px;
    align-items: start;
    overflow: visible;
    position: relative;
    max-width: 1328px;
    margin-inline: auto;
    padding: 72px 16px;
    width: 100%;
}

@media (min-width: 1200px) {
    .hero3 {
        padding: 86px 16px 0;
        gap: 70px;
    }
}

.hero3__tag {
    font-size: clamp(12px, 1vw + 8px, 24px);
    line-height: clamp(24px, 2vw + 16px, 32px);
    font-family: var(--font-title);
    color: var(--hero2-tag-color);
}

.hero3 .hero__content strong {
    color: #64AC88;
}

@media (min-width: 1200px) {
    .hero3__tag {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 24px;
        line-height: 32px;
    }
}

.hero3__tag strong {
    color: var(--brand-color)
}

@media (min-width: 1200px) {
    .hero3__1 {
        position: absolute;
        right: 18px;
        bottom: 7px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


.hero3__snippet p {
    text-wrap: balance;
    font-family: var(--font-title);
    font-size: clamp(18px, calc(12px + 1.5vw), 24px);
    line-height: clamp(24px, calc(18px + 1.5vw), 36px);
}

@media (min-width: 1200px) {
    .hero3 .hero__content, .hero3 .hero3__snippet {
        display: block;
        justify-self: start;
        width: 1070px;
    }
}

.hero3__snippet p:last-of-type {
    margin-bottom: 0;
}

.hero3 .hr-shout {
    margin: 8px 0 !important;
}

@media (min-width: 1200px) {
    .hero3 .hr-shout {
        margin: 16px 0 !important;
    }
}



#main {
    background-color: var(--main-bg);
    transition: none;
}

    #main > .main-content {
        background-color: transparent;
    }
/*
div[data-content-element-type-alias="twoColumns"],
div[data-content-element-type-alias="sectionIntroducer"] {
    max-width: 1296px;
}*/
.introSection {
    max-width: 1296px;
    margin: 0 auto;
}

.introSection__inner {
}

.introSection h1, .introSection h2, .introSection h3, .introSection h4, .introSection h5, .introSection h6 {
    font-weight: 400 !important;
    color: var( --heading-color) !important;
}

.introSection h2 {
    font-size: clamp(24px, 4vw, 40px);
    line-height: clamp(32px, 4.2vw, 44px);
    margin-bottom: 0;
    color: var( --heading-color) !important;
}

    .introSection h2:has( + p) {
        margin-bottom: 20px;
    }

.introSection .heading--with-logo {
    display: flex;
    align-items: center;
}


    .introSection .heading--with-logo::before {
        content: "";
        height: 20px;
        flex: 0 0 40px;
        background-image: var(--heading-logo-url);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: auto 100%;
    }

@media (min-width: 700px) {
    .introSection .heading--with-logo::before {
        content: "";
        height: 32px;
        flex: 0 0 64px;
    }
}

.introSection .h2--logo {
    padding-left: 64px;
}

.introSection p {
    color: var(--ink-color) !important;
}

@media (min-width: 700px) {
    .introSection p {
        text-wrap: balance;
        font-size: calc(var(--font-size-body-m) + 2px) !important;
        line-height: 36px !important;
        margin-bottom: 0 !important;
        max-width: 800px;
    }
}

.icon-card-grid {
    display: grid;
    gap: 48px;
    max-width: 1296px;
    margin: 0 auto;
}

@media (min-width: 700px) {
    .icon-card-grid {
        grid-template-columns: 1fr 1fr;
    }

        .icon-card-grid[data-child-count="1"] {
            grid-template-columns: 1fr;
        }

            .icon-card-grid[data-child-count="1"] .card {
                max-width: 440px;
            }

        .icon-card-grid[data-layout-cols="2"] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .icon-card-grid[data-layout-cols="3"] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        /* still 2 on tablet */
        .icon-card-grid[data-layout-cols="4"] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    /* still 2 on tablet */
}

@media (min-width: 1140px) {
    /* 1 item */
    .icon-card-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

        .icon-card-grid[data-child-count="1"] {
            grid-template-columns: 1fr;
        }

        .icon-card-grid[data-child-count="2"],
        .icon-card-grid[data-child-count="4"] {
            grid-template-columns: 1fr 1fr;
        }

        .icon-card-grid[data-layout-cols="2"] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .icon-card-grid[data-layout-cols="3"] {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .icon-card-grid[data-layout-cols="4"] {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
}



.icon-card-grid .icon-card,
.icon-card-grid .icon-card-image-only {
    background-color: var(--icon-bg);
    border-radius: var(--card-border-radius-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 1px 1.5px var(--icon-border-color), var(--icon-shadow);
    opacity: 0;
    transform: translateY(20px);
    animation: card-in 0.4s ease-out forwards;
    animation-delay: calc(var(--i) * 0.3s);
}

.icon-card-grid .icon-card {
    justify-content: flex-end;
    padding: 152px 40px 40px;
}

.icon-card-grid .icon-card-image-only {
    position: relative;
    overflow: hidden;
    min-height: 350px;
    border: var(--card-border);
}

@media (max-width: 699.5px) {
    .icon-card-image-only + .icon-card-image-only {
        display: none;
    }

    .icon-card-image-only {
        order: var(--icon-image-only-order);
    }
}


.icon-card-grid .icon-card-image-only img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icon-card-grid .icon-card__corner {
    left: -0.5px;
    top: -0.5px;
    position: absolute;
    background-color: var(--main-bg);
    background-image: var(--icon-card-url);
    background-position: top left;
    width: 380px;
    height: 408px;
    clip-path: polygon(0 0, 40% 0, 40% 38%, 0 38%);
}

.icon-card-grid .icon-card:before {
    content: "";
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    left: 40px;
    top: 40px;
    background-size: cover;
}

.icon-card-grid .icon-card:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    right: 44px;
    top: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='187.625 24.089 21.219 21.219' width='21.219px' height='21.219px'%3E%3Crect x='187.625' y='24.089' width='21.219' height='21.219' rx='20' fill='%23D64136' style='stroke-width: 1;' transform='matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)'%3E%3C/rect%3E%3Cpath d='M 195.749 30.36 C 195.468 30.363 195.226 30.604 195.222 30.882 C 195.219 31.159 195.456 31.354 195.736 31.351 L 200.937 31.287 L 193.932 38.269 C 193.73 38.47 193.725 38.788 193.923 38.983 C 194.121 39.179 194.441 39.175 194.643 38.974 L 201.648 32.032 L 201.585 37.185 C 201.581 37.463 201.818 37.698 202.098 37.694 C 202.378 37.691 202.582 37.411 202.585 37.133 L 202.663 30.751 C 202.664 30.672 202.665 30.632 202.626 30.553 C 202.587 30.434 202.469 30.317 202.349 30.279 C 202.27 30.24 202.23 30.241 202.15 30.242 L 195.749 30.32 L 195.749 30.36 Z' fill='white' style='stroke-width: 1;' transform='matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    background-size: cover;
}




.icon-card-grid .icon-card__content {
    position: relative;
    z-index: 3;
}

    .icon-card-grid .icon-card__content h3 {
        --title-margin-bottom: 10px;
        color: var( --heading-color) !important;
    }

.icon-card-grid .icon-card__content--no-link {
    margin-bottom: 0 !important;
}

.icon-card-grid .icon-card__content p {
    --body-text-margin-bottom: 40px;
    line-height: 24px !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: normal;
    color: var(--ink-color) !important;
}

@media (min-width: 700px) {
    .icon-card-grid .icon-card__content p {
        height: 96px;
    }
}

.icon-card-grid .icon-card__button {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 25px;
    background-color: #000;
    color: #fff;
    transition: 0.3s background-color;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--font-title);
    line-height: 24px;
    letter-spacing:-0.1px
}

.icon-card-grid .icon-card:hover .icon-card__button {
    background-color: #e03c21;
}

.icon-card-grid .icon-card--lightning:before {
    background-image: var(--icon-lightning-url);
}

.icon-card-grid .icon-card--aichip:before {
    background-image: var(--icon-aichip-url);
}

.icon-card-grid .icon-card--sliders:before {
    background-image: var(--icon-sliders-url);
}

.icon-card-grid .icon-card--lightbulb:before {
    background-image: var(--icon-lightbulb-url);
}

.icon-card-grid .icon-card--cloud:before {
    background-image: var(--icon-cloud-url);
}

.icon-card-grid .icon-card--squares:before {
    background-image: var(--icon-squares-url);
}

.icon-card-grid .icon-card--pie:before {
    background-image: var(--icon-pie-url);
}

.icon-card-grid .icon-card--arrow:before {
    background-image: var(--icon-arrow-url);
}

.icon-card-grid .icon-card--code:before {
    background-image: var(--icon-code-url);
}

.icon-card-grid .icon-card--wletter:before {
    background-image: var(--icon-wletter-url);
}

@keyframes card-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nl {
    max-width: 1296px;
    margin: auto;
    border-radius: 20px;
    background: var(--nl-card-bg);
    color: #fff;
    padding: 42px 24px 36px 24px;
}

@media (min-width: 660px) {
    .nl {
        padding: 32px 24px 38px 24px;
        border-radius: 42px;
    }
}

.nl h4.umbraco-forms-caption {
    text-align: center;
    font-weight: 300 !important;
    font-size: clamp(40px, 4.6vw, 56px) !important;
    line-height: clamp(55px, 4.6vw, 64px) !important;
    margin-bottom: 40px !important;
    text-transform: uppercase;
    font-family: var(--font-title) !important;
    color: #fff !important;
    text-wrap: balance;
}

@media (min-width: 660px) {
    .nl h4.umbraco-forms-caption {
        margin-bottom: 25px !important;
    }
}

.nl .umbraco-forms-fieldset .umbraco-forms-container {
    position: relative;
    display: grid;
    gap: 16px;
}

@media (min-width: 660px) {
    .nl .umbraco-forms-fieldset .umbraco-forms-container {
        column-gap: 24px;
        grid-template-columns: 320px 1fr;
        max-width: 504px;
        margin: 0 auto;
    }
}

.nl input[type="submit"], .nl input[type="email"] {
    height: 58px;
    border-radius: var(--button-radius);
    line-height: 28px;
    padding: 14px 24px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    border-width: 0;
    width: 100%;
}

    .nl input[type="email"]::placeholder {
        color: #fff;
        opacity: 0.9;
    }

.nl input[type="email"] {
    background: #d66b61;
    text-align: center;
}

@media (min-width: 660px) {
    .nl input[type="email"] {
        width: 320px;
        text-align: left;
    }
}

.nl input[type="submit"] {
    background: #000;
    cursor: pointer;
}

@media (min-width: 660px) {
    .nl input[type="submit"] {
        width: 160px;
    }
}

.nl .umbraco-forms-field.constent {
    padding: 7px 44px;
}

@media (min-width: 660px) {
    .nl .umbraco-forms-field.constent {
        padding: 0 35px;
    }
}

.nl .umbraco-forms-field.constent .umbraco-forms-field-wrapper {
    display: grid;
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    grid-template-columns: 24px 1fr;
}

@media (min-width: 660px) {
    .nl .umbraco-forms-field.constent .umbraco-forms-field-wrapper {
        column-gap: 17px;
        row-gap: 3px;
    }
}

.nl .umbraco-forms-field.constent .umbraco-forms-field-wrapper .field-validation-error {
    grid-column: 1 / -1; /* spans all columns */
}

.nl .umbraco-forms-field.constent label {
    font-size: 13px !important;
    line-height: 18px !important;
}

@media (min-width: 660px) {
    .nl .umbraco-forms-field.constent label {
        font-size: 16px !important;
        line-height: 24px !important;
    }
}

@media (min-width: 660px) {
    .nl .umbraco-forms-field.constent {
        grid-column: 1 / -1;
    }
}

.nl .checkbox-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    outline: 1px solid #fff;
    border-radius: 7px;
    outline-offset: -1px;
    overflow: hidden;
}

    .nl .checkbox-wrap:has(input[type="checkbox"]:checked) {
        outline: 1px solid #000;
    }

.nl input[type="checkbox"] {
    width: 26px;
    height: 26px;
    border-width: 0;
    border-radius: 8px;
}

.nl input[type=checkbox]:checked {
    accent-color: #000;
}

.nl .emailaddress label, .visually-hidden, .nl .umbraco-forms-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nl .o-form-group__indicator {
    display: none;
}

.nl .field-validation-error {
    margin: 0 34px;
    display: block;
    font-size: 12px;
    color: yellow;
}

@media (min-width: 660px) {
    .nl .field-validation-error {
        text-align: left;
        margin: 0 41px;
    }
}

.nl .emailaddress .field-validation-error {
    text-align: center;
    margin-top: 2px;
}

@media (min-width: 660px) {
    .nl .emailaddress .field-validation-error {
        margin: 0 24px;
    }
}



.nl .o-form-group {
    margin-bottom: 20px;
}

@media (min-width: 660px) {
    .nl .o-form-group {
        margin-bottom: 0;
    }
}

.nl .o-form-group.checkbox .field-validation-error {
    margin-left: 40px;
    margin-top: -4px;
}

@media (min-width: 660px) {
    .nl .o-form-group.checkbox {
        position: absolute;
        bottom: -32px;
        width: 460px;
        height: 54px
    }
}

.hr-shout {
    border: 0;
    height: 19px;
    width: 100%;
    padding: 0;
    margin-block: 0;
    background-image: var(--hr-url);
    background-repeat: no-repeat;
    background-position: center;
}

.hr-shout--small {
    margin-block: clamp(4px, 1vw, 8px);
}

.hr-shout--medium {
    margin-block: clamp(8px, 2vw, 16px);
}

.hr-shout--large {
    margin-block: clamp(16px, calc(2.2px + 4.32vw), 54px)
}

.hr-shout--xlarge {
    margin-block: clamp(32px, 6vw, 64px);
}

.cs-spot, .cs-spot__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
    max-width: 1296px;
    margin: 0 auto;
}

.cs-spot__items {
    grid-row-gap: 40px;
    justify-items: start;
    padding-bottom: var(--cs-spot-padding-bottom);
}

@media (min-width: 700px) {
    [layout="3-cards-per-row"],
    [layout="left-with-3-by-side"] {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 48px;
    }
}

@media (min-width: 1100px) {
    [layout="left-with-3-by-side"] {
        grid-column-gap: 60px;
    }

    [layout="1-card-per-row"],
    [layout="3-cards-per-row"] {
        grid-row-gap: 80px;
    }
}

@media (min-width: 1200px) {
    [layout="left-with-3-by-side"] {
        grid-template-columns: 512px 1fr;
        grid-column-gap: 88px;
    }

    [layout="3-cards-per-row"] {
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 120px;
    }
}

.cs-spot__item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    max-width: none;
}

@media (min-width: 800px) {
    [layout="1-card-per-row"] .cs-spot__item {
        flex-direction: row;
        gap: 60px;
    }
}

@media (min-width: 1100px) {
    [layout="left-with-3-by-side"] .cs-spot__item {
        border-radius: var(--card-border-radius, 24px);
        padding: 0;
        flex-direction: row;
    }
}

@media (min-width: 1100px) {
    [layout="left-with-3-by-side"] .cs-spot__item--featured-left {
        flex-direction: column;
        height: 100%;
        gap: 26px;
    }

    [layout="left-with-3-by-side"] .cs-spot__item {
        grid-row: var(--i);
    }

    [layout="left-with-3-by-side"] .cs-spot__item--featured-left {
        grid-column: 1;
        grid-row: var(--card-index) / span 3;
    }
}

.cs-spot__image {
    flex: 1 0 33%;
    aspect-ratio: 540 / 385;
    background-repeat: no-repeat;
    background-color: var(--cs-spot-bg);
    background-size: cover;
    background-position: center center;
    border-radius: var(--card-border-radius, 24px);
    display: block;
    border: var(--cs-spot-border);
    box-shadow: var(--cs-spot-shadow);
}

@media (min-width: 1100px) {
    [layout="left-with-3-by-side"] .cs-spot__image {
        flex: 1 0 216px;
        max-width: 216px;
    }

    [layout="1-card-per-row"] .cs-spot__item .cs-spot__image {
        flex: 1 0 50%;
        max-width: 50%;
    }
}

.cs-spot__item .cs-spot__image {
    width: 100%;
    max-width: 768px;
}

.cs-spot__content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    max-width: 768px;
    height: 100%;
}

@media (min-width: 800px) {
    [layout="1-card-per-row"] .cs-spot__content {
        justify-content: flex-end;
    }
}

.cs-spot__content h2,
.cs-spot__content h3 {
    --font-size-title-m: 24px;
    --font-spacing-title-m: 32px;
    --title-margin-bottom: 0;
    --title-margin-top: 0;
    text-transform: uppercase;
    color: var( --heading-color) !important;
}

@media (min-width: 800px) {
    [layout="1-card-per-row"] .cs-spot__content h3,
    [layout="1-card-per-row"] .cs-spot__content h2 {
        --font-size-title-m: 48px;
        --font-spacing-title-m: 64px;
        max-width: 300px;
    }
}

@media (min-width: 1100px) {
    .cs-spot__item--feature .cs-spot__content h2,
    .cs-spot__item--feature .cs-spot__content h3 {
        --font-size-title-m: 32px;
        --font-spacing-title-m: 44px;
    }
}

.cs-spot__content p {
    --body-text-margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 24px;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: normal;
    color: var(--ink-color) !important;
}

@media (min-width: 800px) {
    [layout="1-card-per-row"] .cs-spot__content p {
        max-width: 400px;
    }
}

.cs-spot__cta {
    display: flex;
    align-items: center;
    gap: 16px !important;
    margin-top: 8px;
    margin-bottom: 2px;
}

.cs-spot__button {
    flex: 0 0 auto;
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--button-radius);
    color: #fff !important;
    font-size: 18px;
    text-decoration: none;
    position: relative;
}

.cs-spot__button {
    background: #292929;
}

.cs-spot__round {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' transform='matrix(1 0 0 -1 0 40)' fill='%23D64136'/%3E%3Cpath d='M15.3141 28.179C14.7863 28.1726 14.3283 27.7186 14.3219 27.1955C14.3155 26.6724 14.7634 26.3043 15.2913 26.3107L25.0947 26.4308L11.8894 13.2679C11.5078 12.8896 11.5005 12.2918 11.8729 11.9227C12.2454 11.5537 12.8487 11.5611 13.2303 11.9393L26.4347 25.0275L26.3158 15.3125C26.3094 14.7894 26.7564 14.3465 27.2842 14.353C27.8121 14.3594 28.1956 14.8872 28.202 15.4103L28.3493 27.442C28.3511 27.5914 28.352 27.6662 28.2784 27.8147C28.2058 28.038 27.9823 28.2594 27.757 28.3313C27.6071 28.4042 27.5316 28.4033 27.3808 28.4015L15.3151 28.2537L15.3141 28.179Z' fill='white'/%3E%3C/svg%3E%0A");
}

.cs-spot__item--feature .cs-spot__button {
    background: #D64136;
}

.cs-spot__item--feature .cs-spot__round {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' transform='matrix(1 0 0 -1 0 40)' fill='%23292929'/%3E%3Cpath d='M15.3141 28.179C14.7863 28.1726 14.3283 27.7186 14.3219 27.1955C14.3155 26.6724 14.7634 26.3043 15.2913 26.3107L25.0947 26.4308L11.8894 13.2679C11.5078 12.8896 11.5005 12.2918 11.8729 11.9227C12.2454 11.5537 12.8487 11.5611 13.2303 11.9393L26.4347 25.0275L26.3158 15.3125C26.3094 14.7894 26.7564 14.3465 27.2842 14.353C27.8121 14.3594 28.1956 14.8872 28.202 15.4103L28.3493 27.442C28.3511 27.5914 28.352 27.6662 28.2784 27.8147C28.2058 28.038 27.9823 28.2594 27.757 28.3313C27.6071 28.4042 27.5316 28.4033 27.3808 28.4015L15.3151 28.2537L15.3141 28.179Z' fill='white'/%3E%3C/svg%3E%0A");
}

.cs-spot__cta:hover .cs-spot__button {
    opacity: 0.9;
}

.cs-spot__cta:hover .cs-spot__round {
    opacity: 0.8;
}

[data-content-element-type-alias="richTextEditorComponent"] li {
    margin-bottom: 10px;
}

[data-content-element-type-alias="richTextEditorComponent"] :is(h1, h2, h3, h4, h5, h6, ol, ul, table) {
    margin-bottom: 18px;
}

[data-content-element-type-alias="richTextEditorComponent"] p + h2 {
    padding-top: 24px;
}

.body--home ui-embed-video {
    margin-top: -20px;
    margin-bottom: -20px;
}

@media (min-width: 965px) {
    .body--home ui-embed-video {
        margin-top: -30px;
        margin-bottom: -30px;
    }
}

:root ui-filter-control{
    margin-bottom:46px;
}
:root ui-filter-control {
    @media (min-width: 965px) {
        margin-bottom: 80px;
    }
}



        :root .filter-list {
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch; /* iOS momentum */
            gap: 12px;
            align-items: center;
            column-gap: 8px;
            scrollbar-width: none;
            scroll-snap-type: x proximity;
            padding-left: 23px;
            margin: 0 -23px 0 -23px !important;
            background-color: var(--body-bg);
            padding: 0;
            max-width: 1296px
        }

        @media (min-width: 965px) {
            :root .filter-list {
                flex-wrap: wrap;
                overflow-x: visible; /* or hidden */
                white-space: normal;
                scroll-snap-type: none;
                column-gap: 14px;
                row-gap: 8px;
                padding-left: 0;
                margin: 0 auto !important;
            }
        }

        .filter-list::-webkit-scrollbar {
            display: none; /* WebKit */
        }

        .filter-list legend {
            color: var(--ink-color);
            font-family: var(--font-title);
            font-size: 20px;
            line-height: 24px;
            font-weight: bold;
            margin-bottom: 16px;
        }

        .filter-list .filter-list__filter-by {
            display: none;
        }

        @media (min-width: 965px) {
            .filter-list .filter-list__filter-by {
                color: var(--ink-color);
                font-family: var(--font-title);
                font-size: 20px;
                line-height: 24px;
                font-weight: bold;
                padding-right: 20px;
                display: block;
            }

            .filter-list legend {
                display: none;
            }
        }

        .filter-list label {
            background: var(--filter-list-option-bg) !important;
            color: var(--filter-list-option-color);
            border-radius: var(--filter-list-option-radius);
            transition: background-color 300ms ease;
            font-family: var(--font-title);
            font-size: 12px;
            line-height: 18px;
            padding: 7px 14px;
            white-space: nowrap;
            scroll-snap-align: start;
            font-weight: normal;
            border: 2px solid var(--filter-list-option-bg);
        }

        @media (min-width: 965px) {
            .filter-list label {
                font-size: 18px;
                font-weight: 400;
                line-height: 24px;
                padding: 8px 24px;
            }
        }

/*
        .filter-list .filter-list__show-all {
            appearance: none;
            height: 0;
            opacity: 0;
            position: absolute;
            width: 0;
        }*/
        /* hover - only when NOT selected */
        .filter-list input:not(:checked) + label:hover {
            border-color: var(--filter-list-option-bg-selected) !important;
            background: #515151 !important;
            color: var(--filter-list-option-color);
        }
        /* selected */
        .filter-list input:checked + label {
            border-color: var(--filter-list-option-bg-selected) !important;
            background: var(--filter-list-option-bg-selected) !important;
            color: var(--filter-list-option-color-selected);
        }
            /* selected + hover - faded */
            .filter-list input:checked + label:hover {
                background: var(--filter-list-option-bg-selected) !important;
            }
            /* optional - “mouse down” on selected - lean pinky */
            .filter-list input:checked + label:active {
                background: #af3c31 !important;
            }
        /* optional - keyboard focus */
        .filter-list input:focus-visible + label {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }

        .filter-list label:before {
            display: none;
        }

        @media (min-width: 1200px) {
            :root .body--domain .umb-block-grid {
                --umb-block-grid--areas-row-gap: 64px;
                --umb-block-grid--row-gap: 64px;
            }
        }
        /* --- base component --- */


        .stylised-list {
            display: grid;
            column-gap: 10px;
            padding: 0;
            width: 100%;
            max-width: 1296px;
            margin: 0 auto !important;
        }


        .stylised-list--grid {
            row-gap: 30px;
        }

        @media (min-width: 768px) {
            .stylised-list--grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 44px;
            }
        }


        .stylised-list li {
            position: relative;
            margin: 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            line-height: 1.8;
            padding: 0 0 0 37px;
            font-size: 16px;
            max-width: 920px;
        }


        .stylised-list--grid li {
            min-height: 84px;
            width: 80%;
            padding: 0 0 0 28px;
        }

        .stylised-list li p {
            margin: 0;
        }

        .stylised-list--row li:not(:last-of-type),
        .stylised-list--column li:not(:last-of-type) {
            gap: 8px;
            padding-bottom: 44px;
        }

        .stylised-list--row li:last-of-type,
        .stylised-list--column li:last-of-type {
            padding-bottom: 8px;
        }


        .stylised-list--row li,
        .stylised-list--column li {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

            .stylised-list---row li p:not(),
            .stylised-list--column li p:not() {
                font-size: 20px;
                font-weight: 600;
            }


        .stylised-list li .stylised-list__with-icon {
            display: flex;
            align-items: flex-start;
            gap: 25px;
        }

        .stylised-list .stylised-list__headline {
            display: flex;
            flex-direction: column
        }



        @media (min-width: 768px) {
            .stylised-list--grid li {
                width: 295px;
            }
        }

        .stylised-list li em {
            opacity: 0.5;
            font-style: normal;
        }

        .stylised-list--borderlefticontop li:before,
        .stylised-list--borderlefticonmiddle li:before {
            content: "";
            position: absolute;
            left: 6px;
            top: 0;
            bottom: 0;
            width: 1px;
        }

        .stylised-list--borderlefticonmiddle li:before {
            background: linear-gradient( to bottom, currentColor 0, currentColor calc(50% - 8px), transparent calc(50% - 8px), transparent calc(50% + 8px), currentColor calc(50% + 8px), currentColor 100% );
        }

        .stylised-list--borderlefticontop li:before {
            background: linear-gradient( to bottom, transparent 0, transparent 16px, currentColor 16px, currentColor 100%);
        }

        .stylised-list--borderlefticonmiddle li::after,
        .stylised-list--borderlefticontop li::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 13px;
        }

        .stylised-list--borderlefticonmiddle li::after {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAYAAADNo/U5AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFhSURBVHgBvVJLUsJAEJ2eqoStR2AralVYJLqccANPQDiBcILgCYgnAE9AeQEySwWryAKDO3MEtsFi2ul8MAQsd3TVVPrz3kz36wA7YeuOPUYEDwEmW5UO2jLaVOv8iCAcnwjkA6LXAGNaxxyQPoX9gMCGRRjlHxBxxx6dJK2EZSmAoCS0wnmbMXzOIoR+LG77B6SlsJoczLKNBJDfk5PiNwGT/EH0V8K2MpcIDTBD7TcpoRDb13IR/c5410TYLTX0gi5Icetyk5mefj7RR+ozqBLILuVropANinpiMKPPzmaw7jg+QxQUIPKXlnwL6iC9u64WwiNfAU8gH1T9KUQh1FcRkrIup0F3qHoliANMCVghhHkFN0QgfLanG/kulVau4GmgMSanwc1R2YFWrkeEbKZq7x/CGQIwvwipRSvHs8er2Xy4F4LVLHbtiU539wnAp9Zs8f9u9O8SxK6D+QXH9gMTb5rIBdylsQAAAABJRU5ErkJggg==) no-repeat left center;
        }

        .stylised-list--borderlefticontop li::after {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAYAAADNo/U5AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC4SURBVHgBvVJbDcMwDHQYFEIhjMEKYQxWBiuDlsHKYGUwDUEhTEOwMQgEz1at6hK5j6+elDi+81mWFSIHzPzgCRoL2oIUtZxi3DLcoPgN7/uS4YQG4wbgmtxQyvmaqLE0vgA+amPPwLOQNozYMMjViXa2mlcIoXdGryVcLf3QYdDxWomV5Uvj6Wi1pb+9i+B8sypUnpA1jLMBOjZgHI17AnchD7p+KMJv1NEaOP06ip72QAvNMHj6Hzg3VLsa6XgEAAAAAElFTkSuQmCC) no-repeat left top;
        }
        /* stylised-list--row*/

        .stylised-list--row .stylised-list__headline p {
            font-size: clamp(20px, 2.2vw, 24px);
            --text-colour: var(--brand-color) !important;
            color: var(--brand-color) !important;
        }

        @media (min-width: 1200px) {
            .stylised-list--row {
                display: flex;
                gap: 0;
            }


                .stylised-list--row li, .stylised-list--row li:last-of-type {
                    flex: 1 1 0;
                    padding-left: 0;
                    gap: 20px !important;
                    padding-bottom: 32px;
                }


                    .stylised-list--row li:before {
                        content: "";
                        left: 0;
                        top: 70px;
                        bottom: auto;
                        right: 0;
                        height: 1px;
                        width: 100%;
                        --inset: 16px;
                        --width: 1px;
                        background: linear-gradient( to right, transparent 0, transparent var(--inset), var(--ink-color) var(--inset), var(--ink-color) 100% );
                    }

                    .stylised-list--row li::after {
                        transform: rotate(90deg);
                        top: 64px;
                        bottom: auto;
                        left: -4px;
                        width: 20px;
                        height: 20px;
                    }

                    .stylised-list--row li .stylised-list__with-icon {
                        flex-direction: column;
                        gap: 64px;
                    }

                    .stylised-list--row li .icon {
                        --icon-size: 40px
                    }

                    .stylised-list--row li p {
                        max-width: 250px;
                    }
        }



        .btn-list {
            display: grid;
            gap: 16px;
            margin-top: auto;
            justify-items: start;
            align-items: start;
        }

            .btn-list ui-button {
                width: 100%;
                padding-top: 12px;
                padding-bottom: 12px;
            }

        @media (min-width: 768px) {
            .btn-list[count="2"] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                row-gap: 80px;
            }

                .btn-list[count="3"] ui-button,
                .btn-list[count="2"] ui-button {
                    padding: 12px;
                }

            .btn-list[count="3"] {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                row-gap: 40px;
            }
        }

        .two-columns {
            display: flex;
            align-items: stretch;
            gap: 44px;
            max-width: 100%;
            max-width: 1296px;
            margin: 0 auto;
        }

        .flex--align-start {
            align-items: flex-start;
        }

        .flex--align-center {
            align-items: center;
        }

        .flex--align-end {
            align-items: flex-end;
        }

        .flex--align-stretch {
            align-items: stretch;
        }

        .two-columns.flex--align-center .two-columns__col {
            justify-content: center; /* vertical, because column */
        }

        .two-columns.flex--align-start .two-columns__col {
            justify-content: flex-start;
        }

        .two-columns.flex--align-end .two-columns__col {
            justify-content: flex-end;
        }

        .two-columns.flex--align-stretch .two-columns__col {
            justify-content: stretch;
        }

        .two-columns__col img {
            border-radius: var(--card-border-radius, 24px);
            border: var(--card-border);
            box-shadow: var(--card-box-shadow);
        }
        /* allow content to shrink properly - prevents overflow in flex items */
        .two-columns__col {
            --tc-gap: 44px;
            display: flex;
            flex-direction: column;
            align-self: stretch;
            min-width: 0;
            gap: var(--tc-gap);
        }

            .two-columns__col p:last-of-type {
                margin-bottom: 0;
            }

        .two-columns__col-1 {
            flex: 1 0 calc(var(--tc-col1, 50%) - (var(--tc-gap) / 2));
        }

        .two-columns__col-2 {
            flex: 0 1 calc(var(--tc-col2, 50%) - (var(--tc-gap) / 2));
        }
        /* --- layout utilities --- */

        .two-columns--25-75 {
            --tc-col1: 25%;
            --tc-col2: 75%;
        }

        .two-columns--50-50 {
            --tc-col1: 50%;
            --tc-col2: 50%;
        }

        .two-columns--75-25 {
            --tc-col1: 75%;
            --tc-col2: 25%;
        }
        /* --- stack utilities --- */
        /* choose breakpoints that match your system - adjust if needed */
        @media (max-width: 767.9px) {
            .two-columns--stack-mobile.two-columns {
                flex-direction: column;
            }

                .two-columns--stack-mobile.two-columns .two-columns__col-1,
                .two-columns--stack-mobile.two-columns .two-columns__col-2 {
                    flex-basis: 100%;
                }
        }

        @media (max-width: 1199.9px) {
            .two-columns--stack-tablet.two-columns {
                flex-direction: column;
            }

                .two-columns--stack-tablet.two-columns .two-columns__col-1,
                .two-columns--stack-tablet.two-columns .two-columns__col-2 {
                    flex-basis: 100%;
                }
        }
        /* reverse via order - works whether stacked or not */
        @media (max-width: 767.9px) {
            .two-columns--reverse-mobile.two-columns .two-columns__col-1 {
                order: 2;
            }

            .two-columns--reverse-mobile.two-columns .two-columns__col-2 {
                order: 1;
            }
        }

        @media (max-width: 1199.9px) {
            .two-columns--reverse-tablet.two-columns .two-columns__col-1 {
                order: 2;
            }

            .two-columns--reverse-tablet.two-columns .two-columns__col-2 {
                order: 1;
            }
        }

        .icon {
            display: inline-block;
            width: var(--icon-size, 24px);
            height: var(--icon-size, 24px);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .icon--small {
            --icon-size: 24px;
        }

        .icon--aichip {
            background-image: var(--icon-brand-aichip-url);
        }

        .icon--arrow {
            background-image: var(--icon-brand-arrow-url);
        }

        .icon--chat {
            background-image: var(--icon-brand-chat-url);
        }

        .icon--cloud {
            background-image: var(--icon-brand-cloud-url);
        }

        .icon--code {
            background-image: var(--icon-brand-code-url);
        }

        .icon--lightbulb {
            background-image: var(--icon-brand-lightbulb-url);
        }

        .icon--lightning {
            background-image: var(--icon-brand-lightning-url);
        }

        .icon--pie {
            background-image: var(--icon-brand-pie-url);
        }

        .icon--rocket {
            background-image: var(--icon-brand-rocket-url);
        }

        .icon--sliders {
            background-image: var(--icon-brand-sliders-url);
        }

        .icon--squares {
            background-image: var(--icon-brand-squares-url);
        }

        .icon--wletter {
            background-image: var(--icon-brand-wletter-url);
        }



        #stylised-list {
            background-image: radial-gradient( ellipse 1296px 868px at center, transparent 0%, var(--main-bg) 50%, var(--main-bg) 100% ), var(--stylised-list-bg);
            background-position: center, center;
            background-repeat: no-repeat;
            background-size: cover, 1440px 926px;
            pointer-events: none;
            margin: 0 -16px;
        }

        .color-black {
            color: #1E1E1E;
        }

        .color-white {
            color: #ffffff;
        }

        .color-brand {
            color: var(--brand-color) !important;
        }


        .color-current {
            color: var(--ink-color);
        }

        .image-grayscale img[slot=head] {
            filter: grayscale(100%);
        }

        .image-rounded img[slot=head] {
            border-radius: var(--card-border-radius, 24px);
        }

        :root ui-grid.card-landing[for^=content-card] {
            --ui-grid-gap: 44px;
        }

        .image-icon-overlay ui-content-card {
            position: relative;
        }

        .card-landing ui-content-card h3,
        .card-landing ui-content-card P {
            font-size: 16px;
            line-height: 24px;
        }

        .card-landing ui-content-card > img[slot="head"] {
            transform: scale(1);
            transition: transform 180ms ease;
            transform-origin: center;
            display: block;
        }

        .card-landing .ui-content-card__link:hover img[slot="head"],
        .card-landing .ui-content-card__link:focus-within img[slot="head"] {
            transform: scale(1.035);
        }

        .card-landing .ui-content-card__link:hover h3 {
            text-decoration: underline var(--brand-color) !important;
            font-weight: 600;
        }

        .card-landing ui-content-card h3 {
            color: var(--brand-color) !important;
        }


        .card-landing ui-content-card p:first-of-type:not(:last-of-type) {
            margin-bottom: 24px !important;
        }

        .card-landing ui-content-card img {
            margin-bottom: 36px;
        }
        /* overlay icon - starts hidden by scale */
        .image-icon-overlay ui-content-card::after {
            content: "";
            position: absolute;
            width: 40px;
            height: 40px;
            right: 18px;
            top: 15px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='187.625 24.089 21.219 21.219' width='21.219px' height='21.219px'%3E%3Crect x='187.625' y='24.089' width='21.219' height='21.219' rx='20' fill='%23D64136' style='stroke-width: 1;' transform='matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)'%3E%3C/rect%3E%3Cpath d='M 195.749 30.36 C 195.468 30.363 195.226 30.604 195.222 30.882 C 195.219 31.159 195.456 31.354 195.736 31.351 L 200.937 31.287 L 193.932 38.269 C 193.73 38.47 193.725 38.788 193.923 38.983 C 194.121 39.179 194.441 39.175 194.643 38.974 L 201.648 32.032 L 201.585 37.185 C 201.581 37.463 201.818 37.698 202.098 37.694 C 202.378 37.691 202.582 37.411 202.585 37.133 L 202.663 30.751 C 202.664 30.672 202.665 30.632 202.626 30.553 C 202.587 30.434 202.469 30.317 202.349 30.279 C 202.27 30.24 202.23 30.241 202.15 30.242 L 195.749 30.32 L 195.749 30.36 Z' fill='white' style='stroke-width: 1;' transform='matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)'%3E%3C/path%3E%3C/svg%3E") no-repeat;
            background-size: cover;
            pointer-events: none;
        }

        .image-icon-overlay .ui-content-card__link ui-content-card:after {
            transform: scale(0);
            transform-origin: center;
            transition: transform 180ms ease;
        }

        .image-icon-overlay .ui-content-card__link:hover ui-content-card:after,
        .image-icon-overlay .ui-content-card__link:focus-within ui-content-card:after {
            transform: scale(1);
        }


        .faq__list {
            display: grid;
            row-gap: 16px;
        }

        .faq {
            border-radius: var(--card-border-radius, 24px);
            border: var(--card-border);
            background: var(--card-bg);
            padding: 21px;
            box-shadow: var(--card-box-shadow);
        }

        .faq__summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            list-style: none;
            cursor: pointer;
            gap: 8px;
        }

        @media (min-width: 480px) {
            .faq__summary {
                gap: 16px;
            }
        }

        .faq__q {
            font-weight: 600;
            color: var(--ink-color);
        }

        .faq__summary::-webkit-details-marker {
            display: none;
        }

        .faq[open] .faq__answer {
            padding-top: 20px;
        }

            .faq[open] .faq__answer p {
                max-width: 980px;
            }

                .faq[open] .faq__answer p:last-of-type {
                    margin-bottom: 0
                }

        .faq__icon {
            position: relative;
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            transform-origin: 50% 50%;
            transition: transform 180ms ease-out;
        }

            .faq__icon::before,
            .faq__icon::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                width: 24px;
                height: 2px;
                transform: translate(-50%, -50%);
                background: var(--brand-color);
            }

            .faq__icon::after {
                width: 2px;
                height: 24px;
            }

        .faq[open] .faq__icon {
            transform: rotate(135deg);
        }



        p:empty {
            display: none;
        }

        .banner {
            border-radius: var(--card-border-radius-lg);
            border: var(--card-border);
            box-shadow: var(--card-box-shadow);
            background-image: var(--banner-bg-image);
            background-repeat: no-repeat;
            background-size: 1440px 748px;
            color: #fff;
            padding: 42px 24px;
        }

        @media (min-width: 1024px) {
            .banner {
                padding: 42px 64px;
            }
        }


        @media (min-width: 980px) {
            .banner h1 {
                max-width: 940px;
            }

            .banner .btn-list {
                gap: 24px;
            }
        }


        .banner {
            display: flex;
            flex-direction: column;
            gap: 40px;
            text-align: center;
            align-items: center;

            ui-button[look=outline-secondary] {
                --ui-button-color: #fff !important;
                --ui-button-border: var(--ui-button-border-size) var(--ui-button-border-style) #fff !important;
            }

            h1, .title-xxl, h2, .title-xl, h3, .title-l, h4, .title-m, p, .title-s, strong {
                color: #fff !important;
            }

            h1, .title-xxl, h2, .title-xl, h3, .title-l, h4, .title-m, p, .title-s {
                margin: 0;
                font-weight: 200;
                line-height: 1.6;
                max-width: 100%;
                color: inherit;
                margin-bottom: 0;
            }


            h1, .title-xxl {
                font-size: clamp(24px, 3.6vw + 12px, 56px) !important;
                line-height: clamp(40px, 3.6vw + 18px, 64px) !important;
            }

            h2, .title-xl {
                font-size: clamp(28px, 3.8vw, 38px);
            }

            h3, .title-l {
                font-size: clamp(24px, 3.2vw, 32px)
            }

            h4, .title-m {
                font-size: clamp(22px, 2.6vw, 28px);
            }

            p, .title-s {
                font-size: clamp(20px, 2.2vw, 24px);
            }
        }

            .banner p {
                margin-top: 32px;
            }

        @media (min-width: 1200px) {
            .banner h1 {
                max-width: 940px;
            }
        }

        .banner--left {
            align-items: flex-start;
            text-align: left;
        }

        .banner--right {
            align-items: flex-end;
            text-align: right;
        }
/*existing */
:root [data-area-alias="right"] ui-container[breakpointXlarge] {
    --ui-container-container-padding: 0;
}

@media only screen and (min-width: 965px) {
    :root [data-area-alias="right"] ui-container[breakpointXlarge] {
        --ui-container-container-width: 300px;
        --ui-container-container-padding: 0;
    }
}

@media only screen and (min-width: 1200px) {
    :root [data-area-alias="right"] ui-container[breakpointXlarge] {
        --ui-container-container-width: 356px;
    }
}

:root #main h4 {
    --font-size-body-l: 28px
}



:root #site-header ui-overlay.menu-overlay[state=closing],
:root #site-header ui-overlay.menu-overlay[state=opening] {
    overflow: clip;
}

:root #site-header ui-overlay.menu-overlay::part(container) {
    height: auto;
}

:root #site-header ui-overlay.menu-overlay {
    flex-direction: column;
    display: flex;
}

    :root #site-header ui-overlay.menu-overlay[state="open"] {
        height: calc(100vh - var(--ui-header-height-desktop));
    }

:root .video-with-transcript ui-embed-video[autoplay="true"][clicktoplay="true"]::part(play) {
    display: none;
}

:root .video-row {
    margin-left: var(--ui-video-row-margin-x);
    margin-right: var( --ui-video-row-margin-x);
}

ui-embed-video[autoplay="true"][clicktoplay="true"]::part(play) {
    display: none;
}


        ui-filtered-data:has(ui-dynamic-rendering[tag*="cs-spot__items"]) {
            min-height: 100vh;
        }

        ui-dynamic-rendering[tag*="cs-spot__items"] {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.50s ease;
            min-height: 50vh;
        }

            ui-dynamic-rendering[tag*="cs-spot__items"] > * {
                /*overflow: hidden;*/
            }

            ui-dynamic-rendering[tag*="cs-spot__items"]:has(.cs-spot__items) {
                grid-template-rows: 1fr;
            }
