/* /book spectacle (BOOK-PAGE-SPECTACLE-SPEC.md, 6 Oct 2026). Linked ONLY on
   /book, after site.css. Everything is scoped under .book-spec (or .book-bg),
   so nothing here can leak to other pages. All motion is CSS keyframes with
   backwards fill (so with reduced motion, or no animation support, the page
   is simply its final state). Motion is transform + opacity only. The booking
   form markup itself is never touched: it is just placed inside .book-spec__card. */

/* ---- Background: the hero video, fixed behind the whole page ---- */
.book-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--navy);pointer-events:none}
.book-bg .hero__media{position:absolute;inset:0}
/* extra navy so copy stays readable wherever the loop is bright; the form card floats over this */
.book-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(11,22,38,.62) 0%,rgba(11,22,38,.36) 52%,rgba(11,22,38,.12) 100%),
  radial-gradient(ellipse 50% 60% at 78% 42%,rgba(207,174,107,.12),rgba(207,174,107,0) 70%)}
.book-bg .hero__scrim{background:linear-gradient(180deg,rgba(11,22,38,.5) 0%,rgba(11,22,38,.3) 50%,rgba(11,22,38,.7) 100%)}
.book-nav{z-index:5}
.book-nav .mnav-btn{display:none}  /* logo only: no menu on this page */
.book-nav .nav__in{justify-content:center}
.book-nav .logo{padding:9px 6px;align-items:center}
main{position:relative;z-index:2}
.book-page__foot{position:relative;z-index:2;background:rgba(11,22,38,.82)}

/* ---- Layout ---- */
.book-spec.book-page{display:flex;align-items:center;min-height:100svh;padding:clamp(88px,10.5svh,112px) 0 clamp(56px,8svh,84px);background:none}
.book-spec__grid{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;text-align:center}
.book-spec__left,.book-spec__right{display:contents}
.book-spec__head{order:1}
.bsteps-wrap{order:2}
.book-spec__right{order:3}
.book-spec__extras{order:4}
.book-spec__card{order:3}
.book-spec__contact{order:5}

.book-spec .kicker{justify-content:center;font-size:14px;letter-spacing:.02em}
.book-spec__title{font-size:clamp(34px,10vw,44px);line-height:1.04;letter-spacing:-0.045em;font-weight:700;margin:16px 0 0;text-wrap:balance}
.book-spec__title .line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.book-spec__title .line{display:inline-block;animation:bk-line .9s var(--ease) .1s both}
.book-spec__title .line-mask:nth-child(2) .line{animation-delay:.22s}
.book-spec__title .line--gold{color:var(--gold);background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 42%,var(--gold-2) 50%,var(--gold) 58%,var(--gold) 100%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bk-line .9s var(--ease) .22s both,bk-shimmer 1.2s cubic-bezier(.4,0,.2,1) 1.1s 1 both}
.book-spec__sub{margin:18px auto 0;max-width:34ch;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--on-navy-2);animation:bk-rise .8s var(--ease) .5s both}
.book-spec .kicker{animation:bk-rise .7s var(--ease) both}

/* ---- What happens next: three steps joined by a gold line ---- */
.bsteps-wrap{margin-top:28px}
.bsteps-label{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-2);animation:bk-rise .7s var(--ease) .8s both}
.bsteps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.bstep{position:relative;display:grid;justify-items:center;gap:8px}
.bstep__n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(207,174,107,.55);background:rgba(11,22,38,.78);color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.02em;animation:bk-rise .7s var(--ease) both}
.bstep__b{animation:bk-rise .7s var(--ease) both}
.bstep__t{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--on-navy)}
.bstep__s{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--on-navy-2);max-width:36ch}
/* the gold line: one segment per gap, drawn top to bottom on load (900ms in all) */
.bstep:not(:last-child)::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:22px;margin-left:-.5px;background:linear-gradient(180deg,var(--gold),rgba(207,174,107,.35));transform-origin:top;animation:bk-draw .45s linear both}
.bstep:nth-child(1)::after{animation-delay:.4s}
.bstep:nth-child(2)::after{animation-delay:.85s}
.bstep:nth-child(1) .bstep__n,.bstep:nth-child(1) .bstep__b{animation-delay:1.3s}
.bstep:nth-child(2) .bstep__n,.bstep:nth-child(2) .bstep__b{animation-delay:1.42s}
.bstep:nth-child(3) .bstep__n,.bstep:nth-child(3) .bstep__b{animation-delay:1.54s}

/* ---- Form card (the booking form, unchanged, floats over the video) ---- */
.book-spec__card{position:relative;margin-top:28px;text-align:left;animation:bk-rise .9s var(--ease) .3s both}
.book-spec__card::before{content:"";position:absolute;inset:-28px -22px;z-index:-1;border-radius:28px;background:radial-gradient(ellipse at 50% 40%,rgba(207,174,107,.5),rgba(207,174,107,0) 70%);filter:blur(26px);pointer-events:none}
.book-spec .book-page__cal{margin:0;max-width:none;border:1px solid rgba(207,174,107,.4);border-radius:14px;box-shadow:0 30px 80px -24px rgba(0,0,0,.65),0 0 110px -14px rgba(207,174,107,.3),0 0 0 1px rgba(255,255,255,.04)}
.book-spec .book-page__cal .book__panel{padding:clamp(20px,5vw,30px) clamp(18px,5vw,30px)}
.book-spec .book-page__cal.cal{min-height:0}
.book-spec .book__disclosure{padding:0 clamp(18px,5vw,30px) clamp(18px,4vw,26px);margin:0}

/* ---- Proof chips, founders, one-firm line ---- */
.book-spec__extras{display:grid;gap:22px;margin-top:34px;justify-items:center}
.bproof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bproof li{padding:9px 15px;border:1px solid rgba(243,241,234,.16);border-radius:999px;background:rgba(16,30,50,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13.5px;line-height:1.35;color:var(--on-navy)}
.bproof b{color:var(--gold);font-weight:700}
.bfounders{display:flex;flex-direction:column;align-items:center;gap:10px}
.bfounders__av{display:flex}
.bav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--navy);background:linear-gradient(145deg,var(--navy-3),var(--navy-2));box-shadow:0 0 0 1px rgba(207,174,107,.6);color:var(--gold);font-size:17px;font-weight:700}
.bav + .bav{margin-left:-10px}
.bav img{width:100%;height:100%;object-fit:cover;display:block}
.bfounders p{margin:0;font-size:14.5px;line-height:1.5;color:var(--on-navy-2);max-width:34ch}
.bfounders strong{color:var(--on-navy);font-weight:600}
.book-spec__one{margin:0;font-size:14.5px;color:var(--on-navy-2);font-style:normal}
.book-spec__contact{margin-top:14px;text-align:center}
.book-spec__contact .book-page__email{margin:0}
.book-spec__contact .book-page__email{line-height:2.4}
.book-spec__contact .book-page__email a{padding:13px 0}  /* tall tap area without moving the line */
.book-spec__extras,.book-spec__contact{animation:bk-rise .8s var(--ease) .6s both}

/* ---- Desktop: split 50/50, form card sticky on the right ---- */
@media (min-width:1000px){
  .book-spec__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,6vw,96px);align-items:start;text-align:left}
  .book-spec__left{display:block}
  .book-spec__right{display:block;position:sticky;top:32px;align-self:start}
  .book-spec__head,.bsteps-wrap,.book-spec__card,.book-spec__extras,.book-spec__contact{order:0}
  .book-spec .kicker{justify-content:flex-start;font-size:15px}
  .book-spec__title{font-size:clamp(42px,3.6vw,54px);margin-top:14px}
  .book-spec__sub{margin:14px 0 0;max-width:44ch}
  .bsteps-wrap{margin-top:26px}
  .bsteps-label{text-align:left}
  .bsteps{gap:22px}
  .bstep{grid-template-columns:40px minmax(0,1fr);justify-items:start;column-gap:18px;align-items:start}
  .bstep__n{width:40px;height:40px;font-size:14px}
  .bstep__t{font-size:17px;padding-top:2px}
  .bstep__s{font-size:14.5px;max-width:46ch}
  .bstep:not(:last-child)::after{left:20px;top:44px;bottom:-20px;height:auto}
  .book-spec__card{margin-top:0}
  .book-spec__extras{justify-items:start;margin-top:30px;gap:18px}
  .bproof{justify-content:flex-start}
  .bfounders{flex-direction:row;align-items:center;gap:14px}
  .bfounders p{max-width:none}
  .book-spec__contact{text-align:center;margin-top:12px}
}
/* a card taller than the screen would hide its bottom while stuck: book.js adds .is-tall then */
.book-spec__right.is-tall{position:static}

/* ---- Phones (BOOKING-FAST-SPEC.md Part E): headline, then the FORM, then "what happens next" below it ---- */
@media (max-width:768px){
  .book-spec__head{order:1}
  .book-spec__right{order:2}
  .book-spec__card{order:2;margin-top:22px}
  .bsteps-wrap{order:3;margin-top:36px}
  .book-spec__extras{order:4}
  .book-spec__contact{order:5}
  .book-spec__sub{max-width:none}
}

/* ---- Keyframes ---- */
@keyframes bk-line{from{transform:translateY(112%)}to{transform:none}}
@keyframes bk-shimmer{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes bk-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bk-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  .book-spec *,.book-spec *::before,.book-spec *::after{animation:none!important}
  .book-spec__title .line--gold{background:none;-webkit-text-fill-color:currentColor;color:var(--gold)}
}
@media (prefers-reduced-data:reduce){.book-bg .hero__video{display:none}}
@media (prefers-reduced-motion:reduce){.book-bg .hero__video{display:none}}