/*
Theme Name: ExpertConstruct
Theme URI: 
Author: AEM
Author URI: 
Description: The theme was created for service sites
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Services
Text Domain: ExpertConstruct 
Requires at least: 
Tested up to: 6.6
Requires PHP: 7.4
*/
ol.list_none,ul.list_none{list-style-type:none}
.wp-post-image{max-width:100%;}/*Для выравнивания картинки в постах*/
.article-preview__title {min-height: 80px;}/*Для выравнивания описания под заголовками разной длины на странице блога в карточках постов*/
.article__meta-item a{color: var(--text-middle-color); text-decoration: none;} .article__meta-item a:hover {text-decoration: underline;}/*Ссылка категории на странице поста*/
/* :root,
[data-color-scheme="light"] {
    --page-background-color: hsl(240 10% 96%);
    --page-background-color-light: hsl(0 0% 100%);
    --page-ui-illustrations-color: hsl(220 100% 50%);
    --footer-background-color: var(--page-background-color-light);
    --text-light-color: hsl(0 0% 0% / 55%);
    --text-bright-color: hsl(0 0% 0%);
    --text-middle-color: hsl(0 0% 0%);
    --button-disabled-opacity: 35%;
    --button-grey-background-color: hsl(240 15% 65% / 28%);
    --button-grey-background-color-hover: hsl(240 15% 58% / 28%);
    --button-grey-background-color-active: hsl(240 15% 52% / 28%);
    --button-grey-label-color: hsl(0 0% 0%);
    --button-accent-background-color: hsl(240 100% 55%);
    --button-accent-background-color-hover: hsl(240 100% 47%);
    --button-accent-background-color-active: hsl(240 100% 45%);
    --button-accent-label-color: hsl(0 0% 100%);
    --input-background-color: hsl(240 15% 65% / 28%);
    --input-value-color: hsl(0 0% 0%);
    --input-placeholder-color: hsl(0 0% 0% / 55%);
    --link-color: hsl(240 100% 55%);
    --link-visited-color: hsl(260 100% 55%);
    --button-contrast-label-color: hsl(0 0% 100%);
    --button-contrast-background-color: hsl(0 0% 0%);
    --button-contrast-background-color-hover: hsl(0 0% 10%);
    --button-contrast-background-color-active: hsl(0 0% 12%);
    --modal-background-color: var(--page-background-color-light);
    --modal-backdrop-color: hsl(0 0% 0% / 80%);
    --hero-title-color: hsl(0 0% 100%);
    --hero-text-color: hsl(0 0% 100% / 55%);
    --hero-backgrond-gradient-from: hsl(0 0% 0%);
    --hero-backgrond-gradient-to: hsl(0 0% 10%);
    --font-weight-text: 400;
    --font-weight-title: 800;
}


[data-color-scheme="dark"] {
    --page-background-color: hsl(0 0% 5%);
    --page-background-color-light: hsl(0 0% 9%);
    --page-ui-illustrations-color: hsl(220 100% 50%);
    --footer-background-color: var(--page-background-color-light);
    --text-light-color: hsl(0 0% 100% / 30%);
    --text-bright-color: hsl(0 0% 100%);
    --text-middle-color: hsl(0 0% 100% / 55%);
    --button-disabled-opacity: 50%;
    --button-grey-background-color: hsl(240 15% 65% / 28%);
    --button-grey-background-color-hover: hsl(240 15% 70% / 28%);
    --button-grey-background-color-active: hsl(240 15% 75% / 28%);
    --button-grey-label-color: hsl(0 0% 100%);
    --button-accent-background-color: hsl(240 100% 55%);
    --button-accent-background-color-hover: hsl(230 100% 55%);
    --button-accent-background-color-active: hsl(226 100% 55%);
    --button-accent-label-color: hsl(0 0% 100%);
    --input-background-color: hsl(240 15% 65% / 28%);
    --input-value-color: hsl(0 0% 100%);
    --input-placeholder-color: hsl(0 0% 100% / 30%);
    --link-color: hsl(220 100% 70%);
    --link-visited-color: hsl(240 100% 80%);
    --button-contrast-label-color: hsl(0 0% 0%);
    --button-contrast-background-color: hsl(0 0% 100%);
    --button-contrast-background-color-hover: hsl(0 0% 90%);
    --button-contrast-background-color-active: hsl(0 0% 80%);
    --modal-background-color: var(--page-background-color-light);
    --modal-backdrop-color: hsl(0 0% 0% / 90%);
    --hero-title-color: hsl(0 0% 100%);
    --hero-text-color: hsl(0 0% 100% / 55%);
    --hero-backgrond-gradient-from: hsl(0 0% 0%);
    --hero-backgrond-gradient-to: hsl(0 0% 10%);
    --font-weight-text: 400;
    --font-weight-title: 800;
} */

:root,
[data-color-scheme="light"] {
    --page-background-color: hsl(240 10% 96%);
    --page-background-color-light: hsl(0 0% 100%);
    --page-illustration-color-orange: hsl(20 100% 55%);
    --page-illustration-color-grey: #888B91;
    --footer-background-color: var(--page-background-color-light);
    --text-light-color: hsl(0 0% 0% / 54%);
    --text-bright-color: hsl(0 0% 0%);
    --text-middle-color: hsl(0 0% 0% / 75%);
    --button-disabled-opacity: 35%;
    --button-grey-background-color: hsl(240 15% 65% / 28%);
    --button-grey-background-color-hover: hsl(240 15% 58% / 28%);
    --button-grey-background-color-active: hsl(240 15% 52% / 28%);
    --button-grey-label-color: hsl(0 0% 0%);
    --button-accent-background-color: hsl(240 100% 55%);
    --button-accent-background-color-hover: hsl(240 100% 47%);
    --button-accent-background-color-active: hsl(240 100% 45%);
    --button-accent-label-color: hsl(0 0% 100%);
    --input-background-color: hsl(240 15% 65% / 28%);
    --input-value-color: hsl(0 0% 0%);
    --input-placeholder-color: hsl(0 0% 0% / 55%);
    --link-color: hsl(240 100% 55%);
    --link-visited-color: hsl(260 100% 55%);
    --button-contrast-label-color: hsl(0 0% 100%);
    --button-contrast-background-color: hsl(0 0% 0%);
    --button-contrast-background-color-hover: hsl(0 0% 10%);
    --button-contrast-background-color-active: hsl(0 0% 12%);
    --modal-background-color: var(--page-background-color-light);
    --modal-backdrop-color: hsl(0 0% 0% / 80%);
    --hero-title-color: hsl(0 0% 100%);
    --hero-text-color: hsl(0 0% 100% / 55%);
    --hero-backgrond-gradient-from: hsl(0 0% 0%);
    --hero-backgrond-gradient-to: hsl(0 0% 10%);
    --font-weight-text: 400;
    --font-weight-strong: 600;
    --font-weight-title: 800;
    --price-label-color: hsl(140, 100%, 25%);
}


[data-color-scheme="dark"] {
    --page-background-color: hsl(0 0% 5%);
    --page-background-color-light: hsl(0 0% 9%);
    --page-illustration-color-orange: hsl(20 100% 80%);
    --page-illustration-color-grey: #646568;
    --footer-background-color: var(--page-background-color-light);
    --text-light-color: hsl(0 0% 100% / 45%);
    --text-bright-color: hsl(0 0% 100%);
    --text-middle-color: hsl(0 0% 100% / 60%);
    --button-disabled-opacity: 50%;
    --button-grey-background-color: hsl(240 15% 65% / 28%);
    --button-grey-background-color-hover: hsl(240 15% 70% / 28%);
    --button-grey-background-color-active: hsl(240 15% 75% / 28%);
    --button-grey-label-color: hsl(0 0% 100%);
    --button-accent-background-color: hsl(240 100% 55%);
    --button-accent-background-color-hover: hsl(230 100% 55%);
    --button-accent-background-color-active: hsl(226 100% 55%);
    --button-accent-label-color: hsl(0 0% 100%);
    --input-background-color: hsl(240 15% 65% / 28%);
    --input-value-color: hsl(0 0% 100%);
    --input-placeholder-color: hsl(0 0% 100% / 30%);
    --link-color: hsl(220 100% 70%);
    --link-visited-color: hsl(240 100% 80%);
    --button-contrast-label-color: hsl(0 0% 0%);
    --button-contrast-background-color: hsl(0 0% 100%);
    --button-contrast-background-color-hover: hsl(0 0% 90%);
    --button-contrast-background-color-active: hsl(0 0% 80%);
    --modal-background-color: var(--page-background-color-light);
    --modal-backdrop-color: hsl(0 0% 0% / 90%);
    --hero-title-color: hsl(0 0% 100%);
    --hero-text-color: hsl(0 0% 100% / 55%);
    --hero-backgrond-gradient-from: hsl(0 0% 0%);
    --hero-backgrond-gradient-to: hsl(0 0% 10%);
    --font-weight-text: 400;
    --font-weight-strong: 600;
    --font-weight-title: 800;
    --price-label-color: hsl(140, 100%, 50%);
}
:root {
      --typo-title-xl-font-size: 4.5rem;
      --typo-title-xl-line-height: 4.2rem;
      --typo-title-xl-letter-spacing: -0.18rem;
      --typo-title-l-font-size: 3rem;
      --typo-title-l-line-height: 3rem;
      --typo-title-l-letter-spacing: -0.02em;
      --typo-title-m-font-size: 2rem;
      --typo-title-m-line-height: 2.2rem;
      --typo-title-m-letter-spacing: -0.01em;
      --typo-title-s-font-size: 1.3rem;
      --typo-title-s-line-height: 1.5rem;
      --typo-title-s-letter-spacing: -0.000rem;
      --typo-title-xs-font-size: 1rem;
      --typo-title-xs-line-height: 1.25rem;
      --typo-title-xs-letter-spacing: -0.005rem;
      --typo-text-l-font-size: 1.15rem;
      --typo-text-l-line-height: 1.725rem;
      --typo-text-m-font-size: 1rem;
      --typo-text-m-line-height: 1.5rem;
      --typo-text-m-line-height-narrow: 1.375rem;
      --typo-text-s-font-size: 0.8125rem;
      --typo-text-s-line-height: 1.3125rem;
      --typo-text-s-line-height-narrow: 1.25rem;
      --typo-text-ui-font-size: max(0.75rem, 13px);
      --typo-list-item-margim: 0.75rem;
      --typo-list-font-size: var(--typo-text-m-font-size);
      --typo-list-line-height: var(--typo-text-m-line-height);
      --typo-list-bullet: "—";
      --page-padding-inline: 1.25rem;
      --page-content-max-width-m: 64.5rem;
      --page-text-max-width: var(--typo-text-block-max-width);
      --page-font-face: "Onest";
      --border-radius-s: 0.375rem;
      --border-radius-m: 1rem;
      --border-radius-l: 2rem;
      --page-section-gap: 10rem;
      --typo-text-block-max-width: 40rem;
      --typo-text-block-l-max-width: 50rem;
      --typo-narrw-text-block-max-width-2: 17.5rem;
      --control-button-border-radius: var(--border-radius-s);
      --control-button-size-m-height: var(--control-height-m);
      --control-button-size-s-height: var(--control-height-s);
      --control-input-border-radius: var(--border-radius-s);
      --control-input-size-m-height: 3rem;
      --control-input-size-m-padding-inline: 0.5rem;
      --control-height-m: 2.25rem;
      --control-height-s: 1.5rem;
      --gap-xxs: 0.375rem;
      --gap-xs: 0.75rem;
      --gap-s: 1.5rem;
      --gap-m: 3rem;
      --gap-l: 6rem;
      --gap-xl: 9rem;
      --header-height: 3rem;
      --header-opacity: 4.6875rem;
      --header-backdrop-blur: 3rem;
      --hero-title-font-size: 4rem;
      --hero-title-line-height: 4rem;
      --hero-title-letter-spacing: -0.12rem;
      --padding-xs: var(--gap-xs);
      --padding-s: var(--gap-s);
      --padding-m: var(--gap-m);
      --padding-l: var(--gap-l);
      --padding-xl: var(--gap-xl);
      --card-size-s-width: 20rem;
      --card-size-m-width: 30rem;
      --card-size-l-width: 40rem;
}

@supports (corner-shape: squircle) {
      [class*="rounded-"] {
            corner-shape: squircle;

      }
/* 
      [class*="rounded-"]:focus-visible {
            outline: 2px solid SelectedItem;
      } */

      :root {
            --border-radius-s: 0.75rem;
            --border-radius-m: 2rem;
            --border-radius-l: 4rem;
      }
}
:root {
    --backdrop: hsl(0deg 0% 0% / 85%);
}
.notifications {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--padding-s);
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--gap-xs);
    max-height: 100vh;
    align-items: center;
}

.notifications:empty {
    display: none;
}

.notifications__item {
    --__background-color: var(--page-background-color-light);
    --__line-height: 1.35rem;
    --__width: 20rem;
    background: var(--__background-color);
    padding: var(--padding-s);
    color: #fff;
    font-size: var(--typo-text-ui-font-size);
    width: min(var(--__width), 100vw - 1.5rem);
    line-height: var(--__line-height);
    font-weight: 300;
    position: relative;
    display: flex;
    gap: 0.75rem;
    animation: notifications__item .5s;
}

.notifications__item_hide {
    animation-name: notifications__item_hide;
    animation-fill-mode: both;
}

@keyframes notifications__item {
    0% {
        translate: 0 var(--gap-s);
        display: flex;
        opacity: 0;
    }

    99% {
        translate: 0;
        display: flex;
        opacity: 1;
    }

    100% {
        display: none;
    }
}

@keyframes notifications__item_hide {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.notifications__item-close {
    opacity: 0.5;
    margin-left: auto;
}


.notifications__item_success .notifications__item-icon {
    background-image: url(/wp-content/themes/expertconstruct/assets/icons/notify-success.svg);
}

.notifications__item_attention .notifications__item-icon {
    background-image: url(/wp-content/themes/expertconstruct/assets/icons/notify-attention.svg);
}

.notifications__item_error .notifications__item-icon {
    background-image: url(/wp-content/themes/expertconstruct/assets/icons/notify-error.svg);
}

.notifications__item-icon {
    height: var(--control-height-s);
    aspect-ratio: 1;
    border-radius: var(--bd-radius-S);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/wp-content/themes/expertconstruct/assets/icons/notify-message.svg);
}

.notifications__item-text {
    min-height: var(--control-height-s);
    display: flex;
    align-items: center;
}


.notifications__prototype {
    display: none;
}
.fzf {
  padding-inline: max((100vw - var(--page-content-max-width-m)) / 2, var(--_padding-inline));
  flex-grow: 1;
  min-height: 20rem;
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--page-background-color);
}
.fzf__img {
display: block;
position: absolute;
bottom: 0%;
height: 90%;
left: 45%;
}

@media (width < 45rem) {
  .fzf__img {
    display: none;
  }
  
}
.title-xl,
.title-l,
.title-m,
.title-s {
    text-wrap: balance;
}

.text-l,
.text-m,
.text-s {
    text-wrap: pretty;
}

.about-preview {
  --_circle-radius: 30rem;
  --__circle-x: 100%;
  --__circle-y: 50%;
  --_circle-color: #99a1;
  background-color: var(--page-background-color-light);
  display: grid;
  grid-template-columns: 5fr 3fr;
  position: relative;
  isolation: isolate;
  /* background-image:
    radial-gradient(circle at var(--__circle-x) var(--__circle-y), var(--_circle-color) var(--_circle-radius), transparent calc(var(--_circle-radius) + 1px)),
    radial-gradient(circle at var(--__circle-x) var(--__circle-y), var(--_circle-color) calc(var(--_circle-radius) * .8), transparent calc(var(--_circle-radius) * .8 + 1px)),
    radial-gradient(circle at var(--__circle-x) var(--__circle-y), var(--_circle-color) calc(var(--_circle-radius) * .6), transparent calc(var(--_circle-radius) * .6 + 1px)),
    radial-gradient(circle at var(--__circle-x) var(--__circle-y), var(--_circle-color) calc(var(--_circle-radius) * .4), transparent calc(var(--_circle-radius) * .4 + 1px)); */


  position: relative;
  align-items: end;
}

.about-preview__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding:
    var(--gap-m)
    0
    var(--gap-m)
    var(--gap-m);
}

.about-preview__title {
  font-size: var(--typo-title-m-font-size);
  line-height: var(--typo-title-m-line-height);
  letter-spacing: var(--typo-title-m-letter-spacing);
  font-weight: var(--font-weight-title);
  color: var(--text-bright-color);
}

.about-preview__text {
  text-wrap: pretty;
  font-size: var(--typo-text-m-font-size);
  line-height: var(--typo-text-m-line-height-narrow);
  font-weight: var(--font-weight-text);
  color: var(--text-middle-color);
  max-width: var(--typo-text-block-max-width);
}

.about-preview__controls {
  display: flex;
  gap: var(--gap-xs);
  z-index: 1;
}

.about-preview__image {
  position: relative;
  height: 180%;
  overflow: hidden;


}

.about-preview__image-src {
  position: absolute;
  bottom: -10%;



  max-width: 100%;
  max-height: 100%;
  left: 50%;
  translate: -50%;
}

@media (max-width: 45rem) {
  .about-preview {
    --_circle-radius: 70%;
    --__circle-x: 50%;
    --__circle-y: 100%;
    grid-template-columns: 1fr;
    width: min(100%, 28rem);
  }

  .about-preview__content {
    padding:
    var(--gap-s)
    var(--gap-s)
    0
    var(--gap-s);
  }

  .about-preview__controls {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    justify-content: center;
  }

  .about-preview__image {
    height: initial;
    width: 100%;
    aspect-ratio: 3/4;
  }

  .about-preview__image-src {
    bottom: 0;
  }

}

.about-preview {
  transition: translate 1s, opacity 1s;
}

.about-preview_hide {
  opacity: 0;
  translate: 0 4rem;
}
.article-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    padding-bottom:  var(--gap-xs);
}

.article-preview:any-link {
    text-decoration: none;
    color: var(--text-middle-color);

}

.article-preview:hover {
    background-color: var(--page-background-color-light);
    box-shadow: 0 0 0 var(--gap-xs) var(--page-background-color-light);
}

.article-preview__image {
    position: relative;
    background-image: url(https://synchronizer.github.io/logvinov-dn-public/articles-img/article-placeholder.svg);
    background-size: 100%;
}

.article-preview__category {
    position: absolute;
    top: var(--gap-xs);
    left: var(--gap-xs);
    background-color: var(--page-background-color-light);
    font-size: var(--typo-text-ui-font-size);
    color: var(--text-bright-color);
    padding-inline: var(--gap-xxs);
}

.article-preview__info {
    padding-inline: var(--gap-xxs);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.article-preview__title {
    font-size: var(--typo-title-s-font-size);
    line-height: var(--typo-title-s-line-height);
    font-weight: var(--font-weight-title);
    color: var(--text-bright-color);
}
.article-preview__description {
    line-height: var(--typo-text-m-line-height-narrow);
}

.article-preview__date {
    color: var(--text-light-color);
    font-size: var(--typo-text-s-font-size);
    line-height: var(--typo-text-s-line-height-narrow);
}
.article__header {
    margin-bottom: var(--gap-m);
}


.article__title {
    font-size: var(--typo-title-l-font-size);
    line-height: var(--typo-title-l-line-height);
    letter-spacing: var(--typo-title-l-letter-spacing);
    font-weight: var(--font-weight-title);
    color: var(--text-bright-color);
    max-width: 50rem;
}
.article__meta {
    margin-top: var(--gap-s);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-s);
    font-size: var(--typo-text-m-font-size);
    line-height: var(--typo-text-m-line-height);
}
.article__meta-item {
    display: flex;
    gap: var(--gap-xxs);
}

.breadcrumbs {
    display: flex;
    gap: var(--gap-xxs);
}
.breadcrumbs__item {
    white-space: nowrap;
}
.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-left: var(--gap-xxs);
}

.breadcrumbs__item:first-child {
    margin-left: -.5rem;
}
.call-request__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.call-request__form_row {
    flex-direction: row;
}

.call-request__form_row .input {
    flex-grow: 1;
}

.call-request__form_row .call-request__send {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.call-request__form_row .call-request__send > * {
    flex-grow: 1;
}

.call-request__send {
    align-self: start;
}
.card {
  
  background-color: var(--page-background-color-light);
  position: relative;
  align-items: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--gap-s);
}



.card_padding_s {
  padding: var(--gap-s);
}
.card_padding_m {
  padding: calc(var(--gap-m) * .75);
}
.card_padding_l {
  padding: var(--gap-l);
}
.card_padding_xs {
  padding: var(--gap-xs);
}

.card_layout_horizontal {
  flex-direction: row;
  column-gap: var(--gap-s);
  align-items: flex-start;
}


.card_size_s {
  width: min(var(--card-size-s-width), 100%);
}
.card_size_m {
  width: min(var(--card-size-m-width), 100%);
}
.card_size_l {
  width: min(var(--card-size-l-width), 100%);
}

.card__details {
  position: absolute;
  right: var(--gap-s);
  top: var(--gap-s);
}
.carousel {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  position: relative;
  margin-inline: calc((100% - 100vw) / 2);
  padding-inline: calc((100vw - 100%) / 2);
  gap: var(--gap-s);
}


.carousel__content {
  margin-inline: calc((100% - 100vw) / 2);
  padding-inline: calc((100vw - 100%) / 2);
  display: flex;
  overflow-x: scroll;
  
  /* For focus-outline */
  margin-block: -3rem;
  padding-block: 3rem;
}

.carousel__controls {
  display: flex;
  gap: var(--gap-xxs);
}

.carousel_gap_xs .carousel__content{
  gap: var(--gap-xs);
}
.carousel_gap_s .carousel__content{
  gap: var(--gap-s);
}
.carousel_gap_m .carousel__content{
  gap: var(--gap-m);
}
.carousel_gap_l .carousel__content{
  gap: var(--gap-l);
}
.carousel_gap_xl .carousel__content{
  gap: var(--gap-xl);
}

.carousel__content>*{
  flex-shrink: 0;
  flex-grow: 0;
}

.carousel_size_s .carousel__content > *{
  width: min(var(--card-size-s-width), 100%);
}
.carousel_size_m .carousel__content > *{
  width: min(var(--card-size-m-width), 100%);
}
.carousel_size_l .carousel__content > *{
  width: min(var(--card-size-l-width), 100%);
}


.carousel__content::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome browsers */
}

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

/* .carousel__left,
.carousel__right {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
} */

.carousel__left {
  left: 1.5rem;
}

.carousel__right {
  right: 1.5rem;
}

.carousel__left_hide,
.carousel__right_hide {
  opacity: var(--button-disabled-opacity);
  pointer-events: none;
}

.carousel__controls:has(.carousel__left_hide):has(.carousel__right_hide) {
  display: none;
}

@media not (hover: hover) {

  .carousel__controls {
    display: none;
  }
}




.carousel__item {
  transition: opacity 1s, translate 1s;
}
.carousel__item_hide {
  opacity: 0;
  translate: 4rem;
}
.contacts {
    display: grid;
    gap: var(--gap-s);
    grid-template-columns: 1fr 1fr 1.5fr;
    grid-template-areas:
        "phone messangers worktime"
        "email messangers worktime"
        "call-request call-request worktime"
    ;
}

@media (width < 66rem) {
    .contacts {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "phone messangers"
            "email messangers"
            "worktime worktime"
            "call-request call-request"
        ;

    }
}

@media (width < 33rem) {
    .contacts {
        grid-template-columns: 1fr;
        grid-template-areas:
            "phone"
            "email"
            "messangers"
            "worktime"
            "call-request"
        ;

    }
}

.contacts__item {
    padding: var(--gap-s);
    background-color: var(--page-background-color-light);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.contacts__item> :last-child {
    margin-top: auto;
}

.contacts__title {
    font-size: var(--typo-text-s-font-size);
    color: var(--text-light-color);
}

.contacts__text {
    font-size: 1.375rem;
    line-height: 1.25;
    color: var(--text-bright-color);

}

.contacts__text+.contacts__text {
    margin-top: 0.75rem;
}

.contacts__item_phone {
    grid-area: phone;
}

.contacts__item_email {
    grid-area: email;
}

.contacts__item_messangers {
    grid-area: messangers;
}

.contacts__item_worktime {
    grid-area: worktime;
}

.contacts__item_call-request {
    grid-area: call-request;
}

@media (width >=33rem) {
    .contacts .call-request__form {
        flex-direction: row;
    }

    .contacts .call-request__form .input {
        flex-grow: 1;
    }

    .contacts .call-request__form .call-request__send {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .contacts .call-request__form .call-request__send>* {
        flex-grow: 1;
    }

}
.footer {
  background-color: var(--page-background-color-light);
  padding-block: var(--gap-l);
  padding-inline: max((100vw - var(--page-content-max-width-m)) / 2, var(--_padding-inline));
  overflow-x: hidden;
  color: var(--text-light-color);
  font-size: var(--typo-text-s-font-size);
  line-height: var(--typo-text-s-line-height);
  display: grid;
  grid-template-areas: "service-links other-links info";
  column-gap: var(--gap-l);
  row-gap: var(--gap-xs);
}

.footer_transparent {
  background-color: transparent;
}

.footer__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
}

.footer__section_service-links {
  grid-area: service-links;
}

.footer__section_other-links {
  grid-area: other-links;
}

.footer__section_info {
  grid-area: info;
}

@media (max-width: 70rem) {
  .footer {
    grid-template-areas:
      "service-links other-links"
      "info info"
    ;
    padding-block: var(--gap-m) var(--gap-l);
  }

  .footer__section_info {
    margin-top: var(--gap-m);
    padding-top: var(--gap-m);
    border-top: 1px solid var(--text-light-color);
  }
}

@media (max-width: 40rem) {
  .footer {
    /* --_padding-inline: var(--page-padding-inline); */
    grid-template-areas:
      "service-links"
      "other-links"
      "info"
    ;
  }
}
.fullscreen-gallery::backdrop {
  
}

.body:has(.fullscreen-gallery[open]) {
  overflow: hidden;
}

.fullscreen-gallery:focus-visible {
  outline: none;
}

.fullscreen-gallery {
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background: none;
  border: none;
  overflow-x: scroll;
  padding: 0;
  scroll-snap-type: x mandatory;
  background-color: var(--backdrop);
  -ms-overflow-style: none;
  scrollbar-width: none;
  align-items: stretch;
}

.fullscreen-gallery::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome browsers */
}

.fullscreen-gallery[open] {
  display: flex;
}


.fullscreen-gallery__item {
  width: calc(100vw - 1.5rem);
  padding-inline: .75rem;
  height: 100vh;
  flex-shrink: 0;
  scroll-snap-align: start;
  overflow-y: auto;
  display: flex;
  align-items:center;
  justify-content: center;
  box-sizing: content-box;
}

.fullscreen-gallery__item > * {
  max-height: calc(100vh - 1.5rem);
  max-width: calc(100vw - 1.5rem);
}


.fullscreen-gallery__close {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  color: #fff;
}



.fullscreen-gallery__left,
.fullscreen-gallery__right {
  position: fixed;
  top: 50%;
  translate: 0 -50%;
}

.fullscreen-gallery__left {
  left: 1.5rem;
  margin-left: max(-6rem,
      (100% - 100vw) / 2);
}

.fullscreen-gallery__right {
  right: 1.5rem;
  margin-right: max(-6rem,
      (100% - 100vw) / 2);
}

.fullscreen-gallery__left_hide,
.fullscreen-gallery__right_hide {
  display: none;
  pointer-events: none;
}

[data-fullscreen-gallery] {
  cursor: pointer;
}

@media not (hover: hover) {
  .fullscreen-gallery__left,
  .fullscreen-gallery__right {
    display: none;
  }
}

.fullwidth {
  margin-inline: calc((100% - 100vw) / 2);
  padding-inline: calc((100vw - 100%) / 2);
}
.gap {
  display: inline-block;
}

.gap_block {
  display: block;
}

.gap_size_xxs {
  height: var(--gap-xxs);
  width: var(--gap-xxs);
}

.gap_size_xs {
  height: var(--gap-xs);
  width: var(--gap-xs);
}

.gap_size_s {
  height: var(--gap-s);
  width: var(--gap-s);
}

.gap_size_m {
  height: var(--gap-m);
  width: var(--gap-m);
}

.gap_size_l {
  height: var(--gap-l);
  width: var(--gap-l);
}

.gap_size_xl {
  height: var(--gap-xl);
  width: var(--gap-xl);
}
.grid {
    display: grid;
}


.grid_gap_xs {
    gap: var(--gap-xs)
}

.grid_gap_s {
    gap: var(--gap-s)
}

.grid_gap_m {
    gap: var(--gap-m)
}

.grid_gap_l {
    gap: var(--gap-l)
}

.grid_gap_l {
    gap: var(--gap-l)
}

.grid_gap_xl {
    gap: var(--gap-xl)
}

.grid_columns_1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid_columns_2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid_columns_3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid_columns_4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid__item {
    transition: opacity 1s, translate 1s;
}

.grid__item_hide {
    opacity: 0;
    translate: 0 4rem;
}

@media (max-width: 60rem) {

    .grid_columns_3,
    .grid_columns_4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 40rem) {

    .grid_columns_2,
    .grid_columns_3,
    .grid_columns_4 {
        grid-template-columns: repeat(1, 1fr);
    }
}
.header {
  padding-inline: max((100vw - var(--page-content-max-width-m)) / 2, var(--_padding-inline));
  height: var(--header-height);
  top: 0;
  z-index: 1;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--page-background-color);

  animation: 1ms shadow-toggle linear both;
  animation-timeline: scroll();
  animation-range: 1px 50px;
  --_border-bottom-color: rgba(0, 0, 0, .2);
}

.header_background-color_default {
  background-color: var(--page-background-color);
}

.header_background-color_light {
  background-color: var(--page-background-color-light);
}

[data-color-scheme="dark"] .header,
.header[data-color-scheme="dark"] {
  --_border-bottom-color: rgba(255, 255, 255, .1);
}

.header::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
}


@keyframes shadow-toggle {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: 0 1px 0 var(--_border-bottom-color);
  }
}

.header_sticky {
  position: sticky;
}



.header__nav-item *:any-link {
  text-decoration: none;
}





.header__burger {
  display: none;
}

.header__logo {
  display: block;
  height: calc(var(--header-height) / 2);
}
.header__nav-desktop {
  display: flex;
  gap: var(--gap-s);
  height: 100%;
}

.header__nav-desktop .header__nav-sub {
  position: absolute;
  padding: var(--padding-s);
  flex-direction: column;
  gap: var(--gap-xs);
  display: none;
  top: calc(100% + var(--gap-xs));
}

.header_background-color_default .header__nav-desktop .header__nav-sub {
  background-color: var(--page-background-color-light);
}
.header_background-color_light .header__nav-desktop .header__nav-sub {
  background-color: var(--page-background-color);
}

.header__nav-desktop .header__nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/*.header__nav-desktop .header__nav-item:has(.header__nav-sub) {
  padding-right: 1em;
}
.header__nav-desktop .header__nav-item:has(.header__nav-sub)::after {
  content: '▾';
  position: absolute;
  right: 0;
}
.header__nav-desktop .header__nav-item .header__nav-item:has(.header__nav-sub)::after {
  content: '▸';
} */


.header__nav-desktop .header__nav-sub .header__nav-sub {
  top: 0;
  left: calc(100% + var(--gap-s));
}

.header__nav-desktop .header__nav-sub::before {
  content: '';
  display: block;
  position: absolute;
  inset: calc(var(--gap-xs) * -1);
}

.header__nav-desktop .header__nav-item:hover>.header__nav-sub:not(:empty),
.header__nav-desktop .header__nav-sub:not(:empty):hover {
  display: flex;
}


@media (max-width: 60rem),
(hover: none) and (pointer: coarse) {
  .header__nav-desktop {
    display: none;
    gap: var(--gap-s);
  }

  .header__burger {
    display: block;
  }
}

.header__nav-touch,
.header__nav-touch .header__nav-sub {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-s);
}

.header__nav-touch-close {
  position: absolute;
  right: var(--page-padding-inline);
  top: calc((var(--header-height) - var(--control-button-size-m-height)) / 2);
}

.header__nav-touch .header__nav-sub {
    padding: var(--gap-s);
    display: flex;
}

.header__nav-touch a {
  color: var(--text-bright-color);
}


.header__nav-touch-wrapper {
  border: none;
  background-color: var(--page-background-color-light);
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: var(--header-height) var(--gap-s);
  margin-left: auto;
}

.header__nav-touch {
  padding-bottom: var(--gap-m);
}

.header__nav-touch-wrapper::backdrop {
  background-color: var(--backdrop);
}
.header__nav-touch .header__nav-item-expand-button {
    float: right;
    width: var(--control-button-size-s-height);
    aspect-ratio: 1;
      -webkit-appearance: none;
     -moz-appearance: none;
     -ms-appearance: none;
     -o-appearance: none;
     appearance: none;
}

.header__nav-touch .header__nav-item-expand-button::after {
    content: '▾';
    width: 100%;
    line-height: var(--control-button-size-s-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__nav-touch .header__nav-item-expand-button:checked {
    transform: rotate(180deg);
}

.header__nav-touch .header__nav-item-expand-button:checked ~ .header__nav-sub {
    display: flex;
}

/* .header__nav-touch .header__nav-item:has(> .header__nav-sub:empty) .header__nav-item-expand-button {
    display: none;
} */

@media (max-width: 60rem),
(hover: none) and (pointer: coarse) {
  .header__nav-desktop {
    display: none;
    gap: var(--gap-s);
  }

  .header__burger {
    display: block;
  }
}
.hero {
  margin-inline: calc((100% - 100vw) / 2);
  padding-inline: calc((100vw - 100%) / 2);
  background-color: var(--page-background-color);
  height: clamp(32rem, 95vh - var(--header-height), 100rem);
  height: clamp(32rem, 95svh - var(--header-height), 100rem);
  position: relative;
}
.hero__price {
  margin-bottom: var(--gap-s);
}
.hero__title {
  --_font-size: min(var(--typo-title-xl-font-size), 12vw, 8vh);
  font-size: var(--_font-size);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text-bright-color);
  font-weight: var(--font-weight-title);
}
.hero_about {
  height: clamp(32rem, 75vh - var(--header-height), 100rem);
  height: clamp(32rem, 75svh - var(--header-height), 100rem);
  /* background: linear-gradient(var(--page-background-color), var(--page-background-color-light)) ; */
}
.hero_about .hero__title {
  --_font-size: min(var(--typo-title-l-font-size), 12vw, 8vh);
}
.hero_about .hero__content-wrapper {
  max-width: 40rem;
}

.hero__content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 30rem;
  padding-bottom: 7.5%;
  position: relative;
}

.hero__controls {
  display: flex;
  gap: var(--gap-xs);
  padding-top: var(--gap-xs);
}

.hero__img {
  position: absolute;
  top: 0;
  height: 100%;
  left: 85%;
}

.hero__breadcrumbs {
  position: absolute;
  bottom: 0;
  padding-block: var(--gap-xs);
}
#from-slider {
  scroll-margin-top: var(--header-height);
}

@media (max-aspect-ratio: 1){
  .hero {
    /* height: max(85vh - var(--header-height), 32rem); */
  }
  .hero__img {
    display: none;
  }
  
}
@media (max-width: 45rem) {
  
  .hero__img {
    display: none;
  }
}
.icon {
    display: inline-block;
    vertical-align: bottom;
    aspect-ratio: 1;
}

.icon:not(.icon_custom-colors) {
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-image: var(--icon-url);
}

.icon_custom-colors {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: var(--icon-url);
}

.icon_size_s {
    width: 1.5rem;
}
.icon_size_text-s {
    width: var(--typo-text-s-line-height);
}

.icon_size_m {
    width: 3rem;
}

.icon_size_l {
    width: 6rem;
}
a[href] {
  cursor: pointer;
}

.link {
  color: var(--link-color);
  cursor: pointer;
}

.link:visited {
  color: var(--link-visited-color);
}

.link:not(:hover) {
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
  text-underline-offset: .4em;
  text-decoration-thickness: 1px;
}

.link_outer::after,
.link[target="_blank"]::after,
.link[download]::after,
.link_overlay::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: var(--link-color);
  margin-bottom: -.12em;
  margin-left: .16em;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.link_outer:visited::after,
.link[target="_blank"]:visited::after,
.link[download]:visited::after,
.link_overlay:visited::after {
  background-color: var(--link-visited-color);
}

.link_outer::after,
.link[target="_blank"]::after {
  -webkit-mask-image: url('/wp-content/themes/expertconstruct/assets/icons/tabler_external-link.svg');
}

.link_overlay::after {
  -webkit-mask-image: url('/wp-content/themes/expertconstruct/assets/icons/mingcute_document-line.svg');
}

.link[download]::after {
  -webkit-mask-image: url('/wp-content/themes/expertconstruct/assets/icons/ic_round-download.svg');
}

.link[href^="#"] {
  text-decoration-style: dashed;
}
*:has(> .logo) {
    position: relative;
}
.logo {
    height: 1000px;
    max-width: 100%;
    max-height: 100%;
}

.logo__color-scheme-dark,
[data-color-scheme="dark"] .logo__color-scheme-light {
    display: none;
}

[data-color-scheme="dark"] .logo__color-scheme-dark {
    display: block;
}

.main {
  padding-inline: max((100vw - var(--page-content-max-width-m)) / 2, var(--_padding-inline));
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  --_main-section-gap: var(--page-section-gap);
  gap: var(--_main-section-gap);
  padding-bottom: var(--_main-section-gap);
  flex-grow: 1;
}

@media (max-width: 30rem) {
  .main {
    --_padding-inline: var(--page-padding-inline);
    --_main-section-gap: calc(var(--page-section-gap) / 2);
  }
}
.modal {
    border: none;
    background: transparent;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    background-color: var(--backdrop);
}

.modal__scroller {
    overflow-y: auto;
    position: fixed;
    inset: 0;
    padding-top: calc(var(--control-height-s) + var(--padding-xs));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal__content-wrapper {
    max-height: 100%;
}

.modal_size_max .modal__content-wrapper {
    width: calc(100% - 1rem);
}

.modal_size_l .modal__content-wrapper {
    width: min(100% - 1rem, 48rem);
}

.modal_size_m .modal__content-wrapper {
    width: min(100% - 1rem, 32rem);
}

.modal_size_s .modal__content-wrapper {
    width: min(100% - 1rem, 24rem);
}

.modal__content-wrapper::after {
    content: '';
    display: block;
    height: calc(var(--control-height-s) + var(--gap-s));
}

.modal__content {
    cursor: auto;
    overflow: hidden;
}

.modal_card .modal__content {

    padding: calc(var(--gap-m) * .75);
    background: var(--page-background-color-light);
}

.modal__content>*:first-child {
    margin-top: 0;
}

.modal__content>*:last-child {
    margin-bottom: 0;
}

.body:has(.modal[open]) {
    overflow: hidden;
}

.modal__close {
    position: fixed;
    top: var(--gap-s);
    right: var(--gap-s);
    color: #fff;
}

.modal[data-modal-hidden] {
    display: none;
}

[data-modal] {
    cursor: pointer;
}
.page-header {
    background-color: var(--page-background-color);
    margin-inline: calc((100% - 100vw) / 2);
    padding-inline: calc((100vw - 100%) / 2);
    padding-block: var(--gap-m) var(--gap-xs);
}

.page-header__title {
    color: var(--text-bright-color);
    margin-bottom: var(--gap-xs);
    font-size: var(--typo-title-s-font-size);
    line-height: var(--typo-title-s-line-height);
    font-weight: var(--font-weight-title);
}
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--page-font-face), system-ui, sans-serif;
  font-size: clamp(1rem, 1.04vw, 1.25rem);
}


.body {
  font-size: var(--typo-text-m-font-size);
  line-height: var(--typo-text-m-line-height);
  font-weight: var(--page-font-weight-text);
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--page-background-color);
  color: var(--text-middle-color);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  --_padding-inline: 10vw;
}

[data-color-scheme="dark"] {
  color: var(--text-middle-color);
  color-scheme: dark;
}

[data-color-scheme="light"] {
  color: var(--text-middle-color);
  color-scheme: light;
}

@media (max-width: 40rem) {
  .body {
    --_padding-inline: var(--page-padding-inline);
  }
}

.rounded-s {
  border-radius: var(--border-radius-s);
}

.rounded-s_1000 {
  border-radius: var(--border-radius-s) 0 0 0;
}

.rounded-s_0100 {
  border-radius: 0 var(--border-radius-s) 0 0;
}

.rounded-s_0010 {
  border-radius: 0 0 var(--border-radius-s) 0;
}

.rounded-s_0001 {
  border-radius: 0 0 0 var(--border-radius-s);
}

.rounded-s_1100 {
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
}

.rounded-s_0110 {
  border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
}

.rounded-s_0011 {
  border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
}

.rounded-s_1001 {
  border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
}

.rounded-s_1010 {
  border-radius: var(--border-radius-s) 0 var(--border-radius-s) 0;
}
.rounded-s_0101 {
  border-radius: 0 var(--border-radius-s) 0 var(--border-radius-s);
}


.rounded-s_1110 {
  border-radius: var(--border-radius-s) var(--border-radius-s) var(--border-radius-s) 0;
}
.rounded-s_0111 {
  border-radius: 0 var(--border-radius-s) var(--border-radius-s) var(--border-radius-s) ;
}
.rounded-s_1011 {
  border-radius: var(--border-radius-s) 0 var(--border-radius-s) var(--border-radius-s) ;
}

.rounded-s_1101 {
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 var(--border-radius-s);
}









.rounded-m {
  border-radius: var(--border-radius-m);
}

.rounded-m_1000 {
  border-radius: var(--border-radius-m) 0 0 0;
}

.rounded-m_0100 {
  border-radius: 0 var(--border-radius-m) 0 0;
}

.rounded-m_0010 {
  border-radius: 0 0 var(--border-radius-m) 0;
}

.rounded-m_0001 {
  border-radius: 0 0 0 var(--border-radius-m);
}

.rounded-m_1100 {
  border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
}

.rounded-m_0110 {
  border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;
}

.rounded-m_0011 {
  border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}

.rounded-m_1001 {
  border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
}

.rounded-m_1010 {
  border-radius: var(--border-radius-m) 0 var(--border-radius-m) 0;
}
.rounded-m_0101 {
  border-radius: 0 var(--border-radius-m) 0 var(--border-radius-m);
}


.rounded-m_1110 {
  border-radius: var(--border-radius-m) var(--border-radius-m) var(--border-radius-m) 0;
}
.rounded-m_0111 {
  border-radius: 0 var(--border-radius-m) var(--border-radius-m) var(--border-radius-m) ;
}
.rounded-m_1011 {
  border-radius: var(--border-radius-m) 0 var(--border-radius-m) var(--border-radius-m) ;
}

.rounded-m_1101 {
  border-radius: var(--border-radius-m) var(--border-radius-m) 0 var(--border-radius-m);
}














.rounded-l {
  border-radius: var(--border-radius-l);
}

.rounded-l_1000 {
  border-radius: var(--border-radius-l) 0 0 0;
}

.rounded-l_0100 {
  border-radius: 0 var(--border-radius-l) 0 0;
}

.rounded-l_0010 {
  border-radius: 0 0 var(--border-radius-l) 0;
}

.rounded-l_0001 {
  border-radius: 0 0 0 var(--border-radius-l);
}

.rounded-l_1100 {
  border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
}

.rounded-l_0110 {
  border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;
}

.rounded-l_0011 {
  border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
}

.rounded-l_1001 {
  border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
}

.rounded-l_1010 {
  border-radius: var(--border-radius-l) 0 var(--border-radius-l) 0;
}
.rounded-l_0101 {
  border-radius: 0 var(--border-radius-l) 0 var(--border-radius-l);
}


.rounded-l_1110 {
  border-radius: var(--border-radius-l) var(--border-radius-l) var(--border-radius-l) 0;
}
.rounded-l_0111 {
  border-radius: 0 var(--border-radius-l) var(--border-radius-l) var(--border-radius-l) ;
}
.rounded-l_1011 {
  border-radius: var(--border-radius-l) 0 var(--border-radius-l) var(--border-radius-l) ;
}

.rounded-l_1101 {
  border-radius: var(--border-radius-l) var(--border-radius-l) 0 var(--border-radius-l);
}
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(20rem,1fr));
    row-gap: var(--gap-m);
    column-gap: var(--gap-s);
}


.price-label {
  color: var(--price-label-color);
    box-shadow: 0 0 0 1px currentColor;
    width: max-content;
    font-size: var(--typo-text-s-font-size);
    padding-inline: .75em;
    line-height: var(--control-height-s);
    height: var(--control-height-s);
    background-color: 
 color-mix(in hsl, transparent 90%, currentColor);
}

[data-color-scheme="dark"] .price-label,
.price-label[data-color-scheme="dark"] {
    box-shadow: 0 0 0 1px currentColor;
}
.qa {
    background: var(--page-background-color-light);
    cursor: pointer;
    --_padding: var(--gap-s);
    padding: var(--_padding);
}

.qa__question {
  list-style: none;    
  cursor: pointer;   
  margin: calc(var(--_padding) * -1);  
  padding: var(--_padding);
  font-size: var(--typo-title-s-font-size);
  line-height: var(--typo-title-s-line-height);
  font-weight: var(--font-weight-title);
  display: flex;
  justify-content: space-between;
}

.qa__question::-webkit-details-marker {
  display: none;       
}

.qa__question::marker {
  display: none;       
}


.qa__question {
    position: relative;
}
.qa[open] .qa__question {
    margin-bottom: 0;
}

.qa[open] .qa__icon {
    transform: rotate(180deg);
}

.qa[open] .qa__question::before {
    rotate: 180deg;
}

.qa + .qa {
    margin-top: var(--gap-xs);
}

.qa__answer {
    /* margin-top: var(--gap-xs); */
}
.slider {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}


.slider__content>*:not(.slider__item_active) {
  display: none;
  top: 0;
}

.slider__teaser-list {
  position: absolute;
  bottom: var(--gap-s);
  left: 0;
  right: 0;
  text-align: center;
}

.slider__teaser-list-button {
  display: inline-flex;
  justify-content: center;
  gap: var(--gap-xs);
  height: var(--control-height-m);
  background-color: var(--button-grey-background-color);
  border-radius: var(--control-height-m);
  padding-inline: var(--gap-xs);
  align-items: center;

}

.slider__teaser {
  --_width: .75rem;
  width: var(--_width);
  height: var(--_width);
  border-radius: var(--control-height-s);
  background-color: var(--text-light-color);
  transition: width .25s;
  cursor: pointer;


}

.slider__teaser:hover {
  background-color: var(--text-middle-color);
}

.slider__teaser_active {
  width: calc(var(--_width) * 3);
  position: relative;
  overflow: hidden;
}

.slider__teaser_active::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--text-bright-color);
  animation: teaser_active var(--_animation-duration) linear both;
  transform-origin: left;
}

.slider_pause .slider__teaser_active::before {
  animation: none;
  display: none;
}

@keyframes teaser_active {
  from {
    transform: scaleX(0);
  }
}
.table {
  overflow-x: auto;
  margin-inline: calc((100% - 100vw) / 2);
  padding-inline: calc((100vw - 100%) / 2);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.table::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome browsers */
}

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

.table__wrapper {
  background-color: var(--page-background-color-light);
  padding: var(--gap-xs);
  width: max-content;
}

.table__table {
  text-align-last: left;
  font-size: var(--typo-text-m-font-size);
  line-height: var(--typo-text-m-line-height-narrow);
  border-collapse: collapse;
}
.table__head .table__th,
.table__head .table__td {
  color: var(--text-light-color);
}
.table__th {
  font-weight: var(--font-weight-text);
  /* color: var(--text-bright-color); */
}


.table__body>.table__row:nth-of-type(odd) {
  background-color: var(--page-background-color);
}

.table__cell,
.table__th {
  padding: var(--gap-xs) var(--gap-s);
  corner-shape: squircle;
}

.table__cell:first-child,
.table__th:first-child {
  border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
}

.table__cell:last-child,
.table__th:last-child {
  border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
}
.timeline {
  --__timeline-color: var(--page-illustration-color-grey);
  --__timeline-items-gap: var(--gap-m);
  --__circle-size: 1.25rem;
  --__circle-top: 0.125rem;
  --__line-width: 2px;
  --__circle-line-gap: .25rem;
  counter-reset: timeline;
}


.timeline__item {
  position: relative;
  padding-left: calc(var(--__circle-size) + var(--gap-s));
  margin-block: var(--__timeline-items-gap);
  /* display: flex; */
  /* flex-direction: column; */
  /* gap: var(--gap-xs); */
}

.timeline__item::before {
  /* color: var(--page-background-color-light); */
  counter-increment: timeline;
  content: '';
  /* content: counter(timeline); */
  font-weight: var(--font-weight-title);
  text-align: center;
  line-height: var(--__circle-size);
  position: absolute;
  top: var(--__circle-top);
  left: 0;
  display: block;
  width: var(--__circle-size);
  height: var(--__circle-size);
  border-radius: 100%;
  background-color: var(--__timeline-color);
  opacity: 0.5;
}

.timeline__item:not(:last-child):after {
  content: '';
  position: absolute;
  background-color: var(--__timeline-color);
  opacity: 0.5;
  width: var(--__line-width);
  top: calc(
    var(--__circle-size) + 
    var(--__circle-top) + 
    var(--__circle-line-gap)
  );
  bottom: calc(
    0px - 
    var(--__timeline-items-gap) - 
    var(--__circle-top) + 
    var(--__circle-line-gap)
  );
  left: calc(
    (var(--__circle-size) - 
    var(--__line-width))
  / 2);
}


.blockquote {
    text-wrap: balance;
    font-size: 2rem;
    line-height: 2.3rem;
    margin-block: 4.6rem;
    max-width: var(--typo-text-block-l-max-width);
    color: var(--text-bright-color);
    font-family: serif;
    font-style: italic;
}



.blockquote:first-child {
    margin-top: 0;
}

.blockquote:last-child {
    margin-bottom: 0;
}

.blockquote_center {
  text-align: center;
}

.blockquote::before {
    content: '«';
    /* margin-left: -1.5rem; */
}

.blockquote::after {
    content: '»';
}

.blockquote::after,
.blockquote::before {
    /* display: inline-block;
    font-size: 3rem;
    line-height: 0;
    width: 1.5rem;
    text-align: center; */
}
.list {
  text-wrap: pretty;
  font-weight: var(--font-weight-text);
  color: var(--text-middle-color);
  padding-left: 1ch;
}

.list_size_m {
  font-size: var(--typo-text-m-font-size);
  line-height: var(--typo-text-m-line-height);
  margin-block: var(--typo-text-m-line-height);
  max-width: var(--typo-text-block-max-width);
}
.list_size_l {
  font-size: var(--typo-text-l-font-size);
  line-height: var(--typo-text-l-line-height);
  margin-block: var(--typo-text-l-line-height);
  max-width: var(--typo-text-block-l-max-width);
}

ul.list {
  list-style-type: var(--typo-list-bullet);
}

ul.list_no-marker,
ol.list_no-marker {
  list-style-type: none;
  padding-left: 0;
}

.list_no-marker .list__item {
  padding-left: 0;
}

.list__item {
  margin-top: 0.8em;
  padding-left: .5em;
}

.list__item::marker {
  /* font-weight: 600; */
}

/* .list:first-child {
  margin-top: 0;
}

.list:last-child {
  margin-bottom: 0;
} */
.strong {
    color: var(--text-bright-color);
    font-weight: var(--font-weight-strong);
}

.text-l {
    text-wrap: pretty;
    font-size: var(--typo-text-l-font-size);
    line-height: var(--typo-text-l-line-height);
    font-weight: var(--font-weight-text);
    margin-block: calc(var(--typo-text-l-line-height) * 1);
    max-width: calc(var(--typo-text-block-l-max-width));
    /* margin-inline: var(--margin-inline-text); */
    /* color: var(--text-middle-color); */
}

.title-m + .text-l {
    margin-top: calc(var(--line-height-text) * .5);
}

.text-l_narrow {
  line-height: var(--typo-text-l-line-height-narrow);
}

.text-l:first-child {
    margin-top: 0;
}

.text-l:last-child {
    margin-bottom: 0;
}

.text-l_center {
  text-align: center;
}


.text-m {
    text-wrap: pretty;
    font-size: var(--typo-text-m-font-size);
    line-height: var(--typo-text-m-line-height);
    font-weight: var(--font-weight-text);
    margin-block: calc(var(--typo-text-m-line-height) * 1);
    max-width: var(--typo-text-block-max-width);
    /* margin-inline: var(--margin-inline-text); */
    /* color: var(--text-middle-color); */
}


.text-m_narrow {
    line-height: var(--typo-text-m-line-height-narrow);
}

.text-m:first-child {
    margin-top: 0;
}

.text-m:last-child {
    margin-bottom: 0;
}

.text-m_center {
  text-align: center;
}
.text-s {
  text-wrap: pretty;
  font-size: var(--typo-text-s-font-size);
  line-height: var(--typo-text-s-line-height);
  font-weight: var(--font-weight-text);
  margin-block: var(--typo-text-s-line-height);
  max-width: var(--typo-text-block-max-width);
  /* margin-inline: var(--margin-inline-text); */
  /* color: var(--text-middle-color); */
}

.text-s_narrow {
  line-height: var(--typo-text-s-line-height-narrow);
}

.text-s:first-child {
  margin-top: 0;
}

.text-s:last-child {
  margin-bottom: 0;
}

.text-s_center {
  text-align: center;
}
.title-l {
    margin-top: calc(var(--typo-title-l-line-height) * 2);
    margin-bottom: var(--typo-text-m-line-height);
    font-size: var(--typo-title-l-font-size);
    line-height: var(--typo-title-l-line-height);
    letter-spacing: var(--typo-title-l-letter-spacing);
    font-weight: var(--font-weight-title);
    max-width: var(--typo-text-block-l-max-width);
    text-wrap: balance;
    /* display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem; */
    /* margin-inline: var(--margin-inline-text); */
    color: var(--text-bright-color);
}

.title-l:has(+ .text-m),
.title-l:has(+ .text-s) {
    /* max-width: var(--typo-text-block-max-width); */
}
 
.title-l:first-child {
    margin-top: 0;
}

.title-l:last-child {
    margin-bottom: 0;
} 

.title-l_center {
    text-align: center;
}


.title-light {
    opacity: .35;
}
.title-m {
    margin-top: calc(var(--typo-title-m-line-height) * 3);
    margin-bottom: calc(var(--typo-title-m-line-height) * 1);
    font-size: var(--typo-title-m-font-size);
    line-height: var(--typo-title-m-line-height);
    letter-spacing: var(--typo-title-m-letter-spacing);
    font-weight: var(--font-weight-title);
    max-width: var(--typo-text-block-l-max-width);
    text-wrap: balance;
    /* display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem; */
    /* margin-inline: var(--margin-inline-text); */
    color: var(--text-bright-color);
}

.title-m:has(+ .text-m),
.title-m:has(+ .text-s) {
    max-width: var(--typo-text-block-max-width);
}
 
.title-m:first-child {
    margin-top: 0;
}

.title-m:last-child {
    margin-bottom: 0;
} 

.title-m_center {
    text-align: center;
}


.title-s {
    margin-top: calc(var(--typo-title-s-line-height) * 2);
    margin-bottom: calc(var(--typo-text-m-line-height));
    font-size: var(--typo-title-s-font-size);
    line-height: var(--typo-title-s-line-height);
    letter-spacing: var(--typo-title-s-letter-spacing);
    font-weight: var(--font-weight-title);
    max-width: var(--typo-text-block-max-width);
    text-wrap: balance;
    /* display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem; */
    /* margin-inline: var(--margin-inline-text); */
    color: var(--text-bright-color);

}

.title-s:has(+ .text-m),
.title-s:has(+ .text-s) {
    margin-bottom: calc(var(--typo-text-m-line-height) / 2);
}

.title-s+.text-m,
.title-s+.text-s {
    margin-top: calc(var(--typo-text-m-line-height) / 2);
}




.title-s:first-child {
    margin-top: 0;
}

.title-s:last-child {
    margin-bottom: 0;
}

.title-s_center {
    text-align: center;
}
.title-xl {
    margin-top: calc(var(--typo-title-xl-line-height) * 2);
    margin-bottom: var(--typo-text-m-line-height);
    font-size: var(--typo-title-xl-font-size);
    line-height: var(--typo-title-xl-line-height);
    letter-spacing: var(--typo-title-xl-letter-spacing);
    font-weight: var(--font-weight-title);
    text-wrap: balance;
    max-width: var(--typo-text-block-max-width);
    /* display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem; */
    /* margin-inline: var(--margin-inline-text); */
    color: var(--text-bright-color);
}

.title-xl:first-child {
    margin-top: 0;
}

.title-xl:last-child {
    margin-bottom: 0;
} 

.title-xl_center {
    text-align: center;
}


.button,
.button:any-link,
a.button {
  text-decoration: none;
  appearance: none;
  border: none;
  color: var(--text-bright-color);
}

.button_whitelabel {
  color: #fff;
}

.button {
  --_button-size: var(--control-button-size-m-height);
  --_icon-size: 1.5rem;
  --_padding-inline: .75rem;
  height: var(--_button-size);
  min-width: var(--_button-size);
  padding-inline: var(--_padding-inline);
  gap: calc(var(--_button-size) / 2 - var(--_icon-size) / 2);
  font-size: var(--typo-text-ui-font-size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  isolation: isolate;
  font-family: inherit;
}

.button_shape_round {
  border-radius: 100rem;
}

.button_style_grey {
  background-color: var(--button-grey-background-color);
  color: var(--text-bright-color);
}
.button_style_grey:hover {
  background-color: var(--button-grey-background-color-hover);
}
.button_style_grey:active {
  background-color: var(--button-grey-background-color-active);
}

.button_style_accent {
  background-color: var(--button-accent-background-color);
  color: var(--button-accent-label-color);
}
.button_style_accent:hover {
  background-color: var(--button-accent-background-color-hover);
}
.button_style_accent:active {
  background-color: var(--button-accent-background-color-active);
}

.button_style_contrast {
  background-color: var(--button-contrast-background-color);
  color: var(--button-contrast-label-color);
}
.button_style_contrast:hover {
  background-color: var(--button-contrast-background-color-hover);
}
.button_style_contrast:active {
  background-color: var(--button-contrast-background-color-active);
}



/* .button[data-counter]:not(.button[data-counter="0"]) {
  position: relative;
}

.button[data-counter]:not(.button[data-counter="0"])::after {
  --__size: 1.25rem;
  font-size: .8rem;
  content: attr(data-counter);
  position: absolute;
  width: var(--__size);
  height: var(--__size);
  padding-top: .1rem;
  right: -0rem;
  bottom: -0rem;
  border-radius: var(--__size);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f02;
  font-weight: 600;
  box-sizing: border-box;
  font-family: monospace;
} */

/* .button_appearance_dark {
  background: var(--button_appearance_dark-bg);
  color: #fff;
}

.button_appearance_dark:hover {
  filter: brightness(1.5);
} */


.button_size_m {
  --_button-size: var(--control-button-size-m-height);
  --_icon-size: 1.25rem;
  --_padding-inline: .75rem;
}

.button_size_l {
  --_button-size: var(--control-button-size-l-height);
  --_icon-size: 1.25rem;
  --_padding-inline: .75rem;
}

.button_small,
.button_size_s {
  --_button-size: var(--control-button-size-s-height);
  --_icon-size: 1.15rem;
  --_padding-inline: .5rem;

}


.button_fullwidth {
  display: flex;
  width: 100%;
}



/* .button:active,
.button_pressed {
  transform: scale(.97);
} */

.button_ghost:not(:hover):not(:focus-visible),
.button_ghost[disabled] {
  background-color: transparent;
  box-shadow: none;
}

.button_with-icon::before {
  content: '';
  display: block;
  width: var(--_icon-size);
  height: var(--_icon-size);
  background-color: currentColor;
  mask-image: var(--icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-inline: calc(var(--_button-size) / 2 - var(--_icon-size) / 2 - var(--_padding-inline));
}

/* .button__icon {
  width: var(--_icon-size);
  height: var(--_icon-size);
  background-color: currentColor;
  mask-image: var(--icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-inline: calc(var(--_button-size) / 2 - var(--_icon-size) / 2 - var(--_padding-inline));
} */

.button[disabled] {
  filter: saturate(0);
  opacity: .5;
  pointer-events: none;
}

/* .button_accent,
.button_appearance_accent,
.button_accent:any-link,
.button_appearance_accent:any-link {
  background: var(--button-accent-background-color);
  color: #fff;
} */

/* .button_black .button_black:any-link {
  background: #000;
  color: #fff;
  font-weight: 500;
} */

.button_load {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8' fill='none'><path d='M0 0H4L0 4V0Z' fill='black' fill-opacity='0.15'/><path d='M0 8L8 0V4L4 8H0Z' fill='black' fill-opacity='0.15'/></svg>");
  animation: linear .5s infinite buttonLoad;
  pointer-events: none;
}

/* .button_abstract {
  padding: 0;
  height: max-content;
  background: none;
} */

.button__check-wrapper {
  display: inline-flex;
}

.button_link
 {
  padding: 0;
  /* font-size: inherit; */
  /* line-height: inherit; */
  border-radius: 0;
  background-color: transparent;
}

.button_link:hover {
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: .4em;
  text-decoration-thickness: 1px;
}

@keyframes buttonLoad {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 1rem 0;
  }
}

.input {
  position: relative;
}

.input__input {
  height: var(--control-input-size-m-height);
  padding-inline: calc(var(--control-input-size-m-height) * .2);
  border: none;
  width: 100%;
  background-color: var(--input-background-color);
  color: var(--text-bright-color);
  font-size: var(--typo-text-s-font-size);
}

.input__label + .input__input,
.input:has(.input__label) .input__input {
  height: var(--control-input-size-m-height);
  padding: 1em calc(var(--control-input-size-m-height) * .2) 0;
}

.input__label {
  position: absolute;
  left: calc(var(--control-input-size-m-height) * .2);
  top: .1em;
  font-size: var(--typo-text-ui-font-size);
  color: var(--text-light-color);
  /* opacity: 0.5; */
}

.input__clear {
  position: absolute;
  right: .25em;
  top: .25em;
}

.input__input:placeholder-shown~.input__clear,
.input:has(.input__input[disabled]) .input__clear {
  display: none;
}

.input:has(.input__input[disabled]) {
  opacity: .5;
}
.textarea {
  position: relative;
}

.textarea__textarea {
  min-height: var(--control-input-size-m-height);
  border: 1px solid var(--grey-border);
  box-sizing: border-box;
  padding: 1.5em calc(var(--control-input-size-m-height) * .2) 0;
  width: 100%;
  resize: vertical;
  background-color: var(--input-background-color);
  color: var(--text-bright-color);
}



.textarea__label {
  position: absolute;
  left: calc(var(--control-input-size-m-height) * .2);
  top: .1em;
  font-size: var(--typo-text-ui-font-size);
  color: var(--text-light-color);
}

.textarea__label_hidden {
  opacity: 0;
}

.textarea__clear {
  position: absolute;
  right: .25em;
  top: .25em;
}

.textarea__textarea:placeholder-shown~.textarea__clear,
.textarea:has(.textarea__textarea[disabled]) .textarea__clear {
  display: none;
}

.textarea:has(.textarea__textarea[disabled]) {
  opacity: .5;
}

.image {
  display: block;
  object-fit: cover;
}


.image:not([width]){
  max-width: 100%;
}

.image__caption {
  margin-top: 0em;
  /* color: var(--grey-S); */
  font-size: var(--font-size-caption);
}

.image__preview {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.image__wrapper {
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-height: inherit;

  /* For focus-outline */
  margin: -4px;
  padding: 4px;
}