/* ============================================
   Свадебный салон «Натали» — базовые стили
   Палитра утверждена клиентом: крем + золото
   ============================================ */

:root{
  /* фон и поверхности */
  --cream:        #FBF7F2;
  --cream-deep:   #F4ECE1;
  --cream-card:   #FFFDFA;
  --silk:         #F7F0E7;

  /* золото */
  --gold:         #B8975B;
  --gold-soft:    #CBAE7B;
  --gold-line:    rgba(184,151,91,.32);
  --gold-glow:    rgba(184,151,91,.14);

  /* текст */
  --ink:          #3A2E24;
  --ink-soft:     #6B5B4C;
  --ink-mute:     #93826F;

  /* типографика */
  --serif:  'Playfair Display', 'Times New Roman', serif;
  --sans:   'Jost', -apple-system, 'Helvetica Neue', sans-serif;

  /* ритм */
  --pad:    clamp(20px, 5vw, 80px);
  --gap-s:  clamp(32px, 5vw, 56px);
  --gap-m:  clamp(64px, 9vw, 120px);
  --gap-l:  clamp(90px, 13vw, 180px);
  --radius: 28px;

  /* движение */
  --ease:   cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
}

h1{ font-size:clamp(44px, 6.4vw, 92px); }
h2{ font-size:clamp(32px, 4.4vw, 62px); }
h3{ font-size:clamp(21px, 2vw, 27px); line-height:1.25; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:1560px; margin:0 auto; padding:0 var(--pad); }
.narrow{ max-width:1160px; }

/* ——— мелкие капсы для надписей-меток ——— */
.eyebrow{
  font-size:12px;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 20px;
}

/* ——— жемчужина-разделитель ——— */
.pearl-rule{
  display:flex;
  align-items:center;
  gap:16px;
  margin:34px 0;
}
.pearl-rule::before,
.pearl-rule::after{
  content:'';
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.pearl-rule.left::before{ display:none; }
.pearl-rule.left{ justify-content:flex-start; }
.pearl-rule.left::after{ max-width:240px; }

.pearl{
  width:13px; height:13px;
  border-radius:50%;
  flex:none;
  background:
    radial-gradient(circle at 34% 30%, #fff 0%, #F6EFE3 38%, #DCC9A8 72%, #BBA073 100%);
  box-shadow:0 1px 4px rgba(184,151,91,.4);
}
.pearl.sm{ width:8px; height:8px; }

/* ============================================
   Кнопки
   ============================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:19px 38px;
  font-size:15px;
  font-weight:400;
  letter-spacing:.04em;
  border-radius:4px;
  border:1px solid transparent;
  transition:.45s var(--ease);
  position:relative;
  overflow:hidden;
  text-align:center;
}

.btn-gold{
  background:var(--gold);
  color:#fff;
  box-shadow:0 8px 24px rgba(184,151,91,.24);
}
.btn-gold:hover{
  background:#A6854A;
  box-shadow:0 12px 32px rgba(184,151,91,.36);
  transform:translateY(-2px);
}

.btn-ghost{
  background:rgba(255,255,255,.7);
  border-color:var(--gold-line);
  color:var(--ink);
}
.btn-ghost:hover{
  background:#fff;
  border-color:var(--gold-soft);
  transform:translateY(-2px);
}

/* ============================================
   Шапка
   ============================================ */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  background:rgba(251,247,242,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:.5s var(--ease);
}
.header.scrolled{
  border-bottom-color:var(--gold-line);
  box-shadow:0 4px 30px rgba(58,46,36,.05);
}
.header-in{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,48px);
  height:clamp(76px, 8vw, 104px);
}

.logo{ flex:none; line-height:1; }
.logo-name{
  font-family:var(--serif);
  font-size:clamp(28px,3vw,42px);
  font-style:italic;
  color:var(--gold);
  display:block;
}
.logo-sub{
  font-size:9px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-mute);
  display:block;
  margin-top:4px;
  padding-left:3px;
}

.nav{
  display:flex;
  gap:clamp(14px,2vw,34px);
  margin-left:auto;
}
.nav a{
  font-size:12px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 0;
  position:relative;
  white-space:nowrap;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width .4s var(--ease);
}
.nav a:hover{ color:var(--gold); }
.nav a:hover::after{ width:100%; }

.header-tel{
  font-size:16px;
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.header-tel:hover{ color:var(--gold); }

.header .btn{ padding:15px 28px; font-size:14px; }

/* бургер */
.burger{
  display:none;
  width:44px; height:44px;
  margin-left:auto;
  background:none;
  border:1px solid var(--gold-line);
  border-radius:4px;
  position:relative;
}
.burger span{
  position:absolute;
  left:12px; right:12px;
  height:1px;
  background:var(--ink);
  transition:.4s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:21.5px; }
.burger span:nth-child(3){ top:27px; }
.burger.open span:nth-child(1){ top:21.5px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:21.5px; transform:rotate(-45deg); }

/* ============================================
   Появление при скролле
   ============================================ */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }
.reveal.d4{ transition-delay:.48s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================
   Первый экран
   ============================================ */
.hero{
  position:relative;
  padding-top:clamp(110px, 12vw, 150px);
  padding-bottom:var(--gap-s);
  overflow:hidden;
}

/* складки шёлка слева */
.hero::before{
  content:'';
  position:absolute;
  left:0; top:0;
  width:46%; height:100%;
  pointer-events:none;
  background:
    linear-gradient(103deg, rgba(255,255,255,.85) 0%, transparent 26%),
    linear-gradient(84deg,  rgba(226,212,192,.34) 4%, transparent 22%),
    linear-gradient(97deg,  rgba(255,255,255,.7) 32%, transparent 52%),
    linear-gradient(79deg,  rgba(214,196,170,.26) 58%, transparent 76%),
    linear-gradient(101deg, rgba(255,255,255,.55) 80%, transparent 96%);
  filter:blur(1px);
}
/* тёплое свечение справа */
.hero::after{
  content:'';
  position:absolute;
  right:-10%; top:8%;
  width:52%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow) 0%, transparent 62%);
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr minmax(380px, .82fr);
  gap:clamp(30px, 5vw, 80px);
  align-items:center;
}

.hero-title{ margin-bottom:0; }
.hero-lead{
  font-size:clamp(19px, 1.6vw, 24px);
  font-weight:300;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:24ch;
  margin-bottom:40px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

/* ——— фото в арке ——— */
.hero-visual{ position:relative; }

.arch{
  position:relative;
  border-radius:300px 300px var(--radius) var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  background:linear-gradient(160deg, #EFE6D9, #E3D5C1);
  box-shadow:0 30px 70px rgba(58,46,36,.14);
}
.arch img{
  width:100%; height:100%;
  object-fit:cover;
  /* фото — портретный кадр телефона (9:16), контейнер — 3:4,
     центр среза 50% срезал причёску сверху. Сдвигаем точку
     обрезки выше, чтобы запас уходил вниз, а не в макушку */
  object-position:center 25%;
}
/* тонкая золотая обводка с отступом */
.arch-frame{
  position:absolute;
  inset:-14px;
  border:1px solid var(--gold-line);
  border-radius:314px 314px 42px 42px;
  pointer-events:none;
}

/* заглушка, пока нет фото */
.arch-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:40px;
  color:var(--ink-mute);
  font-size:14px;
  letter-spacing:.08em;
}
.arch-placeholder svg{ opacity:.45; }

/* плашка с адресом */
.hero-place{
  position:absolute;
  right:-34px;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:150px;
  padding:26px 18px;
  text-align:center;
  background:var(--cream-card);
  border:1px solid var(--gold-line);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(58,46,36,.1);
}
.hero-place .pearl{ margin:14px auto; }
.hero-place-city{
  font-family:var(--serif);
  font-size:22px;
  color:var(--ink);
}
.hero-place-addr{
  font-size:14px;
  line-height:1.45;
  color:var(--ink-soft);
}
.hero-place svg{ margin:0 auto 12px; display:block; }

/* ——— полоса категорий ——— */
.hero-cats{
  position:relative;
  z-index:2;
  margin-top:clamp(36px, 5vw, 64px);
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,20px);
  flex-wrap:wrap;
  padding:26px clamp(20px,3vw,44px);
  max-width:820px;
  background:rgba(255,253,250,.78);
  border:1px solid var(--gold-line);
  border-radius:20px;
  backdrop-filter:blur(6px);
}
.cat{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1 1 200px;
  transition:.4s var(--ease);
}
.cat:hover{ transform:translateY(-3px); }
.cat-ic{
  width:56px; height:56px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-line);
  border-radius:50%;
  background:#fff;
  transition:.4s var(--ease);
}
.cat:hover .cat-ic{ border-color:var(--gold-soft); box-shadow:0 6px 18px var(--gold-glow); }
.cat-label{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.2;
  color:var(--ink);
}
.cat-div{
  width:1px; height:40px;
  background:var(--gold-line);
  flex:none;
}

/* ============================================
   Секция «боли»
   ============================================ */
.section{ padding:var(--gap-l) 0; position:relative; }
.section-head{ max-width:760px; margin-bottom:var(--gap-s); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .pearl-rule{ justify-content:center; }
.section-lead{
  font-size:19px;
  color:var(--ink-soft);
  max-width:62ch;
}

.pains{ background:var(--silk); }

.pain-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:clamp(16px,2vw,26px);
  margin-bottom:var(--gap-s);
}
.pain{
  position:relative;
  padding:62px 32px 34px;
  background:var(--cream-card);
  border:1px solid rgba(184,151,91,.16);
  border-radius:var(--radius);
  font-family:var(--serif);
  font-size:clamp(19px,1.5vw,22px);
  font-style:italic;
  line-height:1.4;
  color:var(--ink);
  transition:.5s var(--ease);
}
.pain:hover{
  border-color:var(--gold-line);
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(58,46,36,.08);
}
.pain::before{
  content:'«';
  position:absolute;
  top:-6px; left:24px;
  font-family:var(--serif);
  font-size:56px;
  line-height:1;
  color:var(--gold);
  opacity:.28;
  pointer-events:none;
}

.pains-answer{
  text-align:center;
  max-width:800px;
  margin:0 auto;
  font-size:clamp(20px,2vw,26px);
  font-weight:300;
  line-height:1.55;
  color:var(--ink);
}
.pains-answer strong{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  color:var(--gold);
}

/* ============================================
   Цифры
   ============================================ */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:clamp(24px,3vw,40px);
  padding:clamp(40px,5vw,64px) 0;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
.stat{ text-align:center; }
.stat-num{
  font-family:var(--serif);
  font-size:clamp(46px,5vw,72px);
  line-height:1;
  color:var(--gold);
  display:block;
}
.stat-num small{ font-size:.5em; vertical-align:super; margin-left:2px; }
.stat-txt{
  margin-top:12px;
  font-size:14px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ============================================
   Что ждёт в салоне
   ============================================ */
.offer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px,1fr));
  gap:clamp(16px,2vw,24px);
}
.offer{
  padding:42px 34px;
  background:var(--cream-card);
  border:1px solid rgba(184,151,91,.16);
  border-radius:var(--radius);
  transition:.5s var(--ease);
  position:relative;
  overflow:hidden;
}
.offer::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transition:transform .6s var(--ease);
}
.offer:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(58,46,36,.09);
  border-color:var(--gold-line);
}
.offer:hover::after{ transform:scaleX(1); }
.offer-ic{
  width:64px; height:64px;
  display:grid; place-items:center;
  border:1px solid var(--gold-line);
  border-radius:50%;
  margin-bottom:26px;
  transition:.5s var(--ease);
}
.offer:hover .offer-ic{
  background:var(--gold);
  border-color:var(--gold);
}
.offer:hover .offer-ic svg{ stroke:#fff; }
.offer-ic svg{ transition:.5s var(--ease); }
.offer-count{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.offer h3{ margin-bottom:12px; }
.offer p{
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.6;
}

/* ============================================
   Примерка: стилисты и швея
   ============================================ */
.fitting{ background:var(--silk); }
.fitting-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,80px);
  align-items:center;
}
.fitting-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:22px;
}
.fitting-list li{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.fitting-list .pearl{ margin-top:10px; }
.fitting-list h3{ margin-bottom:6px; }
.fitting-list p{
  font-size:16px;
  color:var(--ink-soft);
}

.quote-card{
  padding:clamp(40px,5vw,70px);
  background:var(--cream-card);
  border:1px solid var(--gold-line);
  border-radius:var(--radius);
  text-align:center;
  box-shadow:0 22px 56px rgba(58,46,36,.07);
}
.quote-card .big{
  font-family:var(--serif);
  font-size:clamp(26px,2.6vw,38px);
  font-style:italic;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:18px;
}
.quote-card .sml{
  font-size:17px;
  color:var(--ink-soft);
}
.quote-card .gold{ color:var(--gold); }

/* ============================================
   Витрина каталога (превью)
   ============================================ */
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:clamp(12px,1.6vw,20px);
  margin-bottom:var(--gap-s);
}
.dress-card{
  position:relative;
  aspect-ratio:3/4;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(160deg,#EFE6D9,#E0D0BA);
  display:grid;
  place-items:center;
  color:var(--ink-mute);
  font-size:13px;
  letter-spacing:.1em;
  text-align:center;
  padding:20px;
  transition:.55s var(--ease);
}
.dress-card:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 54px rgba(58,46,36,.16);
}
.dress-card img{ width:100%; height:100%; object-fit:cover; }

/* ============================================
   Рассрочка и гайд
   ============================================ */
.bonus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.bonus{
  padding:clamp(38px,4vw,56px);
  border-radius:var(--radius);
  border:1px solid var(--gold-line);
  background:var(--cream-card);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.bonus.dark{
  background:linear-gradient(150deg, #48382B, #302419);
  border-color:transparent;
  color:#F3EADC;
}
.bonus.dark h3, .bonus.dark .eyebrow{ color:#E6CFA3; }
.bonus.dark p{ color:rgba(243,234,220,.78); }
.bonus.dark .btn-ghost{
  background:transparent;
  border-color:rgba(230,207,163,.45);
  color:#F3EADC;
}
.bonus.dark .btn-ghost:hover{ background:rgba(230,207,163,.14); }
.bonus p{ color:var(--ink-soft); font-size:16px; }
.bonus .btn{ margin-top:auto; }

/* ============================================
   Контакты
   ============================================ */
.contacts{ background:var(--silk); }
.contacts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,70px);
}
.contact-block{ margin-bottom:34px; }
.contact-label{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.contact-value{
  font-family:var(--serif);
  font-size:clamp(22px,2vw,30px);
  line-height:1.35;
  color:var(--ink);
  display:block;
  transition:color .35s var(--ease);
}
a.contact-value:hover{ color:var(--gold); }

.socials{ display:flex; gap:12px; margin-top:8px; }
.social{
  width:54px; height:54px;
  display:grid; place-items:center;
  border:1px solid var(--gold-line);
  border-radius:50%;
  background:var(--cream-card);
  transition:.45s var(--ease);
}
.social:hover{
  background:var(--gold);
  border-color:var(--gold);
  transform:translateY(-3px);
}
.social:hover svg{ fill:#fff; stroke:#fff; }

.map-card{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--gold-line);
  min-height:380px;
  background:var(--cream-deep);
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  color:var(--ink-mute);
}
.map-card iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; }

/* ============================================
   Подвал
   ============================================ */
.footer{
  background:#2E2419;
  color:rgba(243,234,220,.6);
  padding:clamp(50px,6vw,80px) 0 34px;
  font-size:14px;
}
.footer-in{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:34px;
  border-bottom:1px solid rgba(230,207,163,.16);
}
.footer .logo-name{ color:#E6CFA3; }
.footer .logo-sub{ color:rgba(243,234,220,.45); }
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  max-width:520px;
}
.footer-nav a{
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .3s var(--ease);
}
.footer-nav a:hover{ color:#E6CFA3; }
.footer-bottom{
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 30px;
  justify-content:space-between;
  font-size:13px;
  color:rgba(243,234,220,.45);
}

/* ============================================
   Адаптив
   ============================================ */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:520px; margin:0 auto; width:100%; }
  .hero-place{ right:-12px; }
  .fitting-grid,
  .contacts-grid{ grid-template-columns:1fr; }
  .nav{ display:none; }
  .header-tel{ margin-left:auto; }
  .burger{ display:block; margin-left:0; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .header .btn{ display:none; }
  .header-tel{ font-size:15px; }
  .hero{ padding-top:104px; }
  .hero-cats{ padding:22px; }
  .cat{ flex:1 1 100%; }
  .cat-div{ display:none; }
  .hero-place{
    position:static;
    transform:none;
    width:100%;
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:left;
    padding:18px 22px;
  }
  .hero-place .pearl{ display:none; }
  .hero-place svg{ margin:0; }
  .hero-actions .btn{ flex:1 1 100%; }
  .arch{ border-radius:220px 220px 20px 20px; }
  .arch-frame{ display:none; }
}

/* выпадающее меню на мобильном */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:99;
  background:var(--cream);
  padding:clamp(100px,16vw,140px) var(--pad) 40px;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:.45s var(--ease);
}
.mobile-nav.open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav a{
  font-family:var(--serif);
  font-size:26px;
  padding:16px 0;
  border-bottom:1px solid var(--gold-line);
}
.mobile-nav .btn{ margin-top:28px; }

/* ============================================
   Правки после первой примерки макета
   ============================================ */

/* кнопка в шапке не должна ломаться на две строки */
.header .btn{ white-space:nowrap; padding:15px 24px; }
.nav{ margin-left:auto; }

/* дыхание между секциями чуть плотнее */
:root{ --gap-l: clamp(76px, 9vw, 130px); }

/* ——— шёлк слева: мягкий край вместо резкого обрыва ——— */
.hero::before{
  width:52%;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 0%, #000 52%, transparent 100%);
}

/* ——— арка держит высоту экрана ——— */
.hero-visual{
  display:flex;
  justify-content:center;
}
.arch-wrap{
  position:relative;
  width:fit-content;
  max-width:100%;
}
.arch{
  width:auto;
  max-height:min(70vh, 640px);
  height:min(70vh, 640px);
}
.arch-frame{ inset:-14px; }

/* ——— карточки болей: ровный ряд из четырёх ——— */
@media (min-width:1000px){
  .pain-grid{ grid-template-columns:repeat(4,1fr); }
  .pain{ padding:58px 26px 30px; font-size:20px; }
}

/* ——— пять карточек салона: 3 сверху, 2 снизу, без сирот ——— */
@media (min-width:1080px){
  .offer-grid{ grid-template-columns:repeat(6,1fr); }
  .offer:nth-child(1),
  .offer:nth-child(2),
  .offer:nth-child(3){ grid-column:span 2; }
  .offer:nth-child(4),
  .offer:nth-child(5){ grid-column:span 3; }
}

/* ——— заголовок контактов не липнет к подзаголовку ——— */
.contacts .section-head .section-lead{ margin-top:14px; }

/* ——— шапка: ужимаем, чтобы кнопка не резалась ——— */
.header-in{ gap:clamp(14px, 1.8vw, 32px); }
.nav{ gap:clamp(12px, 1.5vw, 24px); }
.nav a{ font-size:11px; letter-spacing:.12em; }
.header .btn{ flex:none; }
.header-tel{ flex:none; }

@media (max-width:1400px){
  .header-tel{ display:none; }
}
@media (max-width:1240px){
  .nav a{ letter-spacing:.08em; }
}

/* ——— на узких экранах арка тянется по ширине, а не по высоте ——— */
@media (max-width:1100px){
  .arch-wrap{ width:100%; max-width:480px; margin:0 auto; }
  .arch{
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:3/4;
  }
}

/* подстраховка от горизонтальной прокрутки */
body{ max-width:100vw; }

/* на узких экранах ручные переносы в заголовках мешают */
@media (max-width:760px){
  .section-head h2 br{ display:none; }
  .pains-answer{ font-size:19px; }
}

/* ——— шапка на планшете: кнопка справа, бургер последним ——— */
@media (max-width:1400px){
  .header .btn{ margin-left:auto; }
}
@media (max-width:760px){
  .header .btn{ display:none; }
  .burger{ margin-left:auto; }
}

/* скрытые элементы должны действительно скрываться */
[hidden]{ display:none !important; }

/* ——— соцсети в тёмном подвале ——— */
.footer-socials{
  display:flex;
  gap:10px;
  margin-top:14px;
}
.footer-social{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid rgba(230,207,163,.35);
  border-radius:50%;
  transition:.35s var(--ease);
}
.footer-social:hover{
  background:#E6CFA3;
  border-color:#E6CFA3;
}
.footer-social:hover svg{ stroke:#2E2419; }
.footer-social svg{ transition:stroke .35s var(--ease); }