/* /work/websites/ — browser frame with live recording, stills row, offers. Builds on brand3.css (.b3-kit per-site accents). */
.s3 .s3-name{font-size:clamp(2.8rem,7.4vw,7.6rem);line-height:.86}
.s3-index{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px}
.s3-chip{aspect-ratio:16/10}
.s3-site{scroll-margin-top:64px}

/* the browser frame */
.s3-frame{position:relative;width:min(100%,1320px);margin:0 auto;border:1px solid color-mix(in srgb,var(--acc) 35%,rgba(255,255,255,.12));border-radius:14px;overflow:hidden;background:#0b0b0b;
  box-shadow:0 40px 120px -40px color-mix(in srgb,var(--acc) 45%,transparent),0 0 0 1px rgba(0,0,0,.6) inset;transform:perspective(1600px) rotateX(var(--tilt,0deg));transform-origin:50% 0;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.s3-frame__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:linear-gradient(#1a1a1a,#121212);border-bottom:1px solid rgba(255,255,255,.07)}
.s3-frame__bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3a}
.s3-frame__bar i:first-child{background:color-mix(in srgb,var(--acc) 85%,#000)}
.s3-frame__url{margin-left:12px;flex:1;max-width:520px;height:22px;display:flex;align-items:center;padding:0 12px;border-radius:6px;background:#0a0a0a;color:rgba(255,255,255,.62);font:600 .72rem/1 var(--sw-font-body);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s3-frame__view{position:relative;display:block;aspect-ratio:16/10;background:#000;cursor:pointer}
.s3-frame__view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.s3-frame__go{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--acc);color:var(--ink);font:700 .74rem/1 var(--sw-font-body);letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.s3-frame__go::after{content:"\2197"}
.s3-frame__view:hover .s3-frame__go,.s3-frame__view:focus-visible .s3-frame__go{opacity:1;transform:none}
.s3-frame__view:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (hover:none){.s3-frame__go{opacity:1;transform:none}}

/* stills */
.s3-stills{width:min(100%,1320px);margin:clamp(14px,1.6vw,22px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.s3-still{margin:0}
.s3-still .b3-open{display:block;width:100%;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background:#000;cursor:zoom-in}
.s3-still img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.s3-still .b3-open:hover img,.s3-still .b3-open:focus-visible img{transform:scale(1.035)}
.s3-still .b3-open:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.s3-still figcaption{margin-top:10px;color:color-mix(in srgb,var(--paper) 72%,transparent);font:600 .8rem/1.35 var(--sw-font-body)}

.s3-foot{width:min(100%,1320px);margin:clamp(22px,3vw,40px) auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.s3-acts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.s3-note{margin:0;max-width:56ch;color:color-mix(in srgb,var(--paper) 60%,transparent);font:500 .82rem/1.45 var(--sw-font-body)}

/* closing offers */
.s3-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);max-width:980px;margin:clamp(28px,4vw,48px) 0 clamp(20px,3vw,32px)}
.s3-offer{display:grid;gap:6px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--gmp-rule);color:var(--gmp-white);text-decoration:none;background:linear-gradient(160deg,rgba(0,255,255,.06),transparent 60%);transition:border-color .3s,transform .3s}
.s3-offer:hover,.s3-offer:focus-visible{border-color:var(--gmp-cyan);transform:translateY(-2px)}
.s3-offer span{color:var(--gmp-cyan);font:700 .66rem/1 var(--sw-font-body);letter-spacing:.16em;text-transform:uppercase}
.s3-offer b{font:700 clamp(2.4rem,5vw,4.2rem)/.9 var(--sw-font-display);letter-spacing:-.05em}
.s3-offer em{font:700 1.05rem/1.2 var(--sw-font-body);font-style:normal}
.s3-offer small{color:var(--gmp-soft,#bbb);font:500 .9rem/1.45 var(--sw-font-body)}

@media (max-width:860px){
  .s3-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s3-stills{grid-template-columns:1fr 1fr}
  .s3-stills .s3-still:nth-child(3){display:none}
  .s3-offers{grid-template-columns:1fr}
  .s3-frame__url{max-width:none}
}
@media (max-width:520px){.s3-stills{grid-template-columns:1fr}.s3-stills .s3-still:nth-child(n+2){display:none}}
@media (prefers-reduced-motion:reduce){.s3-frame{transform:none !important;transition:none}.s3-still img{transition:none}}