/* Upright cards arranged around a real CSS 3D cylinder, not an overlapping flat fan. */
.portfolio-hero .sd-cylinder{container-type:inline-size;align-self:center;perspective:none}
.sd-cylinder-stage{position:relative;width:100%;height:58cqw;min-height:220px;perspective:180cqw;touch-action:pan-y;isolation:auto}
.sd-cylinder-ring{position:absolute;left:35%;top:calc(50% - 11.25cqw);width:30%;height:22.5cqw;transform-style:preserve-3d;transform:rotateX(-6deg) rotateY(0deg)}
.sd-cylinder-panel{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--panel-angle)) translateZ(43.5cqw)}
.sd-cylinder-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #64dfff88;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 12px 30px #0006;background:#0b2135;color:#fff}
.sd-cylinder-front{transform:rotateY(0deg);text-decoration:none}
.sd-cylinder-preview{position:relative;flex:1;min-height:0;overflow:hidden;background:#071421}
.sd-cylinder-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.sd-cylinder-preview .project-preview{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
/* Keep the three live compositions as compact first screens in the 4:3 frames. */
.sd-cylinder-preview .preview-nav{height:15%;padding:3% 5%}
.sd-cylinder-preview .preview-nav b{font-size:7cqw}
.sd-cylinder-preview .preview-hero{height:85%;padding:4% 5%;min-height:0}
.sd-cylinder-preview .preview-hero strong{font-size:6.6cqw;margin:5% 0}
.sd-cylinder-preview .preview-hero p{font-size:2.2cqw;margin-bottom:6%}
.sd-cylinder-preview .preview-cta{font-size:2.2cqw;padding:4% 6%;display:inline-block}
.sd-cylinder-preview .preview-bru .preview-hero{gap:3%}
.sd-cylinder-preview .preview-bru .preview-hero>div{height:58%;flex:none}
.sd-cylinder-preview .preview-bru .preview-hero>img{height:39%;min-height:0}
.sd-cylinder-preview .preview-bru .preview-hero strong{font-size:6.4cqw;margin:2% 0}
.sd-cylinder-preview .preview-bru .preview-hero p{margin:0 auto 2%}
.sd-cylinder-preview .preview-bru .preview-cta{padding:2% 5%}
.sd-cylinder-preview .preview-sever .preview-hero strong{font-size:8cqw}
.sd-cylinder-back{transform:rotateY(180deg);justify-content:center;align-items:center;gap:12px;background:radial-gradient(ellipse at 80% 0,#164d68,transparent 70%),#081c30;border-color:#39b9ff55}
.sd-cylinder-back-logo{display:flex;align-items:center;gap:6px;font-size:clamp(10px,2.2cqw,16px);font-weight:800;letter-spacing:.06em}
.sd-cylinder-back-logo i{width:7px;height:7px;border-radius:2px;background:#39b9ff;box-shadow:0 0 16px #39b9ff}
.sd-cylinder-back>span:nth-child(2){color:#b4d3e6;font-size:clamp(9px,1.6cqw,12px)}
.sd-cylinder-back small{font-size:clamp(6px,1cqw,8px);letter-spacing:.14em;color:#77a4bf}
.sd-cylinder-controls{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;margin:6px auto 0;z-index:2}
.sd-cylinder-controls button{width:44px;height:44px;flex:none;border:1px solid #3c657d;border-radius:50%;background:#071b35;color:#d8efff;font:600 18px/1 "Segoe UI",Arial,sans-serif;cursor:pointer}
.sd-cylinder-controls button:hover{background:#11344b;border-color:#39b9ff}
.sd-cylinder-controls button[aria-pressed=true]{border-color:#c6ff47;color:#c6ff47}
.sd-cylinder-open{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;min-width:120px;color:#fff;font-size:16px;font-weight:650}
.sd-cylinder-open:hover{color:#c6ff47}
.sd-cylinder:focus-visible,.sd-cylinder a:focus-visible,.sd-cylinder button:focus-visible{outline:3px solid #c6ff47;outline-offset:4px}
.sd-cylinder-position{margin:12px 0 0;text-align:center;color:#92b5ce;font-size:13px}
.sd-cylinder .deck-note{text-align:center;margin-top:24px}
.sd-cylinder[data-reduced] .sd-cylinder-stage{height:52.5cqw;min-height:0;perspective:none}
.sd-cylinder[data-reduced] .sd-cylinder-ring{left:15%;top:0;width:70%;height:100%;transform:none!important}
.sd-cylinder[data-reduced] .sd-cylinder-panel{transform:none;display:none}
.sd-cylinder[data-reduced] .sd-cylinder-panel[data-current]{display:block}
.sd-cylinder[data-reduced] .sd-cylinder-back{display:none}
.sd-cylinder[data-reduced] .sd-cylinder-preview .project-preview{font-size:14px}
.sd-cylinder[data-reduced] [data-cylinder-pause]{display:none}
@media(max-width:620px){
 .sd-cylinder-stage{height:66cqw;min-height:210px}
 .sd-cylinder-face{border-radius:10px}
 .sd-cylinder-back{gap:8px}
 .sd-cylinder-back-logo{font-size:8px;gap:3px}
 .sd-cylinder-back-logo i{width:5px;height:5px}
 .sd-cylinder-back small{display:none}
 .sd-cylinder .deck-note{margin-top:18px}
 .sd-cylinder[data-reduced] .sd-cylinder-stage{height:60cqw}
 .sd-cylinder[data-reduced] .sd-cylinder-ring{width:80%;left:10%}
}
@media(prefers-reduced-motion:reduce){.sd-cylinder-ring{animation:none!important}}