/* ==========================================================================
   Variables
   ========================================================================== */
:root{
  /* grid */
  --page-width: 1920px;
  --container-width: 1440px;
  --grid-margin: 240px;
  --grid-gutter: 20px;

  /* colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-white-fefefe: #FEFEFE;
  --color-gray-dark: #5B5B5B;
  --color-gray-86868b: #86868B;
  --color-gray-f5f5f7: #F5F5F7;
  --color-gray-f5f5f5: #F5F5F5;
  --color-gray-f8f8f8: #F8F8F8;
  --color-gray-d2d2d7: #D2D2D7;
  --color-mint: #A6FBD3;

  --brown1: linear-gradient(90deg, #CCBBA6 0%, #A99174 100%);
  --brown2: linear-gradient(90deg, #A99174 0%, #6F5F4C 100%);

  /* fonts */
  --font-title: 'Yeseva One', serif;
  --font-base: 'Stem', Arial, sans-serif;

  --shadow-pill: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* NOTE: шрифт "Stem" — платный/кастомный, в проекте нет файлов начертаний.
   Подключите @font-face с woff2, когда будут файлы шрифта:
   @font-face{font-family:'Stem'; src:url('../fonts/Stem-Regular.woff2') format('woff2'); font-weight:400;}
   @font-face{font-family:'Stem'; src:url('../fonts/Stem-Medium.woff2') format('woff2'); font-weight:500;}
   До этого момента используется системный sans-serif фоллбек. */

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, h1, h2, h3, h4, p, ul, li, figure{ margin: 0; padding: 0; }
ul{ list-style: none; }
img{ display: block; max-width: 100%; }
a{ text-decoration: none; color: inherit; }
button{ font: inherit; background: none; border: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
input, textarea{ -webkit-appearance: none; appearance: none; border-radius: 0; }

html{
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

section[id]{
  scroll-margin-top: 140px;
}

body{
  font-family: var(--font-base);
  font-weight: 400;
  color: var(--color-black);
  background: var(--color-white);
  overflow-x: hidden;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container{
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
}

.top-wrap{
  position: relative;
  background: url('../assets/bg1.webp') center top / cover no-repeat;
}

/* ==========================================================================
   Typography scale
   ========================================================================== */
.title-1{ font-family: var(--font-title); font-weight: 400; font-size: 56px; line-height: 66px; }
.title-2{ font-family: var(--font-title); font-weight: 400; font-size: 36px; line-height: 44px; }
.title-3{ font-family: var(--font-base); font-weight: 400; font-size: 30px; line-height: 40px; }
.title-4{ font-family: var(--font-base); font-weight: 400; font-size: 26px; line-height: normal; }
.btn-1  { font-family: var(--font-base); font-weight: 500; font-size: 18px; line-height: normal; }
.btn-2  { font-family: var(--font-base); font-weight: 500; font-size: 16px; line-height: normal; }
.text-1 { font-family: var(--font-base); font-weight: 400; font-size: 18px; line-height: 36px; color: var(--color-gray-86868b); }
.text-2 { font-family: var(--font-base); font-weight: 400; font-size: 16px; line-height: normal; color: var(--color-gray-86868b); }
.text-3 { font-family: var(--font-base); font-weight: 400; font-size: 14px; line-height: normal; color: var(--color-gray-86868b); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brown1);
  color: var(--color-white);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.25s ease;
}
.btn:hover,
.btn:active{
  background: var(--brown2);
}

.btn--sm{
  padding: 16px 30px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
}

.btn--lg{
  padding: 20px 50px;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 18px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 30px var(--grid-margin);
  background: transparent;
  transition: transform 0.35s ease, padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.header.is-hidden{
  transform: translateY(-100%);
}

.header.is-floating{
  padding: 16px var(--grid-margin);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header.is-floating .logo img{
  width: 130px;
  height: 57.8px;
}

.header.is-floating .header__leaves{
  display: none;
}

.header__row{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.header__brand{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.logo{ flex-shrink: 0; }

.logo img{
  transition: width 0.3s ease, height 0.3s ease;
}

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

.header__bar{
  display: flex;
  align-items: center;
  gap: 80px;
}

.header__contact{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-base);
  font-size: 18px;
  line-height: 36px;
  white-space: nowrap;
}

.header__leaves{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   Nav drawer (burger menu)
   ========================================================================== */
.nav-drawer{
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
}

.nav-drawer.is-open{
  visibility: visible;
  pointer-events: auto;
}

.nav-drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-drawer.is-open .nav-drawer__backdrop{
  opacity: 1;
}

.nav-drawer__panel{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 520px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 50px;
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url('../assets/bg1.webp') center / cover no-repeat;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}

.nav-drawer.is-open .nav-drawer__panel{
  transform: translateX(0);
}

.nav-drawer__close{
  position: absolute;
  top: 30px;
  right: 30px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.nav-drawer__close-bar{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  border-radius: 1px;
}

.nav-drawer__close-bar:first-child{
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-drawer__close-bar:last-child{
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-drawer__nav{
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.nav-drawer__link{
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 26px;
  line-height: normal;
  color: var(--color-black);
  transition: color 0.2s ease;
}

.nav-drawer__link:hover{
  color: #A99174;
}

/* ==========================================================================
   Video modal (презентация)
   ========================================================================== */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.video-modal.is-open{
  visibility: visible;
  pointer-events: auto;
}

.video-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-modal.is-open .video-modal__backdrop{
  opacity: 1;
}

.video-modal__panel{
  position: relative;
  width: 1196px;
  max-width: 90vw;
  border-radius: 40px;
  overflow: hidden;
  background: var(--color-black);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.video-modal.is-open .video-modal__panel{
  transform: scale(1);
  opacity: 1;
}

.video-modal__video{
  display: block;
  width: 100%;
  max-height: 90vh;
}

.video-modal__close{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.video-modal__close-bar{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
}

.video-modal__close-bar:first-child{
  transform: translate(-50%, -50%) rotate(45deg);
}

.video-modal__close-bar:last-child{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   Lead modal (форма записи)
   ========================================================================== */
.lead-modal{
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.lead-modal.is-open{
  visibility: visible;
  pointer-events: auto;
}

.lead-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lead-modal.is-open .lead-modal__backdrop{
  opacity: 1;
}

.lead-modal__panel{
  position: relative;
  width: 710px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 80px;
  border-radius: 40px;
  background: var(--color-white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.lead-modal.is-open .lead-modal__panel{
  transform: scale(1);
  opacity: 1;
}

.lead-modal__leaves{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.lead-modal__body{
  position: relative;
  z-index: 1;
}

.lead-modal__close{
  position: absolute;
  top: 90px;
  right: 80px;
  z-index: 2;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.lead-modal__close-bar{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  border-radius: 1px;
}

.lead-modal__close-bar:first-child{
  transform: translate(-50%, -50%) rotate(45deg);
}

.lead-modal__close-bar:last-child{
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lead-modal__title{
  color: var(--color-black);
  margin-bottom: 40px;
}

.lead-modal__subtitle{
  margin-bottom: 40px;
}

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

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

.lead-modal__input{
  width: 100%;
  padding: 16px 30px;
  border-radius: 30px;
  border: 1px solid transparent;
  font-family: var(--font-base);
  font-size: 16px;
  color: var(--color-black);
  background: var(--color-gray-f5f5f7);
  transition: border-color 0.2s ease;
}

.lead-modal__input::placeholder{
  color: var(--color-gray-86868b);
}

.lead-modal__input:focus{
  outline: none;
  border-color: #A99174;
}

.lead-modal__input.is-invalid{
  border-color: #E24C4C;
}

.lead-modal__textarea{
  border-radius: 30px;
  min-height: 90px;
  resize: vertical;
}

.lead-modal__error{
  display: none;
  padding-left: 20px;
  font-family: var(--font-base);
  font-size: 13px;
  color: #E24C4C;
}

.lead-modal__error.is-visible{
  display: block;
}

.lead-modal__honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-modal__submit{
  width: 100%;
  margin-top: 20px;
  padding: 16px 30px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-white);
  background: var(--color-gray-d2d2d7);
  cursor: not-allowed;
  transition: background 0.25s ease;
}

.lead-modal__submit:not(:disabled){
  background: var(--brown1);
  cursor: pointer;
}

.lead-modal__submit:not(:disabled):hover,
.lead-modal__submit:not(:disabled):active{
  background: var(--brown2);
}

.lead-modal__legal{
  margin-top: 20px;
  color: var(--color-gray-86868b);
}

.lead-modal__legal-link{
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.lead-modal__legal-link:hover,
.lead-modal__legal-link:active{
  color: var(--color-black);
}

.lead-modal__success{
  color: var(--color-black);
}

.lead-modal__success[hidden]{
  display: none;
}

.lead-modal__success .lead-modal__submit{
  width: auto;
  margin-top: 80px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-top: 71px;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}

.hero__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 675px;
  height: 100%;
  flex-shrink: 0;
  padding-bottom: 80px;
}

.hero__title{
  color: var(--color-black);
}

.hero-features{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 80px;
}

.feature-row{
  width: fit-content;
}

.feature-row--double{
  display: flex;
  width: 100%;
  gap: 10px;
}

.feature-row--center{
  width: 100%;
}

.feature-pill{
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 20px 30px;
  background: var(--color-white);
  border-radius: 80px;
  box-shadow: var(--shadow-pill);
  white-space: nowrap;
}

.feature-pill__icon{
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.hero__content .btn--lg{
  margin-top: 80px;
}

.hero__media{
  position: relative;
  align-self: stretch;
  width: 1000px;
  max-width: 52%;
  flex-shrink: 0;
}

.hero__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ==========================================================================
   Digits
   ========================================================================== */
.digits{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
}

.digits__row{
  display: flex;
  gap: var(--grid-gutter);
}

.digit{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 345px;
}

.digit__num{ color: var(--color-black); }
.digit__label{
  max-width: 150px;
}

/* ==========================================================================
   About
   ========================================================================== */
.about{
  padding: 200px var(--grid-margin) 0;
}

.about__row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--grid-gutter);
}

.about__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 832px;
}

.about__badge{
  margin-bottom: 40px;
}

.about__text{
  margin-bottom: 80px;
}


.about__image{
  width: 467px;
  height: 540px;
  object-fit: cover;
  border-radius: 40px;
  flex-shrink: 0;
}

/* ==========================================================================
   Directions
   ========================================================================== */
.directions{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
}

.directions__title{
  color: var(--color-black);
  margin-bottom: 60px;
}

.tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 60px;
}

.tab{
  position: relative;
  padding: 16px 30px;
  border-radius: 80px;
  border: 1px solid var(--color-gray-d2d2d7);
  background: transparent;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-dark);
  white-space: nowrap;
  cursor: pointer;
}

.tab:not(.is-active):hover{
  border-color: var(--color-black);
}

.tab.is-active{
  border-color: transparent;
  color: #A99174;
}

.tab.is-active::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brown1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.directions__panel{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}

.directions__info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.directions__info .btn--sm{
  margin-top: 80px;
}

.directions__media{
  position: relative;
  width: 100%;
  height: 760px;
  border-radius: 40px;
  overflow: hidden;
}

.directions__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.directions__badge{
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 420px;
  padding: 20px 30px;
  border-radius: 30px;
  background: var(--color-white);
}

.directions__badge-divider{
  width: 1px;
  height: 45px;
  background: var(--color-gray-d2d2d7);
  flex-shrink: 0;
}

.directions__badge-text{
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-black);
  max-width: 240px;
  text-transform: uppercase;
}

.directions__heading{ color: var(--color-black); }

.directions__text{
  margin-top: 40px;
}

/* ==========================================================================
   Ratings
   ========================================================================== */
.ratings{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
}

.ratings__row{
  display: flex;
  gap: var(--grid-gutter);
}

.ratings__col{
  width: 466.67px;
  flex-shrink: 0;
}

.ratings__title{ color: var(--color-black); }

.ratings__stars{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.rating-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 70px;
  border-radius: 40px;
  border: 1px solid #A99174;
}

.rating-card + .rating-card{
  border-color: transparent;
}

.rating-card__value{ color: var(--color-black); }

.rating-card__logo{
  width: auto;
  height: 24px;
  object-fit: contain;
}


/* ==========================================================================
   Services
   ========================================================================== */
.services{
  padding-left: var(--grid-margin);
  margin-top: 200px;
}

.services__row{
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.services__left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  width: 953px;
  flex-shrink: 0;
  padding: 80px 100px;
  border-radius: 40px;
  background: url('../assets/bg1.webp') 20% 70% / cover no-repeat;
  overflow: hidden;
}

.services__left .tabs{
  margin: 0;
  min-width: 0;
}

.services__left .tab:not(.is-active){
  border-color: var(--color-gray-dark);
}

.services__title{ color: var(--color-black); }

.services__list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.services__list[hidden]{
  display: none;
}

.services__pill{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  padding: 16px 20px;
  border-radius: 80px;
  background: var(--color-white);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-black);
}

.services__select{
  display: none;
}

.services__dot{
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.services__media{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 40px 0 0 40px;
  overflow: hidden;
}

.services__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services__details{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 80px;
}

.services__heading{ color: var(--color-black); }

.services__text-group{
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin-top: 40px;
}

.services__details .btn--sm{
  margin-top: 80px;
}

/* ==========================================================================
   Award (standalone)
   ========================================================================== */
.award-standalone{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
  display: flex;
  justify-content: flex-start;
}

.award-standalone__badge{
  position: relative;
  display: flex;
  align-items: center;
  gap: 60px;
  width: 953px;
  padding: 70px;
  border-radius: 30px;
  border: 1px solid transparent;
  background: var(--color-white);
}

.award-standalone__badge::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brown1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.award-standalone__divider{
  width: 1px;
  height: 60px;
  background: var(--brown1);
  flex-shrink: 0;
}

.award-standalone__text{
  max-width: 552px;
  white-space: nowrap;
  color: var(--color-black);
}

/* ==========================================================================
   Before / After
   ========================================================================== */
.before-after{
  position: relative;
  margin-top: 200px;
  padding: 100px var(--grid-margin);
  background: url('../assets/bg1.webp') 30% 70% / cover no-repeat;
  overflow: hidden;
}

.before-after__leaves{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.before-after__title{
  position: relative;
  z-index: 2;
  color: var(--color-black);
}

.before-after .tabs{
  position: relative;
  z-index: 2;
  margin-top: 40px;
  margin-bottom: 0;
}

.before-after .tab:not(.is-active){
  border-color: var(--color-gray-dark);
}

.before-after__row{
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--grid-gutter);
  margin-top: 60px;
}

.before-after__photo{
  position: relative;
  width: 466.67px;
  height: 600px;
  flex-shrink: 0;
}

.before-after__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
  transition: opacity 0.4s ease;
}

.before-after__card-top{
  transition: opacity 0.4s ease;
}

.before-after__is-fading .before-after__image,
.before-after__is-fading .before-after__card-top{
  opacity: 0;
}

.before-after__badge{
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 30px;
  border-radius: 20px;
  background: var(--color-mint);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-dark);
}

.before-after__card{
  position: relative;
  width: 466.67px;
  height: 600px;
  flex-shrink: 0;
  padding: 70px;
  border-radius: 40px;
  background: var(--color-white);
}

.before-after__card-top{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.before-after__card-title{ color: var(--color-black); }

.before-after__card-text{ color: var(--color-gray-86868b); }

.before-after__dots{
  position: absolute;
  left: 70px;
  bottom: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.before-after__dots .dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-gray-d2d2d7);
}

.before-after__dots .dot.is-active{
  background: var(--brown1);
}

/* ==========================================================================
   Equipment
   ========================================================================== */
.equipment{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
}

.equipment__title{
  color: var(--color-black);
  margin-bottom: 60px;
}

.equipment .tabs{
  margin-bottom: 80px;
}

.equipment__panel{
  display: flex;
  align-items: stretch;
  gap: var(--grid-gutter);
}

.equipment__media{
  width: 710px;
  height: 600px;
  flex-shrink: 0;
  border-radius: 40px;
  overflow: hidden;
}

.equipment__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipment__info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 710px;
  height: 600px;
  flex-shrink: 0;
  padding: 70px;
  border-radius: 40px;
  background: var(--color-gray-f5f5f7);
}

.equipment__heading{ color: var(--color-black); }

.equipment__text-group{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.equipment__text{
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-gray-86868b);
}

/* ==========================================================================
   Doctors
   ========================================================================== */
.doctors{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
}

.doctors__title{
  color: var(--color-black);
  margin-bottom: 80px;
}

.doctors__row{
  display: flex;
  gap: var(--grid-gutter);
}

.doctor-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 466.67px;
  flex-shrink: 0;
}

.doctor-card__photo + .doctor-card__meta{
  margin-top: 30px;
}

.doctor-card__meta + .doctor-card__btn{
  margin-top: 60px;
}

.doctor-card__photo{
  position: relative;
  width: 100%;
  height: 570px;
  border-radius: 40px;
  overflow: hidden;
  background: url('../assets/bg1.webp') 0 0 / 1440px 570px no-repeat;
  transition: transform 0.3s ease;
}

.doctor-card:hover .doctor-card__photo{
  transform: translateY(-20px);
}

.doctor-card:nth-child(1) .doctor-card__photo{ background-position: 0 0; }
.doctor-card:nth-child(2) .doctor-card__photo{ background-position: -486.67px 0; }
.doctor-card:nth-child(3) .doctor-card__photo{ background-position: -973.34px 0; }

.doctor-card__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.doctor-card__badge{
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 16px;
  border-radius: 20px;
  background: var(--color-mint);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
}

.doctor-card__name{
  color: var(--color-black);
}

.doctor-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
  border-radius: 30px;
  border: 1px solid var(--color-gray-dark);
  background: var(--color-white);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-gray-dark);
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.doctor-card__btn:hover,
.doctor-card__btn:active{
  background: var(--brown1);
  border-color: transparent;
  color: var(--color-white);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  margin-top: 200px;
  padding: 80px var(--grid-margin);
  background: url('../assets/bg1.webp') 60% top / cover no-repeat;
}

.faq__title{
  color: var(--color-black);
  margin-bottom: 80px;
}

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

.faq__item{
  padding: 30px 40px;
  border-radius: 20px;
  background: var(--color-white);
}

.faq__question-btn{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  cursor: pointer;
}

.faq__question{
  color: var(--color-black);
  transition: color 0.2s ease;
}

.faq__question-btn:hover .faq__question{
  color: #A99174;
}

.faq__toggle{
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 26px;
  color: var(--color-black);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.faq__question-btn:hover .faq__toggle{
  color: #A99174;
}

.faq__answer{
  display: none;
  max-width: 1200px;
  margin-top: 30px;
  color: var(--color-gray-86868b);
}

.faq__item.is-open .faq__answer{
  display: block;
}

/* ==========================================================================
   Contacts
   ========================================================================== */
.contacts{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
}

.contacts__title{
  color: var(--color-black);
  margin-bottom: 60px;
}

.contacts__row{
  display: flex;
  align-items: stretch;
  gap: var(--grid-gutter);
}

.contacts__card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 466.67px;
  flex-shrink: 0;
  padding: 80px 70px;
  border-radius: 40px;
  background: var(--color-gray-f5f5f7);
}

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

.contacts__label{
  color: var(--color-black);
}

.contacts__value a{
  transition: color 0.2s ease;
}

.contacts__value a:hover,
.contacts__value a:active{
  color: var(--color-black);
}

.contacts__map{
  position: relative;
  width: 953px;
  flex-shrink: 0;
  border-radius: 40px;
  overflow: hidden;
}

.contacts__map-frame{
  width: 100%;
  height: 100%;
  border: 0;
}

.contacts__map-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.03);
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-gray-dark);
  text-align: center;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.contacts__map-overlay.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */
.banner{
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 200px;
  padding-top: 160px;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  background: url('../assets/bg1.webp') center top / cover no-repeat;
}

.banner__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 675px;
  height: 100%;
  flex-shrink: 0;
  padding-bottom: 160px;
}

.banner__title{
  color: var(--color-black);
}

.banner__content .hero-features{
  margin-top: 80px;
}

.banner__content .btn--lg{
  margin-top: 80px;
}

.banner__media{
  position: relative;
  align-self: stretch;
  width: 1000px;
  max-width: 52%;
  flex-shrink: 0;
}

.banner__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.banner__leaves{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   Quote block
   ========================================================================== */
.quote-block{
  padding: 0 var(--grid-margin);
  margin-top: 200px;
}

.quote-block__title{
  color: var(--color-black);
  margin-bottom: 80px;
}

.quote-block__row{
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.quote-block__icon{
  flex-shrink: 0;
  width: 223.33px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 300px;
  line-height: normal;
  background: var(--brown1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.quote-block__text-group{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quote-block__text{
  color: var(--color-gray-86868b);
}

/* ==========================================================================
   SEO text
   ========================================================================== */
.seo-text{
  padding: 0 var(--grid-margin);
  margin-top: 160px;
}

.seo-text__title{
  color: var(--color-black);
  margin-bottom: 80px;
}

.seo-text__card{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 1200px;
  margin-left: 243.33px;
  padding: 50px 70px;
  border-radius: 40px;
  background: var(--color-gray-f5f5f7);
}

.seo-text__paragraph{
  color: var(--color-gray-86868b);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  margin-top: 80px;
  padding: 60px var(--grid-margin) 30px;
}

.footer__top{
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.footer__brand{
  width: 345px;
  flex-shrink: 0;
}

.footer__logo-text{
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-black);
}

.footer__col{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 345px;
  flex-shrink: 0;
}

.footer__link{
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-86868b);
  transition: color 0.2s ease;
}

.footer__link:hover,
.footer__link:active{
  color: var(--color-black);
}

.footer__link--narrow{
  display: block;
  width: 270px;
}

.footer__divider{
  width: 100%;
  height: 1px;
  background: var(--color-gray-d2d2d7);
  margin-bottom: 40px;
}

.footer__bottom{
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.footer__copy{
  display: block;
  width: 345px;
  flex-shrink: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-86868b);
}

.footer__disclaimer{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 40px;
  border-radius: 20px;
  background: var(--color-gray-f5f5f7);
  margin-bottom: 40px;
}

.footer__disclaimer-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.03);
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 26px;
  color: var(--color-gray-dark);
}

.footer__disclaimer-text{
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-dark);
  text-transform: uppercase;
}

.footer__a11y{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-dark);
}

.footer__a11y-icon{
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 16px;
  background-color: var(--color-gray-86868b);
  -webkit-mask: url('../assets/eye_icon.svg') center / contain no-repeat;
  mask: url('../assets/eye_icon.svg') center / contain no-repeat;
}

/* ==========================================================================
   Accessible mode (версия для слабовидящих)
   ========================================================================== */
body.a11y-mode{
  background: #ffffff !important;
}

body.a11y-mode *,
body.a11y-mode *::before,
body.a11y-mode *::after{
  background-image: none !important;
  color: #000000 !important;
  border-color: #000000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.a11y-mode img,
body.a11y-mode video{
  filter: grayscale(100%) contrast(1.1);
}

body.a11y-mode a{
  text-decoration: underline !important;
}

body.a11y-mode .btn,
body.a11y-mode .btn:hover,
body.a11y-mode .btn:active,
body.a11y-mode .doctor-card__btn:hover,
body.a11y-mode .doctor-card__btn:active{
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.a11y-mode .tab,
body.a11y-mode .rating-card,
body.a11y-mode .footer__disclaimer-badge{
  border: 2px solid #000000 !important;
}

/* ==========================================================================
   Mobile (375px base, iOS Safari first)
   ========================================================================== */
@media (max-width: 600px){
  :root{
    --grid-margin: 20px;
    --grid-gutter: 16px;
  }

  section[id]{ scroll-margin-top: 90px; }

  /* Typography */
  .title-1{ font-size: 28px; line-height: 36px; }
  .title-2{ font-size: 28px; line-height: 36px; }
  .title-3{ font-size: 22px; line-height: 30px; }
  .title-4{ font-size: 20px; line-height: 28px; }
  .text-1{ font-size: 14px; line-height: 24px; }
  .text-2{ font-size: 15px; }
  .btn-1{ font-size: 16px; }

  .btn--sm{ padding: 14px 26px; font-size: 15px; }
  .btn--lg{ padding: 16px 34px; font-size: 16px; }

  /* Tabs: horizontal swipe (stays within the section's own padding, safe under overflow:hidden ancestors) */
  .tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar{ display: none; }
  .tab{ flex-shrink: 0; padding: 12px 22px; font-size: 14px; }

  /* Header: burger + logo left, CTA button right */
  .header{ padding: 16px 20px; }
  .header.is-floating{ padding: 12px 20px; }
  .header__leaves{ display: none; }
  .header__row{ gap: 16px; }
  .header .logo img{ width: 130px; height: 57.8px; }
  .header__bar{ gap: 12px; }
  .header__contact{ display: none; }
  .header__bar .btn--sm{ padding: 12px 18px; font-size: 14px; }

  /* Nav drawer */
  .nav-drawer__panel{ width: 66.67%; max-width: 320px; padding: 50px 30px; }
  .nav-drawer__nav{ gap: 26px; }
  .nav-drawer__link{ font-size: 20px; }

  /* Lead modal */
  .lead-modal__panel{
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 90px 20px 40px;
    -webkit-overflow-scrolling: touch;
  }
  .lead-modal__leaves{ display: none; }
  .lead-modal__close{ top: 30px; right: 20px; }
  .lead-modal__title{ margin-bottom: 20px; }
  .lead-modal__subtitle{ margin-bottom: 30px; }
  .lead-modal__success .lead-modal__submit{ width: 100%; margin-top: 40px; }

  /* Video modal */
  .video-modal__panel{ width: 100%; max-width: 100%; border-radius: 20px; }
  .video-modal__video{ max-height: 80vh; max-height: 80dvh; }

  /* Feature pills: hug width, single line always. 2 per row when they fit, otherwise each drops to its own row (2,1,1,1) */
  .feature-pill{
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    padding: 10px 12px;
    gap: 6px;
  }
  .feature-pill .text-2{ font-size: 11px; line-height: 14px; }
  .feature-pill__icon{ width: 8px; height: 8px; }
  .feature-row{ width: 100%; }
  .feature-row--double{ flex-wrap: wrap; gap: 10px; row-gap: 10px; }
  .services__pill{ max-width: 100%; white-space: normal; }

  /* Hero */
  .hero{
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 0;
  }
  .hero__content{ width: 100%; height: auto; padding-bottom: 0; }
  .hero-features{ margin-top: 40px; }
  .hero__content .btn--lg{ margin-top: 40px; }
  .hero__media{
    width: 100%;
    max-width: 100%;
    height: 340px;
    margin-top: 40px;
  }

  /* Digits */
  .digits{ margin-top: 80px; }
  .digits__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .digit{ width: auto; gap: 12px; }
  .digit__label{ max-width: none; }

  /* About */
  .about{ padding-top: 80px; }
  .about__row{ flex-direction: column; gap: 40px; }
  .about__content{ max-width: 100%; order: 2; }
  .about__badge{ width: 190px; height: auto; margin-bottom: 24px; }
  .about__text{ margin-bottom: 40px; }
  .about__image{ width: 100%; height: 320px; order: 1; }

  /* Directions */
  .directions{ margin-top: 80px; }
  .directions__title{ margin-bottom: 30px; }
  .directions__panel{ gap: 30px; }
  .directions__media{ height: 360px; }
  .directions__badge{ max-width: calc(100% - 40px); padding: 14px 20px; }
  .directions__info .btn--sm{ margin-top: 40px; }
  .directions__text{ margin-top: 24px; }

  /* Ratings: title+stars full width, the 2 rating cards side by side */
  .ratings{ margin-top: 80px; }
  .ratings__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ratings__row > .ratings__col:not(.rating-card){ grid-column: 1 / -1; }
  .ratings__col{ width: auto; }
  .rating-card{ padding: 24px; gap: 16px; }
  .rating-card + .rating-card{ border-color: #A99174; margin-top: 0; }

  /* Services */
  .services{ padding-right: 20px; margin-top: 80px; }
  .services__row{ flex-direction: column; }
  .services__left{
    width: 100%;
    padding: 20px;
    gap: 30px;
  }
  .services__media{ border-radius: 20px; margin-top: 20px; height: 320px; }
  .services__details{ margin-top: 40px; }
  .services__list{ display: none; }
  .services__select{
    display: block;
    width: 100%;
    padding: 16px 44px 16px 20px;
    border-radius: 20px;
    border: 1px solid var(--color-gray-d2d2d7);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386868B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px 8px;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-base);
    font-size: 14px;
    color: var(--color-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .services__text-group{ margin-top: 24px; }
  .services__details .btn--sm{ margin-top: 40px; }

  /* Award standalone: logo, divider, text in a row (scaled down) */
  .award-standalone{ margin-top: 80px; }
  .award-standalone__badge{
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 24px;
  }
  .award-standalone__badge img{ width: 64px; height: auto; flex-shrink: 0; }
  .award-standalone__divider{ width: 1px; height: 32px; flex-shrink: 0; }
  .award-standalone__text{ max-width: 100%; white-space: normal; font-size: 13px; line-height: 18px; }

  /* Before / after */
  .before-after{ margin-top: 80px; padding: 60px 20px; }
  .before-after__leaves{ display: none; }
  .before-after .tabs{ margin-top: 24px; }
  .before-after__row{ flex-direction: column; margin-top: 30px; }
  .before-after__photo{ width: 100%; height: 340px; }
  .before-after__card{
    width: 100%;
    height: auto;
    padding: 40px 24px;
    padding-bottom: 90px;
  }
  .before-after__dots{ left: 24px; bottom: 40px; }

  /* Equipment */
  .equipment{ margin-top: 80px; }
  .equipment__title{ margin-bottom: 30px; }
  .equipment .tabs{ margin-bottom: 30px; }
  .equipment__panel{ flex-direction: column; }
  .equipment__media{ width: 100%; height: 320px; }
  .equipment__info{ width: 100%; height: auto; padding: 40px 24px; }
  .equipment__text{ font-size: 14px; line-height: 24px; }

  /* Doctors */
  .doctors{ margin-top: 80px; }
  .doctors__title{ margin-bottom: 40px; }
  .doctors__row{ flex-direction: column; gap: 40px; }
  .doctor-card{ width: 100%; }
  .doctor-card__photo{ height: 420px; }
  .doctor-card:hover .doctor-card__photo{ transform: none; }

  /* FAQ */
  .faq{ margin-top: 80px; padding: 50px 20px; }
  .faq__title{ margin-bottom: 40px; }
  .faq__item{ padding: 22px 24px; }
  .faq__question{ font-size: 16px; line-height: 22px; }
  .faq__toggle{ font-size: 22px; }

  /* Contacts */
  .contacts{ margin-top: 80px; }
  .contacts__title{ margin-bottom: 30px; }
  .contacts__row{ flex-direction: column; }
  .contacts__card{ width: 100%; padding: 40px 24px; gap: 30px; }
  .contacts__map{ width: 100%; height: 320px; margin-top: 20px; }

  /* CTA banner */
  .banner{
    flex-direction: column;
    margin-top: 80px;
    padding-top: 60px;
  }
  .banner__content{ width: 100%; height: auto; padding-bottom: 40px; }
  .banner__content .hero-features{ margin-top: 40px; }
  .banner__content .btn--lg{ margin-top: 40px; }
  .banner__media{ width: 100%; max-width: 100%; height: 340px; }
  .banner__leaves{ display: none; }

  /* Quote block */
  .quote-block{ margin-top: 80px; }
  .quote-block__title{ margin-bottom: 40px; }
  .quote-block__row{ flex-direction: column; gap: 16px; }
  .quote-block__icon{ width: auto; font-size: 80px; }

  /* SEO text */
  .seo-text{ margin-top: 60px; }
  .seo-text__title{ margin-bottom: 30px; }
  .seo-text__card{
    width: 100%;
    margin-left: 0;
    padding: 30px 24px;
  }

  /* Footer */
  .footer{ margin-top: 60px; padding: 50px 20px 20px; }
  .footer__top{ flex-direction: column; gap: 30px; margin-bottom: 30px; }
  .footer__brand{ width: 100%; }
  .footer__col{ width: 100%; }
  .footer__link{ font-size: 14px; }
  .footer__bottom{ flex-direction: column; gap: 8px; margin-bottom: 30px; }
  .footer__copy{ width: 100%; font-size: 14px; }
  .footer__disclaimer{ flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 20px; margin-bottom: 20px; }
  .footer__a11y{ font-size: 14px; }

  /* Corner radius test: 40px -> 20px across mobile cards/media */
  .about__image,
  .directions__media,
  .rating-card,
  .services__left,
  .before-after__image,
  .before-after__card,
  .equipment__media,
  .equipment__info,
  .doctor-card__photo,
  .contacts__card,
  .contacts__map,
  .seo-text__card{
    border-radius: 20px;
  }
}