/* Sixty Seconds, the one closing banner used at the foot of every page.
   H11 (Raph + Zak, 27 Oct): "super boring ... a proper, really nicely designed bottom banner, especially if it's going to go on each one of these pages."
   Bar: Orizon's CTA band (one bordered panel, centred, big confident type, two buttons). Ours adds a living backdrop and proof it works:
     - ground #060A14 (--bg), the dotted wave: seven dotted rings in the spectrum --a1..--a7 teal to violet, expanding from behind the headline over a quiet dot field
     - a big Cabinet Grotesk 800 lockup (second line in the spectrum gradient), Inter body, emerald ONLY on the primary action (the .btn)
     - a fanned row of five real reel clips (muted loops) rising out of the bottom edge, cropped by the panel
   Motion (MOTION-SPEC): the copy reveals with the core's P7 (data-reveal, 0/80/160/240/320 ms), the clips cascade with P8 (data-reveal-cards, 100 ms each).
   Ambient life = the rings only (transform + opacity); they run only while the banner is on screen and the tab is visible (js/banner.js toggles .cb-live), and never under reduced motion,
   where the rings sit as a static frame and the clips show their poster. Phones: three clips, smaller rings, no continuous blur or backdrop-filter.
   Markup (copy exactly; change only the headline and the one line, and the demo href; the video/poster paths are relative to the page):
   <section class="sec closer" aria-label="Start with a conversation"><div class="wrap"><div class="closer-panel">
     <div class="cb-bg" aria-hidden="true"><i class="cb-dots"></i><span class="cb-rings"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span><i class="cb-glow"></i></div>
     <div class="cb-copy">
       <p class="eyebrow" data-reveal><span>Start here</span></p>
       <h2 data-reveal data-reveal-delay="80">[Headline. <span class="grad">Second half.]</span></h2>
       <p class="closer-p" data-reveal data-reveal-delay="160">[One line.]</p>
       <div class="closer-acts" data-reveal data-reveal-delay="240"><a class="btn lg" href="https://savvycal.com/sixtyseconds/U065T5J2M61" target="_blank" rel="noopener noreferrer">Book a call</a><a class="btn ghost lg" href="{demo}">See one built for you</a></div>
       <p class="closer-free" data-reveal data-reveal-delay="320">Your first video is free.</p>
     </div>
     <ul class="cb-reel" aria-hidden="true" data-reveal-cards><li><video muted loop playsinline preload="none" tabindex="-1" poster="{assets}/img/reel-X-poster.jpg"><source src="{assets}/video/reel-X.mp4" type="video/mp4"></video></li> x5</ul>
   </div></div></section><script src="{js}/banner.js" defer></script> */
.closer{padding-block:var(--sec)}
.closer-panel{position:relative;overflow:hidden;isolation:isolate;max-width:1248px;margin-inline:auto;border-radius:var(--r3);
  border:1px solid rgb(var(--line-br)/.65);background:#060A14;
  box-shadow:0 40px 120px -50px rgb(var(--a5)/.45),inset 0 1px 0 rgb(var(--ink)/.06);
  padding:clamp(64px,8vw,112px) clamp(20px,5vw,72px) 0;display:flex;flex-direction:column;align-items:center;text-align:center}
/* a one-pixel spectrum hairline along the top edge */
.closer-panel::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--a1)),rgb(var(--a4)) 50%,rgb(var(--a7)),transparent)}

/* ---- the living backdrop ---- */
.cb-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.cb-dots{position:absolute;inset:0;
  background:radial-gradient(circle,rgb(var(--a3)/.5) 1px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 42%,#000,transparent 78%);mask-image:radial-gradient(ellipse 62% 70% at 50% 42%,#000,transparent 78%);opacity:.55}
.cb-glow{position:absolute;left:50%;top:40%;width:min(1100px,150%);aspect-ratio:2/1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgb(var(--a5)/.34),rgb(var(--a2)/.12) 55%,transparent);animation:cbGlow 9s ease-in-out infinite alternate;animation-play-state:paused}
.cb-rings{position:absolute;left:50%;top:40%;width:min(1500px,230vw);aspect-ratio:1;translate:-50% -50%;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.cb-rings i{position:absolute;inset:0;border-radius:50%;border:3px dotted rgb(var(--c,var(--a1)));opacity:0;transform:scale(.12);
  animation:cbRing 14s linear infinite;animation-play-state:paused;animation-delay:calc(var(--k,0)*-2s)}
.cb-rings i:nth-child(1){--c:var(--a1);--k:0}.cb-rings i:nth-child(2){--c:var(--a2);--k:1}.cb-rings i:nth-child(3){--c:var(--a3);--k:2}
.cb-rings i:nth-child(4){--c:var(--a4);--k:3}.cb-rings i:nth-child(5){--c:var(--a5);--k:4}.cb-rings i:nth-child(6){--c:var(--a6);--k:5}.cb-rings i:nth-child(7){--c:var(--a7);--k:6}
.closer-panel.cb-live .cb-rings i,.closer-panel.cb-live .cb-glow{animation-play-state:running}
/* R3 G1 (Raph, 28 Oct): rings were too distracting; peak opacity .85 -> .28, mid .35 -> .12 (about a third), and a slightly softer, thinner dot */
@keyframes cbRing{0%{opacity:0;transform:scale(.12)}12%{opacity:.28}70%{opacity:.12}100%{opacity:0;transform:scale(1)}}
@keyframes cbGlow{from{opacity:.75;transform:scale(.96)}to{opacity:1;transform:scale(1.06)}}

/* ---- the type lockup ---- */
.cb-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.closer h2{max-width:1000px;font-size:clamp(38px,6vw,88px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.closer h2 .grad{display:block;width:fit-content;margin-inline:auto}
.closer-p{max-width:620px;font-size:clamp(16px,1.25vw,18px);line-height:1.56;color:rgb(var(--body));text-wrap:pretty}
.closer-acts{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.closer-free{font-size:14px;color:rgb(var(--muted))}

/* ---- the reel: five real clips, fanned, rising out of the bottom edge ---- */
.cb-reel{position:relative;z-index:1;list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,1.4vw,18px);width:100%}
.cb-reel::after{content:"";position:absolute;inset:auto -20px 0;height:38%;pointer-events:none;background:linear-gradient(rgb(6 10 20/0),rgb(6 10 20/.88))}
.cb-reel li{flex:0 0 clamp(150px,17vw,224px);aspect-ratio:16/9;border-radius:var(--r1);overflow:hidden;background:rgb(var(--s1));
  border:1px solid rgb(var(--line-br)/.7);box-shadow:0 24px 50px -22px rgb(0 0 0/.85)}
.cb-reel li:nth-child(1),.cb-reel li:nth-child(5){translate:0 38px}
.cb-reel li:nth-child(2),.cb-reel li:nth-child(4){translate:0 14px}
.cb-reel li:nth-child(3){flex-basis:clamp(170px,20vw,264px);border-color:rgb(var(--a3)/.6);box-shadow:0 28px 60px -22px rgb(var(--a5)/.5)}
.cb-reel video{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:760px){
  .closer-panel{border-radius:var(--r2)}
  .closer-acts{flex-direction:column;align-items:center}.closer-acts .btn{width:260px}
  .cb-rings i{border-width:2px}
  .cb-reel{margin-top:40px;margin-bottom:-18px}
  .cb-reel li:nth-child(1),.cb-reel li:nth-child(5){display:none}
  .cb-reel li{flex:0 0 40%}.cb-reel li:nth-child(3){flex-basis:58%}
  .cb-reel li:nth-child(2),.cb-reel li:nth-child(4){translate:0 30px}
}
/* reduced motion: static frame. The rings sit still at spread-out sizes, nothing runs, nothing autoplays (the script also stands down). */
@media (prefers-reduced-motion:reduce){
  .cb-rings i,.cb-glow{animation:none!important}
  .cb-rings i{opacity:.14}
  .cb-rings i:nth-child(1){transform:scale(.16)}.cb-rings i:nth-child(2){transform:scale(.28)}.cb-rings i:nth-child(3){transform:scale(.42)}
  .cb-rings i:nth-child(4){transform:scale(.56)}.cb-rings i:nth-child(5){transform:scale(.7)}.cb-rings i:nth-child(6){transform:scale(.84)}.cb-rings i:nth-child(7){transform:scale(.98)}
}
@media print{.cb-bg{display:none}}