/* BOOKING PAGE SKIN (Digital Pratik, 3 Nov 2026: "the request consultation page is also in the old theme").
   /book runs on the older stylesheet (assets/ui.css) with its own form code, so it gets its own skin, loaded last,
   only under body.hv2. Looks only: no question, no form field and no script is touched. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/caveat600-normal-latin.woff2') format('woff2')}

body.hv2{
  --hv-card:#FFFFFF;--hv-line:#16182B;--hv-shadow:#16182B;--hv-yel:#F6D234;--hv-blue:#2E6BD3;--hv-dot:rgba(19,22,40,.10);
  --hv-hand:'Caveat',cursive;
  --bg-0:#FBFAF6;--bg-1:#FBFAF6;--paper:#FFFFFF;--glass:#FFFFFF;--bar:rgba(251,250,246,.95);
  --text-1:#16182B;--text-2:#4F5263;--text-3:#5E6272;--field-bg:#FFFFFF;
  --line:rgba(19,22,40,.16);--line-soft:rgba(19,22,40,.10);
  background-color:#FBFAF6;
  background-image:radial-gradient(var(--hv-dot) 1.2px,transparent 1.2px);background-size:22px 22px;
}
html[data-theme="dark"] body.hv2{
  --hv-card:#141A2A;--hv-line:rgba(248,248,248,.82);--hv-shadow:#2E6BD3;--hv-dot:rgba(255,255,255,.07);
  --bg-0:#070707;--bg-1:#070707;--paper:#141A2A;--glass:#141A2A;--bar:rgba(7,7,7,.92);
  --text-1:#F8F8F8;--text-2:#B4B9C6;--text-3:#9AA0AE;--field-bg:#141A2A;
  --line:rgba(255,255,255,.16);--line-soft:rgba(255,255,255,.08);
  background-color:#070707;
}
body.hv2 .bg{display:none}

/* header: cream bar with an ink rule, logo and menu untouched */
body.hv2 .topbar{background:var(--bar);border-bottom:2px solid var(--hv-line);border-image:none}

/* hero */
body.hv2 .vsl-hero{position:relative}
body.hv2 .bk-tag{display:inline-flex;align-items:center;gap:9px;color:var(--text-1);background:var(--hv-card);border:2px solid var(--hv-line);border-radius:999px;padding:7px 16px;box-shadow:3px 3px 0 var(--hv-shadow);font-weight:700}
body.hv2 .bk-tag::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--hv-blue);flex:none}
body.hv2 .vsl-hero h1{color:var(--text-1)}
body.hv2 .vsl-hero h1 .bk-l2{display:block;margin-top:.12em}
body.hv2 .vsl-hero h1{text-wrap:balance}
@media (min-width:700px){body.hv2 .vsl-hero h1{max-width:min(100%,16.5em)}}
body.hv2 .vsl-hero h1 em{color:var(--hv-blue);font-style:normal;background:linear-gradient(transparent 62%,rgba(246,210,52,.75) 62%,rgba(246,210,52,.75) 92%,transparent 92%)}
html[data-theme="dark"] body.hv2 .vsl-hero h1 em{color:#5E92E8;background:none}
body.hv2 .vsl-video{position:relative}
body.hv2 .loom-embed{border:2px solid var(--hv-line);border-radius:18px;box-shadow:8px 8px 0 var(--hv-shadow);overflow:hidden}
body.hv2 .loom-play{background:var(--hv-yel);color:#16182B;border:2px solid #16182B}
body.hv2 .loom-play svg{fill:#16182B;color:#16182B}
body.hv2 .vsl-note{color:var(--text-2);font-family:var(--hv-hand);font-size:24px;line-height:1.2;transform:rotate(-2deg)}

/* the comic of him at the right of the video, pointing at it */
body.hv2 .vsl-video img.hv-bk{position:absolute;z-index:3;right:-158px;left:auto;bottom:-30px;width:170px;height:auto;aspect-ratio:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(19,22,40,.25))}
@media (prefers-reduced-motion:no-preference){body.hv2 .vsl-video img.hv-bk{animation:hvBob 5.5s ease-in-out infinite}@keyframes hvBob{0%,100%{translate:0 0}50%{translate:0 -7px}}}
@media (max-width:1180px){body.hv2 .vsl-video img.hv-bk{right:-16px;bottom:-40px;width:110px}}
@media (max-width:640px){body.hv2 .vsl-video img.hv-bk{display:none}} /* on a phone it covered the video caption */

/* buttons: yellow with navy ink and a hard ink shadow */
body.hv2 .btn.primary,body.hv2 .btn.primary:hover{background:var(--hv-yel);color:#16182B;border:2px solid #16182B;box-shadow:4px 4px 0 #16182B;font-weight:800}
body.hv2 .btn.primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #16182B}
body.hv2 .btn.primary::after{display:none}
body.hv2 .btn.primary .arrow{color:#16182B}
html[data-theme="dark"] body.hv2 .btn.primary{box-shadow:4px 4px 0 #F8F8F8}
html[data-theme="dark"] body.hv2 .btn.primary:hover{box-shadow:6px 6px 0 #F8F8F8}

/* the form section */
body.hv2 .qsec .eyebrow{font-family:var(--hv-hand);font-weight:600;font-size:28px;letter-spacing:0;text-transform:none;color:var(--hv-blue);background:none;border:0;box-shadow:none;padding:0;transform:rotate(-2.5deg)}
body.hv2 .qsec .eyebrow .dot{display:none}
html[data-theme="dark"] body.hv2 .qsec .eyebrow{color:#5E92E8}
body.hv2 .qsec .sec-head h2{color:var(--text-1)}
body.hv2 .form-card{background:var(--hv-card);border:2px solid var(--hv-line);border-radius:18px;box-shadow:8px 8px 0 var(--hv-shadow)}
body.hv2 .form-card::before,body.hv2 .form-card::after{display:none}
body.hv2 .qlabel{color:var(--text-1);font-weight:700}
body.hv2 .qchip{background:var(--hv-card);color:var(--text-1);border:2px solid var(--line);border-radius:12px}
body.hv2 .qchip:hover{border-color:var(--hv-line)}
body.hv2 .qchip.on,body.hv2 .qchip.on:hover{background:var(--hv-yel);color:#16182B;border-color:#16182B;box-shadow:3px 3px 0 #16182B}
html[data-theme="dark"] body.hv2 .qchip.on{box-shadow:3px 3px 0 #F8F8F8}
body.hv2 .qchip.on .tz-name{color:#16182B}
body.hv2 .field input,body.hv2 .field textarea,body.hv2 .field select{border:2px solid var(--line);border-radius:12px;background:var(--field-bg)}
body.hv2 .field input:focus,body.hv2 .field textarea:focus{border-color:var(--hv-blue);box-shadow:0 0 0 3px rgba(46,107,211,.2)}
body.hv2 .qdiv{height:2px;background:repeating-linear-gradient(90deg,var(--hv-line) 0 8px,transparent 8px 14px);opacity:.35}

/* more room at the sides on phones (his ask, 3 Nov 2026): the copied main menu matches the 24px of the rest of the site */
@media(max-width:720px){body.hv2 .kh-wrap{width:calc(100% - 48px)}}
@media(max-width:360px){body.hv2 header.kh-site .kh-wrap{gap:10px}body.hv2 header.kh-site .kh-nav-cta{gap:6px}}
@media(max-width:340px){body.hv2 header.kh-site .kh-wrap{width:calc(100% - 32px)}}