/* ==========================================================================
   How to book — motion-graphics walkthrough (images/video/how-to-book-*.mp4)
   Home: inline section (.htb).  Pricing + Contact: compact trigger that opens
   a lightbox (.htb-trigger / .htb-modal). Behaviour in assets/js/how-to-book.js
   ========================================================================== */
.htb__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg,22px);overflow:hidden;background:#0d0b12;box-shadow:0 30px 70px -30px rgba(40,10,60,.55),0 0 0 1px var(--line);isolation:isolate}
.htb__frame::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(135deg,#FF7A3D,#FF3D8B 40%,#9B5CFF 75%,#3D9BFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
.htb__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0d0b12}
.htb__play{position:absolute;left:0;right:0;bottom:13%;margin:0 auto;width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#FF3D8B,#9B5CFF);box-shadow:0 14px 40px -10px rgba(155,92,255,.8);transition:transform .25s ease,opacity .25s ease;z-index:2}
.htb__play:hover{transform:scale(1.07)}
.htb__play svg{width:28px;height:28px;margin-left:4px}
.htb__frame.is-playing .htb__play{opacity:0;pointer-events:none;transform:scale(.8)}
.htb__sound{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(15,12,22,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:600 13px/1 var(--sans,system-ui);cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.htb__sound svg{width:16px;height:16px}
.htb__frame.is-playing.is-muted .htb__sound{opacity:1;transform:none}
.htb__len{position:absolute;right:14px;top:14px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(15,12,22,.55);color:#fff;font:600 12px/1 var(--sans,system-ui);letter-spacing:.04em;transition:opacity .3s ease}
.htb__frame.is-playing .htb__len{opacity:0}


/* ---- Home: video merged into "Five steps. Any project." (replaces the ring) ---- */
html .procD.procD--video{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);max-width:1180px}
html .procD__h{margin:0 0 18px;font:600 clamp(26px,3vw,38px)/1.1 var(--sans);letter-spacing:-.025em;color:var(--ink)}
@media (max-width:820px){html .procD.procD--video{grid-template-columns:1fr;gap:26px}html .procD__h{margin-bottom:14px}}

/* ---- Compact trigger (pricing + contact) ---- */
.htb-trigger{display:inline-flex;align-items:center;gap:14px;margin-top:18px;padding:7px 20px 7px 7px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.htb-trigger:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 10px 30px -18px rgba(40,10,60,.5)}
.htb-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.htb-trigger__thumb{position:relative;flex:none;width:84px;height:48px;border-radius:999px;overflow:hidden;background:#0d0b12}
.htb-trigger__thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.htb-trigger__thumb i{position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#FF3D8B,#9B5CFF);color:#fff}
.htb-trigger__thumb i svg{width:11px;height:11px;margin-left:2px}
.htb-trigger b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.htb-trigger small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.cp__head .htb-trigger{margin-top:14px}

/* ---- Lightbox ---- */
.htb-modal{position:fixed;inset:0;margin:auto;height:fit-content;border:0;padding:0;background:transparent;width:min(1100px,92vw,calc((100vh - 170px) * 16 / 9));max-width:none;max-height:none;overflow:visible}
.htb-modal::backdrop{background:rgba(8,6,12,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.htb-modal[open]{animation:htbIn .28s ease}
@keyframes htbIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.htb-modal .htb__frame{box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.htb-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:#fff}
.htb-modal__bar p{margin:0;font-size:14px;opacity:.8}
.htb-modal__bar .pill{margin-top:0}
.htb-modal__x{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.htb-modal__x:hover{background:rgba(255,255,255,.18)}
@media (max-width:600px){.htb__play{width:60px;height:60px;bottom:10%}.htb__play svg{width:22px;height:22px}.htb-modal__bar{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.htb-modal[open]{animation:none}.htb-trigger,.htb__play{transition:none}}

/* ---- Home: "Keynote" bento — Five steps + booking video. Light/dark aware (2026-10-20: was always black). ---- */
html main>section#process.kn-sec{background:var(--cream);color:var(--ink)}
.kn{max-width:1180px;margin:0 auto}
.kn__h{margin:0 0 clamp(22px,3vw,36px);text-align:center;font:700 clamp(34px,4.6vw,60px)/1.03 var(--display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.kn__g{background:linear-gradient(100deg,#FF7A3D 0%,#FF3D8B 32%,#9B5CFF 66%,#3D9BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kn__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.kn__stage{grid-column:1/-1;margin-bottom:clamp(4px,1vw,10px)}
.kn__stage .htb__frame{max-width:none;margin:0;border-radius:clamp(18px,2.2vw,28px);box-shadow:0 30px 70px -40px rgba(0,0,0,.45)}
.kn__stage .htb__frame::after{display:none}
.kn__t{position:relative;grid-column:span 2;min-height:clamp(170px,16vw,220px);padding:clamp(18px,2.3vw,30px);border-radius:clamp(22px,2.4vw,30px);background:var(--paper,#fff);box-shadow:0 0 0 1px var(--line,rgba(0,0,0,.08));display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0;overflow:hidden;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.kn__t:nth-of-type(n+4){grid-column:span 3}
.kn__t:hover{transform:scale(1.015)}
.kn__t::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(100deg,#FF7A3D,#FF3D8B 32%,#9B5CFF 66%,#3D9BFF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .6s;pointer-events:none}
.kn__t.on::after{opacity:1}
.kn__n{font:700 clamp(40px,4.2vw,60px)/.9 var(--display);letter-spacing:-.05em;color:color-mix(in srgb,var(--ink) 30%,var(--paper,#fff));transition:color .5s}
.kn__t.on .kn__n{color:transparent;background:linear-gradient(100deg,#FF7A3D 0%,#FF3D8B 32%,#9B5CFF 66%,#3D9BFF 100%);-webkit-background-clip:text;background-clip:text}
.kn__t h3{margin:0;font:600 clamp(18px,2vw,28px)/1.1 var(--display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.kn__t p{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.4}
@media (max-width:760px){
  .kn__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kn__t:nth-of-type(n){grid-column:auto;min-height:150px;padding:18px;gap:12px}
  .kn__t:nth-of-type(1){grid-column:1/-1}
  .kn__t h3{font-size:18px}
  .kn__t p{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.kn__t,.kn__t::after,.kn__n{transition:none}}
/* 2026-10-20 homepage review: on phones the play button sat on top of the poster headline; move it to the corner */
@media (max-width:600px){.htb__play{left:auto;right:12px;bottom:12px;margin:0;width:46px;height:46px}.htb__play svg{width:18px;height:18px;margin-left:3px}}

/* ---- 2026-10-21: video buttons chosen by Rudraksha (Contact = pulse pill, Pricing = equalizer pill) ---- */
.htb-pill{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:6px 16px 6px 6px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 1px var(--line),0 10px 30px -20px rgba(155,92,255,.6);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.htb-pill:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2,var(--line)),0 16px 36px -18px rgba(155,92,255,.75)}
.htb-pill:active{transform:scale(.98)}
.htb-pill:focus-visible{outline:2px solid #9B5CFF;outline-offset:4px}
.htb-pill b{font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap}
.htb-pill__pg{position:relative;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#FF3D8B,#9B5CFF)}
.htb-pill__pg svg{width:14px;height:14px;margin-left:2px}
.htb-pill__t{flex:none;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
/* Contact: soft rings from the play button */
.htb-pill--pulse .htb-pill__pg::before,.htb-pill--pulse .htb-pill__pg::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #FF3D8B;opacity:0;animation:htbPing 2.4s cubic-bezier(.16,1,.3,1) infinite}
.htb-pill--pulse .htb-pill__pg::after{animation-delay:1.2s;border-color:#9B5CFF}
@keyframes htbPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
/* Pricing: little equalizer next to the time */
.htb-pill--eq{padding-right:12px}
.htb-pill__eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.htb-pill__eq i{width:3px;height:4px;border-radius:2px;background:linear-gradient(#FF7A3D,#FF3D8B,#9B5CFF);animation:htbEq 1s ease-in-out infinite}
.htb-pill__eq i:nth-child(2){animation-delay:-.3s}.htb-pill__eq i:nth-child(3){animation-delay:-.6s}.htb-pill__eq i:nth-child(4){animation-delay:-.15s}
@keyframes htbEq{0%,100%{height:4px}50%{height:14px}}
.cp__head .htb-pill{margin-top:14px}
@media (max-width:380px){.htb-pill b{font-size:13.5px}.htb-pill{gap:9px}}
@media (prefers-reduced-motion:reduce){.htb-pill--pulse .htb-pill__pg::before,.htb-pill--pulse .htb-pill__pg::after,.htb-pill__eq i{animation:none}.htb-pill__eq i{height:8px}}