.digital-viewer{max-width:1120px;margin:0 auto;background:#faf9f7;border:1px solid #d5d3ce;padding:22px;color:#242424}
.digital-viewer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:2px 2px 18px}
.digital-viewer-top>span:first-child{font-size:13px;font-weight:600}.digital-viewer-count{font-size:12px;color:#6c6c68;font-variant-numeric:tabular-nums}
.digital-viewer-stage{height:min(50vw,510px);min-height:320px;position:relative;isolation:isolate;overflow:hidden;background:#262725;color:#fff}
.digital-viewer-photo{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:-2}
.digital-viewer-photo[hidden]{display:none}
.digital-viewer-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000a,transparent 56%);z-index:-1;pointer-events:none}
.digital-viewer-stage-bar{position:absolute;left:16px;right:16px;top:16px;display:flex;align-items:center;gap:12px;padding:11px 14px;background:#fffffff0;color:#343434;font-size:11px;box-shadow:0 8px 28px #0002}
.digital-viewer-stage-bar i{width:7px;height:7px;border-radius:50%;background:#a7a7a2;box-shadow:12px 0 #a7a7a2,24px 0 #a7a7a2;margin-right:28px}
.digital-viewer-wordmark{position:absolute;left:5%;right:5%;bottom:7%;font-size:clamp(43px,7vw,105px);font-weight:700;letter-spacing:-.07em;line-height:.95;max-width:850px;text-wrap:balance}
.digital-viewer-hype{background:radial-gradient(circle at 76% 30%,#8952d8 0,#28153f 32%,#0e0b17 72%)}
.digital-viewer-z23{background:linear-gradient(135deg,#0b111b,#17415c 65%,#101923)}
.digital-viewer-hype .digital-viewer-wordmark,.digital-viewer-z23 .digital-viewer-wordmark{font-size:clamp(56px,9vw,142px)}
.digital-viewer-controls{position:absolute;right:17px;bottom:17px;display:flex;gap:6px}
.digital-viewer-controls button{width:38px;height:38px;border:1px solid #ffffffa6;border-radius:50%;background:#ffffffed;color:#242424;display:grid;place-items:center;transition:transform .2s ease}
.digital-viewer-controls button:hover{transform:scale(1.07)}.digital-viewer-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.digital-viewer-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:5%;padding:25px 2px 22px;min-height:138px}
.digital-viewer-type{font-size:11px;color:#65655f}.digital-viewer-name{font-size:clamp(25px,3.3vw,42px);font-weight:600;letter-spacing:-.055em;line-height:1.05;margin:8px 0 0}.digital-viewer-description p{font-size:13px;max-width:440px;margin:0 0 14px}.digital-viewer-link{font-size:12px;border-bottom:1px solid;padding-bottom:4px}
.digital-viewer-thumbs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}.digital-viewer-thumbs button{flex:1 0 110px;min-width:110px;height:100px;border:2px solid transparent;padding:0;position:relative;overflow:hidden;background:#333;color:#fff;text-align:left;opacity:.62;transition:opacity .2s,border-color .2s}.digital-viewer-thumbs button:hover,.digital-viewer-thumbs button[aria-selected=true]{opacity:1}.digital-viewer-thumbs button[aria-selected=true]{border-color:#ab2c30}.digital-viewer-thumbs img{width:100%;height:100%;object-fit:cover}.digital-viewer-thumbs span{position:absolute;left:8px;bottom:7px;right:8px;font-size:11px;font-weight:700;line-height:1.15;text-shadow:0 1px 5px #000}.digital-viewer-thumbs .thumb-hype{background:linear-gradient(130deg,#553087,#120e1e)}.digital-viewer-thumbs .thumb-z23{background:linear-gradient(130deg,#1d5a74,#0a121d)}
@media(max-width:700px){.digital-viewer{padding:12px}.digital-viewer-stage{height:58vw;min-height:260px}.digital-viewer-stage-bar{left:9px;right:9px;top:9px;font-size:9px;padding:8px}.digital-viewer-wordmark{font-size:clamp(36px,9vw,64px);bottom:9%}.digital-viewer-hype .digital-viewer-wordmark,.digital-viewer-z23 .digital-viewer-wordmark{font-size:clamp(44px,11vw,78px)}.digital-viewer-detail{display:block;padding:18px 2px;min-height:0}.digital-viewer-description p{margin-top:15px}.digital-viewer-thumbs button{flex:1 1 0;min-width:0;height:76px}.digital-viewer-thumbs span{font-size:9px;left:5px;bottom:5px}.digital-viewer-controls button{width:32px;height:32px}}
/* The project image is the interface; surrounding controls stay quiet. */
.digital-viewer{position:relative;border:0;padding:0;background:transparent;display:grid;grid-template-columns:1fr;isolation:isolate}
.digital-viewer-top{padding:0 0 18px}.digital-viewer-top>span:first-child{font-weight:400;color:#686862}
.digital-viewer-stage{grid-column:1;grid-row:2;border-radius:12px;height:min(55vw,580px);touch-action:pan-y;cursor:grab}
.digital-viewer-stage:active{cursor:grabbing}.digital-viewer-outgoing{pointer-events:none;z-index:2}
.digital-viewer-stage-bar{background:transparent;color:#fff;box-shadow:none;top:22px;left:24px;right:auto;padding:0;text-shadow:0 1px 8px #0009}.digital-viewer-stage-bar i{display:none}
.digital-viewer-wordmark{bottom:10%;left:5%;right:100px;font-weight:500;letter-spacing:-.065em}
.digital-viewer-controls{right:26px;bottom:26px;gap:9px}.digital-viewer-controls button{width:44px;height:44px;background:#ffffff1a;backdrop-filter:blur(12px);color:#fff;border-color:#ffffff80}
.digital-viewer-detail{grid-row:3;padding:28px 0;min-height:170px}.digital-viewer-name{font-size:clamp(26px,3vw,40px)}.digital-viewer-description p{font-size:14px}.digital-viewer-link{display:inline-block;padding-bottom:7px}
.digital-viewer-thumbs{grid-row:4;gap:14px;padding:4px 0 10px}.digital-viewer-thumbs button{height:120px;border:0;border-radius:7px;opacity:.55;transform:scale(.97);transition:opacity .35s,transform .45s,box-shadow .35s}.digital-viewer-thumbs button[aria-selected=true]{transform:scale(1);box-shadow:0 0 0 2px #ecebe8,0 0 0 3px #242424}.digital-viewer-thumbs button:hover{transform:scale(1)}.digital-viewer-thumbs span{left:12px;bottom:12px;font-size:12px}
@media(max-width:700px){.digital-viewer-top>span:first-child{font-size:11px}.digital-viewer-stage{height:78vw;min-height:290px;border-radius:8px}.digital-viewer-wordmark{font-size:10vw;bottom:25%;right:24px}.digital-viewer-hype .digital-viewer-wordmark,.digital-viewer-z23 .digital-viewer-wordmark{font-size:12vw}.digital-viewer-controls{right:17px;bottom:17px}.digital-viewer-controls button{width:38px;height:38px}.digital-viewer-stage-bar{left:18px;top:18px}.digital-viewer-detail{min-height:0;padding:22px 0}.digital-viewer-description p{font-size:13px}.digital-viewer-thumbs{gap:8px}.digital-viewer-thumbs button{height:78px}.digital-viewer-thumbs span{font-size:9px;left:6px;bottom:7px}}
.digital-viewer>*{min-width:0}.digital-viewer-stage{width:100%;contain:layout paint}.digital-viewer-detail{box-sizing:border-box;align-content:start;overflow:hidden}.digital-viewer-outgoing{align-self:start}
/* Full website heroes, without additional copy covering their layouts. */
.digital-viewer-stage{height:auto;min-height:0;aspect-ratio:3584/1890;background:#eef1f4}
.digital-viewer-photo{object-fit:contain}.digital-viewer-stage:after,.digital-viewer-wordmark,.digital-viewer-stage-bar{display:none}
.digital-viewer-controls{right:12px;bottom:12px}.digital-viewer-controls button{background:#20252de6;color:#fff;width:34px;height:34px;border-color:#ffffff70}
.digital-viewer-thumbs button{background:#fff}.digital-viewer-thumbs .thumb-hype{background:#17151b}.digital-viewer-thumbs .thumb-z23{background:#0b1b31}
.digital-viewer-thumbs img{object-fit:contain;width:100%;height:100%;padding:20px 22px 30px}.digital-viewer-thumbs span{color:#242424;text-shadow:none;font-size:10px;font-weight:500}.digital-viewer-thumbs .thumb-hype span,.digital-viewer-thumbs .thumb-z23 span{color:#fff}
@media(max-width:700px){.digital-viewer-stage{height:auto;min-height:0;aspect-ratio:3584/1890}.digital-viewer-thumbs img{padding:10px 9px 24px}.digital-viewer-thumbs span{font-size:8px}.digital-viewer-controls{right:7px;bottom:7px;gap:5px}.digital-viewer-controls button{width:27px;height:27px}}
/* Keep the complete project presentation comfortable on desktop screens. */
@media(min-width:701px){
  .digital-viewer{width:100%;max-width:900px}
  .digital-viewer-stage{width:min(100%,calc(46svh * 1.8963));justify-self:center;max-height:46svh}
  .digital-viewer-detail{padding:20px 0;min-height:0;gap:5%}
  .digital-viewer-name{font-size:clamp(26px,2.4vw,34px)}
  .digital-viewer-description p{font-size:13px;line-height:1.55;margin-bottom:10px}
  .digital-viewer-thumbs button{height:86px}
  .digital-viewer-thumbs img{padding:13px 20px 23px}
  .digital-viewer-thumbs span{bottom:7px;font-size:9px}
  .digital-cases-heading{padding:40px 0 35px}
}
.digital-viewer-stage:after{display:block;z-index:0;background:linear-gradient(0deg,rgba(8,14,23,.76),rgba(8,14,23,.3) 22%,transparent 52%)}
.digital-viewer-logo{position:absolute;z-index:1;left:4%;bottom:7%;width:auto;height:auto;max-width:28%;max-height:20%;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 2px 8px #0005)}
.digital-viewer-etca .digital-viewer-logo,.digital-viewer-awbp .digital-viewer-logo{filter:brightness(0) invert(1) drop-shadow(0 2px 8px #0005)}
.digital-viewer-controls{z-index:3}
@media(max-width:700px){.digital-viewer-logo{max-width:30%;max-height:23%;left:5%;bottom:9%}}
@media(min-width:901px){
  .digital-cases-heading{align-items:center;padding:36px 0 42px}
  .digital-cases-heading h2{font-size:clamp(38px,4vw,62px);line-height:1.03}
  .digital-cases-heading p{font-size:15px;line-height:1.65;max-width:430px}
  .digital-viewer{max-width:1200px;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);column-gap:6%;align-items:center}
  .digital-viewer-top{grid-column:1/-1;grid-row:1;padding-bottom:20px}
  .digital-viewer-stage{grid-column:1;grid-row:2;width:100%;max-height:none;justify-self:stretch;align-self:center}
  .digital-viewer-detail{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:0;overflow:visible}
  .digital-viewer-name{font-size:clamp(28px,2.8vw,42px);line-height:1.08}
  .digital-viewer-description p{font-size:14px;line-height:1.65;margin:0 0 20px}
  .digital-viewer-type{font-size:12px}
}