/* =========================================================
   0) DESIGN TOKENS
   ========================================================= */
:root{
  --bg: #f7f5f2;
  --text: #1a1a1a;
  --muted: rgba(26,26,26,.70);
  --muted-2: rgba(26,26,26,.55);
  --border: rgba(26,26,26,.12);

  --brand: #3f5b54;
  --brand-2: #2f4741;
  --brand-ink: #ffffff;

  --surface: rgba(255,255,255,.62);
  --surface-strong: rgba(255,255,255,.72);

  --shadow: 0 18px 40px rgba(0,0,0,.08);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.06);

  --radius: 18px;
  --radius-lg: 26px;

  --max: 1120px;
  --pad: clamp(18px, 4vw, 34px);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --focus: rgba(63,91,84,.55);
  --focus-ring: 0 0 0 4px rgba(63,91,84,.12);
}

/* =========================================================
   1) BASE
   ========================================================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{
  display: block;
  max-width: 100%;
  height: auto;
}

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

.container{
  width: min(var(--max), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
}

.section{
  padding: clamp(56px, 7vw, 96px) 0;
}

h1,h2,h3{
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

h1{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.6vw, 3.35rem);
  line-height: 1.06;
}

h2{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 2.4vw, 2.35rem);
  line-height: 1.12;
}

h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
}

p{ margin: 0 0 14px; }

.lead{
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--muted);
  max-width: 62ch;
}

.kicker{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-size: .95rem;
  color: var(--muted-2);
  margin-bottom: 14px;
}

.nowrap{ white-space: nowrap; }

/* common rhythm for section headers */
.section h2{ margin-bottom: 12px; }
.section > .container > .lead{
  margin-bottom: 22px;
  max-width: 70ch;
}

/* =========================================================
   2) SKIP LINK
   ========================================================= */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 10px;
  background: #000;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 9999;
}
.skip-link:focus{ left: 10px; }

/* =========================================================
   3) HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(247, 245, 242);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav{
  width: min(var(--max), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.nav__brand{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav__links{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav__links a{
  font-size: .98rem;
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
}
.nav__links a:hover{
  background: rgba(63,91,84,.08);
  color: var(--text);
}

.nav__cta{
  background: transparent;
  border: 1px solid rgba(63,91,84,.35);
  color: var(--brand);
  font-size: .9rem;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 500;
}
.nav__cta:hover{
  background: rgba(63,91,84,.08);
}

/* =========================================================
   4) BUTTONS
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  user-select: none;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover{ background: var(--brand-2); }

.btn--ghost{
  background: rgba(255,255,255,.55);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.78);
  border-color: rgba(26,26,26,.18);
}

.microcopy{
  font-size: .95rem;
  color: var(--muted-2);
  margin: 10px 0 0;
}

/* =========================================================
   5) HERO (clean, centered-by-viewport, no image)
   ========================================================= */
.hero--bg{
  /* negative = left/up */
  --hero-x: clamp(-36px, -2.2vw, -14px);
  --hero-y: clamp(-22px, -1.2vh, -10px);

  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  overflow: hidden;

  background: linear-gradient(
    to bottom,
    rgba(247,245,242,0.92) 0%,
    rgba(247,245,242,1) 62%
  );

  padding: clamp(88px, 12vh, 140px) 0 clamp(56px, 8vh, 110px);
}

.hero--bg .hero__grid{
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero--bg .hero__content{
  position: relative;
  max-width: 90ch;
  transform: translate(var(--hero-x), var(--hero-y));
  padding-left: clamp(12px, 2vw, 20px);
}

/* micro-accent */
.hero--bg .hero__content::before{
  content: "";
  position: absolute;
  left: calc(-1 * clamp(16px, 2vw, 24px));
  top: 0.35em;
  bottom: 0.35em;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,0.12),
    rgba(0,0,0,0)
  );
}

.hero--bg .kicker{
  margin: 0 0 14px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

.hero--bg h1{
  margin: 0;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.hero--bg .hero__promise{
  margin: 14px 0 18px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  opacity: 0.88;
}

.hero--bg .lead{
  max-width: 60ch;
  margin-top: 6px;
}

.hero--bg .hero__actions{
  margin-top: 24px;
  display: grid;
  gap: 12px;
  max-width: 420px;
}

.hero--bg .microcopy{
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.hero--bg + .section{
  padding-top: clamp(52px, 6vh, 72px);
}
.hero--bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  background-image: url("/img/strip.jpg"); /* ТВОЁ ФОТО */
  background-size: cover;
  background-position: center;
  border-radius: 2rem 0 0 2rem;
}

/* =========================================================
   6) HOW CAN I HELP — panels
   ========================================================= */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.2vw, 18px);
  margin-top: 18px;
}

.panel{
  background: var(--surface);
  border: 1px solid rgba(26,26,26,.10);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  padding: 22px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.panel ul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.panel li{ margin: 10px 0; }

/* =========================================================
   7) ABOUT — text + image
   ========================================================= */
.about__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
}

.about__content{ max-width: 72ch; }

.about__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  min-height: clamp(380px, 48vw, 520px);
  transform: translateY(12px);
}

.about__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 35%;
  transform: scale(1.01);
}

/* soft fade */
.about__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(247,245,242,.78) 0%, rgba(247,245,242,0) 24%),
    linear-gradient(0deg, rgba(247,245,242,.86) 0%, rgba(247,245,242,0) 26%);
}
/* =========================================================
   7) ABOUT — text + image (clean, no fades, matched height)
   ========================================================= */
.about__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: start; /* было center — из-за этого “прыгает” */
}

.about__content{
  max-width: 72ch;
}

/* фото = аккуратная карточка, без тумана, высота “как у текста” */
.about__media{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(26,26,26,.06);
  background: rgba(255,255,255,.35);

  /* вместо min-height: держим понятную верхнюю границу */
  height: clamp(360px, 52vh, 520px);
  transform: none; /* убираем translateY */
}

.about__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 1%;
  filter: none;

}

.about__content p{
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* убиваем старый fade */
.about__media::after{
  content: none !important;
  display: none !important;
}
/* =========================================================
   8) SERVICES — cards + FAQ + details + form
   ========================================================= */
.cards{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 16px);
  align-items: stretch;
}

.card{
  background: var(--surface);
  border: 1px solid rgba(26,26,26,.10);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  padding: 22px;
  display: grid;
  gap: 12px;
  grid-template-rows: auto auto 1fr auto;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}


.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.07);
  border-color: rgba(63,91,84,.35);
  background: rgba(255,255,255,.78);
  transform: translateY(-4px);
}

.price{
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}
.price strong{ font-weight: 700; }

.card__text{ color: var(--muted); }

.bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--muted);
}
.bullets li{
  padding-left: 22px;
  position: relative;
}
.bullets li::before{
  content: "•";
  position: absolute;
  left: 6px;
  top: -1px;
  color: var(--brand);
  font-weight: 700;
}
.btn--ghost{
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(26,26,26,.14);
  color: var(--text);
  box-shadow: none;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}
/* Когда ховерим КАРТОЧКУ — кнопка становится primary */
.card:hover .btn--ghost{
  background: var(--brand);
  color: var(--brand-ink);


  transform: translateY(-1px);
}

/* Single Session — активна по умолчанию */
.card--default{
 transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.07);
  border-color: rgba(63,91,84,.35);
  background: rgba(255,255,255,.78);
  transform: translateY(-4px);
}

/* Кнопка у Single Session — как primary */
.card--default .btn--ghost{
  background: var(--brand);
  color: var(--brand-ink);
}
/* Когда пользователь наводит на ЛЮБУЮ карточку —
   default-эффект у Single Session исчезает */
.cards:hover .card--default:not(:hover){
  transform: none;
  background: var(--surface);
  border-color: rgba(26,26,26,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.cards:hover .card--default:not(:hover) .btn--ghost{
  background: rgba(255,255,255,.6);
  color: var(--text);
}

/* FAQ */
.faq{
  margin-top: 26px;
  background: var(--surface);
  border: 1px solid rgba(26,26,26,.10);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  padding: 20px 22px;
}

details{
  border-top: 1px solid rgba(26,26,26,.10);
  padding: 12px 0;
}
details:first-of-type{ border-top: none; }

summary{
  cursor: pointer;
  font-weight: 650;
  color: var(--text);
  list-style: none;
  padding-right: 28px;
  position: relative;
}
summary::-webkit-details-marker{ display: none; }

summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: rgba(26,26,26,.55);
  font-weight: 700;
}
details[open] summary::after{ content: "–"; }

details p{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 75ch;
}

/* Important details */
.details{
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(26,26,26,.10);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow-soft);
}
.details ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

/* Booking / form */
.booking{
  margin-top: 26px;
  background: var(--surface);
  border: 1px solid rgba(26,26,26,.10);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  padding: 22px;
}

.form{
  margin-top: 14px;
  display: grid;
  gap: 12px;
  max-width: 760px;
}

.form__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

label{
  display: grid;
  gap: 8px;
  font-weight: 600;
  color: var(--muted);
  font-size: .98rem;
}

input, textarea{
  width: 100%;
  border: 1px solid rgba(26,26,26,.14);
  background: rgba(255,255,255,.78);
  border-radius: 14px;
  padding: 12px 12px;
  font: inherit;
  color: var(--text);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

input:focus, textarea:focus{
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
  background: rgba(255,255,255,.92);
}

textarea{
  resize: vertical;
  min-height: 120px;
}


/* Send button = width of Name field */
.form button.btn{
  border: none;
  width: 100%;                 /* как input */
  max-width: 160px;            /* ← ключевая строка */
  padding: 12px 14px;          /* как у input */
  border-radius: 14px;         /* как у input */
  font-weight: 600;
   align-self: flex-start;
}
#contactThanks{
  border: none;
  border-radius: 18px;
  padding: 0;
  max-width: 420px;
}

#contactThanks::backdrop{
  background: rgba(0,0,0,.35);
}

.thanks{
  padding: 26px;
  display: grid;
  gap: 12px;
  text-align: center;
}
.tidycal-modal{
  border: none;
  padding: 0;
  width: min(980px, 94vw);
  height: min(760px, 88vh);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.tidycal-modal::backdrop{
  background: rgba(0,0,0,.35);
}

.tidycal-modal .close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

/* =========================================================
   9) FOOTER
   ========================================================= */
.site-footer{
  padding: 26px 0;
  border-top: 1px solid var(--border);
  background: rgba(247,245,242,.92);
}

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

.site-footer p{
  margin: 0;
  color: var(--muted-2);
}

.footer__links{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 14px;
}
.footer__links a{
  color: var(--muted-2);
  padding: 8px 10px;
  border-radius: 12px;
  opacity: .85;
}
.footer__links a:hover{
  background: rgba(63,91,84,.08);
  color: var(--text);
  opacity: 1;
}
.intro-form select,
.intro-form input{
  height: 44px;              /* ключевая строка */
  padding: 10px 12px;
  border-radius: 12px;
  font: inherit;
}
.intro-form select,
.intro-form select option{
  font-size: 1.05rem;
}
/* базовое состояние dialog */
dialog{
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition:
    opacity .25s ease,
    transform .25s ease;
}

/* когда dialog открыт */
dialog[open]{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* затемнение фона тоже мягко */
dialog::backdrop{
  background: rgba(0,0,0,.35);
  animation: backdropFade .25s ease forwards;
}

@keyframes backdropFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* THANK YOU — центр и спокойствие */
.thanks{
  padding: 26px;
  display: grid;
  gap: 12px;
  text-align: center;
}
#thanks{
  border: none;
  border-radius: 18px;
  padding: 0;
  max-width: 420px;
}

.thanks{
  padding: 24px;
  display: grid;
  gap: 12px;
  text-align: center;
}

.modal-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* =========================================================
   10) RESPONSIVE (mobile)
   ========================================================= */
@media (max-width: 54rem){

  /* Nav stacks */
  .nav{
    height: auto;
    padding: 10px 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    text-align: center;
  }
  .nav__brand{
    width: 100%;
    text-align: center;
    padding-top: 4px;
  }
  .nav__links{ justify-content: center; }
  .nav__cta{
    width: 100%;
    text-align: center;
  }

  /* Hero */
  .hero--bg{
    min-height: auto;
    padding: 110px 0 60px;
  }
  .hero--bg .hero__content{
    transform: none;
    padding-left: var(--pad);
    padding-right: var(--pad);
    max-width: 60ch;
  }
  .hero--bg .hero__content::before{ display: none; }

  /* Help */
  .two-col{ grid-template-columns: 1fr; }

  /* About */
  .about__grid{ grid-template-columns: 1fr; }
  .about__media{ display: none; }

  /* Services */
  .cards{ grid-template-columns: 1fr; }

  /* Form */
  .form__grid{ grid-template-columns: 1fr; }
  .form button.btn{ width: 100%; }
}

/* Very small phones */
@media (max-width: 23.5rem){
  .nav__links{ gap: 10px; }
  .btn{ width: 100%; }
}
.help h2{
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  margin-bottom: 20px;
}

.help .panel:first-child{
  background: rgba(255,255,255,.68);
}

.help .panel:last-child{
  background: rgba(255,255,255,.60);
}
/* =========================================================
   MOBILE-ONLY NAV (premium): brand + single CTA
   (Desktop untouched)
   ========================================================= */
@media (max-width: 54rem){

  /* header чуть компактнее */
  .nav{
    height: auto;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* вместо center */
    gap: 10px;
  }

  /* бренд слева в одну строку */
  .nav__brand{
    width: auto;         /* было 100% */
    text-align: left;    /* было center */
    padding-top: 0;
  }

  /* ссылки прячем на мобиле */
  .nav__links{
    display: none;
  }

  /* CTA справа, без растягивания на всю ширину */
  .nav__cta{
    width: auto;         /* было 100% */
    text-align: center;
    padding: 8px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }
}

/* очень узкие телефоны: CTA уходит на новую строку, но без ссылок */
@media (max-width: 23.5rem){
  .nav{
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav__brand{
    width: 100%;
    text-align: center;
  }
}
dialog{
  border: none;
  border-radius: 18px;
  padding: 24px;
  max-width: 420px;
}

dialog::backdrop{
  background: rgba(0,0,0,.35);
}

.intro-form{
  display: grid;
  gap: 14px;
}

.close{
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.micro{
  font-size: .85rem;
  opacity: .7;
}

/* =========================================================
   ABOUT — mobile: photo → title → text
   ========================================================= */
/* =========================================================
   ABOUT — mobile: photo → title → text
   ========================================================= */
@media (max-width: 54rem){

  /* превращаем section в flex-контейнер */
  #about .container{
    display: flex;
    flex-direction: column;
  }

  /* фото — первым */
  .about__media{
    display: block;
    margin: 0 auto 2px;
    max-width: 420px;
    min-height: 320px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transform: none;
  }

  /* убираем градиенты */
  .about__media::after{
    display: none;
  }

  .about__media img{
    object-fit: cover;
    object-position: 50% 18%; /* лицо чуть выше */
    transform: scale(1);
  object-position: 80% 1%;
 

  /* заголовок About — вторым */
  #about h2{
    order: 2;
    margin-bottom: 14px;
  }

  /* текст — третьим */
  .about__grid{
    order: 3;
    display: block;
  }

  .about__content{
    max-width: 65ch;
  }
}
.form button.btn{
  min-height: 48px;
}
.about__content h2{
  margin-bottom: 18px;
}
.about__content h2{
  margin-bottom: 18px;
}
@media (max-width: 54rem){
  .about__grid{
    gap: 10px;
  }

  .about__media{
    margin-bottom: 0px;
  }

  .about__content h2{
    margin-top: 4px;
  }
}