/* LOOM Studio — Selected Work phone switcher (scroll-scrubbed mobile recordings) */
.loom-work{
  position:relative; width:100%;
  padding:7dvh 5dvw 9dvh;
  display:flex; flex-direction:column; align-items:center;
  background:transparent; z-index:5;
  font-family:"neuehaasdisplayroman", "Helvetica Neue", Arial, sans-serif;
}
.loom-work__head{ text-align:center; max-width:760px; margin:0 auto 3.2dvh; }
.loom-work__eyebrow{
  display:inline-block; color:#a99cff; letter-spacing:3px; font-size:12px;
  text-transform:uppercase; margin-bottom:14px; opacity:.85;
}
.loom-work__title{
  color:#fff; font-size:clamp(26px,3.4dvw,48px); line-height:1.05;
  font-family:"neuehaasdisplayroman"; font-weight:400; letter-spacing:-.5px; margin:0;
}
.loom-work__sub{ color:#ffffff80; font-size:16px; margin-top:14px; font-family:"neuehaasdisplaylight"; }

.loom-work__stage{
  position:relative; display:flex; justify-content:center; align-items:center;
  width:100%; margin:1dvh 0 3.2dvh;
}

/* phone frame */
.loom-phone{
  position:relative; height:clamp(380px,56dvh,540px); width:auto; aspect-ratio:390/844;
  border-radius:46px; padding:11px;
  background:linear-gradient(150deg,#23202b,#0c0b12 60%);
  box-shadow:0 2px 4px #000, 0 30px 80px -20px #5328ff66, inset 0 0 0 1.5px #ffffff1a;
}
.loom-phone::after{ content:""; position:absolute; right:-2px; top:170px; width:3px; height:46px; border-radius:3px; background:#2a2733; }
.loom-phone__notch{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:34%; height:22px; background:#05050a; border-radius:0 0 16px 16px; z-index:4; }
.loom-phone__screen{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:36px; background:#000; }
.loom-phone__screen video, .loom-phone__screen img.loom-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; background:#000;
}
.loom-phone__screen video.is-active, .loom-phone__screen img.loom-poster.is-active{ opacity:1; }
.loom-phone__screen video.is-active{ z-index:2; }
.loom-phone__screen img.loom-poster.is-active{ z-index:1; }
.loom-phone__rail{ position:absolute; right:-26px; top:12%; bottom:12%; width:3px; border-radius:3px; background:#ffffff1f; overflow:hidden; }
.loom-phone__rail i{ position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(#a99cff,#5328ff); border-radius:3px; }

/* nav arrows */
.loom-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:1px solid #ffffff2e;
  background:#ffffff10; backdrop-filter:blur(8px); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  transition:background .2s,border-color .2s; z-index:6; user-select:none;
}
.loom-arrow:hover{ background:#ffffff22; border-color:#ffffff66; }
.loom-arrow--prev{ left:max(2dvw,12px); }
.loom-arrow--next{ right:max(2dvw,12px); }

/* tabs */
.loom-work__tabs{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:880px; margin:0 auto;
}
.loom-tab{
  appearance:none; border:1px solid #ffffff22; background:#ffffff0d; color:#ffffffb3;
  border-radius:100px; padding:11px 18px; cursor:pointer; font-size:14px;
  letter-spacing:.4px; font-family:"neuehaasdisplayroman";
  transition:all .22s ease; display:flex; align-items:center; gap:9px;
}
.loom-tab:hover{ color:#fff; border-color:#ffffff55; background:#ffffff14; }
.loom-tab.is-active{ background:#fff; color:#20174e; border-color:#fff; }
.loom-tab i{ width:6px; height:6px; border-radius:50%; background:#a99cff; }
.loom-tab.is-active i{ background:#5328ff; }

.loom-work__meta{ margin-top:22px; display:flex; align-items:center; gap:16px; }
.loom-work__visit{
  color:#fff; text-decoration:none; font-size:15px; opacity:.85;
  border-bottom:1px solid #ffffff44; padding-bottom:2px; transition:opacity .2s;
}
.loom-work__visit:hover{ opacity:1; }
.loom-work__count{ color:#ffffff66; font-size:13px; letter-spacing:1px; }

@media (max-width:768px){
  .loom-phone{ height:clamp(360px,54dvh,500px); width:auto; }
  .loom-arrow{ width:40px; height:40px; font-size:17px; }
  .loom-phone__rail{ display:none; }
  .loom-work__tabs{ gap:8px; }
  .loom-tab{ padding:9px 14px; font-size:13px; }
}