/* JustSigns.tv: 45-second promo video (hero play button, zoom-on-scroll card, lightbox) */
.btn-play{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 6px 0 0;border:0;background:none;color:var(--fg);font:700 15px/1 var(--f-body);cursor:pointer;font-family:inherit}
.btn-play-ic{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(247,187,39,.14);border:1px solid rgba(247,187,39,.4);transition:background .2s ease,transform .2s ease}
.btn-play-ic svg{width:16px;height:16px;margin-left:3px;fill:var(--brand)}
.btn-play:hover .btn-play-ic{background:var(--brand);transform:scale(1.06)}
.btn-play:hover .btn-play-ic svg{fill:var(--brand-ink)}
.btn-play-len{font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--muted)}

/* Section: centred heading, then a full-width card that grows from the text column to the screen edges while you scroll */
.promo-sec{padding-block:clamp(64px,8vw,104px)}
.promo-sec.compact{padding-block:clamp(24px,4vw,48px) clamp(56px,7vw,96px)}
.promo-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.promo-head h2{margin-top:16px;font-size:clamp(32px,4vw,52px);line-height:1.05;font-weight:800}
.promo-head h2 .dot{color:var(--brand)}
.promo-head p{margin-top:18px;max-width:36em;color:var(--muted);font-size:17px}
.promo-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.promo-meta span{height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);display:inline-flex;align-items:center;font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;color:#C9CDD3}

.promo-stage{--p:0;--gap:48px;margin-top:clamp(36px,5vw,56px)}
.promo-card{position:relative;display:block;width:100%;height:min(56.25vw,calc(100vh - 96px));height:min(56.25vw,calc(100svh - 96px));min-height:260px;padding:0;border:0;overflow:hidden;background:var(--ink-2);cursor:pointer;color:var(--fg);
  clip-path:inset(0 calc((1 - var(--p)) * var(--gap)) round calc((1 - var(--p)) * 28px));will-change:clip-path}
.promo-card picture{position:absolute;inset:0}
.promo-card img,.promo-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - .06 * var(--p)));will-change:transform}
.promo-card video{opacity:0;transition:opacity .6s ease}
.promo-card video.ready{opacity:1}
.promo-card::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,9,11,.18) 0,rgba(8,9,11,.08) 40%,rgba(8,9,11,.45) 100%);transition:background .3s ease}
.promo-card:hover::after{background:radial-gradient(ellipse at center,rgba(8,9,11,.1) 0,rgba(8,9,11,.04) 40%,rgba(8,9,11,.38) 100%)}
.promo-cta{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:16px}
.promo-play{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--brand);box-shadow:0 0 0 12px rgba(247,187,39,.2),0 18px 40px -10px rgba(0,0,0,.7);transition:transform .25s ease,box-shadow .25s ease}
.promo-play svg{width:30px;height:30px;margin-left:5px;fill:var(--brand-ink)}
.promo-card:hover .promo-play{transform:scale(1.08);box-shadow:0 0 0 16px rgba(247,187,39,.24),0 18px 40px -10px rgba(0,0,0,.7)}
.promo-cta-txt{padding:8px 14px;border-radius:999px;background:rgba(8,9,11,.72);font:700 15px/1 var(--f-body);white-space:nowrap}
.promo-cta-txt b{margin-left:6px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--brand)}
@media (max-width:640px){.promo-card{height:min(125vw,calc(100vh - 96px));height:min(125vw,calc(100svh - 96px))}.promo-card img{object-position:center 30%}.promo-play{width:64px;height:64px;box-shadow:0 0 0 8px rgba(247,187,39,.2),0 12px 30px -8px rgba(0,0,0,.7)}.promo-play svg{width:22px;height:22px;margin-left:4px}.promo-cta{gap:12px}.promo-cta-txt{font-size:13px}}

/* Lightbox */
html.promo-open{overflow:hidden}
.promo-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(4,5,6,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .25s ease}
.promo-modal[hidden]{display:none}
.promo-modal.on{opacity:1}
.promo-box{width:min(1280px,100%,calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 120px -20px rgba(0,0,0,.9)}
.promo-box.is-v{width:min(100%,calc((100vh - 120px) * 9 / 16));width:min(100%,calc((100dvh - 120px) * 9 / 16));aspect-ratio:9/16}
.promo-box video{display:block;width:100%;height:100%;background:#000}
.promo-close{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(16,18,22,.9);color:var(--fg);cursor:pointer}
.promo-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.promo-close:hover{border-color:var(--fg)}
@media (prefers-reduced-motion:reduce){.promo-modal,.promo-play,.btn-play-ic,.promo-card video{transition:none}}