/* =========================================================
   DARYA BEAUTY STUDIO — Batumi
   Lashes & Brows · luxury dark-gold theme
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:        #0B0B0C;
  --ink-2:      #121214;
  --ink-3:      #1A1A1E;
  --ink-4:      #24242A;

  --cream:      #FAF7F2;
  --cream-2:    #F1EAE0;
  --cream-3:    #E4D9C9;

  --gold:       #C9A24D;   /* только на тёмном фоне: 8.2:1 */
  --gold-deep:  #A87C28;
  --gold-lite:  #E9D3A0;
  --gold-glow:  rgba(201,162,77,.35);
  /* Золото для СВЕТЛЫХ секций. #C9A24D на кремовом даёт лишь 2.2:1 —
     нечитаемо. Этот оттенок даёт 6.3:1 и проходит AA на любом кегле. */
  --gold-ink:   #7A5514;

  --grad-gold:  linear-gradient(120deg,#A87C28 0%,#E4C579 28%,#F6E7BD 48%,#D9B45F 68%,#A87C28 100%);
  --grad-gold-b:linear-gradient(135deg,#B4882F 0%,#EBD199 50%,#B4882F 100%);
  /* тот же приём для градиентного текста на светлом: светлые стопы
     исходного градиента на кремовом дают ~1.2:1 и просто исчезают */
  --grad-gold-ink: linear-gradient(120deg,#6E4B10 0%,#A67A26 45%,#7A5514 100%);

  --txt-dark:   #16161A;
  --txt-dark-2: #55524C;
  --txt-lite:   #F6F2EB;
  --txt-lite-2: rgba(246,242,235,.66);
  /* было .42 → 3.8:1, мелкие подписи выглядели блёкло; .56 даёт 5.9:1 */
  --txt-lite-3: rgba(246,242,235,.56);

  --line-dark:  rgba(246,242,235,.12);
  --line-lite:  rgba(22,22,26,.10);

  --ff-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-1: 0 4px 24px rgba(0,0,0,.18);
  --shadow-2: 0 18px 50px -12px rgba(0,0,0,.45);
  --shadow-gold: 0 14px 44px -14px rgba(201,162,77,.55);

  --wrap: 1240px;
  --pad: clamp(18px, 5vw, 48px);
  --sec-y: clamp(64px, 9vw, 130px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 78px;
}
@media (max-width:900px){ :root{ --header-h: 62px; } }

/* Georgian typography override */
html[lang="ka"]{
  --ff-display: "Noto Serif Georgian", "Cormorant Garamond", Georgia, serif;
  --ff-body:    "Noto Sans Georgian", "Inter", sans-serif;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
  /* clip, а не hidden: не создаёт скролл-контейнер, поэтому липкая шапка,
     scroll-padding-top и position:fixed продолжают работать корректно */
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ink); color:var(--txt-lite);
  font-family:var(--ff-body); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Не ставим overflow-x:hidden на body: это делает body скролл-контейнером и может
   сломать window.scrollY (липкая шапка) и scroll-padding-top. Защита от горизонтального
   переполнения стоит на html через overflow-x:clip. */
img,svg,picture{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:#0B0B0C; }

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); position:relative; }
.section--light{ background:var(--cream); color:var(--txt-dark); }
.section--ink{ background:var(--ink-2); }
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* gold hairline separators */
.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(201,162,77,.45),transparent); border:0; margin:0; }

/* ---------- 4. TYPOGRAPHY ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:clamp(10px,1.6vw,12px); letter-spacing:.34em; text-transform:uppercase;
  font-weight:600; color:var(--gold);
}
.eyebrow::before{ content:""; width:clamp(22px,5vw,40px); height:1px; background:currentColor; opacity:.7; }
.eyebrow--center::after{ content:""; width:clamp(22px,5vw,40px); height:1px; background:currentColor; opacity:.7; }

.h1{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(38px,7.4vw,80px); line-height:1.03; letter-spacing:-.015em;
}
.h2{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(30px,5.2vw,56px); line-height:1.08; letter-spacing:-.01em;
}
.h3{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(21px,2.7vw,28px); line-height:1.2;
}
.h4{ font-size:clamp(15px,1.8vw,17px); font-weight:600; letter-spacing:.01em; }

/* Защита от переполнения длинными словами (актуально для грузинского).
   Именно `anywhere`, а не `break-word`: только он уменьшает min-content-ширину,
   иначе грид-колонка раздувается под самое длинное слово и текст вылезает наружу. */
.h1,.h2,.h3,.h4,.svc__body h3,.feat h3,.step h3,.faq summary,.price__name b{ overflow-wrap:anywhere; }
/* грид-элементы по умолчанию имеют min-width:auto — снимаем, чтобы они могли сжиматься */
.hero__copy > *,.sec-head > *,.about__copy > *,.svc__body > *{ min-width:0; }

/* --- Грузинская типографика ---------------------------------------------
   Грузинское письмо шире кириллицы/латиницы при том же кегле и не имеет
   заглавных букв, поэтому уменьшаем шкалу заголовков и разрядку. */
html[lang="ka"] .h1{ font-size:clamp(29px,5.3vw,58px); line-height:1.16; font-weight:400; letter-spacing:0; }
html[lang="ka"] .h2{ font-size:clamp(24px,3.9vw,42px); line-height:1.2; font-weight:400; letter-spacing:0; }
html[lang="ka"] .h3{ font-size:clamp(19px,2.3vw,24px); line-height:1.3; }
html[lang="ka"] .eyebrow{ letter-spacing:.14em; }
html[lang="ka"] .btn{ letter-spacing:.02em; }
html[lang="ka"] .hero__trust span,
html[lang="ka"] .badge-float span,
html[lang="ka"] .crow dt,
html[lang="ka"] .footer h4,
html[lang="ka"] .gallery figure figcaption{ letter-spacing:.06em; }
html[lang="ka"] .drawer nav a{ font-size:clamp(22px,5.4vw,30px); }
html[lang="ka"] .nav a{ font-size:13px; }

.gold-text{
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.italic-accent{ font-style:italic; }

/* --- Контраст на светлых секциях -----------------------------------------
   Кремовый фон + тонкая антиква + светлое золото читались блёкло.
   Здесь золото темнее, а начертания заголовков плотнее. */
.section--light .eyebrow{ color:var(--gold-ink); }
/* Именно background-image, а НЕ сокращённое background: шорткат сбрасывает
   background-clip в border-box, и градиент закрашивает весь блок вместо букв. */
.section--light .gold-text{
  background-image:var(--grad-gold-ink);
  -webkit-background-clip:text; background-clip:text;
}
.section--light .h1,
.section--light .h2{ font-weight:400; }
.section--light .h3{ font-weight:500; }

.lead{ font-size:clamp(15px,1.9vw,18px); line-height:1.72; color:var(--txt-lite-2); }
.section--light .lead{ color:var(--txt-dark-2); }
.muted{ color:var(--txt-lite-2); }
.section--light .muted{ color:var(--txt-dark-2); }

.sec-head{ display:grid; gap:16px; max-width:720px; margin-bottom:clamp(34px,5vw,60px); }
.sec-head--center{ margin-inline:auto; text-align:center; justify-items:center; }

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-py:15px; --btn-px:30px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:var(--btn-py) var(--btn-px); border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .3s, border-color .3s, background-color .3s;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--gold{ background:var(--grad-gold-b); color:#14100A; box-shadow:var(--shadow-gold); background-size:200% 100%; }
.btn--gold:hover{ background-position:100% 0; box-shadow:0 18px 50px -12px rgba(201,162,77,.7); }

.btn--ghost{ border:1px solid rgba(246,242,235,.28); color:var(--txt-lite); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-lite); background:rgba(201,162,77,.07); }
.section--light .btn--ghost{ border-color:rgba(22,22,26,.3); color:var(--txt-dark); }
.section--light .btn--ghost:hover{ border-color:var(--gold-ink); color:var(--gold-ink); background:rgba(201,162,77,.12); }

.btn--wa{ background:#25D366; color:#08240F; }
.btn--wa:hover{ background:#1FBE5A; box-shadow:0 14px 40px -14px rgba(37,211,102,.8); }

.btn--sm{ --btn-py:11px; --btn-px:20px; font-size:12px; }
.btn--block{ width:100%; }

/* ---------- 6. HEADER ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:900;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background-color .4s var(--ease), backdrop-filter .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(11,11,12,.82);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-dark);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.header__inner{ display:flex; align-items:center; gap:clamp(14px,3vw,36px); width:100%; }
.brand{ flex:none; display:block; }
.brand img{ height:clamp(30px,4.4vw,42px); width:auto; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-inline:auto; }
.nav a{
  position:relative; font-size:13.5px; font-weight:500; letter-spacing:.05em;
  color:var(--txt-lite-2); padding-block:6px; transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--grad-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav a:hover{ color:var(--txt-lite); }
.nav a:hover::after{ transform:scaleX(1); }

.header__side{ display:flex; align-items:center; gap:12px; flex:none; }

/* language switcher */
.lang{ display:flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--line-dark); border-radius:999px; }
.lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:32px; padding-inline:8px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-lite-3); transition:.3s;
}
.lang a:hover{ color:var(--txt-lite); }
.lang a[aria-current="true"]{ background:var(--grad-gold-b); color:#14100A; }

/* burger */
.burger{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-dark); align-items:center; justify-content:center; flex:none;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--txt-lite); position:relative; transition:.3s var(--ease); }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--txt-lite); transition:.3s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:890;
  background:rgba(9,9,10,.97);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  padding:calc(var(--header-h) + 22px) var(--pad) 34px;
  display:flex; flex-direction:column; gap:26px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out), visibility .35s;
  overflow-y:auto;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer nav{ display:grid; gap:2px; }
.drawer nav a{
  font-family:var(--ff-display); font-size:clamp(26px,7vw,38px); font-weight:300;
  padding-block:10px; border-bottom:1px solid var(--line-dark);
}
.drawer nav a span{ font-family:var(--ff-body); font-size:11px; letter-spacing:.2em; color:var(--gold); display:block; margin-bottom:-4px; }
.drawer__foot{ margin-top:auto; display:grid; gap:14px; }

/* ---------- 7. HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(40px,7vw,80px));
  padding-bottom:clamp(60px,8vw,110px);
  background:
    radial-gradient(80% 60% at 78% 18%, rgba(201,162,77,.20), transparent 62%),
    radial-gradient(60% 50% at 8% 88%, rgba(201,162,77,.10), transparent 60%),
    linear-gradient(180deg,#0B0B0C 0%,#111013 55%,#0B0B0C 100%);
}
.hero::after{ /* film grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.34'/></svg>");
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,70px); align-items:center;
}
/* min-width:0 — иначе длинное неразрывное слово растягивает колонку грида */
.hero__copy{ display:grid; gap:clamp(20px,2.6vw,30px); max-width:640px; min-width:0; }
.hero h1 .line{ display:block; }
.hero__sub{ max-width:52ch; }

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

.hero__trust{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,38px);
  padding-top:clamp(14px,2.4vw,22px); border-top:1px solid var(--line-dark);
}
.hero__trust div{ display:grid; gap:2px; }
.hero__trust b{
  font-family:var(--ff-display); font-size:clamp(26px,3.6vw,38px); font-weight:400; line-height:1;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__trust span{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--txt-lite-3); }

/* arch photo */
.hero__media{ position:relative; justify-self:center; width:min(100%,440px); }
.arch{
  position:relative; border-radius:999px 999px 20px 20px;
  overflow:hidden; box-shadow:var(--shadow-2);
  aspect-ratio:41/72;
}
.arch img{ width:100%; height:100%; object-fit:cover; object-position:52% 42%; }
.arch::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.55) 100%);
}
.hero__media::before{ /* offset gold frame */
  content:""; position:absolute; inset:18px -18px -18px 18px;
  border:1px solid rgba(201,162,77,.55); border-radius:999px 999px 20px 20px;
  z-index:-1;
}
.hero__media::after{ /* glow */
  content:""; position:absolute; left:50%; top:44%; translate:-50% -50%;
  width:118%; aspect-ratio:1; border-radius:50%; z-index:-2;
  background:radial-gradient(circle,var(--gold-glow),transparent 66%); filter:blur(28px);
}
.badge-float{
  position:absolute; z-index:3;
  display:grid; gap:2px; padding:14px 20px; border-radius:var(--r-md);
  background:rgba(18,18,20,.72); border:1px solid rgba(201,162,77,.4);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-1);
}
.badge-float b{ font-family:var(--ff-display); font-size:24px; font-weight:400; color:var(--gold-lite); line-height:1.1; }
.badge-float span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-lite-3); }
.badge-float--tl{ left:-14px; top:16%; }
.badge-float--br{ right:-14px; bottom:9%; }

/* scroll hint */
.scroll-hint{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--txt-lite-3); }
.scroll-hint i{ display:block; width:38px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }

/* ---------- 8. MARQUEE ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line-dark); background:var(--ink-2);
  padding-block:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:marq 38s linear infinite; }
.marquee ul{ display:flex; align-items:center; gap:clamp(24px,4vw,52px); padding-right:clamp(24px,4vw,52px); }
.marquee li{
  display:flex; align-items:center; gap:clamp(24px,4vw,52px);
  font-family:var(--ff-display); font-size:clamp(17px,2.3vw,26px); font-weight:300;
  color:var(--txt-lite-2); white-space:nowrap;
}
.marquee li::after{ content:"✦"; font-size:.5em; color:var(--gold); }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- 9. SERVICES ---------- */
.services__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px);
}
.svc{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line-dark); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}
.svc:hover{ transform:translateY(-6px); border-color:rgba(201,162,77,.45); box-shadow:var(--shadow-2); }
.svc__img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.svc:hover .svc__img img{ transform:scale(1.07); }
.svc__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,12,.05),rgba(11,11,12,.85)); }
.svc__price{
  position:absolute; z-index:2; right:12px; top:12px;
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.02em;
  background:var(--grad-gold-b); color:#14100A;
}
.svc__body{ display:flex; flex-direction:column; gap:12px; padding:clamp(18px,2vw,24px); flex:1; }
.svc__body h3{ font-family:var(--ff-display); font-size:clamp(20px,2.2vw,24px); font-weight:400; }
.svc__body p{ font-size:14px; line-height:1.62; color:var(--txt-lite-2); }
.svc__list{ display:grid; gap:7px; margin-top:auto; padding-top:8px; }
.svc__list li{ position:relative; padding-left:20px; font-size:13px; color:var(--txt-lite-2); }
.svc__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:9px; height:9px;
  background:var(--grad-gold-b); border-radius:2px; rotate:45deg;
}
.svc__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.svc__link svg{ width:15px; height:15px; transition:transform .35s var(--ease-out); }
.svc:hover .svc__link svg{ transform:translateX(5px); }

/* ---------- 10. PRICE LIST ---------- */
.price__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); }
.price__col > h3{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-family:var(--ff-display); font-size:clamp(24px,3vw,34px); font-weight:500; letter-spacing:.02em;
  color:var(--txt-dark);
}
.price__col > h3::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(122,85,20,.65),transparent); }
.price__row{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:10px;
  padding-block:16px; border-bottom:1px dashed rgba(22,22,26,.24);
}
.price__row:last-child{ border-bottom:0; }
.price__name{ display:grid; gap:3px; }
.price__name b{ font-size:15.5px; font-weight:600; color:var(--txt-dark); }
.price__name small{ font-size:12.5px; line-height:1.5; color:var(--txt-dark-2); }
.price__val{ font-family:var(--ff-display); font-size:clamp(20px,2.4vw,26px); font-weight:600; color:var(--gold-ink); white-space:nowrap; }
.price__val sup{ font-family:var(--ff-body); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-dark-2); margin-right:4px; vertical-align:.5em; }

.price__note{
  margin-top:clamp(26px,3.5vw,40px); padding:clamp(18px,2.4vw,26px);
  border:1px solid rgba(122,85,20,.34); border-radius:var(--r-md);
  background:linear-gradient(120deg,rgba(201,162,77,.14),rgba(201,162,77,.05));
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.price__note p{ font-size:14.5px; color:var(--txt-dark-2); max-width:62ch; }

/* ---------- 11. GALLERY ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(22px,3vw,34px); }
.filters button{
  padding:10px 18px; border-radius:999px; border:1px solid var(--line-dark);
  font-size:12.5px; font-weight:500; letter-spacing:.05em; color:var(--txt-lite-2);
  transition:.32s var(--ease);
}
.filters button:hover{ color:var(--txt-lite); border-color:rgba(201,162,77,.5); }
.filters button[aria-pressed="true"]{ background:var(--grad-gold-b); border-color:transparent; color:#14100A; font-weight:600; }

.gallery{ column-count:4; column-gap:clamp(10px,1.4vw,18px); }
.gallery figure{
  break-inside:avoid; margin:0 0 clamp(10px,1.4vw,18px);
  position:relative; border-radius:var(--r-md); overflow:hidden; cursor:zoom-in;
  background:var(--ink-3);
  transition:opacity .4s, transform .4s var(--ease-out);
}
.gallery figure img{ width:100%; transition:transform .8s var(--ease-out), filter .5s; }
.gallery figure::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(180deg,rgba(11,11,12,0) 40%,rgba(11,11,12,.7));
  transition:opacity .4s;
}
.gallery figure figcaption{
  position:absolute; z-index:2; left:14px; right:14px; bottom:12px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-lite);
  opacity:0; transform:translateY(6px); transition:.4s var(--ease-out);
}
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figure:hover::after,.gallery figure:hover figcaption{ opacity:1; transform:none; }
.gallery figure.is-hidden{ display:none; }

.gallery-more{ display:flex; justify-content:center; margin-top:clamp(24px,3vw,38px); }

/* lightbox */
.lbox{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(6,6,7,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:clamp(12px,4vw,48px);
}
.lbox.is-open{ display:flex; }
.lbox img{ max-width:100%; max-height:86vh; border-radius:var(--r-md); box-shadow:var(--shadow-2); }
.lbox__cap{ position:absolute; bottom:max(14px,3vh); left:0; right:0; text-align:center; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lite); }
.lbox__btn{
  position:absolute; display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-dark); background:rgba(20,20,22,.7); color:var(--txt-lite); transition:.3s;
}
.lbox__btn:hover{ border-color:var(--gold); color:var(--gold-lite); }
.lbox__btn svg{ width:22px; height:22px; }
.lbox__close{ top:max(14px,2.4vh); right:max(14px,2.4vw); }
.lbox__prev{ left:max(10px,1.6vw); top:50%; translate:0 -50%; }
.lbox__next{ right:max(10px,1.6vw); top:50%; translate:0 -50%; }

/* ---------- 12. ABOUT ---------- */
.about__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,72px); align-items:center; }
.about__media{ position:relative; }
.about__media img{ width:100%; }

/* --- карусель фото студии --- */
.slider{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-2); background:var(--ink-3);
}
.slider:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.slider__track{ display:flex; transition:transform .65s var(--ease-out); will-change:transform; }
.slider__slide{ flex:0 0 100%; margin:0; min-width:0; }
.slider__slide img{ display:block; width:100%; aspect-ratio:900/1185; object-fit:cover; }
.slider__btn{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:rgba(11,11,12,.55); color:var(--cream);
  border:1px solid rgba(246,242,235,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease), background .3s, border-color .3s, color .3s;
}
.slider:hover .slider__btn, .slider__btn:focus-visible, .slider:focus-within .slider__btn{ opacity:1; }
.slider__btn:hover{ background:rgba(11,11,12,.82); border-color:var(--gold); color:var(--gold-lite); }
.slider__btn svg{ width:20px; height:20px; }
.slider__prev{ left:12px; }
.slider__next{ right:12px; }
.slider__dots{
  position:absolute; z-index:2; left:0; right:0; bottom:14px;
  display:flex; justify-content:center; gap:8px;
}
.slider__dots button{
  width:9px; height:9px; border-radius:50%; background:rgba(246,242,235,.5);
  box-shadow:0 1px 4px rgba(0,0,0,.4); transition:.35s var(--ease);
}
.slider__dots button:hover{ background:rgba(246,242,235,.85); }
.slider__dots button[aria-current="true"]{ width:28px; border-radius:999px; background:var(--grad-gold-b); }
/* Стрелки видны постоянно там, где наведения нет или экран узкий.
   Только (hover:none) недостаточно: узкое окно десктопа им не покрывается. */
@media (hover:none){ .slider__btn{ opacity:1; } }
@media (max-width:820px){ .slider__btn{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .slider__track{ transition:none; } }
.about__media::before{
  content:""; position:absolute; inset:-16px -16px 24px 24px; z-index:-1;
  border:1px solid rgba(168,124,40,.45); border-radius:var(--r-lg);
}
.about__copy{ display:grid; gap:20px; }
.about__sign{ font-family:var(--ff-display); font-style:italic; font-size:clamp(20px,2.4vw,26px); font-weight:500; color:var(--gold-ink); }
.about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px; }
.about__stats div{ padding:16px 14px; border:1px solid rgba(22,22,26,.16); border-radius:var(--r-md); background:#fff; }
.about__stats b{ display:block; font-family:var(--ff-display); font-size:clamp(26px,3.4vw,36px); font-weight:600; color:var(--gold-ink); line-height:1.05; }
.about__stats span{ font-size:12px; letter-spacing:.05em; color:var(--txt-dark-2); }

/* ---------- 13. FEATURES ---------- */
.feat__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); }
.feat{
  display:grid; gap:12px; padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--line-dark); border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:border-color .4s, transform .5s var(--ease-out), background .4s;
}
.feat:hover{ transform:translateY(-5px); border-color:rgba(201,162,77,.4); }
.feat__ico{
  display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:linear-gradient(140deg,rgba(201,162,77,.22),rgba(201,162,77,.05));
  border:1px solid rgba(201,162,77,.32);
}
.feat__ico svg{ width:24px; height:24px; stroke:var(--gold-lite); fill:none; stroke-width:1.4; }
.feat h3{ font-size:17px; font-weight:600; letter-spacing:.01em; }
.feat p{ font-size:14px; line-height:1.65; color:var(--txt-lite-2); }

/* ---------- 14. PROCESS ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); counter-reset:s; }
.step{ position:relative; display:grid; gap:10px; padding-top:26px; counter-increment:s; }
.step::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,rgba(201,162,77,.7),rgba(201,162,77,.06));
}
.step__n{
  font-family:var(--ff-display); font-size:clamp(34px,4.4vw,52px); font-weight:300; line-height:1;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step__n::before{ content:"0" counter(s); }
.step h3{ font-size:17px; font-weight:600; }
.step p{ font-size:14px; line-height:1.65; color:var(--txt-lite-2); }

/* ---------- 15. CTA BAND ---------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(201,162,77,.20), transparent 62%),
    linear-gradient(180deg,#0E0E10,#0B0B0C);
  border-block:1px solid var(--line-dark);
}
.cta-band .wrap{ display:grid; gap:22px; justify-items:center; max-width:820px; }

/* ---------- 16. FAQ ---------- */
.faq{ display:grid; gap:10px; max-width:900px; margin-inline:auto; }
.faq details{
  border:1px solid var(--line-dark); border-radius:var(--r-md); background:rgba(255,255,255,.025);
  transition:border-color .35s, background .35s;
}
.faq details[open]{ border-color:rgba(201,162,77,.4); background:rgba(201,162,77,.05); }
.faq summary{
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  font-size:clamp(15px,1.8vw,17px); font-weight:600; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:12px; height:12px; border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  rotate:45deg; translate:0 -3px; transition:rotate .35s var(--ease);
}
.faq details[open] summary::after{ rotate:-135deg; translate:0 3px; }
.faq .faq__a{ padding:0 clamp(18px,2.2vw,26px) clamp(18px,2.2vw,24px); font-size:15px; line-height:1.72; color:var(--txt-lite-2); }
.faq .faq__a p + p{ margin-top:10px; }

/* ---------- 17. CONTACTS ---------- */
.contacts__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(26px,4vw,56px); align-items:start; }
.contacts__list{ display:grid; gap:4px; }
.crow{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding-block:18px; border-bottom:1px solid var(--line-dark);
}
.crow:last-child{ border-bottom:0; }
.crow__ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid rgba(201,162,77,.3); background:rgba(201,162,77,.08); }
.crow__ico svg{ width:19px; height:19px; stroke:var(--gold-lite); fill:none; stroke-width:1.5; }
.crow dt{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-lite-3); margin-bottom:2px; }
.crow dd{ margin:0; font-size:16.5px; font-weight:500; }
.crow dd a:hover{ color:var(--gold-lite); }
.crow dd small{ display:block; font-size:13px; font-weight:400; color:var(--txt-lite-2); margin-top:3px; }

.socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.socials a{
  display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line-dark); font-size:13px; font-weight:500; transition:.32s var(--ease);
}
.socials a svg{ width:17px; height:17px; }
.socials a:hover{ border-color:var(--gold); color:var(--gold-lite); background:rgba(201,162,77,.07); transform:translateY(-2px); }

.map{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-dark); background:var(--ink-3); min-height:380px;
}
.map iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; filter:grayscale(.35) contrast(1.05); }

/* ---------- 18. FOOTER ---------- */
.footer{ background:#08080A; border-top:1px solid var(--line-dark); padding-block:clamp(38px,5vw,60px) 0; }
.footer__top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(24px,4vw,52px); }
.footer__brand img{ height:40px; width:auto; margin-bottom:16px; }
.footer__brand p{ font-size:14px; color:var(--txt-lite-2); max-width:38ch; }
.footer h4{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.footer nav{ display:grid; gap:9px; }
.footer nav a,.footer address a{ font-size:14.5px; color:var(--txt-lite-2); transition:color .3s; }
.footer nav a:hover,.footer address a:hover{ color:var(--gold-lite); }
.footer address{ font-style:normal; display:grid; gap:9px; font-size:14.5px; color:var(--txt-lite-2); }
.footer__bottom{
  margin-top:clamp(30px,4vw,46px); padding-block:22px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
  font-size:12.5px; color:var(--txt-lite-3);
}
.footer__bottom a:hover{ color:var(--gold-lite); }

/* ---------- 19. FLOATING / MOBILE BAR ---------- */
.fab{
  position:fixed; right:22px; bottom:26px; z-index:800;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#08240F; box-shadow:0 14px 34px -8px rgba(37,211,102,.6);
  transition:transform .35s var(--ease-out);
  animation:pulse 2.6s ease-out infinite;
}
.fab:hover{ transform:scale(1.08); }
.fab svg{ width:28px; height:28px; }
@keyframes pulse{
  0%{ box-shadow:0 14px 34px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow:0 14px 34px -8px rgba(37,211,102,.6), 0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 14px 34px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion:reduce){ .fab{ animation:none; } }

.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:850; display:none;
  grid-template-columns:repeat(3,1fr);
  background:rgba(11,11,12,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line-dark);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobilebar a{
  display:grid; justify-items:center; gap:4px; padding:11px 6px 10px;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-lite-2);
}
.mobilebar a svg{ width:20px; height:20px; }
.mobilebar a.is-primary{ color:var(--gold-lite); }

/* ---------- 20. REVEAL ANIMATION ----------
   Скрываем только если JS реально работает (класс .js ставится инлайн-скриптом),
   иначе контент виден всегда — и для пользователя, и для поисковых роботов. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:1180px){
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ column-count:3; }
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  .header__side .btn--gold{ display:none; }
  .header__inner{ justify-content:space-between; }
  .hero__grid{ grid-template-columns:1fr; gap:clamp(40px,7vw,60px); }
  .hero__copy{ max-width:none; }
  .hero__media{ width:min(100%,400px); }
  .about__grid{ grid-template-columns:1fr; }
  .about__media::before{ inset:-12px -12px 18px 18px; }
  .contacts__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:820px){
  .feat__grid{ grid-template-columns:repeat(2,1fr); }
  .price__cols{ grid-template-columns:1fr; }
  .gallery{ column-count:2; }
  .fab{ display:none; }
  .mobilebar{ display:grid; }
  body{ padding-bottom:64px; }
  .footer{ padding-bottom:8px; }
}
@media (max-width:560px){
  .services__grid{ grid-template-columns:1fr; }
  .feat__grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr 1fr; }
  .about__stats div:first-child{ grid-column:1 / -1; }
  .footer__top{ grid-template-columns:1fr; }
  .badge-float--tl{ left:-6px; top:10%; padding:11px 15px; }
  .badge-float--br{ right:-6px; bottom:6%; padding:11px 15px; }
  .badge-float b{ font-size:20px; }
  .btn{ --btn-px:24px; font-size:13px; }
  .hero__trust{ gap:18px 26px; }
  .lbox__prev{ left:6px; } .lbox__next{ right:6px; }
  .lbox__btn{ width:44px; height:44px; }
}
/* Узкие телефоны: кнопки во всю ширину и с переносом подписи,
   иначе длинный текст обрезается (у .btn white-space:nowrap + overflow:hidden) */
@media (max-width:420px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .btn{ white-space:normal; text-align:center; }
}
@media (max-width:340px){
  .gallery{ column-count:1; }
}

/* print */
@media print{
  .header,.mobilebar,.fab,.drawer,.lbox,.marquee,.filters{ display:none!important; }
  body{ background:#fff; color:#000; }
}