.hero .id-card{background:#141416;color:var(--cream);cursor:grab;touch-action:none;z-index:2;margin-top:92px;width:282px;height:auto;aspect-ratio:638/1016;border:0;border-radius:12px;padding:0;perspective:1100px;overflow:visible;box-shadow:0 18px 42px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .25s ease,box-shadow .3s ease}
.id-card:active{cursor:grabbing}.id-card.dragging{animation:none!important;box-shadow:0 30px 58px #000d,0 2px 8px rgba(0,0,0,.45)}
.card-scene{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.35,.12,.28,1)}
.id-card.flipped .card-scene{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:12px;background:#141416;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-face img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.card-back{transform:rotateY(180deg)}
.card-hole{position:absolute;z-index:2;top:8px;left:calc(50% - 14px);height:8px;width:28px;border-radius:0 0 7px 7px;background:#050505;border:1px solid rgba(255,255,255,.1);border-top:0;box-shadow:inset 0 -2px 1px #3a3a3a}
 .nav{z-index:1000}.portrait{z-index:11}.lanyard{height:315px;width:130px;position:absolute;top:-220px;left:calc(50% - 65px);z-index:1;pointer-events:none;transform-origin:top center;will-change:transform,height}.lanyard:before{content:'';position:absolute;top:0;left:51px;width:28px;height:283px;background:#99110c;box-shadow:inset 1px 0 #fff4,inset -1px 0 #3d0000,1px 0 3px #0009}.lanyard:after{content:'';position:absolute;top:279px;left:63px;width:4px;height:34px;border-radius:3px;background:linear-gradient(90deg,#111,#777,#111);box-shadow:0 1px 3px #000}.lanyard-ribbon{position:absolute;z-index:1;top:0;left:51px;width:28px;height:100%;overflow:hidden;background:#99110c}.lanyard-ribbon:after{content:'';position:absolute;top:0;left:0;width:calc(var(--lanyard-height) - 32px);height:28px;background:url('images/lanyard-fhin-vertical.png') left center/auto 28px no-repeat;transform:translateX(28px) rotate(90deg);transform-origin:top left}.lanyard i{position:absolute;z-index:2}.lanyard-clip{top:273px;left:54px;width:22px;height:22px;border:3px solid #5d5d5d;border-right-color:#111;border-bottom-color:#111;border-radius:50%;box-shadow:inset 0 0 0 2px #222,0 2px 3px #0008}.lanyard-cord{top:291px;left:60px;width:11px;height:11px;background:#171717;border:1px solid #777;border-radius:2px;transform:rotate(45deg)}
.drag-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font:8px 'DM Mono',monospace;letter-spacing:.12em;color:#858585;white-space:nowrap;animation:fade 1.5s infinite alternate}
 @media(max-width:700px){.drag-hint{bottom:0}.id-card{margin-top:92px}.lanyard{top:-220px}}