/* Round 7 (Oct 21, 2026): client sites in clean device frames. A thin-bezel browser window shows the real desktop page and a phone
   shows the real phone page, on a calm dark stage with one soft gold rim light. No blurred backdrops, no 3D slabs, no captions.
   showcase.js adds the tilt toward the pointer, the slow scroll of the long page inside the window (hover on computers, page scroll
   on phones), a drag to turn, and the switch between sites. Without it the frames are still pictures. */
.show-f{background:radial-gradient(70% 70% at 64% 62%,#261f16 0%,#16120f 48%,#0d0b0a 100%)}
.show-f .grain{opacity:.24}
.show::after{content:"";position:absolute;left:40%;right:-10%;top:-20%;height:60%;pointer-events:none;background:radial-gradient(45% 50% at 70% 30%,rgba(201,163,94,.16),transparent 70%)}
.show-f::after{content:none}
.show{position:absolute;inset:0;z-index:0;perspective:1900px;perspective-origin:62% 50%;touch-action:pan-y;cursor:grab;container-type:size}
.show:active{cursor:grabbing}
.show::before{content:"";position:absolute;left:30%;right:-6%;bottom:-16%;height:56%;pointer-events:none;background:radial-gradient(50% 60% at 60% 100%,rgba(214,176,106,.46),rgba(201,163,94,.14) 48%,transparent 72%);filter:blur(16px)}
.show-item{position:absolute;inset:0;display:none;transition:opacity .75s ease}
.show-item.on,.show-item.off{display:block}
.show-item.off{opacity:0;pointer-events:none}
.show-item.in{animation:show-in .9s cubic-bezier(.2,.8,.2,1)}
@keyframes show-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
/* round 8 (review r7 non-blocking 1, Isaac's main complaint): the phone sits over the window's RIGHT edge (the photo side) and
   never over the left of the page, where Lefferts, SkysSoft and Sarah put their headline. Sizes come from container units. */
.show-rig{--lw:min(44cqw,calc((80cqh - 40px) * 1.6));--pw:max(120px,calc(var(--lw) * .3))}
.show-rig{position:absolute;left:47%;right:3%;top:9%;bottom:7%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--spin,0deg)));will-change:transform}
.dev{position:absolute;margin:0;transform-style:preserve-3d}
.dev .scr{position:relative;overflow:hidden;background:#0c0b0e}
.dev .scr picture,.dev .scr img.first{display:block;width:100%;height:100%}
.dev .scr img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.dev .scr img.long{position:absolute;left:0;top:0;display:none;transform:translate3d(0,calc(var(--s,0) * -62.5%),0);will-change:transform}
.dev.ld .scr img.long{display:block}
/* the browser window: bezel, one bar with three dots, the page inside */
.lap{left:0;top:50%;translate:0 -56%;width:var(--lw);border-radius:12px;background:#17161a;padding:5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08),0 50px 90px -30px rgba(0,0,0,.85),0 24px 60px -24px rgba(201,163,94,.22)}
.lap .bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 10px}
.lap .bar i{width:9px;height:9px;border-radius:50%;background:rgba(242,237,227,.16)}
.lap .bar i:first-child{background:rgba(201,163,94,.75)}
.lap .scr{aspect-ratio:16/10;border-radius:7px}
/* the phone: thin dark bezel, real corner radius, a small pill at the top; it overhangs the window's bottom right corner */
.ph{right:0;bottom:-1%;width:var(--pw);border-radius:calc(var(--pw) * .132);background:#121114;padding:calc(var(--pw) * .028);z-index:2;transform:translateZ(60px) rotateY(6deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.1),0 40px 70px -24px rgba(0,0,0,.85)}
.ph .scr{aspect-ratio:390/844;border-radius:calc(var(--pw) * .112)}
.ph::before{content:"";position:absolute;left:50%;top:calc(var(--pw) * .055);width:24%;height:calc(var(--pw) * .055);translate:-50% 0;border-radius:99px;background:#121114;z-index:1;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.show-nav{display:flex;flex-direction:row;gap:0;flex-wrap:wrap}
.show-nav button{display:inline-flex;align-items:center;gap:12px;min-height:44px;min-width:44px;padding:0 6px 0 0;font-family:var(--mono);font-size:13px;text-transform:uppercase;color:rgba(242,237,227,.6);transition:color .3s}
.show-nav button i{width:8px;height:8px;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);transition:transform .4s}
.show-nav button[aria-current="true"]{color:#f4f3ef}
.show-nav button[aria-current="true"] i{color:var(--gold);transform:scale(1.5)}
.show-nav button:hover{color:var(--gold-hi)}
.show-f .hx h1{font-size:clamp(44px,5vw,74px)}
.show-f .hx.top{right:auto;max-width:min(42%,640px);grid-template-columns:1fr;gap:0;top:50%;bottom:auto;translate:0 -50%}   /* the words sit level with the devices */
.show-f .now{align-items:flex-start;text-align:left;padding-top:18px;gap:6px}
.show-f .now .dots{margin-left:-10px}
.now .dots button{width:44px;height:44px}
.show-f .hx .lk{margin-top:14px}
.show-link{min-height:44px;display:inline-flex;align-items:center}
/* in the page flow (Websites page, Lab): the same frames in a box */
.showbox{position:relative;aspect-ratio:16/8;border-radius:var(--r);overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px var(--line)}
.showbox .show{inset:0}
.showbox .show-rig{left:8%;right:10%;top:8%;bottom:6%;--lw:min(72cqw,calc((86cqh - 40px) * 1.6))}
.showbox .show::before{left:10%;right:-2%}
html:not(.js) .show-item{display:block}
html:not(.js) .show-item+.show-item{display:none}
/* tablets and phones in portrait: the words on top, the devices right under them (flex), filling the rest of the frame */
@media (max-width:1100px) and (min-height:521px) and (orientation:portrait){   /* round 9 (manager decision 4): portrait only, so landscape tablets (1024x768) keep the side-by-side layout */
  .show-f{display:flex;flex-direction:column}
  .show-f>.hx.top{position:relative;order:-1;inset:auto;margin:26px 28px 0;flex:none;max-width:none;translate:none}
  .show-f>.show{position:relative;inset:auto;flex:1 1 0;min-height:0;margin-top:12px}
  .show-rig{--lw:min(84cqw,calc((97cqh - 8px) / .86));--pw:calc(var(--lw) * .25);width:calc(var(--lw) + var(--pw) * .4);left:calc(50% - (var(--lw) + var(--pw) * .4) / 2);right:auto;top:clamp(0px,calc((100cqh - var(--lw) * .86) / 2),14px);bottom:auto;height:calc(var(--lw) * .86)}
  .show-f .now{padding-top:10px;gap:2px}
  .lap{left:0;top:0;translate:none}
  .ph{left:calc(var(--lw) - var(--pw) * .6);right:auto;top:calc(var(--lw) * .3);bottom:auto}
  .show{perspective-origin:50% 40%}
  .show-nav button{padding:0 14px 0 0}
  .showbox{aspect-ratio:16/10}
  .showbox .show-rig{left:5%;right:5%;top:8%;bottom:8%;--lw:min(80cqw,calc((84cqh - 12px) / .98));--pw:calc(var(--lw) * .31)}
}
@media (max-width:640px) and (min-height:521px) and (orientation:portrait){
  .show-f>.hx.top{margin:20px 18px 0}
  .show-f>.show{margin-top:12px}
  .show-rig{--lw:min(86cqw,calc((97cqh - 8px) / .98));--pw:calc(var(--lw) * .31);top:clamp(0px,calc((100cqh - var(--lw) * .97) / 2),14px);height:calc(var(--lw) * .97)}
  .ph{top:calc(var(--lw) * .28)}
  .show::before{left:0;right:0;bottom:-10%;height:40%}
  .lap{border-radius:9px;padding:4px}
  .lap .bar{height:18px;gap:4px;padding:0 7px}
  .lap .bar i{width:6px;height:6px}
  .lap .scr{border-radius:5px}
  .ph{transform:translateZ(40px) rotateY(5deg)}
  .show-nav button{padding:0 10px 0 0;font-size:12px;gap:8px}
  .showbox{aspect-ratio:4/4.2}
  .showbox .show-rig{left:4%;right:3%;top:10%;bottom:8%;--lw:min(86cqw,calc((82cqh - 8px) / .98));--pw:calc(var(--lw) * .31)}
}
/* landscape phones (844x390, 932x430): words on the left half, devices on the right, everything inside the frame */
@media (max-height:520px) and (orientation:landscape){
  .show-rig{left:50%;right:3%;top:7%;bottom:7%;--lw:min(40cqw,calc((80cqh - 30px) * 1.6));--pw:max(96px,calc(var(--lw) * .3))}
  .lap{left:0;right:auto;top:50%;bottom:auto;translate:0 -54%}
  .ph{right:0;left:auto;top:auto;bottom:0}
  .show-f .hx.top{max-width:47%;top:14px;translate:none;right:auto}
  .show-f .hx h1{font-size:clamp(24px,3.3vw,32px);line-height:1}
  .show-f .hx .crumbs{margin-bottom:6px}
  .show-f .hx .cap{font-size:13.5px;line-height:1.35;margin-top:6px;padding-bottom:0}   /* round 9: no clamp (it cut sentences); the text fits */
  .show-f .hx .cta-row{margin-top:10px;flex-wrap:nowrap;gap:8px}
  .show-f .hx .cta-row .pill{padding:0 14px;font-size:11.5px;gap:8px}
  .show-f .now{padding-top:8px}
  .show-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .show-rig{transform:none!important}
  .dev .scr img.long{transform:none!important}
  .show-item{transition:none}
  .show-item.in{animation:none}
}
/* round 9 (manager decision 4, review r8 non-blocking 1): on phones the phone mockup leads. It is about 45% of the frame wide, in
   front, anchored 24px above the frame's bottom edge; the window sits behind it to the upper left, so the phone covers only the
   window's lower right, never the client's headline on the left. The pair fills the space under the words. */
@media (max-width:640px) and (min-height:521px) and (orientation:portrait){
  .show-f .show-rig{--pw:min(45cqw,calc((100cqh - 28px) / 2.32));--lw:min(80cqw,calc(100cqw - var(--pw) * .5));left:0;right:0;width:auto;top:0;bottom:24px;height:auto}
  .show-f .lap{left:1cqw;top:0;translate:none;width:var(--lw)}
  .show-f .ph{left:auto;right:2cqw;top:auto;bottom:0;width:var(--pw)}
}

/* ═════ Round 10 (Oct 22, 2026): every mockup keeps real dimensions on every viewport. The slides that are not showing are
   laid out in place and hidden (not display:none, which made them 0x0), and the scrolling page image holds its box
   before it loads (transparent until then). ═════ */
.show-item{display:block;visibility:hidden;opacity:0}
.show-item.on,.show-item.off{visibility:visible}
.show-item.on{opacity:1}
html:not(.js) .show-item+.show-item{display:block}
.dev .scr img.long{display:block;opacity:0;width:100%;height:auto}
.dev.ld .scr img.long{opacity:1}
/* phones (Work and the case pages): the phone frame is sized so its top stays below the laptop's headline and button
   (about 72% down the laptop screen), so it never cuts a client's headline or button mid-word */
@media (max-width:640px) and (min-height:521px) and (orientation:portrait){
  .show-f .show-rig{--pw:min(36cqw,calc((100cqh - 28px - 40cqw) / 2.2));--lw:min(80cqw,calc(100cqw - var(--pw) * .5))}
}
/* the slides that are not showing keep their size but skip rendering, so their screenshots are not downloaded until shown
   (round 10 Lighthouse: laying them out had pulled 6 extra images into the Work page's first load) */
.show-item:not(.on):not(.off){content-visibility:hidden}