/* book.honeycombstudios.co.za: one screen, no scrolling, one action at a time. */
@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/DM-Sans-variable.ttf") format("truetype");font-weight:100 1000;font-display:swap}
:root{
  --bg:#08081A;--ink:#F5F3FA;--muted:#A9A5BD;--faint:#76728C;
  --accent:#3DF2C4;--accent-rgb:61,242,196;--accent-ink:#06201A;
  --line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.26);
  --tile:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  --display:"Fraunces",Georgia,serif;--body:"DM Sans",system-ui,-apple-system,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --top:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  height:100vh;height:100dvh;display:flex;flex-direction:column}
button,input{font:inherit;color:inherit}
img,video,iframe{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}

/* background: calm night with two slow glows (same family as the main site) */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg i{position:absolute;border-radius:50%;filter:none}
.bg i:nth-child(1){width:90vmax;height:90vmax;left:-35vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(78,78,255,.42),transparent);animation:drift 26s ease-in-out infinite alternate}
.bg i:nth-child(2){width:80vmax;height:80vmax;right:-35vmax;bottom:-35vmax;background:radial-gradient(closest-side,rgba(140,70,255,.32),transparent);animation:drift 30s ease-in-out infinite alternate-reverse}
.bg i:nth-child(3){width:50vmax;height:50vmax;right:-10vmax;top:10vh;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.08),transparent);animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(6vmax,5vmax,0) scale(1.08)}}

/* top bar: logo + progress */
.top{flex:0 0 auto;height:calc(var(--top) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 20px 0;display:flex;align-items:center;justify-content:center;position:relative}
.logo{width:124px;height:auto}
.progress{position:absolute;left:20px;right:20px;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0;transition:opacity .4s}
.progress span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease)}
body.in-flow .progress{opacity:1}

/* the stage holds one screen at a time */
.stage{position:relative;flex:1 1 auto;min-height:0}
.screen{position:absolute;inset:0;padding:20px 20px calc(72px + env(safe-area-inset-bottom)); /* bottom room for the free-plan Netlify badge */display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.screen.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s}
.screen.is-left{transform:translateX(-24px)}
.screen > *{max-width:560px;width:100%}

h1,h2{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:600;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(28px,4.2vw,52px);line-height:1.05}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;margin-bottom:22px}
.step{font:600 12px/16px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.sub{color:var(--muted);margin:-8px 0 20px}
.fine{color:var(--faint);font-size:13.5px;margin:12px 0 0}

/* buttons */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:16px 24px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:16.5px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 12px 40px rgba(var(--accent-rgb),.28);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:shine 4.5s var(--ease) 2.5s infinite}
@keyframes shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.cta:active{transform:scale(.97)}
@media (hover:hover){.cta:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(var(--accent-rgb),.4)}}
.back{margin-top:16px;width:auto;background:none;border:0;color:var(--faint);font-size:14px;cursor:pointer;padding:10px}
.back:hover{color:var(--ink)}

/* 0. intro: video + promise + one button */
.screen[data-screen="intro"] > .intro{max-width:1040px}
.intro{display:flex;flex-direction:column;align-items:center;gap:20px;height:100%;justify-content:center}
.video-frame{position:relative;flex:0 1 auto;height:min(46dvh,560px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;
  border:1px solid var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.video-frame video{width:100%;height:100%;object-fit:cover}
.play-big{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(8,8,26,.5);cursor:pointer;transition:transform .4s var(--ease),background-color .3s}
.play-big span{position:absolute;left:29px;top:22px;border-left:20px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.play-big:hover{transform:scale(1.08);background:rgba(var(--accent-rgb),.9)}
.video-frame.playing .play-big{opacity:0;pointer-events:none}
/* electric spark round the video, same as the main site */
@property --spark{syntax:"<angle>";initial-value:0deg;inherits:false}
.video-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--spark),transparent 0deg,transparent 250deg,rgba(var(--accent-rgb),.1) 290deg,rgba(var(--accent-rgb),.6) 335deg,#fff 352deg,var(--accent) 356deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spark 12s linear infinite}
@keyframes spark{to{--spark:360deg}}
.intro-copy{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:520px}
.offer{color:var(--muted);margin:0;font-size:16px}
.offer strong{color:var(--ink);font-weight:600}
.intro-copy .cta{margin-top:6px}

/* choices */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choices--wide{grid-template-columns:1fr}
.choices button{min-height:60px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--tile);cursor:pointer;font-weight:600;font-size:15.5px;text-align:center;
  transition:transform .35s var(--ease),border-color .3s,background-color .3s,box-shadow .35s var(--ease)}
.choices button:active{transform:scale(.97)}
.choices button.picked{border-color:var(--accent);background:rgba(var(--accent-rgb),.14);box-shadow:0 0 0 1px var(--accent) inset}
@media (hover:hover){.choices button:hover{border-color:var(--line-strong);transform:translateY(-2px)}}

/* details form */
.details{display:grid;gap:14px;text-align:left}
.details .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.details label{display:grid;gap:6px;font-size:13.5px;font-weight:600}
.details label em{font-style:normal;font-weight:400;color:var(--faint)}
.details input{width:100%;min-height:52px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(8,8,26,.55);font-size:16px}
.details input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
.details input[aria-invalid="true"]{border-color:#FF8FA3}
.details .cta{margin-top:6px}
.error{min-height:20px;margin:0;color:#FF8FA3;font-size:14px}
.hp{position:absolute;left:-9999px}

/* booking */
.screen--book{justify-content:flex-start;padding-top:16px}
.screen--book h2{margin-bottom:10px}
.screen--book .sub{margin:0 0 14px}
.cal{position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:760px!important;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line-strong)}
.cal iframe{width:100%;height:100%;border:0;background:#fff}
.cal-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:var(--tile);color:var(--ink);font-weight:600;text-decoration:none}
.cal.no-embed{background:transparent}
.cal.no-embed iframe{display:none}
.cal.no-embed .cal-fallback{display:flex}
.confirm{display:block;margin-top:14px;padding:14px 18px;border-radius:16px;border:1px solid rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.1);color:var(--ink);text-decoration:none;font-size:15px;max-width:760px!important}
.confirm strong{color:var(--accent)}

.privacy{position:fixed;left:16px;bottom:calc(22px + env(safe-area-inset-bottom));font-size:11px;color:var(--faint);text-decoration:none;opacity:.7}

/* desktop: video beside the promise */
@media (min-width:900px){
  :root{--top:76px}
  .logo{width:140px}
  .intro{flex-direction:row;gap:64px;text-align:left}
  .video-frame{height:min(72dvh,680px)}
  .intro-copy{align-items:flex-start}
  .intro-copy .cta{width:auto;padding:18px 32px}
  h1{font-size:clamp(40px,4vw,56px)}
}
/* short phones: keep everything on one screen */
@media (max-height:700px){
  .video-frame{height:40dvh}
  h1{font-size:25px}
  .offer{font-size:14.5px}
  .fine{display:none}
  .choices button{min-height:52px;padding:10px 12px}
  h2{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}