/* ============================================
   STUDIO NGAI — Booking flow (/booking)
   Self-contained. Builds on tokens.css only.
   Mobile-first: this page is opened from a
   WhatsApp or Instagram link nine times in ten.
   ============================================ */

:root {
  --bk-gutter: clamp(22px, 6vw, 40px);
  --bk-top-h: 60px;
  --bk-foot-h: 92px;
  /* Raised by the script when a soft keyboard is open. */
  --bk-kb: 0px;
}

html {
  /* The flow owns the viewport; anchor smoothness elsewhere isn't wanted here. */
  scroll-behavior: auto;
}

body {
  background: var(--paper);
  color: var(--ink);
  overscroll-behavior-y: none;
}

/* ============================================
   SHELL
   ============================================ */
.bk {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--bk-top-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--bk-foot-h) + env(safe-area-inset-bottom, 0px));
  isolation: isolate;
}

/* --- Atmosphere: two slow orbs and a whisper of grain. Never in the way. --- */
.bk-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.bk-orb-1 {
  width: clamp(320px, 70vw, 620px);
  aspect-ratio: 1;
  right: -22vw;
  top: -12vh;
  background: radial-gradient(circle at 40% 40%, rgba(44, 74, 58, 0.16), transparent 70%);
  animation: bk-drift-a 26s var(--ease-in-out) infinite alternate;
}
.bk-orb-2 {
  width: clamp(300px, 66vw, 560px);
  aspect-ratio: 1;
  left: -26vw;
  bottom: -16vh;
  background: radial-gradient(circle at 55% 45%, rgba(122, 46, 44, 0.12), transparent 70%);
  animation: bk-drift-b 32s var(--ease-in-out) infinite alternate;
}
@keyframes bk-drift-a { to { transform: translate(-40px, 42px) scale(1.12); } }
@keyframes bk-drift-b { to { transform: translate(38px, -34px) scale(1.1); } }

.bk-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================
   HEADER — progress rail, wordmark, counter
   ============================================ */
.bk-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: calc(var(--bk-top-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--bk-gutter) 0;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 12px;
  background: rgba(246, 243, 236, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.bk-back {
  grid-column: 1;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bk-back svg { width: 20px; height: 20px; }
.bk-back:hover { background: rgba(26, 24, 22, 0.06); }
.bk-back:active { transform: scale(0.92); }
.bk-back[hidden] { display: none; }

/* Explicit columns: the wordmark must not slide left when the back button
   is pulled out of the grid on the first and last screens. */
.bk-word {
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.bk-word:hover { opacity: 1; }
.bk-word .it { font-style: italic; }

.bk-count {
  grid-column: 3;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity var(--dur-med) var(--ease-out);
}
.bk-count-sep { opacity: 0.4; margin: 0 2px; }

/* Hairline progress, pinned to the very bottom edge of the bar. */
.bk-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.bk-rail-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--moss);
  border-radius: 0 2px 2px 0;
  transition: width 620ms var(--ease-out);
}

/* On the bookend screens there is no progress to speak of. */
.bk[data-phase='intro'] .bk-count,
.bk[data-phase='done'] .bk-count { opacity: 0; }
.bk[data-phase='done'] .bk-rail-fill { background: var(--moss-soft); }

/* ============================================
   STAGE & PANELS
   ============================================ */
.bk-stage {
  flex: 1;
  display: flex;
  width: 100%;
}

.bk-panel { display: none; }
.bk-panel.is-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 32px var(--bk-gutter);
}

.bk-body { display: flex; flex-direction: column; }

/* Intro breathes a little more than the questions. */
.bk-body-intro { gap: 4px; }

.bk-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 22px;
}

.bk-step-no {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss-soft);
  margin-bottom: 18px;
}

/* ---- The question itself ---- */
.bk-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 9.2vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.bk-q .l { display: block; }
.bk-q .it { font-style: italic; color: var(--moss); }
.bk-q-intro { font-size: clamp(40px, 11vw, 64px); }

.bk-help,
.bk-lede {
  color: var(--clay);
  margin-top: 14px;
  max-width: 42ch;
}
.bk-help { font-size: var(--t-small); }
.bk-lede { font-size: var(--t-body); line-height: 1.6; }

.bk-fineprint {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--clay);
  opacity: 0.75;
  max-width: 40ch;
}

.bk-trust {
  list-style: none;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.bk-trust li { display: flex; align-items: center; gap: 12px; }
.bk-tick {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--moss);
  flex: none;
}

.bk-alt {
  padding-top: 8px;
  font-size: var(--t-small);
  color: var(--clay);
  text-align: center;
}
.bk-alt a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bk-alt a:hover { color: var(--moss); }

/* ============================================
   OPTION CARDS
   ============================================ */
.bk-options {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bk-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 17px 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 220ms var(--ease-out),
    background 220ms var(--ease-out),
    transform 160ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}
.bk-opt:hover {
  border-color: rgba(44, 74, 58, 0.35);
  background: rgba(255, 255, 255, 0.9);
}
.bk-opt:active { transform: scale(0.985); }

.bk-opt-label { flex: 1; }
.bk-opt-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--stone);
  transition: color 220ms var(--ease-out);
}

.bk-opt-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--stone);
  display: grid;
  place-items: center;
  color: var(--paper);
  transition:
    background 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    transform 260ms var(--ease-out);
}
.bk-opt-mark svg {
  width: 13px;
  height: 13px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 200ms var(--ease-out), transform 320ms var(--ease-out);
}

.bk-opt[aria-checked='true'] {
  border-color: var(--moss);
  background: rgba(44, 74, 58, 0.07);
  box-shadow: 0 1px 0 rgba(44, 74, 58, 0.06), 0 8px 24px -14px rgba(44, 74, 58, 0.6);
}
.bk-opt[aria-checked='true'] .bk-opt-hint { color: var(--moss-soft); }
.bk-opt[aria-checked='true'] .bk-opt-mark {
  background: var(--moss);
  border-color: var(--moss);
}
.bk-opt[aria-checked='true'] .bk-opt-mark svg { opacity: 1; transform: scale(1); }

/* ============================================
   TEXT FIELDS
   ============================================ */
.bk-field {
  position: relative;
  margin-top: 34px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
}

.bk-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(21px, 5.6vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
  /* iOS zooms any field under 16px on focus. Never let that happen. */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.bk-input:focus { outline: none; }
.bk-input::placeholder { color: var(--stone); }

.bk-textarea {
  resize: none;
  font-size: clamp(18px, 4.6vw, 21px);
  line-height: 1.5;
}

.bk-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--stone);
}
.bk-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms var(--ease-out);
}
.bk-field:focus-within .bk-underline::after { transform: scaleX(1); }

/* Country code chip */
.bk-field-tel { align-items: center; }
.bk-cc { position: relative; flex: none; }
.bk-cc-select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  padding: 9px 30px 9px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bk-cc-select:focus { outline: none; border-color: var(--moss); }
.bk-cc-chev {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--clay);
}
.bk-cc-chev svg { width: 14px; height: 14px; display: block; }

.bk-error {
  margin-top: 12px;
  font-size: var(--t-small);
  color: var(--error);
}
.bk-error[hidden] { display: none; }

/* ============================================
   REVIEW
   ============================================ */
.bk-review {
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
}
.bk-review-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 2px;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.bk-review-row:hover { background: rgba(26, 24, 22, 0.03); }
.bk-review-k {
  flex: none;
  width: 96px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}
.bk-review-v {
  flex: 1;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.bk-review-v.is-empty { color: var(--stone); font-style: italic; }
.bk-review-edit {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss-soft);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.bk-review-row:hover .bk-review-edit { opacity: 1; }
@media (hover: none) {
  .bk-review-edit { opacity: 0.7; }
}

/* ============================================
   CLOSING SCREEN
   ============================================ */
.bk-panel-done .bk-q { margin-top: 26px; }
.bk-seal { color: var(--moss); width: 46px; height: 46px; }
.bk-seal svg { width: 100%; height: 100%; }
.bk-seal-ring {
  stroke-dasharray: 139;
  stroke-dashoffset: 139;
  animation: bk-draw 900ms var(--ease-out) 120ms forwards;
}
.bk-seal-tick {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: bk-draw 520ms var(--ease-out) 620ms forwards;
}
@keyframes bk-draw { to { stroke-dashoffset: 0; } }

.bk-done-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.bk-ghost {
  text-align: center;
  font-size: var(--t-small);
  color: var(--clay);
  text-decoration: none;
  padding: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.bk-ghost:hover { color: var(--ink); }

/* ============================================
   FOOTER ACTION BAR
   ============================================ */
.bk-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 14px var(--bk-gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--paper) 62%, rgba(246, 243, 236, 0));
  /* Lifted clear of the soft keyboard by the script. */
  transform: translateY(calc(-1 * var(--bk-kb)));
  transition: transform 220ms var(--ease-out), opacity 260ms var(--ease-out);
}
.bk-foot[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
.bk-foot-inner {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bk-cta {
  width: 100%;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 260ms var(--ease-out),
    transform 160ms var(--ease-out),
    opacity 220ms var(--ease-out),
    box-shadow 260ms var(--ease-out);
  box-shadow: 0 10px 30px -18px rgba(26, 24, 22, 0.9);
}
.bk-cta:hover { background: var(--moss); }
.bk-cta:active { transform: scale(0.985); }
.bk-cta .arrow { width: 14px; height: 14px; transition: transform 300ms var(--ease-out); }
.bk-cta:hover .arrow { transform: translate(2px, -2px); }
.bk-cta:disabled {
  background: var(--bone);
  color: var(--stone);
  box-shadow: none;
  cursor: default;
}
.bk-cta:disabled .arrow { opacity: 0.5; }
.bk-cta.is-busy { color: transparent; position: relative; }
.bk-cta.is-busy .arrow { opacity: 0; }
.bk-cta.is-busy::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(246, 243, 236, 0.3);
  border-top-color: var(--paper);
  animation: bk-spin 700ms linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

.bk-skip {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  color: var(--clay);
  padding: 4px 10px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.bk-skip:hover { color: var(--ink); }
.bk-skip[hidden] { display: none; }

.bk-kbd {
  display: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}
.bk-kbd kbd {
  font-family: inherit;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
}

.bk-noscript {
  padding: 120px var(--bk-gutter);
  text-align: center;
  color: var(--clay);
}
.bk-noscript a { color: var(--moss); }

/* ============================================
   DESKTOP — the flow stays a column, centred.
   It is a mobile experience that happens to
   also open on a laptop.
   ============================================ */
@media (min-width: 720px) {
  :root { --bk-top-h: 68px; --bk-foot-h: 104px; }
  .bk-cta { width: auto; min-width: 220px; }
  .bk-foot-inner { flex-direction: row; justify-content: flex-start; gap: 18px; }
  /* Only promise the shortcut on steps where Enter actually advances. */
  .bk[data-kind='text'] .bk-kbd,
  .bk[data-kind='email'] .bk-kbd,
  .bk[data-kind='tel'] .bk-kbd { display: block; margin-left: auto; }
  .bk-done-actions { flex-direction: row; align-items: center; }
  .bk-done-actions .bk-cta { width: auto; }
  .bk-alt { text-align: left; }
}

@media (min-width: 1024px) {
  .bk-panel.is-active { max-width: 680px; }
}

/* Shorter phones: tighten enough that a five-option step still clears the
   action bar without scrolling. The first screenful is where leads leave. */
@media (max-height: 720px) {
  .bk-q { font-size: clamp(30px, 8vw, 44px); }
  .bk-step-no { margin-bottom: 12px; }
  .bk-options { margin-top: 22px; gap: 8px; }
  .bk-opt { padding: 14px 16px; }
  .bk-field { margin-top: 26px; }
}

/* Landscape phones, or a keyboard eating the viewport: stop centring. */
@media (max-height: 560px) {
  .bk-panel.is-active { justify-content: flex-start; }
  .bk-q { font-size: clamp(26px, 7vw, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-orb { animation: none; }
  .bk-seal-ring,
  .bk-seal-tick { animation: none; stroke-dashoffset: 0; }
}