/* Lexpéditìoñs: original mobile hero footage, three CSS device frames on white. */
.lex-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2.2vw,25px);background:#fff;padding:clamp(8px,2vw,22px) 0;box-sizing:border-box}
.lex-phone{position:relative;flex:0 1 218px;min-width:0;max-width:218px;margin:0;padding:7px;box-sizing:border-box;aspect-ratio:auto;border:2px solid #323335;border-radius:34px;background:#141517;box-shadow:0 1px 1px #ffffff88 inset,0 0 0 1px #111 inset,0 10px 23px #00000022,0 23px 39px #00000012;isolation:isolate}
.lex-phone__screen{position:relative;aspect-ratio:374/780;width:100%;overflow:hidden;border-radius:26px;background:#121212}
/* Override the generic case-study video styling without affecting other media. */
.case-frame .lex-phone__screen video{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center}
@media(max-width:580px){
 .lex-phones{justify-content:flex-start;overflow-x:auto;overscroll-behavior-inline:contain;gap:17px;padding:9px 12px 23px;scroll-snap-type:x mandatory;scrollbar-width:thin}
 .lex-phone{flex:0 0 clamp(168px,52vw,215px);max-width:215px;scroll-snap-align:center;border-radius:30px;padding:6px}
 .lex-phone__screen{border-radius:23px}
}
@media(prefers-reduced-motion:reduce){.lex-phones{scroll-behavior:auto}}

/* Two source clips, alternating in one 16:9 case-study frame on white.
   Animate the video layers, not a composite image. */
.case-frame .lex-crossfade {
  position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate;
  background:#17110e; box-sizing:border-box;
}
.case-frame .lex-crossfade__video {
  display:block; position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center; pointer-events:none; opacity:0;
  transition:opacity 900ms ease-in-out;
}
.case-frame .lex-crossfade__video.is-active {opacity:1; z-index:1}
@media (prefers-reduced-motion:reduce) {
  .case-frame .lex-crossfade__video { transition:none }
}

/* Two native 800x1000 portrait videos directly under the credits, matching the
   1px #d6d6d6 case panel and 18px paired-gallery rhythm elsewhere on the site. */
.lex-portrait-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.case-frame .lex-portrait-pair__item { min-width:0; box-sizing:border-box; background:#fff; }
.case-frame .lex-portrait-pair__item video { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:760px) { .lex-portrait-pair { gap:11px; } }
@media (max-width:580px) { .lex-portrait-pair { grid-template-columns:1fr; gap:12px; } }


/* Original interactive lightbox radio cropped inline, directly on portfolio white. */
.lex-radio-stage {position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff;isolation:isolate;box-sizing:border-box}
.lex-radio-stage .lightbox-radio-frame {position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#fff}
.lex-radio-stage .explore-radio {position:absolute;left:50%;bottom:0;width:87.1232%;aspect-ratio:1490/1717;overflow:visible;transform:translateX(-50%);margin:0;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.lex-radio-stage .explore-radio-body {position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:1}
.lex-radio-stage .explore-radio-needle {position:absolute;z-index:2;pointer-events:none;transition:left .3s cubic-bezier(.2,.7,.2,1)}
.lex-radio-stage .explore-radio-knob {position:absolute;margin:0;padding:0;border:0;background:transparent;appearance:none;cursor:pointer;touch-action:manipulation;transform-origin:50% 50%;transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:4;-webkit-tap-highlight-color:transparent}
.lex-radio-stage .explore-radio-knob img {display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.lex-radio-stage .explore-radio-knob-left {left:83.3557047%;top:77.6354106%;width:10.33557047%;height:8.96913221%}
.lex-radio-stage .explore-radio-knob-right {left:81.20805369%;top:54.16423995%;width:14.4966443%;height:12.58008154%;cursor:ew-resize}
.lex-radio-stage .explore-radio.is-tuning-drag .explore-radio-knob-right {cursor:grabbing}
.lex-radio-stage .explore-radio.is-tuning-drag .explore-radio-needle,
.lex-radio-stage .explore-radio.is-tuning-drag .explore-radio-knob-right {transition:none}
.lex-radio-stage .explore-radio-knob:focus-visible {outline:3px solid #fff;outline-offset:4px;border-radius:50%}
.lex-radio-stage .explore-radio-live {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lex-radio-stage .explore-radio-caption {display:none}
.lex-radio-stage .lightbox-radio-frame::after {content:"";position:absolute;z-index:12;pointer-events:none;top:0;left:6.4384%;width:87.1232%;height:20px;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.78) 36%,rgba(255,255,255,.28) 72%,rgba(255,255,255,0) 100%)}
.lex-radio-case .lex-radio-help {margin:10px 0 0;font-size:12px;line-height:1.5;text-align:center;color:#6e6e6e}
@media(prefers-reduced-motion:reduce){.lex-radio-stage .explore-radio-knob,.lex-radio-stage .explore-radio-needle{transition:none}}

/* Full-width tall chapter screenshot, panning vertically within one standard
   16:9 project-media frame. Keep native image proportions and preserve white. */
.case-frame .lex-study-scroll {position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;background:#fff;box-sizing:border-box}
.case-frame .lex-study-scroll img {position:absolute;inset:0 auto auto 0;display:block;width:100%;height:auto;max-width:none;transform:translate3d(0,0,0);will-change:transform;user-select:none;pointer-events:none}
@media (prefers-reduced-motion: reduce) {.case-frame .lex-study-scroll img {will-change:auto}}

/* Small clickable dots below each crossfade, matching the white case-study page. */
.case-frame .lex-crossfade__pagination {
  display:flex; justify-content:center; align-items:center; gap:2px;
  margin:9px auto 0; padding:0; width:max-content;
}
.case-frame .lex-crossfade__dot {
  position:relative; display:block; flex:none; box-sizing:border-box;
  width:28px; height:28px; padding:0; margin:0;
  border:0; border-radius:50%; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.case-frame .lex-crossfade__dot::before {
  content:""; position:absolute; top:50%; left:50%;
  width:7px; height:7px; border-radius:50%;
  background:#c9c9c9; transform:translate(-50%,-50%);
  transition:background-color .18s ease,transform .18s ease;
}
.case-frame .lex-crossfade__dot[aria-pressed="true"]::before {
  background:#303030; transform:translate(-50%,-50%) scale(1.25);
}
.case-frame .lex-crossfade__dot:hover::before { background:#646464; }
.case-frame .lex-crossfade__dot:focus-visible { outline:2px solid #555; outline-offset:1px; }
@media(prefers-reduced-motion:reduce) {
  .case-frame .lex-crossfade__dot::before { transition:none; }
}

/* Original asset-based Hub, confined to the existing second 16:9 media frame. */
.case-frame .lex-hub-inline {aspect-ratio:16/9;position:relative;width:100%;background:#100c09;overflow:hidden;box-sizing:border-box;}
.case-frame .lex-hub-inline iframe {display:block;position:absolute;inset:0;width:100%;height:100%;border:0;background:#100c09;}