/* Book a call — the dedicated page.

   This is where the CTA goes when JavaScript is off or <dialog> is missing, so
   it has to stand on its own: the calendar is embedded straight into the page
   rather than a modal, with the same fallback link underneath. Uses the
   contact page's hero, nav and footer, so only the middle needs styling. */

.bk-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8vh 6vw 12vh;
}

/* White, and #ffffff exactly, sized to the card rather than around it.

   The provider draws a 680px white card centred on a transparent background,
   with 17px of page padding beside it, 66px above it and a 1px border round
   it. A wide dark panel behind that leaves gutters of dead space down both
   sides; a wide white one trades them for a small bordered box adrift in the
   middle. So the panel is the card's own width and the frame is oversized by
   the padding and pulled out past the clip, which puts the border outside and
   the calendar edge to edge. The modal on /contact/ does the same thing, and
   the note there explains why cropping the top costs nothing. */
.bk-frame-wrap {
  position: relative;
  width: min(680px, 100%);
  height: 880px;
  margin: 0 auto;
  border: 0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

/* sized rather than stretched with left/right: an iframe is a replaced
   element, so width:auto falls back to its intrinsic 300px */
.bk-frame {
  position: absolute;
  top: -66px;
  left: -17px;
  width: calc(100% + 34px);
  height: calc(100% + 66px);
  border: 0;
  background: #fff;
}

/* sits behind the iframe, so it shows until the calendar paints over it */
.bk-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 28px;
  text-align: center;
  font-size: 13px;
  /* on white now, so the page's light grey would not read against it */
  color: var(--af-soft-d);
  pointer-events: none;
}

.bk-fallback,
.bk-back {
  margin: 1.8rem 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--af-soft-l);
}
.bk-back { margin-top: 0.8rem; }

.bk-fallback a,
.bk-back a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.bk-fallback a:focus-visible,
.bk-back a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1100px) {
  .bk-wrap { padding: 7vh 5vw 10vh; }
}

@media (max-width: 760px) {
  .bk-wrap { padding: 6vh 22px 9vh; }
  .bk-frame-wrap { border-radius: 12px; height: 900px; }
}

/* Narrow enough that the provider goes edge to edge on its own: the crop has
   nothing left to trim and would start eating the calendar. */
@media (max-width: 700px) {
  .bk-frame { top: 0; left: 0; width: 100%; height: 100%; }
}

/* The hero subtitle carries a mailto link on this page. Without a rule it
   renders as the browser's default blue, which measured 1.32:1 against the
   green-tinted hero video. White with an underline clears AA comfortably and
   matches how links read elsewhere on the site. */
.ct-sub a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}
.ct-sub a:hover { border-bottom-color: #fff; }
.ct-sub a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }