/* =========================================================================
   SKIFF GROUP — презентационный лендинг
   Тёплые светлые нейтрали, единственный акцент — бронза кожи и фурнитуры.
   Сетка: 12 колонок, все секции сидят на одних и тех же линиях.
   ========================================================================= */

/* ── Шрифты ───────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Onest";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("../fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Onest";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("../fonts/onest-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Golos";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("../fonts/golos-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Golos";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("../fonts/golos-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ── Токены ───────────────────────────────────────────────────────────── */
:root{
  --paper:#fbfbfc;
  --paper-2:#ffffff;
  --paper-3:#f1f2f5;
  --ink:#182436;
  --ink-2:#4a5364;
  --ink-3:#59616f;
  --rule:#e2e4ea;
  --accent:#a17e64;
  --accent-light:#cda98b;  /* бронза, читаемая на тёмной подложке карточек */
  --accent-d:#8a6449;   /* проходит AA (>=4.5) на самом тёмном фоне страницы #f1f2f5 */

  --ff-d:"Onest","Helvetica Neue",system-ui,sans-serif;
  --ff-b:"Golos","Helvetica Neue",system-ui,sans-serif;

  --h1:clamp(1.8rem,3.35vw,2.85rem);
  --h2:clamp(1.7rem,3vw,2.75rem);
  --body:clamp(1rem,1.05vw,1.0625rem);

  /* Шкала мелких кеглей. Ниже --t-micro не опускаемся: 9–10px на экране
     уже не читаются, а именно там стояли номера шагов и подпись логотипа. */
  --t-micro:.6875rem;   /* 11px — номера, служебные подписи  */
  --t-label:.75rem;     /* 12px — лейблы секций, прописные   */
  --t-sm:.875rem;       /* 14px — мелкая наборная копия      */
  --t-base:.9375rem;    /* 15px — описания, ссылки, контакты */
  --t-md:1rem;          /* 16px — подзаголовки, списки       */

  --gut:24px;
  --pad:clamp(20px,4.6vw,64px);
  --maxw:1488px;

  --sp-sec:clamp(58px,6.2vw,92px);
  --hdr-h:84px;

  --e:cubic-bezier(.16,1,.3,1);
  --e-s:cubic-bezier(.4,0,.2,1);
}

/* ── База ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--ff-b);font-size:var(--body);line-height:1.62;
  font-weight:400;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--ff-d);font-weight:350;line-height:1.1;letter-spacing:.008em;text-transform:uppercase;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px;border-radius:2px}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;transform:translateY(-200%);
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:2px;font-size:var(--t-base);
  transition:transform .25s var(--e);
}
.skip-link:focus-visible{transform:none}

/* ── Сетка ────────────────────────────────────────────────────────────── */
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);width:100%;
}

/* ── Типографические примитивы ────────────────────────────────────────── */
.h2{font-size:var(--h2)}

.lbl{
  font-family:var(--ff-b);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d);
  margin:0 0 4px;
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;gap:14px;min-height:var(--bh);padding:8px 26px;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  border-radius:2px;position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color .4s var(--e),border-color .4s var(--e),transform .4s var(--e);
}
.btn::after{
  content:"";width:26px;height:1px;background:currentColor;flex:none;
  transform:scaleX(.62);transform-origin:left center;
  transition:transform .4s var(--e);
}
.btn:hover::after{transform:scaleX(1)}
/* вторая строка — домен, на который уводит кнопка */
.btn__tx{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1.12}
.btn__host{
  font-family:var(--ff-b);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.05em;text-transform:none;opacity:.78;
}
/* на бронзе приглушение съедает контраст мелкого кегля — держим почти белый */
.btn--solid .btn__host{opacity:1;color:rgba(255,255,255,.92)}
.btn--solid{background:var(--accent-d);color:#fff}
.btn--solid::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--e);
}
.btn--solid:hover::before{transform:none}
.btn--line{border:1px solid var(--rule);color:var(--ink);background:var(--paper-2)}
.btn--line::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--e);
}
.btn--line:hover{border-color:var(--ink);color:#fff}
.btn--line:hover::before{transform:none}

/* ── Хедер ────────────────────────────────────────────────────────────── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--e-s),box-shadow .45s var(--e-s);
}
.hdr__in{align-items:center;height:var(--hdr-h)}
.hdr.is-stuck{background:rgba(251,251,252,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule)}
.hdr.is-stuck .mark{transform:scale(.9)}

.mark{grid-column:1/3;display:block;width:max-content;line-height:1;color:var(--ink);transform-origin:left center;transition:transform .45s var(--e-s)}
.mark__a{
  display:block;font-family:var(--ff-d);font-weight:500;font-size:1.4rem;
  letter-spacing:.15em;text-transform:uppercase;
}
/* линейки тянутся до ширины слова над ними, поэтому у знака width:max-content */
.mark__b{
  --ls:.34em;--gap:9px;
  display:flex;align-items:center;
  font-size:var(--t-micro);font-weight:600;letter-spacing:var(--ls);
  text-transform:uppercase;color:var(--ink-3);margin-top:5px;padding:0;
}
.mark__b::before,
.mark__b::after{content:"";flex:1;height:1px;background:var(--accent-d)}
.mark__b::before{margin-right:var(--gap)}
/* хвостовой трекинг у последней буквы — гасим его в левом отступе правой линейки */
.mark__b::after{margin-left:calc(var(--gap) - var(--ls))}

.nav{grid-column:4/10;display:flex;justify-content:center;gap:clamp(16px,2.1vw,34px)}
.nav a{
  font-size:var(--t-base);font-weight:500;letter-spacing:.03em;color:var(--ink);
  position:relative;padding:6px 0;transition:color .3s var(--e-s);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent-d);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.hdr__cta{grid-column:10/13;justify-self:end;--bh:46px;padding:7px 20px}

.burger{grid-column:12/13;justify-self:end;display:none;width:44px;height:44px;position:relative}
.burger span{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);
  transition:transform .45s var(--e),opacity .25s var(--e-s);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
/* в кресте средняя гасится, крайние сходятся к центру */
.burger.is-on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger.is-on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Мобильное меню ───────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  display:flex;align-items:flex-end;padding-block:calc(var(--hdr-h) + 24px) 40px;
  opacity:0;transition:opacity .4s var(--e-s);
}
.menu[hidden]{display:none}
.menu.is-on{opacity:1}
.menu__in{align-content:end;row-gap:40px}
.menu__nav{grid-column:1/13;display:flex;flex-direction:column}
.menu__nav a{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;
  border-top:1px solid var(--rule);
  font-family:var(--ff-d);font-size:clamp(1.5rem,7vw,2.25rem);font-weight:500;
  text-transform:uppercase;color:var(--ink);letter-spacing:-.01em;
  opacity:0;transform:translateY(14px);
}
.menu.is-on .menu__nav a{opacity:1;transform:none;transition:opacity .5s var(--e) var(--d,0s),transform .6s var(--e) var(--d,0s)}
.menu__nav i{font-family:var(--ff-b);font-size:var(--t-micro);font-style:normal;font-weight:600;letter-spacing:.14em;color:var(--accent-d)}
.menu__foot{grid-column:1/13;display:flex;flex-wrap:wrap;align-items:center;gap:20px;justify-content:space-between}
.menu__tel{font-family:var(--ff-d);font-size:1.1rem;color:var(--ink)}

/* ── Герой ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:min(920px,100svh);display:flex;align-items:center;
  padding-block:calc(var(--hdr-h) + clamp(28px,5vw,64px)) clamp(40px,6vw,88px);
  background:linear-gradient(180deg,#fff 0%,var(--paper) 62%);
  overflow:hidden;
}
.hero__art{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__bg{
  position:absolute;top:-10%;left:0;right:0;height:120%;width:100%;
  object-fit:cover;object-position:56% 42%;opacity:.94;
}
.hero__fig{
  position:absolute;right:0;bottom:0;height:min(82%,740px);width:auto;max-width:none;
}
.hero__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,var(--paper) 0%,var(--paper) 46%,rgba(251,251,252,.62) 54%,rgba(251,251,252,0) 62%);
}

.hero__in{position:relative;row-gap:0;align-content:center}

.masthead__l{
  grid-column:1/9;color:var(--accent-d);
  font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:14px;border-bottom:1px solid var(--rule);margin:0 0 clamp(36px,5.5vw,76px);
}

.hero__copy{grid-column:1/7}
.hero__h{font-size:var(--h1);line-height:1.08;letter-spacing:.006em;position:relative}
.hero__h .slide{display:block}
.hero__h .slide:not(.is-on){position:absolute;inset:0;pointer-events:none}
.ln{display:block;overflow:hidden}
.ln>span{display:block}
@media (min-width:720px){.ln>span{white-space:nowrap}}
.ln--acc>span{color:var(--accent)}

.hero__sub{
  position:relative;margin-top:clamp(20px,2.6vw,32px);max-width:46ch;
  font-size:clamp(.95rem,1.08vw,1.09rem);color:var(--ink-2);min-height:3.3em;
}
.hero__sub .slide:not(.is-on){position:absolute;inset:0;pointer-events:none}

.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,2.4vw,34px);margin-top:clamp(28px,3.4vw,44px)}

.play{display:inline-flex;align-items:center;gap:14px;color:var(--ink)}
.play__ico{
  width:50px;height:50px;flex:none;border:1px solid var(--rule);border-radius:50%;
  display:grid;place-items:center;background:var(--paper-2);position:relative;
  transition:border-color .4s var(--e),background .4s var(--e);
}
.play__ico svg{width:22px;height:22px}
.play__ico::before{
  content:"";position:absolute;inset:-1px;border:1px solid var(--accent);border-radius:50%;
  opacity:0;transform:scale(.9);transition:opacity .5s var(--e),transform .6s var(--e);
}
.play:hover .play__ico{border-color:transparent;background:var(--paper-3)}
.play:hover .play__ico::before{opacity:1;transform:scale(1.16)}
.play__tx{font-size:var(--t-sm);line-height:1.45;color:var(--ink-2);text-align:left}

.ticks{grid-column:1/6;display:flex;gap:0;margin-top:clamp(44px,6vw,84px)}
.tick{flex:1;padding-top:10px;position:relative;text-align:left;max-width:120px}
.tick i{font-size:var(--t-micro);font-style:normal;font-weight:600;letter-spacing:.14em;color:var(--ink-3);transition:color .35s var(--e-s)}
.tick b{position:absolute;top:0;left:0;right:14px;height:1px;background:var(--rule);display:block;overflow:hidden}
.tick b::after{
  content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;
}
.tick.is-on i{color:var(--ink)}
.tick.is-on b::after{animation:fill 6.5s linear forwards}
.tick.is-done b::after{transform:scaleX(1)}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Преимущества ─────────────────────────────────────────────────────── */
.pillars{background:var(--paper-2);border-block:1px solid var(--rule)}
.pillars__in{padding-block:clamp(48px,5.4vw,76px);align-items:start}
.pillars__h{
  grid-column:1/13;font-size:clamp(1.1rem,1.55vw,1.4rem);font-weight:400;line-height:1.3;
  letter-spacing:.005em;margin-bottom:clamp(30px,3.2vw,46px);
}
.pillars__list{grid-column:1/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut)}
.pillar{padding-left:22px;border-left:1px solid var(--rule)}
.pillars__list>li:first-child{padding-left:0;border-left:0}
.ico{width:30px;height:30px;stroke:var(--accent);stroke-width:1.15;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:20px}
.pillar h3{
  font-size:var(--t-sm);font-weight:600;letter-spacing:.045em;line-height:1.35;
  margin-bottom:10px;
}
.pillar p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}

/* ── Бренды ───────────────────────────────────────────────────────────── */
.brands{padding-block:var(--sp-sec)}
.brands__in{row-gap:0}
.brands .lbl{grid-column:1/13;grid-row:1;margin:0 0 clamp(20px,2.4vw,32px)}
.brands__head{grid-column:1/13;grid-row:2;display:flex;align-items:stretch}
.brands__h{flex:none}
.brands__note{
  --gap:clamp(28px,3vw,52px);
  flex:1;min-width:0;max-width:calc(66ch + var(--gap));
  margin-left:var(--gap);border-left:1px solid var(--rule);padding-left:var(--gap);
  color:var(--ink-2);font-size:var(--t-base);
}
.brands__grid{
  grid-column:1/13;grid-row:3;margin-top:clamp(36px,4vw,56px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);
}

.brand{position:relative}
.brand>a{
  display:block;position:relative;overflow:hidden;border-radius:3px;
  aspect-ratio:3/2;background:var(--paper-3);isolation:isolate;
}
.brand img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--e);
}
.brand>a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,22,0) 18%,rgba(10,14,22,.42) 42%,rgba(10,14,22,.8) 62%,rgba(10,14,22,.94) 100%);
}
.brand>a:hover img{transform:scale(1.06)}

.brand__body{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:block;padding:clamp(22px,2.4vw,32px);color:#fff;
}
.brand__wm{
  display:block;font-family:var(--ff-d);font-weight:400;line-height:1;color:#fff;
  font-size:clamp(1.5rem,2.7vw,2.15rem);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:12px;
}
/* кадр SKIFF шире карточки: на узких пропорциях держим в поле зрения обе
   фигуры, иначе квадрат и портрет режут лицо посередине */
.brand--skiff img{object-position:42% 50%}
.brand--hats .brand__wm{text-transform:lowercase;letter-spacing:-.01em;font-weight:400}
.brand--hats .brand__wm em{font-style:normal;color:var(--accent-light)}
.brand__tx{display:block;font-size:var(--t-base);line-height:1.55;color:rgba(255,255,255,.86);max-width:40ch}
.brand__go{
  position:relative;
  display:flex;align-items:center;gap:12px;margin-top:20px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.28);
  font-size:var(--t-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#fff;
}
.brand__go i{
  width:32px;height:32px;border:1px solid rgba(255,255,255,.4);border-radius:50%;flex:none;margin-left:auto;
  position:relative;transition:background .45s var(--e),border-color .45s var(--e);
}
.brand__go i::before{content:"";position:absolute;left:10px;top:15px;width:11px;height:1px;background:#fff;transition:background .45s var(--e)}
.brand__go i::after{content:"";position:absolute;right:10px;top:12px;width:7px;height:7px;border-right:1px solid #fff;border-top:1px solid #fff;transform:rotate(45deg);transition:border-color .45s var(--e)}
/* линейка прочерчивается белым слева направо */
.brand__go::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s var(--e);
}
.brand>a:hover .brand__go::after{transform:scaleX(1)}
.brand>a:hover .brand__go i{background:#fff;border-color:#fff}
.brand>a:hover .brand__go i::before{background:var(--ink)}
.brand>a:hover .brand__go i::after{border-color:var(--ink)}

/* ── Производство ─────────────────────────────────────────────────────── */
.prod{background:var(--paper-2);border-block:1px solid var(--rule);padding-block:var(--sp-sec)}
.prod__in{row-gap:0}
.prod .lbl{grid-column:1/5;grid-row:1;margin-bottom:18px}
.prod__copy{grid-column:1/5;grid-row:2}
.prod__copy .h2{margin-bottom:26px}
.prod__copy p{margin-bottom:16px;color:var(--ink-2);max-width:40ch}
.prod__copy .btn{margin-top:18px}

.mosaic{
  grid-column:6/13;grid-row:1/3;
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(96px,10.5vw,152px);
  gap:var(--gut);
}
.tile{margin:0;overflow:hidden;border-radius:3px;background:var(--paper-3)}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.tile:hover img{transform:scale(1.045)}
.tile--lead{grid-column:1/5;grid-row:1/3}
.tile--a{grid-column:5/7;grid-row:1/2}
.tile--b{grid-column:5/7;grid-row:2/3}
.tile--c{grid-column:1/7;grid-row:3/4}

.stats{
  grid-column:1/13;grid-row:3;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);
  margin-top:clamp(44px,5vw,76px);padding-top:30px;border-top:1px solid var(--rule);
}
.stats li{padding-right:20px}
.stats b{
  display:block;font-family:var(--ff-d);font-weight:500;color:var(--accent);
  font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stats span{display:block;margin-top:10px;font-size:var(--t-sm);color:var(--ink-2)}

/* ── Материалы ────────────────────────────────────────────────────────── */
.mats{padding-block:clamp(48px,5.6vw,84px);overflow:hidden}
.mats__top{align-items:baseline;margin-bottom:clamp(26px,3vw,40px)}
.mats .lbl{grid-column:1/3;margin:0}
.mats__note{grid-column:3/9;font-size:var(--t-base);color:var(--ink-2)}

.marquee{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__row{display:flex;width:max-content}
.marquee__set{display:flex;align-items:baseline;flex:none}
.mat{display:flex;align-items:baseline;flex:none;padding-left:56px}
.mat b,.mat i{white-space:nowrap}
.mat b{
  font-family:var(--ff-d);font-weight:400;font-size:clamp(1.2rem,2vw,1.9rem);
  color:var(--ink);text-transform:uppercase;letter-spacing:.03em;
}
.mat i{font-style:normal;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-left:14px}
.marquee__row.is-run{animation:slide 42s linear infinite}
.marquee:hover .marquee__row.is-run{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Как мы работаем ──────────────────────────────────────────────────── */
.process{background:var(--paper-3);border-block:1px solid var(--rule);padding-block:var(--sp-sec)}
.process__in{row-gap:0;align-items:start}
.process .lbl{grid-column:1/5;grid-row:1;margin-bottom:16px}
.process__h{grid-column:1/5;grid-row:2}
.steps{
  grid-column:5/13;grid-row:1/3;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gut);
}
.steps li{position:relative}
.steps li+li{padding-left:0}
.steps i{
  display:flex;align-items:center;gap:14px;
  font-family:var(--ff-b);font-style:normal;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;color:var(--accent-d);margin-bottom:22px;
}
/* линейка идёт после цифры, по её средней линии */
.steps i::after{content:"";flex:1;height:1px;background:var(--accent)}
.steps h3{font-size:var(--t-md);font-weight:500;letter-spacing:.025em;margin-bottom:12px}
.steps p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}   /* колонки и так разделены зазором сетки */

/* ── География ────────────────────────────────────────────────────────── */
.reach{padding-block:var(--sp-sec)}
.reach__in{row-gap:0;align-items:center}
.reach .lbl{grid-column:1/4;grid-row:1;margin-bottom:16px}
.reach__h{grid-column:1/4;grid-row:2;align-self:start}

.reach__map{grid-column:4/10;grid-row:1/3;position:relative}
.reach__map img{width:100%;height:auto}

/* Мичуринск на карте — доля от её ширины и высоты, карта масштабируется целиком */
.pin{position:absolute;left:58.19%;top:21.65%;transform:translate(-50%,-50%);display:block}
.pin i{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--accent-d);position:relative;
}
.pin i::after{                       /* мягкий ореол вокруг метки */
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid var(--accent);opacity:.45;
}
.pin b{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  display:block;white-space:nowrap;font-weight:600;
  font-size:var(--t-label);letter-spacing:.06em;color:var(--ink);
}
.pin em{
  display:block;font-style:normal;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-top:3px;   /* на бежевой заливке карты бронза не проходит AA */
}

.reach__ship{grid-column:10/13;grid-row:1/3}
.reach__ship h3{
  font-family:var(--ff-b);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;
  color:var(--ink-3);padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--rule);
}
.reach__ship p{font-size:var(--t-base);color:var(--ink-2)}
.reach__geo{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--ff-d);font-size:var(--t-md);color:var(--ink)!important;letter-spacing:.01em;
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;background:var(--paper)}
/* запас сверху и снизу — ход параллакса, JS двигает кадр в его пределах */
.cta__bg{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover;object-position:50% 50%}
/* Вуаль поверх кадра. Слева высветляем ткань под тёмный текст, справа
   притемняем кожу под стеклянную плашку контактов: кроп на разных
   ширинах гуляет, и без вуали текст ловил бы то одно, то другое. */
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(251,251,252,.95) 0%,rgba(251,251,252,.86) 26%,
                    rgba(251,251,252,.28) 46%,rgba(251,251,252,0) 60%),
    linear-gradient(270deg,rgba(16,22,32,.5) 0%,rgba(16,22,32,0) 44%);
}
.cta__in{position:relative;z-index:1;padding-block:clamp(60px,6vw,92px);align-items:start}
.cta__copy{grid-column:1/5}
.cta__copy .h2{margin-bottom:20px}
.cta__copy p{max-width:42ch;margin-bottom:32px;color:var(--ink-2)}
/* Полупрозрачная плашка: кожа сквозь неё читается, но текст стоит на своём
   фоне. Подложка тёмная — на светлой белая бы плыла, а бронза лейблов на
   ней не добирала контраста. */
.cta__contacts{
  grid-column:10/13;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;
  padding:clamp(26px,2.2vw,34px);border-radius:2px;
  background:rgba(16,22,32,.34);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
}
.cta__contacts li{display:flex;flex-direction:column;gap:4px}
.cta__contacts span{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-light);margin-bottom:6px}
.cta__contacts a,.cta__contacts p{font-size:var(--t-md);color:#fff;line-height:1.55}
.cta__contacts a{width:fit-content;position:relative;white-space:nowrap}
.cta__contacts a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e)}
.cta__contacts a:hover::after{transform:scaleX(1);transform-origin:left}

/* ── Футер ────────────────────────────────────────────────────────────── */
.ftr{background:var(--paper-2);border-top:1px solid var(--rule);padding-block:clamp(52px,5.6vw,80px) 34px}
.ftr__in{row-gap:clamp(40px,4.4vw,60px)}
.mark--ftr{grid-column:1/4;align-self:start;width:max-content}
.mark--ftr .mark__a{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:.13em;margin-right:-.13em}
.mark--ftr .mark__b{
  --ls:.42em;--gap:10px;
  font-size:var(--t-label);margin:clamp(8px,1vw,14px) 0 0;color:var(--ink-2);
}
.ftr__col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ftr__col:nth-child(2){grid-column:4/7}
.ftr__col:nth-child(3){grid-column:7/10}
.ftr__col:nth-child(4){grid-column:10/13}
.ftr__col h3{font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-3);margin-bottom:8px;font-family:var(--ff-b);font-weight:600}
.ftr__col a,.ftr__col p{font-size:var(--t-base);color:var(--ink-2);line-height:1.55}
.ftr__col a{transition:color .3s var(--e-s)}
.ftr__col a:hover{color:var(--accent-d)}
.ftr__legal{
  grid-column:1/13;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
  padding-top:26px;border-top:1px solid var(--rule);
  font-size:var(--t-label);color:var(--ink-3);
}

/* ── Модалка видео ────────────────────────────────────────────────────── */
.vmodal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:clamp(16px,4vw,48px)}
.vmodal[hidden]{display:none}
.vmodal__bd{position:absolute;inset:0;background:rgba(24,36,54,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s var(--e-s)}
.vmodal__box{position:relative;width:min(1100px,100%);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .5s var(--e),transform .6s var(--e)}
.vmodal.is-on .vmodal__bd{opacity:1}
.vmodal.is-on .vmodal__box{opacity:1;transform:none}
.vmodal video{width:100%;border-radius:3px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.vmodal__x{
  position:absolute;top:-52px;right:0;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;
  transition:background .35s var(--e-s),border-color .35s var(--e-s);
}
.vmodal__x:hover{background:rgba(255,255,255,.14);border-color:#fff}
.vmodal__x svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.4;fill:none}
body.is-locked{overflow:hidden}

/* ── Ревилы (включаются только при работающем JS) ─────────────────────── */
.js [data-rv]{opacity:0;transform:translateY(22px)}
.js [data-rv].is-in{opacity:1;transform:none;transition:opacity .8s var(--e) var(--d,0s),transform .9s var(--e) var(--d,0s)}
/* преимущества — вытягиваются сверху вниз вдоль своих линеек */
.js .pillar[data-rv]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.js .pillar[data-rv].is-in{clip-path:inset(0 0 0 0);transition:clip-path .85s var(--e) var(--d,0s)}
.js .reach__map[data-rv]{transform:none}
.js .steps li[data-rv]{opacity:0;transform:none;clip-path:inset(0 100% 0 0)}
.js .steps li[data-rv].is-in{opacity:1;clip-path:inset(0 0 0 0);transition:opacity .5s var(--e-s) var(--d,0s),clip-path .9s var(--e) var(--d,0s)}

.js .hero__h .ln>span,.js .hero__sub .slide.is-on{opacity:0}
.js .hero.is-in .hero__h .slide.is-on .ln>span{
  opacity:1;animation:rise .95s var(--e) var(--d,0s) backwards;
}
.js .hero.is-in .hero__sub .slide.is-on{opacity:1;transition:opacity .7s var(--e-s) .5s}
@keyframes rise{from{opacity:0;transform:translateY(102%)}to{opacity:1;transform:none}}

/* смена слайда героя */
.js .hero__h .slide{opacity:0;transition:opacity .5s var(--e-s)}
.js .hero__h .slide.is-on{opacity:1}
.js .hero__sub .slide{opacity:0;transition:opacity .5s var(--e-s)}
.js .hero.is-in .hero__sub .slide.is-on{opacity:1}

/* ══════════════════════════════════════════════════════════════════════
   Адаптив
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width:1180px){
  .nav{grid-column:3/11;gap:18px}
  .nav a{font-size:var(--t-sm)}
  .hero__copy{grid-column:1/9}
  /* в столбик вертикальная линия ни к чему */
  .brands__head{flex-direction:column}
  .brands__note{margin:26px 0 0;border-left:0;padding-left:0;max-width:58ch}
  .prod .lbl,.prod__copy{grid-column:1/6}
  .mosaic{grid-column:7/13}
  .cta__contacts{gap:24px}
  .brand>a{aspect-ratio:1/1}
  .process .lbl{grid-column:1/13}
  .process__h{grid-column:1/13;margin-bottom:clamp(30px,3.4vw,44px)}
  .steps{grid-column:1/13;grid-row:3}
}

@media (max-width:1023px){
  :root{--hdr-h:72px;--gut:18px}
  .nav,.hdr__cta{display:none}
  .burger{display:block}
  .mark{grid-column:1/6}

  .hero{min-height:0;padding-bottom:clamp(36px,7vw,56px);flex-direction:column;align-items:stretch}
  .hero__art{position:relative;inset:auto;width:100%;height:min(48vh,400px);margin-top:32px;order:2}
  .hero__bg{top:0;height:100%;object-position:60% 42%}   /* ширина уже 100% в базе */
  .hero__fig{height:100%;right:-4%}
  .hero__art::after{background:linear-gradient(180deg,rgba(251,251,252,.55) 0%,rgba(251,251,252,0) 30%)}
  .hero__in{display:flex;flex-direction:column}
  .masthead__l{margin-bottom:20px}
  .hero__copy{width:100%}
  .hero__sub{min-height:0;max-width:52ch}
  .hero__sub .slide:not(.is-on){display:none}
  .ticks{margin-top:34px;max-width:340px}

  .pillars__list{grid-column:1/13;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .pillars__list>li:nth-child(3){padding-left:0;border-left:0}

  /* переопределяем и строку: иначе лейбл и заголовок остаются в первой строке сетки
     и налезают друг на друга */

  .prod .lbl,.prod__copy{grid-column:1/13}
  .prod__copy{grid-row:2}
  .mosaic{grid-column:1/13;grid-row:3;margin-top:40px;grid-auto-rows:clamp(88px,15vw,140px)}
  .stats{grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}

  .mats__note{grid-column:1/13;margin-top:10px}

  .process .lbl,.process__h{grid-column:1/13}
  /* колонки схлопываются в одну, поэтому и вуаль поворачивается: текст сверху
     лежит на высветленном крае кадра, плашка контактов — на притемнённом */
  .cta::after{
    background:linear-gradient(180deg,rgba(251,251,252,.95) 0%,rgba(251,251,252,.86) 30%,
                               rgba(16,22,32,.3) 58%,rgba(16,22,32,.55) 100%);
  }
  .cta__bg{object-position:50% 46%}
  .process__h{margin-bottom:38px}
  .steps{grid-column:1/13;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}

  .reach .lbl,.reach__h{grid-column:1/13}
  .reach__h{margin-bottom:clamp(28px,3.2vw,42px)}
  .reach__map{grid-column:1/13;grid-row:3}
  .reach__ship{grid-column:1/13;grid-row:4;margin-top:clamp(32px,4vw,52px);
               display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gut)}
  .reach__ship h3{grid-column:1/3}

  .cta__copy{grid-column:1/13}
  .cta__contacts{grid-column:1/13;margin-top:48px}

  .mark--ftr{grid-column:1/13}
  .ftr__col:nth-child(2){grid-column:1/5}
  .ftr__col:nth-child(3){grid-column:5/9}
  .ftr__col:nth-child(4){grid-column:9/13}
}

@media (max-width:719px){
  :root{--gut:14px}
  /* строчные ссылки — 23px в высоту: добираем зону нажатия до 24+, не трогая ритм */
  .ftr__col a,.cta__contacts a,.menu__tel{padding-block:4px;margin-block:-4px}
  .brands__grid{grid-template-columns:1fr}
  .brand>a{aspect-ratio:4/5}
  .pillars__list{grid-template-columns:1fr;row-gap:30px}
  .pillars__list>li{padding-left:0;border-left:0;padding-top:26px;border-top:1px solid var(--rule)}
  .pillars__list>li:first-child{padding-top:0;border-top:0}
  .steps{grid-template-columns:1fr;row-gap:26px}
  .steps p{padding-right:0;max-width:46ch}
  .reach__ship{grid-template-columns:1fr;gap:20px 0}
  .reach__ship h3{grid-column:1}
  .cta__contacts{grid-template-columns:1fr;gap:26px}
  .stats{grid-template-columns:1fr;row-gap:26px}
  .stats li{display:flex;align-items:baseline;gap:14px;padding:0}
  .stats span{margin-top:0}
  .ftr__col:nth-child(2),.ftr__col:nth-child(3),.ftr__col:nth-child(4){grid-column:1/13}
  .ftr__in{row-gap:34px}
  .mosaic{grid-auto-rows:clamp(76px,19vw,132px)}
  .vmodal__x{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
  .marquee__set b{padding-left:34px}
}

@media (max-width:420px){
  .hero__act{gap:18px}
  .btn{width:100%;justify-content:center}
  .btn__tx{align-items:center}
  .play{width:100%}
}

/* ── Уважение к настройкам движения ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js [data-rv],.js [data-rv].is-in,.js .steps li[data-rv],.js .pillar[data-rv]{
    opacity:1!important;transform:none!important;clip-path:none!important;
  }
  .js .hero__h .ln>span,.js .hero__sub .slide,.js .hero__h .slide{opacity:1!important;animation:none!important}
  .js .hero__h .slide:not(.is-on),.js .hero__sub .slide:not(.is-on){opacity:0!important}
  .marquee{-webkit-mask-image:none;mask-image:none;
           max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
  .marquee__row{display:block;width:auto;animation:none!important}
  .marquee__set{flex-wrap:wrap;row-gap:14px}
  .mat{padding-left:0;padding-right:44px}
  .menu.is-on .menu__nav a{opacity:1;transform:none}
}