:root{
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --black:#0b0b0b;
  --line:rgba(0,0,0,.12);
  --font: 'Lora', serif;
  --gold:#d6a24a;
  --gold-2:#e9bd6b;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --maxw:430px;
  --headerH: 50px;
}

*{ box-sizing:border-box; }

html{
  scroll-padding-top: calc(var(--headerH) + 12px);
}

html,body{ 
    height:100%; 
}

body{
  margin:0;
  font-family: var(--font);
  background:var(--bg);
  color:var(--text);
  padding-bottom: 0;
}

.page{
  max-width:var(--maxw);
  margin:0 auto;
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--black);
  color: #fff;
}

/* Burger + dropdown */
.burger-wrap{ 
  position: relative;
  width: 44px;
  flex: 0 0 44px;
}

.burger-wrap--right{
  margin-left: auto;
}

.icon-btn{
  width:44px; 
  height:40px;
  border:0; 
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:inherit;
  display:grid; 
  place-items:center;
  cursor:pointer;
}
.burger{ 
    width:18px; 
    height:14px; 
    position:relative; 
    display:block; 
}

.burger i{
  position:absolute; 
  left:0; 
  right:0;
  height:2px; 
  background:#fff; 
  border-radius:2px;
}

.burger i:nth-child(1){ top:0; }
.burger i:nth-child(2){ top:6px; opacity:.9; }
.burger i:nth-child(3){ bottom:0; }

.burger-menu{
  position:absolute;
  left:0;
  top:48px;
  width:min(76vw, 260px);
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.18);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.burger-menu--right{
  right: 0;
  left: auto;
}

.burger-link{
  display:block;
  padding:12px 12px;
  text-decoration:none;
  color:#111;
  font-weight:700;
  font-family: var(--font);
  font-size: 20px;
  background:#fff;
  border:0;
  width:100%;
  text-align:left;
  cursor:pointer;
}

.burger-link + .burger-link{ 
    border-top:1px solid rgba(0,0,0,.08); 
}

.burger-link:hover{
  background: rgba(214,162,74,.22);
  color: var(--black);
  box-shadow: inset 0 0 0 1px rgba(214,162,74,.45);
}

.burger-link--btn{ 
    font-family:inherit; 
}

.brand{
  display:flex; 
  align-items:center; 
  gap:10px;
  min-width:0;
}

.logo{
  width:34px; 
  height:34px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-2), var(--gold));
  color:#1b1b1b;
  font-weight:800;
  display:grid; 
  place-items:center;
}

.brand-title{
  font-family: "Cinzel", serif;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  background:#fff;
  color:var(--gold);
  cursor:pointer;
}

/* Hero */
.hero{ 
  position:relative;
  border-bottom:1px solid var(--line);
  padding:16px 12px 8px;
  min-height:320px; /* большой герой на мобилке */
}

.hero-bg{
  position:absolute;
  inset:0;
  background: url("../img/ornament.jpg") center/cover no-repeat;
  opacity:1;
  pointer-events:none;
}

.hero-content{
  position:relative;
  padding:40px 6px 10px; /* можешь оставить своё */
}

/* Слайды друг над другом, показываем активный */
.hero-slides{
  position:relative;
  min-height: 200px; /* чтобы высота не прыгала при смене текста */
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events:none;
}

.hero-slide.is-active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Кружочки снизу */
.hero-dots{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:18px;
}

.hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.35);
  background:#fff;
  padding:0;
  cursor:pointer;
  opacity:.9;
}

.hero-dot.is-active{
  background: var(--gold);
  border-color: rgba(0,0,0,.2);
}

.hero-slides{
  touch-action: pan-y;   /* разрешаем вертикальный скролл, свайп по X ловим сами */
  user-select: none;
}

/* Services */
/* ===== Services carousel ===== */
.services{
  padding: 24px 12px 18px;
}

.services-wrap{
  position: relative;
}

.svc-viewport{
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.svc-track{
  display: flex;
  gap: 16px;
  will-change: transform;
  transform: translateX(0);
}

.svc-card{
  flex: 0 0 calc(50% - 8px); /* 2 карточки в ряд как в макете */
  background: #fff;
  /*border: 1px solid var(--line);*/
  border: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.svc-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.svc-title{
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  margin-top: 10px;
}

.svc-price{
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  margin-top: 2px;
  margin-bottom: 10px;
}

.svc-desc{
  margin: 0 10px 12px;
  padding: 10px 10px;
  background: rgba(214,162,74,.75);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.25;
}

/* List inside service card (replaces .svc-desc) */
.svc-list{
  margin:10px 0 0;
  padding:12px 14px;
  list-style:none;

  background:rgba(214,162,74,.35);
  border-radius:12px;

  font-size:14px;
  line-height:1.25;
  color:#2b1b00;
}

.svc-list li{
  position:relative;
  padding-left:14px;
}

.svc-list li + li{
  margin-top:6px;
}

.svc-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  font-weight:900;
  color:#2b1b00;
}

/* стрелки */
.svc-arrow{
  position:absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.32);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  cursor: pointer;
  display:grid;
  place-items:center;
  font-size: 34px;
  line-height: 1;
  z-index: 3;
  color: #C9A24D;
}

.svc-arrow--left{ left: -6px; }
.svc-arrow--right{ right: -6px; }

/* Banner */
.banner{
  margin-top:10px;
  background:var(--black);
  color:#fff;
  padding:18px 14px;
  text-align:center;
}
.banner p{ 
  margin:0; 
  font-family: "Cormorant Garamond", serif;
  font-size:28px; 
  line-height:1.15; 
  font-style:italic;
  font-weight: 400; 
}

/* =========================
   REVIEWS (comic bubbles)
   ========================= */

.reviews{
  padding:24px 12px 20px;
}

.bubbles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 30px;              /* основной ряд можно держать небольшим */
  align-items:start;
}

/* bubble base */
.bubble{
  position:relative;
  background: var(--bg);
  border:2px solid #C9A24D;
  padding:14px 16px;
  line-height:1.25;
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  max-width:100%;
  text-align: center;

  /* ВАЖНО: резервируем место под dots+имя (чтобы не наезжали друг на друга) */
  margin-bottom: 74px;

  /* переносы длинных слов/строк */
  overflow-wrap:anywhere;
  word-break:normal;

  /* reveal */
  opacity:0;
  transform: translateY(14px) scale(.98);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.bubble.is-in{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* columns + лёгкая диагональ (но без пересечений) */
.bubble--left{
  grid-column:1;
  justify-self:start;
  text-align:left;
  margin-left: 6px;
}
.bubble--right{
  grid-column:2;
  justify-self:end;
  text-align:right;
  margin-top:-10px;           /* лёгкая “комикс”-хаотичность */
  margin-right: 6px;
}

.bubble--left,
.bubble--right{
  text-align: center;
}

/* thinking dots (2 dots) */
.bubble::after{
  content:"";
  position:absolute;
  bottom:-22px;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(214,162,74,.16);
  border:3px solid #000;
}
.bubble::before{
  content:"";
  position:absolute;
  bottom:-38px;
  width:6px; height:6px;
  border-radius:999px;
  background: rgba(214,162,74,.16);
  border:3px solid #000;
}
.bubble--left::after{ left:34px; }
.bubble--left::before{ left:20px; }
.bubble--right::after{ right:34px; }
.bubble--right::before{ right:20px; }

/* names outside — bigger + CAPS, aligned under tail */
.bubble-name{
  position:absolute;
  bottom:-66px;               /* ниже кружков */
  font-weight:900;
  font-size:16px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#000;
  line-height:1;
  width:max-content;
}

/* центрируем имя под хвостом */
.bubble--left .bubble-name{
  left:28px;
  transform: translateX(-50%);
}
.bubble--right .bubble-name{
  right:28px;
  transform: translateX(50%);
}

/* ===== разные формы (не одинаковые), как комикс ===== */
.bubble:nth-of-type(1){ border-radius: 58px 78px 60px 84px; }
.bubble:nth-of-type(2){ border-radius: 92px 56px 82px 58px; }
.bubble:nth-of-type(3){ border-radius: 64px 96px 54px 72px; }
.bubble:nth-of-type(4){ border-radius: 88px 62px 92px 52px; }

/* лёгкий поворот — живее, но безопасно */
.bubble:nth-of-type(1){ transform: translateY(14px) rotate(-1.1deg) scale(.98); }
.bubble:nth-of-type(2){ transform: translateY(14px) rotate( 1.0deg) scale(.98); }
.bubble:nth-of-type(3){ transform: translateY(14px) rotate(-0.8deg) scale(.98); }
.bubble:nth-of-type(4){ transform: translateY(14px) rotate( 0.9deg) scale(.98); }

.bubble:nth-of-type(1).is-in{ transform: translateY(0) rotate(-1.1deg) scale(1); }
.bubble:nth-of-type(2).is-in{ transform: translateY(0) rotate( 1.0deg) scale(1); }
.bubble:nth-of-type(3).is-in{ transform: translateY(0) rotate(-0.8deg) scale(1); }
.bubble:nth-of-type(4).is-in{ transform: translateY(0) rotate( 0.9deg) scale(1); }

/* Map */
.map{ 
  padding:12px; 
}

.map-embed{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

.map-embed iframe{
  width:100%;
  height:280px; /* или 350px, если хочешь повыше */
  display:block;
  border:0;
}

/* Contact strip */
.contact-strip{
  background:var(--black);
  color:var(--bg);
  padding:14px 12px 18px;
  min-height:180px;
  display:flex;
  align-items:center;   /* центр по вертикали */
}

.contact-inner{
  display:grid;
  grid-template-columns: 50% 50%;
  gap:0;
  align-items:center;
}

.contact-title{
  font-weight:900;
  font-size:18px;
  margin-bottom:6px;
  display:flex;
  align-items:center;
  gap:8px;
}

.pin-ic{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
}

.contact-text{
  font-size:14px;
  line-height:1.25;
  opacity:.92;
}

.contact-left{
  padding-right:12px;
  min-width:0;
}

.contact-right{
  display:flex;
  flex-direction:row;
  gap:4px;
  justify-content:space-between;
  align-items:center;
  width:100%;
  min-width:0;
}

.social{
  width:calc(50% - 3px);
  aspect-ratio:1/1;
  border-radius:18px;
  overflow:hidden;
  display:block;
  padding:0;
  margin:0;
  line-height:0;   /* убирает “пустую полосу” */
  font-size:0;     /* тоже убирает микрозазоры */
}

.social-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover; /* заполняет кнопку полностью */
  transform: scale(1.35);   /* попробуй 1.2–1.6 */
  transform-origin:center;
}

/* Bottom bar */
.bottom-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(var(--maxw), 100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  z-index:60;
  border-top:1px solid rgba(0,0,0,.12);
}

.bottom-btn{
  padding:16px 12px;
  text-align:center;
  font-family: var(--font);
  font-weight:900;
  letter-spacing:.06em;
  font-size:14px;
  border:0;
  cursor:pointer;
}
.bottom-btn--light{ 
    background:#111; 
    color:var(--gold); 
}
.bottom-btn--accent{ 
    background:rgba(214,162,74,.95); 
    color:#2b1b00; 
    text-decoration:none; 
    display:grid; 
    place-items:center; 
}

/* ===== MODAL (Form) ===== */
.modal{
  position:fixed;
  inset:0;
  z-index:120;
}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.38);
}

.modal__panel{
  position:relative;
  width:min(var(--maxw), calc(100% - 24px));
  margin:78px auto 18px; /* чтобы выглядело как на скрине — ниже топбара */
  background: linear-gradient(180deg, #0a0a0a, #000);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  padding:16px 14px 14px;
}

.modal__close{
  position:absolute;
  top:10px; right:10px;
  width:36px; height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}

.modal__top{ 
    text-align:center; 
    padding-top:34px; 
}

.modal__h2{
  display:block;
  padding:10px 10px;
  margin:0 auto 12px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  color:rgba(214,162,74,.95);
  font-weight:900;
  letter-spacing:.02em;
}

.modal__form{ 
    display:grid; 
    gap:12px; 
    padding: 2px 2px 0; 
}

.mfield{ 
    display:grid; 
    gap:6px; }

.mfield__label{
  font-weight:800;
  font-size:16px;
  opacity:.95;
}

.mselect{ 
    position:relative; 
}

.mselect select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  padding:10px 38px 10px 12px;
  border-radius:0;
  border:2px solid rgba(255,255,255,.55);
  background:#fff;
  color:#111;            /* <-- важно: всегда чёрный */
  font-weight:800;
 }

.mselect--gold select{
  border-color: rgba(214,162,74,.85);
}

.mselect--gold .mplaceholder{
  color: rgba(214,162,74,.92);
}

.mselect select:required:invalid{
  color: transparent;
}

.mselect select option{
  color: #111;
}

/* date wrapper for placeholder overlay */
.mdate{ position:relative; }

/* gold placeholder overlay (only when empty) */
.mplaceholder{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color: rgba(214,162,74,.90);
  font-weight:900;
  letter-spacing:.01em;
  pointer-events:none;     /* чтобы клики проходили в select/input */
  opacity:.9;
}

/* when we hide placeholder */
.mplaceholder.is-hidden{ display:none; }

.mselect::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:10px; height:10px;
  border-right:2px solid rgba(214,162,74,.9);
  border-bottom:2px solid rgba(214,162,74,.9);
  transform:translateY(-60%) rotate(45deg);
  pointer-events:none;
}

#dateField:required:invalid{
  color: transparent;
}
#dateField:required:invalid::-webkit-datetime-edit{
  color: transparent;
}

.minput{
  width: 100%;
  padding: 10px 12px;
  border-radius: 0;
  border: 2px solid rgba(214,162,74,.75);
  background: var(--bg);
  color: var(--black);
  font-weight: 800;
  outline: none;
}

.minput--ta{ 
    resize:vertical; 
    min-height:90px; 
}

.msubmit{
  margin-top:6px;
  width:100%;
  padding:12px 10px;
  border:0;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  background: var(--bg);
  color:rgba(214,162,74,.95);
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
}

.mstatus{
  margin:0;
  text-align:center;
  color:rgba(255,255,255,.8);
  font-weight:700;
  font-size:13px;
}

.mwarning{
  margin: -6px 0 2px;
  text-align: center;
  font-weight: 900;
  color: rgba(214,162,74,.95);
  letter-spacing: .02em;
}

/* helper */
[hidden]{ display:none !important; }