/* ══════════════════════════════════════════════════════════════════
   Вкуснофф кейтеринг — демонстрационная страница
   Палитра и типографика: тёмная тёплая сцена + один тёплый акцент
   (терракота #AF582C из палитры EasyMeals, охра #CEA14A).
   Движение: только transform и opacity. Никакого ease-in.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0B0908;
  --ink-1:    #100C0A;
  --ink-2:    #17120E;
  --ink-3:    #221A14;
  --cocoa:    #3E3128;
  --cream:    #F1EAE0;
  --cream-2:  #CBBFAF;
  --dim:      #8B7F73;
  --terra:    #C4622F;
  --terra-dk: #AF582C;
  --ochre:    #CEA14A;
  --line:     rgba(241,234,224,.11);
  --line-2:   rgba(241,234,224,.06);

  --dsp: 'Cormorant Garamond', 'Times New Roman', serif;
  --ui:  'Onest', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mn:  'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --pad: clamp(20px, 5vw, 76px);
  --max: 1520px;
  --gut: clamp(28px, 3.4vw, 56px);

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--ui); font-weight:300; font-size:clamp(15px,.55vw + 13px,17.5px);
  line-height:1.62; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:lining-nums;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }
img,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4,p,figure,dl,dd,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
::selection{ background:var(--terra); color:#fff }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.mono{ font-family:var(--mn); font-weight:400; font-size:.7rem; letter-spacing:.16em;
       text-transform:uppercase; color:var(--dim) }
.dim{ color:var(--dim) }
.skip{ position:fixed; top:-100px; left:12px; z-index:200; background:var(--terra);
       color:#fff; padding:10px 16px; border-radius:2px }
.skip:focus{ top:12px }
:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; border-radius:2px }

/* ── типографика ──────────────────────────────────────────────── */
.h2{
  font-family:var(--dsp); font-weight:300; letter-spacing:-.015em;
  font-size:clamp(2.3rem,5.1vw,4.9rem); line-height:1.02; color:var(--cream);
}
.h3{
  font-family:var(--dsp); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.7rem,2.6vw,2.6rem); line-height:1.1;
}
.kicker{ color:var(--terra); margin-bottom:clamp(14px,1.4vw,22px) }
.form .h2,.del .h2{ font-size:clamp(2.1rem,3.5vw,3.5rem) }

.section{ position:relative; padding-block:clamp(84px,10vw,190px); scroll-margin-top:80px }
[id]{ scroll-margin-top:80px }
.shead{ margin-bottom:clamp(40px,5vw,84px) }
.shead--split{ display:grid; grid-template-columns:1.35fr .85fr; gap:var(--gut); align-items:end }
.shead__note{ color:var(--cream-2); font-size:clamp(.95rem,.9vw,1.06rem); max-width:44ch;
              padding-bottom:.45em; border-top:1px solid var(--line); padding-top:22px }

/* ── кнопки и ссылки ──────────────────────────────────────────── */
.btn{
  --bg:var(--terra);
  position:relative; display:inline-flex; align-items:center; gap:.66em;
  padding:.86em 1.5em; border:0; border-radius:100px; cursor:pointer;
  background:var(--bg); color:#fff; font-size:.9rem; font-weight:500;
  letter-spacing:.005em; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
  box-shadow:0 0 0 0 rgba(196,98,47,0);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:#DA7440; transform:translate3d(0,101%,0);
  transition:transform .55s var(--e-out);
}
.btn:hover::before{ transform:translate3d(0,0,0) }
.btn:hover{ box-shadow:0 14px 40px -14px rgba(196,98,47,.65) }
.btn:active{ transform:scale(.98) }
.btn svg{ transition:transform .45s var(--e-out) }
.btn:hover svg{ transform:translate3d(4px,0,0) }
.btn--lg{ padding:1.06em 1.9em; font-size:.96rem }
.btn--sm{ padding:.66em 1.15em; font-size:.82rem }
.btn--full{ width:100%; justify-content:center }

.link-tel{ display:inline-flex; align-items:center; gap:.6em; font-size:.98rem;
           color:var(--cream); padding:.9em 0; position:relative }
.link-tel span{ background-image:linear-gradient(var(--terra),var(--terra));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--e-out) }
.link-tel:hover span{ background-size:100% 1px }
.link-tel svg{ color:var(--terra) }

.link-arrow{ display:inline-flex; align-items:center; gap:.55em; color:var(--terra);
             font-size:.92rem; margin-top:1.4em }
.link-arrow svg{ transition:transform .45s var(--e-out) }
.link-arrow:hover svg{ transform:translate3d(5px,0,0) }

.tag{ display:inline-block; padding:.42em .8em; border:1px solid var(--line);
      border-radius:100px; color:var(--cream-2); font-size:.62rem }

/* ══ прелоадер ═══════════════════════════════════════════════════ */
/* без JS занавес не показываем — иначе страница останется чёрной */
.loader{ display:none }
html.js .loader{
  position:fixed; inset:0; z-index:120; background:var(--ink);
  display:grid; place-items:center;
}
.loader__inner{ width:min(560px,74vw) }
.loader__word{ display:flex; justify-content:space-between; font-family:var(--dsp);
  font-weight:300; font-size:clamp(2.2rem,6.4vw,4.6rem); line-height:1; color:var(--cream) }
.loader__word span{ display:block; transform:translate3d(0,110%,0); opacity:0 }
.loader__meta{ display:flex; justify-content:space-between; margin-top:18px; opacity:0 }
.loader__bar{ height:1px; margin-top:14px; background:var(--line); overflow:hidden }
.loader__bar i{ display:block; height:100%; width:100%; background:var(--terra);
                transform:scaleX(0); transform-origin:0 50% }
.loader.is-done{ pointer-events:none }

/* ══ курсор ══════════════════════════════════════════════════════ */
.cursor{ position:fixed; top:0; left:0; z-index:115; pointer-events:none; opacity:0;
         mix-blend-mode:difference }
.cursor__dot,.cursor__ring{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) }
.cursor__dot{ width:5px; height:5px; background:#fff }
.cursor__ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,.55) }
body.cursor-on{ cursor:none }
body.cursor-on a,body.cursor-on button,body.cursor-on label,
body.cursor-on input,body.cursor-on summary,body.cursor-on select,
body.cursor-on textarea{ cursor:none }

/* ══ зерно ═══════════════════════════════════════════════════════ */
.grain{
  position:fixed; inset:-120px; z-index:110; pointer-events:none; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-3%,2%,0)}
  50%{transform:translate3d(2%,-3%,0)} 75%{transform:translate3d(-2%,-2%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ══ WebGL-холст ═════════════════════════════════════════════════ */
#gl{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0;
     transition:opacity .8s var(--e-out) }
body.gl-on #gl{ opacity:1 }
body.gl-on [data-gl] img{ opacity:0 }
[data-gl]{ position:relative }
[data-gl] img{ transition:opacity .35s linear }

/* ══ полоса прочитанного ═════════════════════════════════════════ */
.prog{ position:fixed; top:0; left:0; right:0; height:2px; z-index:61; pointer-events:none }
.prog i{ display:block; height:100%; background:linear-gradient(90deg,var(--terra),var(--ochre));
  transform:scaleX(0); transform-origin:0 50% }

/* ══ шапка ═══════════════════════════════════════════════════════ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--pad); background:transparent;
  transition:transform .6s var(--e-out), background-color .5s linear, box-shadow .5s linear;
}
.hdr::after{ content:''; position:absolute; inset:0; z-index:-1; background:var(--ink);
             opacity:0; transition:opacity .45s linear }
.hdr.is-solid::after{ opacity:.94 }
.hdr.is-solid{ box-shadow:0 1px 0 0 var(--line-2) }
.hdr.is-hidden{ transform:translate3d(0,-104%,0) }

.hdr__logo{ display:flex; align-items:center; gap:11px; flex:0 0 auto }
.hdr__mark{ color:var(--terra) }
.hdr__name{ font-family:var(--dsp); font-size:1.34rem; line-height:1; letter-spacing:.01em }
.hdr__name em{ display:block; font-family:var(--mn); font-style:normal; font-size:.52rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--dim); margin-top:5px }

.hdr__nav{ display:flex; gap:clamp(14px,1.7vw,30px); font-size:.86rem }
.hdr__nav a{ position:relative; color:var(--cream-2); padding:4px 0;
  transition:color .35s linear }
.hdr__nav a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--terra); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--e-out) }
.hdr__nav a:hover{ color:var(--cream) }
.hdr__nav a:hover::after{ transform:scaleX(1); transform-origin:0 50% }

.hdr__right{ display:flex; align-items:center; gap:16px }
.hdr__tel{ color:var(--cream); font-size:.78rem; letter-spacing:.06em }
.burger{ display:none; width:40px; height:40px; background:none; border:1px solid var(--line);
  border-radius:50%; position:relative }
.burger i{ position:absolute; left:11px; width:18px; height:1px; background:var(--cream);
  transition:transform .45s var(--e-out) }
.burger i:nth-child(1){ top:17px } .burger i:nth-child(2){ top:22px }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translate3d(0,2.5px,0) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translate3d(0,-2.5px,0) rotate(-45deg) }

.mmenu{ position:fixed; inset:0; z-index:55; background:var(--ink-1);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  padding:110px var(--pad) 48px; transform:translate3d(0,-100%,0);
  transition:transform .72s var(--e-out); visibility:hidden }
.mmenu.is-open{ transform:translate3d(0,0,0); visibility:visible }
.mmenu nav{ display:flex; flex-direction:column; gap:6px }
.mmenu nav a{ font-family:var(--dsp); font-size:clamp(2rem,9vw,3rem); line-height:1.18;
  color:var(--cream) }
.mmenu__foot{ border-top:1px solid var(--line); padding-top:24px }
.mmenu__tel{ font-size:1.3rem; color:var(--terra); display:block; margin-bottom:8px }

/* ══ первый экран ════════════════════════════════════════════════ */
.hero{ position:relative; z-index:2; min-height:100svh; display:flex; align-items:flex-end;
       padding:120px 0 clamp(30px,5vh,64px); overflow:clip }
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__media img[data-gl-alt]{ opacity:0 }
.hero__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(11,9,8,.80) 26%, rgba(11,9,8,.34) 60%, rgba(11,9,8,.58) 100%),
    linear-gradient(to right, rgba(11,9,8,.86) 0%, rgba(11,9,8,.52) 42%, rgba(11,9,8,.12) 72%, rgba(11,9,8,.34) 100%),
    radial-gradient(130% 85% at 16% 78%, rgba(11,9,8,.58), transparent 64%);
}
.hero__inner{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }
.hero__h1{
  font-family:var(--dsp); font-weight:300; letter-spacing:-.022em;
  font-size:clamp(2.4rem,7.9vw,9.2rem); line-height:.95; margin-bottom:clamp(20px,2.4vw,34px);
}
.hero__h1 .line{ display:block; overflow:hidden }
.hero__h1 em{ font-style:italic; color:var(--ochre) }
.hero__sub{ max-width:52ch; color:var(--cream-2); font-size:clamp(.98rem,1vw,1.16rem) }
.hero__cta{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); flex-wrap:wrap;
            margin-top:clamp(26px,3vw,44px) }

.hero__facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gut); margin-top:clamp(44px,6vw,90px); padding-top:26px;
  border-top:1px solid var(--line) }
.hero__facts dt{ font-family:var(--mn); font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:10px }
.hero__facts dd b{ display:block; font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.9rem,3.1vw,3rem); line-height:1; color:var(--cream) }
.hero__facts dd span{ display:block; margin-top:7px; font-size:.82rem; color:var(--cream-2) }

.hero__scroll{ position:absolute; right:var(--pad); bottom:clamp(30px,5vh,64px);
  display:flex; align-items:center; gap:12px; font-size:.6rem }
.hero__scroll i{ display:block; width:44px; height:1px; background:var(--line);
  position:relative; overflow:hidden }
.hero__scroll i::after{ content:''; position:absolute; inset:0; background:var(--terra);
  transform:translate3d(-100%,0,0); animation:scrollcue 2.4s var(--e-io) infinite }
@keyframes scrollcue{
  0%{transform:translate3d(-100%,0,0)} 55%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(100%,0,0)}
}

/* ══ бегущая строка ══════════════════════════════════════════════ */
.ticker{ position:relative; z-index:2; overflow:hidden; background:var(--ink);
  border-block:1px solid var(--line-2); padding:15px 0 }
.ticker__row{ display:flex; gap:30px; align-items:center; white-space:nowrap; will-change:transform }
.ticker__row span{ font-family:var(--mn); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream-2) }
.ticker__row i{ color:var(--terra); font-style:normal; font-size:.5rem }

/* ══ общий фон секций ════════════════════════════════════════════ */
.steps,.calc,.sets,.menu,.occ,.del,.rev,.faq{ position:relative; z-index:2; background:var(--ink) }
.calc,.rev{ background:var(--ink-1) }
/* холст лежит на z-index 1, поэтому секции со снимками не красим */
.occ{ background:transparent }
body.gl-on .occ__media{ background:transparent }

/* ══ три шага ════════════════════════════════════════════════════ */
.steps__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut) }
.steps__list li{ border-top:1px solid var(--line); padding-top:26px }
.steps__n{ display:block; color:var(--terra); margin-bottom:18px }
.steps__list h3{ font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.5rem,2.1vw,2.1rem); line-height:1.1; margin-bottom:12px }
.steps__list p{ color:var(--cream-2); font-size:.95rem }
.steps__fig{ margin-top:clamp(48px,6vw,96px); position:relative; overflow:hidden; border-radius:3px }
.steps__fig img{ width:100%; aspect-ratio:3/1.05; object-fit:cover }
.steps__fig figcaption{ position:absolute; left:clamp(16px,2vw,34px); bottom:clamp(14px,2vw,28px);
  color:var(--cream); background:rgba(11,9,8,.55); padding:.5em .9em; border-radius:100px }

/* ══ калькулятор ═════════════════════════════════════════════════ */
.calc__grid{ display:grid; grid-template-columns:.95fr 1.15fr; gap:var(--gut) }
.calc__panel{ border:1px solid var(--line); border-radius:4px; padding:clamp(22px,2.6vw,40px);
  background:var(--ink-2); align-self:start }
.calc__label{ display:block; margin-bottom:14px }
.calc__big{ display:block; font-family:var(--dsp); font-weight:300;
  font-size:clamp(3.4rem,7vw,6.4rem); line-height:.9; color:var(--cream);
  font-variant-numeric:lining-nums tabular-nums }
.calc__guests{ margin-bottom:36px }

.calc__range{ -webkit-appearance:none; appearance:none; width:100%; height:34px;
  background:transparent; margin-top:18px }
.calc__range::-webkit-slider-runnable-track{ height:1px; background:var(--line) }
.calc__range::-moz-range-track{ height:1px; background:var(--line) }
.calc__range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%; background:var(--terra); margin-top:-9.5px;
  border:3px solid var(--ink-2); box-shadow:0 0 0 1px var(--terra);
  transition:transform .35s var(--e-out) }
.calc__range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--terra);
  border:3px solid var(--ink-2); box-shadow:0 0 0 1px var(--terra) }
.calc__range:hover::-webkit-slider-thumb{ transform:scale(1.22) }
.calc__scale{ display:flex; justify-content:space-between; font-size:.6rem; margin-top:2px }

.calc__opts{ border:0; padding:0; margin:0 0 26px }
.calc__opts legend{ padding:0 }
.opt{ display:flex; align-items:center; gap:12px; padding:10px 0; cursor:pointer;
      color:var(--cream-2); font-size:.92rem }
.opt input{ position:absolute; opacity:0; width:0; height:0 }
.opt i{ flex:0 0 auto; width:19px; height:19px; border:1px solid var(--line);
  border-radius:3px; position:relative; transition:border-color .3s linear, background-color .3s linear }
.opt i::after{ content:''; position:absolute; left:5px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(42deg) scale(.4); opacity:0;
  transition:transform .35s var(--e-out), opacity .25s linear }
.opt input:checked + i{ background:var(--terra); border-color:var(--terra) }
.opt input:checked + i::after{ transform:rotate(42deg) scale(1); opacity:1 }
.opt input:focus-visible + i{ outline:2px solid var(--terra); outline-offset:3px }
.opt b{ font-weight:500; color:var(--cream) }
.calc__fine{ font-size:.78rem; color:var(--dim); border-top:1px solid var(--line-2); padding-top:18px }

.calc__result{ display:flex; flex-direction:column; gap:22px }
.calc__pick{ border:1px solid var(--line); border-radius:4px; padding:clamp(24px,2.8vw,44px);
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2)); position:relative; overflow:hidden }
.calc__pick::after{ content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--terra),var(--ochre)); transform-origin:0 50% }
.calc__pickTitle{ font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.75rem,3vw,2.9rem); line-height:1.06; letter-spacing:-.01em }
.calc__pickMeta{ margin-top:12px; color:var(--cream-2) }
.calc__sum{ margin-top:clamp(22px,2.4vw,34px); border-top:1px solid var(--line) }
.calc__sum > div[hidden]{ display:none }
.calc__sum > div{ display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; padding:13px 0; border-bottom:1px solid var(--line-2) }
.calc__sum b{ font-weight:400; font-variant-numeric:lining-nums tabular-nums; font-size:1.02rem }
.calc__sum .is-minus{ color:var(--ochre) }
.calc__total{ display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; padding:20px 0 6px }
.calc__total strong{ font-family:var(--dsp); font-weight:400;
  font-size:clamp(2.1rem,4.2vw,3.6rem); line-height:1; color:var(--cream);
  font-variant-numeric:lining-nums tabular-nums }
.calc__perGuest{ color:var(--terra); margin-bottom:26px }

.calc__alts ul{ display:grid; gap:2px; margin-top:14px }
.calc__alts li{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  padding:14px 16px; background:var(--ink-2); border-radius:3px;
  transition:transform .45s var(--e-out), background-color .35s linear }
.calc__alts li:hover{ transform:translate3d(6px,0,0); background:var(--ink-3) }
.calc__alts li span{ font-size:.9rem; color:var(--cream-2) }
.calc__alts li b{ font-weight:400; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap }

/* ══ лестница фуршетов ═══════════════════════════════════════════ */
.ladder{ margin-top:clamp(40px,4.6vw,78px); padding-top:clamp(22px,2.4vw,34px);
  border-top:1px solid var(--line); overflow-x:clip }
.ladder__head{ display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap; margin-bottom:20px }
.ladder__now{ color:var(--cream-2); text-transform:none; letter-spacing:.06em;
  text-align:right; min-height:1.2em }
.ladder__now b{ color:var(--ochre); font-weight:400 }
.ladder__bars{ display:flex; align-items:flex-end; gap:clamp(3px,.5vw,9px);
  height:clamp(110px,13vw,190px) }
.lbar{ position:relative; flex:1 1 0; min-width:0; background:none; border:0; padding:0;
  height:100%; display:flex; align-items:flex-end; cursor:pointer }
.lbar i{ display:block; width:100%; background:var(--ink-3); border-radius:2px 2px 0 0;
  transform-origin:50% 100%; transition:background-color .4s linear }
.lbar:hover i,.lbar:focus-visible i{ background:var(--cream-2) }
.lbar.is-on i{ background:linear-gradient(180deg,var(--ochre),var(--terra)) }
.lbar span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.ladder__axis{ display:flex; justify-content:space-between; margin-top:12px }

/* ══ полноэкранная цитата ════════════════════════════════════════ */
.quote{ position:relative; z-index:2; min-height:min(78vh,720px);
  display:grid; place-items:center; overflow:clip; padding:clamp(70px,9vw,140px) 0 }
.quote__bg{ position:absolute; inset:0; z-index:-2 }
.quote__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42 }
.quote::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(78% 62% at 50% 50%, rgba(11,9,8,.62), rgba(11,9,8,.94) 78%) }
.quote__inner{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--pad);
  text-align:center }
.quote__inner p{ font-family:var(--dsp); font-weight:300; font-style:italic;
  font-size:clamp(2rem,5.6vw,5.4rem); line-height:1.05; letter-spacing:-.015em;
  color:var(--cream) }
.quote__inner footer{ margin-top:clamp(22px,2.6vw,40px) }
.quote__inner footer b{ display:block; font-weight:500; font-size:1rem }
.quote__inner footer span{ display:block; margin-top:7px }

/* ══ наборы ══════════════════════════════════════════════════════ */
.sets__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut) }
.setcard{ display:flex; flex-direction:column }
.setcard__media{ position:relative; display:block; overflow:hidden; border-radius:3px;
  background:var(--ink-2) }
.setcard__media img{ width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.05s var(--e-out) }
.setcard__media:hover img{ transform:scale(1.05) }
.setcard__price{ position:absolute; left:14px; bottom:14px; padding:.5em 1em;
  background:var(--ink); color:var(--cream); border-radius:100px;
  font-family:var(--mn); font-size:.75rem; letter-spacing:.04em;
  transition:transform .5s var(--e-out), background-color .4s linear }
.setcard__media:hover .setcard__price{ transform:translate3d(0,-4px,0); background:var(--terra); color:#fff }
.setcard__body{ padding-top:20px }
.rev__src{ max-width:38ch }
.setcard__body h3{ font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.5rem,2.2vw,2.15rem); line-height:1.06 }
.setcard__cat{ margin-top:9px; font-size:.62rem; line-height:1.55; text-transform:none;
  letter-spacing:.07em; color:var(--dim) }
.setcard__note{ margin-top:13px; color:var(--cream-2); font-size:.9rem }
.setcard__meta{ display:flex; gap:16px; margin-top:14px; font-size:.62rem; color:var(--terra) }
.sets__all{ margin-top:clamp(40px,4.6vw,72px); padding-top:26px; border-top:1px solid var(--line);
  color:var(--cream-2); display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline }
.sets__all b{ color:var(--cream); font-weight:500 }
.sets__all a{ color:var(--terra); border-bottom:1px solid rgba(196,98,47,.4); padding-bottom:1px }
.sets__all a:hover{ border-color:var(--terra) }

/* ══ витрина: лента разделов ═════════════════════════════════════ */
.rail{ position:relative; margin-block:clamp(20px,3vw,44px);
       overflow:hidden; padding-inline:var(--pad);
       -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
               mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) }
.rail__track{ display:flex; gap:clamp(12px,1.4vw,22px); width:max-content; will-change:transform }
.railcard{ position:relative; display:block; width:clamp(210px,22vw,340px);
  border-radius:3px; overflow:hidden; background:var(--ink-2) }
.railcard img{ width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform 1s var(--e-out), opacity .5s linear; opacity:.86 }
.railcard:hover img{ transform:scale(1.06); opacity:1 }
.railcard__cap{ position:absolute; inset:auto 0 0 0; padding:26px 16px 15px;
  background:linear-gradient(to top, rgba(11,9,8,.94), rgba(11,9,8,0)) }
.railcard__cap b{ display:block; font-weight:400; font-size:.98rem }
.railcard__cap i{ display:block; margin-top:5px; font-style:normal; font-size:.6rem;
  color:var(--terra) }

/* ══ шесть позиций ═══════════════════════════════════════════════ */
.signature{ margin-top:clamp(46px,6vw,100px) }
.signature__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--gut); margin-top:clamp(24px,3vw,44px) }
.signature__list li{ display:grid; grid-template-columns:96px 1fr auto; gap:22px;
  align-items:center; padding:16px 0; border-bottom:1px solid var(--line-2) }
.signature__list figure{ overflow:hidden; border-radius:3px; background:var(--ink-2) }
.signature__list img{ width:96px; height:96px; object-fit:cover; display:block;
  transition:transform .9s var(--e-out) }
.signature__list li:hover img{ transform:scale(1.09) }
.signature__list b{ display:block; font-weight:400; font-size:.98rem; line-height:1.35 }
.signature__list span{ display:block; margin-top:6px; font-size:.6rem }
.signature__list em{ font-family:var(--dsp); font-style:normal; font-weight:400;
  font-size:1.55rem; color:var(--ochre); white-space:nowrap }

/* ══ прайс-лист ══════════════════════════════════════════════════ */
.price{ margin-top:clamp(56px,7vw,120px); border-top:1px solid var(--line); padding-top:clamp(28px,3vw,48px) }
.price__head{ display:grid; grid-template-columns:auto 1fr; gap:var(--gut);
  align-items:end; margin-bottom:clamp(22px,2.6vw,38px) }
.price__tools{ display:flex; flex-direction:column; gap:16px; align-items:flex-end }
.search{ display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:100px; padding:.6em 1.1em; width:min(300px,100%);
  transition:border-color .35s linear }
.search:focus-within{ border-color:var(--terra) }
.search svg{ color:var(--dim); flex:0 0 auto }
.search input{ background:none; border:0; outline:none; width:100%; font-size:.88rem }
.search input::placeholder{ color:var(--dim) }
.search input{ caret-color:var(--terra) }
.search input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; cursor:pointer;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23C4622F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") }
.price__tabs{ display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end }
.ptab{ background:none; border:1px solid var(--line); border-radius:100px;
  padding:.46em 1em; font-family:var(--mn); font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); cursor:pointer;
  transition:color .3s linear, border-color .3s linear, background-color .3s linear }
.ptab:hover{ color:var(--cream); border-color:var(--cream-2) }
.ptab.is-on{ background:var(--terra); border-color:var(--terra); color:#fff }

.price__body{ min-height:200px }
.pgroup + .pgroup{ margin-top:clamp(30px,3.4vw,54px) }
.pgroup__t{ font-family:var(--dsp); font-weight:300; font-size:1.5rem; line-height:1;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:4px;
  display:flex; justify-content:space-between; align-items:baseline; gap:18px }
.pgroup__t small{ font-family:var(--mn); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim) }
.prow{ display:grid; grid-template-columns:1fr auto 78px; gap:18px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--line-2); position:relative }
.prow__n{ font-size:.92rem; color:var(--cream-2); line-height:1.45 }
.prow mark{ background:rgba(206,161,74,.24); color:var(--cream); border-radius:2px }
.prow__p{ font-family:var(--dsp); font-size:1.24rem; font-weight:400; color:var(--cream);
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap }
.prow__m{ font-family:var(--mn); font-size:.58rem; letter-spacing:.12em; color:var(--dim);
  text-align:right; white-space:nowrap }
.price__note{ margin-top:22px; color:var(--dim) }
.pempty{ padding:40px 0; color:var(--dim) }

/* ══ поводы ══════════════════════════════════════════════════════ */
.occ__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut) }
.occ__item{ display:flex; flex-direction:column }
.occ__media{ overflow:hidden; border-radius:3px; background:var(--ink-2) }
.occ__media img{ width:100%; aspect-ratio:3/4; object-fit:cover;
  transition:transform 1.1s var(--e-out) }
.occ__item:hover .occ__media img{ transform:scale(1.045) }
.occ__body{ padding-top:22px }
.occ__n{ display:block; color:var(--terra); margin-bottom:12px }
.occ__body h3{ font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.6rem,2.4vw,2.3rem); line-height:1.05; margin-bottom:11px }
.occ__body p{ color:var(--cream-2); font-size:.93rem; margin-bottom:16px }

/* ══ доставка ════════════════════════════════════════════════════ */
.del__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gut) }
.del__list > div{ display:grid; grid-template-columns:1fr auto; gap:24px;
  align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line-2) }
.del__list dt{ color:var(--cream-2); font-size:.98rem }
.del__list dd{ text-align:right }
.del__list dd b{ font-family:var(--dsp); font-weight:400;
  font-size:clamp(1.35rem,2.1vw,2rem); line-height:1; color:var(--cream); white-space:nowrap }
.del__list dd span{ display:block; margin-top:6px; font-size:.76rem; color:var(--dim) }
.del__pickup{ border:1px solid var(--line); border-radius:4px; padding:clamp(20px,2.4vw,34px);
  background:var(--ink-2); align-self:start }
.del__fig{ margin:calc(clamp(20px,2.4vw,34px) * -1) calc(clamp(20px,2.4vw,34px) * -1) 26px;
  overflow:hidden; border-radius:3px 3px 0 0 }
.del__fig img{ width:100%; aspect-ratio:16/8; object-fit:cover }
.del__pickup h3{ font-family:var(--dsp); font-weight:300; font-size:1.9rem; line-height:1 }
.del__addr{ margin-top:14px; color:var(--cream-2); font-size:.95rem }
.del__addr .mono{ display:block; margin-top:7px }
.del__ul{ margin-top:20px; display:grid; gap:10px }
.del__ul li{ position:relative; padding-left:20px; color:var(--cream-2); font-size:.92rem }
.del__ul li::before{ content:''; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--terra) }
.del__ul b{ color:var(--cream); font-weight:500 }

/* ══ отзывы ══════════════════════════════════════════════════════ */
.rev__bars{ display:grid; gap:14px; padding-top:22px; border-top:1px solid var(--line) }
.bar{ display:grid; grid-template-columns:120px 1fr auto; gap:16px; align-items:center;
  font-size:.85rem; color:var(--cream-2) }
.bar i{ display:block; height:2px; background:var(--line); overflow:hidden }
.bar i b{ display:block; height:100%; background:var(--terra); transform:scaleX(0);
  transform-origin:0 50% }
.rev__src{ margin-top:6px }

.rev__words{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--gut); padding-block:clamp(30px,4vw,58px);
  border-block:1px solid var(--line); margin-bottom:clamp(36px,4.4vw,72px) }
.rev__words li b{ display:block; font-family:var(--dsp); font-weight:300;
  font-size:clamp(2.2rem,4vw,3.6rem); line-height:1; color:var(--ochre) }
.rev__words li span{ display:block; margin-top:8px; font-size:.82rem; color:var(--cream-2) }

.rev__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut) }
.rev__grid blockquote{ border-top:1px solid var(--line); padding-top:24px;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px }
.rev__grid p{ font-family:var(--dsp); font-weight:300; font-size:clamp(1.16rem,1.5vw,1.44rem);
  line-height:1.42; color:var(--cream) }
.rev__grid footer b{ display:block; font-weight:500; font-size:.92rem }
.rev__grid footer span{ display:block; margin-top:5px }

/* ══ заявка ══════════════════════════════════════════════════════ */
.form{ position:relative; z-index:2; overflow:clip; background:transparent }
.form__bg{ position:absolute; inset:0; z-index:-1 }
.form__bg img{ width:100%; height:100%; object-fit:cover; opacity:.2 }
.form::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 22%, rgba(11,9,8,.72) 60%, rgba(11,9,8,.9) 100%) }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gut); align-items:start }
.form__lead{ margin-top:22px; color:var(--cream-2); max-width:42ch }
.form__pluses{ margin-top:30px; display:grid; gap:12px }
.form__pluses li{ display:flex; align-items:baseline; gap:14px; color:var(--cream-2); font-size:.95rem }
.form__pluses .mono{ color:var(--terra); font-size:.78rem; flex:0 0 auto; min-width:44px }
.form__fine{ margin-top:20px; font-size:.78rem; color:var(--dim) }

.form__card{ border:1px solid var(--line); border-radius:4px; background:var(--ink-2);
  padding:clamp(24px,2.8vw,44px); display:grid; gap:16px }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.f{ display:block }
.f > span{ display:block; font-family:var(--mn); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:9px }
.f input,.f select,.f textarea{ width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--line); padding:.62em 0; outline:none;
  font-size:.98rem; border-radius:0; transition:border-color .35s linear }
.f textarea{ resize:vertical; min-height:64px }
.f select{ appearance:none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238B7F73' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2em center; padding-right:1.6em }
.f select option{ background:var(--ink-2); color:var(--cream) }
.f input:focus,.f select:focus,.f textarea:focus{ border-color:var(--terra) }
.f input::placeholder,.f textarea::placeholder{ color:var(--dim) }
.f input[aria-invalid="true"]{ border-color:#D2553F }
.form__card .btn{ margin-top:10px }
.form__legal{ font-size:.72rem; color:var(--dim) }
.form__status{ font-family:var(--mn); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ochre); min-height:1.2em }

/* ══ вопросы ═════════════════════════════════════════════════════ */
.faq__list{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:clamp(20px,2.2vw,32px) 0; cursor:pointer; list-style:none;
  font-family:var(--dsp); font-weight:300; font-size:clamp(1.2rem,2vw,1.85rem); line-height:1.24 }
.faq summary::-webkit-details-marker{ display:none }
.faq summary i{ flex:0 0 auto; position:relative; width:22px; height:22px }
.faq summary i::before,.faq summary i::after{ content:''; position:absolute; inset:50% 0 auto 0;
  height:1px; background:var(--terra); transition:transform .5s var(--e-out) }
.faq summary i::after{ transform:rotate(90deg) }
.faq details[open] summary i::after{ transform:rotate(0deg) }
.faq details p{ color:var(--cream-2); max-width:78ch; font-size:.98rem;
  padding-bottom:clamp(20px,2.2vw,32px) }

/* ══ подвал ══════════════════════════════════════════════════════ */
.foot{ position:relative; z-index:2; background:var(--ink-1); border-top:1px solid var(--line);
  padding-block:clamp(50px,6vw,96px) 28px }
.foot__top{ display:grid; grid-template-columns:.62fr 1.6fr; gap:var(--gut) }
.foot__word{ font-family:var(--dsp); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(2.6rem,6vw,5.4rem); line-height:.92; color:var(--cream) }
.foot__tag{ margin-top:14px; color:var(--dim); font-size:.9rem; max-width:32ch }
.foot__cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.2vw,36px) }
.foot__label{ margin-bottom:14px }
.foot__cols p{ font-size:.9rem; color:var(--cream-2); margin-bottom:5px }
.foot__cols p b{ font-weight:500; color:var(--ochre) }
.foot__tel{ display:block; font-family:var(--dsp); font-size:1.4rem; color:var(--cream);
  margin-bottom:10px; white-space:nowrap }
.foot__tel:hover{ color:var(--terra) }
.foot__link{ font-size:.9rem; color:var(--terra) }
.foot__bot{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:clamp(40px,5vw,80px); padding-top:22px; border-top:1px solid var(--line-2) }

/* ══ появление ═══════════════════════════════════════════════════ */
html.js [data-reveal]{ opacity:0; transform:translate3d(0,26px,0) }
html.js [data-rise]{ opacity:0; transform:translate3d(0,22px,0) }

/* ══ адаптив ═════════════════════════════════════════════════════ */
@media (max-width:1240px){
  .hdr__nav{ display:none }
  .burger{ display:block }
  .shead--split{ grid-template-columns:1fr; align-items:start }
  .shead__note{ max-width:60ch }
  .calc__grid{ grid-template-columns:1fr }
  .del__grid{ grid-template-columns:1fr }
  .rev__words{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px var(--gut) }
  .price__head{ grid-template-columns:1fr }
  .price__tools{ align-items:flex-start }
  .price__tabs{ justify-content:flex-start }
  .foot__top{ grid-template-columns:1fr }
  .foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px var(--gut) }
}
@media (max-width:980px){
  .sets__grid,.occ__grid,.rev__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .steps__list{ grid-template-columns:1fr; gap:0 }
  .steps__list li{ padding-block:26px 30px }
  .signature__list{ grid-template-columns:1fr }
  .hero__facts{ grid-template-columns:1fr; gap:24px }
  .hero__facts > div{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline }
  .hero__facts dt{ margin-bottom:0 }
  .hero__facts dd{ text-align:right }
  .form__grid{ grid-template-columns:1fr }
  .form::after{ background:linear-gradient(180deg, rgba(11,9,8,.8), var(--ink) 55%) }
  .hero__scroll{ display:none }
}
@media (max-width:680px){
  .sets__grid,.occ__grid,.rev__grid{ grid-template-columns:1fr }
  .rev__words{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .f-row{ grid-template-columns:1fr }
  .hdr__tel{ display:none }
  .prow{ grid-template-columns:1fr auto; row-gap:4px }
  .prow__m{ grid-column:1 / -1; text-align:left }
  .signature__list li{ grid-template-columns:64px 1fr auto; gap:14px }
  .signature__list img{ width:64px; height:64px }
  .signature__list em{ font-size:1.3rem }
  .bar{ grid-template-columns:96px 1fr auto; gap:12px; font-size:.8rem }
  .steps__fig img{ aspect-ratio:3/2.2 }
  .foot__cols{ grid-template-columns:1fr }
  .del__fig img{ aspect-ratio:16/9 }
}
@media (max-width:480px){
  .btn--sm span{ display:none }
  .btn--sm::after{ content:'Заявка' }
  .hero{ min-height:92svh }
}

/* ══ выключение движения ═════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{ animation:none; opacity:.2 }
  #gl{ display:none }
  body.gl-on [data-gl] img{ opacity:1 }
  html.js [data-reveal],html.js [data-rise]{ opacity:1 !important; transform:none !important }
  .loader{ display:none }
  .cursor{ display:none }
  body.cursor-on{ cursor:auto }
  .hero__scroll i::after{ display:none }
  .bar i b{ transform:scaleX(1) }
  .ticker__row{ transform:none !important }
}