/* Section: reel card */
/* ---------- CARD (Figma 468:2964) ---------- */
.card{position:relative;margin:0 calc(20 * var(--u));height:max(calc(1225 * var(--u)), 100svh);border-radius:max(12px, calc(20 * var(--u)));overflow:hidden;color:var(--white);background:var(--white);isolation:isolate}
/* desktop: the card spans the page and is cut by a clip; on scroll it opens to full screen (card.js) */
@media (min-width:821px){ .card{margin:0;border-radius:0;clip-path:inset(0 calc(20 * var(--u)) round max(12px, calc(20 * var(--u))))} }
.card::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(180,180,180,.4);mix-blend-mode:overlay;pointer-events:none}
.card .bg{position:absolute;inset:-12% 0 -12%;background:url(../../assets/img/ribbons-blue-2560.jpg) center bottom/cover;z-index:-1;will-change:transform}
.card .vline{position:absolute;left:50%;top:calc(40 * var(--u));height:calc(1052 * 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(50 * var(--u));right:calc(50 * var(--u));top:calc(762 * var(--u));height:1px;background:#fff;opacity:.2}
.lead{position:absolute;left:50%;top:calc(196 * var(--u));width:min(calc(1064 * var(--u)), calc(100% - 40 * var(--p)));translate:-50% 0;text-align:center;font-size:max(calc(22 * var(--p)), var(--fs-h3));line-height:1.16;letter-spacing:-.0104em}
.reel{position:absolute;left:50%;top:calc(762 * var(--u));transform:translate(-50%,-50%);display:flex;align-items:center;gap:calc(96 * var(--u))}
.reel .word{font-family:var(--xh);font-weight:var(--fw-r);font-size:var(--fs-xl);line-height:1;letter-spacing:-.005em;color:var(--white);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(309 * var(--u)));aspect-ratio:309/194;border-radius:calc(5 * var(--p));background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:calc(20 * var(--u));font-family:var(--mono);font-size:max(calc(12 * var(--p)), var(--fs-caption));line-height:1.4;color:var(--paper);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-weight:var(--fw-r);font-size:max(calc(16 * var(--p)), var(--fs-lead));line-height:1.32;letter-spacing:-.018em;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(1097 * var(--u));transform:translateX(-50%);width:min(calc(954 * var(--u)), calc(100% - 40 * var(--p)));text-align:center;font-family:var(--xh);font-size:max(calc(16 * var(--p)), var(--fs-body-l));line-height:1.4}



@media (max-width:820px){
  /* Figma 468:3374: full width, 830 tall, everything placed from the top */
  .card{margin:0;height:830px;min-height:0;border-radius:20px}
  .card .vline{top:32px;height:724px}
  .card .hline{display:none}
  .lead{top:83px;width:calc(100% - 32px);max-width:358px;font-size:var(--fs-h4);line-height:1.24;letter-spacing:-.021em}
  .reel{top:517px;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(309px, calc(100vw - 80px));padding:20px;font-size:var(--fs-body)}
  .see{left:50%;top:calc(100% - 16px);align-items:flex-start;gap:10px;font-size:var(--fs-lead);line-height:1.32;white-space:normal}
  .see img{width:54px;height:55px;margin:0}
  .see span{width:118px;padding-top:45px}
  .quote{top:748px;width:calc(100% - 4px);font-size:var(--fs-body-l);line-height:1.4}
}