/* Section: reel card */
/* ---------- CARD (169:3702 / 169:3761) ---------- */
.card{position:relative;margin:0 calc(20 * var(--u));height:max(calc(1230 * var(--u)), 100svh);border-radius:8px;overflow:hidden;color:#fff;background:var(--blue);isolation:isolate}
.card .bg{position:absolute;inset:-12% 0 -12%;background:url(../../assets/img/ribbons-2560.webp) center/cover;z-index:-1;will-change:transform}
.card .vline{position:absolute;left:50%;top:calc(40 * var(--u));height:calc(1127 * var(--u));width:1px;opacity:.2;background:linear-gradient(180deg,#fff 0%,#fff 6%,#fff 94%,rgba(255,255,255,0) 100%)}
.card .hline{position:absolute;left:calc(40 * var(--u));right:calc(40 * var(--u));top:calc(770 * var(--u));height:1px;background:#fff;opacity:.2}
.lead{position:absolute;left:50%;top:calc(288 * var(--u));width:min(calc(924 * var(--u)), calc(100% - 40px));translate:-50% 0;text-align:center;font-size:max(22px, calc(48 * var(--u)));line-height:1.1667;letter-spacing:-1px}
.reel{position:absolute;left:50%;top:calc(770 * var(--u));transform:translate(-50%,-50%);display:flex;align-items:center;gap:calc(49.667 * var(--u))}
.reel .word{font-family:var(--xh);font-size:max(44px, calc(99.333 * var(--u)));line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.5);will-change:transform}
.ring{position:absolute;left:50%;top:50%;width:calc(554 * var(--u));height:calc(554 * var(--u));margin:calc(-277 * var(--u)) 0 0 calc(-277 * var(--u));pointer-events:none;will-change:transform}
.video{position:relative;width:max(170px, calc(317.86 * var(--u)));aspect-ratio:317.86/198.66;border-radius:5px;background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:calc(19.87 * var(--u));font-family:var(--mono);font-size:max(12px, calc(19.87 * var(--u)));line-height:1.3;color:var(--bg);cursor:pointer}
.video::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.video span{position:relative}
.vwrap{position:relative}
.see{position:absolute;left:calc(100% + 12 * var(--u));top:calc(100% + 23.5 * var(--u));display:flex;align-items:flex-end;gap:calc(9.93 * var(--u));color:var(--green);font-family:var(--xh);font-size:max(16px, calc(31.04 * var(--u)));line-height:.8;white-space:nowrap}
.see img{width:calc(39.73 * var(--u));height:calc(41 * var(--u));margin-bottom:calc(14.9 * var(--u))}
.quote{position:absolute;left:50%;top:calc(1110 * var(--u));transform:translateX(-50%);width:min(calc(954 * var(--u)), calc(100% - 40px));text-align:center;font-family:var(--xh);font-size:max(16px, calc(24 * var(--u)));line-height:1.333;letter-spacing:-.06em}



@media (max-width:820px){
  .card{margin:0 10px;height:auto;min-height:0;padding:104px 20px 72px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .card .vline{top:0;height:100%}
  .card .hline{display:none}
  .lead{position:relative;left:auto;top:auto;translate:none;width:auto;max-width:15em;font-size:clamp(24px, 7.2vw, 30px);line-height:1.15;letter-spacing:-.02em}
  .reel{position:relative;left:auto;top:auto;transform:none;margin:150px 0 170px;gap:0}
  .reel .word{display:none}
  .vwrap::before{content:"";position:absolute;left:50%;top:50%;width:100vw;height:1px;background:#fff;opacity:.2;transform:translateX(-50%)}
  .ring{width:360px;height:360px;margin:-180px 0 0 -180px}
  .video{width:min(250px, 66vw);padding:14px;font-size:13px}
  .see{display:flex;left:18%;top:calc(100% + 26px);gap:8px;font-size:19px}
  .see img{width:26px;height:27px;margin-bottom:10px}
  .quote{position:relative;left:auto;top:auto;transform:none;width:auto;font-size:16px;line-height:1.4;letter-spacing:-.02em}
}