/* =========================================================
   FORMA HOUSE — архитектура, строительство, интерьер
   1.  Tokens
   2.  Base / reset
   3.  Typography utilities
   4.  Buttons & links
   5.  Reveal animations
   6.  Cursor / progress
   7.  Header
   8.  Fullscreen navigation
   9.  Hero
   10. Intro
   11. Projects (horizontal showcase)
   12. Materials (sticky categories)
   13. Services
   14. About
   15. Stats
   16. Process (sticky storytelling)
   17. Portfolio gallery
   18. Advantages
   19. Chain
   20. Reviews
   21. CTA
   22. Request form
   23. Contacts
   24. Footer
   25. Responsive
   26. Reduced motion
   ========================================================= */

/* ============================ 1. TOKENS =================== */
:root{
  --bg:#F3F1EC;
  --white:#FFFFFF;
  --ink:#151515;
  --muted:#77736C;
  --dark:#171714;
  --accent:#A88754;

  --stone:#E9E6DF;
  --sand:#DFDAD0;

  --line:rgba(21,21,21,.14);
  --line-soft:rgba(21,21,21,.08);
  --line-light:rgba(243,241,236,.18);

  --container:1440px;
  --gutter:clamp(20px,4.4vw,64px);
  --sec:clamp(88px,10.5vw,176px);
  --header-h:84px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --fz-label:clamp(10px,.72vw,12px);
  --fz-body:clamp(15px,1.06vw,17px);
  --fz-lead:clamp(17px,1.35vw,21px);
}

/* ============================ 2. BASE ===================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* якорные переходы с учётом фиксированной шапки */
main > section[id],
footer{scroll-margin-top:calc(var(--header-h) + 10px)}
#hero{scroll-margin-top:0}

/* кастомный курсор: прячем системный, но на интерактиве и его детях
   оставляем pointer — иначе на span внутри кнопки курсор пропадает */
html.has-cursor,
html.has-cursor *{cursor:none}
html.has-cursor a,
html.has-cursor a *,
html.has-cursor button,
html.has-cursor button *,
html.has-cursor label,
html.has-cursor label *,
html.has-cursor select,
html.has-cursor summary,
html.has-cursor [role="option"],
html.has-cursor [role="button"],
html.has-cursor [role="button"] *,
html.has-cursor .cselect__trigger,
html.has-cursor .cselect__trigger *{cursor:pointer}
html.has-cursor input:not([type=checkbox]):not([type=radio]),
html.has-cursor textarea{cursor:text}

body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:var(--fz-body);
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{overflow:hidden}

img,svg,picture{display:block;max-width:100%}
img{height:auto}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

a{color:inherit;text-decoration:none}

button{
  margin:0;padding:0;border:0;
  font:inherit;color:inherit;
  background:none;cursor:pointer;
}

input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--ink);color:var(--bg)}

:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:4px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:200;
  padding:12px 18px;
  background:var(--ink);color:var(--bg);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip-link:focus{top:12px}

/* ========================= 3. TYPOGRAPHY ================== */
.label{
  display:block;
  font-size:var(--fz-label);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.display{
  font-weight:300;
  font-size:clamp(30px,4.9vw,78px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.line{
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.line > span{display:block}

.lead{
  font-size:var(--fz-lead);
  line-height:1.55;
  color:var(--muted);
  letter-spacing:-.01em;
}

.section-head{margin-bottom:clamp(40px,5vw,80px)}
.section-head .label{margin-bottom:clamp(20px,2.4vw,36px)}

/* ==================== 4. BUTTONS & LINKS ================== */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 30px;
  border:1px solid transparent;
  font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
  will-change:transform;
}
.btn > span{position:relative;z-index:1}
.btn__arrow{
  display:inline-block;
  transition:transform .55s var(--ease);
}
.btn:hover .btn__arrow{transform:translateX(6px)}

.btn--light{
  background:var(--bg);color:var(--ink);
}
.btn--light:hover{background:var(--white)}

.btn--dark{
  background:var(--ink);color:var(--bg);
}
.btn--dark:hover{background:var(--dark)}

.btn--ghost{
  border-color:var(--line);color:var(--ink);
}
.btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.btn--wide{width:100%;justify-content:space-between}

.link-arrow{
  display:inline-flex;align-items:center;gap:12px;
  padding-bottom:6px;
  font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
  transition:border-color .5s var(--ease),color .4s var(--ease);
}
.link-arrow span:last-child{transition:transform .55s var(--ease)}
.link-arrow:hover{border-color:var(--ink)}
.link-arrow:hover span:last-child{transform:translateX(6px)}

/* ======================= 5. REVEAL ======================== */
.reveal:not(.line){
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms);
}
.reveal:not(.line).is-in{opacity:1;transform:none}

.line > span{
  transform:translateY(105%);
  opacity:0;
  transition:transform 1.05s var(--ease) var(--d,0ms),opacity .75s var(--ease) var(--d,0ms);
}
.line.is-in > span{transform:translateY(0);opacity:1}

/* stagger for stacked display lines */
.line:nth-child(1){--d:0ms}
.line:nth-child(2){--d:80ms}
.line:nth-child(3){--d:160ms}
.line:nth-child(4){--d:240ms}
.line:nth-child(5){--d:320ms}

/* clip-path на самом наблюдаемом элементе обнуляет IntersectionObserver —
   поэтому клипуем детей, а контейнер оставляем видимым для observer */
.reveal-clip{overflow:hidden}
.reveal-clip > img,
.reveal-clip > svg{
  clip-path:inset(0 100% 0 0);
  transform:scale(1.08);
  transition:clip-path 1.25s var(--ease),transform 1.6s var(--ease);
}
.reveal-clip.is-in > img,
.reveal-clip.is-in > svg{
  clip-path:inset(0 0 0 0);
  transform:scale(1);
}
/* карта: только clip — transform ломает тайлы Яндекса */
.reveal-clip > .contacts__map-inner{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.25s var(--ease);
}
.reveal-clip.is-in > .contacts__map-inner{
  clip-path:inset(0 0 0 0);
}
.contacts__map-link{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .55s var(--ease) .35s,transform .7s var(--ease) .35s,background .35s var(--ease),border-color .35s var(--ease);
}
.contacts__map.reveal-clip.is-in .contacts__map-link{
  opacity:1;
  transform:none;
}

/* ================= 6. CURSOR =================== */
.cursor{
  position:fixed;top:0;left:0;z-index:120;
  display:grid;place-items:center;
  width:12px;height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  background:var(--bg);
  mix-blend-mode:difference;
  pointer-events:none;
  opacity:0;
  transition:width .45s var(--ease),height .45s var(--ease),
             margin .45s var(--ease),opacity .3s linear,background .3s linear;
}
.cursor.is-visible{opacity:1}
.cursor.is-media{
  width:96px;height:96px;margin:-48px 0 0 -48px;
}
.cursor__label{
  font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
  opacity:0;
  transition:opacity .3s linear;
  white-space:nowrap;
}
.cursor.is-media .cursor__label{opacity:1}
.cursor.is-media .cursor__dot{display:none}
.cursor.is-hidden{opacity:0}

/* ========================= 7. HEADER ====================== */
.header{
  position:fixed;top:0;left:0;z-index:80;
  width:100%;
  color:var(--bg);
  transition:color .5s var(--ease),background-color .6s var(--ease),
             backdrop-filter .6s var(--ease);
}
.header__inner{
  display:flex;align-items:center;gap:clamp(20px,3vw,56px);
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding:0 var(--gutter);
  height:var(--header-h);
  transition:height .5s var(--ease);
}
.header.is-scrolled{
  background:rgba(243,241,236,.88);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  color:var(--ink);
}
.header.is-scrolled .header__inner{height:68px}

/* прогресс = нижняя линия шапки */
.scroll-progress{
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:transparent;
  pointer-events:none;
  transition:background-color .6s var(--ease),height .4s var(--ease);
}
.header.is-scrolled .scroll-progress{
  height:2px;
  background:var(--line-soft);
}
.scroll-progress__bar{
  display:block;height:100%;width:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

.brand{
  display:inline-flex;align-items:baseline;gap:.42em;
  font-size:15px;font-weight:700;
  letter-spacing:.22em;
  line-height:1;
  white-space:nowrap;
}
.brand__mark--thin{font-weight:300;letter-spacing:.24em}
.brand--lg{font-size:clamp(20px,2vw,28px)}

.header__nav{margin-left:auto}
.header__list{
  display:flex;align-items:center;gap:clamp(18px,2.1vw,34px);
}
.header__list a{
  position:relative;
  display:block;padding:6px 0;
  font-size:13px;font-weight:500;
  letter-spacing:.02em;
}
.header__list a::after{
  content:'';
  position:absolute;left:0;bottom:2px;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease);
}
.header__list a:hover::after{transform:scaleX(1)}

.header__aside{
  display:flex;align-items:center;gap:clamp(16px,2vw,32px);
}
.header__phone{
  font-size:13px;font-weight:500;letter-spacing:.04em;
  white-space:nowrap;
  transition:opacity .4s var(--ease);
}
.header__phone:hover{opacity:.62}

.menu-toggle{
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 0;
  font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.menu-toggle__icon{
  position:relative;
  display:block;width:26px;height:10px;
}
.menu-toggle__icon i{
  position:absolute;left:0;
  display:block;width:100%;height:1px;
  background:currentColor;
  transition:transform .5s var(--ease),width .5s var(--ease);
}
.menu-toggle__icon i:nth-child(1){top:0}
.menu-toggle__icon i:nth-child(2){top:9px;width:16px}
.menu-toggle:hover .menu-toggle__icon i:nth-child(2){width:100%}
.menu-toggle:hover .menu-toggle__icon i:nth-child(1){width:16px}

/* ================= 8. FULLSCREEN NAVIGATION =============== */
.fsnav{
  position:fixed;inset:0;z-index:110;
  color:var(--bg);
  overflow:hidden;
}
.fsnav[hidden]{display:none}

.fsnav__bg{
  position:absolute;inset:0;
  background:var(--dark);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);
}
.fsnav.is-open .fsnav__bg{clip-path:inset(0 0 0 0)}
.fsnav.is-closing .fsnav__bg{clip-path:inset(100% 0 0 0)}

.fsnav__panel{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom,0px);
}

.fsnav__top{
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 auto;
  height:var(--header-h);
  padding:0 var(--gutter);
  max-width:var(--container);width:100%;margin-inline:auto;
  opacity:0;
  transition:opacity .35s var(--ease);
}
.fsnav.is-open .fsnav__top{
  opacity:1;
  transition-delay:.25s;
}
.fsnav.is-closing .fsnav__top{
  opacity:0;
  transition-delay:0s;
  transition-duration:.3s;
}

.fsnav__close{
  position:relative;
  width:44px;height:44px;
  border:1px solid var(--line-light);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .5s var(--ease);
}
.fsnav__close span,
.fsnav__close::after{
  content:'';
  position:absolute;top:50%;left:50%;
  width:16px;height:1px;
  background:currentColor;
}
.fsnav__close span{transform:translate(-50%,-50%) rotate(45deg)}
.fsnav__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.fsnav__close:hover{background:rgba(243,241,236,.08);transform:rotate(90deg)}

.fsnav__body{
  position:relative;
  flex:1 1 auto;
  display:flex;
  min-width:0;
  min-height:0;
  max-width:100%;
  overflow-x:hidden;
}

.fsnav__main{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(32px,5vh,64px);
  width:100%;
  max-width:min(var(--container),100%);
  margin-inline:auto;
  padding:clamp(24px,4vh,56px) var(--gutter) clamp(32px,5vh,56px);
  box-sizing:border-box;
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.fsnav.is-sub .fsnav__main{
  opacity:0;
  transform:translateX(-4%);
  pointer-events:none;
}

.fsnav__list{border:0}
.fsnav__item{
  border-top:1px solid var(--line-light);
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  transition-delay:calc(.22s + var(--i) * .07s);
}
.fsnav__item:first-child{border-top:0}
.fsnav.is-open .fsnav__item{opacity:1;transform:none}
.fsnav.is-closing .fsnav__item{
  opacity:0;transform:translateY(20px);
  transition-delay:calc(var(--i) * .03s);
  transition-duration:.35s;
}

.fsnav__link{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px,3vw,56px);
  width:100%;
  max-width:100%;
  padding:clamp(12px,1.6vh,22px) clamp(12px,1.6vw,24px);
  text-align:left;
  color:inherit;
  box-sizing:border-box;
}
.fsnav__link::before{
  content:'';
  position:absolute;inset:0;
  background:rgba(243,241,236,.05);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.fsnav__link:hover::before{opacity:1}

.fsnav__num{
  font-size:11px;font-weight:600;
  letter-spacing:.18em;
  color:rgba(243,241,236,.45);
  transition:color .45s var(--ease);
}
.fsnav__link:hover .fsnav__num{color:var(--accent)}

.fsnav__label{
  font-size:clamp(30px,4.6vw,74px);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.035em;
  min-width:0;
  overflow-wrap:anywhere;
  transition:transform .6s var(--ease);
}
.fsnav__link:hover .fsnav__label{transform:translateX(clamp(8px,1.2vw,22px))}

.fsnav__arrow{
  font-size:clamp(16px,1.4vw,22px);
  color:rgba(243,241,236,.5);
  transition:transform .6s var(--ease),color .45s var(--ease);
}
.fsnav__link:hover .fsnav__arrow{transform:translateX(10px);color:var(--bg)}

.fsnav__foot{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  align-items:end;
  gap:clamp(20px,3vw,48px);
  padding-top:clamp(20px,3vh,36px);
  border-top:1px solid var(--line-light);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .4s var(--ease),transform .45s var(--ease);
}
.fsnav.is-open .fsnav__foot{
  opacity:1;
  transform:none;
  transition-delay:.5s;
}
.fsnav.is-closing .fsnav__foot{
  opacity:0;
  transform:translateY(12px);
  transition-delay:0s;
  transition-duration:.3s,.35s;
}
.fsnav__foot .label{color:rgba(243,241,236,.45);margin-bottom:10px}
.fsnav__foot p{font-size:14px;line-height:1.7;color:rgba(243,241,236,.82)}
.fsnav__foot a{transition:color .4s var(--ease)}
.fsnav__foot a:hover{color:var(--accent)}
.fsnav__cta{justify-self:end}

/* ---- second level: projects ---- */
.fssub{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,80px);
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding:clamp(24px,4vh,56px) var(--gutter) clamp(32px,5vh,56px);
  box-sizing:border-box;
  opacity:0;
  transform:translateX(4%);
  pointer-events:none;
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.fsnav.is-sub .fssub{opacity:1;transform:none;pointer-events:auto}

.fssub__list-wrap{
  display:flex;flex-direction:column;
  align-self:center;
}
.fssub__back{
  display:inline-flex;align-items:center;gap:10px;
  align-self:flex-start;
  margin-bottom:clamp(20px,3vh,40px);
  font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,241,236,.6);
  transition:color .4s var(--ease)
}
.fssub__back:hover{color:var(--bg)}
.fssub__back span{transition:transform .5s var(--ease)}
.fssub__back:hover span{transform:translateX(-5px)}

.fssub__label{color:rgba(243,241,236,.45);margin-bottom:18px}

.fssub__list li{border-top:1px solid var(--line-light)}
.fssub__list li:last-child{border-bottom:1px solid var(--line-light)}
.fssub__list a{
  display:block;
  padding:clamp(10px,1.4vh,18px) 0;
  font-size:clamp(19px,1.9vw,30px);
  font-weight:300;
  letter-spacing:-.02em;
  color:rgba(243,241,236,.66);
  transition:color .45s var(--ease),transform .55s var(--ease),padding-left .55s var(--ease);
}
.fssub__list a:hover,
.fssub__list a.is-active{color:var(--bg);padding-left:14px}

.fssub__media{
  position:relative;
  overflow:hidden;
  align-self:stretch;
  background:#1f1f1c;
}
.fssub__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:opacity .6s var(--ease),transform 1.1s var(--ease),clip-path .8s var(--ease);
}
.fssub__media img.is-swapping{opacity:0;transform:scale(1.06);clip-path:inset(0 0 0 12%)}

/* ========================== 9. HERO ======================= */
.hero{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;
  padding:calc(var(--header-h) + 40px) 0 clamp(96px,11vh,132px);
  overflow:hidden;
  background:var(--dark);
  color:var(--bg);
  isolation:isolate;
}
.hero__media{
  position:absolute;inset:0;
  z-index:-1;
  clip-path:inset(0 0 100% 0);
  will-change:transform,clip-path;
}
body.is-ready .hero__media{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.5s var(--ease) .1s;
}
.hero__media picture{display:block;height:100%}
.hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.12);
  transition:transform 2.4s var(--ease) .1s;
}
body.is-ready .hero__media img{transform:scale(1)}

.hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(15,15,13,.58) 0%,rgba(15,15,13,.14) 32%,rgba(15,15,13,.22) 58%,rgba(15,15,13,.78) 100%),
    linear-gradient(94deg,rgba(15,15,13,.42) 0%,rgba(15,15,13,0) 62%);
  opacity:0;
  transition:opacity 1.3s var(--ease) .35s;
}
body.is-ready .hero__overlay{opacity:1}

.hero__content{
  position:relative;
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  will-change:transform,opacity;
}

.hero__label{
  margin-bottom:clamp(20px,3.4vh,40px);
  font-size:var(--fz-label);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(243,241,236,.76);
}

.hero__title{
  margin-bottom:clamp(28px,4.4vh,56px);
  font-size:clamp(28px,7.1vw,104px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.hero__bottom{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;
  gap:clamp(24px,3vw,64px);
  padding-top:clamp(20px,3vh,32px);
  border-top:1px solid rgba(243,241,236,.2);
}
.hero__text{
  max-width:46ch;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.6;
  color:rgba(243,241,236,.86);
}

/* hero entrance choreography */
[data-hero-el]{
  opacity:0;
  transform:translateY(26px);
}
body.is-ready [data-hero-el]{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease) var(--hd,0s),transform 1s var(--ease) var(--hd,0s);
}
.hero__title .line[data-hero-el]{opacity:1;transform:none;transition:none}
.hero__title .line > span{transform:translateY(105%);opacity:0}
body.is-ready .hero__title .line > span{
  transform:none;opacity:1;
  transition:transform 1.15s var(--ease) var(--hd,0s),opacity .8s var(--ease) var(--hd,0s);
}
[data-hero-el="1"]{--hd:.55s}
[data-hero-el="2"]{--hd:.72s}
[data-hero-el="3"]{--hd:.82s}
[data-hero-el="4"]{--hd:.92s}
[data-hero-el="5"]{--hd:1.1s}
[data-hero-el="6"]{--hd:1.2s}

/* ========================= 10. INTRO ====================== */
.intro{
  padding:clamp(80px,9vw,150px) 0 clamp(72px,8vw,130px);
  border-bottom:1px solid var(--line-soft);
}
.intro__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,120px);
  align-items:start;
}
.intro__left .label{margin-bottom:clamp(24px,3vw,44px)}
.intro__title{
  margin-bottom:clamp(28px,3.2vw,48px);
  font-size:clamp(28px,4.4vw,68px);
}
.intro__text{
  max-width:50ch;
  font-size:var(--fz-lead);
  line-height:1.58;
  color:var(--muted);
}

.intro__list{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
  border-top:0;
}
/* вертикальный маршрут — один путь от идеи до интерьера */
.intro__list::before{
  content:'';
  position:absolute;
  left:7px;top:10px;bottom:10px;
  width:1px;
  background:linear-gradient(to bottom, var(--accent), var(--line) 40%, var(--line));
  opacity:.85;
  pointer-events:none;
}
.intro__row{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:0 clamp(14px,1.6vw,22px);
  align-items:start;
  padding:clamp(16px,1.8vw,22px) 0;
  border-bottom:1px solid transparent;
  cursor:default;
}
.intro__row + .intro__row{
  border-top:1px solid var(--line-soft);
}
.intro__marker{
  position:relative;
  z-index:1;
  width:15px;height:15px;
  margin-top:.55em;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--bg);
  transition:
    background .55s var(--ease),
    border-color .55s var(--ease),
    transform .55s var(--ease),
    box-shadow .55s var(--ease);
}
.intro__content{
  position:relative;
  z-index:1;
  min-width:0;
  padding-right:clamp(8px,4vw,28px);
}
.intro__num{
  display:block;
  margin-bottom:6px;
  font-size:11px;font-weight:600;
  letter-spacing:.16em;
  color:var(--muted);
  transition:color .5s var(--ease);
}
.intro__name{
  margin:0;
  font-size:clamp(22px,2.1vw,34px);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--muted);
  transition:color .5s var(--ease),transform .6s var(--ease);
}
.intro__desc{
  display:block;
  max-height:0;
  margin:0;
  margin-top:0;
  overflow:hidden;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
  opacity:0;
  transform:translateY(-4px);
  transition:
    max-height .55s var(--ease),
    opacity .5s var(--ease),
    transform .55s var(--ease),
    margin .55s var(--ease);
}
.intro__ghost{
  position:absolute;
  right:0;top:50%;
  z-index:0;
  font-size:clamp(64px,8vw,120px);
  font-weight:200;
  line-height:1;
  letter-spacing:-.06em;
  color:var(--ink);
  opacity:0;
  transform:translate(8%,-48%);
  pointer-events:none;
  transition:opacity .7s var(--ease),transform .8s var(--ease);
  user-select:none;
}

.intro__row.is-on .intro__marker,
.intro__row:hover .intro__marker{
  background:var(--accent);
  border-color:var(--accent);
  transform:scale(1.12);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.intro__row.is-on .intro__num,
.intro__row:hover .intro__num{color:var(--accent)}
.intro__row.is-on .intro__name,
.intro__row:hover .intro__name{
  color:var(--ink);
  transform:translateX(4px);
}
.intro__row.is-on .intro__desc,
.intro__row:hover .intro__desc{
  max-height:3.2em;
  margin-top:10px;
  opacity:1;
  transform:none;
}
.intro__row.is-on .intro__ghost,
.intro__row:hover .intro__ghost{
  opacity:.06;
  transform:translate(0,-48%);
}

.intro__row:focus-visible{
  outline:none;
}
.intro__row:focus-visible .intro__marker{
  outline:1px solid var(--accent);
  outline-offset:3px;
}

/* прогресс линии — заполняется по активному шагу */
.intro__list[data-active]::after{
  content:'';
  position:absolute;
  left:7px;top:10px;
  width:1px;
  height:var(--intro-progress, 0%);
  background:var(--accent);
  pointer-events:none;
  transition:height .55s var(--ease);
  z-index:0;
}

/* ======================= 11. PROJECTS ===================== */
.projects{
  padding-top:var(--sec);
  background:var(--bg);
}
.projects__intro{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(28px,4vw,80px);
  align-items:end;
  padding-bottom:clamp(40px,5vw,72px);
}
.projects__intro-left .label{margin-bottom:clamp(20px,2.6vw,36px)}
.projects__title{font-size:clamp(28px,4.6vw,72px)}
.projects__intro-text{
  max-width:44ch;
  color:var(--muted);
  font-size:var(--fz-body);
}

.projects__sticky{position:relative}
.projects__viewport{
  position:sticky;top:0;
  display:flex;align-items:center;
  height:100svh;
  overflow:hidden;
}
.projects__track{
  display:flex;
  gap:clamp(16px,2.2vw,40px);
  padding-inline:var(--gutter);
  will-change:transform;
}

.pcard{
  flex:0 0 clamp(300px,62vw,860px);
  max-width:100%;
}
.pcard__link{display:block}
.pcard__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--stone);
}
.pcard__media::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,13,0) 55%,rgba(15,15,13,.28) 100%);
  opacity:0;
  transition:opacity .7s var(--ease);
  pointer-events:none;
}
.pcard__link:hover .pcard__media::after{opacity:1}
.pcard__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.pcard__link:hover .pcard__media img{transform:scale(1.05)}

.pcard__body{
  padding-top:22px;
  transition:transform .7s var(--ease);
}
.pcard__link:hover .pcard__body{transform:translateY(-4px)}
.pcard__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.pcard__name{
  display:inline-flex;align-items:center;gap:.28em;
  font-size:clamp(22px,2.4vw,38px);
  font-weight:400;
  letter-spacing:.02em;
}
.pcard__arrow{
  display:inline-block;
  font-size:.58em;
  font-weight:400;
  line-height:1;
  color:var(--muted);
  transform:rotate(-45deg) translate(-2px,2px);
  transform-origin:center;
  transition:transform .65s var(--ease),color .45s var(--ease),opacity .45s var(--ease);
  opacity:.55;
}
.pcard__link:hover .pcard__arrow{
  color:var(--ink);
  opacity:1;
  transform:rotate(-45deg) translate(4px,-4px);
}
.pcard__index{
  font-size:11px;font-weight:600;
  letter-spacing:.16em;
  color:var(--muted);
}
.pcard__meta{
  padding-top:12px;
  font-size:14px;
  color:var(--muted);
}

.projects__hud{
  position:absolute;bottom:clamp(28px,4vh,56px);
  left:0;width:100%;
  display:flex;align-items:center;gap:20px;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  pointer-events:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .65s var(--ease);
}
.projects__hud.is-visible{
  opacity:1;
  transform:none;
}
.projects__hud-count{
  font-size:11px;font-weight:600;letter-spacing:.18em;
  color:var(--muted);
}
.projects__hud-count b{color:var(--ink);font-weight:600}
.projects__hud-line{
  position:relative;
  flex:1 1 auto;max-width:280px;
  height:1px;
  background:var(--line);
  overflow:hidden;
}
.projects__hud-line i{
  position:absolute;inset:0;
  display:block;
  background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;
}
.projects__hud-hint{
  font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
  transition:opacity .45s var(--ease);
}
.projects__hud.is-progressing .projects__hud-hint{opacity:0}

/* ====================== 12. MATERIALS ===================== */
.materials{
  padding:var(--sec) 0;
  background:var(--bg);
}
.materials__grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,96px);
  align-items:start;
}
.materials__left{
  /* колонка тянется по высоте списка — sticky живёт внутри неё */
  min-height:100%;
}
.materials__sticky{
  position:sticky;
  top:calc(var(--header-h) + clamp(16px,3vh,40px));
  /* целиком влезает в экран — низ картинки больше не обрезается */
  max-height:calc(100svh - var(--header-h) - clamp(24px,4vh,56px));
  display:flex;
  flex-direction:column;
  min-height:0;
}
.materials__sticky .label{margin-bottom:clamp(16px,2vw,28px);flex:0 0 auto}
.materials__title{
  margin-bottom:clamp(16px,2vw,28px);
  font-size:clamp(28px,4.2vw,64px);
  flex:0 0 auto;
}
.materials__text{
  max-width:42ch;
  color:var(--muted);
  font-size:var(--fz-body);
  flex:0 0 auto;
}
.materials__stage{
  position:relative;
  margin-top:clamp(20px,2.6vw,36px);
  flex:1 1 auto;
  width:100%;
  min-height:clamp(180px,22vh,240px);
  max-height:min(48vh,calc(100svh - var(--header-h) - 300px));
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--stone);
}
.materials__stage img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .9s var(--ease),transform 1.4s var(--ease);
}
.materials__stage img.is-active{opacity:1;transform:scale(1)}

.materials__list{
  border-top:1px solid var(--line);
  /* задержка: sticky успевает «сесть», первый пункт не активируется заранее */
  padding-top:clamp(24vh,34vh,44vh);
  /* хвост, чтобы последний пункт дошёл до линии активации */
  padding-bottom:clamp(28vh,40vh,52vh);
  perspective:1100px;
  perspective-origin:50% 28%;
  transform-style:preserve-3d;
}
.materials__list.is-roulette .mrow{
  transform-origin:50% 50%;
  transform:
    rotateX(var(--rx, 0deg))
    translate3d(0, var(--ty, 0px), var(--tz, 0px))
    scale(var(--sc, 1));
  opacity:var(--op, 1);
  will-change:transform, opacity;
  border-bottom-color:color-mix(in srgb, var(--line) calc(var(--op, 1) * 100%), transparent);
}
.mrow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(14px,2vw,32px);
  padding:clamp(24px,3.4vw,44px) 0;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:padding-left .6s var(--ease);
  backface-visibility:hidden;
}
.mrow.is-active{padding-left:clamp(0px,1vw,14px)}
.mrow__num{
  padding-top:.5em;
  font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--muted);
  transition:color .5s var(--ease);
}
.mrow.is-active .mrow__num{color:var(--accent)}
.mrow__name{
  font-size:clamp(23px,2.9vw,44px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.03em;
  transition:color .5s var(--ease);
  color:var(--muted);
}
.mrow.is-active .mrow__name{color:var(--ink)}
.mrow__desc{
  max-width:44ch;
  margin-top:12px;
  font-size:14px;line-height:1.6;
  color:var(--muted);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.mrow.is-active .mrow__desc{opacity:1;transform:none}
.mrow__arrow{
  padding-top:.4em;
  color:var(--muted);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.mrow.is-active .mrow__arrow{opacity:1;transform:none}

/* ======================= 13. SERVICES ===================== */
.services{
  position:relative;
  padding:var(--sec) 0;
  background:var(--dark);
  color:var(--bg);
}
.services__head{
  display:flex;flex-wrap:wrap;align-items:end;
  justify-content:space-between;gap:24px;
  padding-bottom:clamp(40px,5vw,80px);
}
.services__head .label{color:rgba(243,241,236,.45)}
.services__title{
  font-size:clamp(28px,4.6vw,72px);
  color:var(--bg);
}

.services__list{border-top:1px solid var(--line-light)}
.srow{border-bottom:1px solid var(--line-light)}
.srow__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,300px) auto;
  align-items:center;
  gap:clamp(16px,2.4vw,44px);
  padding:clamp(22px,2.8vw,38px) 0;
}
.srow__num{
  font-size:11px;font-weight:600;letter-spacing:.16em;
  color:rgba(243,241,236,.4);
  transition:color .5s var(--ease);
}
.srow:hover .srow__num{color:var(--accent)}
.srow__name{
  font-size:clamp(21px,2.9vw,46px);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.03em;
  color:rgba(243,241,236,.72);
  transition:color .5s var(--ease),transform .65s var(--ease);
}
.srow:hover .srow__name{
  color:var(--bg);
  transform:translateX(clamp(6px,1vw,18px));
}
.srow__desc{
  font-size:14px;line-height:1.55;
  color:rgba(243,241,236,.55);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.srow:hover .srow__desc{opacity:1;transform:none}
.srow__arrow{
  color:rgba(243,241,236,.4);
  transition:transform .6s var(--ease),color .5s var(--ease);
}
.srow:hover .srow__arrow{transform:translateX(10px);color:var(--bg)}

.services__float{
  position:fixed;top:0;left:0;z-index:60;
  width:clamp(220px,20vw,320px);
  aspect-ratio:4/5;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.92);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
  will-change:transform,opacity;
}
.services__float.is-visible{opacity:1}
.services__float img{
  width:100%;height:100%;
  object-fit:cover;
}

/* ======================== 14. ABOUT ======================= */
.about{padding:var(--sec) 0}
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,5vw,110px);
  align-items:center;
}
.about__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--stone);
}
.about__media img{width:100%;height:100%;object-fit:cover}

.about__content .label{margin-bottom:clamp(22px,2.8vw,40px)}
.about__title{
  margin-bottom:clamp(26px,3vw,44px);
  font-size:clamp(28px,4.2vw,64px);
}
.about__text{
  display:grid;gap:18px;
  max-width:50ch;
  margin-bottom:clamp(28px,3.2vw,44px);
  font-size:var(--fz-lead);
  line-height:1.58;
  color:var(--muted);
}

/* ======================== 15. STATS ======================= */
.stats{
  padding:clamp(56px,6vw,96px) 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
}
.stat{
  display:flex;flex-direction:column;gap:12px;
  padding-left:clamp(16px,2vw,32px);
  border-left:1px solid var(--line);
}
.stats__grid .stat:first-child{padding-left:0;border-left:0}
.stat__num{
  font-size:clamp(26px,2.9vw,52px);
  font-weight:200;
  line-height:1;
  letter-spacing:-.045em;
  white-space:nowrap;
  max-width:100%;
}
.stat__num b{font-weight:200}
.stat__label{
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

/* ======================= 16. PROCESS ====================== */
.process{padding-top:var(--sec)}
.process__head{
  grid-column:1 / -1;
  padding-bottom:clamp(8px,1.6vh,20px);
}
.process__head .label{margin-bottom:clamp(12px,1.8vw,22px)}
.process__title{font-size:clamp(26px,3.8vw,56px)}

.process__sticky{position:relative}
.process__stage{
  position:sticky;top:0;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  align-content:center;
  gap:clamp(20px,3vh,36px) clamp(32px,5vw,96px);
  height:100svh;
  padding-top:var(--header-h);
  padding-bottom:clamp(16px,3vh,32px);
  box-sizing:border-box;
}
.process__text{
  display:flex;flex-direction:column;
  gap:clamp(24px,3.4vh,44px);
}
.process__count{
  font-size:11px;font-weight:600;letter-spacing:.2em;
  color:var(--muted);
}
.process__count b{color:var(--ink);font-weight:600}

.process__steps{
  position:relative;
  min-height:clamp(150px,20vh,210px);
}
.pstep{
  position:absolute;top:0;left:0;
  width:100%;
  opacity:0;
  transform:translateY(24px);
  pointer-events:none;
  transition:opacity .7s var(--ease),transform .8s var(--ease);
}
.pstep.is-active{opacity:1;transform:none;pointer-events:auto}
.pstep__name{
  margin-bottom:18px;
  font-size:clamp(28px,4vw,62px);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.035em;
}
.pstep__desc{
  max-width:38ch;
  font-size:var(--fz-body);
  line-height:1.6;
  color:var(--muted);
}

.process__dots{display:flex;gap:8px}
.process__dots span{
  width:26px;height:2px;
  background:var(--line);
  transition:background .5s var(--ease);
}
.process__dots span.is-active{background:var(--ink)}

.process__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--stone);
}
.process__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .9s var(--ease),transform 1.5s var(--ease);
}
.process__media img.is-active{opacity:1;transform:scale(1)}

/* ====================== 17. PORTFOLIO ===================== */
.portfolio{padding:var(--sec) 0}
.portfolio__head{padding-bottom:clamp(36px,4.4vw,72px)}
.portfolio__head .label{margin-bottom:clamp(20px,2.6vw,36px)}
.portfolio__title{font-size:clamp(28px,4.6vw,72px)}

.gallery{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(14px,2vw,32px);
  align-items:start;
}
.gitem{
  position:relative;
  overflow:hidden;
  background:var(--stone);
}
.gitem img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.gitem:hover img{transform:scale(1.045)}
.gitem::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,13,0) 48%,rgba(15,15,13,.62) 100%);
  opacity:0;
  transition:opacity .7s var(--ease);
}
.gitem:hover::after{opacity:1}

.gitem--a{grid-column:1/8;aspect-ratio:3/2}
.gitem--b{grid-column:8/13;aspect-ratio:3/4;margin-top:clamp(28px,5vw,88px)}
.gitem--c{grid-column:1/6;aspect-ratio:3/4}
.gitem--d{grid-column:6/13;aspect-ratio:3/2;margin-top:clamp(28px,5vw,88px)}
.gitem--e{grid-column:1/9;aspect-ratio:16/9}
.gitem--f{grid-column:9/13;aspect-ratio:3/4;margin-top:clamp(28px,5vw,88px)}

.gitem__caption{
  position:absolute;left:0;bottom:0;z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:4px 16px;
  width:100%;
  padding:clamp(18px,2vw,30px);
  color:var(--bg);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.gitem:hover .gitem__caption{opacity:1;transform:none}
.gitem__name{
  font-size:clamp(17px,1.6vw,24px);
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.gitem__meta{
  grid-column:1;
  font-size:13px;
  color:rgba(243,241,236,.76);
}
.gitem__arrow{
  grid-row:1/3;grid-column:2;
  align-self:center;
  font-size:18px;
}

/* ====================== 18. ADVANTAGES ==================== */
.advantages{
  padding:var(--sec) 0;
  background:var(--stone);
}
.advantages__head{padding-bottom:clamp(36px,4.4vw,72px)}
.advantages__head .label{margin-bottom:clamp(20px,2.6vw,36px)}
.advantages__title{font-size:clamp(28px,4.6vw,72px)}

.advantages__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.adv{
  display:flex;flex-direction:column;
  gap:14px;
  padding:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px) clamp(32px,3.6vw,56px) 0;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.advantages__list .adv:nth-child(3n){border-right:0;padding-right:0}
.advantages__list .adv:nth-child(3n+1){padding-left:0}
.advantages__list .adv:nth-child(3n+2),
.advantages__list .adv:nth-child(3n){padding-left:clamp(20px,2.4vw,40px)}
.adv__num{
  font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--accent);
}
.adv__name{
  font-size:clamp(19px,1.9vw,29px);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.025em;
}
.adv__desc{
  margin-top:auto;
  max-width:32ch;
  font-size:14px;line-height:1.6;
  color:var(--muted);
}

/* ======================== 19. CHAIN ======================= */
.chain{
  padding:var(--sec) 0;
  background:var(--stone);
}
.chain__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,120px);
  align-items:start;
}
.chain__title{
  font-size:clamp(30px,5.2vw,86px);
  font-weight:300;
  line-height:1.01;
  letter-spacing:-.04em;
}
.chain__accent{
  margin-top:clamp(28px,3.4vw,52px);
  padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--line);
  font-size:clamp(17px,1.5vw,22px);
  font-weight:500;
  letter-spacing:-.01em;
}
.chain__flow{padding-top:8px}
.chain__step{
  position:relative;
  padding:clamp(12px,1.5vw,18px) 0 clamp(12px,1.5vw,18px) 34px;
}
.chain__step::before{
  content:'';
  position:absolute;left:5px;top:0;
  width:1px;height:100%;
  background:var(--line);
}
.chain__step:first-child::before{top:50%;height:50%}
.chain__step:last-child::before{height:50%}
.chain__step::after{
  content:'';
  position:absolute;left:1px;top:50%;
  width:9px;height:9px;
  margin-top:-4px;
  border:1px solid var(--muted);
  border-radius:50%;
  background:var(--stone);
}
.chain__step span{
  font-size:clamp(17px,1.7vw,25px);
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--muted);
}
.chain__step--last::after{
  background:var(--accent);
  border-color:var(--accent);
}
.chain__step--last span{color:var(--ink);font-weight:500}

/* ======================= 20. REVIEWS ====================== */
.reviews{padding:var(--sec) 0}
.reviews__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(36px,5vw,100px);
  align-items:center;
}
.reviews__left .label{margin-bottom:clamp(28px,3.4vw,52px)}

.reviews__slides{
  position:relative;
  transition:height .6s var(--ease);
}
.rev{
  position:absolute;top:0;left:0;
  width:100%;
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity .65s var(--ease),transform .75s var(--ease);
}
.rev.is-active{opacity:1;transform:none;pointer-events:auto}
.rev__quote{
  margin-bottom:clamp(24px,3vw,40px);
  font-size:clamp(20px,2.5vw,38px);
  font-weight:300;
  line-height:1.24;
  letter-spacing:-.03em;
  text-wrap:pretty;
}
.rev__author{display:flex;flex-direction:column;gap:6px}
.rev__name{font-size:15px;font-weight:600;letter-spacing:.02em}
.rev__meta{font-size:13px;color:var(--muted)}

.reviews__nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  margin-top:clamp(32px,4vw,56px);
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);
}
.reviews__count{
  font-size:11px;font-weight:600;letter-spacing:.2em;
  color:var(--muted);
}
.reviews__count b{color:var(--ink);font-weight:600}
.reviews__buttons{display:flex;gap:10px}
.rbtn{
  display:grid;place-items:center;
  width:52px;height:52px;
  border:1px solid var(--line);
  font-size:16px;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.rbtn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.reviews__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--stone);
}
.reviews__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .8s var(--ease),transform 1.4s var(--ease);
}
.reviews__media img.is-active{opacity:1;transform:scale(1)}

/* ========================= 21. CTA ======================== */
.cta{
  position:relative;
  display:flex;align-items:center;
  min-height:min(92svh,860px);
  padding:clamp(80px,10vw,150px) 0;
  overflow:hidden;
  background:var(--dark);
  color:var(--bg);
  isolation:isolate;
}
.cta__media{
  position:absolute;inset:-6% 0;
  z-index:-1;
  will-change:transform;
}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(15,15,13,.55) 0%,rgba(15,15,13,.25) 40%,rgba(15,15,13,.72) 100%),
    linear-gradient(90deg,rgba(15,15,13,.55) 0%,rgba(15,15,13,0) 70%);
}
.cta__content{position:relative}
.cta__title{
  max-width:16ch;
  margin-bottom:clamp(22px,2.6vw,36px);
  font-size:clamp(32px,5.4vw,90px);
  color:var(--bg);
}
.cta__text{
  max-width:46ch;
  margin-bottom:clamp(30px,3.6vw,48px);
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.6;
  color:rgba(243,241,236,.84);
}

/* ======================= 22. REQUEST ====================== */
.request{padding:var(--sec) 0}
.request__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,5vw,110px);
  align-items:start;
}
.request__left .label{margin-bottom:clamp(22px,2.8vw,40px)}
.request__title{
  margin-bottom:clamp(22px,2.6vw,36px);
  font-size:clamp(28px,4.4vw,68px);
}
.request__text{
  max-width:44ch;
  margin-bottom:clamp(28px,3vw,40px);
  color:var(--muted);
}
.request__points{
  display:grid;gap:14px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.request__points li{
  position:relative;
  padding-left:22px;
  font-size:14px;
}
.request__points li::before{
  content:'';
  position:absolute;left:0;top:.62em;
  width:8px;height:1px;
  background:var(--accent);
}

.request__form-wrap{
  padding:clamp(24px,3vw,52px);
  background:var(--white);
}
.form{display:grid;gap:clamp(20px,2.2vw,28px)}
.form__row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,28px);
}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field__label{
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.field__input{
  width:100%;
  padding:12px 0;
  border:0;border-bottom:1px solid var(--line);
  background:transparent;
  font-size:16px;
  letter-spacing:-.01em;
  transition:border-color .45s var(--ease);
  border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.field__input::placeholder{color:#B4AFA6}
.field__input:focus{
  outline:none;
  border-bottom-color:var(--ink);
}
.field__input--area{
  resize:vertical;
  min-height:76px;
  line-height:1.5;
}
/* —— Custom select —— */
.cselect{position:relative}
.cselect__native{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  pointer-events:none;
}
.cselect__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:12px 0;
  border:0;border-bottom:1px solid var(--line);
  background:transparent;
  font-size:16px;
  letter-spacing:-.01em;
  text-align:left;
  cursor:pointer;
  transition:border-color .45s var(--ease);
}
.cselect__trigger:focus{outline:none}
.cselect__trigger:focus-visible{border-bottom-color:var(--ink)}
.cselect.is-open .cselect__trigger{border-bottom-color:var(--ink)}
.cselect__value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cselect__value.is-placeholder{color:#B4AFA6}
.cselect__chevron{
  flex:none;
  width:8px;height:8px;
  margin-top:-4px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  transform:rotate(45deg);
  transition:transform .45s var(--ease),margin .45s var(--ease);
}
.cselect.is-open .cselect__chevron{
  margin-top:2px;
  transform:rotate(225deg);
}
.cselect__list{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 6px);
  z-index:20;
  margin:0;padding:6px;
  list-style:none;
  background:var(--white,#fff);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(23,23,20,.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:
    opacity .35s var(--ease),
    transform .45s var(--ease),
    visibility 0s linear .35s;
}
.cselect.is-open .cselect__list{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
  transition:
    opacity .35s var(--ease),
    transform .45s var(--ease),
    visibility 0s linear 0s;
}
.cselect__list[hidden]{display:none}
.cselect__option{
  padding:12px 14px;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--ink);
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.cselect__option:hover,
.cselect__option.is-active{
  background:var(--bg);
}
.cselect__option[aria-selected="true"]{
  color:var(--accent);
}
.cselect__option[aria-selected="true"]::after{
  content:'';
  float:right;
  width:7px;height:7px;
  margin-top:6px;
  border-radius:50%;
  background:var(--accent);
}
.field.has-error .field__input,
.field.has-error .cselect__trigger{border-bottom-color:#B4483C}
.field__error{
  font-size:12px;
  color:#B4483C;
  min-height:0;
  opacity:0;
  transition:opacity .3s linear;
}
.field.has-error .field__error{opacity:1}

.field--choice{border:0;margin:0;padding:0}
.field--choice legend{padding:0;margin-bottom:12px}
.choices{
  display:flex;flex-wrap:wrap;gap:10px;
}
.choice{position:relative;cursor:pointer}
.choice input{
  position:absolute;
  opacity:0;width:0;height:0;
}
.choice span{
  display:block;
  padding:11px 16px;
  border:1px solid var(--line);
  font-size:13px;
  letter-spacing:-.005em;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.choice:hover span{border-color:var(--muted)}
.choice input:checked + span{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--bg);
}
.choice input:focus-visible + span{outline:1px solid var(--accent);outline-offset:3px}

.field--check{gap:10px}
.check{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;gap:12px;
  cursor:pointer;
}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  width:18px;height:18px;
  margin-top:2px;
  border:1px solid var(--line);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.check__box::after{
  content:'';
  display:block;
  width:9px;height:5px;
  margin:4px auto 0;
  border-left:1.5px solid var(--bg);
  border-bottom:1.5px solid var(--bg);
  transform:rotate(-45deg) scale(.4);
  opacity:0;
  transition:opacity .3s linear,transform .35s var(--ease);
}
.check input:checked + .check__box{background:var(--ink);border-color:var(--ink)}
.check input:checked + .check__box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.check input:focus-visible + .check__box{outline:1px solid var(--accent);outline-offset:3px}
.check__text{font-size:13px;line-height:1.55;color:var(--muted)}
.check__text a{border-bottom:1px solid var(--line);transition:border-color .4s var(--ease)}
.check__text a:hover{border-color:var(--ink)}
.field--check.has-error .check__box{border-color:#B4483C}

.form-success{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:16px;
  padding:clamp(8px,1.4vw,20px) 0;
}
/* display:flex перебивает UA-стиль [hidden] — явно прячем */
.form-success[hidden]{display:none !important}
.form-success__mark{
  position:relative;
  width:48px;height:48px;
  border:1px solid var(--accent);
  border-radius:50%;
}
.form-success__mark::after{
  content:'';
  position:absolute;top:47%;left:50%;
  width:16px;height:8px;
  margin:-7px 0 0 -8px;
  border-left:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  transform:rotate(-45deg);
}
.form-success__title{
  font-size:clamp(26px,3vw,42px);
  font-weight:300;
  letter-spacing:-.03em;
}
.form-success__text{
  max-width:34ch;
  color:var(--muted);
}

/* ====================== 23. CONTACTS ====================== */
.contacts{
  padding:var(--sec) 0;
  border-top:1px solid var(--line-soft);
}
.contacts__grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5vw,100px);
  align-items:start;
}
.contacts__info .label{margin-bottom:clamp(22px,2.8vw,40px)}
.contacts__title{
  margin-bottom:clamp(30px,3.4vw,52px);
  font-size:clamp(26px,3.8vw,58px);
}
.contacts__list{border-top:1px solid var(--line)}
.contacts__item{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:16px;
  padding:clamp(14px,1.8vw,22px) 0;
  border-bottom:1px solid var(--line);
}
.contacts__item dt{
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  padding-top:.25em;
}
.contacts__item dd{
  font-size:clamp(16px,1.35vw,20px);
  letter-spacing:-.01em;
}
.contacts__item dd a{
  border-bottom:1px solid transparent;
  transition:border-color .45s var(--ease);
}
.contacts__item dd a:hover{border-bottom-color:var(--ink)}

.contacts__map{
  position:relative;
  overflow:hidden;
  background:var(--stone);
}
.contacts__map-inner{
  width:100%;
  height:clamp(320px,42vw,560px);
  background:var(--stone);
}
.contacts__map-inner iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.contacts__map-link{
  position:absolute;
  left:16px;bottom:16px;z-index:2;
  padding:10px 14px;
  background:rgba(243,241,236,.92);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
.contacts__map-link:hover{
  background:var(--white);
  border-color:var(--ink);
}
/* чуть приглушаем палитру карты под сайт */
.contacts__map.is-ready .contacts__map-inner{
  filter:saturate(.82) contrast(.96);
}

/* ======================== 24. FOOTER ====================== */
.footer{
  padding:clamp(56px,7vw,110px) 0 clamp(24px,3vw,40px);
  background:var(--dark);
  color:rgba(243,241,236,.8);
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.86fr));
  gap:clamp(32px,4vw,64px);
  padding-bottom:clamp(48px,6vw,96px);
}
.footer .brand{color:var(--bg)}
.footer__tagline{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:clamp(17px,1.5vw,22px);
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.02em;
  color:rgba(243,241,236,.62);
}
.footer .label{
  margin-bottom:18px;
  color:rgba(243,241,236,.4);
}
.footer__nav ul,
.footer__contacts ul,
.footer__social ul{display:grid;gap:12px}
.footer__nav a,
.footer__contacts a,
.footer__social a{
  font-size:14px;
  transition:color .4s var(--ease);
}
.footer__nav a:hover,
.footer__contacts a:hover,
.footer__social a:hover{color:var(--accent)}
.footer__contacts li,
.footer__social li{font-size:14px}

.footer__bottom{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px;
  padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--line-light);
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(243,241,236,.5);
}
.footer__bottom a{transition:color .4s var(--ease)}
.footer__bottom a:hover{color:var(--bg)}

/* ====================== 25. RESPONSIVE ==================== */

/* ---------- 1280px ---------- */
@media (max-width:1280px){
  .fsnav__foot{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fsnav__cta{grid-column:1/-1;justify-self:start}
}

/* ---------- 1100px : свернуть верхнее меню ---------- */
@media (max-width:1100px){
  .header__nav{display:none}
  .header__aside{margin-left:auto}
  .srow__link{grid-template-columns:auto minmax(0,1fr) auto}
  .srow__desc{display:none}
}

/* ---------- 1024px : планшет ---------- */
@media (max-width:1024px){
  :root{--header-h:72px}

  .intro__grid,
  .about__grid,
  .reviews__grid,
  .request__grid,
  .contacts__grid,
  .chain__grid{grid-template-columns:minmax(0,1fr)}

  .intro__grid{gap:clamp(36px,5vw,56px)}
  .about__grid{gap:clamp(28px,4vw,48px)}
  .about__media{aspect-ratio:16/10;order:-1}
  .reviews__media{aspect-ratio:16/10;order:-1}
  .request__grid{gap:clamp(32px,4vw,48px)}
  .contacts__grid{gap:clamp(28px,4vw,44px)}

  .advantages__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .advantages__list .adv:nth-child(3n){border-right:1px solid var(--line);padding-right:clamp(20px,2.4vw,40px)}
  .advantages__list .adv:nth-child(3n+1){padding-left:clamp(20px,2.4vw,40px)}
  .advantages__list .adv:nth-child(odd){padding-left:0}
  .advantages__list .adv:nth-child(even){border-right:0;padding-right:0;padding-left:clamp(20px,2.4vw,40px)}

  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,44px)}
  .stats__grid .stat:nth-child(odd){padding-left:0;border-left:0}

  /* фулскрин-меню: второй уровень без превью */
  .fssub{grid-template-columns:minmax(0,1fr)}
  .fssub__media{display:none}
  .fsnav__foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 900px : отключаем pin-секции ---------- */
@media (max-width:900px){
  /* ---- проекты: горизонтальный свайп ---- */
  .projects__sticky{height:auto !important}
  .projects__viewport{
    position:static;
    height:auto;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .projects__viewport::-webkit-scrollbar{display:none}
  .projects__track{transform:none !important}
  .pcard{
    flex:0 0 min(82vw,520px);
    scroll-snap-align:center;
  }
  .projects__hud{
    position:static;
    max-width:none;
    margin-top:clamp(20px,3vw,28px);
    opacity:1;
    transform:none;
  }
  .projects__hud-line{max-width:none}
  .projects{padding-bottom:var(--sec)}
  .projects__intro{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(20px,4vw,28px);
    align-items:start;
  }
  .projects__intro-text{
    max-width:none;
    width:100%;
  }

  /* ---- материалы: как process — картинка sticky, затем список ---- */
  .materials__grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:clamp(24px,5vw,36px);
  }
  .materials__left,
  .materials__sticky{
    display:contents;
  }
  .materials__text{
    max-width:none;
    width:100%;
  }
  .materials__stage{
    position:sticky;
    top:calc(var(--header-h) + 8px);
    z-index:2;
    flex:none;
    width:100%;
    height:min(42vh,300px);
    min-height:200px;
    max-height:none;
    aspect-ratio:auto;
    margin-top:0;
    align-self:stretch;
  }
  .materials__list{
    width:100%;
    padding-top:8px;
    padding-bottom:clamp(22vh,32vh,40vh);
    perspective:820px;
    perspective-origin:50% 0%;
  }
  .materials__list.is-roulette--flat .mrow{
    /* прямой барабан: без бокового смещения, только rotateX + глубина */
    transform:
      rotateX(var(--rx, 0deg))
      translate3d(0, 0, var(--tz, 0px))
      scale(var(--sc, 1));
  }
  .mrow__desc{opacity:1;transform:none}
  .mrow__arrow{display:none}

  /* ---- процесс: колонка, картинка сверху и sticky ---- */
  .process__sticky{height:auto !important}
  .process__stage{
    position:static;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    height:auto;
    padding-top:0;
    padding-bottom:0;
    gap:clamp(24px,5vw,36px);
  }
  .process__head{
    order:-2;
    grid-column:auto;
    padding-bottom:0;
  }
  .process__head .label{margin-bottom:clamp(16px,3vw,24px)}
  .process__title{font-size:clamp(28px,8vw,44px)}
  .process__media{
    order:-1;
    position:sticky;
    top:calc(var(--header-h) + 8px);
    z-index:2;
    flex:none;
    width:100%;
    height:min(42vh,300px);
    min-height:200px;
    aspect-ratio:auto;
    align-self:stretch;
  }
  .process__text{
    order:1;
    padding-top:0;
    padding-bottom:clamp(18vh,28vh,36vh);
    gap:0;
    width:100%;
  }
  .process__count,
  .process__dots{display:none}
  .process__steps{
    position:static;
    min-height:0;
    border-top:1px solid var(--line);
    counter-reset:ps;
  }
  .pstep{
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;
    padding:clamp(20px,3vw,28px) 0;
    border-bottom:1px solid var(--line);
  }
  .pstep::before{
    counter-increment:ps;
    content:'0' counter(ps);
    display:block;
    margin-bottom:12px;
    font-size:11px;font-weight:600;letter-spacing:.16em;
    color:var(--muted);
    transition:color .5s var(--ease);
  }
  .pstep.is-active::before{color:var(--accent)}
  .pstep__name{
    margin-bottom:10px;
    color:var(--muted);
    transition:color .5s var(--ease);
  }
  .pstep.is-active .pstep__name{color:var(--ink)}
  .pstep__desc{max-width:none}

  /* ---- галерея ---- */
  .gitem--a{grid-column:1/9}
  .gitem--b{grid-column:9/13;aspect-ratio:3/4}
  .gitem--c{grid-column:1/6}
  .gitem--d{grid-column:6/13}
  .gitem--e{grid-column:1/9}
  .gitem--f{grid-column:9/13}
  .gitem__caption{opacity:1;transform:none}
  .gitem::after{opacity:1}

  .services__float{display:none}
}

/* ---------- 760px : мобильные ---------- */
@media (max-width:760px){
  :root{
    --header-h:64px;
    --sec:clamp(72px,16vw,104px);
  }

  .header__phone{display:none}
  .menu-toggle__text{display:none}
  .menu-toggle{
    width:44px;height:44px;
    justify-content:center;
    margin-right:-10px;
  }

  .brand{font-size:13px;letter-spacing:.18em}

  /* ---- hero ---- */
  .hero{
    min-height:92svh;
    padding-bottom:clamp(72px,14vh,104px);
  }
  .hero__label{
    font-size:10px;
    letter-spacing:.2em;
    margin-bottom:20px;
  }
  .hero__title{letter-spacing:-.03em}
  .hero__bottom{
    flex-direction:column;
    align-items:stretch;
    gap:22px;
  }
  .hero__text{font-size:15px;max-width:34ch}
  .hero__text br{display:none}
  .hero__bottom .btn{
    width:100%;
    justify-content:space-between;
    padding:18px 22px;
  }

  /* ---- фулскрин-меню ---- */
  .fsnav__main{
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
  }
  .fsnav.is-sub .fsnav__main{
    transform:none;
  }
  .fssub{
    transform:none;
    width:100%;
    max-width:100%;
  }
  .fsnav.is-sub .fssub{
    transform:none;
  }
  .fsnav__link{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:16px;
    padding:14px 12px;
  }
  .fsnav__link:hover .fsnav__label,
  .fsnav__link:hover .fsnav__arrow{
    transform:none;
  }
  .fsnav__label{font-size:clamp(26px,7.6vw,40px)}
  .fsnav__foot{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
    padding-top:20px;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
    min-width:0;
  }
  .fsnav__cta{
    width:100%;
    max-width:100%;
    justify-content:space-between;
    box-sizing:border-box;
  }
  .fssub__list a{font-size:clamp(18px,5.4vw,24px)}
  .fssub__list a:hover,
  .fssub__list a.is-active{padding-left:8px}

  /* ---- секции ---- */
  .intro__row{
    grid-template-columns:18px minmax(0,1fr);
    gap:0 14px;
    padding:clamp(18px,4.2vw,26px) 0;
  }
  .intro__list::before,
  .intro__list[data-active]::after{left:6px}
  .intro__list[data-active]::after{
    transition:height .85s cubic-bezier(.22,1,.36,1);
  }
  .intro__marker{
    width:13px;height:13px;
    margin-top:.65em;
    transition:
      background .75s cubic-bezier(.22,1,.36,1),
      border-color .75s cubic-bezier(.22,1,.36,1),
      transform .75s cubic-bezier(.22,1,.36,1),
      box-shadow .75s cubic-bezier(.22,1,.36,1);
  }
  .intro__num{
    transition:color .7s cubic-bezier(.22,1,.36,1);
  }
  .intro__name{
    font-size:clamp(20px,6vw,26px);
    transition:color .7s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
  }
  .intro__desc{
    transition:
      max-height .85s cubic-bezier(.22,1,.36,1),
      opacity .75s cubic-bezier(.22,1,.36,1),
      transform .8s cubic-bezier(.22,1,.36,1),
      margin .85s cubic-bezier(.22,1,.36,1);
  }
  .intro__row.is-on .intro__desc{
    max-height:4.5em;
  }
  .intro__content{
    padding-right:clamp(28px,10vw,56px);
  }
  /* цифры выше, чтобы не пересекались с описанием */
  .intro__ghost{
    top:12%;
    font-size:clamp(48px,15vw,72px);
    transform:translate(6%,0);
    transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);
  }
  .intro__row.is-on .intro__ghost,
  .intro__row:hover .intro__ghost{
    opacity:.05;
    transform:translate(0,0);
  }
  .form__row{grid-template-columns:minmax(0,1fr)}
  .request__form-wrap{
    margin-inline:calc(var(--gutter) * -1);
    padding:clamp(24px,7vw,32px) var(--gutter);
  }
  .choices{gap:8px}
  .choice span{padding:10px 13px;font-size:12.5px}

  .stats__grid{gap:24px}
  .stat{padding-left:16px}

  /* ---- галерея: вертикальная асимметрия ---- */
  .gallery{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(20px,6vw,32px);
  }
  .gitem{grid-column:1/-1 !important;margin-top:0 !important}
  .gitem--a{aspect-ratio:4/3}
  .gitem--b{aspect-ratio:3/4;width:82%}
  .gitem--c{aspect-ratio:4/5;width:88%;margin-left:auto !important}
  .gitem--d{aspect-ratio:4/3}
  .gitem--e{aspect-ratio:16/10;width:88%}
  .gitem--f{aspect-ratio:3/4;width:78%;margin-left:auto !important}

  .advantages__list{grid-template-columns:minmax(0,1fr)}
  .advantages__list .adv,
  .advantages__list .adv:nth-child(3n),
  .advantages__list .adv:nth-child(3n+1),
  .advantages__list .adv:nth-child(odd),
  .advantages__list .adv:nth-child(even){
    padding:24px 0 28px;
    border-right:0;
  }
  .adv{gap:10px}
  .adv__desc{margin-top:0}

  .chain__flow{padding-top:clamp(28px,6vw,40px)}

  .reviews__nav{margin-top:28px}
  .rbtn{width:48px;height:48px}

  .contacts__item{
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }

  .footer__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
  }
  .footer__brand{grid-column:1/-1}
}

/* ---------- 480px ---------- */
@media (max-width:480px){
  .pcard{flex:0 0 86vw}
  .pcard__head{gap:10px}
  .pcard__meta{font-size:13px}
  .materials__stage{height:min(36vh,260px);min-height:180px}
  .process__media{height:min(36vh,260px);min-height:180px}
  .form-success__title{font-size:26px}
}

/* ---------- 380px ---------- */
@media (max-width:380px){
  :root{--gutter:18px}
  .hero__text{font-size:14px}
  .choice span{padding:9px 11px;font-size:12px}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
}

/* сенсорные экраны: курсор и hover-превью не нужны */
@media (hover:none),(pointer:coarse){
  .cursor{display:none}
  .services__float{display:none}
}

/* ==================== 26. REDUCED MOTION ================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .reveal:not(.line),
  .reveal:not(.line).is-in{opacity:1;transform:none}
  .line > span{transform:none;opacity:1}
  .reveal-clip > img,
  .reveal-clip > svg,
  .reveal-clip > .contacts__map-inner{clip-path:none;transform:none}
  .contacts__map-link{opacity:1;transform:none}

  [data-hero-el]{opacity:1;transform:none}
  .hero__media{clip-path:none}
  .hero__media img{transform:none}
  .hero__overlay{opacity:1}
  .hero__title .line > span{transform:none;opacity:1}

  .cursor{display:none}
  .services__float{display:none}

  /* pin-секции разворачиваем в обычный поток */
  .projects__sticky{height:auto !important}
  .projects__viewport{
    position:static;height:auto;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  .projects__track{transform:none !important}
  .pcard{flex:0 0 min(82vw,520px);scroll-snap-align:center}
  .projects__hud{position:static;margin-top:24px;opacity:1;transform:none}

  .process__sticky{height:auto !important}
  .process__stage{
    position:static;
    height:auto;
    padding-top:0;
    display:flex;
    flex-direction:column;
    gap:28px;
  }
  .process__media{
    order:-1;
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    margin-bottom:0;
  }
  .process__steps{position:static;min-height:0}
  .pstep{
    position:static;opacity:1;transform:none;pointer-events:auto;
    padding:22px 0;border-top:1px solid var(--line);
  }
  .process__dots{display:none}

  .materials__stage img{transition:none}
  .materials__list{perspective:none}
  .materials__list.is-roulette .mrow{
    transform:none !important;
    opacity:1 !important;
    will-change:auto;
  }
  .intro__name,
  .intro__desc,
  .intro__marker,
  .intro__ghost{transition:none !important}
  .intro__desc{max-height:none;opacity:1;margin-top:8px;transform:none}
  .mrow__desc{opacity:1;transform:none}
  .gitem__caption{opacity:1;transform:none}
  .gitem::after{opacity:1}
}