/* ================== ТеплоХаус · шкура «Диагонали» (tn.cccode.ru) ==================
   Композиция: тёмные плиты с прямыми краями, фулскрин-фото с параллаксом,
   карточки внахлёст.
   Цвета и шрифты — наши: графит #22252B / жёлтый #F3C805 / Onest. */

/* ---------- Шапка поверх фото, фото от самого верха ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:60}
.header .logo,.header .nav a,.header .header__phone{transition:color 280ms ease}
.header--clear .logo,.header--clear .nav a,.header--clear .header__phone,
.header--glass .logo,.header--glass .nav a,.header--glass .header__phone{color:#fff}
.header--clear .logo svg circle,.header--glass .logo svg circle{stroke:#fff;transition:stroke 280ms ease}
.header--glass .header__in{background:rgba(21,23,28,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header--glass .logo__s{color:rgba(255,255,255,.72)}
.header--glass .geo-pill{background:rgba(255,255,255,.18);color:#fff}
.header--glass .geo-pill b{color:#fff}
.header--glass .burger span,
.header--glass .burger span::before,
.header--glass .burger span::after{background:#fff}
.header--glass .nav a:hover{background:rgba(255,255,255,.18);color:#fff}
.header--glass .geo-pill:hover{background:rgba(255,255,255,.3)}
.header--clear .logo__s{color:rgba(255,255,255,.72)}
.header--clear .geo-pill{background:rgba(255,255,255,.26);color:#fff}
.header--clear .geo-pill b{color:#fff}
.header--clear .burger span,
.header--clear .burger span::before,
.header--clear .burger span::after{background:#fff}
.header--clear .nav a:hover{background:rgba(255,255,255,.18);color:#fff}
.header--clear .geo-pill{background:rgba(255,255,255,.16)}
.header--clear .geo-pill:hover{background:rgba(255,255,255,.28)}
.header--clear .nav .nav-cat:hover{background:rgba(243,200,5,.28)}

/* ---------- Hero: фулскрин-фото ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:130px 0 120px;overflow:hidden;
}
.hero-bg{position:absolute;inset:-12% 0;z-index:0;pointer-events:none}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:52% 42%;
  filter:brightness(.92);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(21,23,28,.88) 0%, rgba(21,23,28,.62) 44%, rgba(21,23,28,.18) 78%, rgba(21,23,28,.05) 100%);
}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
.hero__photo{display:block;position:relative}
.hero__photo > img{display:none}
.hero .ushow{position:static;left:auto;right:auto;bottom:auto;padding:0;background:none;border-radius:0}
.hero .ushow__stage{height:150px}
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__photo{order:2}
  .hero .ushow__stage{height:92px}
}
.hero h1{color:#fff;max-width:24ch}
.typewrap{color:#B7BCC6}
.typewrap .ch.is-cursor{box-shadow:3px 0 0 #F3C805}
.typewrap.is-frosted .ch:nth-last-child(-n+6){
  background:linear-gradient(180deg,#D5E8FA 10%,#9CC8F0 90%);
  -webkit-background-clip:text;background-clip:text;
}
.hero__sub{color:#C9CDD5;max-width:56ch}
.hero .btn--ghost{background:rgba(255,255,255,.94)}
.hero .stat{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero .stat b{color:#fff}
.hero .stat span{color:rgba(255,255,255,.74)}
.hero .stat svg{color:#F3C805}
.hero .trust div{color:rgba(255,255,255,.85)}
.hero .miniform{margin-top:26px}
@media (min-width:1081px){ .hero .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px} .hero .stat{padding:18px 18px} .hero .stat b{font-size:18px} .hero .stat span{font-size:12.5px} }
.hero__photo{align-self:center;margin-top:56px}

/* изморозь в этой шкуре не нужна (фото — фон) */
.frost{display:none}

/* секции позиционированы (нужно для абсолютных элементов внутри) */
section{position:relative}
section > .wrap{position:relative;z-index:1}

/* ---------- Тёмные плиты с прямыми краями ---------- */
.dark-wave{
  background:var(--dark);
  padding-top:110px;padding-bottom:110px;
}
/* перекраска контента тёмных секций */
.dark-wave h2{color:#fff}
.dark-wave h2 .accent{background:none;color:#F3C805;padding:0}
.dark-wave mark.hl{background:none;color:#F3C805;padding:0}
.dark-wave .lead{color:#B4B8C0}
/* преимущества на тёмном */
.dark-wave .perks-lede{background:var(--dark-2);box-shadow:none}
.dark-wave .perks-lede h3{color:#fff}
.dark-wave .perks-lede p{color:#B4B8C0}
.dark-wave .perklist{background:var(--dark-2);border-color:rgba(255,255,255,.08)}
.dark-wave .perklist>div{border-color:rgba(255,255,255,.08)}
.dark-wave .perklist b{color:#fff}
.dark-wave .perklist p{color:#A2A7B1}
.dark-wave .perklist svg{color:#F3C805}
/* дорога заказа на тёмном */
.dark-wave .road__track{background:#3A3E48}
.dark-wave .road__node{background:var(--dark-2);border-color:#3A3E48;color:#8A9099}
.dark-wave .road__stop.is-past .road__node,
.dark-wave .road__stop.is-active .road__node{background:#F3C805;border-color:#F3C805;color:#25282E}
.dark-wave .road__stop b{color:#8A9099}
.dark-wave .road__stop.is-past b,.dark-wave .road__stop.is-active b{color:#F3C805}
.dark-wave .road__stop p{color:#8A9099}
.dark-wave .road__stop.is-past p{color:#B4B8C0}
.dark-wave .road__stop.is-active p{color:#fff}
.dark-wave .deal>div{background:var(--dark-2);box-shadow:none}
.dark-wave .deal h3{color:#fff}
.dark-wave .deal li{color:#C9CDD5}
.dark-wave .deal li.dim{color:#8A9099}

/* ---------- Появление заголовков с лёгким наклоном ---------- */
h2.reveal{transform:translateY(30px) rotate(-1.2deg);transform-origin:left bottom}
h2.reveal.is-in{transform:none}

/* ---------- Ряд «сторис» в работах ---------- */
.stories{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  margin:56px 0 84px;align-items:start;
}
.story{
  background:linear-gradient(170deg,#2C303A 0%,#1D2026 100%);
  border-radius:20px;padding:26px 22px 24px;color:#fff;
  transform:translateY(var(--lift,0px));
  box-shadow:0 18px 40px rgba(21,23,28,.35);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  aspect-ratio:9/13;justify-content:flex-end;position:relative;overflow:hidden;
  transition:transform 260ms var(--ease-out);
}
.story:hover{transform:translateY(calc(var(--lift,0px) - 8px))}
.stories.reveal .story{opacity:0;transform:translateY(calc(var(--lift,0px) + 20px))}
.stories.reveal.is-in .story{opacity:1;transform:translateY(var(--lift,0px));transition:opacity .5s var(--ease-out),transform .55s var(--ease-out)}
.stories.reveal.is-in .story:nth-child(2){transition-delay:70ms}
.stories.reveal.is-in .story:nth-child(3){transition-delay:140ms}
.stories.reveal.is-in .story:nth-child(4){transition-delay:210ms}
.story img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.story::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,23,28,0) 34%, rgba(21,23,28,.86) 82%);
}
.story b,.story span{position:relative;z-index:1}
.story b{
  font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,38px);
  letter-spacing:-.03em;color:#F3C805;line-height:1;
}
.story span{font-size:13.5px;color:#B4B8C0;line-height:1.4}

/* ---------- Параллакс-плита доставки ---------- */
.dlv{background-attachment:scroll}
.dlv .dlv-bgimg{position:absolute;inset:-14% 0;z-index:0}
.dlv .dlv-bgimg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.85)}
.dlv>div{position:relative;z-index:1}

/* ---------- Адаптив ---------- */
@media (max-width:1080px){
  .hero{min-height:0;padding:110px 0 110px}
  .dark-wave{padding-top:90px;padding-bottom:90px}
  .stories{grid-template-columns:1fr 1fr;gap:18px}
  .story{--lift:0px !important}
}
@media (max-width:640px){
  .stories{grid-template-columns:1fr 1fr;gap:12px}
  .story{padding:18px 16px 16px}
  .dark-wave{padding-top:76px;padding-bottom:76px}
}
@media (prefers-reduced-motion: reduce){
  h2.reveal{transform:none}
  .story{transform:none}
}

/* ---------- Работы: светло-серая плита с прямыми краями ---------- */
.diag-cut{
  background:var(--bg-2);
  padding-top:100px;padding-bottom:100px;
}

.final{margin-top:70px}

/* отзывы на тёмной плите */
.dark-wave .rev-btn{background:var(--dark-2);border-color:rgba(255,255,255,.16);color:#fff}
.dark-wave .rev-btn:hover{border-color:rgba(255,255,255,.34)}
.dark-wave .review{box-shadow:none}
.dark-wave .rev-widgets .rw{box-shadow:none}
.dark-wave .helpcard{box-shadow:none}
.dark-wave .rev-links{color:#8A9099}

/* мобильное меню поверх фото: панель светлая — контент тёмный */
@media (max-width:1080px){
  .header:has(.nav.is-open) .logo,
  .header:has(.nav.is-open) .nav a,
  .header:has(.nav.is-open) .header__phone{color:var(--ink)}
  .header:has(.nav.is-open) .logo svg circle{stroke:#25282E}
  .header:has(.nav.is-open) .logo__s{color:var(--ink-2)}
  .header:has(.nav.is-open) .burger span,
  .header:has(.nav.is-open) .burger span::before,
  .header:has(.nav.is-open) .burger span::after{background:#25282E}
}