/* === ALOT.VIDEO mobile/ui v4.3 === */
html, body{ max-width:100%; overflow-x:hidden; }
:root{ --work-pad: 12px; }

.work{ padding: var(--work-pad); border-radius:16px; }
.work .thumb, .work .media, .work .preview{
  position:relative; width:100%; aspect-ratio:16/9;
  margin:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#0b0e14;
  -webkit-mask-image: -webkit-radial-gradient(#000, #000);
  clip-path: inset(0 round 14px);
}
.work.is-vert .thumb, .work.is-vert .media, .work.is-vert .preview{ aspect-ratio:9/16; }
.work .thumb img, .work .thumb video,
.work .media img, .work .media video,
.work .preview img, .work .preview video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  border-radius:inherit !important; background:#0b0e14;
}
.work .thumb::after, .work .media::after, .work .preview::after{
  content:""; position:absolute; inset:0 0 auto 0; height:46%;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,0) 100%);
  pointer-events:none; border-radius:inherit;
}

.hero-card{ width:100%; overflow:hidden; }
.hero-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-width:100%; }
.hero-item{ display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:10px; width:100%; box-sizing:border-box; }
.hero-item .mini{ width:46px; height:46px; border-radius:8px; overflow:hidden; background:#0b0e14; }
.hero-item .mini img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-item .title{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hero-item .dur{ white-space:nowrap; opacity:.8; }

.section-h{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.section-h p{ margin:0; color:var(--muted); }
@media (max-width:760px){
  .section-h{ flex-direction:column; align-items:flex-start; gap:6px; }
}

.steps{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width:760px){
  :root{ --work-pad: 10px; }
  .steps{ grid-template-columns:1fr; }
  .step{ margin:0; }
}

.wrap{ padding-inline:24px; }
@media (max-width:760px){
  .wrap{ padding-inline:16px; }
  .hero{ display:block; }
  .hero .hero-card{ margin-top:14px; }
  .works-head{ flex-wrap:wrap; gap:8px; }
  .works-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width:380px){
  .works-grid{ grid-template-columns:1fr 1fr; }
  .hero-item{ grid-template-columns:40px 1fr auto; }
  .hero-item .mini{ width:40px; height:40px; }
}

.burger{
  display:none; align-items:center; justify-content:center; gap:4px;
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:#161a22; color:#fff; cursor:pointer;
}
.burger span{ display:block; width:18px; height:2px; background:#fff; border-radius:2px; transition:.2s; }
body.nav-open .burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:760px){
  header .nav{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  header .nav nav{ order:3; width:100%; display:none !important; flex-direction:column; gap:10px; }
  .burger{ display:inline-flex; order:2; }
  body.nav-open header .nav nav{ display:flex !important; }
}