/* ==========================================================================
   Агата Мебель — v4. Тёмная кинематографичная версия в палитре заказчицы.
   Цвета: графит, слоновая кость, бежевый, шалфей, бордо/красный, серо-синий.
   Шрифты: Manrope (заголовки) + Inter (текст) — локально, fonts.css.
   ========================================================================== */
/* Шрифты встроены сюда, без @import: на один последовательный запрос меньше */
/* Локальные шрифты: Manrope (заголовки) + Inter (текст). Подмножества latin/cyrillic с Google Fonts. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/manrope-300-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/manrope-300-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/manrope-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/manrope-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/manrope-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  /* Светлая тёплая тема. Акценты — с досок заказчицы: бордо/красный, шалфей, бронза. */
  --bg:      #F7F4EF;   /* основной фон */
  --bg-2:    #F0EBE3;   /* секции через одну */
  --bg-3:    #FFFFFF;   /* карточки */
  --bg-4:    #E8E2D8;
  --slate:   #EDE9E1;   /* подложка блоков */
  --slate-2: #4A6472;   /* серо-синий акцент */
  --olive:   #F1F0E6;   /* шалфейный подтон */
  --line:    rgba(27,30,33,.13);
  --line-2:  rgba(27,30,33,.26);
  --text:    #1B1E21;
  --text-2:  rgba(27,30,33,.72);
  --mute:    rgba(27,30,33,.46);
  --beige:   #8A6A3C;   /* бронза: акцент в заголовках и цены */
  --taupe:   #8A6A3C;
  --sage:    #6E8460;
  --sage-2:  #556E48;
  --wine:    #7E1C22;
  --red:     #C8362F;
  --red-2:   #A82A26;
  /* поверх фотографий */
  --scrim:     27,30,33;
  --on-photo:  #F9F6F1;
  --on-photo-2: rgba(249,246,241,.76);
  --on-photo-accent: #E3C99B;
  /* совместимость */
  --brass:   var(--sage);
  --brass-2: var(--beige);
  --brass-dim: rgba(138,106,60,.3);

  --f-display: "Manrope", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1520px;
  --gutter: clamp(20px, 4.2vw, 72px);
  --r: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-reveal: cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; height:auto }
[hidden]{ display:none !important }   /* иначе правило выше показывает скрытое видео в лайтбоксе */
picture{ display:contents }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 }
input,select,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:2px }
::selection{ background:var(--wine); color:#fff }

section[id], main [id]{ scroll-margin-top:96px }
@media (max-width:1100px){ section[id], main [id]{ scroll-margin-top:78px } }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter) }
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* Зерно плёнки */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px; mix-blend-mode:multiply;
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{ 0%{ transform:translate(0,0) } 25%{ transform:translate(-2%,1%) } 50%{ transform:translate(1%,-2%) } 75%{ transform:translate(-1%,-1%) } 100%{ transform:translate(2%,2%) } }
@media (prefers-reduced-motion:reduce){ .grain{ animation:none } }

/* Прелоадер */
.loader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:26px; transition:transform .9s var(--ease-reveal), visibility 0s .9s }
.loader img{ height:54px; width:auto; opacity:0; animation:fadeIn .8s .1s var(--ease) forwards }
.loader-bar{ width:140px; height:1px; background:var(--line-2); overflow:hidden }
.loader-bar i{ display:block; height:100%; width:100%; background:var(--beige); transform:scaleX(0); transform-origin:left; animation:load 1.05s .15s var(--ease-out) forwards }
.loader.is-done{ transform:translateY(-100%); visibility:hidden }
@keyframes load{ to{ transform:scaleX(1) } }
@keyframes fadeIn{ to{ opacity:1 } }
body.no-loader .loader{ display:none }

/* ---------- Типографика ---------- */
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:300; color:var(--text) }
h1{ font-size:clamp(52px, 8.2vw, 136px); line-height:.94; letter-spacing:-.04em }
h2{ font-size:clamp(38px, 5.2vw, 84px); line-height:.98; letter-spacing:-.035em }
h3{ font-size:clamp(20px, 1.7vw, 25px); line-height:1.25; letter-spacing:-.012em; font-weight:400 }
h1 em, h2 em{ font-style:normal; color:var(--beige) }
p{ margin:0 0 1em }
.lead{ font-size:clamp(16px, 1.2vw, 19px); line-height:1.6; color:var(--text-2); max-width:40ch; font-weight:400 }
h1 + .lead, h2 + .lead{ margin-top:26px }
.eyebrow{
  display:flex; align-items:flex-start; gap:14px; margin:0 0 26px;
  font:500 11px/1.5 var(--f-body); letter-spacing:.26em; text-transform:uppercase; color:var(--sage);
}
.eyebrow::before{ content:""; flex:none; width:26px; height:1px; background:var(--sage); margin-top:8px }
.ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em }
.ln > span{ display:block; transform:translateY(112%); transition:transform 1.1s var(--ease-reveal) }
.ln:nth-child(2) > span{ transition-delay:.08s } .ln:nth-child(3) > span{ transition-delay:.16s } .ln:nth-child(4) > span{ transition-delay:.24s }
.in .ln > span, .in.ln > span{ transform:none }

/* ---------- Кнопки и ссылки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  height:58px; padding:0 30px; border-radius:var(--r);
  font:500 12.5px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .35s var(--ease) }
.btn:hover svg{ transform:translateX(4px) }
.btn-primary, .btn-brass{ background:var(--wine); color:#FBF6F0; border:1px solid transparent }
.btn-primary::before, .btn-brass::before{ content:""; position:absolute; inset:0; background:var(--red); transform:translateY(101%); transition:transform .45s var(--ease-reveal); z-index:-1 }
.btn-primary:hover::before, .btn-brass:hover::before{ transform:none }
.btn-ghost{ border:1px solid var(--line-2); color:var(--text) }
.btn-ghost::before{ content:""; position:absolute; inset:0; background:var(--text); transform:translateY(101%); transition:transform .45s var(--ease-reveal); z-index:-1 }
.btn-ghost:hover{ color:var(--bg); border-color:var(--text) }
.btn-ghost:hover::before{ transform:none }
.btn-light{ background:var(--text); color:var(--bg) }
.btn-light:hover{ background:#000 }
.btn-sm{ height:44px; padding:0 20px; font-size:11.5px }
.link{
  display:inline-flex; align-items:center; gap:14px; font:500 12px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--text);
  padding-bottom:8px; border-bottom:1px solid var(--line-2); transition:border-color .35s var(--ease), color .35s var(--ease);
}
.link svg{ width:16px; height:16px; transition:transform .35s var(--ease) }
.link:hover{ border-color:var(--sage); color:var(--sage-2) }
.link:hover svg{ transform:translateX(5px) }

/* ---------- Шапка ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:80; background:rgba(247,244,239,.88); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s var(--ease) }
/* поверх фотографии первого экрана — светлые пункты, при прокрутке — обычные тёмные */
body.hero-page .hdr:not(.is-scrolled) .nav a{ color:rgba(249,246,241,.8) }
body.hero-page .hdr:not(.is-scrolled) .nav a:hover, body.hero-page .hdr:not(.is-scrolled) .nav a.is-current{ color:var(--on-photo) }
body.hero-page .hdr:not(.is-scrolled) .hdr-phone{ color:var(--on-photo) }
body.hero-page .hdr:not(.is-scrolled) .hdr-phone small{ color:rgba(249,246,241,.7) }
body.hero-page .hdr:not(.is-scrolled) .burger i{ background:var(--on-photo) }
body.hero-page .hdr:not(.is-scrolled) .logo-dark{ display:none }
.logo-light{ display:none }
body.hero-page .hdr:not(.is-scrolled) .logo-light{ display:block }
.logo{ position:relative }
.hdr.is-scrolled{ background:rgba(247,244,239,.94); border-bottom-color:var(--line); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3) }
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:96px; transition:height .3s var(--ease) }
.hdr.is-scrolled .hdr-in{ height:74px }
.logo{ display:inline-flex; align-items:center; flex:none }
.logo img{ height:44px; width:auto }
.nav{ display:flex; gap:clamp(18px, 2.4vw, 38px); font:500 11.5px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase }
.nav a{ position:relative; padding:10px 0; color:var(--text-2); transition:color .3s var(--ease) }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:4px; height:1px; background:var(--sage); transition:right .35s var(--ease) }
.nav a:hover, .nav a.is-current{ color:var(--text) }
.nav a:hover::after, .nav a.is-current::after{ right:0 }
.hdr-right{ display:flex; align-items:center; gap:26px }
.hdr-phone{ font-weight:500; font-size:14.5px; white-space:nowrap; letter-spacing:.01em }
.hdr-phone small{ display:block; font-size:10px; color:var(--mute); letter-spacing:.18em; text-transform:uppercase; font-weight:500; margin-bottom:3px }
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:6px }
.burger i{ display:block; width:24px; height:1.5px; background:var(--text); transition:transform .35s var(--ease), opacity .3s }
.burger.is-open i:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
.burger.is-open i:nth-child(2){ opacity:0 }
.burger.is-open i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }
.mnav{ position:fixed; inset:0; z-index:75; background:var(--bg); display:flex; flex-direction:column; justify-content:center; padding:100px var(--gutter) 32px; overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s }
.mnav.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .35s var(--ease), transform .35s var(--ease) }
.mnav a.big{ font-family:var(--f-display); font-weight:300; letter-spacing:-.02em; font-size:clamp(30px, 8vw, 46px); line-height:1.15; padding:8px 0; border-bottom:1px solid var(--line) }
.mnav-contacts{ margin-top:28px; display:grid; gap:12px; font-size:16px }
.mnav-contacts a{ display:flex; gap:10px; align-items:center }
.mnav-contacts small{ color:var(--mute) }
@media (max-width:1100px){
  .nav{ display:none } .hdr-phone{ display:none } .burger{ display:flex }
  .hdr-in{ height:76px } .hdr.is-scrolled .hdr-in{ height:68px } .logo img{ height:38px }
}

/* ---------- Первый экран: текст слева на светлом, фото справа ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh; background:var(--bg);
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:stretch; color:var(--text);
}
.hero-copy{ display:flex; align-items:center; padding:calc(96px + 3vh) 0 clamp(28px, 4vh, 48px) }
.hero-inner{ width:100%; padding-left:var(--gutter); padding-right:clamp(28px, 3.4vw, 64px); max-width:860px; margin-left:auto }
.hero-top{ display:flex; align-items:center; gap:14px; margin:0 0 clamp(20px, 3vh, 34px); font:500 11px/1.5 var(--f-body); letter-spacing:.24em; text-transform:uppercase; color:var(--text-2) }
.hero-top::before{ content:""; flex:none; width:26px; height:1px; background:var(--sage) }
.hero h1{ margin:0 0 clamp(22px, 3vh, 34px); font-size:clamp(44px, 5.4vw, 92px); color:var(--text) }
.hero-word-wrap{ display:block; height:1.06em; margin-top:.08em; position:relative }
.hero-word{ position:absolute; left:0; top:0; display:inline-block; white-space:nowrap; transition:opacity .4s var(--ease), transform .4s var(--ease) }
.hero-word.is-out{ opacity:0; transform:translateY(10px) }
.hero[data-style="classic"] .hero-word{ font-weight:300; text-transform:uppercase; letter-spacing:.3em; font-size:.46em; top:.44em; color:var(--beige) }
.hero[data-style="neo"]     .hero-word{ font-weight:300; letter-spacing:-.01em; color:var(--taupe) }
.hero[data-style="modern"]  .hero-word{ font-weight:400; letter-spacing:-.045em; color:var(--text) }
.hero[data-style="minimal"] .hero-word{ font-weight:200; letter-spacing:.02em; font-size:.84em; top:.12em; color:var(--sage-2) }
.hero .lead{ margin-bottom:clamp(26px, 4vh, 40px); max-width:44ch; color:var(--text-2) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px }
.hero-bg{ position:relative; overflow:hidden; background:var(--bg-2) }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .85s var(--ease), transform 5.5s linear; will-change:transform }
.hero-bg img.is-active{ opacity:1; transform:scale(1) }
.hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:clamp(34px, 5vh, 60px); font:500 10.5px/1.5 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--mute) }
.hero-caption b{ display:block; font-family:var(--f-display); font-weight:400; font-size:15px; letter-spacing:0; text-transform:none; color:var(--text-2); margin-bottom:4px }
.scroll-hint{ display:flex; align-items:center; gap:12px }
.scroll-hint i{ display:block; width:1px; height:44px; background:var(--line-2); position:relative; overflow:hidden }
.scroll-hint i::after{ content:""; position:absolute; left:0; top:0; width:100%; height:50%; background:var(--text-2); animation:scrollhint 2s var(--ease) infinite }
@keyframes scrollhint{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(200%) } }
@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; grid-template-rows:auto auto; min-height:0 }
  .hero-bg{ order:-1; height:52svh; min-height:320px }
  .hero-copy{ padding:clamp(26px, 4vh, 44px) 0 clamp(24px, 4vh, 40px) }
  .hero-inner{ padding:0 var(--gutter); max-width:none; margin:0 }
  .hero-top{ margin-bottom:18px }
  .hero h1{ font-size:clamp(42px, 8vw, 72px) }
  .hero-foot{ margin-top:26px }
}
@media (max-width:560px){
  .hero-bg{ height:46svh; min-height:280px }
  .hero h1{ font-size:clamp(38px, 11vw, 54px) }
}
@media (prefers-reduced-motion:reduce){ .scroll-hint i::after{ animation:none } }

/* ---------- Бегущая строка ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; background:var(--bg) }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:marquee 60s linear infinite; font:500 11px/1 var(--f-body); letter-spacing:.3em; text-transform:uppercase; color:var(--mute) }
.marquee-track span{ display:flex; align-items:center; gap:56px; white-space:nowrap }
.marquee-track span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--sage) }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes marquee{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none } }

/* ---------- Секции ---------- */
.section{ padding:clamp(88px, 11vw, 180px) 0; position:relative }
.section-tight{ padding-top:clamp(56px, 7vw, 100px) }
.section-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:24px 48px; margin-bottom:clamp(40px, 5vw, 80px) }
.section-head .lead{ margin-top:26px; margin-bottom:0 }
.section-head .link{ margin-bottom:8px }
@media (max-width:720px){ .section-head{ grid-template-columns:1fr } }

/* ---------- Направления: залипающий список + фото ---------- */
.dirs{ padding:clamp(88px, 11vw, 180px) 0 clamp(40px, 6vw, 100px) }
.dirs-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 6vw, 120px); align-items:start }
.dirs-side{ position:sticky; top:104px }
.dirs-side h2{ font-size:clamp(34px, 3.9vw, 62px) }
.dirs-list{ list-style:none; margin:clamp(24px, 3vw, 40px) 0 0; padding:0 }
.dirs-list li{ border-top:1px solid var(--line) }
.dirs-list li:last-child{ border-bottom:1px solid var(--line) }
.dirs-list a{ display:grid; grid-template-columns:40px 1fr auto; align-items:baseline; gap:16px; padding:13px 0; color:var(--mute); transition:color .4s var(--ease), padding .4s var(--ease) }
.dirs-list i{ font:500 10.5px/1 var(--f-body); letter-spacing:.18em; font-style:normal }
.dirs-list b{ font-family:var(--f-display); font-weight:300; font-size:clamp(21px, 1.9vw, 28px); letter-spacing:-.025em }
.dirs-list small{ font:500 12px/1 var(--f-body); letter-spacing:.08em; color:var(--beige); opacity:0; transform:translateX(8px); transition:opacity .4s, transform .4s; white-space:nowrap }
.dirs-list li.is-active a{ color:var(--text); padding-left:10px }
.dirs-list li.is-active small{ opacity:1; transform:none }
.dirs-list a:hover{ color:var(--text-2) }
.dirs-panels{ display:grid; gap:clamp(16px, 2vw, 28px) }
/* Появление панели — прозрачностью и сдвигом. Не clip-path: Chrome считает обрезанный элемент
   невидимым, IntersectionObserver не срабатывает, и панель так и остаётся скрытой. */
.dir-panel{ position:relative; margin:0; height:min(78vh, 760px); border-radius:6px; overflow:hidden; background:var(--bg-3); isolation:isolate; opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1.2s var(--ease-reveal) }
.dir-panel.in{ opacity:1; transform:none }
.dir-panel img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.4s var(--ease-reveal); filter:brightness(.92) }
.dir-panel.in img{ transform:none }
.dir-panel::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.84) 30%, rgba(var(--scrim),.4) 58%, rgba(var(--scrim),0) 82%) }
.dir-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(22px, 2.4vw, 36px); display:grid; grid-template-columns:1fr auto; gap:8px 24px; align-items:end }
.dir-cap{ color:var(--on-photo) }
.dir-cap b{ font-family:var(--f-display); font-weight:300; font-size:clamp(28px, 2.8vw, 44px); letter-spacing:-.03em; line-height:1 }
.dir-price{ font-family:var(--f-display); font-weight:400; font-size:clamp(15px, 1.2vw, 18px); letter-spacing:.02em; color:var(--on-photo-accent); white-space:nowrap }
.dir-desc{ grid-column:1 / -1; margin:6px 0 0; font-size:14px; color:var(--on-photo-2); max-width:44ch; line-height:1.5 }
.dir-go{ grid-column:1 / -1; display:inline-flex; align-items:center; gap:10px; margin-top:16px; font:500 11.5px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--on-photo); padding-bottom:7px; border-bottom:1px solid rgba(249,246,241,.4); justify-self:start; transition:border-color .3s var(--ease), color .3s var(--ease) }
.dir-go svg{ width:15px; height:15px; transition:transform .35s var(--ease) }
.dir-panel:hover .dir-go{ border-color:var(--on-photo-accent); color:var(--on-photo-accent) }
.dir-panel:hover .dir-go svg{ transform:translateX(4px) }
.dir-panel:hover img{ transform:scale(1.03) }

@media (max-width:900px){
  .dirs-grid{ grid-template-columns:1fr; gap:34px }
  .dirs-side{ position:static }
  .dirs-list{ display:none }
  .dir-panel{ height:auto; aspect-ratio:4/4.5 }
  .dir-panel img{ transform:none }
  .dir-cap{ grid-template-columns:1fr; padding:20px }
  .dir-panel::after{ background:linear-gradient(to top, rgba(var(--scrim),.97) 0%, rgba(var(--scrim),.88) 36%, rgba(var(--scrim),.45) 62%, rgba(var(--scrim),0) 86%) }
  .dir-price{ font-size:17px }
  .dir-go{ margin-top:14px }
}

/* ---------- Работы: горизонтальная витрина ---------- */
.works-sec{ overflow:hidden }
.tabs{ display:flex; flex-wrap:wrap; gap:6px 28px; margin-bottom:clamp(24px, 3vw, 44px) }
.tab{ position:relative; padding:8px 0; font:500 11.5px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--mute); transition:color .3s var(--ease) }
.tab::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--beige); transition:right .35s var(--ease) }
.tab:hover, .tab.is-active{ color:var(--text) }
.tab.is-active::after{ right:0 }
.strip{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter); scrollbar-width:none; -ms-overflow-style:none; padding:0 var(--gutter); margin:0 calc(var(--gutter) * -1); cursor:grab }
.strip::-webkit-scrollbar{ display:none }
.strip.is-dragging{ cursor:grabbing; scroll-snap-type:none }
.strip-track{ display:flex; gap:clamp(12px, 1.4vw, 22px); width:max-content; padding-right:var(--gutter) }
.frame{ position:relative; flex:none; height:min(68vh, 680px); aspect-ratio:3/4; overflow:hidden; border-radius:var(--r); background:var(--bg-3); scroll-snap-align:start; isolation:isolate; text-align:left; opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.frame.is-land{ aspect-ratio:4/3 }
.frame.in{ opacity:1; transform:none }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease), filter .6s; filter:brightness(.94); pointer-events:none }
.frame:hover img{ transform:scale(1.04); filter:brightness(1) }
.frame-cnt{
  position:absolute; right:12px; top:12px; z-index:2; padding:7px 11px; border-radius:999px;
  background:rgba(var(--scrim),.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:500 10.5px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--on-photo);
  opacity:.85; transition:opacity .3s var(--ease), background .3s var(--ease)
}
.frame:hover .frame-cnt{ opacity:1; background:var(--on-photo); color:#1B1E21 }
.frame-cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px 22px; background:linear-gradient(to top, rgba(var(--scrim),.88), rgba(var(--scrim),0)); font-weight:500; font-size:14px; line-height:1.35; color:var(--on-photo) }
.frame-cap small{ display:block; margin-top:6px; font:500 10.5px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--on-photo-accent) }
.strip-foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:clamp(20px, 3vw, 34px) }
.strip-hint{ font:500 10.5px/1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--mute); white-space:nowrap; transition:opacity .4s var(--ease) }
.strip-hint.is-hidden{ opacity:0 }
.strip-nav button[disabled]{ opacity:.3; pointer-events:none }
.strip-progress{ flex:1; height:1px; background:var(--line); position:relative; max-width:420px }
.strip-progress i{ position:absolute; left:0; top:0; height:100%; width:20%; background:var(--beige); transition:width .2s linear, transform .2s linear }
.strip-nav{ display:flex; gap:10px }
.strip-nav button{ width:52px; height:52px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .3s, background .3s, color .3s }
.strip-nav button:hover{ border-color:var(--text); background:var(--text); color:var(--bg) }
.strip-nav svg{ width:18px; height:18px }
@media (max-width:900px){
  .frame{ height:auto; width:76vw; aspect-ratio:3/4 }
  .frame.is-land{ width:88vw; aspect-ratio:4/3 }
  .strip{ scroll-padding-left:var(--gutter) }
  .strip-nav{ display:none }
  .strip-progress{ max-width:none }
}
@media (prefers-reduced-motion:reduce){ .frame{ opacity:1; transform:none } }

/* ---------- Как мы работаем ---------- */
.steps-sec{ background:var(--slate) }
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(24px, 3vw, 56px); position:relative; padding-top:28px }
.steps::before{ content:""; position:absolute; left:0; top:0; height:1px; width:100%; background:var(--line-2); transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--ease-reveal) }
.steps.in::before{ transform:none }
.step-n{ font-family:var(--f-display); font-weight:200; font-size:clamp(48px, 4.6vw, 72px); letter-spacing:-.04em; color:var(--sage-2); line-height:1 }
.step h3{ margin:22px 0 10px }
.step p{ margin:0; color:var(--text-2); font-size:14.5px; line-height:1.55 }
.steps-foot{ display:flex; flex-wrap:wrap; gap:20px 64px; margin-top:clamp(48px, 6vw, 88px); align-items:center }
.steps-foot .fact{ display:flex; align-items:baseline; gap:14px }
.steps-foot .fact b{ font-family:var(--f-display); font-weight:200; font-size:clamp(40px, 3.6vw, 60px); letter-spacing:-.04em; color:var(--text) }
.steps-foot .fact span{ font-size:13.5px; color:var(--text-2); max-width:20ch; line-height:1.3 }
.principles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(24px, 3vw, 56px); border-top:1px solid var(--line); padding-top:clamp(28px, 3vw, 44px); margin-top:clamp(56px, 7vw, 100px) }
.principle h3{ margin-bottom:12px }
.principle p{ margin:0; color:var(--text-2); font-size:14.5px; line-height:1.55 }
@media (max-width:900px){ .steps, .principles{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ .steps, .principles{ grid-template-columns:1fr; gap:30px } }

/* ---------- Камень: текст слева, фото справа ---------- */
.stone-sec{ background:var(--bg-2); color:var(--text) }
.stone-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; min-height:min(86vh, 900px) }
.stone-copy{ padding:clamp(72px, 8vw, 130px) clamp(32px, 4vw, 80px) clamp(72px, 8vw, 130px) var(--gutter); max-width:820px; margin-left:auto; width:100% }
.stone-sec h2{ color:var(--text) }
.stone-sec h2 em{ color:var(--beige) }
.stone-sec .lead{ color:var(--text-2) }
.stone-media{ position:relative; align-self:stretch; min-height:420px; background:var(--bg-3) }
.stone-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.mats{ list-style:none; margin:clamp(28px, 3vw, 44px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:660px }
.mats li{ padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-3) }
.mats b{ display:block; font-family:var(--f-display); font-weight:500; font-size:15.5px; letter-spacing:-.01em; margin-bottom:6px; color:var(--text) }
.mats span{ font-size:13.5px; color:var(--text-2); line-height:1.45 }
.stone-sec .btn{ margin-top:clamp(28px, 3vw, 44px) }
@media (max-width:900px){
  .stone-grid{ grid-template-columns:1fr; min-height:0 }
  .stone-media{ order:-1; min-height:0; aspect-ratio:4/3 }
  .stone-copy{ padding:clamp(48px, 8vw, 80px) var(--gutter); max-width:none; margin:0 }
}
@media (max-width:640px){ .mats{ grid-template-columns:1fr } }

/* ---------- Видео ---------- */
.video-sec{ background:var(--bg) }
.video-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(40px, 6vw, 120px); align-items:center }
.video-frame{ position:relative; width:min(100%, 440px); margin:0 auto; aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:var(--bg-3); box-shadow:0 40px 90px rgba(27,30,33,.18), 0 0 0 1px var(--line) }
.video-frame video{ width:100%; height:100%; object-fit:cover }
.video-tag{ position:absolute; left:18px; top:18px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(var(--scrim),.6); color:var(--on-photo); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:500 10.5px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase }
.video-tag i{ width:7px; height:7px; border-radius:50%; background:var(--red-2); box-shadow:0 0 12px var(--red-2); animation:pulse 1.8s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.video-copy .btn{ margin-top:clamp(24px, 3vw, 36px) }
.video-facts{ display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:clamp(28px, 3vw, 44px); padding-top:24px; border-top:1px solid var(--line) }
.video-facts div{ font-size:13.5px; color:var(--text-2) }
.video-facts b{ display:block; font-family:var(--f-display); font-weight:400; font-size:17px; color:var(--text); margin-bottom:2px; letter-spacing:-.01em }
@media (max-width:900px){ .video-grid{ grid-template-columns:1fr } .video-frame{ width:min(100%, 360px) } }

/* ---------- Салон ---------- */
.salon-sec{ background:var(--olive) }
.salon-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px, 5vw, 110px); align-items:start }
.addr{ font-family:var(--f-display); font-weight:300; letter-spacing:-.02em; font-size:clamp(26px, 2.4vw, 38px); line-height:1.2; margin:0 0 20px; color:var(--text) }
.addr small{ display:block; font-family:var(--f-body); font-size:14px; color:var(--text-2); margin-top:10px; letter-spacing:0 }
.contact-list{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:12px }
.contact-list li{ display:flex; gap:16px; align-items:baseline; font-size:17px }
.contact-list li small{ width:84px; flex:none; font:500 10px/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--mute) }
.contact-list a{ transition:color .3s } .contact-list a:hover{ color:var(--sage-2) }
.salon-cta{ display:flex; flex-wrap:wrap; gap:12px }
.promo{ position:relative; overflow:hidden; border-radius:8px; background:#FFFFFF; padding:clamp(28px, 3.4vw, 56px); border:1px solid var(--line); box-shadow:0 12px 40px rgba(27,30,33,.06) }
.promo .agate{ position:absolute; right:-28%; top:-38%; width:105%; opacity:.16; pointer-events:none }
.promo > *{ position:relative }
.promo-num{ font-family:var(--f-display); font-weight:200; font-size:clamp(90px, 10vw, 160px); line-height:.9; color:var(--red-2); letter-spacing:-.06em; margin:4px 0 20px }
.promo p{ margin:0; font-size:15.5px; color:var(--text-2); max-width:36ch }
.promo p b{ font-weight:500; color:var(--text) }
.promo-foot{ margin-top:22px; font-size:12.5px; color:var(--mute) }
@media (max-width:900px){ .salon-grid{ grid-template-columns:1fr } }

/* ---------- Кому делаем ---------- */
.clients{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px, 3vw, 56px) }
.client{ padding-top:26px; border-top:1px solid var(--line-2); position:relative }
.client::before{ content:""; position:absolute; left:0; top:-1px; width:48px; height:1px; background:var(--sage) }
.client h3{ margin-bottom:12px }
.client p{ margin:0 0 16px; color:var(--text-2); font-size:15px; line-height:1.55; max-width:44ch }
.client ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.client li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--text-2); line-height:1.45 }
.client li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--beige) }
@media (max-width:760px){ .clients{ grid-template-columns:1fr; gap:30px } }

/* ---------- Предложения ---------- */
.offers{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2vw, 26px) }
.offer{
  position:relative; overflow:hidden; border-radius:8px; background:#FFFFFF; border:1px solid var(--line); box-shadow:0 12px 40px rgba(27,30,33,.06);
  padding:clamp(26px, 2.6vw, 40px); display:flex; flex-direction:column;
}
.offer .agate{ position:absolute; right:-30%; top:-36%; width:110%; opacity:.16; pointer-events:none }
.offer > *{ position:relative }
.offer-num{ font-family:var(--f-display); font-weight:200; font-size:clamp(48px, 5vw, 76px); line-height:1; letter-spacing:-.04em; color:var(--red-2); margin:2px 0 16px }
.offer h3{ margin-bottom:10px }
.offer p{ margin:0; font-size:15px; color:var(--text-2); line-height:1.55 }
.offer-foot{ margin-top:auto; padding-top:18px; font-size:12.5px !important; color:var(--mute) !important }
@media (max-width:900px){ .offers{ grid-template-columns:1fr } .offer-num{ font-size:56px } }

/* ---------- Заявка ---------- */
.lead-sec{ background:var(--bg) }
.lead-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px, 6vw, 120px); align-items:start }
.messengers{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px }
.messengers a{ display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 18px; border:1px solid var(--line-2); border-radius:var(--r); font:500 11.5px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; transition:border-color .3s, background .3s, color .3s }
.messengers a:hover{ border-color:var(--text); background:var(--text); color:var(--bg) }
.messengers svg{ width:18px; height:18px }
.form{ display:grid; gap:22px }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.field{ display:grid; gap:9px }
.field label{ font:500 10.5px/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--mute) }
.field input, .field select, .field textarea{ width:100%; height:58px; padding:0 18px; border:1px solid var(--line-2); border-radius:var(--r); background:#FFFFFF; color:var(--text); font-size:16px; transition:border-color .25s, background .25s; -webkit-appearance:none; appearance:none }
.field input::placeholder, .field textarea::placeholder{ color:var(--mute) }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E8460' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px }
.field select option{ color:var(--text) }
.field textarea{ height:128px; padding:16px 18px; resize:vertical }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--sage); background:#FFFFFF }
.field input.is-invalid{ border-color:var(--red) }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--text-2); line-height:1.45; margin-top:2px }
.check input{ width:18px; height:18px; margin:2px 0 0; accent-color:var(--wine); flex:none }
.check a{ text-decoration:underline; text-underline-offset:3px; color:var(--text) }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px }
.form-note{ font-size:13px; color:var(--mute) }
.form-msg{ display:none; padding:16px 18px; border-radius:var(--r); font-size:15px }
.form-msg.ok{ display:block; background:rgba(110,132,96,.12); color:var(--sage-2); border:1px solid rgba(110,132,96,.35) }
.form-msg.err{ display:block; background:rgba(200,54,47,.08); color:var(--wine); border:1px solid rgba(200,54,47,.3) }
.form.is-sent .form-body{ display:none }
@media (max-width:900px){ .lead-grid{ grid-template-columns:1fr } }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr } }
@media (max-width:900px){ .form-foot{ gap:14px } .form-foot .btn{ width:100% } .form-note{ font-size:12.5px } }

/* ---------- Подвал ---------- */
.ftr{ border-top:1px solid var(--line); padding:clamp(48px, 6vw, 96px) 0 40px; font-size:14px; color:var(--text-2); background:var(--bg); overflow:hidden }
.ftr-big{ font-family:var(--f-display); font-weight:200; font-size:clamp(56px, 11vw, 190px); letter-spacing:-.05em; line-height:.9; color:rgba(27,30,33,.07); white-space:nowrap; margin:0 0 clamp(36px, 5vw, 72px); user-select:none }
.ftr-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px }
.ftr h4{ font:500 10.5px/1 var(--f-body); letter-spacing:.22em; text-transform:uppercase; color:var(--mute); margin:0 0 18px }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.ftr a{ transition:color .3s } .ftr a:hover{ color:var(--sage-2) }
.ftr-brand img{ height:44px; width:auto; margin-bottom:20px }
.ftr-brand p{ max-width:30ch; margin:0; font-size:14px }
.ftr-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; margin-top:clamp(36px, 5vw, 64px); padding-top:24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mute) }
@media (max-width:900px){ .ftr-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .ftr-grid{ grid-template-columns:1fr; gap:28px } }

/* Плашка с ценой у калькулятора на телефоне */
.calc-chip{
  position:fixed; left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:65;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-radius:var(--r); border:1px solid var(--line-2);
  background:#FFFFFF; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(27,30,33,.16);
  transform:translateY(140%); transition:transform .45s var(--ease-out);
  font:500 11.5px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
}
.calc-chip b{ font-family:var(--f-display); font-weight:300; font-size:20px; letter-spacing:-.02em; color:var(--beige); text-transform:none }
.calc-chip.is-on{ transform:none }
@media (max-width:900px){ .calc-chip{ display:flex } }

/* ---------- Нижняя панель действий (телефон) ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  grid-template-columns:52px 52px 1fr; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,244,239,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease-out);
}
.mbar.is-on{ transform:none }
.mbar-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 14px;
  border:1px solid var(--line-2); border-radius:var(--r); color:var(--text);
  font:500 11.5px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.mbar-btn svg{ width:19px; height:19px; flex:none }
.mbar-btn span{ display:none }
.mbar-btn.is-primary span{ display:inline }
.mbar-btn.is-primary{ background:var(--wine); border-color:var(--wine); color:#FBF6F0 }
body.mbar-on{ padding-bottom:76px }
@media (max-width:900px){ .mbar{ display:grid } }


/* ---------- Лайтбокс ---------- */
.lb{ position:fixed; inset:0; z-index:100; background:rgba(247,244,239,.98); display:none; align-items:center; justify-content:center; color:var(--text) }
.lb.is-open{ display:flex }
.lb-stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:72px clamp(16px, 8vw, 120px) 96px }
.lb-stage img, .lb-stage video{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:4px; box-shadow:0 30px 80px rgba(27,30,33,.25) }
.lb-cap{ position:absolute; left:0; right:0; bottom:0; padding:24px clamp(16px, 8vw, 120px); display:flex; justify-content:space-between; gap:20px; align-items:flex-end; font-size:14px }
.lb-cap b{ display:block; font-family:var(--f-display); font-weight:400; font-size:20px; margin-bottom:4px; letter-spacing:-.01em }
.lb-cap small{ color:var(--sage); letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; font-weight:500 }
.lb-cnt{ opacity:.55; white-space:nowrap; font-variant-numeric:tabular-nums }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line-2); background:var(--bg); transition:background .25s, border-color .25s, color .25s }
.lb-btn:hover{ background:var(--text); color:var(--bg); border-color:var(--text) }
.lb-btn svg{ width:20px; height:20px }
.lb-prev{ left:clamp(10px, 2.5vw, 36px) } .lb-next{ right:clamp(10px, 2.5vw, 36px) }
.lb-close{ position:absolute; top:18px; right:clamp(10px, 2.5vw, 36px); width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line-2); background:var(--bg) }
.lb-close svg{ width:18px; height:18px }
@media (max-width:720px){ .lb-stage{ padding:64px 12px 110px } .lb-btn{ top:auto; bottom:22px; transform:none; width:48px; height:48px } .lb-cap{ bottom:88px; padding:0 16px; font-size:13px } .lb-cap b{ font-size:17px } }

/* ---------- Появление ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv-d1{ transition-delay:.12s } .rv-d2{ transition-delay:.24s } .rv-d3{ transition-delay:.36s } .rv-d4{ transition-delay:.48s }
@media (prefers-reduced-motion:reduce){
  .rv, .frame, .dir-panel{ opacity:1; transform:none; transition:none }
  .ln > span{ transform:none; transition:none }
  .hero-bg img{ transition:opacity .3s; transform:none }
  .video-tag i, .scroll-hint i::after{ animation:none }
  .loader{ display:none }
}

/* ---------- Внутренние страницы ---------- */
.page-hero{ padding:calc(96px + clamp(40px, 7vh, 96px)) 0 clamp(28px, 4vw, 56px) }
.page-hero h1{ font-size:clamp(42px, 6vw, 96px) }
.page-hero .lead{ margin-top:26px }
.crumbs{ display:flex; gap:12px; font:500 11px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:30px }
.crumbs a:hover{ color:var(--text) }
.filters{ display:grid; gap:14px; margin-bottom:clamp(28px, 4vw, 56px) }
.filters-row{ display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center }
.filters-row small{ font:500 10.5px/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-right:6px }
.grid-works{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px, 3vw, 48px) clamp(14px, 1.6vw, 24px) }
.gw{ display:block; text-align:left; width:100% }
.gw-img, .gw-body{ display:block }
.gw-img{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:var(--bg-3) }
.gw-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease), filter .6s; filter:brightness(.94) }
.gw:hover .gw-img img{ transform:scale(1.045); filter:brightness(1) }
.gw-cnt{ position:absolute; right:12px; top:12px; padding:6px 10px; border-radius:999px; background:rgba(var(--scrim),.62); color:var(--on-photo); font-size:11.5px; font-variant-numeric:tabular-nums; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.gw-body{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line) }
.gw h3{ font-size:clamp(19px, 1.5vw, 22px) }
.gw small{ display:block; margin-top:7px; font:500 10.5px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--sage) }
.grid-empty{ padding:48px 0; color:var(--mute) }
@media (max-width:900px){ .grid-works{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ .grid-works{ grid-template-columns:1fr } }

.calc{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px, 5vw, 110px); align-items:start }
.calc-group{ padding:28px 0; border-top:1px solid var(--line) }
.calc-group:first-child{ border-top:0; padding-top:0 }
.calc-label{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; font-family:var(--f-display); font-weight:400; letter-spacing:-.015em; font-size:clamp(20px, 1.7vw, 25px) }
.calc-label i{ font:500 11px/1 var(--f-body); letter-spacing:.16em; color:var(--sage); font-style:normal }
.opts{ display:flex; flex-wrap:wrap; gap:10px }
.opt{ position:relative }
.opt input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer }
.opt span{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px; border:1px solid var(--line-2); border-radius:var(--r); font-size:14px; font-weight:500; color:var(--text-2); transition:border-color .25s, background .25s, color .25s }
.opt:hover span{ border-color:var(--text-2); color:var(--text) }
.opt input:checked + span{ background:var(--wine); border-color:var(--wine); color:#FBF6F0 }
.opt input:focus-visible + span{ outline:2px solid var(--sage); outline-offset:3px }
.opt small{ font-weight:400; opacity:.7 }
.range-row{ display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center }
.range-row input[type=range]{ width:100%; accent-color:var(--beige) }
.range-val{ font-family:var(--f-display); font-weight:300; font-size:34px; min-width:130px; text-align:right; letter-spacing:-.03em }
.range-val small{ font-family:var(--f-body); font-size:13px; color:var(--mute); letter-spacing:0 }
.calc-hint{ margin:12px 0 0; font-size:13.5px; color:var(--mute) }
.calc-result{ position:sticky; top:104px; background:#FFFFFF; border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 40px rgba(27,30,33,.07); padding:clamp(24px, 2.6vw, 40px) }
.tiers{ display:grid; margin:8px 0 22px }
.tier{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:baseline; padding:16px 0; border-top:1px solid var(--line) }
.tier:last-child{ border-bottom:1px solid var(--line) }
.tier b{ font-family:var(--f-display); font-weight:400; font-size:18px; letter-spacing:-.01em }
.tier .tier-price{ font-family:var(--f-display); font-weight:300; font-size:clamp(24px, 2.2vw, 32px); letter-spacing:-.03em; color:var(--beige); white-space:nowrap }
.tier small{ grid-column:1 / -1; font-size:13px; color:var(--mute); line-height:1.45 }
.calc-result .btn{ width:100% }
.calc-result .field input{ background:var(--bg) }
.calc-disc{ margin:16px 0 0; font-size:12.5px; color:var(--mute); line-height:1.5 }
@media (max-width:900px){ .calc{ grid-template-columns:1fr } .calc-result{ position:static } }

.contacts-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px, 5vw, 110px) }
.map{ position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--bg-3); border:1px solid var(--line) }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05) }
.map-open{ position:absolute; left:16px; top:16px; z-index:2; box-shadow:0 10px 30px rgba(0,0,0,.4) }
.hours{ display:grid; grid-template-columns:auto 1fr; gap:8px 24px; font-size:16px; margin:0 0 28px }
.hours dt{ color:var(--mute) } .hours dd{ margin:0 }
@media (max-width:900px){ .contacts-grid{ grid-template-columns:1fr } }

.prose{ max-width:760px }
.prose h2{ font-size:clamp(24px, 2.2vw, 32px); margin:1.6em 0 .6em; font-weight:400; letter-spacing:-.01em }
.prose p, .prose li{ font-size:15.5px; color:var(--text-2) }
.prose a{ color:var(--text); text-decoration:underline; text-underline-offset:3px }
.prose ul{ padding-left:1.2em }

/* Крупнее цели нажатия и фильтры в одну строку с прокруткой */
@media (max-width:900px){
  .tab{ padding:15px 0; white-space:nowrap; flex:none }
  .tabs, .filters-row{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
    margin-right:calc(var(--gutter) * -1); padding-right:var(--gutter);
  }
  .tabs::-webkit-scrollbar, .filters-row::-webkit-scrollbar{ display:none }
  .tabs{ gap:0 22px }
  .filters-row{ gap:0 20px }
  .filters-row small{ position:sticky; left:0; z-index:1; padding:0 12px 0 0; background:linear-gradient(90deg, var(--bg) 72%, rgba(247,244,239,0)) }
  .contact-list li a, .mnav-contacts a{ padding:7px 0 }
  .link{ padding-top:10px; padding-bottom:10px }
  .ftr ul a{ display:inline-block; padding:3px 0 }
}

/* ---------- Мини-фото в первом экране ---------- */
.hero-mini{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:clamp(28px, 4vh, 44px); max-width:420px }
.mini{ display:block; text-align:left; width:100%; cursor:pointer }
.mini-img{ display:block; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r); background:var(--bg-3) }
.mini-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .4s; filter:brightness(.97) }
.mini:hover .mini-img img{ transform:scale(1.05); filter:brightness(1) }
.mini-name{ display:block; margin-top:9px; font:500 10.5px/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--text-2) }
.mini:hover .mini-name{ color:var(--text) }
@media (max-width:1000px){ .hero-mini{ max-width:none; margin-top:26px } }
@media (max-width:420px){ .mini-name{ font-size:9.5px; letter-spacing:.06em } }

/* ---------- О компании и гарантии ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px, 5vw, 96px); align-items:start }
.about-text p{ font-size:clamp(16px, 1.2vw, 18px); line-height:1.6; color:var(--text-2); max-width:56ch }
.about-facts{ display:flex; flex-wrap:wrap; gap:20px 56px; margin:clamp(28px, 3vw, 42px) 0; padding-top:26px; border-top:1px solid var(--line) }
.about-facts div{ display:flex; align-items:baseline; gap:12px }
.about-facts b{ font-family:var(--f-display); font-weight:200; font-size:clamp(30px, 2.8vw, 44px); letter-spacing:-.04em; color:var(--text) }
.about-facts span{ font-size:13.5px; color:var(--text-2); max-width:18ch; line-height:1.3 }
.guar{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 2vw, 30px) }
.guar-item{ padding:22px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-3) }
.guar-item b{ display:block; font-family:var(--f-display); font-weight:400; font-size:clamp(19px, 1.6vw, 23px); letter-spacing:-.02em; margin-bottom:8px; color:var(--beige) }
.guar-item span{ font-size:14.5px; color:var(--text-2); line-height:1.5 }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:28px } .guar{ grid-template-columns:1fr } }

/* ---------- Кнопки в каталоге ---------- */
.dirs-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px, 3vw, 38px) }
@media (max-width:900px){ .dirs-cta{ margin-top:22px } }

/* ---------- Стили без фотографий ---------- */
.styles-sec{ background:var(--bg-2) }
.style-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2) }
.style-list li{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:clamp(16px, 3vw, 48px); padding:clamp(22px, 2.6vw, 34px) 0; border-bottom:1px solid var(--line) }
.style-list i{ font:500 11px/1 var(--f-body); letter-spacing:.2em; font-style:normal; color:var(--sage) }
.style-list b{ display:block; font-family:var(--f-display); font-weight:300; font-size:clamp(26px, 2.8vw, 42px); letter-spacing:-.03em; line-height:1.1 }
.style-list p{ margin:8px 0 0; font-size:15px; color:var(--text-2); line-height:1.5; max-width:62ch }
.style-list .link{ white-space:nowrap }
@media (max-width:760px){
  .style-list li{ grid-template-columns:44px minmax(0,1fr); gap:12px 14px; padding:20px 0 }
  .style-list .link{ grid-column:2; justify-self:start; margin-top:12px }
}

/* ---------- Услуги ---------- */
.services{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 2.4vw, 36px) }
.service{ padding-top:22px; border-top:1px solid var(--line-2); position:relative }
.service::before{ content:""; position:absolute; left:0; top:-1px; width:40px; height:1px; background:var(--sage) }
.service b{ display:block; font-family:var(--f-display); font-weight:400; font-size:clamp(19px, 1.6vw, 23px); letter-spacing:-.02em; margin-bottom:10px }
.service p{ margin:0; font-size:14.5px; color:var(--text-2); line-height:1.55 }
@media (max-width:900px){ .services{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .services{ grid-template-columns:1fr; gap:24px } }

/* ---------- Отзывы ---------- */
.reviews-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; padding:clamp(24px, 3vw, 40px); border:1px solid var(--line); border-radius:8px; background:var(--bg-3) }
.reviews-cta p{ margin:0; font-size:16px; color:var(--text-2); max-width:52ch }

/* ---------- Предложения на главной ---------- */
.offers-sec{ background:var(--bg-2) }

/* ---------- О компании: портрет и текст ---------- */
.about-wrap{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(36px, 6vw, 110px); align-items:start }
.about-photo{ margin:0; position:sticky; top:110px }
.about-img{ display:block; aspect-ratio:4/5; overflow:hidden; border-radius:6px; background:var(--bg-3) }
.about-img img{ width:100%; height:100%; object-fit:cover }
.about-photo figcaption{ display:flex; flex-direction:column; gap:4px; margin-top:16px }
.about-photo figcaption b{ font-family:var(--f-display); font-weight:400; font-size:20px; letter-spacing:-.01em }
.about-photo figcaption span{ font-size:13px; color:var(--mute); letter-spacing:.03em }
.about-p{ font-size:16px; line-height:1.65; color:var(--text-2); max-width:60ch }
.about-body .lead{ max-width:52ch }
.reasons-title{ margin:clamp(30px, 3.4vw, 46px) 0 12px; font-size:clamp(22px, 1.9vw, 28px) }
.reasons{ list-style:none; margin:24px 0 clamp(28px, 3vw, 40px); padding:0; display:grid; grid-template-columns:1fr 1fr; gap:24px 34px }
.reasons li{ position:relative; padding-top:16px; border-top:1px solid var(--line-2) }
.reasons li::before{ content:""; position:absolute; left:0; top:-1px; width:32px; height:1px; background:var(--sage) }
.reasons b{ display:block; font-family:var(--f-display); font-weight:500; font-size:16.5px; letter-spacing:-.01em; margin-bottom:6px }
.reasons span{ font-size:14.5px; color:var(--text-2); line-height:1.55 }
@media (max-width:900px){
  .about-wrap{ grid-template-columns:1fr; gap:30px }
  .about-photo{ position:static; max-width:440px }
  .reasons{ grid-template-columns:1fr; gap:20px }
}

/* ---------- Гарантии ---------- */
.guar-wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px, 5vw, 96px); align-items:center; padding:clamp(28px, 3.6vw, 56px); border:1px solid var(--line); border-radius:8px; background:var(--bg-3) }
.guar-num{ font-family:var(--f-display); font-weight:200; font-size:clamp(72px, 8vw, 128px); line-height:.9; letter-spacing:-.05em; color:var(--red-2) }
.guar-sub{ margin:10px 0 0; font-size:14px; color:var(--text-2); letter-spacing:.02em }
.guar-text p{ margin:0 0 26px; font-size:clamp(17px, 1.35vw, 20px); line-height:1.6; color:var(--text); max-width:52ch }
@media (max-width:860px){ .guar-wrap{ grid-template-columns:1fr; gap:22px } }

/* ---------- Страница «О компании» ---------- */
.about-page .about-p, .about-page .lead{ max-width:64ch }
.about-chapter{ padding-top:clamp(40px, 5vw, 72px); margin-top:clamp(40px, 5vw, 72px); border-top:1px solid var(--line) }
.about-chapter h2{ font-size:clamp(28px, 3vw, 44px); margin-bottom:22px }

/* ---------- Каталог: залипающая колонка должна целиком помещаться в экран ---------- */
@media (min-width:901px){
  .dirs-side{ top:92px }
  .dirs-side .eyebrow{ margin-bottom:16px }
  .dirs-side h2{ font-size:clamp(28px, 2.6vw, 44px) }
  .dirs-side .lead{ font-size:15px; line-height:1.5; margin-top:14px; max-width:44ch }
  .dirs-list{ margin-top:clamp(16px, 1.8vw, 24px) }
  .dirs-list a{ padding:8px 0; gap:14px; grid-template-columns:34px 1fr auto }
  .dirs-list b{ font-size:clamp(17px, 1.35vw, 21px); line-height:1.3 }
  .dirs-list small{ font-size:11.5px }
  .dirs-cta{ margin-top:18px; gap:10px }
  .dirs-cta .btn{ height:46px; padding:0 20px; font-size:11.5px; letter-spacing:.12em }
}
/* невысокие экраны ноутбуков — без пояснения под заголовком */
@media (min-width:901px) and (max-height:780px){
  .dirs-side .lead{ display:none }
  .dirs-side h2{ font-size:clamp(26px, 2.3vw, 36px) }
  .dirs-list a{ padding:7px 0 }
}
/* совсем низкие окна — колонка просто прокручивается вместе со страницей */
@media (min-width:901px) and (max-height:600px){
  .dirs-side{ position:static }
}

/* ---------- Первый экран: фото фоном, текст на фото (по образцу заказчицы) ---------- */
.hero.hero-full{ display:block; position:relative; min-height:100vh; min-height:100svh; padding:0; overflow:hidden; background:var(--bg-2); color:var(--text) }
.hero-full .hero-bg{ position:absolute; inset:0; z-index:0; height:auto; min-height:0; background:var(--bg-2) }
.hero-full .hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 62%; opacity:1; transform:none; transition:none }
/* текст стоит на светлой стене кадра; под ним только едва заметная подложка, правая часть фото чистая */
.hero-full .hero-bg::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(247,244,239,.42) 0%, rgba(247,244,239,.26) 28%, rgba(247,244,239,0) 50%) }
.hero-full .hero-content{ position:relative; z-index:1; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:calc(96px + 3vh); padding-bottom:clamp(28px, 5vh, 56px) }
.hero-full .hero-top{ display:flex; align-items:center; gap:14px; margin:0 0 clamp(18px, 2.6vh, 30px); font:500 11px/1.5 var(--f-body); letter-spacing:.24em; text-transform:uppercase; color:#22262A }
.hero-full .hero-top::before{ content:""; flex:none; width:26px; height:1px; background:var(--sage) }
.hero-full h1{ font-size:clamp(46px, 6vw, 104px); margin:0 0 clamp(18px, 2.6vh, 30px); max-width:12ch; color:#15181B }
.hero-full .lead{ max-width:42ch; color:#24282C; margin-bottom:clamp(24px, 3.6vh, 38px) }
.hero-full .hero-cta{ display:flex; flex-wrap:wrap; gap:14px }
.hero-full .btn-ghost{ background:rgba(247,244,239,.78); border-color:rgba(27,30,33,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.hero-full .hero-mini{ margin-top:clamp(26px, 4vh, 44px); max-width:380px }
.hero-full .mini-img{ border:3px solid #fff; box-shadow:0 10px 30px rgba(27,30,33,.18) }
.hero-full .mini-name{ color:#22262A }
@media (max-width:1000px) and (orientation:landscape){
  .hero-full h1{ font-size:clamp(42px, 7vw, 72px) }
  .hero-full .hero-bg::after{ background:linear-gradient(90deg, rgba(247,244,239,.7) 0%, rgba(247,244,239,.5) 36%, rgba(247,244,239,0) 64%) }
}
/* невысокие экраны ноутбуков: мини-фото компактнее, чтобы всё помещалось в первый экран */
@media (min-width:1001px) and (max-height:800px){
  .hero-full .hero-mini{ max-width:300px; margin-top:22px }
  .hero-full .lead{ margin-bottom:24px }
}
@media (orientation:landscape) and (max-height:640px){ .hero-full .hero-mini{ display:none } }
/* телефон и планшет стоя: вертикальное фото на весь экран, заголовок сверху на светлом потолке,
   кнопки внизу на фото, мини-фото — полосой сразу под первым экраном */
@media (max-width:700px), (max-width:1000px) and (orientation:portrait){
  .hero.hero-full{ display:grid; min-height:0; grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);
    grid-template-rows:auto auto auto minmax(26svh, 1fr) auto auto; background:var(--bg) }
  .hero-full .hero-bg{ position:relative; inset:auto; grid-column:1 / -1; grid-row:1 / 6; min-height:100svh }
  .hero-full .hero-bg img{ object-position:50% 40% }
  .hero-full .hero-bg::after{ display:none }
  .hero-full .hero-content{ display:contents }
  .hero-full .hero-content > *{ grid-column:2; position:relative; z-index:1 }
  .hero-full .hero-top{ grid-row:1; margin:0; padding-top:calc(76px + 20px); letter-spacing:.2em; font-size:10.5px }
  .hero-full h1{ grid-row:2; margin:12px 0 0; font-size:clamp(40px, 11.4vw, 64px); max-width:none }
  .hero-full .lead{ grid-row:3; margin:14px 0 0; max-width:30ch; font-size:15.5px; line-height:1.5 }
  .hero-full .hero-cta{ grid-row:5; align-self:end; padding-bottom:22px; display:grid; grid-template-columns:1fr; gap:10px }
  .hero-full .hero-cta .btn{ width:100%; height:54px }
  .hero-full .hero-top, .hero-full h1, .hero-full .lead{ text-shadow:0 0 14px rgba(247,244,239,.9), 0 0 3px rgba(247,244,239,.6) }
  .hero-full .hero-mini{ grid-row:6; grid-column:1 / -1; max-width:none; margin:0; padding:18px var(--gutter) 6px; background:var(--bg) }
  .hero-full .mini-img{ border:0; box-shadow:none }
  .hero-full .mini-name{ color:var(--text-2) }
}
@media (max-width:560px){
  .hero-full .hero-top-salon{ display:none }
  /* строки подзаголовка не заходят на чёрную раму витрины в кадре */
  .hero-full .lead{ max-width:calc(70vw - 20px) }
}
@media (max-width:1000px) and (orientation:portrait) and (min-width:701px){
  .hero-full .hero-top{ padding-top:calc(76px + 34px) }
  .hero-full .lead{ font-size:18px; max-width:36ch }
  .hero-full .hero-cta{ grid-template-columns:repeat(2, max-content); padding-bottom:40px }
  .hero-full .hero-cta .btn{ width:auto; height:58px }
  .hero-full .hero-mini{ max-width:none; padding-top:26px }
}
/* логотип Анны целиком: вензель «АМ» в овале + «Агата МЕБЕЛЬ», её красный */
@media (min-width:1101px){ .logo img{ height:54px } .hdr.is-scrolled .logo img{ height:48px } }
@media (max-width:1100px){ .logo img{ height:42px } .hdr.is-scrolled .logo img{ height:38px } }
@media (max-width:420px){ .logo img{ height:34px } .hdr.is-scrolled .logo img{ height:32px } .hdr-right{ gap:12px } .hdr-in{ gap:12px } }
@media (max-width:350px){ .logo img, .hdr.is-scrolled .logo img{ height:30px } .hdr-right .btn-sm{ padding:0 16px } }
.logo img{ transition:height .3s var(--ease) }
.ftr-brand img{ height:clamp(96px, 9vw, 128px) }
/* с полным логотипом шапка шире: пункты меню не переносим, на средних экранах меню компактнее, а до 1240px — в бургер (телефон остаётся) */
.nav a{ white-space:nowrap }
@media (min-width:1241px) and (max-width:1400px){ .nav{ gap:clamp(14px, 1.3vw, 20px); letter-spacing:.1em } .hdr-right{ gap:20px } }
@media (min-width:1101px) and (max-width:1240px){ .nav{ display:none } .burger{ display:flex } .hdr-right{ gap:20px } }

/* ---------- Отзывы: карточки (пока тексты-примеры, см. заглушку в index.html) ---------- */
.reviews{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 2vw, 26px) }
.review{ position:relative; margin:0; display:flex; flex-direction:column; justify-content:space-between; gap:28px; padding:clamp(26px, 3vw, 44px); border:1px solid var(--line); border-radius:8px; background:var(--bg-3) }
.review::before{ content:"\201C"; position:absolute; top:clamp(8px, 1.2vw, 16px); right:clamp(20px, 2.4vw, 34px); font:300 clamp(72px, 7vw, 104px)/1 var(--f-display); color:var(--beige); opacity:.3; pointer-events:none }
.review blockquote{ margin:0; max-width:48ch; font:300 clamp(17px, 1.3vw, 20px)/1.55 var(--f-display); letter-spacing:-.005em; color:var(--text) }
.review figcaption{ display:flex; flex-direction:column; gap:7px; padding-top:20px; border-top:1px solid var(--line) }
.review figcaption b{ font:500 15px/1.2 var(--f-body); color:var(--text) }
.review figcaption span{ font:500 10.5px/1.45 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--sage-2) }
.reviews-note{ margin:14px 0 clamp(22px, 2.6vw, 34px); font-size:12.5px; color:var(--mute) }
/* телефон: карточки листаются вбок, следующая выглядывает */
@media (max-width:760px){
  .reviews{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter) 4px; scroll-padding:0 var(--gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .reviews::-webkit-scrollbar{ display:none }
  .review{ scroll-snap-align:start; gap:22px; padding:24px 22px }
  .review::before{ font-size:72px }
}