/* @import url("../fonts/CormorantGaramond/stylesheet.css"); */
@import url("../fonts/Playfair/stylesheet.css");
@import url("../fonts/Inter/stylesheet.css");

:root {
  --font-family: "Inter", Arial, sans-serif;
  --font-family-accent: "Playfair Display", Arial, sans-serif;
  --ink: #162136;
  --muted: #6e6a65;
  --accent: #861a35;
  --accent-dark: #6d1229;
  --action: #861a35;
  --action-dark: #6d1229;
  --action-rgb: 134, 26, 53;
  --paper: #f7f3ef;
  --white: #fff;
  --border: #ded7d0;
  --container: 1250px;
  --accent-gray: #ae947f;
  --bg-dark: #1b1d20;
  --bg-main: #f1efec;
  --bg-soft: #efedeb;
  --bg-cool: #e8e9e7;
  /* --bg-main: #f6f5f3; */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 14px/1.6 var(--font-family);
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

@media (max-width: 991px) {
  .container {
    width: 100%;
    max-width: none;
  }
}

section h2~p {
  margin: 0;
  color: #3e3d3c;
  font: 400 18px / 1.4 var(--font-family);
  text-align: left;
}

section {
  padding: 70px 0;
}

section h2 {
  margin: 0 0 12px;
  font: 500 48px / 1 var(--font-family);
  letter-spacing: -.025em;
  text-align: left;
}

@media(max-width:767px) {
  section h2 {
    font: 500 30px / 1 var(--font-family);
  }

  section h2~p {
    font: 400 16px / 1.4 var(--font-family);
  }

  section {
    padding: 35px 0;
  }
}



.bg-gray {
  background: #f3eeeb;
}

.header {
  position: relative;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  padding: 18px 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 rgba(65, 48, 36, .06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 42px;
  justify-content: space-between;
}

.header__inner .nav {
  min-width: 46%;
}

.logo {
  flex: 0 0 245px;
  display: flex;
  align-items: baseline;
  gap: .34em;
  text-transform: uppercase;
}

.logo__name {
  font: 500 25px/1 var(--font-family);
}

.logo__name--small {
  margin: 0;
  font: 500 25px/1 var(--font-family);
}

footer .logo__name,
footer .logo__name--small {
  font-size: 20px;
}


.logo__caption {
  display: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 45px);
  margin-left: 20px;
}

.nav a {
  position: relative;
  font: 500 14px/1.2 var(--font-family);
  /* text-transform: uppercase; */
  white-space: nowrap;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: var(--action);
  transition: width .25s;
}

.nav a:hover::after,
.nav a:focus-visible::after {
  width: 100%;
}

.header__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 39px;
  /* margin-top: auto; */
  padding: 8px 13px;
  border: 1px solid rgba(var(--action-rgb), .55);
  border-radius: 6px;
  color: var(--action);
  background: transparent;
  font: 500 14px / 1.2 var(--font-family);
  transition: color .2s, background .2s, transform .2s;
  max-width: 165px;
}

.header__contact:hover {
  color: white;
  background: var(--action);
}

.header__brand p {
  margin: 0 0;
}

.menu-toggle {
  display: none;
}

.button {
  display: inline-flex;
  font: 400 15px / 1.2 var(--font-family);
  align-items: center;
  justify-content: center;
  min-height: 53px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: var(--action);
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
}

.button:hover {
  background: var(--action-dark);
  box-shadow: 0 9px 25px rgba(var(--action-rgb), .23);
  transform: translateY(-2px);
}

.calculator {
  align-self: center;
  padding: 34px 31px 29px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 11px;
  background: rgba(255, 253, 251, .94);
  box-shadow: 0 18px 45px rgba(60, 43, 31, .16);
  backdrop-filter: blur(8px);
}

.calculator__heading {
  margin-bottom: 21px;
}

.calculator__heading .eyebrow {
  display: none;
}

.calculator h2 {
  margin: 0 0 8px;
  font: 500 18px/1.15 var(--font-family);
  text-transform: uppercase;
}

.calculator__heading>p:last-child {
  margin: 0;
  color: var(--muted);
  font: 500 18px/1.2 var(--font-family);
}

.field {
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.field legend,
.field>.field__label {
  display: block;
  margin-bottom: 9px;
  color: #24221f;
  font: 400 15px/1.2 var(--font-family);
}

.field__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.field__topline legend {
  margin: 0;
}

.field__topline .calculator__area-output {
  display: block;
  width: 48px;
  height: 27px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  background: white;
  font: 400 14px/1.2 var(--font-family);
  text-align: center;
  appearance: textfield;
  transition: border-color .2s, box-shadow .2s;
}

.field__topline .calculator__area-output:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
}

.field__topline .calculator__area-output::-webkit-inner-spin-button,
.field__topline .calculator__area-output::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.calculator h2 span {
  color: var(--accent);
}

input[type="range"] {
  width: 100%;
  height: 3px;
  margin: 9px 0 5px;
  border-radius: 4px;
  outline: none;
  appearance: none;
  background: linear-gradient(to right, var(--accent) 0 var(--range-progress, 5.45%), #cfc5bc var(--range-progress, 5.45%) 100%);
}

input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  appearance: none;
  background: white;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  color: #827d77;
  font: 400 10px/1.6 var(--font-family);
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #6f6a65;
  border-bottom: 1.5px solid #6f6a65;
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.select-wrap select {
  width: 100%;
  height: 39px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  appearance: none;
  color: #46423e;
  background: rgba(255, 255, 255, .72);
  font: 400 14px/1.2 var(--font-family);
  cursor: pointer;
}

.select-wrap select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
}

.choice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0;
  color: #5c5853;
  font: 400 13px/1.2 var(--font-family);
  cursor: pointer;
}

.choice input {
  display: grid;
  flex: 0 0 auto;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #d5cdc5;
  border-radius: 4px;
  appearance: none;
  background: white;
}

.choice input::before {
  content: "";
  position: relative;
  top: -1px;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) scale(0);
  transition: transform .15s;
}

.choice input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.choice input:checked::before {
  transform: rotate(-45deg) scale(1);
}

.field--extras {
  margin-bottom: 18px;
}

.calculator__button {
  width: 100%;
  min-height: 48px;
  font: 400 15px/1.2 var(--font-family);
}

.placeholder-section {
  padding: 70px 0;
  background: #f7f3ef;
  text-align: center;
}

.placeholder-section p {
  margin: 0;
  font: 400 30px/1.2 var(--font-family-accent);
  text-transform: uppercase;
}

.field__choices {
  display: grid;
  flex-flow: column;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.calc_btns {
  margin: 15px auto 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(22, 33, 54, 0.08);
  /* background: linear-gradient(180deg, rgba(246, 247, 249, 0.82) 0%, rgba(241, 243, 246, 0.96) 100%); */
}

.btn_descr {
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(18, 27, 43, 0.52);
}

.calc_btns_wrp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.btn_wts,
.btn_ph {
  gap: 3px;
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.btn_wts {
  /* background: linear-gradient(135deg, #2ea7e0 0%, #178fca 100%); */
  border: 1px solid var(--action);
  background: transparent;
  color: var(--action);
}

.btn_wts svg path {
  fill: #ffffff;
  stroke: var(--action);
}

.btn_wts svg,
.btn_ph svg {
  width: 20px;
  height: 20px;
}

@media(max-width:400px) {

  .btn_wts svg,
  .btn_ph svg {
    display: none;
  }
}

.btn_ph {
  background: var(--action);
}

.btn_wts:hover,
.btn_ph:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(17, 24, 39, 0.2);
  color: #fff;
}

.btn_wts:hover svg path {
  fill: var(--action);
  /* fill: #ffffff; */
  stroke: #ffffff;
}

.fields-grid {
  display: grid;
  /* grid-template-columns: 230px auto; */
  /* flex-direction: column; */
  /* gap: 10px; */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}

/* ==================== ABOUT ==================== */
.about {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  background: #f9f6f2;
}

.about__inner {
  position: relative;
  z-index: 2;
  padding-top: 68px;
  padding-bottom: 66px;
}

.about__content {
  width: 67%;
  max-width: 747px;
}

.about__eyebrow {
  margin: 0 0 23px;
  color: var(--accent);
  font: 500 13px/1.2 var(--font-family);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.about h2 {
  max-width: 620px;
  margin: 0;
  letter-spacing: -.025em;
}

.about__line {
  display: block;
  width: 48px;
  height: 1px;
  margin: 25px 0 20px;
  background: var(--accent);
}

.about__lead {
  max-width: 560px;
  margin: 0;
  color: #66615c;
  font: 400 16px/1.4 var(--font-family);
}

.about__quote {
  display: flex;
  align-items: center;
  gap: 21px;
  max-width: 530px;
  min-height: 92px;
  margin: 28px 0 34px;
  padding: 16px 23px;
  border: 1px solid rgba(165, 139, 122, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .4);
  box-shadow: 0 7px 22px rgba(70, 48, 34, .06);
}

.about__quote>span {
  align-self: flex-start;
  height: 43px;
  color: var(--accent);
  font: 600 60px/.95 var(--font-family-accent);
}

.about__quote p {
  margin: 0;
  color: var(--accent);
  font: italic 500 20px/1.35 var(--font-family-accent);
}

.about__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 100%;
  margin-bottom: 38px;
}

.about-feature {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 11px;
  min-width: 0;
}

.about-feature__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--action-rgb), .48);
  border-radius: 50%;
  color: var(--accent);
}

.about-feature__icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-feature h3 {
  margin: 2px 0 7px;
  font: 500 16px/1.4 var(--font-family);
  white-space: nowrap;
}

.about-feature p {
  margin: 0;
  color: #77716b;
  font: 400 13px/1.4 var(--font-family);
}

.about__button {
  /* min-width: 230px; */
  /* min-height: 48px; */
  padding: 0 24px;
  /* font: 400 12px/1.2 var(--font-family); */
}

.about__visual {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
}

.about__visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, #f9f6f2 0%, rgba(249, 246, 242, .82) 10%, rgba(249, 246, 242, .16) 28%, rgba(249, 246, 242, 0) 45%);
}

.about__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center -308px;
  margin-top: 57px;
}

/* ==================== ABOUT: ADAPTIVE ==================== */
@media (max-width: 1050px) {
  .about__content {
    width: 61%;
  }

  /* 
  .about h2 {
    font: 400 37px/1.1 var(--font-family-accent);
  } */

  .about__features {
    grid-template-columns: 1fr 1fr;
    max-width: 500px;
  }

  .about__visual {
    width: 48%;
  }
}

@media (max-width: 820px) {
  .about {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .about__inner {
    order: 1;
    padding-top: 56px;
    padding-bottom: 45px;
  }

  .about__content {
    width: 100%;
    max-width: 650px;
  }

  /* .about h2 {
    font: 400 clamp(34px, 8vw, 44px)/1.08 var(--font-family-accent);
  } */

  .about__lead {
    max-width: 610px;
  }

  .about__quote {
    max-width: 570px;
  }

  .about__features {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  .about__visual {
    position: relative;
    order: 2;
    width: 100%;
    height: 560px;
  }

  .about__visual::before {
    background: linear-gradient(180deg, #f9f6f2 0%, rgba(249, 246, 242, 0) 20%);
  }

  .about__visual img {
    object-position: center 32%;
  }
}

@media (max-width: 767px) {
  .fields-grid {
    display: flex;
    flex-flow: column;
    gap: 0;
  }

  .about__inner {
    padding-top: 44px;
    padding-bottom: 38px;
  }

  .about__eyebrow {
    margin-bottom: 17px;
  }

  .about h2 br {
    display: none;
  }

  .about__quote {
    gap: 14px;
    padding: 15px 17px;
  }

  .about__quote p {
    font: italic 500 18px/1.3 var(--font-family-accent);
  }

  .about__quote p br {
    display: none;
  }

  .about__features {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-feature h3 {
    font: 500 11px/1.3 var(--font-family);
  }

  .about-feature p {
    font: 400 10px/1.55 var(--font-family);
  }

  .about__button {
    width: 100%;
  }

  .about__visual {
    height: 460px;
  }
}

/* ==================== ABOUT: PHOTO TOP MASK ==================== */
.about__visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 40px;
  right: 0;
  left: 0;
  height: 65px;
  pointer-events: none;
  background: linear-gradient(180deg, #f9f6f2 0%, rgba(249, 246, 242, .96) 28%, rgba(249, 246, 242, .68) 55%, rgba(249, 246, 242, .25) 78%, rgba(249, 246, 242, 0) 100%);
}

@media (max-width: 820px) {
  .about__visual::after {
    height: 125px;
  }
}

/* ==================== PORTFOLIO ==================== */
.portfolio {
  overflow: hidden;
  background: #e8e5e0;
  /* background: #f3eeeb; */
  /* background:
    radial-gradient(60% 100% at 12% 50%,
      rgba(204, 209, 215, 0.14),
      transparent 72%),
    var(--bg-soft); */
}

.portfolio__header {
  display: flex;
  flex-flow: column;
  gap: 20px;
  margin-bottom: 31px;
}

.portfolio__eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font: 500 12px/1.2 var(--font-family);
  letter-spacing: .12em;
  text-transform: uppercase;
}



.portfolio__filters {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 999px;
  background: #eee7e5;
}

.portfolio__filter {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #5e5954;
  background: transparent;
  font: 500 14px/1.2 var(--font-family);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, background .2s, box-shadow .2s;
}

.portfolio__filter:hover {
  color: var(--action);
  background: rgba(var(--action-rgb), .06);
}

.portfolio__filter.is-active {
  color: #fff;
  background: var(--action);
  box-shadow: 0 4px 12px rgba(var(--action-rgb), .2);
}

.portfolio__filter.is-active:hover {
  color: #fff;
  background: var(--action-dark);
}

.portfolio__filter:focus-visible,
.portfolio__arrow:focus-visible,
.portfolio-card__gallery-button:focus-visible,
.portfolio-card__link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

.portfolio__slider-wrap {
  position: relative;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.portfolio__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.portfolio__more {
  min-height: 46px;
  padding: 10px 28px;
  border: 1px solid rgba(var(--action-rgb), .7);
  border-radius: 6px;
  color: var(--action);
  background: transparent;
  font: 500 14px/1.2 var(--font-family);
  cursor: pointer;
  transition: color .2s, background .2s;
}

.portfolio__more:hover {
  color: #fff;
  background: var(--action);
}

.portfolio__more[hidden] {
  display: none;
}

.portfolio__slider {
  /* overflow: visible; */
}

.portfolio__slider .swiper-slide {
  height: auto;
}

.portfolio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(137, 112, 94, .13);
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 25px rgba(68, 48, 35, .08);
}

.portfolio-card__media {
  position: relative;
  height: 517px;
  overflow: hidden;
  background: #ddd2c8;
  cursor: pointer;
  border-radius: 10px;
}

.portfolio-card__media:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -2px;
}

.portfolio-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 22, 18, .08), transparent 32%);
}

.portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.portfolio-card:hover .portfolio-card__media img {
  transform: scale(1.025);
}

.portfolio-card__badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 6px;
  color: #665f59;
  background: rgba(255, 255, 255, .92);
  font: 400 11px/1.2 var(--font-family);
  backdrop-filter: blur(6px);
}

/* ==================== PORTFOLIO CARD: IMAGE SLIDER ==================== */
.portfolio-card__preview-slider,
.portfolio-card__preview-slider .swiper-wrapper,
.portfolio-card__preview-slide {
  width: 100%;
  height: 100%;
}

.portfolio-card__preview-thumbs {
  height: 68px;
  margin: 11px 14px 0;
}

.portfolio-card__preview-thumb {
  width: 76px;
  height: 68px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: .62;
  transition: border-color .2s, opacity .2s;
}

.portfolio-card__preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-card__preview-thumb.swiper-slide-thumb-active {
  border-color: var(--action);
  opacity: 1;
}

.portfolio-card__preview-slide {
  overflow: hidden;
  cursor: zoom-in;
}

.portfolio-card__preview-slide:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -3px;
}

.portfolio-card__preview-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(114, 93, 78, .12);
  border-radius: 50%;
  color: #37322e;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 18px rgba(65, 45, 31, .11);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, background-color .2s, opacity .2s;
}

.portfolio-card__preview-arrow:hover {
  color: #fff;
  background: var(--action);
}

.portfolio-card__preview-arrow--prev {
  left: 14px;
}

.portfolio-card__preview-arrow--next {
  right: 14px;
}

.portfolio-card__preview-arrow--prev svg {
  transform: rotate(180deg);
}

.portfolio-card__preview-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio-card__preview-arrow.swiper-button-disabled,
.portfolio-card__preview-arrow.swiper-button-lock {
  opacity: 0;
  pointer-events: none;
}

.portfolio-card__preview-pagination {
  position: absolute;
  z-index: 4;
  bottom: 14px;
  left: 50%;
  width: min(42%, 190px);
  height: 4px;
  transform: translateX(-50%);
}

.portfolio-card__preview-progress {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 1px 5px rgba(35, 25, 20, .13);
  cursor: pointer;
}

.portfolio-card__preview-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--action);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}

.portfolio-card__gallery-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  /* gap:13px; */
}

.portfolio-card__gallery-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #ddd5ce;
  border-radius: 6px;
  color: #65605b;
  background: transparent;
  font: 400 14px/1.25 var(--font-family);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.portfolio-card__gallery-button:hover,
.portfolio-card__gallery-button--accent {
  border-color: rgba(var(--action-rgb), .7);
  color: var(--action);
}

.portfolio-card__gallery-button:hover {
  background: rgba(var(--action-rgb), .04);
}

.portfolio-card__gallery-button svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio-card__gallery-button[hidden] {
  display: none;
}

.portfolio-card__gallery-actions:has(.portfolio-card__gallery-button[hidden]) {
  justify-content: flex-end;
}

.portfolio-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 17px 27px 22px;
}

.portfolio-card__title {
  margin: 0 0 6px;
  font: 500 24px/1.1 var(--font-family);
}

.portfolio-card__address {
  min-height: 34px;
  margin: 0 0 5px;
  color: #6b6661;
  font: 400 16px/1.5 var(--font-family);
}

.portfolio-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 0;
  padding: 0;
  color: #625d58;
  font: 400 14px/1.3 var(--font-family);
  list-style: none;
}

.portfolio-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portfolio-card__meta li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 12px;
  margin-left: 3px;
  background: #aaa19a;
}

.portfolio-card__meta svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio-card__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  color: var(--action);
  background: rgba(var(--action-rgb), .04);
  font: 500 15px/1.2 var(--font-family);
  cursor: pointer;
  height: 38px;
  border: 1px solid rgba(var(--action-rgb), .7);
  border-radius: 6px;
  height: 38px;
  padding: 0 10px;

}

.portfolio-card__link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.portfolio-card__link:hover svg {
  transform: translateX(4px);
}

.portfolio__arrow {
  position: absolute;
  z-index: 5;
  top: 43%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(114, 93, 78, .12);
  border-radius: 50%;
  color: #37322e;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 18px rgba(65, 45, 31, .11);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, opacity .2s, background .2s;
}

.portfolio__arrow:hover {
  color: #fff;
  background: var(--action);
}

.portfolio__arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio__arrow--prev {
  left: -62px;
}

.portfolio__arrow--next {
  right: -62px;
}

.portfolio__arrow.swiper-button-disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

.portfolio__pagination {
  display: flex;
  justify-content: center;
  gap: 7px;
  min-height: 10px;
  margin-top: 24px;
}

.portfolio__pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: 50%;
  background: #d9d1ca;
  opacity: 1;
  transition: background .2s, transform .2s;
}

.portfolio__pagination .swiper-pagination-bullet-active {
  background: var(--action);
  transform: scale(1.12);
}

.portfolio__empty {
  margin: 35px 0 0;
  color: #77716b;
  font: 400 14px/1.5 var(--font-family);
  text-align: center;
}

/* ==================== PORTFOLIO: ADAPTIVE ==================== */
@media(max-width:1400px) {
  .portfolio-card__gallery-actions {
    flex-flow: column;
    gap: 10px;
    align-items: start;
  }
}

@media (max-width: 1280px) {
  .portfolio__arrow--prev {
    left: -15px;
  }

  .portfolio__arrow--next {
    right: -15px;
  }
}

@media (max-width: 820px) {


  .portfolio__grid {
    gap: 22px;
  }

  .portfolio__header {
    display: block;
    margin-bottom: 26px;
  }

  .portfolio__filters {
    justify-content: flex-start;
    margin-top: 24px;
  }

  .portfolio-card__media {
    height: 250px;
  }

  .portfolio__arrow {
    top: 40%;
    width: 40px;
    height: 40px;
  }

  .portfolio__arrow--prev {
    left: -8px;
  }

  .portfolio__arrow--next {
    right: -8px;
  }
}

@media (max-width: 767px) {

  .portfolio__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .portfolio__intro>p:last-child br {
    display: none;
  }

  .portfolio__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: none;
    margin-right: 0;
    padding: 4px;
    border-radius: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .portfolio__filters::-webkit-scrollbar {
    display: none;
  }

  .portfolio__filter {
    min-height: 40px;
    padding-inline: 18px;
    scroll-snap-align: start;
  }

  .portfolio-card__media {
    height: 220px;
  }

  .portfolio-card__preview-thumbs {
    height: 58px;
    margin: 9px 10px 0;
  }

  .portfolio-card__preview-thumb {
    width: 64px;
    height: 58px;
  }

  .portfolio-card__preview-arrow {
    width: 34px;
    height: 34px;
  }

  .portfolio-card__preview-arrow--prev {
    left: 10px;
  }

  .portfolio-card__preview-arrow--next {
    right: 10px;
  }

  .portfolio-card__preview-pagination {
    bottom: 10px;
    width: 44%;
  }

  .portfolio-card__gallery-actions {
    right: 18px;
    bottom: 21px;
    padding: 0;
  }

  .portfolio-card__body {
    padding: 17px 18px 21px;
  }

  .portfolio-card__title {
    font: 500 22px/1.1 var(--font-family);
  }

  .portfolio-card__meta {
    gap: 7px;
  }

  .portfolio__arrow {
    display: none;
  }
}

@media(max-width:500px) {
  .portfolio-card__gallery-actions {
    flex-flow: column;
    gap: 15px;
  }

  .portfolio-card__gallery-button,
  .portfolio-card__link {
    width: 100%;
    justify-content: center;

  }
}

/* ==================== WORK STEPS ==================== */
.work-steps {
  position: relative;
  overflow: hidden;
  background: #e8e5e0;
  /* background:
    radial-gradient(70% 100% at 90% 45%,
      rgba(190, 197, 204, 0.15),
      transparent 75%),
    var(--bg-cool); */
  /* background:
    radial-gradient(ellipse 55% 80% at 12% 54%, rgba(235, 217, 206, .24), transparent 75%),
    #fbf7f4; */
}

.work-steps__header {
  margin-bottom: 38px;
}

.work-steps__section-number {
  display: none;
}

.work-steps__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px 14px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

/* .work-steps__grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 52px;
  right: -18px;
  width: 42px;
  height: calc(50% + 20px);
  border: 1px solid rgba(var(--action-rgb), .42);
  border-left: 0;
  border-radius: 0 42px 42px 0;
  pointer-events: none;
} */

.work-steps__slider {
  overflow: visible;
}

.work-steps__pagination {
  display: none;
  justify-content: center;
  gap: 8px;
  min-height: 9px;
  margin: 18px 0 23px;
}

.work-step-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 250px;
  padding: 0 16px 12px;
  color: #302c29;
  background: transparent;
  text-align: center;
}

.work-step-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 52px;
  right: -8px;
  left: -8px;
  height: 1px;
  background: rgba(var(--action-rgb), .42);
}

.work-step-card__top {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  min-height: 76px;
  margin-bottom: 12px;
}

.work-step-card__number {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--action-rgb), .66);
  border-radius: 50%;
  color: var(--accent);
  background: #fbf7f4;
  font: 500 16px/1 var(--font-family-accent);
}

.work-step-card__top svg {
  width: 31px;
  height: 31px;
  margin-bottom: 5px;
  color: var(--accent-gray);
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.work-step-card h3 {
  min-height: 48px;
  margin: 0 0 10px;
  font: 500 20px/1.2 var(--font-family);
}

.work-step-card p {
  margin: 0 auto;
  color: #54504c;
  font: 400 16px/1.5 var(--font-family);
}

.work-steps__link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 300px;
  padding: 0 10px;
  font: 500 16px/1.2 var(--font-family);
}

.work-steps__link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.work-steps__link:hover svg {
  transform: translateX(4px);
}

.work-steps__link:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 4px;
}

@media (max-width: 1099px) and (min-width: 768px) {
  .work-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
  }

  .work-steps__grid::after {
    display: none;
  }

  .work-step-card {
    min-height: 230px;
  }
}

@media (max-width: 767px) {

  .work-steps__header {
    margin-bottom: 25px;
  }

  .work-steps__intro p br {
    display: none;
  }

  .work-steps__grid {
    display: flex;
    gap: 0;
    margin-bottom: 0;
  }

  .work-steps__grid::after,
  .work-step-card::before {
    display: none;
  }

  .work-steps__slider {
    overflow: hidden;
  }

  .work-steps__pagination {
    display: flex;
  }

  .work-step-card {
    height: auto;
    min-height: 240px;
    padding: 24px 22px;
    border: 1px solid #e2d7cf;
    border-radius: 12px;
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 10px 26px rgba(78, 53, 37, .08);
  }

  .work-step-card__top {
    flex-flow: row;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
  }

  .work-step-card h3 {
    min-height: auto;
    font-size: 20px;
  }

  .work-step-card p {
    font-size: 16px;
  }

  .work-step-card p br,
  .work-step-card h3 br {
    display: none;
  }

  .work-steps__link {
    width: 100%;
  }
}

/* ==================== SERVICES ==================== */
.services {
  position: relative;
  overflow: hidden;
  /* background:
    radial-gradient(ellipse 55% 85% at 12% 48%, rgba(233, 216, 205, .22), transparent 75%),
    #faf7f3; */
  background: var(--bg-main);
}

.services__intro {
  margin-bottom: 30px;
}

.services__slider {
  overflow: visible;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.service-card {
  display: flex;
  width: auto;
  height: auto;
  min-width: 0;
  flex-direction: column;
  padding: 24px 24px 18px;
  border: 1px solid #e1d8d1;
  border-radius: 10px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 8px 24px rgba(70, 49, 35, .05);
}

.service-card--featured {
  border-color: rgba(var(--action-rgb), .82);
  box-shadow: 0 12px 30px rgba(var(--action-rgb), .10);
}

.service-card__hero {
  display: flex;
  flex-direction: column;
}

.service-card__heading {
  order: -1;
  margin-bottom: 16px;
}

.service-card__heading h3 {
  margin: 0;
  color: #263047;
  font: 500 22px/1.08 var(--font-family);
  letter-spacing: -.025em;
}

.service-card__hero img {
  display: block;
  width: 100%;
  height: 243px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center bottom;
}

.service-card__hero img[hidden] {
  display: none;
}

.service-card>p {
  margin: 18px 0 0;
  padding: 17px 0 16px;
  border-top: 1px solid #e3dbd4;
  color: #514c48;
  font: 400 16px/1.48 var(--font-family);
}

.service-card__features {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  color: #494541;
  font: 400 16px/1.42 var(--font-family);
  list-style: none;
}

.service-card__features li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 23px;
}

.service-card__features li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 8px;
  height: 5px;
  border-bottom: 1.5px solid var(--accent);
  border-left: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

.service-card__actions {
  margin-top: 18px;
}

.service-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--action);
  border-radius: 6px;
  color: #fff;
  background: var(--action);
  font: 500 16px/1.2 var(--font-family);
  gap: 10px;
  text-align: center;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

/* .service-card__button::after {
  content: "→";
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
} */

.service-card__button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.service-card__button:hover {
  border-color: var(--action-dark);
  color: #fff;
  background: var(--action-dark);
  transform: translateY(-1px);
}

.services__pagination {
  display: none;
}

.services__cta {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 245px;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  padding: 18px 28px;
  border: 1px solid #dfd5cd;
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 7px 22px rgba(70, 49, 35, .04);
}

.services__cta-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(var(--action-rgb), .38);
  border-radius: 50%;
  color: var(--accent);
}

.services__cta-icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services__cta .h3 {
  margin: 0 0 5px;
  color: #263047;
  font: 500 28px/1.1 var(--font-family);
  letter-spacing: -.025em;
}

.services__cta p {
  margin: 0;
  color: #514c48;
  font: 400 16px/1.35 var(--font-family);
}

.services__cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  /* font-size: 16px; */
}

/* .services__cta-button span {
  margin-left: auto;
  font-size: 20px;
} */

@media (max-width: 1050px) {
  .services__grid {
    gap: 12px;
  }

  .service-card {
    padding: 19px 18px 17px;
  }

  .service-card__heading h3 {
    font-size: 25px;
  }

  .service-card__hero img {
    height: 175px;
  }
}

@media (max-width: 767px) {


  .services__intro {
    margin-bottom: 24px;
  }

  .services__slider {
    overflow: hidden;
  }

  .services__grid {
    display: flex;
    gap: 0;
  }

  .service-card {
    width: 100%;
    padding: 20px 18px 18px;
  }

  .service-card__heading h3 {
    font-size: 22px;
  }

  .service-card__hero img {
    height: 175px;
  }

  .services__pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    min-height: 10px;
    margin-top: 18px;
  }

  .services__cta {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .services__cta-icon {
    display: none;
  }

  .services__cta-button {
    width: 100%;
  }

  .services__cta .h3 {
    font-size: 24px;
  }
}

/* ==================== ARTICLES ==================== */
.articles {
  overflow: hidden;
  padding: 62px 0 50px;
  background: #f3eeeb;
}

.articles__intro {
  margin-bottom: 23px;
}


.articles__slider-wrap {
  position: relative;
}

/* .articles__slider {
  overflow: visible;
} */

.articles__slider .swiper-slide {
  height: auto;
}

.article-card {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 285px;
  height: 100%;
  overflow: hidden;
  border: 1px solid #ded6cf;
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 7px 22px rgba(69, 47, 33, .055);
}

.article-card__image {
  position: relative;
  height: 285px;
  overflow: hidden;
  background: #ded3c9;
}

.article-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(41, 29, 22, .06), transparent 35%);
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.article-card:hover .article-card__image img {
  transform: scale(1.025);
}

.article-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 18px;
}

.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: #756e68;
  font: 400 13px/1.3 var(--font-family);
}

.article-card__meta span:not(:last-child)::after {
  content: "•";
  margin-left: 6px;
  color: #b4aca5;
}

.article-card__project {
  margin: 0 0 8px;
  color: var(--accent);
  font: 500 12px/1.3 var(--font-family);
}

.article-card__title {
  margin: 0 0 17px;
  font: 500 21px/1.1 var(--font-family);
}

.article-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 39px;
  margin-top: auto;
  padding: 8px 13px;
  border: 1px solid rgba(var(--action-rgb), .55);
  border-radius: 6px;
  color: var(--action);
  background: transparent;
  font: 500 14px/1.2 var(--font-family);
  transition: color .2s, background .2s, transform .2s;
}

.article-card__link svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-card__link:hover {
  color: #fff;
  background: var(--action);
  transform: translateY(-1px);
}

.articles__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #ded6cf;
  border-radius: 50%;
  color: #3e3935;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 16px rgba(65, 45, 31, .09);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, background .2s, opacity .2s;
}

.articles__arrow:hover {
  color: #fff;
  background: var(--action);
}

.articles__arrow svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.articles__arrow--prev {
  left: -59px;
}

.articles__arrow--next {
  right: -59px;
}

.articles__arrow.swiper-button-disabled {
  opacity: .3;
  pointer-events: none;
}

.articles__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 10px;
  margin-top: 25px;
}

/* ==================== ARTICLES: ADAPTIVE ==================== */
@media (max-width: 1280px) {
  .articles__arrow--prev {
    left: -14px;
  }

  .articles__arrow--next {
    right: -14px;
  }
}

@media (max-width: 820px) {
  .articles {
    padding: 52px 0 44px;
  }

  .article-card {
    min-height: 275px;
  }

  .article-card__image {
    min-height: 275px;
  }

  .articles__arrow {
    width: 39px;
    height: 39px;
  }

  .articles__arrow--prev {
    left: -8px;
  }

  .articles__arrow--next {
    right: -8px;
  }
}

@media (max-width: 767px) {
  .articles {
    padding: 45px 0 40px;
  }



  .article-card {
    grid-template-columns: 1fr;
  }

  .article-card__image {
    min-height: 225px;
    height: 225px;
  }

  .article-card__content {
    min-height: 255px;
    padding: 19px 18px;
  }

  .article-card__title {
    font: 500 22px/1.08 var(--font-family);
  }

  .articles__arrow {
    display: none;
  }

  .service-card__features {
    font: 400 14px / 1.2 var(--font-family);
  }

  .service-card>p {
    font: 400 14px / 1.2 var(--font-family);
    margin: 0 0;
    padding: 17px 0 16px;
    border-top: 1px solid transparent;
  }

  .service-card__heading {
    margin-bottom: 5px;

  }
}

/* ==================== SLIDERS: SHARED PAGINATION ==================== */
.portfolio__pagination,
.services__pagination,
.articles__pagination,
.team__pagination,
.work-steps__pagination,
.advantages__pagination {
  align-items: center;
}

.portfolio__pagination .swiper-pagination-bullet,
.services__pagination .swiper-pagination-bullet,
.articles__pagination .swiper-pagination-bullet,
.team__pagination .swiper-pagination-bullet,
.work-steps__pagination .swiper-pagination-bullet,
.advantages__pagination .swiper-pagination-bullet {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #d8d4d1;
  opacity: 1;
  cursor: pointer;
  transition: width .25s ease, background .25s ease, transform .25s ease;
}

.portfolio__pagination .swiper-pagination-bullet-active,
.services__pagination .swiper-pagination-bullet-active,
.articles__pagination .swiper-pagination-bullet-active,
.team__pagination .swiper-pagination-bullet-active,
.work-steps__pagination .swiper-pagination-bullet-active,
.advantages__pagination .swiper-pagination-bullet-active {
  width: 52px;
  background: var(--action);
  transform: none;
}

/* ==================== REVIEWS ==================== */
/* ==================== REVIEWS ==================== */
.reviews {
  overflow: hidden;
  /* padding: 76px 0 68px; */
  /* background: #fbfaf8; */
  background: var(--bg-main);
}

.reviews__intro {
  margin-bottom: 32px;
}

.reviews__slider-wrap {
  position: relative;
}

.reviews__slider .swiper-slide {
  height: auto;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 322px;
  padding: 25px 27px 23px;
  border: 1px solid rgba(137, 112, 94, .13);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 25px rgba(68, 48, 35, .08);
}

.review-card__platform {
  position: absolute;
  top: 18px;
  right: 21px;
  width: 30px;
  height: 38px;
  object-fit: contain;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.review-card__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(182, 87, 54, .3);
  border-radius: 50%;
  color: var(--accent);
  background: #f7eee9;
}

.review-card__avatar svg {
  width: 24px;
  height: 24px;
}

.review-card__name {
  display: block;
  margin-bottom: 3px;
  font: 500 16px/1.25 var(--font-family);
}

.review-card__project {
  display: block;
  color: #3e3d3c;
  font: 400 12px/1.35 var(--font-family);
}

.review-card__rating {
  display: flex;
  gap: 3px;
  margin-bottom: 0;
  color: var(--accent);
}

.review-card__rating svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.review-card__text {
  margin: 0;
  color: #504b47;
  font: 400 16px/1.55 var(--font-family);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.review-card__more {
  width: fit-content;
  margin: 10px 0 0;
  text-decoration: underline;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: 500 15px/1.2 var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  text-decoration-skip-ink: none;
  text-decoration: underline;
  text-decoration-color: #b65636ad;
  text-decoration-thickness: from-font;
  text-underline-offset: 4px;
}

.review-card__more:hover {
  color: var(--accent-dark);
}

.review-card--with-photos {
  height: 322px;
  min-height: 0;
}

.review-card__photos-wrap {
  position: relative;
  margin-top: 12px;
}

.review-card__photos {
  height: 70px;
}

.review-card__photos .swiper-slide {
  height: 70px;
}

.review-card__photo,
.review-card__photos img {
  display: block;
  width: 100%;
  height: 70px;
}

.review-card__photo {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: zoom-in;
}

.review-card__photos img {
  object-fit: cover;
  transition: transform .2s;
}

.review-card__photo:hover img {
  transform: scale(1.05);
}

.review-card__photos-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #6a625d;
  background: #fff;
  box-shadow: 0 3px 10px rgba(68, 48, 35, .2);
  cursor: pointer;
  transform: translateY(-50%);
}

.review-card__photos-arrow--prev {
  left: 3px;
}

.review-card__photos-arrow--next {
  right: 3px;
}

.review-card__photos-arrow svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review-card--with-photos .review-card__source {
  margin-top: 13px;
  padding-top: 0;
}

.review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 17px;
  color: var(--accent);
  font: 500 12px/1.2 var(--font-family);
}

.review-card__source svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.reviews__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(114, 93, 78, .12);
  border-radius: 50%;
  color: #37322e;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 18px rgba(65, 45, 31, .11);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, opacity .2s, background .2s;
}

.reviews__arrow:hover {
  color: #fff;
  background: var(--accent);
}

.reviews__arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reviews__arrow--prev {
  left: -62px;
}

.reviews__arrow--next {
  right: -62px;
}

.reviews__arrow.swiper-button-disabled {
  opacity: .3;
  pointer-events: none;
}

.reviews__pagination {
  display: flex;
  justify-content: center;
  gap: 7px;
  min-height: 10px;
  margin-top: 24px;
}

.reviews__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.review-card__more:focus-visible,
.review-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.review-modal {
  width: min(100% - 40px, 560px);
  max-width: 560px;
  height: min(700px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 20px 70px rgba(42, 30, 22, .28);
  overflow: hidden;
}

.review-modal::backdrop {
  background: rgba(36, 34, 31, .5);
  backdrop-filter: blur(3px);
}

.review-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 42px 46px 46px;
}

.review-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #5d5752;
  background: #f4eeea;
  font: 300 28px/28px var(--font-family);
  cursor: pointer;
}

.review-modal__eyebrow {
  display: block;
  margin-bottom: 9px;
  color: var(--accent);
  font: 500 12px/1.2 var(--font-family);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.review-modal h3 {
  margin: 0 0 5px;
  font: 500 34px/1 var(--font-family-accent);
}

.review-modal__project {
  margin: 0 0 24px;
  color: #3e3d3c;
  font: 400 13px/1.4 var(--font-family);
}

.review-modal__text {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding-right: 12px;
  color: #504b47;
  font: 400 16px/1.65 var(--font-family);
  overflow-y: auto;
  scrollbar-color: #a39b94 transparent;
  scrollbar-width: thin;
}

.review-modal__text::-webkit-scrollbar {
  width: 6px;
}

.review-modal__text::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: #a39b94;
}

@media (max-width: 1280px) {
  .reviews__arrow--prev {
    left: -15px;
  }

  .reviews__arrow--next {
    right: -15px;
  }
}

@media (max-width: 820px) {
  /* .reviews {
    padding: 58px 0 52px;
  } */

  .reviews__intro {
    margin-bottom: 26px;
  }

  .review-card {
    /* height: 388px; */
  }

  .reviews__arrow {
    width: 40px;
    height: 40px;
  }

  .reviews__arrow--prev {
    left: -8px;
  }

  .reviews__arrow--next {
    right: -8px;
  }
}

@media (max-width: 767px) {
  .reviews__intro>p br {
    display: none;
  }

  .review-card {
    /* height: 388px; */
    padding: 22px 15px;
  }

  .review-modal__content {
    padding: 38px 25px 30px;
  }

  .review-modal h3 {
    font-size: 31px;
  }

  .reviews__arrow {
    display: none;
  }

  .review-card__name {
    font-size: 14px;
  }

  .review-card__author {
    gap: 9px;
  }
}


/* ==================== TEAM ==================== */
.team {
  overflow: hidden;
  padding: 76px 0 72px;
  background: #fbfaf8;
}

.team__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}

.team__line {
  flex: 0 0 auto;
  width: 110px;
  margin-top: 17px;
  color: rgba(var(--action-rgb), .48);
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.team__slider-wrap {
  position: relative;
}

.team__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 9px;
  margin-top: 22px;
}

.team__slider .swiper-slide {
  height: auto;
}

.team-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid #e5d9d0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
}

.team-card img {
  display: block;
  width: calc(100% - 18px);
  height: 246px;
  margin: 9px 9px 0;
  border-radius: 7px;
  object-fit: cover;
  object-position: center 20%;
}

.team-card__content {
  padding: 19px 18px 23px;
}

.team-card h3 {
  margin: 0 0 9px;
  font: 500 27px/1 var(--font-family-accent);
}

.team-card span {
  display: block;
  margin-bottom: 15px;
  color: var(--accent);
  font: 500 11px/1.25 var(--font-family);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.team-card p {
  margin: 0;
  color: #3e3d3c;
  font: 400 14px/1.45 var(--font-family);
}

.team__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(114, 93, 78, .12);
  border-radius: 50%;
  color: var(--action);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 18px rgba(65, 45, 31, .11);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s, background .2s, opacity .2s;
}

.team__arrow:hover {
  color: #fff;
  background: var(--action);
}

.team__arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team__arrow--prev {
  left: -70px;
}

.team__arrow--next {
  right: -70px;
}

.team__arrow.swiper-button-disabled {
  opacity: .3;
  pointer-events: none;
}

.team__arrow:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

@media (max-width: 1320px) {
  .team__arrow--prev {
    left: -16px;
  }

  .team__arrow--next {
    right: -16px;
  }
}

@media (max-width: 820px) {
  .team {
    padding: 58px 0 54px;
  }

  .team-card img {
    height: 270px;
  }
}

@media (max-width: 767px) {
  .team {
    padding: 46px 0 45px;
  }

  .team__header {
    margin-bottom: 26px;
  }

  .team__line,
  .team__arrow {
    display: none;
  }



  .team__intro>p br {
    display: none;
  }

  .team-card img {
    height: 310px;
  }

  .team-card h3 {
    font-size: 22px;
  }
}

/* ==================== CONTACTS ==================== */
.contacts {
  padding: 80px 0;
  background: #e8e5e0;
  /* background: #f6f2ef; */
  /* background:
    radial-gradient(60% 100% at 85% 50%,
      rgba(200, 205, 211, 0.13),
      transparent 72%),
    var(--bg-soft); */
}

.contacts__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(360px, .92fr);
  min-height: 535px;
  overflow: hidden;
  /* border: 1px solid rgba(135, 106, 86, .1); */
  border-radius: 18px;
  background-color: #eee8e2;
  background-image:
    linear-gradient(90deg, rgba(250, 248, 245, .97) 0%, rgba(250, 248, 245, .91) 38%, rgba(250, 248, 245, .38) 58%, rgba(250, 248, 245, .04) 100%),
    url('../img/contacts/bg.webp');
  background-position: center, right 42%;
  background-size: cover, 57% auto;
  background-repeat: no-repeat;
  box-shadow: 0 18px 45px rgba(69, 52, 41, .08);
}

.contacts__intro {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 70px clamp(46px, 6vw, 95px);
}

.contacts__person {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 44px;
}

.contacts__person-photo {
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  border: 3px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(69, 52, 41, .16);
}

.contacts__person-info strong,
.contacts__person-info span {
  display: block;
}

.contacts__person-info strong {
  margin-bottom: 7px;
  color: var(--dark);
  font: 500 18px/1.25 var(--font-family);
}

.contacts__person-info span {
  color: #827b75;
  font: 400 14px/1.3 var(--font-family);
}

.contacts__intro h2 {
  margin: 0 0 22px;
  color: var(--dark);
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1;
}

.contacts__accent {
  display: block;
  width: 42px;
  height: 1px;
  margin-bottom: 24px;
  background: var(--accent);
}

.contacts__lead {
  margin: 0;
  max-width: 310px;
  color: #716c68;
  font: 400 18px/1.55 var(--font-family);
}

.contacts__form-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px clamp(38px, 5vw, 78px) 54px 28px;
}

.contacts__card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(100%, 390px);
}

.contacts__item {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 11px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 9px 24px rgba(65, 48, 37, .08);
  transition: color .2s, transform .2s, box-shadow .2s;
}

.contacts__item:hover {
  color: var(--action);
  transform: translateY(-2px);
  box-shadow: 0 13px 29px rgba(65, 48, 37, .13);
}

.contacts__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--action);
  background: #fbf0f2;
}

.contacts__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contacts__item small,
.contacts__item strong {
  display: block;
}

.contacts__item small {
  margin-bottom: 4px;
  color: #827b75;
  font: 400 13px/1.2 var(--font-family);
}

.contacts__item strong {
  color: var(--dark);
  font: 500 17px/1.3 var(--font-family);
}

.contacts__call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* min-height: 39px; */
  min-height: 58px;
  margin-top: 10px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--action);
  font: 500 16px/1.2 var(--font-family);
  text-transform: none;
}

.contacts__call::after {
  content: '\2197';
  margin-left: 10px;
  font-size: 17px;
}

.contacts__call:hover {
  background: var(--action-dark);
}

@media (max-width: 820px) {
  .contacts {
    padding: 54px 0;
  }

  .contacts__layout {
    grid-template-columns: 1fr;
    min-height: 0;
    background-image:
      linear-gradient(180deg, rgba(250, 248, 245, .96) 0%, rgba(250, 248, 245, .82) 47%, rgba(250, 248, 245, .42) 100%),
      url('../img/contacts/bg.webp');
    background-position: center, center 62%;
    background-size: cover, cover;
  }

  .contacts__intro {
    padding: 54px 48px 30px;
  }

  .contacts__person {
    margin-bottom: 34px;
  }

  .contacts__form-wrap {
    justify-content: center;
    padding: 22px 48px 54px;
  }
}

@media (max-width: 767px) {
  .contacts {
    padding: 44px 0;
  }

  .contacts__accent {
    display: none;
    margin: 0;
  }

  .contacts__layout {
    border-radius: 14px;
    /* border: 1px solid #ffffff; */
  }

  .contacts__intro {
    padding: 20px 15px 0px;
  }

  .contacts__person {
    gap: 14px;
    margin-bottom: 28px;
  }

  .contacts__person-photo {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }

  .contacts__person-info strong {
    margin-bottom: 4px;
    font-size: 16px;
  }

  .contacts__person-info span {
    font-size: 13px;
  }

  .contacts__intro h2 {
    margin-bottom: 18px;
    font-size: 30px;
  }

  .contacts__form-wrap {
    padding: 18px 14px 34px;
  }

  .contacts__item {
    gap: 13px;
    min-height: 74px;
    padding: 11px 13px;
  }

  .contacts__icon {
    width: 42px;
    height: 42px;
  }

  .contacts__item strong {
    font-size: 15px;
    overflow-wrap: anywhere;
  }
}

.footer {
  border-top: 1px solid rgba(137, 112, 94, .12);
  padding: 93px 0 108px;
  /* background: #fbfaf8; */
  background: #f8f7f5;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(230px, .65fr) minmax(300px, 1fr);
  gap: 55px;
}

.footer__name {
  display: inline-block;
  margin-bottom: 18px;
  font: 400 52px/1 var(--font-family-accent);
  letter-spacing: -.025em;
}

.footer__brand p,
.footer p {
  margin: 0;
  /* color: #514d49; */
  font: 400 14px/1.4 var(--font-family);
}

.footer p.inform {
  margin: 20px 0 0;
  font-size: 12px;
}

.footer__details {
  max-width: 610px;
}

.footer__navigation {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 13px;
  padding-top: 6px;
}

.footer__navigation a {
  color: #514d49;
  font: 400 12px/1.3 var(--font-family);
  transition: color .2s;
}

.footer__navigation a:hover {
  color: var(--action);
}

.footer__links {
  display: grid;
  justify-items: start;
  gap: 15px;
  margin-bottom: 20px;
}

.footer__links a {
  /* border-bottom: 2px solid var(--action); */
  /* color: #4e4a46; */
  font: 400 14px/1.25 var(--font-family);
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  text-decoration-skip-ink: none;
  text-decoration: underline;
  text-decoration-color: rgba(44, 49, 54, .5);
  text-decoration-thickness: from-font;
  text-underline-offset: 4px;
}

.footer__links a:hover {
  text-decoration-color: rgba(var(--action-rgb), .5);
  color: var(--action-dark);
}

.footer__details p+p {
  margin-top: 23px;
}

@media (max-width: 820px) {
  .footer {
    padding: 62px 0 70px;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 43px;
  }

  .footer__details {
    grid-column: 1 / -1;
  }

  .footer__name {
    font-size: 46px;
  }
}

@media (max-width: 767px) {
  .footer {
    padding: 45px 0 52px;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .footer__details {
    grid-column: auto;
  }

  .footer__name {
    margin-bottom: 13px;
    font-size: 39px;
  }

  .footer__brand p,
  .footer__details p {
    font-size: 14px;
  }

  .footer__links a {
    font-size: 15px;
  }

  .footer__navigation a {
    font-size: 15px;
  }

  .footer__links {
    gap: 12px;
    margin-bottom: 27px;
  }

  .footer__details p+p {
    margin-top: 18px;
  }
}

/* ==================== CALLBACK MODAL ==================== */
.callback-modal .modal-dialog {
  position: relative;
  width: auto;
  max-width: 410px;
  margin: var(--bs-modal-margin);
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
}

.callback-modal .modal-content {
  overflow: hidden;
  border: 1px solid rgba(52, 48, 44, .18);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(31, 25, 21, .22);
}

.callback-modal__body {
  padding: 42px 30px 30px;
}

.callback-modal__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: #827f7b;
  background: transparent;
  cursor: pointer;
  transition: color .2s, transform .2s;
}

.callback-modal__close:hover {
  color: var(--action);
  transform: rotate(5deg);
}

.callback-modal__close svg {
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.callback-modal h2 {
  margin: 0 0 14px 0;
  color: var(--ink);
  font: 500 29px/1.05 var(--font-family);
  letter-spacing: -.025em;
}

.callback-modal__lead {
  margin: 0 0 29px;
  color: #3f4654;
  font: 400 17px/1.35 var(--font-family);
}

.callback-form__field {
  display: block;
  margin-bottom: 19px;
}

.callback-form__field>span:first-child {
  display: block;
  margin-bottom: 6px;
  color: #9298a2;
  font: 500 15px/1.2 var(--font-family);
}

.callback-form__field input,
.callback-form__field textarea {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 15px;
  border: 1px solid #ced2d7;
  border-radius: 7px;
  outline: 0;
  color: var(--ink);
  background: #fff;
  font: 400 17px/1.2 var(--font-family);
  transition: border-color .2s, box-shadow .2s;
}

.callback-form__field textarea {
  height: 92px;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.35;
  resize: none;
}

.callback-form__field input::placeholder {
  color: #7b7d80;
  opacity: 1;
}

.callback-form__field input:focus,
.callback-form__field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(182, 87, 54, .1);
}

.calculator-request-form__submit,
.callback-form__submit {
  width: 100%;
  display: inline-flex;
  font: 400 15px / 1.2 var(--font-family);
  align-items: center;
  justify-content: center;
  min-height: 53px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: var(--action);
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
  margin: 0 0 15px 0
}

.callback-form__consent {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  color: #949aa4;
  font: 400 12px/1.4 var(--font-family);
  cursor: pointer;
}

.callback-form__consent>input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.callback-form__checkbox {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid #b8bcbf;
  border-radius: 3px;
  color: #fff;
  background: #b8bcbf;
}

.callback-form__checkbox svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .15s, transform .15s;
}

.callback-form__consent>input:checked+.callback-form__checkbox {
  border-color: var(--accent);
  background: var(--accent);
}

.callback-form__consent>input:checked+.callback-form__checkbox svg {
  opacity: 1;
  transform: scale(1);
}

.callback-form__consent>input:focus-visible+.callback-form__checkbox {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.callback-form__consent a {
  color: var(--action);
  text-decoration: none;
}

.callback-form__consent a:hover {
  text-decoration: underline;
}

.modal-backdrop.show {
  opacity: .58;
}

/* ==================== CALLBACK MODAL: ADAPTIVE ==================== */
@media (max-width: 460px) {
  .callback-modal .modal-dialog {
    max-width: none;
    margin: 12px;
  }

  .callback-modal__body {
    padding: 39px 21px 24px;
  }

  .callback-modal h2 {
    font: 600 28px/1.05 var(--font-family);
  }

  .callback-modal__lead {
    margin-bottom: 24px;
    font: 400 15px/1.35 var(--font-family);
  }

  .callback-form__field input {
    height: 53px;
  }
}

/* ==================== CALLBACK MODAL: VALIDATION ==================== */
.callback-form__field input.error {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--action-rgb), .08);
}

.callback-form__consent>input.error+.callback-form__checkbox {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--action-rgb), .08);
}

.callback-form span.error {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* ==================== HEADER PHONE ==================== */
.header__phone {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  min-width: 167px;
  white-space: nowrap;
}

.header__phone a {
  display: flex;
  align-items: center;
  gap: 1px;
  color: var(--ink);
  font: 500 14px/1.15 var(--font-family);
  transition: color .2s;
}

.header__phone a:hover {
  color: var(--action);
}

.header__phone svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.header__phone strong {
  font: inherit;
}

.header__phone>span {
  margin-top: 3px;
  color: #77716c;
  font: 400 11px/1.15 var(--font-family);
}

@media (min-width: 1200px) {
  .header__inner {
    gap: 10px;
  }

  .nav {
    gap: clamp(14px, 1.35vw, 24px);
  }
}

/* ==================== HEADER: TABLET ==================== */
@media (max-width: 1199px) {
  .header {
    position: fixed;
    padding: 13px 0;
    background: rgba(249, 246, 242, .96);
    backdrop-filter: none;
  }

  .header__inner {
    gap: 16px;
  }

  .header__brand {
    position: relative;
    z-index: 2;
    flex: 0 1 auto;
    margin-right: auto;
  }

  .header__brand p {
    color: #6d6761;
    font: 400 10px/1.2 var(--font-family);
    white-space: nowrap;
  }

  .logo {
    flex: 0 0 auto;
    gap: .28em;
  }

  .logo__name,
  .logo__name--small {
    font: 500 21px/1 var(--font-family);
  }


  .menu-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 38px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 10px 5px;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transform-origin: center;
    transition: opacity .2s, transform .25s;
  }

  .menu-toggle.is-open span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-open span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    display: flex;
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    height: 100dvh;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 105px 30px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f8f4ef;
    box-shadow: 0 18px 50px rgba(59, 43, 32, .12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .25s, visibility .25s, transform .25s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav a {
    display: block;
    width: min(100%, 340px);
    padding: 14px 0;
    border-bottom: 1px solid rgba(92, 75, 64, .12);
    color: var(--ink);
    font: 400 22px/1.2 var(--font-family-accent);
  }

  .header__phone {
    position: relative;
    z-index: 2;
    display: flex;
  }

  .header__contact {
    position: relative;
    z-index: 2;
    flex: 0 0 155px;
    width: 155px;
    min-height: 42px;
    max-width: none;
  }
}

/* ==================== HEADER: MOBILE ==================== */
@media (max-width: 767px) {
  .header {
    padding: 10px 0;
  }

  .header__inner {
    gap: 8px;
  }

  .header__brand {
    min-width: 0;
  }

  .header__brand p {
    /* display: none; */
  }

  .logo {
    gap: .22em;
  }

  footer .logo__name,
  footer .logo__name--small,
  .logo__name,
  .logo__name--small {
    font: 500 18px/1 var(--font-family);
  }

  .header__phone {
    align-items: center;
    min-width: 40px;
  }

  .header__phone a {
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--action);
    border: 1px solid;
    border-radius: 5px;
  }

  .header__phone strong,
  .header__phone>span {
    display: none;
  }

  .header__contact {
    display: none;
  }

  .nav {
    padding: 84px 20px 32px;
  }
}

@media (max-width: 420px) {

  footer .logo__name,
  footer .logo__name--small,
  .logo__name,
  .logo__name--small {
    font: 500 15.5px/1 var(--font-family);
  }
}

/* ==================== CALCULATOR REQUEST MODAL ==================== */
.calculator-modal .modal-dialog {
  width: auto;
  max-width: 450px;
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
}

.calculator-modal .modal-content {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 24px 70px rgba(35, 29, 24, .24);
}

.calculator-modal__body {
  padding: 36px 25px 30px;
}

.calculator-modal h2 {
  max-width: 360px;
  margin: 0 auto 24px;
  color: #111;
  font: 600 28px/1.18 var(--font-family);
  letter-spacing: -.025em;
  text-align: center;
}

.calculator-request-form {
  display: grid;
  gap: 15px;
}

.calculator-request-form__field {
  display: grid;
  gap: 5px;
}

.calculator-request-form__field>span:first-child {
  color: #9299a3;
  font: 400 14px/1.2 var(--font-family);
}

.calculator-request-form__field input {
  width: 100%;
  height: 47px;
  padding: 0 13px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  outline: 0;
  color: var(--ink);
  background: var(--white);
  font: 400 16px/1.2 var(--font-family);
  transition: border-color .2s, box-shadow .2s;
}

.calculator-request-form__field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--action-rgb), .09);
}

.calculator-request-form__field input::placeholder {
  color: #737a83;
}

.contact-method {
  min-width: 0;
  margin: 0;
  padding: 13px 12px 14px;
  border: 1px solid #dde1e5;
  border-radius: 7px;
  background: #f6f7f8;
}

.contact-method legend {
  float: none;
  width: auto;
  margin: 0 0 10px;
  color: #282d35;
  font: 600 13px/1.2 var(--font-family);
}

.contact-method__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-method__option {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.contact-method__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-method__option span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  padding: 7px 12px;
  border: 1px solid #dfe3e7;
  border-radius: 18px;
  color: #252b33;
  background: var(--white);
  font: 400 12px/1 var(--font-family);
  transition: color .2s, border-color .2s, background-color .2s;
}

.contact-method__option svg {
  width: 20px;
  height: 20px;
  fill: #34304b;
  stroke-width: 1.7;
  /* stroke-linecap: round; */
  /* stroke-linejoin: round; */
}

.contact-method__option input:checked+span {
  border-color: #d7e0e4;
  background: #dce7eb;
}

.contact-method__option input:focus-visible+span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.calculator-request-form__note {
  margin: -5px 0 2px;
  color: #8c939d;
  font: 400 12px/1.3 var(--font-family);
}


.calculator-request-form__consent {
  position: relative;
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 7px;
  align-items: start;
  margin: -3px 0 0;
  color: #8f969f;
  font: 400 11px/1.45 var(--font-family);
  cursor: pointer;
}

.calculator-request-form__consent>input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.calculator-request-form__checkbox {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border: 1px solid #b7bcc1;
  border-radius: 2px;
  background: #b7bcc1;
}

.calculator-request-form__checkbox svg {
  width: 11px;
  height: 11px;
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.calculator-request-form__consent>input:checked+.calculator-request-form__checkbox svg {
  opacity: 1;
}

.calculator-request-form__consent>input:focus-visible+.calculator-request-form__checkbox {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.calculator-request-form__consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==================== CALCULATOR REQUEST MODAL: VALIDATION ==================== */
.calculator-request-form__field input.error,
.calculator-request-form__consent>input.error+.calculator-request-form__checkbox {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--action-rgb), .08);
}

.calculator-request-form span.error {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* ==================== CALCULATOR REQUEST MODAL: ADAPTIVE ==================== */
@media (max-width: 767px) {
  .calculator-modal .modal-dialog {
    max-width: none;
    margin: 12px;
  }

  .calculator-modal__body {
    padding: 36px 18px 22px;
  }

  .calculator-modal h2 {
    margin-bottom: 20px;
    font: 600 24px/1.18 var(--font-family);
  }

  .contact-method__options {
    gap: 6px;
  }

  .contact-method__option span {
    padding-inline: 9px;
  }
}

/* ==================== MODAL FORMS: COMMON SUBMIT AND CONSENT ==================== */


.calculator-request-form__consent {
  grid-template-columns: 18px 1fr;
  gap: 9px;
  margin: 0;
  color: #949aa4;
  font: 400 12px/1.4 var(--font-family);
}

.calculator-request-form__checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #b8bcbf;
  border-radius: 3px;
  color: var(--white);
  background: #b8bcbf;
}

.calculator-request-form__checkbox svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .15s, transform .15s;
}

.calculator-request-form__consent>input:checked+.calculator-request-form__checkbox {
  border-color: var(--accent);
  background: var(--accent);
}

.calculator-request-form__consent>input:checked+.calculator-request-form__checkbox svg {
  opacity: 1;
  transform: scale(1);
}

.calculator-request-form__consent a {
  color: var(--action);
  text-decoration: none;
}

.calculator-request-form__consent a:hover {
  text-decoration: underline;
}

/* ==================== HERO: FIRST SCREEN ==================== */
.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  padding: 0;
  /* background:
    radial-gradient(ellipse 62% 84% at 14% 56%, rgba(68, 63, 51, .34) 0%, rgba(34, 33, 30, .16) 52%, transparent 78%),
    radial-gradient(ellipse 52% 70% at 84% 20%, rgba(79, 73, 56, .30) 0%, rgba(42, 39, 32, .12) 56%, transparent 80%),
    linear-gradient(122deg, #191918 0%, #343027 48%, #1e1d1a 100%); */
  /* background:
    radial-gradient(
      ellipse 62% 84% at 14% 56%,
      rgba(58, 61, 67, 0.34) 0%,
      rgba(31, 33, 37, 0.18) 52%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 52% 70% at 84% 20%,
      rgba(67, 70, 76, 0.28) 0%,
      rgba(35, 37, 42, 0.14) 56%,
      transparent 80%
    ),
    linear-gradient(
      122deg,
      #18191b 0%,
      #2c2f33 48%,
      #1c1e21 100%
    ); */
  background:
    radial-gradient(ellipse 62% 84% at 14% 56%,
      rgba(58, 61, 67, 0.34) 0%,
      rgba(31, 33, 37, 0.18) 52%,
      transparent 78%),
    radial-gradient(ellipse 52% 70% at 84% 20%,
      rgba(67, 70, 76, 0.28) 0%,
      rgba(35, 37, 42, 0.14) 56%,
      transparent 80%),
    linear-gradient(122deg,
      #18191b 0%,
      #2c2f33 48%,
      #1c1e21 100%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 240px;
  height: 320px;
  pointer-events: none;
  opacity: .58;
  background: url("../img/bg-mini.png") left bottom / contain no-repeat;
}

.hero__backdrop {
  position: absolute;
  z-index: 0;
  top: 42px;
  right: max(28px, calc((100% - 1240px) / 2));
  bottom: 48px;
  left: calc(50% - 164px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  width: 844px;
  outline: 0;
  box-shadow: 0 22px 55px rgba(62, 43, 31, .10);
  background-color: #13110c;
  background-image: url(../img/about/left_about.webp);
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: url(#hero-photo-clip);
}

.hero__backdrop-glow {
  position: absolute;
  z-index: 0;
  top: 42px;
  right: max(28px, calc((100% - 1240px) / 2));
  bottom: 48px;
  left: calc(50% - 185px);
  width: 844px;
  pointer-events: none;
  filter: blur(18px);
  opacity: .42;
}

.hero__backdrop-glow>div {
  width: 100%;
  height: 100%;
  background: #d5a47c;
  clip-path: url(#hero-photo-clip);
}

.hero__clip-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.hero__backdrop-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero__backdrop-outline path {
  fill: none;
  stroke: rgba(187, 139, 102, .72);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.main-spasibo .hero__backdrop {
  background-position: left top;
}

.hero__backdrop::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(37, 27, 20, .05), transparent 38%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 437px minmax(0, 1fr);
  gap: 35px;
  align-items: start;
  width: min(1160px, calc(100% - 48px));
  min-height: 860px;
  padding: 0;
}

.main-spasibo .hero__inner,
.main-spasibo .hero {
  min-height: 640px;
}

.hero__mobile-image {
  display: none;
  width: 100%;
  overflow: hidden;
}

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

.hero__content {
  grid-column: 1;
  align-self: start;
  /* max-width: 340px; */
  padding: 226px 0 34px;
}

/* .hero__content::before {
  content: "✦";
  display: block;
  width: 24px;
  margin-bottom: 10px;
  color: var(--accent);
  font: 500 27px/1 var(--font-family-accent);
  text-align: center;
  background: linear-gradient(var(--accent), var(--accent)) center 28px / 1px 38px no-repeat;
  padding-bottom: 38px;
} */

.hero h1 {

  color: #f7f1ef;
  font: 500 clamp(41px, 4.45vw, 41px)/1 var(--font-family);
  letter-spacing: -.035em;
}

.sub_h1 {
  font: 500 41px/1 var(--font-family);
  margin: 0 0 22px;
  color: #ffffff;
}

.hero h1 span {
  color: #f7f1ef;
  white-space: nowrap;
}

.sub_h1 span {
  color: #af4551;
  white-space: nowrap;
}

.hero__lead {
  max-width: 330px;
  margin: 0 0 27px;
  color: #ded4d1;
  font: 400 14px/1.5 var(--font-family);
}

.hero__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__list li {
  position: relative;
  min-height: 59px;
  margin: 0;
  padding: 9px 0 9px 60px;
  color: #f4edeb;
  border-bottom: 1px solid rgba(225, 197, 190, .16);
}

.hero__list li:last-child {
  border-bottom: 0;
}

.hero__list-icon {
  position: absolute;
  top: 7px;
  left: 0;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  color: rgb(255 255 255);
  background: rgba(92, 67, 68, .45);
}

.hero__list-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  /* stroke-width: 1.6; */
  /* stroke-linecap: round;
  stroke-linejoin: round; */
}

.hero__list strong {
  display: block;
  margin-bottom: 2px;
  color: #f4edeb;
  font: 500 18px/1.3 var(--font-family);
}

.hero__list-text {
  display: block;
  color: #ddd3d0;
  font-size: 16px;
  line-height: 1.4;
}

.hero .calculator {
  position: relative;
  z-index: 3;
  grid-column: 2;
  align-self: start;
  justify-self: end;
  width: 409px;
  /* max-width: 400px; */
  margin: 223px -86px 40px 0;
  padding: 25px 15px 25px;
  border-color: rgba(255, 255, 255, .82);
  border-radius: 15px;
  background: rgba(255, 253, 251, .96);
  box-shadow: 0 34px 76px rgba(45, 31, 22, .30), 0 14px 32px rgba(45, 31, 22, .18), 0 3px 10px rgba(45, 31, 22, .10), 0 0 0 1px rgba(98, 72, 54, .06);
}

.hero .calculator h2 {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 500;
  text-transform: none;
}

@media (max-width: 1180px) and (min-width: 1100px) {

  .hero__backdrop,
  .hero__backdrop-glow {
    top: 112px;
    right: 24px;
    bottom: 48px;
    left: 39%;
  }

  .hero__inner {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 36px;
    width: calc(100% - 48px);
  }

  .hero__content {
    max-width: 320px;
  }

  .hero h1,
  .sub_h1 {
    font-size: 41px;
  }

  .hero .calculator {
    margin-left: 24px;
  }
}

@media (max-width: 1099px) {
  .hero {
    min-height: auto;
    padding-bottom: 34px;
  }

  .hero__backdrop,
  .hero__backdrop-glow {
    left: calc(50% - 95px);
    width: 776px;
    /* top: 500px;
    right: 24px;
    bottom: 34px;
    left: 24px;
    border-radius: 150px 220px 190px 80px / 95px 170px 145px 62px;
    background-position: center 40%; */
  }

  .hero__inner {
    /* display: flex; */
    /* flex-direction: column; */
    width: 100%;
    min-height: 1080px;
    padding: 112px 15px 30px;
    gap: 22px;
  }

  .hero__content {
    width: 100%;
    max-width: 560px;
    margin: 0;
    padding: 28px 0 0;
  }

  .hero__content::before {
    margin-bottom: 24px;
  }

  .hero h1,
  .sub_h1 {
    font-size: 38px;
  }

  .hero__lead {
    max-width: 450px;
  }

  .hero__list {
    max-width: 450px;
  }

  .hero .calculator {
    align-self: flex-end;
    width: 400px;
    max-width: 100%;
    margin: 88px 0 40px 0;
  }
}

@media(max-width:992px) {

  .hero__backdrop,
  .hero__backdrop-glow {
    left: calc(50% - 12px);
    width: 776px;
    background-position: -100px top;
  }

  .hero .calculator {
    width: 421px;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-bottom: 0;
  }

  .hero::after {
    display: none;
  }

  .main-spasibo .hero__inner,
  .main-spasibo .hero {
    min-height: 260px;
  }

  .hero__backdrop,
  .hero__backdrop-glow {
    display: none;
  }

  .hero__inner {
    display: flex;
    flex-flow: column;
    min-height: 0;
    padding: 70px 15px 18px;
  }

  .hero__content {
    padding-top: 20px;
  }

  .hero__content::before {
    margin-bottom: 18px;
    padding-bottom: 24px;
    background-size: 1px 25px;
  }

  .hero h1 {
    font: 500 30px / 1.04 var(--font-family);
  }

  .sub_h1 {
    margin-bottom: 20px;
    font: 500 30px / 1.04 var(--font-family);
  }

  .hero__mobile-image {
    display: block;
    height: 390px;
    margin: 0 0 0;
    border: 1px solid rgba(174, 148, 127, .35);
    border-radius: 72px 92px 64px 34px;
  }

  .hero__mobile-image img {
    object-position: center top;
  }

  .hero .calculator {
    align-self: center;
    width: 100%;
    max-width: 430px;
    margin: -54px 0 0;
    padding: 25px 20px 22px;
  }
}

@media (max-width: 430px) {
  .hero .calculator {
    margin: -145px 0 0;
  }

  .hero h1 span {
    white-space: normal;
  }

  .sub_h1 {
    font-size: 22px;
  }

  .hero__list li {
    padding-right: 4px;
  }

  .hero__mobile-image {
    height: 340px;
  }
}

/* ==================== ADVANTAGES ==================== */
.advantages {
  position: relative;
  overflow: hidden;
  padding: 28px 0 58px;
  background: var(--bg-main);
  /* background:
    radial-gradient(ellipse 60% 100% at 12% 50%, rgba(232, 215, 204, .22), transparent 72%),
    #f8f3ef; */
}

.advantages__inner {
  /* overflow: hidden;
  padding: 0; */
  /* border: 1px solid #e9dfd7;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 32px rgba(76, 53, 39, .10); */
}

.advantages__quote {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  min-height: 102px;
  margin: 0 0 20px 0;
  padding: 20px 28px 10px;
  border: 1px solid #e9dfd7;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 32px rgba(76, 53, 39, .10);
}

.advantages__quote-mark {
  align-self: start;
  padding-top: 2px;
  color: var(--accent);
  font: 600 42px/.8 var(--font-family-accent);
}

.advantages__quote_txt {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.advantages__quote p {
  max-width: 860px;
  margin: 0;
  color: #3e3935;
  font: 400 18px/1.45 var(--font-family);
}

.advantages__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.advantages__author-line {
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.advantages__author>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
}

.advantages__author cite {
  color: var(--accent);
  font: italic 400 18px/1 var(--font-family);
  white-space: nowrap;
}

.advantages__author small {
  margin-top: 6px;
  color: #7a736d;
  font: 500 10px/1 var(--font-family);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.advantages__author img {
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  box-shadow: 0 5px 15px rgba(65, 45, 31, .16);
}

.advantages__grid {
  /* width: calc(100% - 40px);
  margin: 0 20px;
  overflow: hidden; */
}

.advantages__grid>.swiper-wrapper {
  align-items: stretch;
}

.advantage-card {
  position: relative;
  display: flex;
  height: auto;
  min-width: 0;
  flex-shrink: 0;
  flex-direction: column;
  background: #ffffff;
  border-radius: 9px;
}

.advantage-card::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -11px;
  bottom: 8px;
  width: 1px;
  background: rgba(101, 79, 64, .10);
}

.advantage-card__image {
  display: block;
  width: 100%;
  height: clamp(200px, 18vw, 250px);
  border-radius: 9px 9px 0 0;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

.advantage-card__content {
  display: flex;
  min-height: 105px;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 6px 12px 18px;
}

.advantage-card .h2 {
  margin: 0 0 8px;
  color: #302c29;
  font: 500 20px/1.25 var(--font-family);
  letter-spacing: -.01em;
  text-align: left;
}

.advantage-card p {
  max-width: 330px;
  margin: 0;
  color: #625c57;
  font: 400 16px/1.5 var(--font-family);
}

.advantages__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 9px;
  margin: 15px 0 18px;
}

.advantages__pagination .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

@media (max-width: 992px) {
  .advantages__quote {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 20px 24px 12px;
  }

  .advantages__quote p {
    max-width: none;
  }

  .advantages__author {
    grid-column: 2;
    justify-self: end;
  }
}

@media (max-width: 767px) {
  .advantages {
    padding: 24px 0 42px;
  }

  .advantages__inner {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .advantages__quote {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 20px 16px 14px;
  }

  .advantages__quote-mark {
    font-size: 38px;
  }

  .advantages__quote p {
    font-size: 13px;
  }

  .advantages__author {
    gap: 8px;
    margin-top: 5px;
  }

  .advantages__author-line {
    display: none;
  }

  .advantages__author>div {
    min-width: 0;
    align-items: flex-end;
  }

  .advantages__author cite {
    font-size: 15px;
  }

  .advantages__author img {
    width: 52px;
    height: 52px;
  }

  .advantages__grid {
    width: calc(100% - 32px);
    margin: 0 16px;
  }

  .advantage-card::after {
    display: none;
  }

  .advantage-card__content {
    min-height: 118px;
    padding: 8px 8px 18px;
  }

}

@media (max-width: 420px) {
  .advantages__quote {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .advantages__quote-mark {
    height: 28px;
  }

  .advantages__author {
    grid-column: 1;
  }
}

/* ==================== FORM SUBMIT: PRIVACY CONSENT ==================== */
[data-validate-form] button[type="submit"]:disabled,
[data-validate-form] input[type="submit"]:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.section-text {
  padding: 60px 0;
  margin: 50px 0 0 0;
}

.footer__link,
.footer__simtu {
  display: flex;
  gap: 5px;
  align-items: center;
}

.footer__simtu {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.footer__simtu span {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  color: rgba(44, 49, 54, 0.6);
}

@media(max-width:767px) {
  .footer__simtu {
    margin-top: 15px;
  }
}