:root {
    color-scheme: light;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --color-brand: #739B3E;
    --color-brand-text: #4D6E27;
    --color-brand-alt: #779B2B;
    --color-ink: #000000;
    --color-text: #313131;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F4F4F4;
    --color-surface-soft: #F5F5F7;
    --color-line: #E4E4E4;
    --color-line-menu: #E0E0E0;
    --color-line-header: #E7E7E7;
    --color-line-review: #E1E8ED;
    --color-star: #F0AD4E;
    --color-star-empty: #CCD6DF;
    --color-shadow-soft: #CCCCCC;
    --color-on-brand-soft: rgb(255 255 255 / 20%);
    --color-slide-overlay: #0000000D;
    --color-slide-bg: #BBBBBB;
    --color-lightbox: #FFFFFFB1;
    --color-backdrop: rgb(0 0 0 / 55%);
    --color-switch-off: #8C8C8C;
    --color-switch-knob: #FFFFFF;
    --color-facebook: #3B5998;
    --color-pinterest: #BD081C;
    --color-download: #9DA5AE;
    --color-overlay-light: #FFFFFF59;
    --color-overlay-dark: rgb(0 0 0 / 50%);
    --color-field-border: #7373738A;
    --color-required: #FF0000;
    --color-danger: #C9302C;
    --font-heading: "Lora", Sans-serif;
    --font-ui: "Poppins", Sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --fs-title: 50px;
    --fs-title-sm: 38px;
    --fs-title-compact: 42px;
    --fs-page-title: 40px;
    --fs-title-xs: 32px;
    --fs-subtitle: 28px;
    --fs-heading-sm: 24px;
    --fs-feature-title: 22px;
    --fs-heading-xs: 20px;
    --fs-lead: 18px;
    --fs-feature-text: 17px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-label: 13px;
    --fs-fine: 12px;
    --fs-icon-nav: 20px;
    --fs-icon-social: 20px;
    --fs-icon-feature: 40px;
    --fs-icon-list: 14px;
    --fs-star: 12px;
    --fs-icon-lightbox: 20px;
    --fs-icon-lightbox-nav: 25px;
    --fs-caption: clamp(0.71875rem, 0.7083rem + 0.0521vw, 0.75rem);
    --fs-dialog-small: clamp(0.8125rem, 0.7917rem + 0.1042vw, 0.875rem);
    --lh-title: 1.1em;
    --lh-subtitle: 1.2em;
    --lh-lead: 1.3em;
    --space-1: 5px;
    --space-2: 10px;
    --space-3: 15px;
    --space-4: 20px;
    --space-5: 25px;
    --space-6: 30px;
    --space-7: 35px;
    --space-8: 40px;
    --space-9: 50px;
    --space-10: 60px;
    --space-11: 70px;
    --space-12: 80px;
    --space-13: 100px;
    --radius-control: 3px;
    --radius-social: 7px;
    --radius-tile: 10px;
    --radius-card: 15px;
    --radius-panel: 20px;
    --radius-pill: 50px;
    --radius-dialog: 14px;
    --shadow-header: 0 0 10px 0 rgb(0 0 0 / 20%);
    --shadow-menu: 0 10px 10px 0 rgb(0 0 0 / 10%);
    --shadow-card: 0 0 10px 0 rgb(0 0 0 / 10%);
    --shadow-panel: 0 5px 10px 0 rgb(0 0 0 / 10%);
    --shadow-media: 6px 6px 10px var(--color-shadow-soft);
    --shadow-share-menu: 0 4px 15px rgb(0 0 0 / 30%);
    --shadow-lightbox-image: 0 0 30px rgb(0 0 0 / 30%), 0 0 8px -5px rgb(0 0 0 / 30%);
    --shadow-overlay: 0 24px 64px -24px rgb(0 0 0 / 30%), 0 2px 6px rgb(0 0 0 / 6%);
    --shadow-dialog: 0 0 0 1px var(--color-line), var(--shadow-overlay);
    --shadow-knob: 0 1px 3px rgb(0 0 0 / 25%);
    --z-behind: -1;
    --z-base: 0;
    --z-raised: 1;
    --z-above: 2;
    --z-lightbox-footer: 5;
    --z-lightbox-header: 10;
    --z-header: 99;
    --z-dropdown: 9997;
    --z-consent: 10000;
    --z-skip: 10001;
    --wrap: 1200px;
    --wrap-wide: 1250px;
    --wrap-product: 1100px;
    --wrap-legal: 980px;
    --wrap-narrow: 750px;
    --wrap-pad: var(--space-4);
    --header-bar: 70px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-out: 0.18s;
    --control-size: 2.75rem;
    --control-size-compact: 1.75rem;
    --control-size-compact-dialog: 2rem;
    --switch-width: 2.75rem;
    --switch-height: 1.5rem;
    --switch-inset: 0.125rem;
    --dialog-width: 33rem;
}
@media (min-width: 1024px) {
    :root {
        --wrap-pad: 0px;
    }
}
@font-face {
    font-display: swap;
    font-family: "Lora";
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/lora/lora-v32-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lora";
    font-style: normal;
    font-weight: 500;
    src: url("../assets/fonts/lora/lora-v32-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lora";
    font-style: normal;
    font-weight: 600;
    src: url("../assets/fonts/lora/lora-v32-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Lora";
    font-style: normal;
    font-weight: 700;
    src: url("../assets/fonts/lora/lora-v32-latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/poppins/poppins-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    src: url("../assets/fonts/poppins/poppins-v20-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
    font-family: "Phosphor-Light";
    src: url("../assets/icons/phosphor/Phosphor-Light-subset.woff2?v=91008f4188") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+E000-F8FF;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    scroll-padding-block-start: calc(var(--header-bar) + var(--space-4));
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}
body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-system);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body:has(dialog[open]) {
    overflow: hidden;
}
[hidden] {
    display: none !important;
}
:where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0.5rem 1rem;
    color: var(--color-ink);
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
}
:where(h1) {
    font-size: 2.5rem;
}
:where(h2) {
    font-family: var(--font-ui);
    font-size: var(--fs-subtitle);
    line-height: var(--lh-subtitle);
}
:where(h3) {
    font-family: var(--font-ui);
    font-size: var(--fs-subtitle);
}
:where(h4) {
    font-family: var(--font-ui);
    font-size: var(--fs-heading-sm);
}
:where(h5) {
    font-size: 1.25rem;
}
:where(h6) {
    font-size: 1rem;
}
p {
    margin-block: 0 0.9rem;
}
a {
    background-color: transparent;
    color: var(--color-text);
    text-decoration: none;
}
a:hover, a:active {
    color: var(--color-brand);
}
a:not([href]):not([tabindex]) {
    color: inherit;
}
b, strong {
    font-weight: bolder;
}
small {
    font-size: 80%;
}
sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
img {
    max-width: 100%;
    height: auto;
    border-style: none;
}
details {
    display: block;
}
summary {
    display: list-item;
}
figure {
    margin: 0;
}
dd, dl, dt, li, ol, ul {
    margin-block: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    border: 0;
    outline: 0;
}
label {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}
button, input {
    overflow: visible;
}
button, select {
    text-transform: none;
}
textarea {
    overflow: auto;
    resize: vertical;
}
table {
    width: 100%;
    margin-block-end: var(--space-3);
    font-size: 0.9em;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
}
table td, table th {
    padding: var(--space-3);
    border: 1px solid hsl(0 0% 50% / 50.2%);
    line-height: 1.5;
    vertical-align: top;
}
table th {
    font-weight: 700;
}
:is([tabindex]:not([tabindex="-1"]), a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-surface);
}
:is([tabindex]:not([tabindex="-1"]), a, button, input, select, textarea):focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
.container {
    width: 100%;
    max-inline-size: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
}
@media (min-width: 1024px) {
    .container {
        width: calc(100% - 2 * var(--space-4));
        max-inline-size: calc(var(--wrap) + 2 * var(--wrap-pad));
    }
}
.icon {
    display: block;
    width: 1em;
    height: 1em;
    flex: none;
    fill: currentColor;
}
.skip-link {
    position: fixed;
    z-index: var(--z-skip);
    inset-block-start: 5px;
    inset-inline-start: 5px;
    padding: 12px 24px;
    background: #EEEEEE;
    color: #333333;
    font-size: 1rem;
    line-height: normal;
    transform: translateY(-200%);
}
.skip-link:focus {
    transform: translateY(0);
    color: #333333;
}
.u-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.section-title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: var(--lh-title);
}
.lead-text {
    font-family: var(--font-ui);
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: var(--lh-lead);
}
.caption-text {
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: var(--lh-lead);
}
.note-text {
    font-family: var(--font-ui);
    font-size: var(--fs-fine);
    font-weight: 400;
}
.button-wrap {
    line-height: 1.5;
}
.button {
    display: block;
    width: 100%;
    padding: 8px 35px 8px 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand);
    color: var(--color-surface);
    fill: var(--color-surface);
    font-family: var(--font-ui);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    &:hover, &:focus, &:visited {
        color: var(--color-surface);
    }
    &:hover, &:focus {
        background-color: var(--color-ink);
    }
    @media (min-width: 768px) {
        display: inline-block;
        width: auto;
    }
}
.button--dark {
    background-color: var(--color-ink);
    & .button__icon {
        margin-inline-end: 0.26em;
    }
    &:hover, &:focus {
        background-color: var(--color-brand);
    }
}
.button__icon {
    display: inline-block;
    margin-inline-end: calc(var(--space-2) + 0.26em);
    padding: var(--space-2);
    border-radius: 100%;
    background: var(--color-on-brand-soft);
    color: var(--color-surface);
    vertical-align: -0.68em;
    transform: rotate(320deg);
}
.button__glyph {
    width: 0.875em;
    height: 1em;
}
.button__text {
    display: inline-block;
}
.icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.icon-list__item,
.icon-list__item > a {
    display: flex;
    align-items: center;
    font-size: inherit;
}
.icon-list__item > a {
    width: 100%;
}
.icon-list__icon {
    position: relative;
    display: flex;
    width: 1.25em;
    color: var(--color-brand);
    font-size: var(--icon-list-size, var(--fs-icon-list));
    transition: color 0.3s;
    & .icon {
        width: 1em;
        height: 1em;
    }
}
.icon-list__icon + .icon-list__text {
    align-self: center;
    padding-inline-start: var(--space-1);
}
.icon-list__text {
    transition: color 0.3s;
}
.icon-list--end .icon-list__item,
.icon-list--end .icon-list__item > a {
    justify-content: end;
    text-align: end;
}
.rating {
    display: flex;
    gap: 1px;
    color: var(--color-star-empty);
    font-size: var(--fs-star);
    line-height: inherit;
}
.rating__star {
    position: relative;
    display: block;
    width: 1em;
    height: 1lh;
}
.rating__star .icon {
    position: absolute;
    inset-block-start: calc((1lh - 1em) / 2);
    inset-inline-start: 0;
}
.rating__fill {
    color: var(--color-star);
    clip-path: inset(0 var(--rating-cut, 0%) 0 0);
}
.rating__fill--half {
    --rating-cut: 50%;
}
.js .is-invisible {
    visibility: hidden;
}
.is-animated {
    animation-duration: 1.25s;
}
.is-animated.is-slow {
    animation-duration: 2s;
}
.is-animated[data-animate="fadeIn"] {
    animation-name: fadeIn;
}
.is-animated[data-animate="fadeInUp"] {
    animation-name: fadeInUp;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.has-fx-perspective {
    perspective: 1200px;
}
[data-fx] {
    transform-origin: center center;
}
.slides {
    --slides-height: 486px;
    position: relative;
    height: var(--slides-height);
    overflow: hidden;
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-media);
    isolation: isolate;
    touch-action: pan-y;
}
.slides__slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--slides-speed, 1000ms) ease, visibility 0s linear var(--slides-speed, 1000ms);
    &.is-active {
        z-index: var(--z-raised);
        opacity: 1;
        visibility: visible;
        transition: opacity var(--slides-speed, 1000ms) ease, visibility 0s;
    }
}
.slides:not(.is-ready) .slides__slide:first-child {
    opacity: 1;
    visibility: visible;
}
.slides--slide .slides__slide {
    opacity: 1;
    visibility: visible;
    transform: translateX(100%);
    transition: transform var(--slides-speed, 1000ms) ease;
    &.is-active {
        transform: none;
        transition: transform var(--slides-speed, 1000ms) ease;
    }
    &.is-leaving {
        transform: translateX(-100%);
    }
    &.is-leaving.is-back {
        transform: translateX(100%);
    }
    &.is-entering-back {
        transform: translateX(-100%);
    }
    &.is-snap {
        transition: none;
    }
}
.slides--slide:not(.is-ready) .slides__slide:first-child {
    transform: none;
}
.slides__image {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    background-color: var(--slides-bg, var(--color-slide-bg));
}
.slides__image--ken-burns {
    transition: transform 10s linear;
    &.is-zooming {
        transform: scale(1.3);
        transition-duration: 20s;
    }
}
.slides__slide--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-slide-overlay);
    pointer-events: none;
}
.slides__link {
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
    color: var(--color-surface);
    &:hover {
        color: var(--color-surface);
    }
}
.slides__label {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-panel);
    background: var(--color-brand-alt);
    color: var(--color-surface);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1;
}
.slides__description {
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 70%;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-tile);
    background: rgb(0 0 0 / 60%);
    color: var(--color-surface);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    @media (min-width: 768px) {
        font-size: var(--fs-feature-text);
    }
    &:not(:last-child) {
        margin-block-end: var(--space-3);
        @media (min-width: 768px) {
            margin-block-end: var(--space-6);
        }
    }
}
.slides__button {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: inline-block;
    padding: 8px 35px 8px 10px;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-surface);
    font-family: var(--font-ui);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.carousel {
    position: relative;
}
.carousel__viewport {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}
.carousel__track {
    display: flex;
    align-items: stretch;
    gap: var(--carousel-gap, 0px);
    will-change: transform;
}
.carousel__slide {
    flex: 0 0 calc((100% - (var(--carousel-per-view, 1) - 1) * var(--carousel-gap, 0px)) / var(--carousel-per-view, 1));
    min-width: 0;
}
.logo-carousel {
    --carousel-per-view: 2;
    @media (min-width: 768px) {
        --carousel-per-view: 4;
    }
    @media (min-width: 1024px) {
        --carousel-per-view: 6;
    }
    & .carousel__slide {
        text-align: center;
    }
}
.logo-carousel__image {
    display: inline;
    height: 70px;
    width: auto;
    padding: 7px var(--space-8);
    opacity: 0.3;
    vertical-align: baseline;
}
.reviews {
    --carousel-per-view: 1;
    --carousel-gap: var(--space-2);
    @media (min-width: 1024px) {
        --carousel-per-view: 3;
        --carousel-gap: var(--space-6);
    }
    & .carousel__viewport {
        cursor: grab;
    }
}
.review {
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-tile);
    background-color: var(--color-surface);
}
.review__header {
    display: flex;
    padding: var(--space-4) var(--space-4) var(--space-2);
    border-block-end: 1px solid var(--color-line-review);
    background-color: var(--color-surface-muted);
}
.review__cite {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-small);
    font-style: normal;
    line-height: 1.5;
}
.review__name {
    color: var(--color-ink);
    font-weight: 700;
}
.review__city {
    color: var(--color-text);
    font-size: 12.5px;
    font-weight: 400;
}
.review__content {
    padding: var(--space-2) var(--space-4) var(--space-4);
}
.review__text {
    font-size: var(--fs-small);
    line-height: 20px;
}
.headline {
    display: block;
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 500;
    line-height: var(--lh-subtitle);
    text-align: center;
    @media (min-width: 768px) {
        font-size: var(--fs-subtitle);
    }
}
.headline__highlight {
    position: relative;
    z-index: var(--z-raised);
    display: inline-block;
    overflow: visible;
    vertical-align: bottom;
}
.headline__text {
    position: relative;
    z-index: var(--z-raised);
    display: inline-block;
}
.headline__marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    overflow: visible;
    transform: translate(-50%, -50%);
    pointer-events: none;
    & path {
        fill: none;
        stroke: var(--color-brand);
        stroke-dasharray: 0 1500;
        stroke-width: 9;
        opacity: 0;
        transition: 0.3s;
    }
}
.headline.is-drawn .headline__marker path {
    animation: headline-dash 1.2s forwards;
}
.headline.is-hiding .headline__marker path {
    animation: headline-hide 0.4s forwards;
    opacity: 1;
    stroke-dasharray: 1500 1500;
}
@keyframes headline-dash {
    0% {
        opacity: 1;
        stroke-dasharray: 0 1500;
    }
    to {
        opacity: 1;
        stroke-dasharray: 1500 1500;
    }
}
@keyframes headline-hide {
    0% {
        opacity: 1;
        stroke-dasharray: 1500 1500;
    }
    to {
        filter: blur(10px);
        opacity: 0;
    }
}
.share {
    margin-block-end: var(--space-13);
}
.share__inner {
    --wrap: 1140px;
    --wrap-pad: 0px;
    padding: var(--space-4);
}
.share__headline {
    margin: var(--space-6) 0 var(--space-8);
}
.share__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.share__button {
    --share-color: var(--color-brand);
    display: flex;
    align-items: center;
    height: 4.5em;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0.5em;
    background-color: var(--share-color);
    color: var(--color-surface);
    font-family: inherit;
    font-size: 10px;
    line-height: 1.5;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-property: filter, background-color, border-color;
    &:hover {
        --share-color: var(--color-ink);
    }
}
.share__icon {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    width: 4.5em;
    font-size: 1em;
    & .icon {
        width: 1.7em;
        height: 1.7em;
    }
}
.share__text {
    display: flex;
    flex-grow: 1;
    align-items: center;
    align-self: stretch;
    padding-inline-end: 1em;
    font-size: 1.5em;
    font-weight: 100;
}
.share__title {
    flex-shrink: 0;
    font-weight: 700;
}
.cta-panel {
    position: relative;
    isolation: isolate;
    margin-block-end: var(--space-10);
    padding: var(--space-9) var(--space-4);
    background-image: url("../assets/images/backgrounds/grid.svg");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: cover;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        background-image: linear-gradient(180deg, transparent 52%, var(--color-surface) 100%);
    }
    @media (min-width: 768px) {
        padding: var(--space-11) var(--space-4);
        background-position: 0 0;
        background-size: 70% auto;
    }
    @media (min-width: 1024px) {
        padding: var(--space-13) 0 var(--space-8);
    }
}
.cta-panel__inner {
    --wrap-pad: 0px;
    display: flex;
    flex-wrap: wrap;
}
.cta-panel__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    @media (min-width: 768px) {
        padding-inline-end: var(--space-9);
    }
    @media (min-width: 1024px) {
        width: 40%;
    }
}
.cta-panel__title {
    margin-block-end: var(--space-8);
    font-size: 2.4rem;
    @media (min-width: 768px) {
        font-size: var(--fs-title);
    }
}
.cta-panel__text {
    & > :last-child {
        margin-block-end: 0;
    }
    margin-block-end: var(--space-8);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 400;
}
.cta-panel__action {
    margin-block-end: var(--space-2);
}
.cta-panel__note {
    margin-block-end: var(--space-11);
    & > :last-child {
        margin-block-end: 0;
    }
    @media (min-width: 768px) {
        margin-block-end: 0;
        & > :last-child {
            margin-block-end: 0.9rem;
        }
    }
}
.cta-panel__gallery {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    @media (min-width: 1024px) {
        width: 60%;
    }
}
.heading {
    margin: 0;
    line-height: 1;
}
.heading:where(h2) {
    line-height: var(--lh-subtitle);
}
.page-title {
    margin: 0 0 var(--page-title-gap, 7px);
    font-family: var(--font-heading);
    font-size: var(--fs-page-title);
    font-weight: 700;
    line-height: var(--lh-title);
}
.subtitle {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-subtitle);
    font-weight: 500;
    line-height: var(--lh-subtitle);
}
.body-text {
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 400;
}
.divider {
    width: var(--divider-width, 100%);
    max-width: 100%;
    margin-block-end: var(--divider-gap, 0px);
    border-block-start: var(--divider-weight, 3px) solid var(--color-brand);
}
.media-frame {
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-media);
}
.media-frame__image {
    display: block;
    width: 100%;
    max-inline-size: var(--media-frame-max, 800px);
    margin-inline: auto;
    border-radius: var(--radius-tile);
}
.columns {
    display: flex;
    flex-wrap: wrap;
}
.columns__col {
    width: 100%;
    min-width: 0;
}
@media (min-width: 1024px) {
    .columns__col:first-child {
        width: var(--columns-split, 50%);
        padding-inline-end: var(--columns-gap, 0px);
    }
    .columns__col:last-child:not(:first-child) {
        width: calc(100% - var(--columns-split, 50%));
        padding-inline-end: var(--columns-gap-last, 0px);
    }
}
.columns--reverse-sm > .columns__col:first-child {
    order: 1;
    @media (min-width: 1024px) {
        order: 0;
    }
}
.page-intro,
.product-hero {
    position: relative;
    isolation: isolate;
    background: url("../assets/images/backgrounds/grid.svg") 0 0 / 70% auto repeat-x;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        background-image: linear-gradient(180deg, transparent var(--grid-fade-start, 0%), var(--color-surface) 100%);
    }
}
.page-intro {
    --divider-gap: var(--space-6);
    padding: var(--space-8) var(--space-4) 0;
    @media (min-width: 768px) {
        padding: var(--space-6) var(--space-6) 0;
    }
    @media (min-width: 1024px) {
        margin-block-start: -2px;
        padding: 52px 0 var(--intro-pad-end, 0px);
    }
}
.page-intro__inner {
    --wrap-pad: 0px;
    display: flex;
    flex-wrap: wrap;
    padding-block-end: var(--intro-row-gap, var(--space-9));
}
.page-intro__content {
    width: 100%;
    @media (min-width: 768px) {
        padding-inline-end: var(--intro-gap, 45px);
    }
    @media (min-width: 1024px) {
        width: var(--intro-split, 50%);
    }
}
.page-intro__media {
    width: 100%;
    @media (min-width: 1024px) {
        width: var(--intro-media-width, calc(100% - var(--intro-split, 50%)));
    }
}
.page-intro__subtitle {
    margin-block-end: var(--intro-subtitle-gap, var(--space-6));
}
.page-intro__text {
    margin-block-end: var(--space-6);
}
.page-intro__list {
    margin-block-end: var(--space-7);
}
.page-band {
    position: relative;
    isolation: isolate;
    padding: var(--band-pad-start, var(--space-8)) var(--space-4) var(--band-pad-end, var(--space-8));
    background-color: var(--color-surface-muted);
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        background-image: linear-gradient(180deg, transparent 0%, var(--color-surface) 100%);
    }
    @media (min-width: 768px) {
        padding: var(--band-pad-start, var(--space-9)) var(--band-pad-inline, var(--space-4)) var(--band-pad-end, var(--space-11));
    }
    @media (min-width: 1024px) {
        margin-block-start: -2px;
        padding: var(--band-pad-start, 61px) 0 var(--band-pad-end, var(--space-10));
    }
}
.page-band__inner {
    --wrap-pad: 0px;
}
.breadcrumbs {
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: var(--lh-lead);
}
.breadcrumbs__trail {
    margin: 0;
}
.info-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-panel);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-panel);
    @media (min-width: 768px) {
        padding: var(--space-4);
    }
    @media (min-width: 1024px) {
        padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    }
}
.info-card--muted {
    background-color: var(--color-surface-muted);
}
.info-card--contacts {
    padding: var(--space-6);
    @media (min-width: 768px) {
        padding: var(--space-8);
    }
    @media (min-width: 1024px) {
        padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    }
}
.info-card--dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-ink) url("../assets/images/swatches/ton-karta-farbanje-drveta.webp") center / cover;
    color: var(--color-surface);
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        background-image: linear-gradient(136deg, var(--color-ink) 43%, transparent 63%);
        opacity: 0.6;
    }
}
.info-card__text {
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-heading-xs);
    font-weight: 500;
    line-height: var(--lh-lead);
    text-align: center;
    @media (min-width: 1024px) {
        text-align: start;
    }
}
.info-card__lead {
    margin-block-end: 0.9rem;
    text-align: center;
    @media (min-width: 1024px) {
        text-align: start;
    }
}
.info-card__action {
    margin-block-end: var(--space-2);
    text-align: center;
    @media (min-width: 1024px) {
        text-align: start;
    }
}
.info-card__action--stretch .button {
    @media (min-width: 1024px) {
        display: block;
        width: 100%;
    }
}
.contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.contact-list__country {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-heading-sm);
    font-weight: 500;
    line-height: var(--lh-subtitle);
}
.contact-list--compact .contact-list__country {
    font-size: 23px;
}
.contact-list__items {
    --icon-list-size: var(--fs-body);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.8;
    &:not(:last-child) {
        margin-block-end: var(--space-4);
    }
    & .icon-list__icon {
        justify-content: flex-start;
    }
}
.contact-list--center-sm {
    text-align: center;
    & .icon-list__item, & .icon-list__item > a {
        justify-content: center;
    }
    @media (min-width: 768px) {
        text-align: start;
        & .icon-list__item, & .icon-list__item > a {
            justify-content: flex-start;
        }
    }
}
.map-embed {
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-radius: var(--radius-panel);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-panel);
}
.map-embed__frame {
    width: 100%;
    height: 530px;
    border: 0;
    border-radius: var(--radius-panel);
    vertical-align: baseline;
}
.archive {
    padding: var(--space-6) var(--space-3) var(--space-9);
    @media (min-width: 768px) {
        padding: var(--space-8) var(--space-5) var(--space-13);
    }
    @media (min-width: 1024px) {
        padding: var(--space-9) 0 var(--space-13);
    }
    & .page-title {
        --page-title-gap: var(--space-2);
    }
    & .divider {
        --divider-width: 20%;
        --divider-weight: 2px;
        margin-block-end: var(--space-2);
    }
}
.archive__inner {
    --wrap-pad: 0px;
    padding: var(--space-2);
}
.archive__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    font-size: var(--fs-small);
    line-height: var(--lh-lead);
}
.archive__text {
    display: flow-root;
    margin-block: var(--space-4) 0;
    @media (min-width: 1024px) {
        padding-inline-end: 35%;
    }
}
.post-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) var(--space-6);
    margin: calc(var(--space-7) + var(--space-2)) 0 0;
    padding: 0;
    list-style: none;
    @media (min-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.post-card__media {
    display: block;
    margin-block-end: var(--space-4);
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 5 / 4;
    @media (min-width: 768px) {
        aspect-ratio: 5 / 3;
    }
}
.post-card__image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s;
}
.post-card__title {
    margin: 0 0 var(--space-4);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 21px;
    font-weight: 700;
    line-height: var(--lh-subtitle);
    @media (min-width: 768px) {
        margin-block-end: var(--space-3);
        font-size: var(--fs-feature-title);
    }
    @media (min-width: 1024px) {
        font-size: var(--fs-subtitle);
    }
    & a, & a:hover {
        color: inherit;
    }
}
.post-card__excerpt {
    margin-block-end: var(--space-6);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    @media (min-width: 768px) {
        margin-block-end: var(--space-9);
    }
    & p {
        margin: 0;
        line-height: 1.5;
    }
}
.product-hero {
    --grid-fade-start: 42%;
    padding: var(--space-6) var(--space-4) 130px;
    @media (min-width: 768px) {
        padding: var(--space-9) var(--space-6) var(--space-13);
    }
    @media (min-width: 1024px) {
        margin-block-start: -2px;
        padding: var(--space-13) 0 150px;
    }
    & .divider {
        --divider-width: 25%;
        margin-block-end: 8px;
    }
}
.product-hero__inner {
    --wrap: var(--wrap-product);
    --wrap-pad: 0px;
}
.product-hero__title {
    margin: 0 0 15px;
    font-family: var(--font-heading);
    font-size: var(--fs-title-xs);
    font-weight: 700;
    line-height: 1;
    @media (min-width: 768px) {
        font-size: var(--fs-page-title);
    }
}
.product-hero__trail {
    margin-block-end: var(--space-6);
}
.product-hero__excerpt {
    margin-block-end: var(--space-6);
    @media (min-width: 1024px) {
        padding-inline-end: 37%;
    }
}
.product-layout {
    position: relative;
    margin-block-end: var(--space-9);
    background-image: linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-surface) 100%);
}
.product-layout__inner {
    --wrap: var(--wrap-product);
    --wrap-pad: 0px;
    display: flex;
    flex-wrap: wrap;
}
.product-layout__main {
    width: 100%;
    margin-block-start: -120px;
    padding-inline: var(--space-4);
    @media (min-width: 768px) {
        margin-block: -65px var(--space-9);
    }
    @media (min-width: 1024px) {
        width: 65%;
        margin-block: -100px 0;
        padding: 0 var(--space-9) 0 0;
    }
}
.product-layout__aside {
    display: none;
    @media (min-width: 1024px) {
        display: block;
        width: 35%;
        margin-block-start: -45px;
        padding: var(--space-2);
    }
}
.product-aside__box {
    position: sticky;
    inset-block-start: calc(var(--header-bar) + var(--aside-box-offset, var(--space-4)));
    z-index: var(--aside-box-layer, 9);
    margin-block-end: var(--space-4);
}
.product-aside__box--swatches {
    --aside-box-offset: var(--space-8);
    --aside-box-layer: 10;
}
.product-aside__box--contacts {
    --aside-box-offset: var(--space-10);
    --aside-box-layer: 11;
    margin-block-end: var(--space-2);
}
.product-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-end: var(--space-9);
    & > .divider {
        --divider-width: 30%;
    }
    & .slides {
        --slides-height: 440px;
        --slides-bg: var(--color-surface);
    }
}
.product-decor {
    display: none;
    @media (min-width: 1024px) {
        position: fixed;
        inset-block-start: var(--decor-y, 105px);
        inset-inline-start: var(--decor-x, 355px);
        z-index: var(--z-behind);
        display: block;
        width: 100%;
        margin-block-start: var(--decor-offset, 78px);
        mix-blend-mode: multiply;
    }
}
.product-decor__image {
    display: block;
    width: var(--decor-width, 380px);
    max-width: none;
    height: auto;
    margin-inline: auto;
}
.product-decor--circle .product-decor__image {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/svg%3E") center / cover no-repeat;
}
.product-content__note {
    padding-inline-end: var(--space-2);
}
.product-content__note--end {
    text-align: end;
}
.product-copy {
    margin-block-end: var(--space-9);
    & > :last-child {
        margin-block-end: 0;
    }
    & a {
        color: var(--color-brand);
        font-weight: 500;
    }
    & :where(h2, h3) {
        margin: var(--space-6) 0;
        padding: 13px var(--space-4);
        border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
        background-color: var(--color-surface);
    }
    & :where(h3) {
        font-size: var(--fs-feature-title);
    }
}
.legal-page {
    padding: var(--space-6) var(--space-4) 0;
    @media (min-width: 768px) {
        padding: var(--space-9) var(--space-6);
    }
    @media (min-width: 1024px) {
        margin-block: var(--space-9);
        padding: 0;
    }
    & .page-title {
        --page-title-gap: var(--space-8);
    }
}
.legal-page__inner {
    --wrap: var(--wrap-legal);
    --wrap-pad: 0px;
    display: flex;
    align-items: center;
    min-height: 700px;
}
.legal-page__body {
    width: 100%;
}
.legal-text {
    display: flow-root;
    & :where(h2) {
        font-size: var(--fs-heading-sm);
    }
    & :where(h3) {
        font-size: var(--fs-heading-xs);
    }
}
.not-found {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-2);
    @media (min-width: 768px) {
        max-width: 600px;
        padding-inline: 0;
    }
    @media (min-width: 1024px) {
        max-width: 800px;
    }
    @media (min-width: 1280px) {
        max-width: 1140px;
    }
}
.message-page {
    --message-min-height: 700px;
    padding: var(--space-6) var(--space-4) 0;
    @media (min-width: 768px) {
        padding: var(--space-9) var(--space-6);
    }
    @media (min-width: 1024px) {
        padding: 0;
    }
    & .divider {
        --divider-width: 300px;
        --divider-gap: var(--space-9);
        @media (min-width: 768px) {
            --divider-width: 158px;
        }
    }
}
.message-page__inner {
    --wrap-pad: 0px;
    display: flex;
    align-items: center;
    min-height: var(--message-min-height);
}
.message-page__box {
    width: 100%;
    max-width: var(--wrap-narrow);
    margin-inline: auto;
    padding-block-end: var(--space-11);
    @media (min-width: 768px) {
        padding-block-end: 0;
    }
    @media (min-width: 1024px) {
        padding-block: 81px var(--space-12);
    }
}
.message-page__content {
    margin-block-end: var(--space-10);
    @media (min-width: 768px) {
        margin-block-end: var(--space-9);
    }
    @media (min-width: 1024px) {
        margin-block-end: 0;
        padding-inline-end: var(--space-10);
    }
}
.message-page__title {
    margin-block-end: var(--space-3);
    font-size: 43px;
    @media (min-width: 768px) {
        font-size: var(--fs-title);
    }
}
.message-page__text {
    margin-block-end: var(--space-12);
}
.message-page__action {
    margin-block-end: var(--space-2);
}
.message-page--form {
    --message-min-height: 650px;
    @media (min-width: 1024px) {
        margin-block-start: -2px;
    }
    & .page-title {
        --page-title-gap: var(--space-3);
    }
    & .divider {
        --divider-gap: var(--space-6);
        @media (min-width: 768px) {
            --divider-width: 286px;
        }
    }
    & .message-page__text {
        margin-block-end: var(--space-6);
        @media (min-width: 768px) {
            margin-block-end: var(--space-12);
        }
    }
}
.contact-form {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-6));
    padding: calc(var(--space-6) + 5px) 5px;
    @media (min-width: 768px) {
        padding: 5px;
    }
}
.form-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-block-end: var(--space-6);
    padding-inline: var(--space-3);
}
.form-field--half {
    @media (min-width: 768px) {
        width: 50%;
    }
}
.form-field--privacy {
    @media (min-width: 1024px) {
        flex: 1;
        width: auto;
    }
}
.form-field__label {
    padding-block-end: var(--space-2);
    color: var(--color-ink);
    cursor: pointer;
}
.form-field--required .form-field__label::after {
    content: " *";
    content: " *" / "";
    padding-inline-start: 0.2em;
    color: var(--color-required);
}
.form-control {
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    padding: 5px 14px;
    border: 1px solid var(--color-field-border);
    border-radius: 0;
    background-color: transparent;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.4;
    vertical-align: middle;
    @media (min-width: 768px) {
        font-size: 15px;
    }
    &:is(input) {
        padding: 0.5rem 1rem;
    }
    &::placeholder {
        color: inherit;
        font-family: inherit;
        opacity: 0.6;
    }
    &:focus {
        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
    }
    &[aria-invalid="true"] {
        border-color: var(--color-danger);
    }
}
.form-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-ink);
    cursor: pointer;
    & a {
        color: var(--color-brand);
        text-decoration: underline;
    }
}
.form-choice__input {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    margin: 0.2em 0 0;
    accent-color: var(--color-brand);
    cursor: pointer;
    &[aria-invalid="true"] {
        outline: 1px solid var(--color-danger);
    }
}
.form-field__error {
    width: 100%;
    margin: var(--space-2) 0;
    color: var(--color-danger);
    font-family: var(--font-ui);
    line-height: 1;
}
.contact-form__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    margin-block-end: var(--space-6);
    padding-inline: var(--space-3);
    @media (min-width: 1024px) {
        width: auto;
    }
}
.contact-form__submit {
    min-height: 40px;
    & .button__icon {
        margin-inline-end: calc(var(--space-2) + var(--space-3));
    }
}
.contact-form__submit:disabled {
    cursor: not-allowed;
}
.contact-form__mark {
    color: var(--color-required);
}
.notice {
    margin: var(--space-2) 0;
    font-family: var(--font-ui);
    line-height: 1;
}
.notice--error {
    color: var(--color-danger);
}
.contact-form .notice {
    width: 100%;
    padding-inline: var(--space-3);
}
.contact-form .notice--info {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.form-note--required {
    margin-block-end: var(--space-9);
    text-align: center;
    @media (min-width: 768px) {
        text-align: end;
    }
}
.form-note--legal {
    padding-block-start: 8px;
    border-block-start: 1px solid var(--color-surface-muted);
    font-size: var(--fs-small);
    line-height: var(--lh-lead);
    text-align: center;
}
.site-header {
    --nav-dropdown-gap: 21px;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    padding-inline: var(--space-4);
    border-block-end: 1px solid var(--color-line-header);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-header);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    @media (min-width: 768px) {
        --nav-dropdown-gap: 11px;
        padding-inline: var(--space-6) 0;
        border-block-end-width: 0;
    }
    @media (min-width: 1024px) {
        padding-inline: clamp(var(--space-4), (100% - 990px) / 2, 5%);
    }
}
.site-header__inner {
    display: flex;
    align-items: stretch;
    max-width: var(--wrap);
    min-height: var(--header-bar);
    margin-inline: auto;
}
.site-header__brand {
    display: flex;
    align-items: center;
    width: 50%;
    @media (min-width: 768px) {
        width: 25%;
    }
    @media (min-width: 1024px) {
        flex: none;
        width: auto;
    }
}
.site-header__logo {
    display: inline-block;
    line-height: 0;
}
.site-header__logo-image {
    width: 140px;
    vertical-align: middle;
    @media (min-width: 768px) {
        width: 120px;
    }
}
.site-header__menu {
    display: flex;
    align-items: center;
    width: 50%;
    @media (min-width: 768px) {
        width: 70%;
    }
    @media (min-width: 1024px) {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}
.site-nav {
    position: absolute;
    top: calc(var(--header-bar) / 2 + 15px + var(--nav-dropdown-gap));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    max-height: 0;
    overflow: hidden auto;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-menu);
    font-size: var(--fs-label);
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height 0.3s, transform 0.3s;
    &.is-open {
        max-height: calc(100vh - var(--header-bar));
        max-height: calc(100svh - var(--header-bar));
        transform: scaleY(1);
        animation: hide-scroll 0.3s backwards;
    }
    @media (min-width: 1024px) {
        position: static;
        display: flex;
        width: 100%;
        max-height: none;
        overflow: visible;
        border-radius: 0;
        background: none;
        box-shadow: none;
        transform: none;
        transition: none;
    }
}
@keyframes hide-scroll {
    0%, to {
        overflow: hidden;
    }
}
html:not(.js) .site-header .site-nav {
    position: static;
    max-height: none;
    transform: none;
}
.site-nav__list {
    position: relative;
    z-index: var(--z-above);
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    @media (min-width: 1024px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-inline-start: auto;
    }
}
.site-nav__item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    &:not(:last-child) {
        border-block-end: 1px dashed var(--color-line-menu);
    }
    @media (min-width: 1024px) {
        display: flex;
        &:not(:last-child) {
            border: 0;
        }
        &:not(:first-child) > .site-nav__link {
            margin-inline-start: 2.5px;
        }
        &:not(:last-child) > .site-nav__link {
            margin-inline-end: 2.5px;
        }
    }
}
.site-nav__link,
.site-nav__sublink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px var(--space-4);
    color: var(--color-ink);
    fill: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    &:hover, &:focus {
        background-color: var(--color-surface);
        color: var(--color-brand-text);
    }
    &[aria-current="page"], &[aria-expanded="true"] {
        color: var(--color-brand-text);
    }
    @media (min-width: 768px) {
        padding-block: var(--space-2);
    }
}
.site-nav__item:last-child > .site-nav__link {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.site-nav__link {
    @media (min-width: 1024px) {
        flex-grow: 1;
        padding: 13px var(--space-2);
        white-space: nowrap;
        transition-duration: 0s;
        &:hover, &:focus {
            background: none;
        }
    }
}
.site-nav__item:last-child > .site-nav__link {
    @media (min-width: 1024px) {
        border-radius: 0;
    }
}
.site-nav__flag {
    display: inline;
    width: 18px;
    height: 12px;
    vertical-align: baseline;
}
.site-nav__flag + span {
    margin-inline-start: 0.3em;
}
.site-nav__submenu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    &.is-open {
        display: block;
    }
    @media (min-width: 1024px) {
        position: absolute;
        top: 100%;
        left: 2.5px;
        z-index: var(--z-dropdown);
        display: block;
        min-width: 10em;
        margin-top: var(--space-2);
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-menu);
        font-size: var(--fs-label);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s linear 0.5s, visibility 0s linear 0.7s;
        &.is-open {
            display: block;
        }
    }
}
.site-nav__item--parent:is(:hover, :focus-within) > .site-nav__submenu {
    @media (min-width: 1024px) {
        opacity: 1;
        visibility: visible;
        transition: opacity 0s linear 0.25s, visibility 0s linear 0.25s;
    }
}
.site-nav__item--parent:is(:hover, :focus-within) > .site-nav__link {
    @media (min-width: 1024px) {
        color: var(--color-brand-text);
    }
}
.site-nav__subitem {
    margin: 0;
    padding: 0;
    list-style: none;
    &:not(:last-child) {
        border-block-end: 1px dashed var(--color-line-menu);
    }
}
.site-nav__sublink {
    border-inline-start: 8px solid transparent;
    @media (min-width: 1024px) {
        justify-content: flex-start;
        padding: var(--space-2) var(--space-4);
        white-space: nowrap;
        transition: 0.4s;
    }
}
.site-nav__subitem:last-child > .site-nav__sublink {
    @media (min-width: 1024px) {
        border-radius: 0 0 var(--radius-card) var(--radius-card);
    }
}
.site-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    padding: 0.25em;
    border: 0 solid;
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--fs-icon-nav);
    line-height: 1;
    cursor: pointer;
    &:hover, &:focus {
        background-color: var(--color-surface);
        color: var(--color-ink);
    }
    & .icon {
        width: 1em;
        height: 1em;
    }
    @media (min-width: 1024px) {
        display: none;
    }
}
.site-nav__toggle-close,
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-open {
    display: none;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-close {
    display: block;
}
html:not(.js) .site-header .site-nav__toggle {
    display: none;
}
.partners {
    --wrap-pad: var(--space-4);
    @media (min-width: 768px) {
        --wrap-pad: var(--space-6);
    }
    @media (min-width: 1024px) {
        --wrap-pad: 0px;
    }
}
.partners__panel {
    padding: var(--space-2);
    border-radius: var(--radius-tile);
    background-color: var(--color-surface-muted);
}
.partners-note {
    --wrap-pad: var(--space-4);
    margin-block-end: var(--space-9);
    @media (min-width: 768px) {
        --wrap-pad: var(--space-6);
    }
    @media (min-width: 1024px) {
        --wrap-pad: 0px;
    }
}
.partners-note__text {
    padding: var(--space-2);
    text-align: center;
}
.site-footer__main {
    --wrap-pad: 0px;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-muted);
    @media (min-width: 768px) {
        padding: var(--space-9) var(--space-4);
    }
    @media (min-width: 1024px) {
        padding: var(--space-9) 0;
    }
}
.site-footer__grid {
    display: flex;
    flex-wrap: wrap;
}
.site-footer__col {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    margin-block-start: var(--space-6);
    padding: var(--space-2);
    @media (min-width: 768px) {
        margin-block-start: 0;
    }
}
.site-footer__col--brand {
    @media (min-width: 768px) {
        width: 35%;
    }
    @media (min-width: 1024px) {
        width: 58%;
    }
}
.site-footer__col--nav {
    @media (min-width: 768px) {
        width: 30%;
    }
    @media (min-width: 1024px) {
        width: 20.666%;
    }
}
.site-footer__col--products {
    @media (min-width: 768px) {
        width: 35%;
    }
    @media (min-width: 1024px) {
        width: 21%;
    }
}
.site-footer__logo {
    display: block;
    width: 100%;
    margin-block-end: var(--space-4);
    line-height: 0;
    text-align: center;
    & img {
        width: 180px;
        vertical-align: middle;
    }
    @media (min-width: 768px) {
        text-align: start;
        & img {
            width: 160px;
        }
    }
}
.site-footer__logo a {
    display: inline-block;
}
.site-footer__text {
    width: 100%;
    color: var(--color-text);
    text-align: center;
    @media (min-width: 768px) {
        text-align: start;
    }
    @media (min-width: 1024px) {
        padding-inline-end: 50%;
    }
}
.site-footer__chips {
    width: 100%;
    margin: 0;
    padding-block-start: var(--space-3);
    line-height: 0;
    text-align: center;
    & img {
        width: 280px;
        vertical-align: middle;
        mix-blend-mode: multiply;
    }
    @media (min-width: 768px) {
        margin-block-end: 6px;
        text-align: start;
    }
}
.site-footer__slogan {
    width: 100%;
    margin-block-start: -12px;
    color: var(--color-text);
    text-align: center;
    @media (min-width: 768px) {
        text-align: start;
    }
}
.social-icons {
    width: 100%;
    margin: 26px 0;
    padding: 0;
    line-height: 1;
    font-size: 0;
    text-align: center;
    word-spacing: var(--space-3);
    @media (min-width: 768px) {
        text-align: start;
    }
}
.social-icons__item {
    display: inline-block;
    word-spacing: normal;
}
.social-icons__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--fs-icon-social) * 2);
    height: calc(var(--fs-icon-social) * 2);
    border-radius: var(--radius-social);
    background-color: var(--color-brand);
    color: var(--color-surface);
    font-size: var(--fs-icon-social);
    line-height: var(--fs-icon-social);
    cursor: pointer;
    transition-duration: 0.3s;
    transition-property: transform;
    &:not([href]):not([tabindex]) {
        color: var(--color-surface);
    }
    &:hover, &:focus, &:active {
        color: var(--color-surface);
        opacity: 0.9;
        transform: scale(1.1);
    }
}
.site-footer__cert {
    display: flex;
    align-items: center;
    width: 100%;
}
.site-footer__cert-logo {
    width: 40px;
    margin-inline-end: var(--space-2);
    line-height: 0;
}
.site-footer__cert-logo img {
    width: 40px;
    vertical-align: middle;
}
.site-footer__cert-text {
    width: 130px;
    margin-block-start: var(--space-2);
    color: var(--color-text);
    text-align: center;
}
@media (min-width: 768px) {
    .site-footer__cert-text {
        text-align: start;
    }
}
.site-footer__heading {
    width: 100%;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1;
}
.footer-nav {
    width: 100%;
    &.footer-nav--spaced {
        margin-block-end: 45px;
        @media (min-width: 768px) {
            margin-block-end: 28px;
        }
    }
}
.footer-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}
.footer-nav__link {
    display: flex;
    align-items: center;
    padding: var(--space-1) 0;
    color: var(--color-text);
    fill: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 20px;
    transition: 0.4s;
    &:hover, &:focus, &[aria-current="page"] {
        color: var(--color-brand-text);
        fill: var(--color-brand-text);
    }
}
.site-footer__bottom {
    margin-block: var(--space-4);
    padding: var(--space-3) 0 var(--space-4);
    background-color: var(--color-surface);
    @media (min-width: 768px) {
        padding: var(--space-1) var(--space-4);
    }
    @media (min-width: 1024px) {
        padding: 0;
    }
}
.site-footer__bottom-inner {
    --wrap-pad: 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 75px;
    @media (min-width: 768px) {
        flex-wrap: nowrap;
        min-height: 50px;
    }
}
.site-footer__copy,
.site-footer__credit {
    width: 100%;
    margin: 0;
    padding: var(--space-2);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--fs-fine);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    @media (min-width: 768px) {
        width: 50%;
    }
}
.site-footer__copy {
    @media (min-width: 768px) {
        text-align: start;
    }
}
.site-footer__credit {
    @media (min-width: 768px) {
        text-align: end;
    }
    & a, & a:hover {
        color: inherit;
    }
}
.ph-light {
    display: inline-block;
    flex: none;
    font-family: "Phosphor-Light" !important;
    font-style: normal;
    font-weight: normal;
    font-size: 1.15em;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
}
.ph-x::before {
    content: "\e4f6";
}
.ph-caret-down::before {
    content: "\e136";
}
.consent-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--control-size-compact);
    max-inline-size: 100%;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-brand-text);
    border-radius: var(--radius-pill);
    background: var(--color-brand-text);
    color: var(--color-surface);
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    &::after {
        content: "";
        position: absolute;
        inset: calc(50% - var(--control-size) / 2) 0;
    }
    &:hover, &:focus-visible {
        border-color: var(--color-ink);
        background: var(--color-ink);
        color: var(--color-surface);
    }
}
.consent-button--secondary {
    background: transparent;
    color: var(--color-ink);
    &:hover, &:focus-visible {
        border-color: var(--color-brand);
        background: var(--color-surface-muted);
        color: var(--color-ink);
    }
}
.icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: var(--control-size);
    block-size: var(--control-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    &:hover {
        background: var(--color-surface-muted);
    }
}
.consent {
    position: fixed;
    z-index: var(--z-consent);
    inset-inline: var(--space-2);
    inset-block-end: max(var(--space-2), env(safe-area-inset-bottom));
    max-inline-size: var(--dialog-width);
    max-block-size: calc(100vh - var(--space-6));
    max-block-size: calc(100svh - var(--space-6));
    margin-inline: auto;
    overflow-y: auto;
    border-radius: var(--radius-dialog);
    background: var(--color-surface);
    box-shadow: var(--shadow-dialog);
    @media (min-width: 768px) {
        inset-inline: var(--space-5);
        inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
        margin-inline: auto 0;
    }
}
.consent__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    padding: var(--space-3);
}
.consent__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-caption);
    line-height: 1.75;
    text-wrap: pretty;
}
.consent__text a, .dialog__intro a {
    color: var(--color-brand-text);
    text-decoration: underline;
}
.consent__text a:hover, .dialog__intro a:hover {
    color: var(--color-ink);
}
.consent__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-2);
}
.consent__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-2);
}
.consent__close, .dialog__close {
    flex: none;
    color: var(--color-text);
    font-size: var(--fs-caption);
}
.consent__close {
    align-self: start;
    margin-block: calc(var(--space-3) - var(--control-size) / 2) 0;
    margin-inline-end: calc(-1 * var(--space-1));
}
.dialog__close {
    margin-block: calc((1lh - var(--control-size)) / 2);
    margin-inline-end: calc(-1 * var(--space-2));
}
.consent__close .ph-light, .dialog__close .ph-light {
    font-size: 1em;
}
.dialog .consent-button {
    min-block-size: var(--control-size-compact-dialog);
}
.dialog {
    inline-size: min(calc(100% - var(--space-6)), var(--dialog-width));
    max-block-size: calc(100vh - var(--space-6));
    max-block-size: calc(100svh - var(--space-6));
    padding: 0;
    border: 0;
    border-radius: var(--radius-dialog);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-dialog);
    overflow: auto;
}
.dialog::backdrop {
    background: var(--color-backdrop);
}
.dialog__form {
    display: flex;
    flex-direction: column;
    max-block-size: inherit;
}
.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) 0;
}
.dialog__title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.3;
}
.dialog__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    padding: var(--space-1) var(--space-3) var(--space-2);
}
.dialog__body > :last-child {
    margin-block-end: 0;
}
.dialog__intro {
    margin-block-end: var(--space-2);
    color: var(--color-text);
    font-size: var(--fs-caption);
    line-height: 1.75;
}
.dialog__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-block-start: 1px solid var(--color-line);
}
.dialog__submit {
    margin-inline-start: auto;
}
.consent-categories {
    margin: 0;
    padding: 0;
    list-style: none;
}
.consent-category {
    position: relative;
}
.consent-category + .consent-category {
    border-block-start: 1px solid var(--color-line);
}
.consent-category__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: calc(var(--control-size) + var(--space-1));
    list-style: none;
    cursor: pointer;
    &::-webkit-details-marker {
        display: none;
    }
}
.consent-category--optional .consent-category__summary {
    margin-inline-end: calc(var(--switch-width) + var(--space-2));
}
.consent-category__chevron {
    color: var(--color-text);
    font-size: var(--fs-caption);
    transform: rotate(-90deg);
    transition: transform var(--dur-out) var(--ease);
}
.consent-category__details[open] .consent-category__chevron {
    transform: none;
}
.consent-category__name {
    min-inline-size: 0;
    color: var(--color-ink);
    font-size: var(--fs-dialog-small);
    overflow-wrap: anywhere;
}
.consent-category__state {
    margin-inline-start: auto;
    color: var(--color-text);
    font-size: var(--fs-caption);
    white-space: nowrap;
}
.consent-category__description {
    margin: 0 0 var(--space-3);
    padding-inline-start: calc(var(--fs-caption) + var(--space-2));
    color: var(--color-text);
    font-size: var(--fs-caption);
    line-height: 1.75;
}
.switch {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-block-size: var(--control-size);
}
.switch__input {
    position: absolute;
    inset: 0;
    z-index: var(--z-raised);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.switch__track {
    position: relative;
    display: block;
    inline-size: var(--switch-width);
    block-size: var(--switch-height);
    border-radius: var(--radius-pill);
    background: var(--color-switch-off);
    transition: background-color var(--dur-out) var(--ease);
}
.switch__track::before {
    content: "";
    position: absolute;
    inset-block-start: var(--switch-inset);
    inset-inline-start: var(--switch-inset);
    inline-size: calc(var(--switch-height) - 2 * var(--switch-inset));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-switch-knob);
    box-shadow: var(--shadow-knob);
    transition: transform var(--dur-out) var(--ease), background-color var(--dur-out) var(--ease);
}
.switch__input:checked + .switch__track {
    background: var(--color-brand);
}
.switch__input:checked + .switch__track::before {
    transform: translateX(calc(var(--switch-width) - var(--switch-height)));
}
.switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--color-ink);
    outline-offset: 3px;
}
.consent-category__switch {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    block-size: calc(var(--control-size) + var(--space-1));
}
.consent__status {
    margin: 0;
}
.consent-noscript {
    margin: 0;
    padding: 12px var(--space-4);
    font-size: var(--fs-label);
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .is-animated {
        animation: none !important;
    }
    .site-nav, .site-nav__submenu {
        transition: none !important;
    }
    .slides__slide, .slides__image--ken-burns {
        transition: none !important;
    }
    .slides__image--ken-burns.is-zooming {
        transform: none;
    }
    .headline .headline__marker path {
        animation-duration: 0s !important;
    }
    .button, .social-icons__link {
        transition: none;
    }
}
.gallery {
    --gallery-columns: 2;
    --gallery-gap: var(--space-4);
    --gallery-row-height: 200px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
    align-items: start;
    gap: var(--gallery-gap);
    width: 100%;
    min-height: 1px;
}
.gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gallery-radius, var(--radius-tile));
    text-decoration: none;
    transition-property: all;
}
.gallery__image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: cover;
    object-position: center center;
    transform-origin: center top;
    transition-duration: 800ms;
    transition-property: filter, transform;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
.gallery.is-justified {
    display: block;
    height: 0;
    padding-bottom: calc(var(--gallery-aspect-ratio, 0) * 100%);
    transition: padding-bottom 0.3s;
    & .gallery__item {
        position: absolute;
        top: calc(var(--item-top, 0%) + var(--item-row, 0) * var(--gallery-gap));
        left: calc(var(--item-start, 0) * (100% - var(--gallery-gap) * var(--item-gaps, 0)) + var(--gallery-gap) * var(--item-index, 0));
        width: calc(var(--item-width, 1) * (100% - var(--gallery-gap) * var(--item-gaps, 0)));
        height: var(--item-height, auto);
    }
    & .gallery__image {
        height: 100%;
    }
}
.gallery.is-masonry {
    display: block;
    height: 0;
    border-block-end: calc(var(--gallery-gap-count, 0) * var(--gallery-gap)) solid transparent;
    transition: padding-bottom 0.3s;
    & .gallery__item {
        position: absolute;
        top: calc(var(--item-top, 0%) + var(--item-row, 0) * var(--gallery-gap));
        left: calc((100% / var(--gallery-columns) - (var(--gallery-gap) * (var(--gallery-columns) - 1) / var(--gallery-columns))) * var(--item-column, 0) + (var(--gallery-gap) * var(--item-column, 0)));
        width: calc(100% / var(--gallery-columns) - (var(--gallery-gap) * (var(--gallery-columns) - 1) / var(--gallery-columns)));
    }
    & .gallery__image {
        aspect-ratio: var(--item-ratio);
    }
}
.gallery--grow .gallery__item:is(:hover, :focus) .gallery__image {
    transform: scale(1.1);
}
.gallery.is-lazy .gallery__image:not(.is-loaded) {
    filter: opacity(0);
    transform: scale(0.5);
}
.gallery__overlay {
    position: absolute;
    inset: 0;
    background-color: transparent;
    pointer-events: none;
    transition: background-color var(--gallery-overlay-duration, 800ms);
}
.gallery__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    color: var(--color-surface);
    font-size: var(--gallery-caption-size, inherit);
    font-weight: 700;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms;
}
.gallery__item:is(:hover, :focus) .gallery__overlay {
    background-color: var(--gallery-overlay, transparent);
}
.gallery__item:is(:hover, :focus) .gallery__caption {
    opacity: 1;
}
.gallery--photos {
    --gallery-columns: 2;
    --gallery-gap: var(--space-4);
    --gallery-overlay: var(--color-overlay-light);
    @media (min-width: 768px) {
        --gallery-columns: 3;
        --gallery-gap: var(--space-5);
    }
    @media (min-width: 1024px) {
        --gallery-columns: 5;
        --gallery-gap: var(--space-4);
    }
}
.gallery--product {
    --gallery-columns: 1;
    --gallery-gap: var(--space-2);
    --gallery-overlay: var(--color-overlay-light);
    @media (min-width: 768px) {
        --gallery-columns: 2;
    }
    @media (min-width: 1024px) {
        --gallery-columns: 3;
        --gallery-gap: var(--space-4);
    }
}
.gallery--overlay-dark {
    --gallery-overlay: var(--color-overlay-dark);
}
.gallery--swatches {
    --gallery-columns: 2;
    --gallery-gap: var(--space-4);
    --gallery-radius: 0;
    --gallery-item-ratio: 21 / 9;
    --gallery-overlay: var(--color-overlay-dark);
    --gallery-overlay-duration: 300ms;
    --gallery-caption-size: var(--fs-small);
    & .gallery__image {
        aspect-ratio: var(--gallery-item-ratio);
    }
    @media (min-width: 768px) {
        --gallery-columns: 4;
        --gallery-gap: var(--space-5);
    }
    @media (min-width: 1024px) {
        --gallery-columns: 7;
        --gallery-gap: 8px;
    }
}
.gallery--cta {
    --gallery-columns: 2;
    --gallery-gap: var(--space-4);
    @media (min-width: 768px) {
        --gallery-columns: 3;
    }
    @media (min-width: 1024px) {
        --gallery-columns: 4;
    }
}
.lightbox {
    --lightbox-ui-color: var(--color-ink);
    --lightbox-ui-color-hover: var(--color-brand);
    --lightbox-text-color: var(--color-ink);
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-panel);
    background-color: var(--color-lightbox);
    box-shadow: var(--shadow-media);
    color: var(--lightbox-text-color);
    font-family: var(--font-system);
    line-height: 1.5;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    &::backdrop {
        background-color: transparent;
    }
    & :where(button) {
        margin: 0;
        border: 0;
        background: none;
        font: inherit;
        cursor: pointer;
    }
    & .lightbox__icon {
        inline-size: 1em;
        block-size: 1em;
        fill: currentColor;
    }
}
.lightbox__message {
    position: relative;
    block-size: 100%;
}
.lightbox__close {
    position: absolute;
    top: 0;
    inset-inline-end: 0.75em;
    z-index: var(--z-above);
    display: flex;
    margin-block-start: 13px;
    padding: 0.25em;
    color: var(--lightbox-ui-color);
    font-size: var(--fs-icon-lightbox);
    line-height: 1;
    transition: all 0.3s;
    &:hover {
        color: var(--lightbox-ui-color-hover);
    }
}
.lightbox__container {
    position: relative;
    z-index: var(--z-raised);
    block-size: 100%;
    overflow: hidden;
}
.lightbox__header,
.lightbox__footer {
    left: 0;
    inline-size: 100%;
    padding: var(--space-3) var(--space-4);
    transition: 0.3s;
}
.lightbox__header {
    position: absolute;
    top: 0;
    z-index: var(--z-lightbox-header);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-inline: 1em 2.6em;
    color: var(--lightbox-ui-color);
    font-size: var(--fs-icon-lightbox);
}
.lightbox__tool {
    display: flex;
    box-sizing: content-box;
    margin: 0 0.35em;
    padding: 0.25em;
    color: var(--lightbox-ui-color);
    font-size: var(--fs-icon-lightbox);
    line-height: 1;
    &:hover {
        color: var(--lightbox-ui-color-hover);
    }
}
.lightbox__counter {
    inline-size: max-content;
    margin-inline-end: auto;
    color: currentColor;
    font-size: 0.75em;
}
.lightbox__slides {
    position: relative;
    block-size: 100%;
    touch-action: pan-y;
}
.lightbox__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 0;
    visibility: hidden;
    transform: translateX(calc(100% + 100px));
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    &.is-active {
        visibility: visible;
        transform: none;
        transition: transform 0.3s ease, visibility 0s;
    }
    &.is-before {
        transform: translateX(calc(-100% - 100px));
    }
    &.is-after {
        transform: translateX(calc(100% + 100px));
    }
    &.is-instant {
        transition: none;
    }
    @media (min-width: 768px) {
        padding: 70px;
    }
}
.lightbox__image {
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    border: none;
    border-radius: 2px;
    box-shadow: var(--shadow-lightbox-image);
    transition: transform 0.3s;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}
.lightbox.is-zoom .lightbox__slide.is-active .lightbox__image {
    cursor: grab;
    transform: translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(3);
}
.lightbox.is-panning .lightbox__image {
    transition: none;
}
.lightbox__nav {
    position: absolute;
    top: 0;
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 20%;
    block-size: 100%;
    padding: 0;
    color: hsl(0 0% 93% / 90%);
    font-size: var(--fs-icon-lightbox-nav);
    opacity: 1;
    transition: all 0.3s;
    &:hover {
        color: var(--lightbox-ui-color-hover);
    }
    &[hidden] {
        display: none;
    }
    @media (min-width: 768px) {
        inline-size: 15%;
    }
}
.lightbox__nav--prev {
    left: 0;
    justify-content: flex-start;
    @media (min-width: 768px) {
        justify-content: center;
    }
}
.lightbox__nav--next {
    right: 0;
    justify-content: flex-end;
    @media (min-width: 768px) {
        justify-content: center;
    }
}
.lightbox__footer {
    position: fixed;
    bottom: 0;
    z-index: var(--z-lightbox-footer);
    color: var(--lightbox-text-color);
}
.lightbox__title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 700;
}
.lightbox__description {
    margin: 0;
    font-size: var(--fs-small);
}
.lightbox.is-ui-hidden {
    & .lightbox__header, & .lightbox__footer {
        opacity: 0;
        pointer-events: none;
    }
    & .lightbox__nav {
        opacity: 0;
    }
}
.lightbox.is-zoom {
    & .lightbox__header, & .lightbox__footer {
        background-color: rgb(0 0 0 / 50%);
    }
    & .lightbox__nav {
        opacity: 0;
        pointer-events: none;
    }
}
.lightbox__share-menu {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    background-color: transparent;
    transition: background-color 0.4s;
}
.lightbox__share-links {
    position: absolute;
    top: 3em;
    inset-inline-end: 2.8em;
    display: block;
    min-inline-size: 200px;
    padding: 14px var(--space-4);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-share-menu);
    opacity: 0;
    transform: scale(0);
    transform-origin: 90% 10%;
    transition: all 0.25s 0.1s;
    &::before {
        content: "";
        position: absolute;
        top: 1px;
        inset-inline-end: 0.5em;
        display: block;
        border: 0.45em solid transparent;
        border-bottom-color: var(--color-surface);
        transform: translateY(-100%) scaleX(0.7);
    }
}
.lightbox__share-link {
    display: block;
    color: #0C0D0E;
    font-size: var(--fs-fine);
    line-height: 2.5;
    text-align: start;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.5s 0.1s;
    &:hover {
        color: var(--color-ink);
    }
    & .lightbox__icon {
        inline-size: 1.25em;
        block-size: 1.25em;
        margin-inline-end: 0.75em;
    }
}
.lightbox__share-link--facebook .lightbox__icon {
    fill: var(--color-facebook);
}
.lightbox__share-link--xTwitter .lightbox__icon {
    fill: var(--color-ink);
}
.lightbox__share-link--pinterest .lightbox__icon {
    fill: var(--color-pinterest);
}
.lightbox__share-link--download .lightbox__icon {
    fill: var(--color-download);
}
.lightbox.is-share {
    & .lightbox__share-menu {
        top: 0;
        left: 0;
        inline-size: 100vw;
        block-size: 100vh;
        block-size: 100svh;
        background-color: rgb(0 0 0 / 50%);
        cursor: default;
        opacity: 1;
    }
    & .lightbox__share-links, & .lightbox__share-link {
        opacity: 1;
    }
    & .lightbox__share-links {
        transform: scale(1);
    }
    & .lightbox__tool--share {
        z-index: var(--z-above);
    }
}
@media (prefers-reduced-motion: reduce) {
    .gallery,
    .gallery__image,
    .lightbox * {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}
.hero {
    position: relative;
    isolation: isolate;
    padding: var(--space-8) var(--space-4) 0;
    background-image: url("../assets/images/backgrounds/grid.svg");
    background-repeat: repeat-x;
    background-size: contain;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        background-image: linear-gradient(180deg, transparent 0%, var(--color-surface) 100%);
    }
    @media (min-width: 768px) {
        padding: var(--space-9) var(--space-6);
    }
    @media (min-width: 1024px) {
        margin-block-start: -2px;
        padding: var(--space-12) 0 var(--space-9);
    }
}
.hero__inner {
    --wrap-pad: 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
    min-height: 500px;
    padding-block-end: var(--space-11);
    @media (min-width: 768px) {
        padding-block-end: 0;
    }
}
.hero__content {
    width: 100%;
    margin-block-end: var(--space-10);
    @media (min-width: 768px) {
        margin-block-end: var(--space-9);
        padding-inline-end: var(--space-10);
    }
    @media (min-width: 1024px) {
        width: 50%;
        margin-block-end: 0;
    }
}
.hero__title {
    margin-block-end: var(--space-6);
    font-size: var(--fs-title-compact);
    @media (min-width: 768px) {
        font-size: var(--fs-title);
    }
}
.hero__subtitle {
    margin: 0 0 var(--space-5);
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 500;
    line-height: var(--lh-subtitle);
    @media (min-width: 768px) {
        font-size: var(--fs-subtitle);
    }
}
.hero__text {
    margin-block-end: var(--space-6);
}
.hero__list {
    margin-block-end: var(--space-7);
}
.hero__media {
    display: none;
    width: 100%;
    @media (min-width: 768px) {
        display: block;
    }
    @media (min-width: 1024px) {
        width: 50%;
    }
}
.hero__slides {
    margin-block: var(--space-1) var(--space-4);
}
.hero__caption {
    text-align: end;
}
.network {
    margin-block-start: -2px;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-muted);
    @media (min-width: 768px) {
        padding: 0 var(--space-4);
    }
    @media (min-width: 1024px) {
        padding: 0;
    }
}
.network__inner {
    --wrap-pad: 0px;
    display: flex;
    align-items: center;
    min-height: 475px;
    @media (min-width: 1024px) {
        min-height: 650px;
    }
}
.network__column {
    width: 100%;
}
.network__card {
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-panel);
    background-color: var(--color-surface);
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        border-radius: inherit;
        background: var(--color-surface) url("../assets/images/shared/mapa-distribucije.webp") center center / cover no-repeat;
        opacity: 0.4;
    }
    @media (min-width: 768px) {
        padding: var(--space-9);
        &::before {
            background-position: center right;
            background-size: contain;
            opacity: 1;
        }
    }
}
.network__content {
    @media (min-width: 1024px) {
        padding-inline-end: 57%;
    }
}
.network__title {
    margin-block-end: var(--space-4);
    font-size: var(--fs-title-sm);
    @media (min-width: 768px) {
        font-size: var(--fs-title);
    }
}
.network__text {
    display: flow-root;
    margin-block-end: var(--space-4);
}
.network__list {
    margin-block-end: var(--space-8);
}
.network__action {
    margin-block-end: var(--space-2);
}
.products {
    padding: var(--space-11) var(--space-4) 0;
    background-color: var(--color-surface);
    @media (min-width: 768px) {
        padding: var(--space-13) var(--space-4) var(--space-9);
    }
    @media (min-width: 1024px) {
        padding: var(--space-13) 0 var(--space-9);
    }
}
.products__inner {
    --wrap: var(--wrap-wide);
    --wrap-pad: 0px;
}
.products__title {
    margin: 0 0 var(--space-4);
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-size: var(--fs-title-compact);
    font-weight: 700;
    line-height: 1;
    @media (min-width: 768px) {
        margin-inline-start: var(--space-4);
    }
}
.products__subtitle {
    margin: 0 0 var(--space-9);
    color: var(--color-ink);
    @media (min-width: 768px) {
        margin-inline-start: var(--space-4);
    }
}
.product-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.product-grid__item {
    display: flex;
    width: 100%;
    @media (min-width: 768px) {
        width: 50%;
    }
    @media (min-width: 1024px) {
        width: 25%;
    }
}
.product-card {
    flex: 1 1 auto;
    min-width: 0;
    margin: var(--space-3) 0;
    padding: var(--space-7) var(--space-6) var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    &:hover {
        border-color: var(--color-surface-muted);
    }
    @media (min-width: 768px) {
        margin: var(--space-3);
    }
}
.product-card__media {
    margin-block-end: var(--space-4);
    text-align: center;
    & a {
        display: inline-block;
    }
    & img {
        display: inline-block;
        vertical-align: middle;
    }
}
.product-card__title {
    margin: 0;
    color: var(--color-brand);
    font-family: var(--font-ui);
    font-size: var(--fs-feature-text);
    font-weight: 500;
    line-height: var(--lh-subtitle);
    text-align: center;
    & a, & a:hover {
        color: inherit;
    }
}
.product-card--more {
    padding-block-start: var(--space-6);
    border-width: 2px;
    background-color: var(--color-ink);
}
.product-card__more {
    margin-block-start: 114px;
    font-family: var(--font-ui);
    font-size: var(--fs-lead);
    font-weight: 600;
    line-height: var(--lh-lead);
}
.icon-list--inverse .icon-list__text {
    color: var(--color-surface);
}
.quality {
    margin-block-start: -2px;
    padding: var(--space-11) var(--space-6);
    @media (min-width: 1024px) {
        padding: 0;
    }
}
.quality__inner {
    --wrap-pad: 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
    min-height: 1000px;
}
.quality__content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    @media (min-width: 768px) {
        padding-inline-end: var(--space-6);
    }
    @media (min-width: 1024px) {
        width: 56%;
    }
}
.quality__title {
    width: 100%;
    margin-block-end: var(--space-8);
    font-size: var(--fs-title-sm);
    @media (min-width: 768px) {
        font-size: var(--fs-title);
    }
}
.quality__text {
    width: 100%;
    margin-block-end: var(--space-8);
    color: var(--color-text);
}
.quality__media {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    @media (min-width: 1024px) {
        width: 44%;
    }
}
.quality__figure {
    width: 100%;
    text-align: center;
}
.quality__figure a {
    display: inline-block;
}
.quality__image {
    display: inline-block;
    border-radius: var(--radius-panel);
    vertical-align: middle;
}
.feature {
    width: 100%;
    margin-block-end: var(--space-9);
    text-align: center;
    @media (min-width: 768px) {
        width: 50%;
        margin-block-end: var(--space-7);
        padding-inline-end: var(--space-2);
        text-align: start;
    }
}
.feature__icon {
    line-height: 0;
}
.feature__badge {
    display: inline-block;
    padding: var(--space-3);
    border-radius: var(--radius-panel);
    background: var(--color-brand);
    color: var(--color-surface);
    font-size: var(--fs-icon-feature);
    line-height: 1;
    transition: all 0.3s;
}
.feature__glyph {
    position: relative;
    width: 1em;
    height: 1em;
}
.feature__title {
    margin: 0.5rem 0 1rem;
    color: var(--color-ink);
    font-family: var(--font-ui);
    font-size: var(--fs-feature-title);
    font-weight: 700;
    line-height: 1.2;
}
.feature__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--fs-feature-text);
    font-weight: 400;
    line-height: 1.2;
}
.reviews-band {
    position: relative;
    isolation: isolate;
    margin-block-start: -2px;
    padding: var(--space-8) var(--space-4);
    background: var(--color-ink) url("../assets/images/shared/ct2-alat-2.webp") center center / cover no-repeat;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        background-image: linear-gradient(337deg, var(--color-text) 13%, var(--color-ink) 53%);
        opacity: 0.4;
    }
    @media (min-width: 768px) {
        padding: var(--space-6) var(--space-9) var(--space-11);
    }
    @media (min-width: 1024px) {
        padding: 0;
        background-attachment: fixed;
    }
}
.reviews-band__inner {
    --wrap-pad: 0px;
    display: flex;
    align-items: center;
    min-height: 400px;
    @media (min-width: 1024px) {
        min-height: 700px;
    }
}
.reviews-band__content {
    width: 100%;
}
.reviews-band__title {
    margin-block-end: var(--space-8);
    color: var(--color-surface);
    font-size: 35px;
    @media (min-width: 768px) {
        font-size: var(--fs-title);
    }
    @media (min-width: 1024px) {
        padding-inline-end: 50%;
    }
}
.inquiry {
    position: relative;
    isolation: isolate;
    margin-block-start: -2px;
    padding: var(--space-11) var(--space-4) var(--space-9);
    background-image: url("../assets/images/backgrounds/grid.svg");
    background-repeat: repeat-x;
    background-size: 70% auto;
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: var(--z-behind);
        background-image: linear-gradient(180deg, transparent 0%, var(--color-surface) 100%);
    }
    @media (min-width: 768px) {
        padding: var(--space-12) var(--space-6) var(--space-8);
    }
    @media (min-width: 1024px) {
        padding: 0;
    }
}
.inquiry__inner {
    --wrap-pad: 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 650px;
    @media (min-width: 1024px) {
        flex-wrap: nowrap;
    }
}
.inquiry__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    @media (min-width: 1024px) {
        width: 38%;
    }
}
.inquiry__title {
    margin-block-end: var(--space-8);
    font-size: 41px;
    @media (min-width: 768px) {
        font-size: var(--fs-title);
    }
}
.inquiry__text {
    margin-block-end: var(--space-8);
    & > :last-child {
        margin-block-end: 0;
    }
}
.inquiry__action {
    margin-block-end: var(--space-2);
}
.inquiry__gallery {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    @media (min-width: 1024px) {
        width: 62%;
        padding-inline-start: var(--space-6);
    }
}
.gallery--inquiry {
    width: 98.788%;
    --gallery-row-height: 120px;
    --gallery-gap: var(--space-2);
    @media (min-width: 768px) {
        --gallery-row-height: 200px;
    }
    @media (min-width: 1024px) {
        --gallery-gap: var(--space-4);
    }
}
.about-intro {
    --divider-width: 161px;
    @media (min-width: 768px) {
        --divider-width: 164px;
    }
    @media (min-width: 1024px) {
        --intro-row-gap: 90px;
    }
}
.about-band__row {
    --columns-split: 50.667%;
    --columns-gap: var(--space-9);
    --columns-gap-last: var(--space-9);
}
.about-band__col {
    margin-block-end: var(--space-6);
    @media (min-width: 768px) {
        margin-block-end: var(--space-2);
    }
    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.about-band__col--spaced {
    @media (min-width: 768px) {
        margin-block-end: var(--space-6);
    }
    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.about-band__col--end {
    @media (min-width: 768px) {
        margin-block-end: 0;
    }
}
.about-band__text {
    @media (min-width: 1024px) {
        margin-block-end: var(--space-9);
    }
}
.restoration-intro {
    --divider-width: 161px;
    --intro-subtitle-gap: var(--space-9);
    @media (min-width: 768px) {
        --divider-width: 70%;
    }
    @media (min-width: 1024px) {
        --intro-row-gap: 90px;
    }
}
.restoration-band {
    @media (min-width: 1024px) {
        --band-pad-start: 120px;
        --band-pad-end: var(--space-13);
    }
}
.restoration-band__row {
    --columns-split: 55%;
    --columns-gap: var(--space-9);
}
.restoration-band__content {
    margin-block-end: var(--space-6);
    @media (min-width: 768px) {
        margin-block-end: 0;
    }
}
.restoration-band__media {
    margin-block-end: var(--space-6);
    @media (min-width: 768px) {
        margin-block-end: var(--space-2);
    }
    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.restoration-band__title {
    --page-title-gap: var(--space-4);
}
.restoration-band__heading {
    margin-block-end: var(--space-4);
    font-size: var(--fs-heading-sm);
}
.restoration-band__text {
    margin-block-end: 0;
    @media (min-width: 1024px) {
        margin-block-end: var(--space-9);
    }
}
.restoration-band__figure {
    width: 100.167%;
    max-width: 100.167%;
    text-align: center;
}
.restoration-band__figure a {
    display: inline-block;
}
.restoration-band__image {
    display: inline-block;
    border-radius: var(--radius-panel);
    vertical-align: middle;
}
.swatches-intro {
    --divider-width: 199px;
    --intro-split: 53.667%;
    --intro-gap: 0px;
    @media (min-width: 768px) {
        --divider-width: 197px;
    }
    @media (min-width: 1024px) {
        --intro-gap: var(--space-9);
        --intro-media-width: 46.25%;
    }
}
.page-intro__content--stack-gap {
    margin-block-end: var(--space-8);
    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.subtitle--compact {
    font-size: var(--fs-heading-sm);
    @media (min-width: 768px) {
        font-size: var(--fs-subtitle);
    }
}
.page-intro__text--flush {
    margin-block-end: 0;
}
.swatches-band {
    --band-pad-end: 0px;
    @media (min-width: 768px) {
        --band-pad-start: var(--space-10);
        --band-pad-inline: var(--space-6);
    }
    @media (min-width: 1024px) {
        --band-pad-start: var(--space-12);
        margin-block-end: var(--space-9);
    }
}
.divider--section {
    --divider-width: 100%;
    --divider-gap: var(--space-9);
    @media (min-width: 768px) {
        --divider-width: 329px;
    }
}
.swatches-band__inner {
    padding-block-end: var(--space-12);
}
.swatches-band__title {
    margin: 0 0 7px;
    font-family: var(--font-heading);
    font-size: var(--fs-title-xs);
    font-weight: 700;
    line-height: 1;
}
.swatches-band__subtitle {
    margin-block-end: 7px;
}
.swatches-band__note {
    margin-block-end: var(--space-6);
    @media (min-width: 1024px) {
        padding-inline-end: 50%;
    }
}
.swatches-band__gallery {
    margin-block-end: var(--space-12);
}
.swatches-band__gallery--end {
    margin-block-end: 0;
}
.gallery-intro {
    --divider-width: 167px;
    --intro-split: 100%;
    --intro-gap: 0px;
    @media (min-width: 768px) {
        --divider-width: 169px;
    }
}
.page-intro__text--measure {
    @media (min-width: 1024px) {
        padding-inline-end: 45%;
    }
}
.photo-gallery {
    margin-block-end: var(--space-12);
    padding: var(--space-6) var(--space-4) 0;
    @media (min-width: 768px) {
        margin-block-end: 0;
        padding: 0 var(--space-6);
    }
    @media (min-width: 1024px) {
        margin-block-end: var(--space-12);
        padding: 0;
    }
}
.photo-gallery__inner {
    --wrap-pad: 0px;
}
.contact-intro {
    --intro-split: 69.959%;
    --intro-gap: var(--space-4);
    --intro-row-gap: var(--space-6);
    --intro-pad-end: var(--space-2);
    --divider-width: 169px;
    @media (min-width: 768px) {
        --divider-width: 210px;
    }
    @media (min-width: 1024px) {
        --intro-gap: var(--space-9);
    }
}
.page-intro__content--phone-gap {
    margin-block-end: var(--space-8);
    @media (min-width: 768px) {
        margin-block-end: 0;
    }
}
.page-intro__text--tablet-gap {
    margin-block-end: 0;
    @media (min-width: 768px) {
        margin-block-end: var(--space-9);
    }
    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.page-intro__media--tablet-gap {
    @media (min-width: 768px) {
        margin-block-end: var(--space-4);
    }
    @media (min-width: 1024px) {
        margin-block-end: 0;
    }
}
.contact-map {
    --wrap: 500px;
    --columns-split: 69.959%;
    --columns-gap: var(--space-9);
    padding: 0 var(--space-4);
    @media (min-width: 768px) {
        margin-block: var(--space-9);
        padding: var(--space-9) var(--space-6);
    }
    @media (min-width: 1024px) {
        --wrap: inherit;
        margin-block: 0 var(--space-12);
        padding: 0;
    }
}
.contact-map__inner {
    --wrap-pad: 0px;
}
.info-card--map-aside {
    height: auto;
    margin-block-end: var(--space-6);
    @media (min-width: 768px) {
        margin-block-end: var(--space-9);
    }
    @media (min-width: 1024px) {
        height: 100%;
        margin-block-end: 0;
    }
}
.contact-list--tall-first .contact-list__items ~ .contact-list__items {
    line-height: 1.5;
}
.product-decor--windows {
    --decor-x: 350px;
    --decor-y: 50px;
    --decor-width: 380px;
}
.product-decor--doors {
    --decor-x: 346px;
    --decor-y: 99px;
    --decor-width: 300px;
}
.product-decor--pivot-door {
    --decor-x: 343px;
    --decor-y: 87px;
    --decor-width: 290px;
}
.product-decor--stairs {
    --decor-x: 345px;
    --decor-y: 83px;
    --decor-width: 330px;
}
.product-decor--bed {
    --decor-x: 347px;
    --decor-y: 123px;
    --decor-width: 380px;
}
.product-decor--interior {
    --decor-x: 338px;
    --decor-y: 23px;
    --decor-width: 380px;
}
.product-decor--pergola {
    --decor-x: 355px;
    --decor-y: 105px;
    --decor-width: 380px;
}
.product-decor--garden {
    --decor-x: 362px;
    --decor-y: 172px;
    --decor-width: 380px;
}
.product-decor--bathroom {
    --decor-x: 354px;
    --decor-y: 123px;
    --decor-width: 380px;
}
.product-decor--summer-house {
    --decor-x: 356px;
    --decor-y: 81px;
    --decor-width: 350px;
}
.product-decor--fence {
    --decor-x: 353px;
    --decor-y: 182px;
    --decor-width: 380px;
}
.product-decor--winter-garden {
    --decor-x: 355px;
    --decor-y: 105px;
    --decor-width: 380px;
}
.product-decor--prefab-house {
    --decor-x: 339px;
    --decor-y: 59px;
    --decor-width: 380px;
}
.product-decor--storeroom {
    --decor-x: 364px;
    --decor-y: 59px;
    --decor-width: 380px;
}
.gallery--trio-md {
    @media (min-width: 768px) {
        --gallery-columns: 3;
    }
}
.gallery--duo-lg {
    @media (min-width: 1024px) {
        --gallery-columns: 2;
    }
}
.gallery--solo-lg {
    @media (min-width: 1024px) {
        --gallery-columns: 1;
    }
}
.gallery--quad-lg {
    @media (min-width: 1024px) {
        --gallery-columns: 4;
    }
}
.slides.slides--compact {
    --slides-height: 400px;
}
.heading--spaced {
    margin-block-start: var(--space-9);
}
.product-copy--plain-links a {
    color: var(--color-text);
    font-weight: inherit;
    &:is(:hover, :active) {
        color: var(--color-brand);
    }
}
.product-copy__underline {
    text-decoration: underline;
}
.divider--spaced {
    --divider-gap: var(--space-6);
}
.product-content__note--spaced {
    margin-block-start: var(--space-9);
}