/* ТриПлан: дизайн-система «Пульт» (вариант E, выбран заказчиком 2026-09-21).
   Тёмный интерфейс, bento-карточки, стекло, поиск ⌘K. Только нативный CSS, ноль зависимостей.
   Токены и правила использования: DESIGN.md. */

@font-face{font-family:"Onest";src:url(/assets/fonts/onest-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(/assets/fonts/onest-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JBM";src:url(/assets/fonts/jbm-cyrillic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JBM";src:url(/assets/fonts/jbm-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@media(pointer:fine){@view-transition{navigation:auto}} /* на тач-экранах анимация перехода глотает тапы (WebKit iPhone, проверено 9D.1) */

:root{
  --bg:#0d1014; --pn:#151920; --pn2:#1b2028; --ln:rgba(255,255,255,.08); --ln2:rgba(255,255,255,.14);
  --tx:#e9ecf1; --mute:#8d95a3; --acc:#C51317; --acc-hi:#E9181D; --on-acc:#fff; --acc-rgb:197,19,23;
  --acc-text:#EE5053; --acc-text-rgb:238,80,83; /* brand red of the logo; --acc-text: lighter red for text on dark bg (5.4:1 on --bg) */
  --paper:#e9ecef; --paper2:#dadee3; --ink:#0d1014; --ink-mute:#4a505a;
  --rc:20px; --ri:12px; --pd:clamp(18px,2vw,28px); --gap:clamp(10px,1.2vw,16px);
  --f:"Onest","Helvetica Neue",Arial,sans-serif; --mono:"JBM",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --u:clamp(210px,20vw,290px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#2c333e var(--bg);scroll-padding-top:84px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font:400 1rem/1.55 var(--f);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  background-image:radial-gradient(900px 500px at 12% -8%,rgba(var(--acc-rgb),.08),transparent 70%),radial-gradient(800px 500px at 100% 0,rgba(80,120,255,.06),transparent 70%);background-repeat:no-repeat}
::selection{background:var(--acc);color:var(--on-acc)}
img,video{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a[href^="tel:"]{white-space:nowrap}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pd)}
@media(min-width:1100px){.wrap{padding:0 40px}}
.t{font-weight:700;letter-spacing:-.035em;line-height:1;text-wrap:balance;hyphens:manual;overflow-wrap:anywhere}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 18px;background:var(--tx);color:var(--ink);border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- шапка ---------- */
.bar{position:sticky;top:0;z-index:20;height:68px;view-transition-name:bar}
.bar::before{content:"";position:absolute;inset:0;background:rgba(13,16,20,.72);border-bottom:1px solid var(--ln);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.bar .wrap{position:relative;height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--tx);text-decoration:none;margin-right:8px}
.brand svg{display:block;width:auto;flex:none}
.brand-m{height:32px}
.brand-w{height:13px}
.bar nav{display:flex;gap:6px;align-self:stretch}
.bar nav a{font-size:.92rem;text-decoration:none;color:var(--mute);padding:8px 14px;border-radius:999px;transition:color .2s,background-color .2s}
@media(hover:hover){.bar nav a:hover{color:var(--tx)}}
.bar nav a[aria-current]{color:var(--tx);background:var(--pn2)}
.find{display:none;flex:1;max-width:420px;margin-left:auto;align-items:center;gap:12px;min-height:44px;padding:0 8px 0 14px;background:var(--pn);border:1px solid var(--ln2);border-radius:999px;color:var(--mute);cursor:pointer;text-align:left;transition:border-color .2s,background-color .2s}
.js .find{display:flex}
@media(hover:hover){.find:hover{border-color:rgba(255,255,255,.28);background:var(--pn2)}}
.find svg{width:16px;height:16px;flex:none}
.find span{flex:1;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd{font:400 .75rem/1 var(--mono);padding:6px 8px;border:1px solid var(--ln2);border-radius:8px;color:var(--mute);background:var(--bg)}
.tel{font-size:.92rem;font-weight:600;color:var(--acc-text);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto}
.tel-i{display:none;width:20px;height:20px}
.js .tel{margin-left:0}

/* меню: полное меню Wix с выпадающими списками, бургер ниже 1100px */
.bar{--m-bg:var(--pn);--m-panel:var(--bg);--m-line:var(--ln2);--m-tx:var(--tx);--m-mute:var(--mute);--m-acc:var(--acc);--m-r:12px;--m-ri:10px;--m-hi:var(--pn2);--m-gap:2px}
.nv{display:flex;gap:var(--m-gap);list-style:none;margin:0;padding:0;height:100%;align-items:center}
.nv>li{position:relative;display:flex;align-items:center;height:100%}
.nv .nv-tel{display:none}
.nv-t{appearance:none;background:none;border:0;padding:0;width:22px;height:32px;margin-left:-4px;display:flex;align-items:center;justify-content:center;color:var(--m-mute);cursor:pointer}
.nv-t svg{width:10px;height:10px;flex:none;transition:transform .2s}
.nv-i.nv-on>.nv-t{color:var(--m-tx)}
@media(hover:hover){.nv-t:hover{color:var(--m-tx)}}
.nv-i.nv-on>.nv-t svg{transform:rotate(180deg)}
.nv-t:focus-visible,.nv-bx:focus-visible{outline:2px solid var(--m-acc);outline-offset:2px}
.nv-s{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:-12px;z-index:30;min-width:270px;background:var(--m-bg);border:1px solid var(--m-line);border-radius:var(--m-r);box-shadow:0 18px 48px rgba(0,0,0,.5);display:none}
.nv-i.nv-on>.nv-s{display:block}
.nv-s.nv-cols{columns:2;column-gap:8px;width:620px}
.nv-s li{break-inside:avoid}
.bar .nv .nv-s a{display:block;padding:8px 12px;font-size:.86rem;line-height:1.3;color:var(--m-mute);border-radius:var(--m-ri)}
.bar .nv .nv-s a:focus-visible{color:var(--m-tx);background:var(--m-hi)}
@media(hover:hover){.bar .nv .nv-s a:hover{color:var(--m-tx);background:var(--m-hi)}}
.nv-bx{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;background:none;border:1px solid var(--m-line);border-radius:var(--m-r);color:var(--m-tx);cursor:pointer}
.nv-bx svg{width:20px;height:20px}
.nv-bx .nv-pc,.bar.nv-mo .nv-bx .nv-po{display:none}
.bar.nv-mo .nv-bx .nv-pc{display:block}
.bar.nv-mo{z-index:40}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;background:var(--acc);color:var(--on-acc);font:700 .95rem/1 var(--f);text-decoration:none;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),background-color .2s,box-shadow .3s}
@media(hover:hover){.btn:hover{background:var(--acc-hi);box-shadow:0 8px 32px -8px rgba(var(--acc-rgb),.7)}}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn.ink,.hot .btn,.light .btn:not(.ghost){background:var(--ink);color:var(--paper)}
@media(hover:hover){.btn.ink:hover,.hot .btn:hover,.light .btn:not(.ghost):hover{background:#232830;box-shadow:none}}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--ln2)}
@media(hover:hover){.btn.ghost:hover{background:var(--pn2);box-shadow:none}}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
@media(max-width:480px){.btn{white-space:normal;text-align:center;padding-block:14px;line-height:1.2}}

/* ---------- карточки, свечение границы по курсору ---------- */
.card{position:relative;background:var(--pn);border:1px solid var(--ln);border-radius:var(--rc);overflow:hidden;isolation:isolate;margin:0}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-text-rgb),.85),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media(hover:hover){.card:hover::before{opacity:1}}
.card.light{background:var(--paper);color:var(--ink);border-color:transparent}
.card.light::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.7),transparent 62%)}
.card.hot{background:var(--acc);color:var(--on-acc);border-color:transparent}
.card.hot :focus-visible{outline-color:var(--on-acc)}
.card.hot::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.9),transparent 62%)}
.pad{padding:var(--pd)}
a.card{display:block;text-decoration:none;color:inherit}

/* ---------- фото: плейсхолдер, когда снимка нет ---------- */
.gen{display:block;width:100%;height:100%;background:linear-gradient(135deg,hsl(calc(var(--i,1)*47 + 8) 78% 52%),hsl(calc(var(--i,1)*47 + 70) 70% 24%))}

/* ---------- главная: bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(calc(var(--u)*1.7),auto) var(--u) var(--u) auto auto;gap:var(--gap);padding-top:var(--gap);
  grid-template-areas:"hero hero hero hero hero hero hero hero work work work work" "map map map map map car car car car rent rent rent" "con con con vr vr vr dec dec dec rent rent rent" "about about about about about about about about about about about about" "cta cta cta cta cta cta cta cta cta cta cta cta"}
.c-hero{grid-area:hero;display:flex;flex-direction:column}
.eq-hero .ph{position:absolute;inset:0;z-index:-1}
.c-hero .ph{position:relative;flex:none;aspect-ratio:16/9;overflow:hidden;background:#000} /* видео целиком, текст — плашкой под ним */
.c-hero .ph img,.c-hero .ph video{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.c-hero .ph video{position:absolute;inset:0}
.hero-bar{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(20px,3vw,44px);align-items:end;align-content:end;padding:clamp(22px,2.6vw,40px)}
.hero-bar h1{grid-row:span 2}
.vfs{position:absolute;right:12px;bottom:12px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(13,16,20,.55);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vfs[hidden]{display:none}
@media(hover:hover){.vfs:hover{background:rgba(13,16,20,.85)}}
.beam{position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.55;background:linear-gradient(104deg,transparent 46%,rgba(var(--acc-text-rgb),.2) 51%,rgba(255,225,205,.16) 53%,transparent 58%)}
.c-hero h1{font-size:clamp(1.9rem,min(4.2vw,8vh),3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.c-hero h1 span{font-weight:300;letter-spacing:-.03em;color:#dfe3e8}
.c-hero h1:has(.k){font-size:clamp(2.6rem,min(7vw,12vh),5.6rem);letter-spacing:-.03em} /* одно слово крупно, подпись строкой ниже */
.c-hero h1 .k{display:block;margin-top:.3em;font-size:max(1rem,.3em);font-weight:400;letter-spacing:0;line-height:1.2}
.c-hero p{max-width:none;margin:12px 0 22px;font-size:.95rem}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* «Наша работа»: лента блога и кейсов */
.c-work{grid-area:work;display:flex;flex-direction:column;min-height:0;contain:size} /* лента не растягивает ряд hero: высоту задаёт hero */
.c-work header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:var(--pd) var(--pd) 12px}
.c-work h2{font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.c-work header small{color:var(--mute);font-size:.82rem}
.feed{list-style:none;margin:0;padding:0 10px 10px;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#2c333e transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
.fx{display:flex;gap:14px;align-items:center;padding:9px 10px;border-radius:14px;text-decoration:none;color:inherit;transition:background-color .2s}
@media(hover:hover){a.fx:hover{background:var(--pn2)}}
.fx .th{flex:none;width:56px;height:56px;border-radius:var(--ri);overflow:hidden;background:var(--pn2)}
.fx .th img{width:100%;height:100%;object-fit:cover}
.fx b{display:block;font-weight:600;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.fx em,.mc em{display:block;font-style:normal;font-size:.8rem;color:var(--mute);margin-top:2px}
.fx em i,.mc em i{font-style:normal;font-family:var(--mono);letter-spacing:0}
.fx em .k,.mc em .k{color:var(--acc)}

.tile{display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 20px 18px;background:linear-gradient(0deg,rgba(9,11,14,.9),rgba(9,11,14,0));font-size:.9rem;line-height:1.35;z-index:2;pointer-events:none} /* тап проходит к ссылке-оверлею */
.tile figcaption b{display:block;font-weight:700;font-size:1.02rem;line-height:1.2;margin-bottom:4px;hyphens:manual;overflow-wrap:anywhere}
@media(hover:hover){.tile:hover img{transform:scale(1.045)}}
.c-map{grid-area:map}.c-car{grid-area:car}.c-con{grid-area:con}.c-vr{grid-area:vr}.c-dec{grid-area:dec}

.c-rent{grid-area:rent;display:flex!important;flex-direction:column;text-decoration:none;view-transition-name:eq}
.c-rent h2{hyphens:manual;overflow-wrap:anywhere}
.c-rent .txt{padding:var(--pd);display:grid;gap:12px;justify-items:start}
.c-rent h2{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700;letter-spacing:-.025em;line-height:1.08}
.c-rent p{color:var(--ink-mute);font-size:.95rem}
.c-rent .pic{flex:1;min-height:0;margin:0 12px 12px;border-radius:var(--ri);overflow:hidden;position:relative}
.c-rent .pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media(hover:hover){.c-rent:hover .pic img{transform:scale(1.05)}}

.c-about{grid-area:about;display:grid;gap:22px;align-content:start;padding:clamp(24px,3.4vw,52px)}
.c-about p{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.45;max-width:46ch;hyphens:manual}
.c-cta{grid-area:cta;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between;padding:clamp(28px,4.6vw,72px)}
.c-cta h2{font-size:clamp(2rem,5.4vw,5rem);font-weight:800;letter-spacing:-.045em;line-height:.98;max-width:15ch}
.c-cta .side{display:grid;gap:18px;justify-items:start;max-width:36ch}
.c-cta .side a.mail{font-weight:600}

/* ---------- подвал ---------- */
footer.f{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--ln);padding:28px 0;color:var(--mute);font-size:.9rem}
footer.f .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer.f nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer.f a{text-decoration:none}
footer.f .f-ct{display:flex;align-items:center;gap:16px}
footer.f .yt{display:flex;color:var(--mute)}
footer.f .yt svg{width:24px;height:24px}
footer.f .legal{flex-basis:100%;font-size:.82rem}
@media(hover:hover){footer.f a:hover{color:var(--tx)}}
footer.f nav a[aria-current]{color:var(--tx)}

/* ---------- внутренние страницы: общее ---------- */
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--mute);padding:28px 0 0}
.crumbs a{text-decoration:none}
@media(hover:hover){.crumbs a:hover{color:var(--tx)}}
.page-h{padding:clamp(32px,5vw,72px) 0 clamp(28px,4vw,56px)}
.page-h h1{font-size:clamp(1.7rem,4.4vw,3.6rem);max-width:19em;line-height:1.04}
.page-h .lead{margin-top:20px;max-width:56ch;color:var(--mute);font-size:1.1rem}
.stack{display:grid;gap:var(--gap)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:clamp(56px,8vw,112px) 0 20px}
.sec-h h2{font-size:clamp(1.6rem,3vw,2.4rem)}

/* проза: текстовые блоки Wix */
.prose{padding:clamp(20px,3vw,44px);font-size:1.04rem;line-height:1.65}
.prose>*{max-width:72ch}
.prose>*+*{margin-top:1em}
.prose h1,.prose h2,.prose h3{font-weight:700;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;hyphens:manual;overflow-wrap:anywhere}
.prose h1{font-size:clamp(1.6rem,3vw,2.4rem)}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.prose h3{font-size:1.3rem}
.prose h4,.prose h5,.prose h6{font-size:1.04rem;font-weight:600;line-height:1.4;margin-bottom:0}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose a{color:var(--acc-text);text-decoration-color:rgba(var(--acc-text-rgb),.4);overflow-wrap:anywhere}
@media(hover:hover){.prose a:hover{text-decoration-color:currentColor}}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose li>p{margin:0}
.prose strong{font-weight:650}
.prose p:empty,.prose p:has(>br:only-child){display:none}
.prose table{border-collapse:collapse;width:100%;max-width:none;display:block;overflow-x:auto}
.prose td,.prose th{hyphens:manual;min-width:96px;border:1px solid var(--ln2);padding:8px 12px;text-align:left}
.card.light .prose a{color:var(--acc)}

/* ссылки-карточки хабов (услуги, оборудование) */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--gap)}
.hub-card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:var(--pd);min-height:180px;text-decoration:none;color:inherit;transition:background-color .2s}
@media(hover:hover){.hub-card:hover{background:var(--pn2)}}
.hub-card.haspic{padding-top:0}
.hub-card .ph{margin:0 calc(-1*var(--pd));aspect-ratio:16/10;overflow:hidden;border-radius:var(--rc) var(--rc) 0 0;background:var(--pn2)}
.hub-card .ph img{display:block;width:100%;height:100%;object-fit:cover}
/* 9D.5: on desktop the photo shows up on hover (like the Wix cards); touch sees it right away */
@media(hover:hover){.hub-card .ph img{opacity:0;transform:scale(1.06);transition:opacity .22s var(--ease),transform .22s var(--ease)}
  .hub-card:hover .ph img,.hub-card:focus-within .ph img{opacity:1;transform:none}}
@media(hover:hover) and (prefers-reduced-motion:reduce){.hub-card .ph img{transition:none;transform:none}}
.hub-card .txt{display:grid;gap:6px}
.hub-card .txt>*{margin:0;font-size:1.15rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere;hyphens:manual}
.hub-card .txt a{text-decoration:none}
.hub-card .go{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:.9rem;font-weight:600}
.hub-card .go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
@media(hover:hover){.hub-card:hover .go{color:var(--tx)}}
@media(hover:hover){.hub-card:hover .go svg{transform:translateX(4px)}}
.hub-note{padding:clamp(20px,3vw,44px)}

/* ---------- 404 ---------- */
.nf-code{font:700 clamp(4rem,14vw,9rem)/1 var(--mono);color:var(--acc);letter-spacing:-.04em;margin:0 0 12px}
.nf-find{flex:none;width:100%;max-width:520px;margin:0 0 clamp(28px,4vw,48px)}
.nf-find span{flex:1}

/* ---------- кейс ---------- */
.shots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.shots .card{padding:10px}
.shots img{width:100%;height:auto;border-radius:var(--ri)}
.shots .s-a{grid-column:1/6;grid-row:1/3}.shots .s-b{grid-column:6/13}.shots .s-c{grid-column:6/9}
.shots .s-c img{width:auto;max-width:100%}
.shots .s-cta{grid-column:9/13;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:var(--pd)}
.shots .s-cta h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.shots.n1{grid-template-columns:minmax(0,1fr)}
.shots.n1 .card{grid-column:1/-1;grid-row:auto}
.shots.n1 img{width:auto;max-width:100%;max-height:min(80vh,820px);margin:0 auto}
.shots.grid .card{grid-column:span 4;grid-row:auto}
.shots.grid .card:first-child{grid-column:span 8}
.shots .sq{width:100%;aspect-ratio:auto}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:var(--gap)}
.more .mc:first-child{grid-column:span 2}
.more .mc:first-child .th{aspect-ratio:8/3}
a.card.mc,.mc{padding:10px;display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit}
.mc .th{position:relative;aspect-ratio:4/3;border-radius:var(--ri);overflow:hidden}
.mc .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mc b{display:block;font-weight:600;line-height:1.3;padding:0 6px;overflow-wrap:anywhere}
.mc em{padding:0 6px 6px;margin:0}
.case-cta{padding:clamp(40px,6vw,88px) 0 0}
.case-cta .card{padding:clamp(24px,4vw,56px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.case-cta h2{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:800;letter-spacing:-.04em}

/* видео */
.vid{position:relative;padding:10px}
.vid .frame{position:relative;aspect-ratio:16/9;border-radius:var(--ri);overflow:hidden;background:var(--bg)}
.vid iframe,.vid video,.vid .frame>img,.vid .frame>button{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid video,.vid .frame>img{object-fit:cover}
.vid .play{display:flex;align-items:center;justify-content:center;background:linear-gradient(0deg,rgba(9,11,14,.55),rgba(9,11,14,.15));border:0;cursor:pointer;padding:0}
.vid .play i{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--acc);color:var(--on-acc);transition:transform .25s var(--ease),background-color .2s}
.vid .play svg{width:26px;height:26px;margin-left:3px}
@media(hover:hover){.vid .play:hover i{transform:scale(1.08);background:var(--acc-hi)}}
.vid .play span{position:absolute;left:16px;bottom:14px;font-size:.85rem;color:var(--tx);opacity:.85}
.vid .frame.nopic{background:linear-gradient(135deg,var(--pn2),var(--bg))}

/* ---------- оборудование ---------- */
.eq-hero{margin-top:20px;min-height:clamp(260px,32vw,400px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,3vw,44px);view-transition-name:eq}
.eq-hero .ph img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:brightness(.75)}
.eq-hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--pn) 4%,rgba(21,25,32,.6) 40%,rgba(21,25,32,.05) 80%),linear-gradient(0deg,rgba(13,16,20,.6),transparent 50%)}
.eq-hero h1{font-size:clamp(2.4rem,9vw,7.6rem);font-weight:800;letter-spacing:-.05em;line-height:.9;max-width:100%}
.eq-hero.nopic{min-height:clamp(200px,24vw,300px);background:linear-gradient(135deg,var(--pn2),var(--pn))}
.eq-hero .cta{margin-top:24px}
/* 9D.5: services reuse the equipment header; their h1 are long sentences, so a smaller size */
.eq-hero.svc h1{font-size:clamp(1.9rem,5.2vw,4.4rem);letter-spacing:-.035em;line-height:1;max-width:18em}
.eq-hero.svc+.stack,.eq-hero.svc+.contact{margin-top:var(--gap)}
.eq{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--gap);align-items:start;margin-top:var(--gap)}
.cats{position:sticky;top:84px;padding:0}
.cats summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px var(--pd);font-weight:700;letter-spacing:-.01em;min-height:56px}
.cats summary::-webkit-details-marker{display:none}
.cats summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.cats[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.cats .in{padding:0 12px 12px}
.cats input{width:100%;min-height:44px;padding:0 14px;background:var(--bg);border:1px solid var(--ln2);border-radius:999px;color:var(--tx);font:inherit;font-size:16px}
.cats input::placeholder{color:var(--mute)}
.cats ul{list-style:none;margin:10px 0 0;padding:0;max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2c333e transparent}
.cat{display:block;width:100%;text-align:left;text-decoration:none;padding:10px 12px;border-radius:10px;font-size:.92rem;line-height:1.3;color:var(--mute);min-height:40px;transition:background-color .15s,color .15s;overflow-wrap:anywhere}
@media(hover:hover){.cat:hover{background:var(--pn2);color:var(--tx)}}
.cat[aria-current]{background:var(--tx);color:var(--ink);font-weight:600}
.cats .empty{padding:14px 12px 6px;color:var(--mute);font-size:.9rem}
.cats .empty a{color:var(--tx)}
.groups{display:grid;gap:var(--gap);min-width:0}
.gcard{padding:clamp(16px,2vw,28px)}
.gcard h2{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em;margin-bottom:clamp(16px,2vw,24px);max-width:24ch}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(110px,12vw,180px);gap:10px}
.gal figure{margin:0;overflow:hidden;border-radius:var(--ri);background:var(--pn2);position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;font-size:.8rem;line-height:1.3;background:linear-gradient(0deg,rgba(9,11,14,.85),transparent)}
@media(hover:hover){.gal figure:hover img{transform:scale(1.05)}}
.gal .big{grid-column:span 2;grid-row:span 2}
.gal:not(.rev):not(.flat) figure:nth-child(4){grid-column:3/5}
.gal.rev .big{grid-column:3/5;grid-row:1/3}
.gal.rev figure:nth-child(2){grid-column:1/2}
.gal.one{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
.gal.one figure{grid-column:1/-1;grid-row:auto}
.gal.one img{height:auto;width:auto;max-width:100%;max-height:min(70vh,640px);margin:0 auto}
.gal.two .big{grid-column:span 2}
.gal.flat{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));grid-auto-rows:clamp(130px,14vw,190px)}
.gal.flat figure,.gal.flat figure:nth-child(n){grid-column:auto;grid-row:auto}
.ask{padding:clamp(20px,3vw,32px)!important;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.ask p{font-weight:600;font-size:1.1rem}
.empty-note{padding:clamp(20px,3vw,32px);color:var(--mute)}

/* портфолио-хаб: сетка работ */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--gap)}
.works .mc:first-child{grid-column:auto}
.works .mc:first-child .th{aspect-ratio:4/3}
.works .mc .th.nopic{background:none}

/* ---------- блог: пост ---------- */
.post-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--mute);font-size:.9rem;margin-top:20px}
.post-meta i{font-style:normal;font-family:var(--mono)}
.post-cover{margin-top:0;padding:10px}
.post-cover img{width:100%;border-radius:var(--ri);max-height:70vh;object-fit:cover}

/* ---------- форма и контакты ---------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:start}
.form{padding:clamp(20px,3vw,40px);display:grid;gap:16px}
.form h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.field{display:grid;gap:6px}
.field label{font-size:.85rem;color:var(--mute)}
.field input,.field textarea{width:100%;min-height:48px;padding:12px 16px;background:var(--bg);border:1px solid var(--ln2);border-radius:14px;color:var(--tx);font:inherit;font-size:16px;transition:border-color .2s}
.field textarea{min-height:130px;resize:vertical}
@media(hover:hover){.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.28)}}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.field [aria-invalid=true]{border-color:#ff7b7b}
.field .err{font-size:.82rem;color:#ff9a9a}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.85rem;color:var(--mute);line-height:1.4}
.consent a{color:var(--tx);text-decoration:underline;text-underline-offset:2px}
.consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--acc)}
.form .status{min-height:1.4em;font-size:.92rem}
.form .status.ok{color:#8fe3a4}.form .status.bad{color:#ff9a9a}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mapcard{padding:clamp(20px,3vw,40px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;grid-column:1/-1}
.mapcard p{font-weight:600;font-size:1.1rem}

/* ---------- палитра поиска ⌘K ---------- */
dialog#pal{padding:0;border:1px solid var(--ln2);border-radius:var(--rc);background:rgba(21,25,32,.92);color:var(--tx);width:min(640px,calc(100vw - 24px));max-height:min(560px,calc(100dvh - 24px));margin:12vh auto auto;overflow:hidden;box-shadow:0 40px 120px -20px rgba(0,0,0,.8);
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
dialog#pal[open]{display:flex;flex-direction:column}
dialog#pal::backdrop{background:rgba(5,7,10,.6);backdrop-filter:blur(3px)}
.pal-in{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--ln)}
.pal-in svg{width:18px;height:18px;color:var(--mute);flex:none}
.pal-in input{flex:1;min-width:0;min-height:60px;background:none;border:0;color:var(--tx);font:inherit;font-size:1.1rem;outline:none}
.pal-in input::placeholder{color:var(--mute)}
#res{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1;min-height:0}
#res .g{padding:14px 12px 6px;font-size:.8rem;color:var(--mute);font-weight:600}
#res li[role=option]{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;min-height:46px;border-radius:12px;cursor:pointer}
#res li[role=option] span:first-child{overflow-wrap:anywhere;padding:8px 0}
#res li[aria-selected=true]{background:var(--pn2)}
#res li .n{font-size:.8rem;color:var(--mute);white-space:nowrap}
#res .none{padding:24px 14px;color:var(--mute)}
.pal-h{display:flex;gap:18px;padding:12px 18px;border-top:1px solid var(--ln);font-size:.8rem;color:var(--mute)}

/* ---------- просмотр фото галереи (app.js) ---------- */
.gal figure.zoom{cursor:zoom-in}
dialog.lb{padding:0;border:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(5,7,10,.97);color:var(--tx);overflow:hidden}
dialog.lb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
dialog.lb::backdrop{background:transparent}
html:has(dialog.lb[open]){overflow:hidden}
.lb-ph{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:56px clamp(8px,6vw,80px) 8px;touch-action:pan-y pinch-zoom}
.lb-ph img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--ri);user-select:none;-webkit-user-select:none}
.lb-c{margin:0;padding:6px 20px 0;max-width:900px;text-align:center;font-size:.9rem;color:var(--mute)}
.lb-i{padding:8px 0 16px;font:400 .8rem var(--mono);color:var(--mute)}
.lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--ln2);border-radius:50%;background:rgba(21,25,32,.7);color:var(--tx);cursor:pointer}
.lb button svg{width:20px;height:20px}
.lb-x{top:12px;right:12px}
.lb-p,.lb-n{top:50%;transform:translateY(-50%)}
.lb-p{left:12px}.lb-n{right:12px}
.lb button[hidden]{display:none}
@media(hover:hover){.lb button:hover{background:var(--pn2);border-color:rgba(255,255,255,.28)}}
@media(max-width:700px){.lb-p,.lb-n{top:auto;bottom:8px;transform:none}.lb-ph{padding-inline:0}}

/* ---------- движение ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-group(eq){animation-duration:.55s;animation-timing-function:var(--ease)}
@media(prefers-reduced-motion:no-preference){
  /* один момент: bento собирается при первом заходе в сессии */
  .boot .bento>.card{animation:asm .8s var(--ease) calc(var(--i,0)*70ms) both}
  @keyframes asm{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
  @supports (animation-timeline:view()){
    .c-hero .ph img,.c-hero .ph video{animation:par linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes par{to{transform:translateY(7%) scale(1.06)}}
  }
}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- планшет / телефон ---------- */
@media(max-width:1100px){
  .js .nv-bx{display:flex}
  .bar nav{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow:auto;background:var(--m-panel);border-bottom:1px solid var(--m-line);padding:4px 20px 24px}
  .js .bar.nv-mo nav{display:block}
  .nv{display:block;height:auto}
  .nv>li{flex-wrap:wrap;height:auto;border-bottom:1px solid var(--m-line)}
  .bar .nv>li>a{flex:1;padding:16px 0;font-size:1rem;color:var(--m-tx)}
  .nv-t{width:52px;height:52px;margin:0}
  .nv-t svg{width:12px;height:12px}
  .nv-s,.nv-s.nv-cols{position:static;display:none;width:100%;min-width:0;columns:1;box-shadow:none;border:0;background:none;padding:0 0 12px}
  .nv-i.nv-on>.nv-s{display:block}
  .bar .nv .nv-s a{padding:11px 0 11px 14px;font-size:.92rem;border-radius:0}
  .nv .nv-tel{display:block;border-bottom:0}
  .bar .nv .nv-tel a{display:block;padding:18px 0 0;font-size:1.05rem;font-variant-numeric:tabular-nums}
}
@media(max-width:480px){.c-hero h1{font-size:clamp(1.4rem,7vw,1.9rem)}.c-hero h1:has(.k){font-size:clamp(2.2rem,13vw,3rem)}} /* «ТРИПЛАН» и подпись под ним — каждая в одну строку на 390–480px */
@media(max-width:1000px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;
    grid-template-areas:"hero hero" "work work" "map map" "car con" "rent rent" "vr dec" "about about" "cta cta"}
  .hero-bar{display:block}
  .c-work{max-height:440px;contain:none}
  .tile{aspect-ratio:1/1}.c-map{aspect-ratio:16/10}.tile.c-vr,.tile.c-dec{aspect-ratio:1/1}
  .c-rent .pic{flex:none;aspect-ratio:16/10;margin:0 12px 12px}
  .c-rent .pic img{object-position:50% 40%}
  .tile figcaption{padding:36px 12px 12px;font-size:.8rem}.tile figcaption b{font-size:.88rem}
  .shots .card{grid-column:1/-1!important;grid-row:auto!important}
  .shots .s-c{max-width:300px}
  .eq{grid-template-columns:1fr}
  .cats{position:relative;top:auto}
  .contact{grid-template-columns:1fr}
}
@media(max-width:700px){
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more .mc:first-child{grid-column:1/-1}
  .mc b{font-size:.88rem}
  .find span{display:none}
  .find{flex:none;margin-left:auto;padding:0 12px;max-width:none}
  .find .k2{display:none}
  .tel{font-size:.85rem}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .gal figure{aspect-ratio:3/2}
  .gal .big,.gal.rev .big,.gal.two .big{grid-column:1/-1;grid-row:auto}
  .gal.rev figure:nth-child(2){grid-column:auto}
  .gal:not(.rev):not(.flat) figure:nth-child(4){grid-column:1/-1}
  .gal.flat{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .gal.flat figure:last-child:nth-child(odd){grid-column:1/-1}
  dialog#pal{margin-top:8vh}
  .works{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .bar .wrap{gap:12px}
  .brand{margin-right:0;gap:8px}
  .brand-m{height:26px}
  .brand-w{height:11px}
  .bar .tel{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none}
  .bar .tel span{display:none}
  .tel-i{display:block}
  .lang{margin-left:0}
}

/* ---------- добавки по шаблонам ---------- */
.vid .vh{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;padding:8px 8px 14px;max-width:70ch;overflow-wrap:anywhere;hyphens:manual}
.hub-card .go::after{content:"";position:absolute;inset:0}
.ask:has(>a:only-child){justify-content:flex-start}
.btn.ink{background:var(--ink);color:var(--paper)}
.shots figure{margin:0}
.lang{font:600 .8rem/1 var(--mono);text-decoration:none;padding:7px 9px;border:1px solid var(--ln2);border-radius:8px;color:var(--mute);margin-left:12px;flex:none}
@media(hover:hover){.lang:hover{color:inherit;border-color:rgba(255,255,255,.28)}}