/* ==========================================================================
   SO&SO — language switch, LTR (English) adjustments, and the portfolio.
   Loaded after site.css. Most of the layout is written with logical
   properties and flips for free; the LTR block is only what was physically
   anchored to the right.
   ========================================================================== */

/* English visitors: hold the first paint until the copy has been swapped, so
   they never see the Hebrew page flip direction. Released by i18n.js, with a
   timeout in <head> as a failsafe. */
html.i18n-pending body{visibility:hidden}
[hidden]{display:none !important}

.lang-btn{
  display:inline-flex;align-items:center;gap:7px;
  min-height:42px;padding:8px 14px;border-radius:100px;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--v-700);font-weight:700;font-size:.86rem;white-space:nowrap;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
/* A fifth nav link plus the switch: keep the row on one line, and let the
   header CTA go first when room runs out (the edge tab and hero still carry it). */
.navlinks a{white-space:nowrap}
@media (max-width:1120px){.nav-cta-desktop{display:none}.navlinks a{padding:9px 11px}}
.lang-btn:hover{background:#fff;border-color:var(--v-400);transform:translateY(-1px)}
.navlinks .lang-btn{
  min-height:0;padding:9px 13px;margin-inline-start:6px;
  background:transparent;border:1px solid var(--line-soft);backdrop-filter:none;-webkit-backdrop-filter:none;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink-2);cursor:pointer;
}
.navlinks .lang-btn:hover{background:var(--v-50);color:var(--v-700);transform:none}
.lang-btn svg{width:17px;height:17px;flex:none}

html[lang="en"] body{font-family:'Manrope','Heebo',system-ui,'Segoe UI',Arial,sans-serif;letter-spacing:0}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:'Manrope','Heebo',sans-serif;letter-spacing:-.035em}
html[lang="en"] .split-copy h2{font-size:clamp(2.2rem,5vw,3.9rem)}
html[lang="en"] .split-panel span{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.04em}
html[lang="en"] .stat .big,html[lang="en"] .pricebox .amt,
html[lang="en"] .bubble,html[lang="en"] .card .num{font-family:'Manrope',sans-serif}
html[lang="en"] .sec-tag{letter-spacing:.09em;text-transform:uppercase;font-size:.72rem}

html[dir="ltr"] .progress{right:auto;left:0;border-radius:0 0 3px 0}
html[dir="ltr"] .marquee .track{animation-name:marqLtr}
@keyframes marqLtr{to{transform:translateX(-50%)}}
html[dir="ltr"] .intro-rule i{transform-origin:left}
/* The opening words sit on the reading-start panel, so the inward nudge flips. */
html[dir="ltr"] .panel-l span{transform:translateX(18%)}
html[dir="ltr"] .panel-r span{transform:translateX(-18%)}

/* ===== English-only "made for your community" band ===== */
.usband{padding-bottom:40px}
.us-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--glass-strong);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-sm);
}
.us-item{padding:32px 26px;border-inline-end:1px solid var(--line-soft)}
.us-item:last-child{border-inline-end:0}
.us-n{
  display:block;font-weight:800;font-size:.8rem;letter-spacing:.14em;margin-bottom:16px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.us-item h4{font-size:1.08rem;margin-bottom:9px}
.us-item p{font-size:.92rem;color:var(--muted)}

/* ==========================================================================
   Portfolio — showreel, AI ads, sites, concept lab
   The media is dark and saturated, so the frames around it stay quiet.
   ========================================================================== */
/* The portfolio runs edge to edge with dense media and long captions, so the
   floating 3D objects are veiled here rather than left to drift over the copy.
   The veil feathers in and out so the section has no visible seam. */
.portfolio{
  background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.9) 140px,rgba(255,255,255,.9) calc(100% - 140px),transparent 100%);
}
.btn-light{background:#fff;color:var(--v-700);box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.btn-light:hover{transform:translateY(-2px)}

.pf-reel{
  position:relative;aspect-ratio:1278/720;
  border-radius:var(--radius-lg);overflow:hidden;
  /* no image here: the video's lazy poster paints it, only when the reel comes near */
  background:#0d0a1f;
  box-shadow:var(--shadow-lg);
}
.pf-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pf-reel-cap{
  position:absolute;inset-inline:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:90px 30px 26px;color:#fff;
  background:linear-gradient(transparent,rgba(13,10,31,.9));
}
.pf-reel-cap b{display:block;font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:800;line-height:1.2}
.pf-reel-cap span{font-size:.9rem;opacity:.82}

.pf-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin:22px 0 40px;padding:8px;border-radius:calc(var(--radius) + 8px);
  background:var(--glass-strong);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);
  scroll-margin-top:calc(var(--nav-h) + 16px);
}
.pf-tabs [role=tab]{
  font:inherit;cursor:pointer;border:0;background:transparent;
  display:flex;align-items:center;gap:10px;justify-content:center;
  min-height:56px;padding:12px 14px;border-radius:var(--radius);
  color:var(--ink-2);transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.pf-tabs [role=tab]:hover{background:var(--v-50)}
.pf-tabs [role=tab]:focus-visible{outline:2px solid var(--v-500);outline-offset:2px}
.pf-tabs b{
  font-weight:900;font-size:1.5rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pf-tabs span{font-size:.98rem;font-weight:700}
.pf-tabs [aria-selected=true]{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.pf-tabs [aria-selected=true] b{background:none;-webkit-text-fill-color:#fff;color:#fff}
.pf-block[hidden]{display:none}
.pf-block:not([hidden]){animation:pfIn .45s var(--ease) both}
@keyframes pfIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pf-block:not([hidden]){animation:none}}

.pf-block{margin-bottom:0;scroll-margin-top:calc(var(--nav-h) + 24px)}
.pf-block:last-child{margin-bottom:0}
.pf-sub{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line-soft);
}
.pf-sub h3{font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:8px}
.pf-sub p{color:var(--muted);font-size:.98rem;max-width:62ch}
.pf-badge{
  flex:none;padding:7px 14px;border-radius:100px;
  background:var(--v-50);border:1px solid var(--line);
  color:var(--v-700);font-size:.86rem;font-weight:700;
}
.pf-badge.alt{background:#fff8eb;border-color:rgba(180,120,20,.28);color:#8a5a06}

/* --- AI ads: poster cards that open the film --- */
.ads{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ad{
  position:relative;display:block;aspect-ratio:4/5;
  border-radius:20px;overflow:hidden;background:#0d0a1f;
  box-shadow:var(--shadow-sm);text-align:start;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ad:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.ad img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ad:hover img{transform:scale(1.06)}
.ad .dur{
  position:absolute;top:10px;inset-inline-start:10px;
  padding:3px 9px;border-radius:100px;
  background:rgba(13,10,31,.62);color:#fff;font-size:.72rem;font-weight:700;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-variant-numeric:tabular-nums;
}
.ad .play{
  position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:rgba(255,255,255,.94);color:var(--v-600);
  display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.ad .play svg{width:24px;height:24px}
.ad:hover .play{transform:scale(1.12);background:var(--v-600);color:#fff}
.ad .meta{
  position:absolute;inset-inline:0;bottom:0;padding:56px 14px 13px;color:#fff;
  background:linear-gradient(transparent,rgba(13,10,31,.94));
}
.ad .meta b{display:block;font-size:.92rem;font-weight:700;line-height:1.3}
.ad .meta span{display:block;font-size:.84rem;opacity:.88;margin-top:2px}

/* --- Sites: browser frames --- */
.sites{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.site{
  position:relative;display:flex;flex-direction:column;text-align:start;
  border-radius:18px;overflow:hidden;
  background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.site:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line)}
.site .bar{
  display:flex;align-items:center;gap:6px;padding:10px 12px;
  background:var(--bg-2);border-bottom:1px solid var(--line-soft);direction:ltr;
}
.site .bar i{width:8px;height:8px;border-radius:50%;background:#d9d5e8;flex:none}
.site .bar em{
  flex:1;min-width:0;margin-left:6px;padding:3px 10px;border-radius:100px;
  background:#fff;border:1px solid var(--line-soft);
  font-style:normal;font-size:.7rem;color:var(--muted-2);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.site .shot{display:block;aspect-ratio:16/10;overflow:hidden;background:#0d0a1f}
.site .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.site:hover .shot img{transform:scale(1.05)}
.site .cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;flex:1}
.site .cap b{display:block;font-size:.98rem;font-weight:800;color:var(--ink)}
.site .cap span span{display:block;font-size:.86rem;color:var(--muted);margin-top:2px;line-height:1.4}
.site .go{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  font-size:.86rem;font-weight:700;color:var(--v-600);white-space:nowrap;
}
.site .go svg{width:14px;height:14px}
html[dir="rtl"] .site .go svg{transform:scaleX(-1)}
.site .live{
  position:absolute;top:46px;inset-inline-end:10px;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:100px;
  background:rgba(13,10,31,.66);color:#fff;font-size:.7rem;font-weight:700;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.site .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.25)}

/* --- Concept lab --- */
.lab{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.concept{
  position:relative;display:block;aspect-ratio:4/5;
  border-radius:18px;overflow:hidden;background:#0d0a1f;cursor:zoom-in;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.concept:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.concept img,.concept video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.concept:hover img,.concept:hover video{transform:scale(1.05)}
/* The clip fades in over its still only once it is really playing. */
.concept video{opacity:0;transition:opacity .6s var(--ease), transform .7s var(--ease)}
.concept video.on{opacity:1}
.concept .tag{
  position:absolute;inset-inline-start:10px;bottom:10px;max-width:calc(100% - 20px);
  padding:5px 11px;border-radius:100px;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:.82rem;font-weight:700;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.concept .motion{
  position:absolute;top:10px;inset-inline-end:10px;width:26px;height:26px;border-radius:50%;
  background:rgba(13,10,31,.6);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.concept .motion svg{width:13px;height:13px}
.concept{cursor:pointer}
.concept-main{position:absolute;inset:0;display:block;width:100%;border-radius:inherit;overflow:hidden;text-align:start}
.concept.open .concept-main img,.concept.open .concept-main video{filter:brightness(.32) blur(2px)}
.concept.open .tag{opacity:0}
/* The question a card asks when it is pressed: the site, or the campaign? */
.concept-choose{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px;
  animation:chooseIn .3s var(--ease) both;
}
@keyframes chooseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.concept-choose a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:11px 16px;
  border-radius:14px;background:#fff;color:var(--ink);font-weight:800;font-size:.9rem;
  transition:background .2s,color .2s,transform .2s;
}
.concept-choose a:hover{background:var(--v-600);color:#fff;transform:translateY(-2px)}
.concept-choose svg{width:16px;height:16px;flex:none}
html[dir="rtl"] .concept-choose svg{transform:scaleX(-1)}


/* proof gallery captions: title + subtitle spans */
.work figcaption .t{font-weight:700;font-size:.98rem;color:var(--ink)}

/* --- Lightbox: films and captions --- */
.lightbox{grid-template-rows:1fr auto;gap:14px}
.lightbox img,.lightbox video{align-self:end;max-height:80vh}
/* --r is the film's width/height, set by the viewer: the height is whichever
   is smaller of the viewport height and what the available width allows, so
   portrait and landscape films both fill the screen without cropping. */
.lightbox video{
  height:min(80vh,calc(min(1100px,94vw) / var(--r,1.78)));width:auto;
  aspect-ratio:var(--r,1.78);
  max-width:min(1100px,94vw);
  border-radius:var(--radius);background:#000;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8);
}
.lb-cap{align-self:start;color:rgba(255,255,255,.86);font-size:.92rem;font-weight:600;text-align:center;min-height:1.4em}

@media (max-width:1100px){
  .ads{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sites{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab{grid-template-columns:repeat(4,minmax(0,1fr))}
  .us-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .us-item:nth-child(2){border-inline-end:0}
  .us-item:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:820px){
  .navlinks .lang-btn{
    margin:10px 0 4px;justify-content:center;min-height:46px;width:100%;
    border-radius:var(--radius);font-size:1rem;
  }
  .ads{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lab{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pf-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:30px}
  .pf-tabs [role=tab]{min-height:52px;padding:10px 8px;gap:8px}
  .pf-tabs span{font-size:.92rem}
  .pf-block{margin-bottom:0}
  .pf-reel{aspect-ratio:4/3}
  .pf-reel-cap{padding:70px 18px 18px}
  .pf-reel-cap .btn{padding:11px 20px;font-size:.9rem}
  .ad .play{width:46px;height:46px;margin:-23px 0 0 -23px}
  .lightbox{padding:18px}
}
@media (max-width:560px){
  .sites{grid-template-columns:1fr}
  .us-grid{grid-template-columns:1fr}
  .us-item{border-inline-end:0;border-bottom:1px solid var(--line-soft)}
  .us-item:last-child{border-bottom:0}
}

/* ===== Small phones (320–420px) =====
   The header gained a language switch and the English CTAs are longer than
   the Hebrew ones, so the narrowest screens need a tighter row and buttons
   that may wrap instead of pushing the page wider than the viewport. */
@media (max-width:420px){
  .wrap{padding:0 16px}
  .nav{gap:10px}
  .brand .logo-txt>span{font-size:1.32rem}
  .brand small{letter-spacing:2px;font-size:.5rem}

  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btn.lg{padding:15px 22px;font-size:1rem}
  .split-panel span{font-size:clamp(.95rem,5vw,1.5rem)}
}

/* ===== Work wall ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ----- Work wall ----- */
.wall{position:relative;padding:14px 0 26px;overflow:hidden;overflow:clip}
.wall-rows{display:grid;gap:14px;margin-inline:-5vw;transform:rotate(-2deg);padding-block:12px}
html[dir=ltr] .wall-rows{transform:rotate(2deg)}


.tile{
  position:relative;flex:none;display:block;height:var(--th);
  border-radius:18px;overflow:hidden;background:#0d0a1f;text-align:start;
  box-shadow:0 14px 34px -18px rgba(23,18,58,.45);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.t-ad,.t-brand{--th:250px;aspect-ratio:4/5}
.t-studio{--th:214px;aspect-ratio:4/5}
.t-site{--th:186px;aspect-ratio:16/10;background:#fff;border:1px solid var(--line-soft)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.t-site img{object-position:top}
.tile:hover,.tile:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tile:hover img{transform:scale(1.05)}
.t-play{
  position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--v-600);display:grid;place-items:center;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);transition:transform .3s var(--ease), background .3s, color .3s;
}
.t-play svg{width:17px;height:17px}
.tile:hover .t-play{transform:scale(1.12);background:var(--v-600);color:#fff}
.t-cap{
  position:absolute;inset-inline:0;bottom:0;padding:38px 12px 11px;color:#fff;text-align:start;
  background:linear-gradient(transparent,rgba(13,10,31,.92));
}
.t-cap em{
  display:inline-block;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.2px;
  padding:2px 9px;border-radius:100px;margin-bottom:5px;
  background:rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.t-brand .t-cap em{background:rgba(255,213,128,.28)}
.t-cap b{display:block;font-size:.9rem;font-weight:700;line-height:1.25}

.wall-foot{
  display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap;
  margin-top:22px;font-size:.98rem;color:var(--ink-2);text-align:center;
}
.wall-all{font-weight:800;color:var(--v-700);border-bottom:2px solid var(--v-300);padding-bottom:1px}
.wall-all:hover{color:var(--ink);border-color:currentColor}

/* Hover preview: the film plays muted inside its own card. */
.ad .pv,.tile .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.ad.pv-on .pv,.tile.pv-on .pv{opacity:1}
.ad.pv-on .play,.tile.pv-on .t-play{opacity:0}

/* Services: one line, then a link to the proof of it. */
.card>p{margin-bottom:14px}
.card-go{display:inline-flex;font-weight:800;font-size:.97rem;color:var(--v-700);border-bottom:2px solid var(--v-100);padding-bottom:1px;transition:color .25s,border-color .25s}
.card-go:hover{color:var(--ink);border-color:currentColor}

@media (max-width:820px){
  .t-ad,.t-brand{--th:200px}
  .t-site{--th:146px}
}
@media (max-width:520px){
  .wall-rows,.wall-set{gap:10px}
  .wall-set{padding-right:10px}
  .t-ad,.t-brand{--th:172px}
  .t-site{--th:124px}
  .t-cap{padding:30px 9px 8px}
  .t-cap b{font-size:.84rem}
}



/* ----- Work wall lanes: drift on their own, drag / flick / swipe / step by hand ----- */
.wall-rows{gap:10px}
.wall-lane{display:grid;gap:8px}
.lane-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;max-width:calc(var(--maxw) + 10vw);margin-inline:auto;padding-inline:calc(5vw + 20px);
}
.lane-title{display:inline-flex;align-items:baseline;gap:8px}
.lane-title b{font-family:'Heebo';font-weight:800;font-size:1.02rem;color:var(--ink)}
.lane-title i{font-style:normal;font-weight:800;font-size:.8rem;color:var(--v-700);background:var(--v-50);border:1px solid var(--line);padding:1px 8px;border-radius:100px}
.lane-nav{display:inline-flex;gap:8px;direction:ltr}
.lane-nav button{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-strong);border:1px solid var(--line);color:var(--v-700);
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease), background .25s, color .25s;
}
.lane-nav button svg{width:18px;height:18px}
.lane-nav button:hover{background:var(--v-600);color:#fff;transform:scale(1.08)}
.lane-nav button:active{transform:scale(.94)}
.wall-row{
  /* One physical direction in both languages, so the loop math never flips. */
  direction:ltr;overflow:hidden;padding-block:8px;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.wall-lane.dragging .wall-row{cursor:grabbing}
.wall-lane.dragging .tile{pointer-events:none}
.wall-track{display:flex;width:max-content;will-change:transform}
.wall-set{display:flex;gap:14px;padding-right:14px}
.tile,.tile img{-webkit-user-drag:none}

/* Studio site: one tile, two destinations. */
.t-studio .t-hit{position:absolute;inset:0;display:block;width:100%;height:100%;text-align:start}
.t-studio .t-cap em{background:rgba(255,213,128,.3)}
.t-choose{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px;
  background:rgba(13,10,31,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease), visibility .25s;
}
.t-choose a{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 12px;border-radius:100px;
  background:#fff;color:var(--v-700);font-weight:800;font-size:.92rem;
  transition:background .2s,color .2s,transform .2s;
}
.t-choose a svg{width:15px;height:15px}
.t-choose a:hover{background:var(--v-600);color:#fff;transform:translateY(-2px)}
.t-studio.open .t-choose{opacity:1;visibility:visible}
@media (hover:hover) and (pointer:fine){
  .t-studio:hover .t-choose,.t-studio:focus-within .t-choose{opacity:1;visibility:visible}
}
.wall-lane.dragging .t-choose{opacity:0;visibility:hidden}

@media (max-width:820px){
  .t-studio{--th:180px}
  .lane-head{padding-inline:calc(5vw + 16px)}
}
@media (max-width:520px){
  .t-studio{--th:160px}
  .lane-nav{display:none}
  .lane-title b{font-size:.95rem}
  .wall-set{gap:10px;padding-right:10px}
  .t-choose{padding:10px;gap:8px}
  .t-choose a{padding:9px 8px;font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){.wall-rows{transform:none}}
.t-cap em{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}