@charset "UTF-8";

:root { --mokko-section-space: clamp(64px, 7.5vw, 112px); --mokko-section-gap: clamp(32px, 4vw, 56px); }

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/SourceSans3-Regular.woff2) format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/SourceSans3-Italic.woff2) format("woff2");
}

@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/TenorSans-Regular.woff2) format("woff2");
}

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

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 128px
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit
}

button {
  cursor: pointer;
  background: none;
  border: none
}

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

ul,
ol {
  list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

h1,
.h1 {
  font-size: 56px;
  line-height: 1.18;
  letter-spacing: 0;
  font-family: Tenor Sans, sans-serif;
  color: #153D40
}

h2,
.h2 {
  font-family: Tenor Sans, sans-serif;
  font-size: clamp(28px,3.2vw,44px);
  color: #153D40;
  line-height: 1.17;
  letter-spacing: 0em
}

h3,
.h3 {
  font-family: Tenor Sans, sans-serif;
  font-size: 40px;
  letter-spacing: 0em;
  line-height: 1.17
}

h4,
.h4 {
  font-family: Tenor Sans, sans-serif;
  color: #153D40;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0em
}

.section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--mokko-section-gap);
  text-align: left
}

.section__subtitle {
  max-width: 720px;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.65
}

.hover-underline {
  position: relative
}

.hover-underline:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0%;
  height: 1px;
  background-color: currentColor;
  transition: width .5s ease
}

.hover-underline:hover:before {
  width: 100%
}

@media (max-width: 61.99875em) {

  h1,
  .h1 {
    font-size: 44px
  }

  h2,
  .h2 {
    font-size: 40px
  }

  h3,
  .h3 {
    font-size: 32px
  }

  .section__header {
    margin-bottom: 40px
  }
}

@media (max-width: 47.99875em) {

  h1,
  .h1 {
    font-size: 32px
  }

  h2,
  .h2 {
    font-size: 28px
  }

  h3,
  .h3 {
    font-size: 24px
  }

  h4,
  .h4 {
    font-size: 18px
  }

  .section__header {
    margin-bottom: 28px;
    gap: 8px
  }

  .section__subtitle {
    font-size: 14px
  }
}

@media (max-width: 29.99875em) {

  h1,
  .h1 {
    font-size: 26px
  }

  h2,
  .h2 {
    font-size: 28px
  }
}

html {
  scrollbar-gutter: stable
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 112px;
  font-family: "Source Sans 3", sans-serif;
  letter-spacing: 0;
  color: #505050;
  line-height: 1.65;
  font-size: 16px;
  overflow: clip
}

@media (max-width: 61.99875em) {
  html { scroll-padding-top: 100px; }
  .wrapper {
    padding-top: 84px
  }
}

main {
  flex: 1
}

svg {
  fill: transparent
}

[class*=__container] {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px
}

.contacts-page main {
  display: flex;
  flex-direction: column
}

@media (max-width: 47.99875em) {
  [class*=__container] {
    padding: 0 20px
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

:root {
  --swiper-theme-color: #007aff
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block
}

.swiper-vertical>.swiper-wrapper {
  flex-direction: column
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0)
}

.swiper-horizontal {
  touch-action: pan-y
}

.swiper-vertical {
  touch-action: pan-x
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block
}

.swiper-slide-invisible-blank {
  visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d
}

.swiper-3d {
  perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
  scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
  margin-inline-start: var(--swiper-slides-offset-before);
  scroll-margin-inline-start: var(--swiper-slides-offset-before)
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child {
  margin-inline-end: var(--swiper-slides-offset-after)
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
  scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
  margin-block-start: var(--swiper-slides-offset-before);
  scroll-margin-block-start: var(--swiper-slides-offset-before)
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child {
  margin-block-end: var(--swiper-slides-offset-after)
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
  scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.header {
  padding: 16px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 100
}

.header__container { max-width: 1380px; padding-inline: 15px; }
@media (max-width: 47.99875em) { .header__container { padding-inline: 16px; } }

.header__row {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 40px;
  padding: 130px 24px 32px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate(100%);
  transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
  box-shadow: -8px 0 40px #00000026;
  font-size: 19px
}

.header__row .header__logo {
  display: none
}

.header__row .header__nav,
.header__row .header__contacts {
  flex-direction: column;
  gap: 20px
}

.header__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px
}

.header__nav-item-row {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.header__nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: opacity .2s ease
}

.header__nav-toggle:hover {
  opacity: .6
}

.header__nav-arrow {
  display: inline-block;
  font-size: 12px;
  transition: transform .2s ease
}

.header__nav-item--open .header__nav-arrow {
  transform: rotate(180deg)
}

.header__submenu {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 16px
}

.header__nav-item--open .header__submenu {
  display: flex
}

.header__row_pc {
  width: 400px;
  max-width: 100vw;
  align-items: flex-start;
  text-align: left
}

.header__row_pc .header__nav {
  align-items: flex-start
}

.header__row_pc .header__nav-item--open {
  align-items: flex-start
}

.header__row_pc .header__contacts {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left
}

@media (max-width: 61.99875em) {
  .header__row_pc {
    display: none
  }
}

.header__row_mobile {
  width: 100vw;
  align-items: center;
  text-align: center
}

.header__row_mobile .header__nav {
  align-items: center
}

.header__row_mobile .header__contacts {
  align-items: center;
  justify-content: center;
  text-align: center
}

@media (min-width: 62em) {
  .header__row_mobile {
    display: none
  }
}

.header.menu-open .header__row {
  opacity: 1;
  visibility: visible;
  transform: translate(0)
}

.header__mobile {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 32px
}

.header__mobile .header__logo {
  position: relative;
  z-index: 999
}

.header__mobile .header__nav {
  flex: 1
}

.header__mobile .header__contacts {
  flex: 1;
  justify-content: flex-end
}

@media (min-width: 62em) {
  .header__burger {
    order: 1
  }
  .header__mobile .header__contacts {
    order: 2
  }
  .header__mobile .header__logo {
    order: 3
  }
  .header__mobile .header__nav {
    order: 4
  }
}

@media (max-width: 61.99875em) {
  .header__mobile {
    gap: 16px;
    justify-content: space-between
  }

  .header__mobile .header__nav,
  .header__mobile .header__contacts {
    display: none
  }

  .header__mobile .header__logo svg {
    width: 104px;
    height: 52px
  }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 32px
}

.header__nav-link {
  text-decoration: none;
  color: inherit
}

.header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0
}

.header__logo svg {
  width: 160px;
  height: 80px
}

.header__contacts {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: end
}

.header__cta {
  white-space: nowrap
}

.header__phone {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  white-space: nowrap
}

.header__lang {
  position: relative
}

.header__lang:hover .header__lang-list,
.header__lang:focus-within .header__lang-list {
  opacity: 1;
  visibility: visible;
  transform: translate(50%)
}

.header__lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: inherit;
  color: inherit;
  transition: opacity .2s ease
}

.header__lang-toggle:hover {
  opacity: .7
}

.header__lang-arrow {
  display: inline-block;
  transition: transform .2s ease
}

.header__lang:hover .header__lang-arrow,
.header__lang:focus-within .header__lang-arrow {
  transform: rotate(180deg)
}

.header__lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 50%;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  min-width: 80px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translate(50%, -8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease
}

.header__lang-list li button,
.header__lang-list li a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  color: inherit
}

.header__lang-list li button:hover,
.header__lang-list li a:hover {
  background-color: #f5f5f5
}

.header__burger {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000
}

.header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #153D40;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, background-color .2s ease
}

.header__burger:hover span {
  background-color: #A58B64
}

.header.menu-open .header__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.header.menu-open .header__burger span:nth-child(2) {
  opacity: 0
}

.header.menu-open .header__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.footer {
  padding: 48px 0 0;
  background-color: #153D40;
  color: #fff
}

.footer__row {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 48px;
  align-items: start;
  padding-bottom: 48px
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0
}

.footer__logo svg {
  width: 160px;
  height: 80px
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.footer__nav-item {
  display: flex
}

.footer__nav-item a {
  color: #fff
}

.footer__socials {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.footer__socials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px
}

.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  transition: opacity .2s ease
}

.footer__social:hover {
  opacity: .8
}

.footer__social img {
  width: 100%;
  height: 100%
}

.footer__office {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.footer__route a {
  text-decoration: underline
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.footer__phone a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap
}

.footer__schedule,
.footer__details {
  margin-top: 10px
}

.footer__details p {
  font-size: 12px;
  line-height: 1.5
}

.footer__bottom {
  padding: 20px 0 24px;
  text-align: center
}

.footer__bottom p {
  font-size: 12px
}

@media (max-width: 61.99875em) {
  .footer__row {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }
}

@media (max-width: 47.99875em) {
  .footer__row {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .footer__logo svg {
    width: 120px;
    height: 60px
  }

  .footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 12px;
  }

  .footer__nav-item { min-width: 0; }
  .footer__nav-item a { overflow-wrap: anywhere; }
}

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; border: 1px solid var(--mokko-accent); border-radius: 999px; background: var(--mokko-accent); color: #fff; letter-spacing: .045em; text-decoration: none; transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; }

.button:hover { background-color: var(--mokko-accent-hover); border-color: var(--mokko-accent-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(21,61,64,.12); }

.button.teal {
  background-color: var(--mokko-accent);
  border-color: var(--mokko-accent);
  color: #fff
}

.button.teal:hover {
  background-color: var(--mokko-accent-hover);
  border-color: var(--mokko-accent-hover)
}

.button.outline {
  background-color: transparent;
  border-color: #fff;
  color: #fff
}

.button.outline:hover {
  background-color: #fff;
  color: #1a1a1a
}

.button.gold-outline {
  background-color: transparent;
  border-color: var(--mokko-accent);
  color: var(--mokko-accent)
}

.button.gold-outline:hover {
  background-color: var(--mokko-accent);
  color: #fff
}

.button.teal-outline {
  background-color: transparent;
  border-color: #153D40;
  color: #153D40
}

.button.teal-outline:hover {
  background-color: #153D40;
  color: #fff
}

.button.gray-outline {
  background-color: transparent;
  border-color: #b0b0b0;
  color: #5a5a5a
}

.button.gray-outline:hover {
  border-color: #5a5a5a;
  color: #1a1a1a
}

@media (max-width: 29.99875em) {
  .button {
    min-height: 44px;
    padding: 0 20px;
    font-size: 13px
  }
}

.popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease
}

.popup_show .popup__content {
  transform: scale(1)
}

.popup_show {
  opacity: 1;
  visibility: visible
}

.popup__wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #0000008c;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.popup__content {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 48px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: scale(.96);
  transition: transform .3s ease
}

.popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, background-color .2s
}

.popup__close:hover {
  color: #153D40
}

.popup__header {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.popup__title h3 {
  font-size: 24px;
  color: #153D40
}

.popup__subtitle p {
  font-size: 14px;
  color: #888;
  letter-spacing: 0
}

.popup__form {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.popup__field input {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid #c9c9c9;
  background-color: transparent;
  font-size: 16px;
  line-height: 1.6;
  color: #153D40;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s ease
}

.popup__field input::placeholder {
  color: #a5a5a5
}

.popup__field input:focus {
  border-color: #153D40
}

.popup__field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #153D40;
  margin-bottom: 8px
}

.popup__submit {
  margin-top: 8px
}

.popup__submit .button {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700
}

@media (max-width: 47.99875em) {
  .popup__content {
    padding: 36px 24px 28px
  }

  .popup__close {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    font-size: 18px;
    color: #153D40;
    background-color: #f2f2f2;
    border-radius: 50%
  }
}

html.popup-show {
  overflow: hidden
}

.not-found {
  padding: 80px 0
}

.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center
}

.not-found__code {
  font-size: 120px;
  line-height: 1;
  font-family: Tenor Sans, sans-serif;
  color: #153D40
}

.not-found__text {
  max-width: 560px
}

.not-found__action {
  margin-top: 16px
}

@media (max-width: 47.99875em) {
  .not-found {
    padding: 48px 0
  }

  .not-found__code {
    font-size: 80px
  }
}

.breadcrumbs {
  padding: 16px 0
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #6b6b6b
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center
}

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

.breadcrumbs__item+.breadcrumbs__item:before {
  content: ">";
  margin: 0 8px
}

@media (max-width: 47.99875em) {
  .breadcrumbs__list {
    font-size: 12px
  }
}

.about {
  padding: var(--mokko-section-space) 0;
}

.about.dark-bg {
  background-color: #f7f7f7
}

.about__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px
}

.about__row.center {
  align-items: center
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 580px
}

.about__content.no-limit {
  max-width: 100%
}

.about__logo svg {
  width: 182px;
  height: 128px
}

.no-limit .about__text {
  font-size: 18px;
  letter-spacing: 0
}


.about__more {
  display: none;
  flex-direction: column;
  gap: 20px
}

.about__more_show {
  display: flex
}

.about__list {
  display: flex;
  flex-direction: column;
  gap: 21px;
  letter-spacing: 0;
  font-size: 16px;
  color: #0c2c2e;
  line-height: 1.7
}

.about__list-item {
  position: relative;
  padding-left: 24px
}

.about__list-item:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #153D40
}

.about__list-title {
  font-weight: 700;
  color: #1a1a1a
}

.about__note p {
  letter-spacing: 0;
  font-weight: 700;
  color: #0c2c2e;
  line-height: 1.65;
  font-size: 17px
}

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

.about__tag {
  padding: 7px 15px;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 5px;
  color: #0c2c2e;
  line-height: 1.28
}

.about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.about.about--brand {
  font-family: "Tenor Sans", sans-serif;
  color: #153D40
}

.about.about--brand .about__actions .button {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400
}

.about--brand .about__actions--mobile {
  display: none
}

.about__title h1 {
  font-family: "Tenor Sans", sans-serif;
  color: #153D40;
  line-height: 1.2;
  font-size: clamp(32px, 4vw, 58px);
  margin: 0 0 24px
}

.about__image img {
  max-height: 500px;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--mokko-radius)
}

@media (max-width: 61.99875em) {
  .about__row {
    gap: 24px
  }

  .about__content {
    max-width: 100%
  }
}

@media (max-width: 47.99875em) {
  .about {
    padding: var(--mokko-section-space) 0;
  }

  .about__row {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .about--brand .about__actions--desktop {
    display: none
  }

  .about--brand .about__actions--mobile {
    display: flex
  }
}

.about.reverse .about__image {
  order: 0
}

.about.reverse .about__content {
  order: 1;
  max-width: 100%
}

.about.reverse .about__title h2 {
  font-size: 40px;
  line-height: 1.3
}

@media (max-width: 61.99875em) {
  .about.reverse .about__title h2 {
    font-size: 32px
  }
}

@media (max-width: 47.99875em) {
  .about.reverse .about__image {
    order: 1
  }

  .about.reverse .about__content {
    order: 0
  }

  .about.reverse .about__title h2 {
    font-size: 24px
  }
}

@media (max-width: 29.99875em) {
  .about.reverse .about__title h2 {
    font-size: 28px
  }
}

.advantages {
  padding: var(--mokko-section-space) 0;
}

.advantages--no-pt {
  padding-top: 0
}

.advantages__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px
}

.advantages__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 260px;
  width: 100%;
  padding: 40px 49px;
  text-align: center;
  background-color: #fafafa;
  border-radius: 30px;
  color: #0c2c2e
}

.advantages__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.advantages__icon svg {
  width: 75px;
  height: 75px
}

@media (max-width: 61.99875em) {
  .advantages__list {
    justify-content: center
  }

  .advantages__item {
    max-width: calc(50% - 12px)
  }
}

@media (max-width: 47.99875em) {
  .advantages {
    padding: 48px 0
  }

  .advantages__item {
    max-width: 100%;
    padding: 32px 24px
  }
}

.services {
  padding: var(--mokko-section-space) 0;
}

.services__header {
  margin-bottom: 32px
}

.services__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px
}

.services__item {
  display: flex;
  flex-direction: column;
  border-radius: var(--mokko-radius);
  overflow: hidden;
  border: 1px solid var(--mokko-border-light);
  background-color: #fff;
  min-width: 0;
  box-shadow: 0 4px 24px rgba(21,61,64,.04)
}

.services__image img {
  width: 100%;
  aspect-ratio: 428/300;
  object-fit: cover;
  display: block;
  height: auto
}

.services__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  flex: 1;
  align-items: flex-start
}

.services__title h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
.services__action { margin-top: auto; }
.services__action .button { padding-inline: 16px; letter-spacing: 0; text-align: center; }

.services__text p {
  font-size: 15px;
  line-height: 1.65;
  color: #555
}

@media (max-width: 68.75em) {
  .services__list {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 47.99875em) {
  .services__title h3 { min-height: 0; }
  .services__list {
    grid-template-columns: 1fr
  }
}

.workflow {
  padding: var(--mokko-section-space) 0;
  background-color: #f7f7f7
}

.workflow.border-bottom {
  border-bottom: 1px solid #DCDCDC
}

.workflow.light-bg {
  background-color: transparent
}

.workflow__header {
  margin-bottom: 40px
}

.workflow__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 40px;
  column-gap: 60px;
  justify-content: center;
  align-items: start;
  max-width: 1140px;
  margin-inline: auto
}

.workflow__list-row {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px
}

.workflow__item-title p {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3
}

.workflow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 320px;
  margin: 0 auto;
  text-align: center
}

.workflow__num {
  display: flex;
  align-items: center;
  font-family: Tenor Sans, sans-serif;
  justify-content: center;
  width: 68px;
  height: 68px;
  aspect-ratio: 1;
  border: 1px solid #153D40;
  border-radius: 50%;
  background-color: #f5f5f5;
  font-size: 40px;
  color: #153D40;
  flex-shrink: 0
}

.workflow__text p {
  line-height: 1.7
}

/* Service processes: a compact, readable sequence instead of isolated circles. */
.workflow--service .workflow__list { grid-template-columns: repeat(var(--workflow-columns,3),minmax(0,1fr)); gap: 24px; align-items: stretch; }
.workflow--service .workflow__list[data-step-count="4"] { --workflow-columns: 2; }
.workflow--service .workflow__item { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; text-align: left; width: 100%; max-width: none; margin: 0; padding: 28px; background: var(--mokko-bg-soft); border: 1px solid rgba(165,139,100,.16); border-radius: 18px; box-shadow: 0 5px 22px rgba(21,61,64,.035); }
.workflow--service .workflow__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; aspect-ratio: 1; background: rgba(165,139,100,.12); border: 1px solid rgba(165,139,100,.24); border-radius: 50%; color: #75603D; font-size: 20px; line-height: 1; }
.workflow--service .workflow__text h3 { font-family: "Tenor Sans",sans-serif; font-size: 22px; line-height: 1.3; color: var(--mokko-teal); margin-bottom: 12px; }
.workflow--service .workflow__text p { font-size: 17px; line-height: 1.6; color: var(--mokko-teal); }
@media (max-width: 47.99875em) {
 .workflow--service .workflow__list { grid-template-columns: 1fr; gap: 16px; }
 .workflow--service .workflow__item { padding: 24px; gap: 16px; }
 .workflow--service .workflow__num { font-size: 20px; }
 .workflow--service .workflow__text p { font-size: 16px; }
}

.workflow__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  text-align: center
}

.workflow__note p {
  font-size: 18px;
  font-weight: 700;
  color: #0c2c2e;
  line-height: 1.65;
  letter-spacing: 0
}

@media (max-width: 61.99875em) {
  .workflow__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
    column-gap: 24px
  }

  .workflow__list-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .workflow__item {
    gap: 20px
  }

  .workflow__num {
    width: 60px;
    height: 60px;
    font-size: 32px
  }
}

@media (max-width: 47.99875em) {
  .workflow {
    padding: 48px 0
  }

  .workflow__header {
    margin-bottom: 28px
  }

  .workflow__list {
    grid-template-columns: 1fr;
    row-gap: 32px
  }

  .workflow__list-row {
    grid-template-columns: 1fr
  }

  .workflow__item {
    max-width: 100%
  }

  .workflow__num {
    width: 54px;
    height: 54px;
    font-size: 28px
  }

  .workflow__footer {
    margin-top: 32px;
    gap: 20px
  }

  .workflow__note p {
    font-size: 15px
  }
}

@media (max-width: 29.99875em) {
  .workflow__num {
    width: 48px;
    height: 48px;
    font-size: 24px
  }
}


/* Mortgage page rhythm and component variants. */
body.is-mortgage-page .main > section:not(.hero) > [class$="__container"] { max-width: 1160px; margin-inline: auto; padding-inline: 20px; }
body.is-mortgage-page .main { letter-spacing: 0; font-size: 17px; line-height: 1.6; }
body.is-mortgage-page .main h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.18; text-align: left; text-wrap: balance; }
body.is-mortgage-page .main > :is(.facts, .workflow, .about, .calculator, .offers, .mortgage-faq) { padding-block: clamp(72px, 8vw, 120px); }
body.is-mortgage-page .main .section__header { text-align: left; align-items: flex-start; margin-bottom: var(--mokko-section-gap); }
body.is-mortgage-page .main .section__subtitle { max-width: 640px; margin-top: 16px; font-size: 17px; line-height: 1.55; letter-spacing: 0; }
.mortgage-intro { background: var(--mokko-bg-soft); }
.mortgage-intro .facts__row { align-items: start; gap: clamp(28px, 5vw, 72px); }
.mortgage-intro .facts__text p { line-height: 1.6; }
.mortgage-intro .facts__list-wrap { padding: 0; }
.mortgage-intro .facts__item { padding-block: 18px; }
.mortgage-intro .facts__num { font-size: 24px; }
.mortgage-intro .facts__item-text p { font-size: 17px; line-height: 1.5; }
.workflow__item.mortgage-step { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 24px; padding-block: 26px; border-bottom: 1px solid var(--mokko-border-light); max-width: none; width: 100%; margin: 0; align-items: start; text-align: left; }
.mortgage-refinancing .about__row { align-items: center; gap: clamp(28px, 5vw, 72px); }
.mortgage-refinancing .about__image img { border-radius: var(--mokko-radius); aspect-ratio: 4 / 3; height: auto; }
.mortgage-refinancing .about__note { margin-top: 4px; padding-left: 20px; border-left: 2px solid var(--mokko-gold); }
.mortgage-refinancing .about__note p { font-weight: 400; font-size: 15px; }
body.is-mortgage-page .calculator { background: var(--mokko-bg-soft); }
body.is-mortgage-page .calculator__panel { background: #fff; gap: 28px; padding: clamp(22px, 3vw, 40px); }
body.is-mortgage-page .calculator__pair { gap: 28px; }
body.is-mortgage-page .calculator__head { flex-wrap: wrap; gap: 8px; }
body.is-mortgage-page .calculator__label :is(p, label) { font-size: 14px; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--mokko-teal); }
body.is-mortgage-page .calculator__aside { background: var(--mokko-teal); border-radius: var(--mokko-radius); padding: 32px 26px; gap: 24px; max-width: none; }
body.is-mortgage-page .calculator__result { padding: 0; background: transparent; }
body.is-mortgage-page .calculator__result-label p { text-transform: none; font-size: 14px; letter-spacing: 0; }
body.is-mortgage-page .calculator__result-note p { text-transform: none; font-size: 12px; letter-spacing: 0; }
body.is-mortgage-page .calculator__cta { padding: 24px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.2); border-radius: 0; background: transparent; }
body.is-mortgage-page .calculator__cta-title p { color: #fff; font-size: 15px; }
body.is-mortgage-page .calculator__cta-action .button { color: #fff; background: var(--mokko-accent); border-color: var(--mokko-accent); min-height: 48px; letter-spacing: 0; }
body.is-mortgage-page .mortgage-conditions { background: var(--mokko-bg-soft); color: var(--mokko-teal); }
body.is-mortgage-page .mortgage-conditions :is(h2, .about__list, .about__list-title, .about__note p) { color: var(--mokko-teal); }
.mortgage-conditions .about__list { gap: 12px; }
.mortgage-conditions .about__list-item { padding: 20px; border: 1px solid rgba(165,139,100,.18); background: #fff; border-radius: 12px; }
.mortgage-conditions .about__list-item:before { display: none; }
.mortgage-conditions .about__list-title { display: block; font-size: 16px; margin-bottom: 4px; }
.mortgage-conditions .about__image img { border-radius: var(--mokko-radius); aspect-ratio: 4 / 3; height: auto; }
.mortgage-conditions .about__note p { font-size: 14px; font-weight: 400; opacity: .8; }
.mortgage-consultant:not(.mortgage-consultant--text) .about__row { grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.mortgage-consultant--text .about__row { grid-template-columns: minmax(0, 1fr); }
.mortgage-consultant .about__image img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--mokko-radius); }
.mortgage-consultant .about__content h3 { font-family: "Tenor Sans", sans-serif; font-size: 28px; line-height: 1.2; color: var(--mokko-teal); }

.mortgage-consultant .about__text p + p { margin-top: 24px; }
.mortgage-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mortgage-card { background: #fff; border: 1px solid var(--mokko-border-light); border-radius: var(--mokko-radius); padding: clamp(20px, 2.4vw, 32px); min-width: 0; }
.mortgage-card h3 { font-family: "Tenor Sans", sans-serif; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: var(--mokko-teal); margin-bottom: 18px; }
.mortgage-card p { line-height: 1.6; }
.mortgage-card p + p { margin-top: 12px; }
.mortgage-card a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mortgage-card__date { font-size: 13px; color: var(--mokko-gold); }
.mortgage-card__result { padding-top: 16px; border-top: 1px solid var(--mokko-border-light); }
.mortgage-faq { padding: clamp(56px, 8vw, 100px) 0; background: var(--mokko-bg-soft); }
.mortgage-faq__container { max-width: 1160px; margin-inline: auto; padding-inline: 20px; }
.mortgage-faq__list { display: grid; gap: 12px; }
.mortgage-faq__item { background: #fff; border: 1px solid rgba(165,139,100,.18); border-radius: 14px; box-shadow: 0 3px 18px rgba(21,61,64,.03); }
.mortgage-faq__item summary { cursor: pointer; list-style: none; position: relative; padding: 23px 64px 23px 24px; color: var(--mokko-teal); font-weight: 600; font-size: 17px; line-height: 1.4; }
.mortgage-faq__item summary::-webkit-details-marker { display: none; }
.mortgage-faq__item summary:after { content: "+"; position: absolute; right: 24px; top: 20px; font-size: 26px; font-weight: 400; color: var(--mokko-gold); }
.mortgage-faq__item[open] summary:after { content: "−"; }
.mortgage-faq__item summary:focus-visible { outline: 2px solid var(--mokko-gold); outline-offset: 3px; }
.mortgage-faq__item p { padding: 0 24px 24px; line-height: 1.65; font-size: 16px; }
@media (max-width: 61.99875em) {
 .mortgage-consultant:not(.mortgage-consultant--text) .about__row { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 47.99875em) {
 .mortgage-cards { grid-template-columns: 1fr; }
 .mortgage-consultant:not(.mortgage-consultant--text) .about__row { grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 20px; }
 .mortgage-consultant:not(.mortgage-consultant--text) .about__content { display: contents; }
 .mortgage-consultant .about__image { grid-column: 1; grid-row: 1; }
 .mortgage-consultant:not(.mortgage-consultant--text) .about__content h3 { grid-column: 2; grid-row: 1; align-self: center; }
 .mortgage-consultant:not(.mortgage-consultant--text) .about__text { grid-column: 1 / -1; }
 .mortgage-consultant .about__content h3 { font-size: 22px; }
 .mortgage-consultant .about__text { font-size: 15px; line-height: 1.55; }
 .mortgage-refinancing .about__image img { max-height: 260px; }
 .mortgage-conditions .about__image img { max-height: 260px; }
}

.team {
  padding: var(--mokko-section-space) 0;
}

.team__header {
  margin-bottom: 40px
}

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

.team__item { flex: 0 0 auto; height: auto; width: calc((100% - 72px) / 4); padding: 0; }

.team__photo {
  width: 100%;
  border-radius: 50%;
  overflow: hidden
}

.team__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  height: auto;
  object-position: top;
  display: block
}

.team__item:nth-child(2) .team__photo img {
  object-position: center 30%
}

.team__info {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.team__name p {
  font-size: 16px;
  font-weight: 700;
  color: #153D40
}

.team__position p {
  font-size: 14px;
  color: #666
}

.team__contacts a {
  font-size: 14px;
  color: #153D40;
  text-decoration: none
}

@media (max-width: 61.99875em) {
}

@media (max-width: 29.99875em) {
}

.office {
  padding: 60px 0;
  background-color: #f7f7f7
}

.office__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px
}

.office__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px
}

.office__route a {
  color: #153D40;
  text-decoration: underline;
  font-size: 14px
}

.office__image {
  border-radius: 8px;
  overflow: hidden
}

.office__image img {
  width: 100%;
  height: auto;
  display: block
}

@media (max-width: 61.99875em) {
  .office__row {
    gap: 24px
  }
}

@media (max-width: 47.99875em) {
  .office {
    padding: 48px 0
  }

  .office__row {
    grid-template-columns: 1fr;
    gap: 24px
  }
}

.article {
  padding: 40px 0 80px
}

.article__hero {
  margin-bottom: 40px
}

.article__hero img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  height: auto;
  display: block;
  border-radius: var(--mokko-radius)
}

.article__inner {
  max-width: 800px;
  margin: 0 auto
}

.article__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px
}

.article__meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #153D40
}

.article__meta span:not(:first-child) {
  color: #666
}

.article__meta span:not(:first-child):before {
  content: "·";
  margin: 0 8px;
  color: #b0b0b0
}

.article__body {
  font-size: 18px;
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  gap: 20px
}

.article__body h2 {
  margin-top: 24px
}

.article__body ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 20px;
  list-style: disc
}

@media (max-width: 47.99875em) {
  .article {
    padding: 24px 0 48px
  }

  .article__hero {
    margin-bottom: 24px
  }

  .article__hero img {
    aspect-ratio: 16/9
  }

  .article__header {
    margin-bottom: 24px
  }

  .article__body h2 {
    margin-top: 16px
  }
}

.calculator {
  padding: var(--mokko-section-space) 0;
}

.calculator .section__title h1 { font-family: Tenor Sans, sans-serif; font-size: clamp(30px, 4vw, 52px); line-height: 1.17; color: var(--mokko-teal, #153D40); }

.calculator__row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
  max-width: 1100px;
  margin-inline: auto
}

.calculator__panel {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 48px;
  background-color: #fafafa;
  border-radius: 20px
}

.calculator__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px
}

.calculator__control {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.calculator__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px
}

.calculator__control-select {
  display: flex;
  align-items: center;
  flex: 1
}

.calculator__select {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 36px 0 16px;
  border: 1px solid #d7d7d7;
  border-radius: 6px;
  background-color: #fff;
  color: #0e1b1b;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23478a84'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px
}

.mokko-select { position: relative; width: 100%; min-width: 0; letter-spacing: 0; }
.mokko-select__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mokko-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid #bdcbca; border-radius: var(--mokko-field-radius); background: #fff; color: var(--mokko-teal); font-family: "Source Sans 3", sans-serif; font-size: 15px; line-height: 1.35; text-align: left; cursor: pointer; }
.mokko-select__trigger svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .15s ease; }
.mokko-select__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.mokko-select__trigger:focus-visible { outline: 2px solid var(--mokko-gold); outline-offset: 3px; }
.mokko-select__trigger:disabled { opacity: .5; cursor: default; }
.mokko-select__list { position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; width: 100%; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid #bdcbca; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(21,61,64,.12); }
.mokko-select__list[hidden] { display: none; }
.mokko-select__option { display: block; width: 100%; padding: 12px; border: 0; border-radius: 8px; background: transparent; font-family: "Source Sans 3", sans-serif; font-size: 15px; line-height: 1.4; text-align: left; color: var(--mokko-teal); cursor: pointer; }
.mokko-select__option:hover, .mokko-select__option:focus-visible { background: var(--mokko-bg-soft); outline: 1px solid var(--mokko-gold); }
.mokko-select__option[aria-selected="true"] { background: var(--mokko-teal); color: #fff; }
.mokko-select__option:disabled { opacity: .5; cursor: default; }

.calculator__select:focus-visible {
  outline: none;
  border-color: #4a8a8a
}

.calculator__footnote {
  margin-top: -4px
}

.calculator__footnote p {
  font-size: 13px;
  font-style: normal;
  color: #526566;
  letter-spacing: 0
}

.calculator__label p,
.calculator__label label {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b6b6b
}

.calculator__value p {
  font-family: Tenor Sans, sans-serif;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #0c2c2e;
  white-space: nowrap
}

.calculator__value_accent p {
  color: #153D40
}

.calculator__slider {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 4px;
  background-color: #dcdcdc;
  background-image: linear-gradient(#153D40, #153D40);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  cursor: pointer
}

.calculator__slider:focus-visible { outline: 2px solid var(--mokko-gold, #A58B64); outline-offset: 5px; }

.calculator__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid #153D40;
  box-shadow: 0 2px 8px #0000002e;
  cursor: pointer
}

.calculator__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  border: 4px solid #153D40;
  box-shadow: 0 2px 8px #0000002e;
  cursor: pointer
}

.calculator__aside {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.calculator__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 32px;
  background-color: #0c2c2e;
  border-radius: 20px;
  text-align: center
}

.calculator__result-label p {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff
}

.calculator__result-value p {
  font-family: Tenor Sans, sans-serif;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: 0;
  color: #fff
}

.calculator__result-value p span {
  font-size: 22px;
  color: #A58B64
}

.calculator__result-note p {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #DFD0B8
}

.calculator__result-divider {
  width: 100%;
  height: 1px;
  margin: 16px 0;
  background-color: #ffffff1f
}

.calculator__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%
}

.calculator__summary-label p {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff
}

.calculator__summary-value p {
  font-family: Tenor Sans, sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  color: #fff
}

.calculator__cta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  text-align: center
}

.calculator__cta-title p {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: #153D40
}

.calculator__cta-action .button {
  width: 100%;
  padding: 16px;
  font-size: 15px;
  font-weight: 700
}

@media (max-width: 61.99875em) {
  .calculator__row {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .calculator__aside {
    max-width: 480px;
    width: 100%
  }
}

@media (max-width: 47.99875em) {
  .calculator {
    padding: var(--mokko-section-space) 0;
  }

  .calculator__panel {
    padding: 28px 20px;
    gap: 28px
  }

  .calculator__pair {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .calculator__result-value p {
    font-size: 44px
  }
}

/* Shared media hero; only the home video needs a full viewport. */
.hero { position: relative; margin: 0; overflow: hidden; color: #fff; }
.hero__container { position: relative; z-index: 2; width: 100%; max-width: none; min-height: clamp(560px, 76svh, 760px); display: flex; align-items: center; padding: 88px max(24px,calc((100vw - 1120px) / 2)); margin: 0 auto; }
.hero__image { position: absolute; inset: 0; overflow: hidden; }
.hero__image :is(img,video) { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.hero__image:after { content: ""; position: absolute; inset: 0; background: rgba(5,22,23,.38); pointer-events: none; }
.hero__content { position: relative; width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 0; text-align: left; color: #fff; letter-spacing: 0; text-wrap: balance; }
.hero__title { margin: 0; }
.hero__title h1 { font-size: clamp(40px,4.5vw,64px); font-weight: 400; line-height: 1.12; text-align: left; color: #fff; margin: 0; }
.hero__title-accent { color: var(--mokko-gold); }
.hero__subtitle { display: block; max-width: 640px; font-size: clamp(17px,1.4vw,20px); line-height: 1.6; color: #fff; margin: 0; }
.hero__subtitle p + p { margin-top: 16px; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 16px; width: auto; }
.hero__actions .button { min-height: 52px; padding: 14px 28px; font-size: 16px; font-weight: 600; letter-spacing: 0; box-shadow: none; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
.hero__meta-item { padding-left: 14px; border-left: 2px solid var(--mokko-gold); font-size: 14px; line-height: 1.5; color: #fff; }
.hero--home .hero__container { min-height: 100svh; }
.hero--home .hero__content { max-width: 900px; }
.hero--home .hero__subtitle { display: flex; align-items: center; gap: 16px; }
.hero--home .hero__video { object-position: 50% 25%; }
.hero--home .hero__title h1 { font-size: clamp(36px,4.2vw,60px); }
.mortgage-hero__details { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; margin: 0; font-size: 14px; line-height: 1.5; }
.mortgage-hero__details li { padding-left: 14px; border-left: 2px solid var(--mokko-gold); }
@media (max-width: 47.99875em) {
 .hero__container { min-height: 0; padding: 80px 20px; }
 .hero--home .hero__container { min-height: 100svh; padding-block: 112px; }
 .hero__content { gap: 24px; }
 .hero__title h1 { font-size: clamp(34px,8.8vw,44px); }
 .hero__subtitle { font-size: 17px; }
 .hero__actions { gap: 12px; }
 .hero__actions .button { font-size: 15px; padding-inline: 24px; }
 .hero--home .hero__title h1 { font-size: clamp(28px,7.3vw,38px); }
 .hero--home .hero__subtitle { gap: 12px; }
 .hero--home .hero__subtitle-left img { height: 28px; width: auto; }
 .hero--home .hero__star { height: 12px; width: 12px; }
 .hero--home .hero__subtitle-right p { font-size: 12px; line-height: 1.4; }
 .hero--home .hero__video { object-position: center; }
 .hero__meta, .mortgage-hero__details { flex-direction: column; }
}

.hero-catalog {
  padding-block: clamp(40px,5vw,72px);
  background-color: #f7f7f7
}

.hero-catalog__header {
  margin-bottom: 32px;
  max-width: 820px
}

.hero-catalog__title {
  margin-bottom: 20px;
  color: #153D40;
  font-family: Tenor Sans, sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0
}

.hero-catalog__subtitle {
  margin: 0;
  font-size: 18px;
  line-height: 1.68;
  letter-spacing: 0
}

@media (max-width: 61.99875em) {
  .hero-catalog {
    min-height: 0;
    margin-bottom: 40px;
    padding: 48px 0
  }

  .hero-catalog__title {
    font-size: 38px
  }
}

@media (max-width: 47.99875em) {
  .hero-catalog {
    padding: 40px 0
  }

  .hero-catalog__header {
    margin-bottom: 22px
  }

  .hero-catalog__title {
    font-size: 31px
  }

  .hero-catalog__subtitle {
    font-size: 14px;
    line-height: 1.5
  }
}

.catalog-filter__fields {
  display: flex;
  gap: 37px;
  align-items: end;
  width: 100%
}

.catalog-filter__field {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 10px
}

.catalog-filter__label {
  color: #505050;
  font-size: 13px;
  line-height: 1.23;
  letter-spacing: 0
}

.catalog-filter__control {
  position: relative;
  display: flex;
  align-items: center
}

.catalog-filter__control:has(> select):after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  color: #153D40;
  font-size: 10px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none
}

.catalog-filter__input {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 41px;
  padding: 0 32px 0 12px;
  border: 1px solid #d7d7d7;
  border-radius: 1px;
  background-color: #fff;
  color: #505050;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0
}

.catalog-filter__input::placeholder {
  color: #9c9c9c;
  opacity: 1
}

.catalog-filter__input::-webkit-calendar-picker-indicator {
  display: none !important
}

.catalog-filter__action {
  flex: 0 0 143px
}

.catalog-filter__action .button {
  width: 143px;
  height: 41px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0
}

@media (max-width: 1240px) {
  .catalog-filter__fields {
    flex-wrap: wrap;
    gap: 20px
  }

  .catalog-filter__field,
  .catalog-filter__action {
    flex: 1 1 calc((100% - 40px) / 3)
  }

  .catalog-filter__action .button {
    width: 100%
  }
}

@media (max-width: 61.99875em) {
  .catalog-filter__fields {
    gap: 16px
  }

  .catalog-filter__field,
  .catalog-filter__action {
    flex-basis: calc((100% - 16px)/2)
  }

  .catalog-filter__action .button {
    width: 100%
  }
}

.catalog-filter__trigger {
  display: none
}

@media (max-width: 47.99875em) {
  .catalog-filter__fields {
    gap: 10px
  }

  .catalog-filter__field,
  .catalog-filter__action {
    flex-basis: 100%
  }

  .catalog-filter:not(.catalog-filter--popup) {
    display: none
  }

  .catalog-filter__trigger {
    display: flex;
    width: 100%
  }
}

.offers {
  padding: var(--mokko-section-space) 0;
}

.offers__header {
  margin-bottom: 32px
}

.offers__header h2 {
  font-size: 40px
}

.offers__slider {
  overflow: visible
}

.offers__slide { height: auto; width: calc((100% - 3.2px) / 1.2); }
@media (min-width: 480px) { .offers__slider .offers__slide { width: calc((100% - 20px) / 2); } }
@media (min-width: 768px) { .offers__slider .offers__slide { width: calc((100% - 40px) / 3); } }
@media (min-width: 992px) { .offers__slider .offers__slide { width: calc((100% - 52px) / 3.6); } }

.offers__item { padding: 12px; display: flex; gap: 0; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid rgba(21,61,64,.07); border-radius: 16px; box-shadow: 0 4px 20px rgba(21,61,64,.08); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }

a.offers__item:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(21,61,64,.12); }

.offers__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; height: auto; display: block; border-radius: 10px; }

.offers__body { display: flex; flex-direction: column; flex: 1; gap: 7px; padding: 14px 4px 4px; min-width: 0; letter-spacing: 0; }
.offers__title h3 { color: var(--mokko-teal); font-size: 17px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.offers__details { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #526566; }
.offers__type { color: #526566; font-size: 11px; letter-spacing: .04em; }

.offers__location { margin-top: 0; }

.offers__location p {
  font-size: 13px;
  color: #666;
  line-height: 1.23
}

.offers__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px
}

.offers__price p { font-size: 22px; font-weight: 600; line-height: 1.25; margin-top: auto; color: #153D40; }

.offers__area {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9.5px 10px;
  background-color: #f7f7f7;
  border-radius: 5px;
  font-size: 13px;
  color: #666;
  line-height: 1.23;
  letter-spacing: .048em
}

.offers__area-label {
  font-size: 10px
}

.offers__action {
  margin-top: 8px
}

.offers__action .button {
  width: 100%
}

.offers__more {
  display: flex;
  justify-content: center;
  margin-top: 40px
}

.section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A58B64
}


.offers__image {
  position: relative
}

.offers__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 14px;
  background-color: var(--mokko-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--mokko-control-radius)
}

.offers__meta {
  font-size: 12px;
  letter-spacing: .04em;
  color: #526566
}

.offers__district {
  margin-top: 8px;
  font-size: 16px;
  color: #153D40
}

.offers__city {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #526566
}

.offers__price-per {
  font-size: 13px;
  color: #526566
}

@media (max-width: 61.99875em) {
  .offers__header {
    margin-bottom: 24px
  }

  .offers__header h2 {
    font-size: 30px
  }

  .offers__price p {
    font-size: 22px
  }

  .offers__info {
    flex-wrap: wrap
  }
}

@media (max-width: 47.99875em) {
  .offers {
    padding: var(--mokko-section-space) 0;
  }

  .offers__header h2 {
    font-size: 24px
  }

  .offers__item {
    padding: 16px;
    gap: 16px
  }

  .offers__price p {
    font-size: 20px
  }

  .offers__more {
    margin-top: 24px
  }
}

@media (max-width: 29.99875em) {
  .offers__header h2 {
    font-size: 20px
  }

  .offers__price p {
    font-size: 18px
  }
}

.catalog {
  padding: var(--mokko-section-space) 0
}

.catalog__header {
  align-items: flex-start;
  text-align: left;
  margin-bottom: 32px;
  gap: 10px
}

.catalog__header .section__subtitle {
  font-size: 18px;
  color: #153D40
}

@media (max-width: 61.99875em) {
  .catalog__header .section__subtitle {
    font-size: 16px
  }
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

.catalog__grid .offers__slide { min-width: 0; width: auto; }
.catalog__grid .offers__item { height: 100%; }

.catalog__empty { padding: clamp(28px,4vw,48px); border: 1px solid var(--mokko-border-light); border-radius: var(--mokko-radius); background: var(--mokko-bg-soft); color: var(--mokko-teal); text-align: center; }

.catalog__cta {
  margin-top: 40px;
  display: flex;
  justify-content: center
}

.catalog__cta .button {
  min-width: 220px;
  font-weight: 700
}

.catalog__pagination {
  margin-top: 40px
}

.catalog__pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0
}

.catalog__pagination a.page-numbers,
.catalog__pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  color: #153D40;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease
}

.catalog__pagination a.page-numbers:hover {
  border-color: #153D40;
  background-color: #f5f5f5
}

.catalog__pagination span.page-numbers.current {
  background-color: #153D40;
  border-color: #153D40;
  color: #fff
}

.catalog__pagination span.page-numbers.dots {
  border-color: transparent;
  color: #a5a5a5
}

@media (max-width: 47.99875em) {
  .catalog__pagination {
    margin-top: 28px
  }

  .catalog__pagination a.page-numbers,
  .catalog__pagination span.page-numbers {
    min-width: 34px;
    height: 34px;
    font-size: 13px
  }
}

@media (max-width: 61.99875em) {
  .catalog {
    padding: 32px 0 60px
  }

  .catalog__header {
    margin-bottom: 28px
  }

  .catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }

  .catalog__cta {
    margin-top: 28px
  }
}

@media (max-width: 47.99875em) {
  .catalog {
    padding: 48px 0 64px
  }

  .catalog__grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .catalog__cta .button {
    width: 100%;
    min-width: 0
  }
}

.contacts {
  padding: 32px 0 80px;
  flex: 1 0 auto
}

.contacts__title {
  margin-bottom: 48px;
  max-width: 760px
}

.contacts__title p {
  margin-top: 16px;
  line-height: 1.6;
  color: #153D40
}

.contacts__row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: center
}

.contacts__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0c2c2e
}

.contacts__col--primary { padding: clamp(24px,3vw,40px); background: var(--mokko-teal); border-radius: var(--mokko-radius); color: #fff; gap: 24px; }
.contacts__col--primary .contacts__phone a { font-family: "Tenor Sans",sans-serif; font-weight: 400; font-size: clamp(24px,2.4vw,34px); color: #fff; letter-spacing: 0; }
.contacts__col--details { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid var(--mokko-border-light); }
.contacts__col--details .contacts__details { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.contacts__heading p {
  font-size: 14px;
  font-weight: 700
}

.contacts__phone a {
  text-decoration: none;
  font-weight: 700;
  font-size: 18px
}

.contacts__schedule p {
  font-size: 14px
}

.contacts__email a {
  text-decoration: none;
  font-size: 14px
}

.contacts__address p {
  font-size: 14px;
  line-height: 1.5
}

.contacts__route a {
  color: #153D40;
  text-decoration: underline;
  font-size: 14px
}

.contacts__details p {
  font-size: 14px;
  line-height: 1.5
}

.contacts__socials-block {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 48px
}

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

.contacts__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: opacity .2s ease
}

.contacts__social:hover {
  opacity: .8
}

.contacts__social img {
  width: 100%;
  height: 100%
}

@media (max-width: 61.99875em) {
  .contacts__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
  }
}

@media (max-width: 47.99875em) {
  .contacts {
    padding: var(--mokko-section-space) 0
  }

  .contacts__row {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .contacts__socials-block {
    max-width: 100%
  }
}

.facts {
  padding: var(--mokko-section-space) 0;
  background-color: #f7f7f7
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: var(--mokko-section-gap);
  align-items: start
}

.facts__info {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.facts__text p {
  line-height: 1.7;
  letter-spacing: 0
}

.facts__list-wrap {
  display: flex;
  flex-direction: column
}

.facts__list-title {
  padding-bottom: 25px
}

.facts__list-title h4 {
  font-size: 18px;
  font-weight: 700;
  color: #0c2c2e;
  line-height: 1.65;
  font-family: "Source Sans 3", sans-serif
}

.facts__list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.facts__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 1px solid rgba(165,139,100,.18);
  background: #fff;
  border-radius: var(--mokko-radius-sm)
}


.facts__num {
  font-family: Tenor Sans, sans-serif;
  color: #75603D;
  line-height: 1.16;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #F3F0EA;
  font-size: 20px
}

.facts__item-text p {
  line-height: 1.7;
  letter-spacing: 0;
  font-size: 17px
}

@media (max-width: 61.99875em) {
  .facts {
    padding: var(--mokko-section-space) 0;
  }

  .facts__row {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .facts__title h2 {
    font-size: 30px
  }

  .facts__text {
    max-width: 100%
  }
}

@media (max-width: 47.99875em) {
  .facts {
    padding: var(--mokko-section-space) 0;
  }

  .facts__title h2 {
    font-size: 24px
  }

  .facts__list-title {
    padding-bottom: 16px
  }

  .facts__list-title h4 {
    font-size: 16px
  }

  .facts__item {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 16px;
    padding: 20px
  }

  .facts__num {
    font-size: 20px
  }

  .facts__item-text p {
    font-size: 16px
  }
}

@media (max-width: 29.99875em) {
  .facts__title h2 {
    font-size: 28px
  }
}

.form {
  padding: var(--mokko-section-space) 0;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: stretch
}

.form__info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 40px 30px;
  color: #fff;
  border-radius: 12px;
  aspect-ratio: 675/560;
  overflow: hidden
}

.form__info:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #153D40e6
}

.form__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.form__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.form__promo,
.form__filters {
  position: relative;
  z-index: 1
}

.form__promo {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.form__promo-title h2 {
  font-size: 36px;
  font-weight: 400;
  line-height: 1.25;
  color: #fff
}

.form__promo-text p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: #fff
}

.form__filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  align-items: end
}

.form__filter,
.form__filter-label,
.form__filters>div:first-child {
  min-width: 0
}

.form__filter-label p {
  font-size: 13px;
  color: #ffffffbf
}

.form__filter select,
.form__filter input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  font-size: 13px;
  background-color: #ffffff14;
  color: #fff;
  outline: none;
  box-sizing: border-box
}

.form__filter select::placeholder,
.form__filter input::placeholder {
  color: #ffffffbf
}

.form__filter select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.65)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 8px;
  padding-right: 28px;
  cursor: pointer
}

.form__filter select option {
  background-color: #153D40;
  color: #fff
}

.form__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px
}

.form__heading h3 {
  font-size: 24px;
  font-weight: 400;
  color: #153D40
}

.form__fields {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.wpcf7-form > .form__field { margin-bottom: 20px; }
.form__field label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.4; color: var(--mokko-teal); letter-spacing: 0; }

.form__field input {
  width: 100%;
  font-size: 16px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  line-height: 1.27
}

.form__field input::placeholder {
  color: #b0b0b0
}

.form__field-phone {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  overflow: hidden
}

.form__field-phone input {
  border: none;
  border-radius: 0;
  flex: 1;
  width: auto;
  padding-left: 12px
}

.form__phone-code {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-right: 1px solid rgba(0, 0, 0, .15);
  color: #153D40;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0
}

.form__submit {
  margin-top: 12px
}

.form__submit .button {
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  padding: 16px
}

.form__field-label {
  font-size: 14px;
  font-weight: 700;
  color: #153D40;
  margin-bottom: 4px
}

.form--focused .form__row { display: block; max-width: 720px; margin-inline: auto; }
.form--focused .form__body { width: 100%; padding: 0; gap: 0; }
.form--focused .form__heading { margin-bottom: 28px; }
.form--focused .form__heading p { margin-top: 18px; font-size: 17px; line-height: 1.6; }
.form--focused :is(.wpcf7-submit, .form__submit input[type="submit"]) { width: 100%; min-height: 50px; background: var(--mokko-teal); border-color: var(--mokko-teal); color: #fff; font-size: 15px; letter-spacing: 0; }

/* Topic selector: one component for inline and popup CF7 forms, including wpautop wrappers. */
:is(.form__topic, .popup__topic) { display: block; width: 100%; min-width: 0; margin-bottom: 24px; }
:is(.form__topic, .popup__topic) > p { width: 100%; margin: 0; }
:is(.form__topic, .popup__topic) > label,
:is(.form__topic, .popup__topic) > p > label { display: block; width: 100%; margin-bottom: 12px; font-size: 14px; line-height: 1.4; letter-spacing: 0; }
:is(.form__topic, .popup__topic) .wpcf7-form-control-wrap { display: block; min-width: 0; width: 100%; }
:is(.form__topic, .popup__topic) .wpcf7-radio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
:is(.form__topic, .popup__topic) .wpcf7-list-item { margin: 0; min-width: 0; }
:is(.form__topic, .popup__topic) .wpcf7-list-item label { display: flex; width: 100%; min-width: 0; cursor: pointer; }
:is(.form__topic, .popup__topic) input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
:is(.form__topic, .popup__topic) .wpcf7-list-item-label { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 8px 4px; border: 1px solid var(--mokko-teal); border-radius: var(--mokko-control-radius); color: var(--mokko-teal); font-size: 13px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
:is(.form__topic, .popup__topic) input[type="radio"]:checked + .wpcf7-list-item-label { background: var(--mokko-teal); color: #fff; }
:is(.form__topic, .popup__topic) input[type="radio"]:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--mokko-gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
 :is(.form__topic, .popup__topic) input[type="radio"]:not(:checked) + .wpcf7-list-item-label:hover { border-color: var(--mokko-gold); }
}

.form__checkbox p {
  margin: 0
}

.form__checkbox .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0
}

.form__checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  padding: 0;
  border: 1px solid #153D40;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease, border-color .2s ease
}

.form__checkbox input[type="checkbox"]:checked {
  background-color: #153D40;
  border-color: #153D40
}

.form__checkbox input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.form__checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid #A58B64;
  outline-offset: 2px
}

.form__checkbox .wpcf7-list-item-label {
  color: #153D40;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  padding-top: 1px
}

.form__consent {
  font-size: 12px;
  color: #153D40;
  line-height: 1.5
}

.form__consent a {
  text-decoration: underline
}

@media (max-width: 61.99875em) {
  .form__row {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .form__info {
    aspect-ratio: auto;
    min-height: 0
  }

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

  .form__filters>div:first-child {
    display: none
  }

  .form__filter-label {
    grid-column: 1/-1
  }

  .form__filters>:nth-child(4) {
    order: 1
  }

  .form__filters>:nth-child(7) {
    order: 2
  }

  .form__filters>:nth-child(8) {
    order: 3
  }

  .form__filters>:nth-child(2) {
    order: 4
  }

  .form__filters>:nth-child(5) {
    order: 5
  }

  .form__filters>:nth-child(3) {
    order: 6
  }

  .form__filters>:nth-child(6) {
    order: 7
  }

  .form__filters>:nth-child(9) {
    order: 8
  }

  .form__promo-title h2 {
    font-size: 28px
  }
}

@media (max-width: 47.99875em) {
  .form {
    padding: 48px 0
  }

  .form__info {
    padding: 32px 24px;
    gap: 28px
  }

  .form__filters {
    grid-template-columns: 1fr;
    gap: 10px
  }

  .form__body {
    padding: 0
  }

  .form__filter select,
  .form__filter input {
    padding: 12px 14px;
    font-size: 14px
  }


}

@media (max-width: 29.99875em) {
 :is(.form__topic, .popup__topic) .wpcf7-radio { gap: 4px; }
 :is(.form__topic, .popup__topic) .wpcf7-list-item-label { padding: 6px 2px; font-size: clamp(10px, 2.8vw, 12px); }
 .form__topic .wpcf7-list-item-label { font-size: 12px; }
}

.rent {
  padding: var(--mokko-section-space) 0;
  background-color: #f7f7f7
}

.rent__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center
}

.rent__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px
}

.rent__content {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.rent__heading h3 {
  color: #1a1a1a
}

.rent__text p {
  font-size: 14px
}

.rent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.rent.reverse .rent__image {
  order: 2
}

.rent.reverse .rent__content {
  order: 1
}

@media (max-width: 61.99875em) {
  .rent__row {
    gap: 24px
  }
}

@media (max-width: 47.99875em) {
  .rent {
    padding: 48px 0
  }

  .rent__row {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .rent.reverse .rent__image,
  .rent.reverse .rent__content {
    order: 0
  }
}

.news {
  padding: var(--mokko-section-space) 0;
}

.news__slider {
  overflow: visible
}

.news__slide {
  height: auto
}

.news__header {
  margin-bottom: 32px
}

.news__item { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 16px; border: 1px solid rgba(21,61,64,.07); box-shadow: 0 4px 20px rgba(21,61,64,.08); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }

a.news__item:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(21,61,64,.12); }

.news__image img {
  width: 100%;
  aspect-ratio: 428/300;
  object-fit: cover;
  height: auto;
  display: block
}

.news__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  flex: 1
}

.news__title h3 { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }

.news__title {
  max-width: 314px
}

.news__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #153D40;
  margin-top: 5px
}

.news__meta-info {
  display: flex;
  align-items: center
}

.news__link {
  display: inline-flex;
  align-items: center;
  margin-left: auto
}

.news__meta-info span:not(:first-child) {
  color: #666
}

.news__meta-info span:not(:first-child):before {
  content: "·";
  margin: 0 8px;
  color: #b0b0b0
}

.news__more {
  display: flex;
  justify-content: center;
  margin-top: 48px
}

.news__more .button {
  padding: 13px 47px;
  line-height: 1.71
}

@media (max-width: 47.99875em) {
  .news__title {
    max-width: 100%
  }
}

.media {
  padding: 48px 0;
  background-color: #f7f7f7
}

.media__header {
  margin-bottom: 32px
}

.media__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px
}

.media__item img {
  height: 60px;
  width: auto;
  display: block
}

@media (max-width: 47.99875em) {
  .media__list {
    gap: 24px
  }

  .media__item img {
    height: 44px
  }
}

@media (max-width: 29.99875em) {
  .media__list {
    gap: 16px
  }

  .media__item img {
    height: 36px
  }
}

.pages-index {
  padding: 56px 0 80px
}

.pages-index__title {
  margin-bottom: 32px
}

.pages-index__list ul {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.pages-index__item {
  display: flex;
  align-items: baseline;
  gap: 16px
}

@media (max-width: 47.99875em) {
  .pages-index {
    padding: 32px 0 48px
  }

  .pages-index__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
  }
}

.testimonial {
  background-color: #f5f5f5
}

.testimonial__row {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-top: 70px;
  justify-content: center
}

.testimonial__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 700px
}

.testimonial__text p {
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a
}

.testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.testimonial__name p {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a
}

.testimonial__role p {
  font-size: 13px;
  color: #6b6b6b
}

.testimonial__photo {
  max-width: 290px;
  flex-shrink: 0
}

.testimonial__photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top;
  display: block
}

@media (max-width: 61.99875em) {
  .testimonial__row {
    gap: 32px
  }

  .testimonial__photo {
    max-width: 220px
  }
}

@media (max-width: 47.99875em) {
  .testimonial__row {
    flex-direction: column;
    padding: 40px 0;
    gap: 24px
  }

  .testimonial__photo {
    max-width: 200px
  }

  .testimonial__content {
    padding: 0
  }
}

.listing-hero {
  padding: clamp(32px,4vw,56px) 0 40px
}

.listing-hero__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  margin-bottom: 36px
}

.listing-hero__info {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.listing-hero__title h1 {
  font-size: clamp(28px,3.5vw,44px);
  line-height: 1.15;
  color: #0c2c2e
}

.listing-hero__meta {
  display: flex;
  flex-wrap: wrap;
  color: #505050;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.27
}

.listing-hero__meta-item+.listing-hero__meta-item:before {
  content: "·";
  margin: 0 8px
}

.listing-hero__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right
}

.listing-hero__price-main p {
  font-family: Tenor Sans, sans-serif;
  font-size: 32px;
  color: #0c2c2e;
  line-height: 1.2;
  letter-spacing: 0
}

.listing-hero__price-per p {
  font-size: 14px;
  color: #505050;
  letter-spacing: 0;
  line-height: 1.27
}

.listing-hero__gallery {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.listing-hero__main {
  position: relative;
  border-radius: 12px;
  overflow: hidden
}

.listing-hero__main .swiper {
  width: 100%
}

.listing-hero__main .swiper-slide img {
  width: 100%;
  height: clamp(280px, 66svh, 720px);
  object-fit: contain;
  background: #f2f3f1;
  display: block
}

.listing-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: #153d40d9;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: opacity .2s
}

.listing-hero__nav:hover {
  opacity: .7
}

.listing-hero__nav.swiper-button-disabled {
  opacity: .35;
  cursor: default
}

.listing-hero__nav-prev {
  left: 20px
}

.listing-hero__nav-next {
  right: 20px
}

.listing-hero__thumbs-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto
}

.listing-hero__thumbs {
  flex: 1;
  min-width: 0
}

.listing-hero__thumb {
  width: 80px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s
}

.listing-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block
}

.listing-hero__thumb:focus-visible { outline: 2px solid var(--mokko-gold); outline-offset: -2px; border-radius: 10px; }

.listing-hero__thumb.swiper-slide-thumb-active {
  opacity: 1
}

.listing-hero__thumbs-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: #153D40;
  cursor: pointer;
  transition: opacity .2s;
  flex-shrink: 0
}

.listing-hero__thumbs-arrow:hover {
  opacity: .6
}

.listing-hero__thumbs-arrow.swiper-button-disabled {
  opacity: .35;
  cursor: default
}

.listing-hero__thumbs-arrow svg {
  width: 16px;
  height: 16px
}

@media (max-width: 61.99875em) {
  .listing-hero {
    padding: 20px 0 32px
  }

  .listing-hero__header {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px
  }

  .listing-hero__price {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    text-align: left
  }

  .listing-hero__title h1 {
    font-size: 28px
  }

  .listing-hero__price-main p {
    font-size: 24px
  }

  .listing-hero__gallery {
    gap: 20px
  }

  .listing-hero__main .swiper-slide img {
    height: clamp(280px, 60svh, 640px)
  }

  .listing-hero__nav {
    width: 36px;
    height: 36px
  }
}

@media (max-width: 47.99875em) {
  .listing-hero {
    padding: 16px 0 32px
  }

  .listing-hero__title h1 {
    font-size: 22px
  }

  .listing-hero__price-main p {
    font-size: 20px
  }

  .listing-hero__price-per p {
    font-size: 12px
  }

  .listing-hero__main {
    border-radius: 8px
  }

  .listing-hero__main .swiper-slide img {
    height: clamp(260px, 55svh, 480px)
  }

  .listing-hero__nav {
    width: 32px;
    height: 32px
  }

  .listing-hero__nav-prev {
    left: 8px
  }

  .listing-hero__nav-next {
    right: 8px
  }

  .listing-hero__thumb img {
    border-radius: 8px
  }

  .listing-hero__thumbs-wrap {
    gap: 0;
    max-width: 100%
  }

  .listing-hero__thumbs-arrow {
    display: none
  }
}

.stats {
  padding: 36px 0;
  background-color: #153D40
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(130px,100%),1fr));
  gap: 24px
}
.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center
}

.stats__num p {
  font-family: Tenor Sans, sans-serif;
  font-size: 44px;
  line-height: 1.1;
  color: #fff
}

.stats__label p {
  font-size: 13px;
  color: #E1E8E7;
  line-height: 1.4
}

@media (max-width: 61.99875em) {
  .stats__num p {
    font-size: 36px
  }
}

@media (max-width: 47.99875em) {
  .stats {
    padding: 28px 0
  }

  .stats__list {
    gap: 20px
  }
.stats__num p {
    font-size: 30px
  }
}

.listing-about {
  padding: var(--mokko-section-space) 0
}

.listing-about__container {
  max-width: 1160px
}

.listing-about__row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,380px);
  gap: 48px;
  align-items: start
}

.listing-about__content {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.listing-about__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 66ch;
  letter-spacing: 0;
  line-height: 1.7;
  font-size: 16px;
  overflow-wrap: anywhere
}
.listing-about__text ul, .listing-about__text ol { padding-left: 1.4em; }
.listing-about__text li + li { margin-top: 6px; }
.listing-about__text.is-collapsed { max-height: 360px; overflow: hidden; mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
.listing-about__read-more {
  align-self: flex-start;
  padding: 10px 0;
  color: var(--mokko-teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.listing-about__read-more[hidden] { display: none; }
/* The enquiry uses the shared CF7 component, with denser spacing in the sidebar. */
.listing-about__form-card .wpcf7-form { gap: 14px; }
.listing-about__form-card .form__field input { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
.listing-about__form-card .form__field label { font-size: 14px; }
.listing-about__form-card .form__topic { margin-top: 0; }


.listing-about__plan {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.listing-about__plan-title h3 {
  font-size: 22px;
  color: #0c2c2e
}

.listing-about__plan-list {
  display: flex;
  flex-direction: column;
  list-style: none
}

.listing-about__plan-item {
  position: relative;
  padding: 10px 18px;
  font-weight: 700;
  color: #0c2c2e;
  line-height: 1.7;
  font-size: 16px
}

.listing-about__plan-item:before {
  content: "";
  position: absolute;
  left: 0%;
  transform: translateY(-50%);
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #153D40
}

.listing-about__aside {
  position: sticky;
  top: var(--listing-sticky-top, 128px);
  display: flex;
  flex-direction: column;
  gap: 0
}

.listing-about__price-card {
  padding: 28px;
  background-color: #0c2c2e;
  color: #fff;
  border-radius: var(--mokko-radius) var(--mokko-radius) 0 0
}

.listing-about__price-label p {
  font-size: 13px;
  color: #E1E8E7
}

.listing-about__price-main p {
  margin-top: 6px;
  font-family: Tenor Sans, sans-serif;
  font-size: 28px;
  line-height: 1.17;
  color: #fff;
  letter-spacing: 0
}

.listing-about__price-per p {
  margin-top: 6px;
  font-size: 13px;
  color: #DFD0B8;
  letter-spacing: 0
}

.listing-about__form-card {
  padding: 24px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 0 0 var(--mokko-radius) var(--mokko-radius);
  gap: 20px;
  display: flex;
  flex-direction: column
}

.listing-about__form-title h4 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #153D40
}

.listing-about__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px
}

.listing-about__field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #153D40;
  background-color: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s ease
}

.listing-about__field input::placeholder {
  color: #b0b0b0
}

.listing-about__field input:focus {
  border-color: #153D40
}

.listing-about__actions {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.listing-about__actions .button {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0
}

.listing-about__actions .button:first-child {
  box-shadow: 0 14px 30px #153D4040
}

.listing-about__agent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px
}

.listing-about__agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #153D40
}

.listing-about__agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.listing-about__agent-info {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.listing-about__agent-name p {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0
}

.listing-about__agent-phone {
  font-size: 13px;
  color: #666;
  text-decoration: none;
  letter-spacing: 0
}

.listing-about__agent-phone:hover {
  color: #153D40
}

@media (max-width: 61.99875em) {
  .listing-about {
    padding: var(--mokko-section-space) 0
  }

  .listing-about__row {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .listing-about__aside {
    position: static;
    max-width: 480px;
    width: 100%
  }

  .listing-about__plan-title h3 {
    font-size: 20px
  }
}

@media (max-width: 47.99875em) {
  .listing-about {
    padding: var(--mokko-section-space) 0
  }

  .listing-about__content {
    gap: 16px
  }

  .listing-about__text {
    font-size: 14px
  }

  .listing-about__plan-item {
    font-size: 14px;
    padding: 6px 0 6px 18px
  }

  .listing-about__price-card {
    padding: 20px
  }

  .listing-about__price-main p {
    font-size: 24px
  }

  .listing-about__form-card {
    padding: 20px
  }

  .listing-about__form-title h4 {
    font-size: 15px
  }

  .listing-about__actions .button {
    padding: 12px;
    font-size: 13px
  }
}

.listing-features {
  padding: var(--mokko-section-space) 0;
  background-color: #f7f7f7
}

.listing-features__header {
  margin-bottom: 48px
}

.listing-features__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px
}

.listing-features__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background-color: #fff;
  border-radius: var(--mokko-radius-sm);
  border: 1px solid var(--mokko-border-light);
  text-align: center
}

.listing-features__item p {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0;
  line-height: 1.4
}

@media (max-width: 61.99875em) {
  .listing-features {
    padding: var(--mokko-section-space) 0
  }

  .listing-features__header {
    margin-bottom: 32px
  }

  .listing-features__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }

  .listing-features__item p {
    font-size: 15px
  }
}

@media (max-width: 47.99875em) {
  .listing-features {
    padding: var(--mokko-section-space) 0
  }

  .listing-features__header {
    margin-bottom: 24px
  }

  .listing-features__list {
    gap: 12px
  }

  .listing-features__item {
    padding: 20px 12px
  }

  .listing-features__item p {
    font-size: 14px
  }
}

.listing-location {
  padding: var(--mokko-section-space) 0
}

.listing-location__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start
}

.listing-location__info {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.listing-location__title h2 {
  font-size: 32px
}

.listing-location__address {
  margin-bottom: 24px
}

.listing-location__address p {
  font-size: 13px;
  color: #888;
  letter-spacing: 0
}

.listing-location__list {
  display: flex;
  flex-direction: column;
  list-style: none
}

.listing-location__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #ececec;
  font-size: 14px;
  letter-spacing: 0
}

.listing-location__item:last-child {
  border-bottom: none
}

.listing-location__item-label {
  color: #4a4a4a
}

.listing-location__item-value {
  font-weight: 700;
  color: #153D40;
  text-align: right
}

.listing-location__map {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  background-color: #153D40
}

.listing-location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

@media (max-width: 61.99875em) {
  .listing-location {
    padding: var(--mokko-section-space) 0
  }

  .listing-location__row {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .listing-location__title h2 {
    font-size: 26px
  }

  .listing-location__map {
    aspect-ratio: 16/9
  }
}

@media (max-width: 47.99875em) {
  .listing-location {
    padding: var(--mokko-section-space) 0
  }

  .listing-location__title h2 {
    font-size: 22px
  }

  .listing-location__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
  }

  .listing-location__item-value {
    text-align: left
  }

  .listing-location__map {
    aspect-ratio: 4/3
  }
}

.services-grid {
  padding: var(--mokko-section-space) 0
}

.services-grid__header {
  margin-bottom: 40px
}

.services-grid__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start
}

.services-grid__list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.services-grid__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background-color: #fafafa;
  border-radius: var(--mokko-radius)
}

.services-grid__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 2px solid #153D40;
  border-radius: 50%;
  font-family: Tenor Sans, sans-serif;
  font-size: 22px;
  color: #153D40
}

.services-grid__title h4,
.services-grid__title h3 {
  font-family: Tenor Sans, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
  color: var(--mokko-teal, #153d40)
}

.services-grid__item > .button { align-self: flex-start; margin-top: auto }

.services-grid__points ul {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.services-grid__points li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #4a4a4a
}

.services-grid__points li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background-color: #153D40;
  border-radius: 50%
}

@media (max-width: 61.99875em) {
  .services-grid__list {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 47.99875em) {
  .services-grid__list--two {
    grid-template-columns: 1fr
  }

  .services-grid {
    padding: var(--mokko-section-space) 0
  }

  .services-grid__header {
    margin-bottom: 24px
  }

  .services-grid__list {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .services-grid__item {
    padding: 20px
  }
}

.promise {
  position: relative;
  overflow: hidden;
  color: #fff
}

.promise__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  z-index: -1;
  border-radius: 10px;
  overflow: hidden
}

@media (max-width: 61.99875em) {
  .promise__bg {
    border-radius: 0
  }
}

.promise__bg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #153D40;
  opacity: .7
}

.promise__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.promise__container {
  position: relative;
  z-index: 1;
  padding-block: 80px
}

.promise__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto
}

.promise__title h2 {
  color: #fff;
  font-size: 48px
}

.promise__text {
  max-width: 880px
}

.promise__text p {
  font-size: 15px;
  line-height: 1.6;
  color: #ffffffd9
}

@media (max-width: 61.99875em) {
  .promise {
    padding: 72px 0
  }

  .promise__title h2 {
    font-size: 36px
  }
}

@media (max-width: 47.99875em) {
  .promise {
    padding: 48px 0
  }

  .promise__title h2 {
    font-size: 24px
  }

  .promise__text p {
    font-size: 14px
  }
}

.why-us {
  padding: var(--mokko-section-space) 0;
  background-color: #f5f5f5
}

.why-us__header {
  margin-bottom: 48px
}

.why-us__header h2 {
  font-size: 48px
}

.why-us__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.why-us__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px #0000000a;
  text-align: center
}

.why-us__title h4 {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3
}

.why-us__text p {
  font-size: 14px;
  line-height: 1.5;
  color: #4a4a4a
}

@media (max-width: 61.99875em) {
  .why-us__header h2 {
    font-size: 36px
  }

  .why-us__list {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 47.99875em) {
  .why-us {
    padding: var(--mokko-section-space) 0
  }

  .why-us__header {
    margin-bottom: 28px
  }

  .why-us__header h2 {
    font-size: 26px
  }

  .why-us__list {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .why-us__item {
    padding: 20px
  }
}

.reviews {
  padding: var(--mokko-section-space) 0;
}

.reviews__header {
  margin-bottom: 40px
}

.reviews__slider {
  overflow: visible
}

.reviews__slide {
  height: auto
}

.reviews__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 28px;
  background-color: #f7f7f7;
  border-radius: 20px
}

/* Homepage reviews use the existing review card and Swiper, within the form-side column. */
.home-google-reviews { min-width: 0; width: 100%; align-self: center; }
.home-google-reviews .reviews__header { margin-bottom: 20px; }
.home-google-reviews .reviews__header h2 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; }
.home-google-reviews .reviews__header p { margin-top: 10px; color: #153D40; line-height: 1.45; }
.home-google-reviews .reviews__slider { overflow: hidden; min-width: 0; }
.home-google-reviews .reviews__item { min-height: 230px; background: #f8f9fa; }
.home-google-reviews .reviews__rating { gap: 3px; color: #A58B64; font-size: 17px; }
.home-google-reviews .reviews__author { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.home-google-reviews .reviews__author a { font-size: 13px; color: #153D40; text-decoration: underline; }
.home-google-reviews .reviews__more { margin-top: 20px; }
.home-google-reviews .reviews__more a { display: inline-flex; align-items: center; min-height: 44px; }
.home-google-reviews .reviews__source { font-size: 12px; color: #626262; }

.reviews__rating {
  display: flex
}

.reviews__rating svg {
  display: block;
  width: 66px;
  height: 12px
}

.reviews__text {
  flex: 1
}

.reviews__text p {
  font-size: 14px;
  line-height: 1.65
}

.reviews__author {
  padding-top: 16px;
  border-top: 1px solid #153D40
}

.reviews__author p {
  font-size: 13px;
  font-weight: 700;
  color: #0c2c2e
}

@media (max-width: 47.99875em) {
  .reviews {
    padding: var(--mokko-section-space) 0;
  }

  .reviews__header {
    margin-bottom: 24px
  }

  .reviews__item {
    padding: 24px;
    gap: 16px
  }
}

.register {
  padding: var(--mokko-section-space) 0;
  position: relative;
  overflow: hidden
}

.register__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.register__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.register__image:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #153D40;
  opacity: .7
}

.register__container {
  position: relative
}

.register__card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 64px;
  background-color: #fff;
  border-radius: 4px
}

.register__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: 24px
}

.register__title h2 {
  font-size: 32px
}

.register__subtitle {
  max-width: 560px
}

.register__subtitle p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  color: #666
}

.register__form {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.register__field input {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  line-height: 1.27
}

.register__field input::placeholder {
  color: #a5a5a5
}

.register__field input:focus {
  border-color: #153D40
}

.register__submit .button {
  width: 100%;
  padding: 16px;
  font-size: 15px;
  font-weight: 700
}

@media (max-width: 61.99875em) {
  .register {
    padding: var(--mokko-section-space) 0;
  }

  .register__card {
    padding: 40px 48px
  }

  .register__title h2 {
    font-size: 28px
  }
}

@media (max-width: 47.99875em) {
  .register {
    padding: var(--mokko-section-space) 0;
  }

  .register__card {
    padding: 32px 20px
  }

  .register__header {
    margin-bottom: 24px;
    gap: 16px
  }

  .register__title h2 {
    font-size: 22px
  }

  .register__subtitle p {
    font-size: 13px
  }

  .register__form {
    gap: 20px
  }

  .register__submit .button {
    padding: 14px;
    font-size: 14px
  }
}

.register__tabs {
  gap: 8px;
  display: flex;
  align-items: center;
  margin-bottom: 24px
}

.register__tab-input {
  display: none
}

.register__tab-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 23px;
  border: 1px solid rgba(0, 0, 0, .3);
  font-size: 14px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  transition: background-color .2s, color .2s;
  line-height: 1.27
}

.register__tab-input:checked+.register__tab-label {
  background-color: #A58B64;
  border-color: #A58B64;
  color: #fff
}

.publications-filter__title {
  margin-bottom: 20px
}

.publications-filter__title p {
  font-size: 28px;
  color: #1a1a1a
}

.publications-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

@media (max-width: 47.99875em) {
  .publications-filter__title p {
    font-size: 22px
  }

  .publications-filter__list {
    gap: 8px
  }
}

.publications {
  padding-top: 40px
}

.publications__header {
  margin-bottom: 48px
}

.publications__header h1 { font-size: clamp(30px, 4vw, 52px); }

.news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}
@media (max-width: 61.99875em) {
  .news__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }
}
@media (max-width: 47.99875em) {
  .news__list {
    grid-template-columns: 1fr;
    gap: 16px
  }
}

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

.publications__meta-info {
  display: flex;
  align-items: center
}

.publications__meta-info span+span:before {
  content: "·";
  margin: 0 8px;
  color: #1a1a1a
}

.publications__meta-info span:last-child {
  color: #1a1a1a
}

.publications__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #153D40;
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap
}

.publications__link span {
  text-decoration: underline
}

.publications__link:after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M7 7h10v10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

@media (max-width: 47.99875em) {
  .publications__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }
}

.thank-you {
  padding: 80px 0
}

.thank-you__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center
}

.thank-you__text {
  max-width: 560px
}

.thank-you__action {
  margin-top: 16px
}

@media (max-width: 47.99875em) {
  .thank-you {
    padding: 48px 0
  }
}

.speaker {
  padding: var(--mokko-section-space) 0;
  background-color: #f7f7f7
}

.speaker__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 104px;
  align-items: center
}

.speaker__avatar img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  display: block
}

.speaker__content {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.speaker__header {
  display: grid;
  gap: 16px
}

.speaker__header:after {
  content: "";
  width: 60px;
  height: 4px;
  background-color: #A58B64
}

.speaker__label h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #153D40
}

.speaker__name p {
  font-family: Tenor Sans, sans-serif;
  font-size: 36px;
  letter-spacing: 0em;
  color: #153D40;
  line-height: 1.16
}

.speaker__subtitle p {
  font-size: 15px;
  color: #153D40;
  line-height: 1.6;
  letter-spacing: 0
}

.speaker__text {
  display: grid;
  gap: 16px
}

.speaker__text p {
  letter-spacing: 0;
  font-size: 16px;
  line-height: 1.625;
  color: #153D40
}

@media (max-width: 61.99875em) {
  .speaker__row {
    grid-template-columns: 200px 1fr;
    gap: 48px
  }

  .speaker__name p {
    font-size: 30px
  }
}

@media (max-width: 47.99875em) {
  .speaker {
    padding: var(--mokko-section-space) 0
  }

  .speaker__row {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    text-align: center
  }

  .speaker__avatar {
    max-width: 200px
  }

  .speaker__header {
    justify-items: center
  }

  .speaker__header:after {
    margin: 0 auto
  }

  .speaker__name p {
    font-size: 24px
  }

  .speaker__subtitle p,
  .speaker__text p {
    font-size: 14px
  }
}

@media (max-width: 29.99875em) {
  .speaker__name p {
    font-size: 22px
  }
}

.records {
  padding: var(--mokko-section-space) 0;
  background-color: #f7f7f7
}

.records__header {
  margin-bottom: 48px
}

.records__header h2 {
  font-size: 36px
}

.records__subtitle {
  max-width: 700px;
  letter-spacing: 0
}

.records__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.records__item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
  border-radius: var(--mokko-radius);
  padding: 20px 20px 14px;
  letter-spacing: 0;
  box-shadow: 0 4px 24px #00000026
}

.records__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 282/270;
  object-fit: cover;
  display: block;
  border-radius: 10px
}

.records__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  margin-top: 20px;
  text-align: center
}

.records__title h3,
.records__title h4 {
  font-family: Tenor Sans, sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #153D40
}

.records__text p {
  font-size: 14px;
  line-height: 1.576;
  color: #505050
}

.records__action {
  width: 100%;
  margin-top: auto;
  padding-top: 12px
}

.records__action .button {
  width: 100%;
  padding: 12px 19px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0
}

@media (max-width: 61.99875em) {
  .records {
    padding: var(--mokko-section-space) 0
  }

  .records__header {
    margin-bottom: 32px
  }

  .records__header h2 {
    font-size: 30px
  }

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

@media (max-width: 47.99875em) {
  .records {
    padding: var(--mokko-section-space) 0
  }

  .records__header {
    margin-bottom: 24px
  }

  .records__header h2 {
    font-size: 24px
  }

  .records__list {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .records__body {
    padding: 16px 4px 4px;
    gap: 10px
  }

  .records__image img {
    height: 200px
  }

  .records__title h4 {
    font-size: 16px
  }
}

/* Shared components formerly served as a separate stylesheet.
   Preserve their order after the base rules; edit components here going forward. */
/* Compatibility/enhancement layer extracted from the former tail of style.css.
   Kept separate so base styles and later targeted adjustments are no longer interleaved. */

/* Transparent header over the hero video, solid on scroll */
.header {
  transition: background-color .3s ease, box-shadow .3s ease
}

.header__logo-icon_white {
  display: none
}

body.has-hero-header .wrapper {
  padding-top: 0
}

body.has-hero-header .header {
  background-color: transparent;
  box-shadow: none
}

body.has-hero-header .header:not(.header--scrolled) .header__logo-icon_dark {
  display: none
}

body.has-hero-header .header:not(.header--scrolled) .header__logo-icon_white {
  display: block
}

body.has-hero-header .header:not(.header--scrolled) .header__burger span {
  background-color: #fff
}

body.has-hero-header .header:not(.header--scrolled) .header__mobile .header__nav-link,
body.has-hero-header .header:not(.header--scrolled) .header__mobile .header__phone,
body.has-hero-header .header:not(.header--scrolled) .header__mobile .header__lang-toggle {
  color: #fff
}

body.has-hero-header .header.header--scrolled {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08)
}

body.has-hero-header .header.header--scrolled .header__burger span {
  background-color: #153D40
}

.header.menu-open .header__burger span {
  background: #153D40 !important
}

/* Mobile bottom tab bar */
.tabbar {
  display: none
}

@media (max-width: 61.99875em) {
  :root {
    --tabbar-height: calc(76px + env(safe-area-inset-bottom))
  }

  .wrapper {
    padding-bottom: var(--tabbar-height)
  }

  .tabbar {
    display: flex;
    min-height: var(--tabbar-height);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    background-color: #171b1b;
    border-top: 1px solid rgba(165,139,100,.55);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  }

  .tabbar__item {
    flex: 1;
    min-width: 0;
    position: relative;
    font-family: "Source Sans 3", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 2px;
    background: none;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    transition: color .2s ease;
  }

  .tabbar__item:hover {
    color: #A58B64
  }

  .tabbar__item + .tabbar__item:before { content: ""; position: absolute; left: 0; height: 34px; width: 1px; background: rgba(165,139,100,.45); }

  .tabbar__icon {
    color: var(--mokko-gold);
    display: inline-flex;
    width: 22px;
    height: 22px
  }

  .tabbar__icon svg {
    width: 100%;
    height: 100%
  }
}

@media (max-width: 29.99875em) {
  .tabbar {
    padding-left: 2px;
    padding-right: 2px
  }

  .tabbar__icon {
    width: 20px;
    height: 20px
  }
}

.tabbar__label { display: flex; align-items: center; justify-content: center; min-height: 2.4em; max-width: 100%; font: inherit; line-height: 1.2; }

body:has(.header.menu-open) .tabbar {
  display: none
}

.property-template-default .stats p,
.property-template-default .listing-about__price-label p {
  color: #fff !important;
}


.hero__subtitle-left img {
    width: 150px;
    height: auto;
}

.hero__stars {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
}

.hero__star {
    width: 18px;
    height: 18px;
    fill: #A58B64;
} 

/* ==========================================================================
   1. ГЛОБАЛЬНЫЕ НАСТРОЙКИ И ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================================== */
.listing-hero__meta-item + .listing-hero__meta-item:before {
  content: "·";
}

.catalog-filter__action .button--reset {
  margin-top: 10px;
}

/* Global button geometry now lives in assets/css/style.css. */

/* ==========================================================================
   3. ГЛАВНАЯ СТРАНИЦА: HERO SECTION & BEIJES (HERO PILLS)
   ========================================================================== */
/* Таблетки / Бейджи (Pills) */
.hero-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 20px 0 25px 0;
}

.hero-pill {
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50px;
  padding: 8px 18px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}

/* ==========================================================================
   4. ДЕСКТОРНЫЕ СТИЛИ (Экраны от 768px / 769px / 992px)
   ========================================================================== */
@media (min-width: 768px) {
  /* Hero Pills */
  .hero-badges {
    flex-direction: row;
    justify-content: center;
  }
  .hero-pill {
    width: auto;
    max-width: none;
    font-size: 14px;
  }

  /* About Section */
  .page-template-home .about__image,
  .home .about__image {
    display: block;
    max-width: 100%;
  }

  .page-template-home .about__image img,
  .home .about__image img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 12px;
  }

  .page-template-home .about__text p,
  .home .about__text p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .page-template-home .about__actions--desktop .button,
  .home .about__actions--desktop .button {
    font-size: 16px;
    padding: 14px 32px;
    border-radius: 30px;
    display: inline-block;
  }

  /* Offers Section */
  .page-template-home .offers .section__header,
  .page-template-home .offers .section__eyebrow,
  .page-template-home .offers .section__title,
  .page-template-home .offers .section__subtitle,
  .page-template-home .offers h2,
  .home .offers .section__header,
  .home .offers .section__eyebrow,
  .home .offers .section__title,
  .home .offers .section__subtitle,
  .home .offers h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 769px) {
  /* Фоновое видео Hero */
  .hero video,
  .hero_image video,
  .hero-bg-video {
    object-fit: cover;
    object-position: center 30%;
    height: 100%;
    width: 100%;
  }
}

/* ==========================================================================
   5. МОБИЛЬНАЯ АДАПТАЦИЯ (Экраны до 767px / 768px)
   ========================================================================== */
.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .7) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') no-repeat center / 28px;
}

@media (max-width: 767px) {
  /* About Section Mobile */
  .page-template-home .hide-on-mobile,
  .home .hide-on-mobile {
    display: none;
    height: 0;
    overflow: hidden;
  }

  .page-template-home .about__text p,
  .home .about__text p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .page-template-home .about__actions--mobile .button,
  .page-template-home .about__actions--desktop .button,
  .home .about__actions--mobile .button,
  .home .about__actions--desktop .button {
    border-radius: 30px;
    padding: 12px 28px;
    font-size: 14px;
  }

  /* Offers Section Mobile */
  .page-template-home .offers .section__header,
  .page-template-home .offers .section__eyebrow,
  .page-template-home .offers .section__title,
  .page-template-home .offers .section__subtitle,
  .page-template-home .offers h2,
  .page-template-home .offers p,
  .home .offers .section__header,
  .home .offers .section__eyebrow,
  .home .offers .section__title,
  .home .offers .section__subtitle,
  .home .offers h2,
  .home .offers p {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
  }


}


/* Small reusable presentation helpers kept out of template markup. */
.icon--flip-x {
  transform: scaleX(-1);
}
.calculator__disclaimer {
  max-width: 1100px;
  margin: 24px auto 0;
  color: #8c8c8c;
  font-size: 12px;
  line-height: 1.4;
}

/* Shared control styles and brand tokens. */

:root {
  --mokko-teal: #153D40;
  --mokko-gold: #A58B64;
  --mokko-bg-soft: #F8F9FA;
  --mokko-border-light: rgba(21, 61, 64, 0.08);
  --mokko-radius: 20px;
  --mokko-radius-sm: 14px;
  --mokko-accent: #887047;
  --mokko-accent-hover: #705B38;
  --mokko-ink: var(--mokko-teal);
  --mokko-border: #D7D7D7;
  --mokko-control-radius: 999px;
  --mokko-card-radius: var(--mokko-radius);
  --mokko-field-radius: var(--mokko-radius-sm);
}

/* Contact Form 7 submit buttons cannot be given theme classes from PHP templates. */
.wpcf7-submit,
.form__submit input[type="submit"],
.register__submit input[type="submit"] {
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid var(--mokko-accent);
  border-radius: var(--mokko-control-radius);
  background: var(--mokko-accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .045em;
  cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .wpcf7-submit:hover,
  .form__submit input[type="submit"]:hover,
  .register__submit input[type="submit"]:hover {
    background: var(--mokko-accent-hover);
    border-color: var(--mokko-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(21, 61, 64, .12);
  }
}

.button:focus-visible,
.header__cta:focus-visible,
.wpcf7-submit:focus-visible,
.header__lang-toggle:focus-visible,
.catalog-filter__input:focus-visible {
  outline: 2px solid var(--mokko-ink);
  outline-offset: 3px;
}

.header__lang-toggle {
  min-width: 54px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(165, 139, 100, .55);
  border-radius: var(--mokko-control-radius);
  background: transparent;
}

.header__lang-list {
  overflow: hidden;
  border-radius: 14px;
}

.header__lang-list a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
  color: inherit;
}

/* Forms and catalog filters use the same softer geometry. */
.popup__content {
  border-radius: 24px;
}

.popup__field input,
.form__filter select,
.form__filter input,
.form__field input,
.register__field input,
.catalog-filter__input {
  border-radius: var(--mokko-field-radius);
}

.catalog-filter__input,
.catalog-filter__action .button {
  height: 44px;
}

/* Cards now share one radius system instead of 4/8/10px variations. */
.news__item {
  border-radius: var(--mokko-card-radius);
}


.news__image {
  overflow: hidden;
  border-radius: var(--mokko-card-radius) var(--mokko-card-radius) 0 0;
}


@media (max-width: 29.99875em) {
  .wpcf7-submit,
  .form__submit input[type="submit"],
  .register__submit input[type="submit"] {
    min-height: 44px;
    padding-inline: 20px;
  }
}

/* 1.0.11 — glass is a contextual variant, not the default button style. */
.button,
.wpcf7-submit,
.form__submit input[type="submit"],
.register__submit input[type="submit"] {
  border-radius: var(--mokko-control-radius);
}

/* Glass belongs only on media/dark surfaces and navigation CTAs. */
.button.glass,
.hero .button,
.photo-quote .button {
  background: rgba(20, 20, 20, .38);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgba(165, 139, 100, .72);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.12);
}

@media (hover: hover) and (pointer: fine) {
  .button.glass:hover,
  .hero .button:hover,
  .photo-quote .button:hover {
    background: var(--mokko-accent);
    border-color: var(--mokko-accent);
    color: #fff;
  }
}

/* The creditworthiness checkbox belongs only to the mortgage CTA popup. */
.mokko-mortgage-only,
.mokko-credit-check {
  display: none;
}

body.is-mortgage-page .mokko-mortgage-only,
body.is-mortgage-page .mokko-credit-check {
  display: block;
  margin: 12px 0 18px;
  color: #153D40;
}

.mokko-mortgage-only .wpcf7-list-item {
  margin: 0;
}

.mokko-mortgage-only label,
.mokko-credit-check label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.mokko-mortgage-only input[type="checkbox"],
.mokko-credit-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #A58B64;
}

/* CF7 success state: replace the form with a clean confirmation instead of appending text below it. */
.wpcf7-form.mokko-form-success > :not(.wpcf7-response-output) {
  display: none !important;
}

.wpcf7-form.mokko-form-success .wpcf7-response-output {
  display: flex !important;
  min-height: 170px;
  margin: 0 !important;
  padding: 34px 22px !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(165, 139, 100, .45) !important;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  color: #153D40;
  font-size: 18px;
  line-height: 1.45;
  animation: mokko-success-in .32s ease both;
}

@keyframes mokko-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Accessible page H1 for layouts whose visual heading is intentionally elsewhere. */
.mokko-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Editorial pages share the service container and readable paragraph rhythm. */
.editorial { padding-block: clamp(48px,6vw,80px) var(--mokko-section-space); }
.editorial__text { max-width: 850px; font-size: 18px; line-height: 1.7; }
.editorial__text h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; margin: 40px 0 16px; }
.editorial__text p, .district-editorial p { margin-bottom: 20px; }
.editorial__text ul, .district-editorial ul { padding-left: 24px; margin-bottom: 24px; }
.editorial__text a { text-decoration: underline; text-underline-offset: 3px; }
.district-editorial .about__row { display: block; max-width: 800px; margin-inline: auto; }
.district-editorial .about__content { max-width: none; }
.district-editorial :is(h2,h3) { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.25; margin: 32px 0 16px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .offers__image img { transition: transform .45s cubic-bezier(.22,1,.36,1); }
  .offers__item:hover .offers__image img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header__row, .button, .offers__image img { transition: none; }
}

.footer__legal { padding-bottom: 28px; font-size: 14px; }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

.team__slider { overflow-x: auto; scrollbar-width: thin; }
.team__slider.swiper-initialized { overflow: hidden; }
.team__controls { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 28px; }
.team__controls button { width: 44px; height: 44px; border: 1px solid var(--mokko-gold); border-radius: 50%; color: var(--mokko-teal); }
@media (max-width: 991px) { .team__slider .team__item { width: calc((100% - 48px) / 3); } }
@media (max-width: 767px) { .team__slider .team__item { width: calc((100% - 24px) / 2); } }
@media (max-width: 479px) { .team__slider .team__item { width: calc((100% - 4px) / 1.2); } }
@media (min-width: 768px) and (max-width: 991px) { .workflow--service .workflow__list { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* =============================================================
   Module 1: Booking Widget
   ============================================================= */
.booking-page { padding: 60px 0 80px; }
.booking-page__container { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.booking-hero { display: flex; align-items: center; gap: 32px; margin-bottom: 40px; }
.booking-hero__photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.booking-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.booking-hero__label { color: var(--mokko-gold); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
.booking-hero__name { font-size: clamp(24px, 3vw, 36px); color: var(--mokko-teal); margin: 0 0 4px; }
.booking-hero__role { color: #555; margin: 0; }

/* Steps */
.booking-step__title { font-size: clamp(18px, 2.5vw, 24px); color: var(--mokko-teal); margin: 0 0 24px; }
.booking-back { background: none; border: none; color: var(--mokko-teal); cursor: pointer; font-size: 14px; padding: 0; margin-bottom: 16px; display: block; }
.booking-back:hover { color: var(--mokko-gold); }
.booking-step__date-label { color: #555; margin: 0 0 20px; font-size: 15px; }
.booking-step__summary { background: #f0f5f5; border-left: 3px solid var(--mokko-teal); padding: 10px 16px; margin-bottom: 24px; color: var(--mokko-teal); font-weight: 600; border-radius: 0 4px 4px 0; }

/* Calendar */
.booking-calendar { max-width: 380px; }
.booking-calendar__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.booking-cal-month { font-weight: 700; color: var(--mokko-teal); font-size: 16px; }
.booking-cal-prev, .booking-cal-next { background: none; border: 1px solid #ddd; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 16px; color: var(--mokko-teal); }
.booking-cal-prev:hover, .booking-cal-next:hover { border-color: var(--mokko-teal); }
.booking-calendar__header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.booking-calendar__header span { text-align: center; font-size: 12px; color: #888; font-weight: 600; padding: 4px 0; }
.booking-calendar__body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.booking-cal-cell { padding: 8px 4px; text-align: center; font-size: 14px; border: none; border-radius: 4px; cursor: pointer; background: #fff; border: 1px solid transparent; }
.booking-cal-cell--available { border-color: var(--mokko-teal); color: var(--mokko-teal); font-weight: 600; }
.booking-cal-cell--available:hover, .booking-cal-cell--selected { background: var(--mokko-teal); color: #fff; border-color: var(--mokko-teal); }
.booking-cal-cell--past, .booking-cal-cell--unavailable { color: #ccc; cursor: default; border-color: transparent; }
.booking-cal-cell--empty { background: transparent; border: none; cursor: default; }
.booking-calendar__loading { padding: 16px 0; color: #888; font-size: 14px; }

/* Slots */
.booking-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.booking-slot-btn { padding: 10px 18px; border: 1px solid var(--mokko-teal); border-radius: 6px; background: #fff; color: var(--mokko-teal); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.booking-slot-btn:hover { background: var(--mokko-teal); color: #fff; }
.booking-slots__loading, .booking-slots__empty { color: #888; font-size: 14px; padding: 8px 0; }

/* Form */
.booking-form { max-width: 520px; }
.booking-form__field { margin-bottom: 18px; }
.booking-form__field label { display: block; font-size: 14px; color: #333; font-weight: 600; margin-bottom: 6px; }
.booking-form__field input, .booking-form__field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 6px;
    font-size: 15px; font-family: inherit; box-sizing: border-box; transition: border-color .15s; }
.booking-form__field input:focus, .booking-form__field textarea:focus { border-color: var(--mokko-teal); outline: none; }
.booking-form__field textarea { resize: vertical; }
.booking-form__field--consent label { font-weight: 400; font-size: 13px; display: flex; align-items: flex-start; gap: 8px; }
.booking-form__field--consent input { width: auto; flex-shrink: 0; margin-top: 2px; }
.booking-form__submit { margin-top: 8px; width: 100%; padding: 14px; font-size: 16px; }
.booking-form__error { margin-top: 12px; padding: 12px 16px; background: #fff0f0; border: 1px solid #f5c6c6; border-radius: 6px; color: #c0392b; font-size: 14px; }

/* Success */
.booking-success { text-align: center; padding: 40px 20px; }
.booking-success__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--mokko-teal); color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.booking-success h2 { color: var(--mokko-teal); }
.booking-success__dt { font-size: 18px; font-weight: 700; color: var(--mokko-gold); margin: 8px 0 16px; }

/* Expert list (index page) */
.booking-list h1 { color: var(--mokko-teal); margin-bottom: 32px; }
.booking-expert-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: inherit; margin-bottom: 12px; transition: border-color .15s, box-shadow .15s; }
.booking-expert-card:hover { border-color: var(--mokko-teal); box-shadow: 0 2px 8px rgba(21,61,64,.1); }
.booking-expert-card__photo { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.booking-expert-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.booking-expert-card__info { flex: 1; }
.booking-expert-card__info strong { display: block; color: var(--mokko-teal); font-size: 16px; }
.booking-expert-card__info span { font-size: 13px; color: #888; }
.booking-expert-card__cta { color: var(--mokko-gold); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Spinner */
.booking-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ddd; border-top-color: var(--mokko-teal); border-radius: 50%; animation: booking-spin .7s linear infinite; vertical-align: middle; }
@keyframes booking-spin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 768px) {
    .booking-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
    .booking-hero__photo { width: 80px; height: 80px; }
    .booking-calendar { max-width: 100%; }
    .booking-cal-cell { padding: 6px 2px; font-size: 13px; }
}
@media (max-width: 480px) {
    .booking-page { padding: 32px 0 60px; }
    .booking-slot-btn { padding: 8px 14px; font-size: 14px; }
}


/* ── Booking: Meeting type cards (Step 0) ────────────────────────────────── */
.booking-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}
.booking-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    text-align: center;
    color: var(--mokko-teal);
    font-family: inherit;
}
.booking-type-card:hover {
    border-color: var(--mokko-teal);
    box-shadow: 0 4px 20px rgba(21,61,64,.13);
    transform: translateY(-2px);
}
.booking-type-card--active,
.booking-type-card:active {
    border-color: var(--mokko-teal);
    background: rgba(21,61,64,.04);
    box-shadow: 0 4px 20px rgba(21,61,64,.16);
}
.booking-type-card__icon {
    color: var(--mokko-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(21,61,64,.07);
    transition: background .2s;
}
.booking-type-card:hover .booking-type-card__icon,
.booking-type-card--active .booking-type-card__icon {
    background: rgba(21,61,64,.13);
}
.booking-type-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mokko-teal);
    display: block;
}
.booking-type-card__desc {
    font-size: .8rem;
    color: #666;
    line-height: 1.5;
    display: block;
}
@media (max-width: 480px) {
    .booking-type-cards { grid-template-columns: 1fr; }
    .booking-type-card  { flex-direction: row; text-align: left; gap: 14px; padding: 18px 16px; }
    .booking-type-card__icon { flex-shrink: 0; }
}


/* ── Booking additions v2 ────────────────────────────────────────────────── */

/* Hero subtitle and bio */
.booking-hero__subtitle { margin: 10px 0 0; font-size: 15px; color: var(--mokko-teal); font-weight: 500; line-height: 1.5; }
.booking-hero__bio { margin: 8px 0 0; font-size: 14px; color: #555; line-height: 1.65; }

/* Redesigned type cards — horizontal compact */
.booking-type-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.booking-type-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; width: 100%; padding: 16px 20px;
    border: 1.5px solid rgba(21,61,64,.15);
    border-radius: 14px; background: #fff;
    cursor: pointer; transition: border-color .2s, box-shadow .2s;
    text-align: left; color: var(--mokko-teal); font-family: inherit;
    flex-direction: row;
}
.booking-type-card:hover { border-color: var(--mokko-teal); box-shadow: 0 4px 16px rgba(21,61,64,.1); transform: none; }
.booking-type-card--active { border-color: var(--mokko-teal); background: rgba(21,61,64,.04); box-shadow: 0 4px 16px rgba(21,61,64,.1); }
.booking-type-card__icon { display: none !important; } /* removed from design */
.booking-type-card__body { flex: 1; min-width: 0; }
.booking-type-card__title { display: block; font-size: 16px; font-weight: 700; color: var(--mokko-teal); margin-bottom: 3px; }
.booking-type-card__desc { display: block; font-size: 13px; color: #666; line-height: 1.4; }
.booking-type-card__duration {
    flex-shrink: 0;
    padding: 4px 13px;
    background: var(--mokko-gold); color: #fff;
    border-radius: 999px; font-size: 12px; font-weight: 700;
    white-space: nowrap; letter-spacing: .02em;
}

/* Date + inline time panel side by side on desktop */
.booking-date-time { display: flex; gap: 36px; align-items: flex-start; }
.booking-calendar { flex: 0 0 auto; min-width: 0; }
.booking-time-panel { flex: 1; min-width: 0; padding-top: 8px; border-left: 1px solid rgba(21,61,64,.09); padding-left: 32px; }
@media (max-width: 640px) {
    .booking-date-time { flex-direction: column; gap: 20px; }
    .booking-time-panel { border-left: none; padding-left: 0; border-top: 1px solid rgba(21,61,64,.09); padding-top: 16px; }
}

/* Submit button — match site .button style */
.booking-form__submit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 50px; padding: 0 32px; margin-top: 8px;
    font-size: 15px; font-weight: 600; letter-spacing: .045em;
    cursor: pointer;
    border: 1px solid var(--mokko-accent);
    border-radius: 999px;
    background: var(--mokko-accent); color: #fff;
    transition: background-color .22s ease, border-color .22s ease;
    font-family: inherit;
}
.booking-form__submit:hover:not(:disabled) {
    background-color: var(--mokko-accent-hover);
    border-color: var(--mokko-accent-hover);
}
.booking-form__submit:disabled { opacity: .7; cursor: default; }


/* ── Booking v3: Calendly-style calendar ──────────────────────────────────── */

/* Full-width calendar by default (no date selected) */
.booking-calendar {
    max-width: none !important;
    width: 100%;
}

/* When a date is selected (has-slots class on parent), split layout */
.booking-date-time.has-slots .booking-calendar {
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: 340px !important;
}

/* Bigger, rounder calendar cells — Calendly-like */
.booking-calendar__header { gap: 4px; margin-bottom: 10px; }
.booking-calendar__header span { padding: 10px 0; font-size: 13px; color: #999; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.booking-calendar__body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.booking-cal-cell {
    aspect-ratio: 1 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 500;
    border-radius: 50% !important;
    border: 1.5px solid transparent;
    line-height: 1 !important;
    transition: background .15s, color .15s;
}
.booking-cal-cell--available { border-color: var(--mokko-teal); color: var(--mokko-teal); font-weight: 700; }
.booking-cal-cell--available:hover, .booking-cal-cell--selected {
    background: var(--mokko-teal) !important; color: #fff !important; border-color: var(--mokko-teal) !important;
}
.booking-cal-cell--past, .booking-cal-cell--unavailable { color: #bbb !important; cursor: default; background: transparent !important; border-color: transparent !important; }
.booking-cal-cell--empty { background: transparent !important; border: none !important; cursor: default; }

/* Calendar nav bigger */
.booking-cal-month { font-size: 18px; font-weight: 700; }
.booking-cal-prev, .booking-cal-next { padding: 6px 14px; font-size: 18px; }

/* Slots in a single column (not flex-wrap) */
.booking-slots { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.booking-slot-btn {
    width: 100%;
    text-align: center;
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 600;
    border: 1.5px solid var(--mokko-teal);
    border-radius: 8px;
    background: #fff;
    color: var(--mokko-teal);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.booking-slot-btn:hover { background: var(--mokko-teal) !important; color: #fff !important; }

/* Time panel heading */
.booking-step__date-label { font-size: 15px; font-weight: 700; color: var(--mokko-teal); margin: 0 0 14px; }

/* Mobile overrides */
@media (max-width: 640px) {
    .booking-date-time.has-slots .booking-calendar { flex: none !important; width: 100% !important; max-width: 100% !important; }
    .booking-cal-cell { font-size: 14px !important; }
    .booking-cal-month { font-size: 16px; }
}


/* ── Booking v4: fixed calendar width + mobile side-by-side ──────────────── */

/* Date+time layout: always flex row, gap between calendar and slots */
.booking-date-time {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px;
    align-items: flex-start;
    max-width: 820px;
}

/* Calendar: fixed width — no jump when slots appear */
.booking-calendar {
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
}

/* Time panel: fills remaining space, hidden until date clicked */
.booking-time-panel {
    flex: 1 !important;
    min-width: 120px;
    border-left: 1px solid rgba(21,61,64,.12) !important;
    padding-left: 24px !important;
    padding-top: 4px !important;
    border-top: none !important;
}

/* Remove has-slots width change — not needed with fixed width */
.booking-date-time.has-slots .booking-calendar {
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
}

/* Mobile (<= 640px): smaller calendar, slots to the RIGHT (not below) */
@media (max-width: 640px) {
    .booking-date-time {
        gap: 12px !important;
    }
    .booking-calendar {
        flex: 0 0 185px !important;
        width: 185px !important;
        max-width: 185px !important;
    }
    .booking-date-time.has-slots .booking-calendar {
        flex: 0 0 185px !important;
        width: 185px !important;
        max-width: 185px !important;
    }
    .booking-time-panel {
        padding-left: 12px !important;
        border-left: 1px solid rgba(21,61,64,.12) !important;
        border-top: none !important;
        padding-top: 0 !important;
    }
    .booking-cal-cell { font-size: 12px !important; }
    .booking-cal-month { font-size: 14px !important; }
    .booking-cal-prev, .booking-cal-next { padding: 4px 8px !important; font-size: 14px !important; }
    .booking-calendar__header span { font-size: 10px !important; padding: 6px 0 !important; }
    .booking-slot-btn { padding: 9px 10px !important; font-size: 13px !important; }
    .booking-step__date-label { font-size: 13px !important; }
}