:root {
    --wrapper-width: 1400px;

    --nav-height: 145px;
    --header-info-bar-height: 167px;

    --edge-padding: 48px;
    --edge-padding-large: 120px;

    --border-radius: 24px;
    --border-radius-small: 13px;

    --transition-hover-config: 0.2s ease;
    --transition-text: color var(--transition-hover-config);
}

:root {
    --color-background: #f4f2ed;
    --color-red: #e52559;
    --color-brown: #ae9d8f;
    --color-brown-text: #4a433c;
    --color-brown-footer: #e4e0d5;

    --color-brown-title: #9c8876;
    --color-text-hover: #9c8876;
}

:root {
    --col1: calc((100% / 12) * 1);
    --col2: calc((100% / 12) * 2);
    --col3: calc((100% / 12) * 3);
    --col4: calc((100% / 12) * 4);
    --col5: calc((100% / 12) * 5);
    --col6: calc((100% / 12) * 6);
    --col7: calc((100% / 12) * 7);
    --col8: calc((100% / 12) * 8);
    --col9: calc((100% / 12) * 9);
    --col10: calc((100% / 12) * 10);
    --col11: calc((100% / 12) * 11);
    --col12: calc((100% / 12) * 12);
    --col1px: calc((var(--wrapper-width) / 12) * 1);
    --col2px: calc((var(--wrapper-width) / 12) * 2);
    --col3px: calc((var(--wrapper-width) / 12) * 3);
    --col4px: calc((var(--wrapper-width) / 12) * 4);
    --col5px: calc((var(--wrapper-width) / 12) * 5);
    --col6px: calc((var(--wrapper-width) / 12) * 6);
    --col7px: calc((var(--wrapper-width) / 12) * 7);
    --col8px: calc((var(--wrapper-width) / 12) * 8);
    --col9px: calc((var(--wrapper-width) / 12) * 9);
    --col10px: calc((var(--wrapper-width) / 12) * 10);
    --col11px: calc((var(--wrapper-width) / 12) * 11);
    --col12px: calc((var(--wrapper-width) / 12) * 12);
}

.wrapper {
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    width: var(--wrapper-width);
}

.col1 {
    width: var(--col1);
}

.col2 {
    width: var(--col2);
}

.col3 {
    width: var(--col3);
}

.col4 {
    width: var(--col4);
}

.col5 {
    width: var(--col5);
}

.col6 {
    width: var(--col6);
}

.col7 {
    width: var(--col7);
}

.col8 {
    width: var(--col8);
}

.col9 {
    width: var(--col9);
}

.col10 {
    width: var(--col10);
}

.col11 {
    width: var(--col11);
}

.col12 {
    width: var(--col12);
}

.col1px {
    width: var(--col1px);
}

.col2px {
    width: var(--col2px);
}

.col3px {
    width: var(--col3px);
}

.col4px {
    width: var(--col4px);
}

.col5px {
    width: var(--col5px);
}

.col6px {
    width: var(--col6px);
}

.col7px {
    width: var(--col7px);
}

.col8px {
    width: var(--col8px);
}

.col9px {
    width: var(--col9px);
}

.col10px {
    width: var(--col10px);
}

.col11px {
    width: var(--col11px);
}

.col12px {
    width: var(--col12px);
}

.alignRight {
    text-align: right;
    justify-content: flex-end;
}

.colAlignRight {
    justify-content: flex-end;
    margin-left: auto !important;
}

.alignCenter {
    text-align: center;
    justify-content: center;
}

.colAlignCenter {
    display: flex !important;
    justify-content: center !important;
}

.pullRight {
    margin-left: auto;
}

/* figtree-300 - latin */
@font-face {
    font-display: swap;
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/figtree-v9-latin-300.woff2") format("woff2");
}
/* figtree-regular - latin */
@font-face {
    font-display: swap;
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/figtree-v9-latin-regular.woff2") format("woff2");
}
/* figtree-italic - latin */
@font-face {
    font-display: swap;
    font-family: "Figtree";
    font-style: italic;
    font-weight: 400;
    src: url("fonts/figtree-v9-latin-italic.woff2") format("woff2");
}
/* figtree-600 - latin */
@font-face {
    font-display: swap;
    font-family: "Figtree";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/figtree-v9-latin-600.woff2") format("woff2");
}
/* figtree-600italic - latin */
@font-face {
    font-display: swap;
    font-family: "Figtree";
    font-style: italic;
    font-weight: 600;
    src: url("fonts/figtree-v9-latin-600italic.woff2") format("woff2");
}
/* magdalena-light-300 - latin */
@font-face {
    font-display: swap;
    font-family: "Magdalena Light";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/magdalena-light.woff2") format("woff2");
}
/* mellow-morning-400 - latin */
@font-face {
    font-display: swap;
    font-family: "Mellow Morning";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/mellowmorning-script.woff2") format("woff2");
}

@font-face {
    font-family: "icomoon";
    src:
        url("fonts/icomoon.ttf?bsmvb0") format("truetype"),
        url("fonts/icomoon.woff?bsmvb0") format("woff"),
        url("fonts/icomoon.svg?bsmvb0#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-icons_download:before {
    content: "\e908";
}
.icon-icon_caret_right:before {
    content: "\e907";
}
.icon-icon_arrow_down:before {
    content: "\e900";
}
.icon-icon_caret_down:before {
    content: "\e901";
}
.icon-icon_caret_left:before {
    content: "\e902";
}
.icon-icon_caret_right_red:before {
    content: "\e903";
}
.icon-icon_live:before {
    content: "\e904";
}
.icon-icon_phone:before {
    content: "\e905";
}
.icon-icon_phone_red:before {
    content: "\e906";
}

/*
    Light 300
    Regular 400
    Medium 500
    SemiBold 600
    Bold 700
    ExtraBold 800
*/

:root {
    --font-home-h1: 300 107px/115px "Magdalena Light", serif;
    --font-h1: 300 61px/66px "Magdalena Light", serif;
    --font-h2: 300 36px/48px "Magdalena Light", serif;
    --font-h3: 300 30px/38px "Magdalena Light", serif;

    --font-default: 400 19px/27px "Figtree", sans-serif;

    --font-quote: 300 36px/38px "Magdalena Light", serif;
    --font-nav: 600 15px/18px "Figtree", sans-serif;
    --font-call: 600 10px/12px "Figtree", sans-serif;
    --font-name: 400 40px/48px "Mellow Morning", cursive;
    --font-button: 600 15px/18px "Figtree", sans-serif;
}
@media screen and (max-width: 1900px) {
    :root {
    }
}
@media screen and (max-width: 1600px) {
    :root {
    }
}

@media screen and (max-width: 1280px) {
    :root {
    }
}

@media screen and (max-width: 760px) {
    :root {
    }
}

:root {
    dynamic-range-limit: standard;
}

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

*:not(dialog) {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* === Global/utility styles === */
html,
body {
    max-width: 100%;
}

body {
    background-color: var(--color-background);
    color: var(--color-brown-text);
    font: var(--font-default);

    overflow-x: hidden;
}

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

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

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

a {
    color: inherit;
    transition: var(--transition-text);
}

a:hover {
    color: var(--color-text-hover);
}

a.link-button {
    font: var(--font-button);
    text-transform: uppercase;
    letter-spacing: 0.15em;

    color: inherit;
    text-decoration: none;

    text-wrap: nowrap;
    white-space: nowrap;
}

a.link-button:hover:not(.outline) {
    color: var(--color-text-hover);
}

a.link-button.outline {
    padding: 16px 20px;
    outline: 2px solid var(--color-brown-title);
    border-radius: 100vw;
    transition: background-color var(--transition-hover-config);
}

a.link-button.outline:hover {
    background-color: #c9bdb5;
}

a.red-link,
.submit-button {
    font: var(--font-button);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-red);
    text-decoration: none;
    cursor: pointer;
}

a.red-link:hover,
.submit-button:hover {
    color: var(--color-text-hover);
}

.download-link .icon {
    font-size: 24px;
    display: inline-flex;
    translate: 0px 4px;
}

section.brown {
    background-color: var(--color-brown);
}

section.white {
    background-color: white;
}

section.padded {
    padding-bottom: 128px;
}

.divider {
    width: 100px;
    height: 4px;
    background-color: var(--color-brown);
    margin-inline: auto;
    margin-bottom: 50px;
}

.card {
    padding: 45px 68px;
    border-radius: var(--border-radius);
    background-color: var(--color-background);
}

.card.upbreak {
    margin-top: -270px;
}

.card h2 {
    color: var(--color-red);
}

.card p:not(:first-child) {
    /*margin-top: 24px;*/
}

.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

blockquote {
    font: var(--font-quote);
    color: var(--color-red);
}

details {
    border-radius: var(--border-radius-small);
    background-color: white;
    filter: drop-shadow(0px 4px 12px rgb(0 0 0 / 0.08));
}

details::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition:
        content-visibility 0.4s allow-discrete,
        opacity 0.4s ease,
        block-size 0.4s ease;
}

details[open]::details-content {
    opacity: 1;
    block-size: auto;
}

details[open] .icon {
    rotate: 180deg;
}

/* Hides default Safari marker */
.accordion-header::-webkit-details-marker {
    display: none;
}

summary {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    padding: 30px;
    font: var(--font-h2);
    color: var(--color-brown);
    list-style: none;
}

summary .icon {
    text-align: center;
    margin-left: auto;
    transition: rotate 0.4s ease;
    transform-origin: center 40%;
}

.accordion-content {
    padding-inline: 30px;
    padding-bottom: 30px;
}

.footer-top {
    display: flex;
}

.footer-logo {
    width: 222px;
    height: auto;
    object-fit: contain;
    margin-left: var(--edge-padding-large);
}

.footer-nav {
    background-color: var(--color-brown-footer);
    padding: 80px;
    margin-left: var(--col1px);
    border-radius: 24px 0px 0px 24px;
    width: 100%;
    translate: 0 50px;
}

.footer-nav-column h2 {
    font: var(--font-nav);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.footer-nav-column-wrapper {
    display: flex;
    gap: 75px;
}

.footer-nav-column ul {
    list-style: none;
    padding: 0;
    margin-top: 12px;
}

.footer-nav-column a {
    text-decoration: none;
}

.footer-info-wrapper {
    display: flex;
    align-items: center;

    background-color: var(--color-brown-text);
    height: 340px;
    color: white;

    .wrapper {
        gap: 140px;
    }

    dt {
        font-weight: bold;
    }

    dd {
        display: flex;
        flex-direction: column;
    }
}

.footer-info-col {
    max-width: 286px;
}

footer small {
    display: flex;
    justify-content: center;
    padding-block: 16px;
    width: 100%;
    text-align: center;
    background-color: var(--color-brown-footer);
}

/* === Home/base styles === */

.top-nav {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 52px;

    padding-inline: var(--edge-padding);

    height: var(--nav-height);
}

.top-nav a {
    display: flex;
    align-items: center;
    gap: 4px;

    font: var(--font-nav);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;

    color: inherit;

    transition: var(--transition-text);
}

.top-nav a:hover {
    color: var(--color-text-hover);
}

.top-nav a.live {
    color: var(--color-red);
}

.top-nav a.live:hover {
    color: var(--color-text-hover);
}

.top-nav .nav-call-button {
    position: absolute;
    right: 0;
    gap: 16px;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 24px;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 24px);
    left: -16px;

    display: none;
    flex-direction: column;

    background-color: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(8px);
    border-radius: var(--border-radius-small);
    box-shadow: 0px 8px 32px rgb(0 0 0 / 0.08);

    min-width: 260px;
    padding: 16px 0;
    z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: flex;
}

.top-nav .icon {
    transition: rotate 0.3s ease;
}

.nav-dropdown:hover > a .icon {
    rotate: 180deg;
}

.nav-dropdown-menu a {
    padding: 12px 24px;
    font-size: 14px;
}

.nav-call-button {
    display: flex;
    align-items: center;
    gap: 20px;

    color: inherit;
    text-transform: uppercase;
    text-decoration: none;

    padding: inherit;
}

.nav-call-content {
    display: flex;
    flex-direction: column;
}

.nav-call-24 {
    font: var(--font-call);
    color: var(--color-brown-title);
    letter-spacing: 0.03em;
}

.nav-call-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1/1;
    width: 50px;

    background-color: var(--color-red);
    border-radius: 100vw;

    font-size: 28px;
    color: white;
}

header {
    --_header-height: 100vh;

    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;
    height: calc(var(--_header-height) - var(--nav-height));
}

header.small {
    --_header-height: 80vh;
}

header.white {
    background-color: white;
}

header h1 {
    font: var(--font-home-h1);
    color: white;

    max-width: var(--col6px);
    text-wrap: pretty;

    margin-top: 160px;
    margin-left: 40px;
}

header img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.header-shape-left {
    max-width: 380px;
    translate: 0 -15%;
}

.header-right-container {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    max-width: none;
}

/* Moves header container to the right only if it has a header text wrapper in it */
.header-right-container:has(> .header-text-wrapper) {
    translate: 25% 0;
}

.header-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.header-shape-right {
    margin-left: auto;
    height: 100%;
    max-width: none;
    translate: 1px 0px;
}

.header-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 100%;
    padding-right: var(--edge-padding-large);
    gap: 24px;

    max-width: 600px;

    background-color: var(--color-background);
    z-index: 1;
}

.header-text-inner {
    translate: -45% 0;
}

.header-text-wrapper h1 {
    font: var(--font-h1);
    color: var(--color-brown-title);
    margin: 0;
    max-width: none;
    text-wrap: pretty;
}

.header-text-wrapper p {
    margin-top: 20px;
}

.news-intro {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 144px;
}

.news-title-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;

    align-self: center;
    justify-self: center;
}

.news-arrow {
    font-size: 32px;
    color: var(--color-brown-title);
    text-decoration: none;
    margin-top: 8px;
}

.news-title {
    font: var(--font-h2);
    color: var(--color-red);
    text-wrap: pretty;
    margin: 0;
    text-align: center;
}

.news-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: var(--col10px);
    border-radius: var(--border-radius);
    overflow: hidden;

    translate: 0px 120px;
}

.news-intro-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    z-index: 1;
}

.news-image {
    margin-inline: auto;
    margin-top: var(--_content-gap);
    border-radius: var(--border-radius-small);
}

.news-content-section p:not(:first-child) {
    margin-top: var(--_content-gap);
}

.logo-wrapper {
    position: absolute;
    inset: 0;
    top: 8%;

    overflow: visible;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    margin-left: var(--edge-padding);
}

.logo {
    width: 222px;
    height: auto;
    object-fit: contain;
}

.header-card {
    position: absolute;
    right: var(--edge-padding-large);
    bottom: calc(var(--header-info-bar-height) + 43px);

    background-color: rgb(255 255 255 / 0.82);
    backdrop-filter: blur(16px) brightness(1.5);
    max-width: 560px;

    box-shadow: 0px 4px 32px rgb(0 0 0 / 0.05);
}

.header-card-name {
    font: var(--font-name);
    margin-top: 30px;
}

.header-card-button-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;

    margin-top: 40px;
}

.header-info-bar {
    position: absolute;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: var(--header-info-bar-height);

    font-weight: 300;

    color: white;
    background-color: var(--color-brown-text);
}

.team-section {
    position: relative;
}

.team-section.extra-margin-top {
    margin-top: 160px;
}

.team-section.upbreak .slider-container {
    translate: 0 -164px;
    margin-top: 0;
}

.team-section.upbreak .team-wrapper {
    margin-top: 0;
}

.team-section.upbreak .right-arrow {
    translate: 0 -164px;
}

.team-section:hover .slider-arrow {
    opacity: 1;
}

.team-section .slider-arrow.left-arrow {
    left: 0;
}

.team-section .slider-container {
    overflow: visible;
}

.team-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: start;

    margin-left: var(--col1);
    margin-top: 96px;
    margin-right: calc(50% - 50vw);

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    gap: 80px;
}

.team-wrapper.overflow {
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 80px;
}

.team-member {
    scroll-snap-align: start;
    width:var(--col2px);
}

.team-member:last-child {
    margin-right: 120px;
}

.team-member img {
    border-radius: 100vw;
}

.team-member h2 {
    margin-top: 24px;
    color: var(--color-red);
    text-wrap: nowrap;
}

.team-member p {
    margin-top: 10px;
    font: var(--font-nav);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.quote-section {
    margin-top: 347px;
}

.quote-section .card {
    margin-left: calc(var(--col1) - var(--edge-padding));
}

.quote-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-inline: auto;
    margin-top: 120px;
}

.big-quote {
    font: var(--font-h1);
    color: var(--color-red);
    text-wrap: pretty;
    color: white;
}

.big-quote-sub {
    color: white;
    font: var(--font-h3);
    margin-top: 48px;
}

.block-section {
    --_offset: calc(var(--col1) * -1);

    padding-top: 100px;
    margin-left: var(--_offset);

    .text-box h2 {
        color: var(--color-red);
    }

    .text-box p {
        /*margin-top: 24px;*/
    }

    .image-wrapper {
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.block-section.upbreak {
    margin-top: -160px;
}

.block-section.large-margin-top {
    margin-top: 160px;
}

.block-section.upbreak .image-wrapper {
    margin-top: -170px;
}

.block-section.mirrored {
    padding-bottom: 350px;
}

.block-section.mirrored .block-section-wrapper {
    flex-direction: row-reverse;
}

.block-section .wrapper {
    justify-content: flex-end;
}

.block-section.mirrored .wrapper {
    justify-content: flex-start;
}

.slider-container {
    position: relative;
    width: 100%;
}

.slider-container:hover .slider-arrow {
    opacity: 1;
}

.relative-slider-container {
    transform: translateX(calc((var(--_offset) * -1)));
}

.block-section-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 94px;

    width: 100%;
    max-width: calc(var(--wrapper-width) + 50px * 2);

    margin-inline: auto;
}

.block-section.small-padding-top {
    padding-top: 50px;
}

.block-section.big-padding-bottom {
    padding-bottom: 480px;
}

.slider-outer-container {
    position: relative;
    width: 100%;
}

.slider-arrow {
    opacity: 0;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    paint-order: stroke;
    color: var(--color-brown-title);
    background: transparent;

    border: none;
    cursor: pointer;
    font-size: 32px;
    transition: opacity 0.3s ease;

    -webkit-text-stroke: 8px var(--color-background);
}

.slider-arrow:hover {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.05);
}

.slider-arrow.left-arrow {
    left: calc(var(--col1) - 60px);
}

.slider-arrow.right-arrow {
    right: var(--edge-padding);
}

.blocks-wrapper {
    display: flex;
    gap: 36px;

    max-width: 100vw;
    margin-top: -100px;
}

.blocks-wrapper.overflow {
    margin-left: var(--col1);
    margin-top: 96px;
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 26px;
}

.block {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;

    background-color: white;
    border-radius: var(--border-radius-small);

    max-width: 380px;
    padding: 30px;

    scroll-snap-align: start;

    filter: drop-shadow(0px 4px 12px rgb(0 0 0 / 0.08));
}

.block p {
    margin-top: 12px;
}

.block h3 {
    color: var(--color-brown-title);
}

.block img {
    padding: 32px;
    padding-top: 0;
}

.block .red-link {
    margin-top: auto;
    padding-top: 50px;
}

.section-text-card {
    margin-top: 100px;
}

.section-text-card .card {
    translate: 0 -300px;
}

.section-faq {
    position: relative;
    margin-top: 120px;
}

.section-faq.responsive-height {
    height: auto;
}

.section-faq .image-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    border-radius: var(--border-radius);
    translate: 0 -370px;
    overflow: hidden;
}

.faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1;
}

.faq-wrapper.upbreak {
    translate: 0 -190px;
}

/* === Sub page styles === */

.intro-section {
    margin-top: 120px;
}

.intro-section h2 {
    color: var(--color-red);
    margin-bottom: 24px;
}

.intro-section.extra-margin-top {
    margin-top: 280px;
}

.intro-inner {
    display: flex;
    flex-direction: column;
}

.news-content-section {
    --_content-gap: 64px;
    margin-top: 180px;
}

.image-text-section {
    --_padding: 64px;
    --_overset-left: 220px;
    --_image-top-offset: 64px;

    position: relative;
    margin-top: calc(120px + var(--_padding));
}

.image-text-section:not(.inverted)::before {
    content: "";
    position: absolute;
    top: 290px;
    width: 100%;
    height: 630px;
    background-color: var(--color-brown);
    z-index: -1;
}

.image-text-wrapper {
    display: flex;
    gap: 75px;
    align-items: flex-start;
    margin-top: var(--_image-top-offset);
    isolation: isolate;
}

.image-text-wrapper.big-margin-top {
    margin-top: 200px;
}

.image-text-content {
    position: relative;
}

.image-text-content h2 {
    color: var(--color-red);
}

.image-text-content h3 {
    margin-bottom: 8px;
}

/* First of type AND has an H3 above it.  */
.image-text-content p:first-of-type:has(~ h3) {
    margin-top: 32px;
}

.image-text-content ul {
    padding: 0;
    list-style-position: inside;
}

.image-text-content::before {
    content: "";

    position: absolute;
    inset: calc(var(--_padding) * -1);
    left: calc(var(--_overset-left) * -1);

    display: flex;
    width: calc(100% + var(--_overset-left) + var(--_padding));
    height: calc(100% + 2 * var(--_padding));
    margin-bottom: 50px;

    background-color: var(--color-background);
    filter: drop-shadow(0px 4px 12px rgb(0 0 0 / 0.08));
    border-radius: var(--border-radius);

    z-index: -1;
}

.image-text-image {
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 68 / 61;
    margin-top: 116px;
}

.image-text-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.image-text-section.inverted .image-text-wrapper {
    flex-direction: row-reverse;
}

.image-text-section.white {
    background-color: white;
}

.image-text-section.upbreak .image-text-content {
    margin-top: -80px;
}

.image-text-section.white .image-text-content::before {
    background-color: white;
}

.image-text-section.white::before {
    display: none;
}

.image-text-section.padding-bottom {
    padding-bottom: 256px;
}

.image-text-section.no-margin-top {
    margin-top: 0;
}

.image-text-content.padding-bottom::before {
    height: calc(100% + 2 * var(--_padding) + 82px);
}

.image-text-section.inverted .image-text-content::before {
    left: calc(var(--_padding) * -1);
    background-color: white;
}

.image-text-content.light::before {
    background-color: var(--color-background) !important;
}

.gallery-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 64px;
    z-index: 12;
}

.gallery-item {
    flex: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.big-text-section {
    --_margin: 164px;

    margin-block: var(--_margin);
    color: var(--color-brown-title);
}

.big-text-section.brown {
    background-color: var(--color-brown);
    color: white;
    padding-bottom: var(--_margin);
}

.big-text-section.padding-top {
    padding-top: var(--_margin);
}

.big-text-section.large-padding-bottom {
    padding-bottom: calc(var(--_margin) + 100px);
}

.big-text-section.no-margin-bottom {
    margin-bottom: 0;
}

.big-text-section.no-margin-top {
    margin-top: 0;
}

.big-text-section.big-padding-bottom {
    padding-bottom: 256px;
}

.big-text-title {
    font: var(--font-h1);
    text-wrap: pretty;
}

.big-text-subtitle {
    font: var(--font-h3);
    margin-top: 48px;
}

.big-team-title {
    color: var(--color-brown-title);
}

.big-team-inner {
    margin-top: -335px;
}

.big-team-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 60px 20px;
    margin-top: 64px;
}

.big-team-wrapper .team-member {
    margin: auto;
}

.big-team-wrapper .red-link {
    display: flex;
    margin-top: 24px;
}

.contact-call-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
}

.contact-call-link .icon {
    font-size: 28px;
    display: inline-block;
}

.contact-column-container {
    display: flex;
    gap: 60px;
    justify-content: space-between;
}

.contact-buttons-section {
    padding-block: 64px 256px;
}

.contact-button-wrapper:not(:first-of-type) {
    margin-top: 48px;
}

.contact-button-column h2 {
    color: var(--color-red);
    margin-bottom: 48px;
}

.contact-button-column .link-button {
    display: inline-block;
    margin-bottom: 12px;
}

.map-section {
    background-color: white;
    padding-block: 120px;
}

.map-section h2 {
    color: var(--color-red);
}

.map-section p {
    margin-top: 20px;
}

.map-container {
    margin-left: auto;
    margin-top: -220px;
    border-radius: var(--border-radius);
    overflow: hidden;
    filter: drop-shadow(0px 4px 12px rgb(0 0 0 / 0.08));
}

.contact-form-section {
    padding-block: 136px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    margin-top: 32px;
}

.form-group {
    display: flex;
    width: 100%;
}

.form-group label {
    width: var(--col2px);
}

input,
textarea {
    border-radius: var(--border-radius-small);
    border: 2px solid var(--color-brown);
    padding: 12px 16px;
    background-color: var(--color-background);
    filter: drop-shadow(0px 4px 12px rgb(0 0 0 / 0.08));
    width: 100%;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-brown);
    opacity: 0.75;
}

.submit-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.submit-button {
    background: none;
    border: none;
    outline: none;
}