/* Split panel layout. Two columns: a pale navy-tinted panel on the left (host,
   what the call covers), a white working column on the right.
   Native month grid with square cells and a time column. On a phone the panel
   stacks above the form. */

body { background: #fff; }

.b-shell {
  --pw: clamp(340px, 34vw, 440px);
  display: grid; grid-template-columns: var(--pw) minmax(0, 1fr); grid-template-rows: auto 1fr;
  /* the panel tint runs the full height of the shell, whatever the viewport */
  background: linear-gradient(to right, var(--surface-2) calc(var(--pw) - 1px), var(--line-strong) calc(var(--pw) - 1px) var(--pw), #fff var(--pw));
}

/* ---- left panel ----
   One block, the host and the call. On a wide screen it sits in the left column and the form
   spans beside it. The "Meet the team" blocks were removed from both pages (owner ruling, 2026-10-15). */
.b-left { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.b-left-a { grid-column: 1; grid-row: 1; padding: 28px 40px 26px; }
.b-top { display: flex; flex-direction: column; gap: 26px; }
.b-brand { display: flex; align-items: center; gap: 14px; border: 0; background: transparent; }
.b-bust { margin: 0; align-self: stretch; border-bottom: 4px solid var(--primary); background: linear-gradient(180deg, #dde4f3, var(--surface-2)); }
.b-bust img { width: 100%; height: 320px; object-fit: cover; object-position: 50% 8%; }
.b-name { margin: 0 0 8px; font: 700 20px/1.25 var(--font-head); color: var(--primary); }
.b-quote { margin: 0; font-size: 16px; line-height: 1.55; }
.b-cover h2 { margin: 0 0 4px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.cover { list-style: none; margin: 10px 0 0; padding: 0; }
.cover li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line-strong); font-size: 15px; line-height: 1.45; }
.cover li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; background: var(--primary); }
.format { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-weight: 700; color: var(--primary); }
.fmt-ic { display: inline-flex; }

/* ---- cards (only the booked-with card on the confirmation uses them now) ---- */
.tcard { display: grid; align-content: start; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line-strong); background: #fff; }
.tphoto { width: 64px; height: 64px; overflow: hidden; background: #d9dde6; }
.tphoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.tn { margin: 0 0 2px; font: 700 17px/1.25 var(--font-head); letter-spacing: -.01em; color: var(--primary); }
.tt { margin: 0 0 8px; font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--ink-muted); }
.tb { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.tcard-lg { grid-template-columns: 88px minmax(0, 1fr); padding: 18px; background: #fff; }
.tcard-lg .tphoto { width: 88px; height: 88px; }
/* the card shown when no person is named: a name line and one line, no photo, no title */
.tcard-plain { grid-template-columns: minmax(0, 1fr); padding: 18px; }
/* a card for a person with no photo on file has no photo cell at all (L3): one column, same padding as the large card */
.tcard.tcard-nophoto { grid-template-columns: minmax(0, 1fr); }
.bookedwith { margin: 0 0 22px; }
.bookedwith .tcard { border-left: 6px solid var(--primary); }

/* ---- right column ---- */
.b-main { grid-column: 2; grid-row: 1 / span 2; width: 100%; min-width: 0; max-width: 760px; padding: 64px 56px 80px; }
.b-main .eyebrow { color: var(--primary); }
.b-main h1 { margin: 0 0 16px; font-size: clamp(28px, 3.4vw, 38px); color: var(--primary); }
.b-main .lede { margin: 0 0 22px; font-size: 17px; }

/* progress across the six application screens */
.prog { height: 6px; margin: 0 0 34px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--control-line); }
.prog span { display: block; height: 100%; width: 16.66%; background: var(--primary); transition: width .2s ease; }

.qscreen { min-height: 0; }
.qa legend, .qlegend { margin: 0 0 12px; font: 700 20px/1.3 var(--font-head); color: var(--ink); }
.fld.amt label.qlegend { font: 700 20px/1.3 var(--font-head); color: var(--ink); margin-bottom: 12px; }
.amt { max-width: 360px; }
.amt-in { position: relative; }
.amt-sym { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font: 700 18px var(--font-body); color: var(--ink-muted); pointer-events: none; }
.fld.amt .amt-in input { padding-left: 34px; font-size: 18px; font-weight: 700; }
.hint { margin: 10px 0 0; font-size: 14px; color: var(--ink-muted); }
.qa .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa .opt span {
  display: flex; align-items: center; min-height: 56px; padding: 10px 16px;
  border: 1px solid var(--control-line); background: #fff; font-size: 15px; line-height: 1.3;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.qa .opt:hover span { border-color: var(--primary); background: var(--surface); }
.qa .opt input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.qa .opt input:focus-visible + span { outline-color: var(--primary-bright); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.consent-wrap { margin: 6px 0 18px; }
.actions { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.actions .cta { min-width: 220px; }
.back { min-height: 50px; padding: 0 18px; border: 0; background: transparent; color: var(--primary); font: 700 15px var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.back:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.back:disabled { color: var(--ink-muted); text-decoration: none; cursor: not-allowed; }

/* step 2 and the states around it */
.s2-states { max-width: 62ch; margin-top: 22px; }
.s2-states:not(:has(.state:not([hidden]))) { display: none; }
.pk-msg { margin: 24px 0 0; }
/* the already-booked screen names no session length: the left panel's length line stays off it */
body[data-step="already"] .format { display: none; }
.s2-body { margin: 0 0 8px; font-size: 17px; line-height: 1.6; max-width: 62ch; }
.clients { margin: 6px 0 4px; }
.clients h2 { margin: 0 0 14px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.vrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 540px; }
.vthumb { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #0B0F1A; border: 1px solid var(--line-strong); }
.vthumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0B0F1A; }
.vthumb video:focus-visible { outline: 3px solid var(--secondary); outline-offset: -3px; }
.vcap { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); max-width: 540px; }

.pk-tz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 22px 0 0; font-size: 14px; color: var(--ink-muted); }
.pk-tz strong { color: var(--primary); }
.pk-tz-ic { display: inline-flex; color: var(--primary); }

/* native picker */
.picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 32px; margin-top: 16px; padding-top: 26px; border-top: 4px solid var(--primary); }
.pk-cal { min-width: 0; max-width: 480px; }
.nat-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.nat-mlabel { font: 700 20px/1.2 var(--font-head); color: var(--primary); }
.nat-nav { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--control-line); border-radius: 0; background: #fff; color: var(--primary); cursor: pointer; }
.nat-nav:hover:not(:disabled) { background: var(--surface-2); }
.nat-nav:disabled { color: var(--line-strong); cursor: default; }
.nat-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.nat-dow span { padding: 6px 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.nat-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nat-cell {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0;
  border: 1px solid transparent; border-radius: 0; background: transparent; padding: 0;
  font: 700 15px/1 var(--font-body); color: var(--line-strong);
}
.nat-cell.is-blank { visibility: hidden; }
.nat-cell.is-off { color: #a3adc2; font-weight: 400; }
.nat-cell.is-avail { background: var(--surface); border-color: var(--line-strong); color: var(--primary); cursor: pointer; transition: background .12s ease; }
.nat-cell.is-avail:hover { background: var(--surface-2); border-color: var(--primary); }
.nat-cell.is-avail.is-sel { background: var(--primary); border-color: var(--primary); color: #fff; }
.nat-cell.is-avail:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* switched off while a booking call is out (B5): the chosen day and time stay marked */
.nat-cell.is-avail:disabled { cursor: not-allowed; }
.nat-cell.is-avail:disabled:not(.is-sel) { opacity: .6; }
/* today marker: a small navy dot */
.nat-cell.is-today::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); transform: translateX(-50%); }
.nat-cell.is-today.is-sel::after { background: #fff; }

.pk-times { min-width: 0; }
.pk-h { margin: 6px 0 14px; font: 700 15px/1.35 var(--font-head); color: var(--primary); }
.pk-slots { display: grid; gap: 8px; }
.nat-slot {
  width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--primary); border-radius: 0; background: #fff; color: var(--primary);
  font: 700 15px var(--font-body); cursor: pointer; transition: background .12s ease, color .12s ease;
}
.nat-slot:hover { background: var(--surface-2); }
.nat-slot.is-sel { background: var(--primary); color: #fff; }
.nat-slot:focus-visible { outline: 3px solid var(--primary-bright); outline-offset: 2px; }
.nat-slot:disabled { cursor: not-allowed; }
.nat-slot:disabled:not(.is-sel) { opacity: .6; }

.pk-confirm { margin-top: 32px; padding: 22px 24px; border: 1px solid var(--line-strong); border-left: 4px solid var(--primary); background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pk-sum { margin: 0; font: 700 18px/1.3 var(--font-head); color: var(--primary); }

/* ---- confirmation ---- */
.appt { margin: 0 0 22px; padding: 26px 28px; border: 1px solid var(--line-strong); border-left: 6px solid var(--primary); background: var(--surface); }
.appt-when { margin: 0 0 8px; font: 700 clamp(22px, 2.8vw, 28px)/1.25 var(--font-head); letter-spacing: -.02em; color: var(--primary); }
.appt-meta { margin: 0 0 3px; font-size: 16px; color: var(--ink-muted); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.resched { margin: 20px 0 0; font-size: 15px; color: var(--ink-muted); }
.steps { list-style: none; counter-reset: s; margin: 40px 0 0; padding: 32px 0 0; border-top: 4px solid var(--primary); display: grid; gap: 14px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border: 1px solid var(--line); background: #fff; }
.steps .sn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--primary); color: #fff; }
.steps .sn::before { content: counter(s); font: 700 18px/1 var(--font-head); }
.steps p { margin: 0; font-size: 16px; align-self: center; }
.closing { margin: 36px 0 0; font: 700 22px/1.3 var(--font-head); letter-spacing: -.01em; color: var(--primary); }

.site-foot .b-foot { max-width: none; padding-left: 40px; padding-right: 40px; }

/* ---- a narrow working column (small laptops, tablets on their side): the times move under the calendar ---- */
@media (max-width: 1099px) {
  .picker { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 480px; }
  .pk-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- stack on a phone: the blocks already come in reading order, so nothing is reordered ---- */
@media (max-width: 900px) {
  .b-shell { display: flex; flex-direction: column; background: #fff; }
  .b-left { display: block; }
  .b-left-a { padding: 0; }
  .b-top {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 14px; align-items: start;
    padding: 16px 20px 6px; background: var(--surface-2);
  }
  .b-brand { grid-column: 1 / -1; }
  .b-bust { grid-column: 1; grid-row: 2; align-self: start; border-bottom-width: 3px; }
  .b-bust img { height: 96px; }
  .b-host { grid-column: 2; grid-row: 2; }
  .b-name { font-size: 17px; margin-bottom: 4px; }
  .b-quote { font-size: 14px; line-height: 1.45; }
  .b-cover { padding: 8px 20px 22px; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
  /* with no "What we cover" block (the confirmation with nothing stored) the host block closes the panel itself */
  .b-left-a:not(:has(.b-cover:not([hidden]))) .b-top { padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
  .b-main { max-width: none; padding: 36px 20px 64px; }

  .qa .opts { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .actions .cta { flex: 1 1 auto; min-width: 0; }
  .pk-confirm { flex-direction: column; align-items: stretch; }
  .pk-confirm .cta { width: 100%; }
  .vrow { gap: 8px; }
  .btns > * { flex: 1 1 100%; }
  .site-foot .b-foot { padding-left: 20px; padding-right: 20px; }

  /* the booked-with card on a phone */
  .bookedwith .tcard-lg { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; }
  .bookedwith .tcard-plain, .bookedwith .tcard.tcard-nophoto { grid-template-columns: minmax(0, 1fr); }
  .bookedwith .tcard-lg .tphoto { width: 72px; height: 72px; }
}