/* гліф — сторінки кейсів. Десктоп: пропорційна копія фрейму 1920px з Figma,
   кожен відступ = calc(<figma px> * var(--u)). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}

:root{
  --ink:#414141;         /* єдиний колір тексту: як на головній */
  --paper:#F1F1F1;
  --card:#E3E3E3;
  --k:1;                 /* масштаб десктопу відносно макета 1920 (1 — на всю ширину) */
  --u:calc(min(100vw, 1920px) / 1920 * var(--k));
  --pad:calc(20 * var(--u));
  --ease:cubic-bezier(.2,.75,.15,1);
  --cond:"Arial Narrow","Archivo Narrow","Helvetica Neue Condensed",Arial,sans-serif;
  --inv:#B0B0B0;         /* інверсія шапки: над тлом #F1F1F1 дає фірмовий #414141 */
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-width:1024px;background:var(--paper);color:var(--ink);font-family:Inter,"Helvetica Neue",Arial,system-ui,sans-serif;line-height:1.2;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
img,svg,video{display:block}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:calc(3 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u))}

.page{position:relative;max-width:calc(1920 * var(--u));margin-inline:auto;padding-inline:var(--pad)}   /* колонка в масштабі --k по центру */
.abs{position:absolute}

/* Заголовки — Arial Narrow Bold (вузький гротеск із макета).
   Тексти — Inter. Figma обрізає боксы Inter по висоті великої літери — компенсуємо. */
.t132,.t114,.t102,.t94,.t81,.t52,.t34,.t26,.t16{font-family:var(--cond);font-weight:700;font-stretch:condensed}
.t132{font-size:calc(132 * var(--u));line-height:.9;letter-spacing:-.07em}
.t132.lead{line-height:.8;letter-spacing:-.09em}
.t114{font-size:calc(114 * var(--u));line-height:1;letter-spacing:-.09em}
.t102{font-size:calc(102 * var(--u));line-height:.9;letter-spacing:-.07em}
.t94{font-size:calc(94 * var(--u));line-height:1;letter-spacing:-.09em}
.t81{font-size:calc(81 * var(--u));line-height:.8;letter-spacing:-.09em}
.t52{font-size:calc(52 * var(--u));line-height:.9;letter-spacing:-.07em}
.t34{font-size:calc(34 * var(--u));line-height:calc(30 * var(--u));letter-spacing:-.05em}
.t26{font-size:calc(26 * var(--u));line-height:calc(30 * var(--u));letter-spacing:-.05em}
.t16{font-size:calc(16 * var(--u));line-height:calc(30 * var(--u));letter-spacing:-.05em}
.tight{letter-spacing:-.09em}
/* Arial — службові підписи на головній */
.a24,.a24b{font-family:Arial,Helvetica,sans-serif;font-size:calc(24 * var(--u));line-height:1}
.a24{font-weight:400;letter-spacing:-.02em}
.a24b{font-weight:700;letter-spacing:-.05em}
.a24.w5{letter-spacing:-.05em}
.a15{font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:calc(15 * var(--u));line-height:1;letter-spacing:-.02em}
.hm-note-sm{white-space:pre-line}
.t25,.t19{line-height:1;letter-spacing:-.05em;margin-top:-.137em}
.t25{font-weight:600;font-size:calc(25.4 * var(--u))}
.t19{font-weight:700;font-size:calc(19 * var(--u));letter-spacing:0}
.i{font-weight:700;font-size:calc(34 * var(--u));line-height:calc(30 * var(--u));letter-spacing:-.05em;margin-top:-.137em}
.body{font-weight:500;font-size:calc(20 * var(--u));line-height:1.2;margin-top:-.237em;text-wrap:pretty}

/* ——— ілюстрації: «кипіння» на ховері, як у КП ——— */
.ill svg{width:100%;height:auto;transform-origin:50% 60%}
@media (hover:hover) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .ill:hover svg{animation:boil .42s steps(1,end) infinite}
}
@keyframes boil{
  0%{transform:rotate(-1.4deg) translate(1px,0)}
  33%{transform:rotate(1deg) translate(-1px,1px)}
  66%{transform:rotate(-.3deg) translate(0,-1px) scale(1.012)}
}

/* ——— шапка: нижча, прозора, з інверсією поверх контенту ——— */
.top{position:sticky;top:0;z-index:30;height:calc(156 * var(--u));background:transparent;
     mix-blend-mode:difference;color:var(--inv)}
.logo{left:0;top:calc(36 * var(--u));width:calc(150 * var(--u))}
.tagline{left:calc(180 * var(--u));top:calc(58 * var(--u))}
.figure{right:0;top:calc(14 * var(--u));width:calc(70 * var(--u))}
.hm-nav{left:auto!important;right:0}

/* ——— інтро ——— */
.intro{position:relative;height:calc(653 * var(--u))}
.intro .title{left:0;top:calc(144 * var(--u));white-space:nowrap}
.intro .year{right:0;top:calc(144 * var(--u))}
.intro .sector{top:calc(136 * var(--u));white-space:nowrap}
.intro .services{left:calc(82 * var(--u));top:calc(294 * var(--u));white-space:nowrap}
.intro .i{left:calc(829 * var(--u));top:calc(392 * var(--u))}
.intro .desc{left:calc(909 * var(--u));top:calc(392 * var(--u));width:calc(675 * var(--u))}

/* назва проєкту з посиланням на сайт бренду */
.title .ext{display:inline-block;color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 max(2px,calc(6 * var(--u))) no-repeat;
  transition:background-size .5s var(--ease)}
.title .ext::after{content:"↗";font-size:.4em;vertical-align:super;margin-left:.06em;
  opacity:0;transition:opacity .35s var(--ease)}
@media (hover:hover) and (min-width:1024px){
  .title .ext:hover{background-size:100% max(2px,calc(6 * var(--u)))}
  .title .ext:hover::after{opacity:.55}
}
.title .ext:focus-visible::after{opacity:.55}

/* ——— горизонтальні каруселі від скролу ——— */
.rails{display:grid;gap:calc(23 * var(--u));width:100vw;margin-left:calc(50% - 50vw)}
.rail{height:calc(753 * var(--u));overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y}
.rail.drag,.rail.drag .shot button{cursor:grabbing}
.track{display:flex;gap:calc(23 * var(--u));height:100%;width:max-content;padding-inline:var(--pad);will-change:transform}
.shot{position:relative;flex:none;height:100%;overflow:hidden;background:var(--card);border-radius:calc(20 * var(--u))}
.shot button{display:block;height:100%;cursor:zoom-in}
.shot img{height:100%;width:auto;transition:transform 1.4s var(--ease)}
.shot video{display:block;height:100%;width:auto;transition:transform 1.4s var(--ease)}
.js .rail .shot{clip-path:inset(100% 0 0 0 round calc(20 * var(--u)));transition:clip-path 1.2s var(--ease)}   /* усі кадри разом */
.js .rail .shot img,.js .rail .shot video{transform:scale(1.18)}
.rails.in .shot{clip-path:inset(0 0 0 0 round calc(20 * var(--u)))}
.js .rails.in .shot img,.js .rails.in .shot video{transform:none}

/* ——— візуальна мова ——— */
.lang{position:relative;height:calc(235 * var(--u))}
.lang .i{left:calc(707 * var(--u));top:calc(50 * var(--u))}
.lang .desc{left:calc(787 * var(--u));top:calc(50 * var(--u));width:calc(733 * var(--u))}
.lang .label{left:0;top:calc(157 * var(--u))}

/* ——— медіа-блоки: фото / відео / анімація ——— */
.media{display:flex;gap:calc(28 * var(--u));align-items:flex-start}
/* нижні блоки в один ряд за пропорціями файлів: однакова висота, ширина ділиться як ширини кадрів — нічого не ріжеться */
.media>.tile{flex:var(--g,1) 1 0;min-width:0;height:auto;aspect-ratio:var(--ar,925/960)}
/* тексти кейсу течуть: довгий опис розсуває блок, а не налазить на візуали */
@media (min-width:1024px){
  .intro{height:auto;min-height:calc(653 * var(--u));padding:calc(392 * var(--u)) 0 calc(90 * var(--u))}
  .intro .desc{position:relative;left:auto;top:auto;margin:0 0 0 calc(909 * var(--u))}
  .lang{height:auto;min-height:calc(235 * var(--u));padding:calc(50 * var(--u)) 0 calc(90 * var(--u))}
  .lang .desc{position:relative;left:auto;top:auto;margin:0 0 0 calc(787 * var(--u))}
}
.tile{position:relative;display:block;width:100%;height:calc(960 * var(--u));border-radius:calc(20 * var(--u));overflow:hidden;background:var(--bg,var(--card));isolation:isolate}
.tile .cover{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.4s var(--ease)}
.tile-btn{display:block;width:100%;height:100%;cursor:zoom-in}
.js .tile{clip-path:inset(6% 6% 6% 6% round calc(20 * var(--u)));opacity:0;transition:clip-path 1.2s var(--ease) var(--d,0ms),opacity .8s var(--ease) var(--d,0ms)}
.js .tile .cover{transform:scale(1.12)}
.tile.in{clip-path:inset(0 0 0 0 round calc(20 * var(--u)));opacity:1}
.js .tile.in .cover{transform:none}
.tile.anim{cursor:pointer}
.tile .hint{position:absolute;left:calc(28 * var(--u));bottom:calc(26 * var(--u));font-weight:700;font-size:calc(16 * var(--u));letter-spacing:-.02em;color:var(--hint,var(--ink));opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media (hover:hover) and (min-width:1024px){.tile.anim:hover .hint,.posters-tile:hover .hint,.tile.vid:hover .hint{opacity:.6;transform:none}}
.tile.vid{cursor:pointer}
/* відео з відступами від країв контейнера (контейнер лишається залитим) */
.tile.vid.fit{display:grid;place-items:center}
.tile.vid.fit .cover{width:auto;max-width:86%;height:88%;object-fit:contain}
.tile.vid.paused .hint{opacity:.8;transform:none}

/* Архітектура Безпеки: знак збирається з модулів */
.ab-logo{position:absolute;left:calc(141 * var(--u));top:calc(383 * var(--u));width:calc(629 * var(--u));height:auto;overflow:visible}
.ab-logo path{transform-box:fill-box;transform-origin:center;transition:transform 1.1s var(--ease) calc(var(--i) * 70ms),opacity .7s var(--ease) calc(var(--i) * 70ms)}
.js .tile:not(.in) .ab-logo .mk{opacity:0;transform:translate(calc(var(--x) * var(--u)),calc(var(--y) * var(--u))) rotate(var(--r))}
.js .tile:not(.in) .ab-logo .tx{opacity:0;transform:translateY(calc(30 * var(--u)))}
@media (hover:hover) and (min-width:1024px){
  .anim-ab.in:hover .ab-logo .mk{transform:translate(calc(var(--hx) * var(--u)),calc(var(--hy) * var(--u)));transition-delay:0ms}
}

/* Архітектура Безпеки: бейджі-постери */
.posters{position:absolute;left:calc(84 * var(--u));top:calc(202 * var(--u));display:flex;gap:calc(30 * var(--u))}
.pw{transition:transform .9s var(--ease)}
.poster{display:block;width:calc(363 * var(--u));height:calc(567 * var(--u));padding:calc(8.4 * var(--u));border:max(1px,calc(.85 * var(--u))) solid #000;border-radius:calc(33.7 * var(--u));cursor:zoom-in;animation:float 7s ease-in-out infinite}
.pw:nth-child(2) .poster{animation-delay:-3.5s}
.poster img{width:100%;height:100%;object-fit:cover;border-radius:calc(25.5 * var(--u))}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(-16 * var(--u))) rotate(-1.2deg)}}
@media (hover:hover) and (min-width:1024px){
  .posters-tile:hover .pw:first-child{transform:translateX(calc(-26 * var(--u))) rotate(-5deg)}
  .posters-tile:hover .pw:last-child{transform:translateX(calc(26 * var(--u))) rotate(5deg)}
}

/* Select Fishing: знак-стрілка «шукає ціль» */
.sel{position:absolute;left:calc(327 * var(--u));top:calc(389 * var(--u));width:calc(286 * var(--u));height:calc(239 * var(--u));transition:transform 1.3s var(--ease),opacity .8s var(--ease)}
.js .tile:not(.in) .sel{opacity:0;transform:scale(.35) rotate(-70deg)}
.sel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sel .core{filter:drop-shadow(0 0 calc(40 * var(--u)) rgba(255,0,67,.45));animation:aim 5s var(--ease) infinite;transform-origin:52% 45%}
.sel .ping{opacity:0;transform-origin:52% 45%;animation:ping 3.2s cubic-bezier(.2,.6,.3,1) infinite}
.sel .ping.p2{animation-delay:1.6s}
@keyframes aim{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-9deg) scale(1.04)}55%{transform:rotate(4deg) scale(.98)}75%{transform:rotate(0) scale(1.02)}}
@keyframes ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
@media (hover:hover) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .anim-sel:hover .core{animation:boil .3s steps(1,end) infinite}
}

/* ——— інші проєкти ——— */
.others{position:relative;height:calc(636 * var(--u))}
.others-title{left:0;top:calc(100 * var(--u))}
.strip-nav{right:0;top:calc(100 * var(--u));display:flex;gap:calc(10 * var(--u))}
.arr{width:calc(64 * var(--u));height:calc(64 * var(--u));margin-top:calc(-2 * var(--u));border:calc(2 * var(--u)) solid var(--ink);border-radius:50%;font-weight:700;font-size:calc(28 * var(--u));line-height:1;display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s}
@media (hover:hover) and (min-width:1024px){.arr:hover{background:var(--ink);color:var(--paper)}}
.arr[disabled]{opacity:.25;pointer-events:none}
.strip{position:absolute;top:calc(233 * var(--u));left:calc(50% - 50vw);width:100vw;height:calc(403 * var(--u));display:flex;gap:calc(23 * var(--u));padding-inline:var(--pad);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;user-select:none}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing}
.strip.drag .card{pointer-events:none}
.card{position:relative;flex:none;height:100%;overflow:hidden;background:var(--card);border-radius:calc(20 * var(--u))}
.card img,.card video{height:100%;width:auto;transition:transform 1s var(--ease)}
.card-empty{display:grid;place-items:center;height:100%;width:calc(716 * var(--u));
  padding:calc(20 * var(--u));text-align:center;background:var(--card);opacity:.55}
.card .lbl{position:absolute;left:calc(16 * var(--u));bottom:calc(16 * var(--u));display:flex;align-items:baseline;gap:calc(14 * var(--u));padding:calc(12 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u));background:var(--paper);font-weight:700;font-size:calc(26 * var(--u));letter-spacing:-.04em;line-height:1;transform:translateY(calc(100% + 20 * var(--u)));transition:transform .6s var(--ease)}
.card .lbl em{font-style:normal;font-weight:600;font-size:.62em;opacity:.55}
.card .lbl i{font-style:normal;transition:transform .5s var(--ease)}
@media (hover:hover) and (min-width:1024px){
  .card:hover .lbl{transform:none}
  .card:hover .lbl i{transform:translateX(calc(6 * var(--u)))}
}
.card:focus-visible .lbl{transform:none}

/* ——— футер ——— */
.foot{position:relative;height:calc(379 * var(--u))}
.foot .c{left:0;top:calc(230 * var(--u))}
.foot .m{right:0;top:calc(230 * var(--u))}
.foot .mark{left:calc(613 * var(--u));top:calc(100 * var(--u));width:calc(653 * var(--u))}
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 max(1px,calc(2 * var(--u))) no-repeat;padding-bottom:.08em;transition:background-size .45s var(--ease)}
@media (hover:hover) and (min-width:1024px){.ul:hover{background-size:100% max(1px,calc(2 * var(--u)))}}

/* ——— індекс кейсів ——— */
.works{padding-top:calc(54 * var(--u));padding-bottom:calc(60 * var(--u))}
.works h1{margin-bottom:calc(120 * var(--u))}
.work{position:relative;display:grid;grid-template-columns:calc(1320 * var(--u)) minmax(0,1fr) auto;align-items:start;white-space:nowrap;padding-block:calc(46 * var(--u)) calc(40 * var(--u));border-top:calc(2 * var(--u)) solid var(--ink)}
.work:last-child{border-bottom:calc(2 * var(--u)) solid var(--ink)}
.work .wt{transition:transform .6s var(--ease)}
.work .t16{margin-top:calc(4 * var(--u))}
.work .wy{text-align:right}
@media (hover:hover) and (min-width:1024px){.work:hover .wt{transform:translateX(calc(24 * var(--u)))}}
.peek{position:fixed;left:0;top:0;z-index:30;width:calc(520 * var(--u));pointer-events:none;opacity:0;transform:scale(.9);transform-origin:var(--ox,0) var(--oy,0);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.peek.on{opacity:1;transform:none}   /* стоїть збоку від курсора, не під ним */
.peek img,.peek video{width:100%;height:auto;border-radius:calc(12 * var(--u))}

/* ——— лайтбокс ——— */
.lb{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(12,12,12,.94);color:var(--paper);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.lb.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.lb img{max-width:86vw;max-height:84vh;width:auto;height:auto;transform:scale(.96);transition:transform .5s var(--ease),opacity .25s}
.lb.on img{transform:none}
.lb img.swap{opacity:0}
.lb-close{position:absolute;top:calc(28 * var(--u));right:calc(32 * var(--u))}
.lb-count{position:absolute;bottom:calc(30 * var(--u));left:50%;transform:translateX(-50%)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:calc(80 * var(--u));height:calc(80 * var(--u));border:calc(2 * var(--u)) solid currentColor;border-radius:50%;font-size:calc(30 * var(--u));display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.lb-prev{left:calc(32 * var(--u))}
.lb-next{right:calc(32 * var(--u))}
.lb-prev:hover,.lb-next:hover{background:var(--paper);color:#000}
.lb :focus-visible{outline-color:var(--paper)}

/* ——— мікроанімації появи ——— */
[data-r]{transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.js [data-r]{opacity:0;transform:translateY(calc(26 * var(--u)))}
.js [data-r].in{opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:0 .12em .26em;margin:0 -.12em -.26em}   /* запас, щоб маска не різала краї літер і хвостики */
[data-split] .w>span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease) calc(var(--d,0ms) + var(--i) * 55ms)}
[data-split].in .w>span{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r],.js .tile,.js .rail .shot{opacity:1;transform:none;clip-path:none}
  [data-split] .w>span{transform:none}
}

/* ——————————————————————————————————————————————
   Головна сторінка (макет 1918×5575, тло #DEDEDE, текст #414141)
   —————————————————————————————————————————————— */
body.home{--paper:#DEDEDE;--card:#C9C9C9;--inv:#9D9D9D}
.hm{position:relative;height:calc(var(--h) * var(--u))}
.hm .ill svg{color:var(--ink)}
.top .ill svg{color:inherit}
.top .ill svg path{fill:currentColor}  /* дужки й фігурка мають fill="#414141" у самому svg */  /* знаки в шапці беруть --inv, інакше після difference вони світліші за текст */
.hm-tag{white-space:pre-line}
.hm-name{white-space:pre-line;text-transform:uppercase}
.hm-ph{object-fit:cover;width:100%;height:100%}
.hm-photo{perspective:calc(1100 * var(--u))}
.hm-photo .tilt{position:relative}
.hm-photo .hm-fx{position:absolute;inset:0;width:100%!important;height:100%!important}
.hm-photo img.hm-ph.fx-on{opacity:0}   /* під полотном шейдера лишається для розміру й alt */
.hm-photo .tilt{display:block;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(calc(var(--tx,0) * 1px),calc(var(--ty,0) * 1px),0);
  transform-origin:50% 60%;will-change:transform}
.hm-photo .hm-ph{filter:drop-shadow(calc(var(--sx,0) * 1px) calc(14 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.22))}
.js .hm-photo{opacity:0;transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms);transform:translateY(calc(30 * var(--u)))}
.hm-photo.in{opacity:1;transform:none}

/* шапка головної за макетом: лого 200, дужки 455, меню Arial Bold 52 */
@media (min-width:1024px){
  body.home .top{height:calc(240 * var(--u));pointer-events:none}
  body.home .top>*{pointer-events:auto}
}
.l30{line-height:calc(30 * var(--u))}

/* меню: слова; на ховері — темна плашка під словом (у шапці з difference це --inv + чорний текст) */
.hm-nav{display:flex;gap:calc(61 * var(--u))}
.hm-nav a{position:relative;display:block}
.hm .hm-nav .t52{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-stretch:normal;
  font-size:calc(52 * var(--u));line-height:.9;letter-spacing:-.07em}
.hm-nav a span{position:relative;z-index:0;display:block}
.hm-nav a span::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:calc(2 * var(--u));height:calc(50 * var(--u));
  background:var(--inv);visibility:hidden}
.hm-burger,.hm-mfig,.hm-serv-m,.hm-arrow{display:none}

/* клякса лежить під обличчями */
.hm-photo{z-index:2}

/* список робіт: лінії 5px на всю ширину, превʼю фіксоване справа */
.hm-row{position:absolute;left:calc(-20 * var(--u));right:calc(-20 * var(--u));height:calc(178 * var(--u));display:block;
  border-top:calc(5 * var(--u)) solid var(--ink)}
.hm-row:last-of-type{border-bottom:calc(5 * var(--u)) solid var(--ink)}
.hm-row .rt{position:absolute;z-index:0;left:calc(39 * var(--u));top:calc(18.5 * var(--u));white-space:nowrap}
.hm-row .rt::before{content:"";position:absolute;z-index:-1;left:0;right:-.07em;top:calc(6 * var(--u));height:calc(119 * var(--u));
  background:var(--ink);visibility:hidden}
.hm-row .ry{position:absolute;right:calc(20 * var(--u));top:calc(27.5 * var(--u))}
.hm-row .rs{position:absolute;left:calc(1206 * var(--u));bottom:calc(38 * var(--u));line-height:calc(30 * var(--u));white-space:pre-line}
.hm-row .rp{position:absolute;z-index:4;right:calc(20 * var(--u));top:calc(-76.5 * var(--u));width:calc(455 * var(--u));height:calc(256 * var(--u));
  overflow:hidden;background:var(--card);pointer-events:none;opacity:0;clip-path:inset(0 0 0 100%);
  transition:opacity .2s var(--ease),clip-path .55s var(--ease)}
.hm-row .rp img,.hm-row .rp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* послуги: кожен рядок — окремий блок, на ховері темна плашка */
.hm-serv span{position:relative;z-index:0;display:block;width:fit-content;line-height:1.1;letter-spacing:-.09em}
.hm-serv span::before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--u));right:-.09em;top:0;height:calc(140 * var(--u));
  background:var(--ink);visibility:hidden}
.hm-serv span.on{color:var(--paper)}
.hm-serv span.on::before{visibility:visible}
/* назва послуги на телефоні: один суцільний прямокутник навколо всіх рядків, із запасом під Й/Ї та нижні виноси —
   плашка по кожному рядку окремо перекривала літери сусіднього рядка */
.hm-serv-m h3 span{display:inline-block;padding:.1em .06em .04em;margin:-.1em -.06em -.04em}
.hm-serv-m h3 span.on{background:var(--ink);color:var(--paper)}
.hm-serv-note{white-space:pre-line}
.hm-note{white-space:pre-line}
.hm-wnote{white-space:pre-line}

/* CTA: звір → стрілка → «ознайомтесь детальніше!»; на ховері плашка й підпис */
.hm-arr svg{display:block;width:100%;height:auto;color:var(--ink)}
.hm-go{display:block;color:var(--ink)}
.hm-go::before{content:"";position:absolute;inset:0;background:#E92229;visibility:hidden}
.hm-go span{position:absolute;left:0;top:calc(17 * var(--u));width:100%;white-space:nowrap;text-transform:uppercase;line-height:.8;letter-spacing:-.07em}
.hm-go em{position:absolute;right:0;top:calc(143 * var(--u));width:calc(473 * var(--u));font-style:normal;text-align:right;
  color:var(--ink);opacity:0;transform:translateY(calc(10 * var(--u)));transition:opacity .35s var(--ease),transform .35s var(--ease)}

@media (hover:hover) and (min-width:1024px){
  .hm-nav a:hover span{color:#000}
  .hm-nav a:hover span::before{visibility:visible}
  .hm-row:hover{z-index:3}
  .hm-go:hover::before{visibility:visible}
  .hm-go:hover span{color:var(--paper)}
  .hm-go:hover em{opacity:1;transform:none}
}
@media (max-width:1023px){
  .hm-row .rp,.hm-arr{display:none}
  .hm-go{background:#E92229;color:var(--paper);padding:14px 12px 16px}
  .hm-go span{position:static;display:block;white-space:normal;margin-top:-.08em}
  .hm-go em{position:static;display:block;width:auto;margin-top:12px;opacity:1;transform:none;color:var(--paper);text-align:left}
}

/* ТиКиїв: синій блок з логотипом */
.brand-tile .tk-logo{position:absolute;left:calc(242 * var(--u));top:calc(441 * var(--u));width:calc(441 * var(--u));height:auto;transition:transform 1.2s var(--ease)}
.js .tile:not(.in) .brand-tile .tk-logo,.js .brand-tile:not(.in) .tk-logo{transform:translateY(calc(40 * var(--u)))}

/* футер головної */
.hm-foot .c{left:0;top:calc(130 * var(--u))}
.hm-foot .m{right:0;top:calc(130 * var(--u))}

/* ——————————————————————————————————————————————
   Адаптив: до 1024px координати макета вимикаються,
   секції стають звичайним вертикальним потоком
   —————————————————————————————————————————————— */
.grp{display:contents}

@media (max-width:1023px){
  :root{--u:.8;--pad:20px}
  body{min-width:0}

  .abs,.hm-row,.hm-row .rt,.hm-row .ry,.hm-row .rs,.hm-bar h2,.hm-cta .btn{
    position:static!important;left:auto!important;right:auto!important;top:auto!important;
    width:auto!important;height:auto!important}
  .grp{display:flex;flex-direction:column;gap:28px}

  /* типографіка */
  .t132{font-size:clamp(40px,7.4vw,72px)}
  .t114{font-size:clamp(38px,7vw,64px)}
  .t102{font-size:clamp(30px,5.6vw,54px)}
  .t94{font-size:clamp(34px,6.4vw,58px)}
  .t81{font-size:clamp(26px,4.6vw,44px)}
  .t52{font-size:clamp(20px,3.4vw,30px)}
  .t34{font-size:clamp(18px,2.6vw,26px);line-height:1.1}
  .t26{font-size:15px;line-height:1.2}
  .t16{font-size:13px;line-height:1.2}
  .a24,.a24b{font-size:15px;line-height:1.3}
  .a15{font-size:13px;line-height:1.35}
  .i,.body,.t25,.t19{margin-top:0}
  .i{font-size:20px;line-height:1.2}
  .body{font-size:15px}
  .t25{font-size:15px}
  .t19{font-size:13px}

  /* шапка */
  .top{position:static;height:auto!important;display:flex;align-items:center;flex-wrap:wrap;
       gap:12px;padding-block:14px 10px}
  .top::after{display:none}
  .logo{width:96px!important}
  .hm-brackets{display:none!important}
  .hm-tag{white-space:normal}
  .tagline{margin-left:auto;text-align:right}
  .figure{width:44px!important}

  /* інтро кейсу */
  .intro{height:auto!important;display:grid;gap:10px;padding-block:6px 22px}
  .intro .title{order:1;white-space:normal}
  .intro .year{order:2}
  .intro .sector{order:3}
  .intro .services{order:4;white-space:normal}
  .intro .i{order:5}
  .intro .desc{order:6}

  /* каруселі → звичайний горизонтальний скрол пальцем */
  .rails{width:auto;margin-left:0;gap:12px}
  .rail{height:clamp(200px,34vw,360px);overflow:hidden}
  .rail::-webkit-scrollbar{display:none}
  .track{padding-inline:0;gap:12px;width:max-content}
  .shot,.card,.tile{border-radius:12px}
  .js .rail .shot{clip-path:inset(100% 0 0 0 round 12px)}
  .rails.in .shot{clip-path:inset(0 0 0 0 round 12px)}
  .js .tile{clip-path:inset(4% 4% 4% 4% round 12px)}
  .tile.in{clip-path:inset(0 0 0 0 round 12px)}

  /* візуальна мова */
  .lang{height:auto!important;display:grid;gap:10px;padding-block:24px}
  .lang .label{order:1}
  .lang .i{order:2}
  .lang .desc{order:3}

  /* медіа-блоки */
  .media{display:grid;grid-template-columns:1fr;gap:12px}
  .media>.tile{aspect-ratio:var(--ar,925/960)!important}
  .tile{aspect-ratio:925/960}
  .tile .hint{left:14px;bottom:12px;font-size:12px}
  .tile.vid.fit .cover{max-width:84%;height:84%}
  .ab-logo{left:16%;top:40%;width:68%}
  .posters{left:9%;top:20%;gap:3%}
  .poster{width:39%;height:auto;aspect-ratio:363/567;padding:1.2%;border-radius:18px}
  .poster img{border-radius:13px}
  .sel{left:35%;top:40%;width:31%;height:auto;aspect-ratio:286/239}
  .brand-tile .tk-logo{left:26%;top:46%;width:48%}

  /* інші роботи */
  .others{height:auto!important;display:grid;gap:16px;padding-block:32px}
  .strip-nav{display:none}
  .strip{position:static!important;left:auto!important;width:auto!important;padding-inline:0;
         height:clamp(140px,26vw,240px);gap:12px;cursor:default}
  .card .lbl{transform:none;font-size:14px;padding:8px 10px;gap:8px}

  /* футер */
  .foot,.hm-foot{height:auto!important;display:grid;justify-items:center;gap:12px;padding-block:28px}
  .foot .mark,.hm-foot .mark{width:min(420px,84%)!important;order:1}
  .foot .c,.hm-foot .c{order:2}
  .foot .m,.hm-foot .m{order:3}

  /* головна */
  .hm{height:auto!important;display:flex;flex-direction:column;gap:38px}
  .hm-nav{flex:1 0 100%;order:3;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;
          padding-bottom:2px}
  .hm-nav::-webkit-scrollbar{display:none}
  .hm-nav a{flex:none;height:38px;padding-inline:16px;font-size:18px}
  .hm-nav a span{margin-top:-2px}
  .hm-photo{width:min(320px,66%)!important;align-self:center;perspective:700px}
  .hm-photo .hm-ph{width:100%;height:auto}
  .grp .ill{width:min(300px,68%)!important;align-self:center}
  .g-serv .ill,.g-about .ill{width:min(200px,45%)!important}
  .hm-name{text-align:left!important}
  .hm-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding-block:12px;
          border-top:2px solid var(--ink)}
  .hm-row:last-of-type{border-bottom:2px solid var(--ink)}
  .hm-row .rt{order:1}
  .hm-row .ry{order:2;justify-self:end}
  .hm-row .rs{order:3;grid-column:1/-1}
  .hm-bar{padding:10px 14px}
  .hm-bar h2{text-align:left}
  .hm-reel img,.hm-reel video{height:auto}
  .hm-cta{padding:22px 16px;display:grid;gap:16px}
  .hm-cta .btn{padding:14px 10px;border-width:4px}
  .hm-serv,.hm-serv-note{display:none}
  .hm-slabel{height:0!important;overflow:hidden;visibility:hidden}   /* лишається якорем #services */
  .hm-serv-m{display:grid;gap:26px}
  .hm-serv-m h3{margin:0;font:700 clamp(34px,6.4vw,58px)/.9 var(--cond);font-stretch:condensed;letter-spacing:-.09em}
  .hm-serv-m p{margin:10px 0 0;max-width:520px;font:400 15px/1.3 Arial,Helvetica,sans-serif;letter-spacing:-.02em;white-space:pre-line}

  /* лайтбокс */
  .lb-prev,.lb-next{width:52px;height:52px;font-size:22px}
  .lb-close{top:16px;right:16px}
  .lb-count{bottom:18px}
}

@media (max-width:699px){
  :root{--u:.62;--pad:14px}
  .grp{gap:22px}
  .hm{gap:30px}
  .top{gap:10px;padding-block:12px 10px}
  .logo{width:78px!important}
  .figure{width:34px!important}
  .tagline{font-size:11px;line-height:1.15}
  .hm-photo{width:74%!important}
  .grp .ill{width:74%!important}
  .hm-nav a{height:40px;padding-inline:14px}
  .rail{height:clamp(170px,44vw,260px)}
  .strip{height:clamp(120px,34vw,200px)}
  .lb img{max-width:94vw;max-height:76vh}
}

/* ——————————————————————————————————————————————
   Телефон: головна за мобільним макетом (ширина 390).
   --m — один піксель макета; герой позиціонований за координатами,
   решта секцій — потоком із відступами з макета.
   —————————————————————————————————————————————— */
/* телефон і планшет (до 1023): одна розкладка; на планшеті масштаб обмежено, щоб не роздувалось */
@media (max-width:1023px){
  body.home{--m:min(calc(100vw / 390), 1.75px);--pad:calc(20 * var(--m))}
  .home .hm{max-width:calc(390 * var(--m));margin-inline:auto}   /* на планшеті — колонка пропорцій телефона по центру */
  .home .g-hero .hm-photo{max-width:calc(185 * var(--m))}
  .home .g-hero .f-p1{justify-self:end}
  .home .hm{gap:0}
  .home .grp{gap:0}

  /* шапка */
  .home .top{position:relative;z-index:auto;display:block;height:calc(190 * var(--m))!important;padding:0;
             mix-blend-mode:normal;color:var(--ink)}
  .home .top .abs{position:absolute!important}
  .home .top .logo{left:0!important;top:calc(18 * var(--m))!important;width:calc(160 * var(--m))!important}
  .home .top .hm-tag{left:0!important;top:calc(114 * var(--m))!important;width:calc(120 * var(--m))!important;
                     margin:0;text-align:left;white-space:pre-line;font-size:calc(18 * var(--m));line-height:1;letter-spacing:-.05em}
  .home .top .hm-brackets,.home .top .figure{display:none!important}
  .home .top .hm-mfig{display:block;left:calc(185 * var(--m))!important;top:calc(18 * var(--m))!important;width:calc(90 * var(--m))!important}

  /* бургер: завжди під рукою, інвертується над темним */
  .hm-burger{display:block;position:fixed;z-index:50;top:calc(39 * var(--m));right:var(--pad);
             width:calc(50 * var(--m));height:calc(32 * var(--m));mix-blend-mode:difference;color:var(--inv)}
  .hm-burger span{position:absolute;left:0;width:100%;height:calc(6 * var(--m));background:currentColor;
                  transition:transform .45s var(--ease),opacity .3s var(--ease)}
  .hm-burger span:nth-child(1){top:0}
  .hm-burger span:nth-child(2){top:calc(13 * var(--m))}
  .hm-burger span:nth-child(3){top:calc(26 * var(--m))}
  .menu-open .hm-burger{mix-blend-mode:normal;color:var(--paper)}
  .menu-open .hm-burger span:nth-child(1){transform:translateY(calc(13 * var(--m))) rotate(45deg)}
  .menu-open .hm-burger span:nth-child(2){opacity:0}
  .menu-open .hm-burger span:nth-child(3){transform:translateY(calc(-13 * var(--m))) rotate(-45deg)}

  /* меню на весь екран */
  .home .top .hm-nav{position:fixed!important;inset:0!important;z-index:45;width:auto!important;height:auto!important;
    display:flex;flex-direction:column;justify-content:center;gap:calc(14 * var(--m));overflow:visible;
    padding:0 var(--pad);background:var(--ink);color:var(--paper);
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s}
  .menu-open .top .hm-nav{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
  .home .hm-nav a{height:auto;padding:0}
  .home .hm-nav .t52{font-size:calc(82 * var(--m));line-height:.9;letter-spacing:-.07em}
  .home .hm-nav a span{margin:0;transform:translateY(40%);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
  .menu-open .hm-nav a span{transform:none;opacity:1}
  .menu-open .hm-nav a:nth-child(2) span{transition-delay:60ms}
  .menu-open .hm-nav a:nth-child(3) span{transition-delay:120ms}
  .menu-open .hm-nav a:nth-child(4) span{transition-delay:180ms}
  .menu-open,.menu-open body{overflow:hidden}

  /* герой: потік у дві колонки — імʼя на всю ширину, голова з підписом поруч, нічого не перекривається */
  .home .g-hero{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(10 * var(--m));align-items:end;height:auto;
    grid-template-areas:"intro intro" "n1 n1" "note2 p1" "note0 p1" "star star" "n2 n2" "p2 note1" "p2 note4" "note3 note3"}
  .home .g-hero .abs{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
  .home .g-hero .f-intro{grid-area:intro;font-size:calc(18 * var(--m));line-height:1;letter-spacing:-.05em}
  .home .hm-name{font-size:calc(56 * var(--m));line-height:.8;letter-spacing:-.09em;white-space:pre-line}
  .home .g-hero .f-n1{grid-area:n1;margin-top:calc(46 * var(--m))}
  .home .g-hero .f-n2{grid-area:n2;text-align:right!important;margin-top:calc(10 * var(--m))}
  .home .g-hero .hm-photo{align-self:auto;perspective:calc(700 * var(--m));margin-top:calc(18 * var(--m))}
  .home .g-hero .f-p1{grid-area:p1}
  .home .g-hero .f-p2{grid-area:p2}
  .home .g-hero .hm-photo .hm-ph{height:auto}
  .home .g-hero .f-star{grid-area:star;justify-self:center;width:calc(244 * var(--m))!important;margin-top:calc(20 * var(--m))}
  .home .g-hero .hm-note-sm{font-size:calc(16 * var(--m));line-height:1.05;letter-spacing:-.04em;white-space:normal}
  /* за схемою клієнта: біля Микити — «супровід» угорі й «персональний підхід» унизу;
     біля Євгена — «побудова» угорі й «дизайн та розробка» унизу; «ніндзі» — під усім */
  .home .g-hero .f-note2{grid-area:note2;align-self:start;margin-top:calc(30 * var(--m))}
  .home .g-hero .f-note0{grid-area:note0;align-self:end;padding-bottom:calc(20 * var(--m))}
  .home .g-hero .f-note1{grid-area:note1;align-self:start;margin-top:calc(30 * var(--m))}
  .home .g-hero .f-note4{grid-area:note4;align-self:end;padding-bottom:calc(20 * var(--m));font-weight:700}
  .home .g-hero .f-note3{grid-area:note3;margin-top:calc(34 * var(--m))}
  .home .g-hero .ill{align-self:auto}

  /* роботи */
  .home .t132.hm-wt{font-size:calc(48 * var(--m));line-height:.9;letter-spacing:-.07em}
  .home .g-works .hm-mark2{width:calc(266 * var(--m))!important;align-self:center;margin-top:calc(56 * var(--m))}
  .home .hm-row{grid-template-columns:auto 1fr;grid-template-areas:"t t" "y s";gap:0 calc(16 * var(--m));
                padding:0 0 calc(20 * var(--m));margin-top:calc(30 * var(--m));
                border-top:0;border-bottom:calc(5 * var(--m)) solid var(--ink)}
  .home .hm-mark2+.hm-row{margin-top:calc(71 * var(--m))}
  .home .hm-row:last-of-type{border-bottom:calc(5 * var(--m)) solid var(--ink)}
  .home .hm-row .rt{grid-area:t;white-space:normal;font-size:calc(48 * var(--m));line-height:.9;letter-spacing:-.07em}
  .home .hm-row .rs{grid-area:s;align-self:end;justify-self:end;text-align:right;margin-bottom:calc(5 * var(--m));white-space:normal;
                    font-size:calc(18 * var(--m));line-height:calc(30 * var(--m))}
  .home .hm-row .ry{grid-area:y;justify-self:start;font-size:calc(48 * var(--m));line-height:.9;letter-spacing:-.07em}

  /* про нас: плашка → знак → шоуріл */
  .home .g-about{margin-top:calc(46 * var(--m))}
  .home .hm-bar{order:1;padding:0 calc(15 * var(--m))}
  .home .hm-bar h2{margin-top:calc(-12 * var(--m));font-size:calc(48 * var(--m));line-height:.9;letter-spacing:-.07em}
  .home .g-about .hm-mark4{order:2;width:calc(188 * var(--m))!important;align-self:center;margin-top:calc(46 * var(--m))}
  .home .hm-reel{order:3;position:relative!important;margin:calc(35 * var(--m)) calc(-1 * var(--pad)) 0;
                 aspect-ratio:390/216;overflow:hidden}
  /* кадр із макета: шоуріл збільшено до 478×267 і зсунуто на −44/−45 — кути за межами */
  .home .hm-reel img,.home .hm-reel video{position:absolute;left:-11.34%;top:-20.83%;width:122.68%;height:123.64%;
                                          max-width:none;object-fit:cover;border-radius:0}

  /* послуги */
  .home .g-serv{margin-top:calc(75 * var(--m))}
  .home .hm-mark3{display:none!important}
  .home .t132.hm-stitle{font-size:calc(48 * var(--m));line-height:.9;letter-spacing:-.07em}   /* один кегль: заголовки, кейси, рік, послуги — 62 */
  .home .hm-go .t132{font-size:calc(48 * var(--m));line-height:.9;letter-spacing:-.07em}   /* кнопка тим самим кеглем */
  .home .hm-go{margin-inline:calc(-1 * var(--pad));padding:calc(14 * var(--m)) calc(12 * var(--m)) calc(16 * var(--m))}   /* на всю ширину: «ОЗНАЙОМТЕСЬ» у 62 займає 354 з 390 */
  .home .hm-wnote{margin-top:calc(30 * var(--m));font-size:calc(16 * var(--m));line-height:1.05;letter-spacing:-.04em}
  .home .hm-stitle{margin-bottom:calc(40 * var(--m))}   /* як між послугами; на десктопі 104px макета */
  .home .hm-serv-m{gap:calc(40 * var(--m))}
  .home .hm-serv-m h3{max-width:calc(330 * var(--m));font-size:calc(48 * var(--m));line-height:.9}
  .home .hm-serv-m p{margin-top:calc(10 * var(--m));max-width:calc(308 * var(--m));font-size:calc(18 * var(--m));line-height:1}

  /* CTA */
  .home .g-cta{margin-top:calc(46 * var(--m))}
  .home .hm-cta{display:flex;flex-direction:column;gap:0;margin-inline:calc(-17 * var(--m));
                padding:0 calc(16 * var(--m)) calc(60 * var(--m))}
  .home .hm-arrow{display:block;order:1;align-self:center;width:calc(58 * var(--m));height:auto;color:var(--paper)}
  .home .hm-cta .btn{order:2;margin-top:calc(15 * var(--m));min-height:calc(118 * var(--m));padding:calc(10 * var(--m));
                     border:calc(6 * var(--m)) solid var(--paper)}
  .home .hm-cta .btn.t81{font-size:calc(41 * var(--m));line-height:.8;letter-spacing:-.09em}
  .home .hm-cta .btn span{margin:0}
  .home .hm-cta .hm-note{order:3;margin:calc(20 * var(--m)) 0 0 calc(63 * var(--m));max-width:calc(288 * var(--m));
                         font-size:calc(18 * var(--m));line-height:1}

  /* футер */
  .home .g-foot{margin-top:calc(40 * var(--m))}
  .home .hm-foot{gap:calc(30 * var(--m));padding:0 0 calc(18 * var(--m))}
  .home .hm-foot .c{order:1}
  .home .hm-foot .mark{order:2;width:calc(351 * var(--m))!important}
  .home .hm-foot .m{order:3}
  .home .hm-foot .t19{font-size:calc(18 * var(--m))}
}