/* ==========================================================================
   /book — Book a Call
   Scoped page styles. Tokens, reset and the shared components
   (.container, .pill, .section-eyebrow, .handwritten, .highlight,
   .rg-modal) come from /styles.css. Everything here is prefixed .bk-
   so this file can never reach the homepage.
   ========================================================================== */

body.bk {
  background: var(--bg);
  color: var(--dark);
  font-family: var(--font-inter);
  /* Nothing on this page is meant to scroll sideways, and the 100vw
     full-bleed calendar below can otherwise expose a hairline of it. */
  overflow-x: hidden;
}

/* Fade-up on load. Pure CSS so the page is never blank if JS is slow;
   the animation only ever ends at the visible state. */
@keyframes bk-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bk-fade {
  animation: bk-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .bk-fade { animation: none; }
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.bk-bar { padding: 24px 0 8px; }
.bk-bar-inner { display: flex; align-items: center; }
.bk-logo img {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(6, 6, 18, 0.18));
}
.bk-logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 4px; }

/* ==========================================================================
   Hero
   Desktop is a 2-column grid: lead copy and supporting detail stack in
   column 1, the calendar card spans both rows in column 2.
   ========================================================================== */
/* Vertical padding only. A `padding: X 0 Y` shorthand would zero the
   side padding this element inherits from .container and push the copy
   flat against the screen edge. Same trap as .hero in styles.css. */
.bk-hero {
  padding-top: 28px;
  padding-bottom: 64px;
}

.bk-hero-grid {
  display: grid;
  /* Deliberately kept under Cal's ~700px breakpoint so the embed renders
     its compact stacked layout. The wide side-by-side view is out of
     proportion in a side column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  row-gap: 32px;
  align-items: start;
}
.bk-hero-lead   { grid-column: 1; grid-row: 1; }
.bk-hero-detail { grid-column: 1; grid-row: 2; }
.bk-hero-cal    { grid-column: 2; grid-row: 1 / span 2; }

/* .pill ships centred (margin: 0 auto) for the homepage's centred
   section headers — this hero is left-aligned. */
.bk-pill { margin: 0 0 20px; }

.bk-title {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.bk-sub {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--gray-text);
  max-width: 34em;
}

.bk-detail-heading {
  font-family: var(--font-geist);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 14px;
}

.bk-list { display: flex; flex-direction: column; gap: 12px; }
.bk-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark);
}
/* Blue tick, drawn in CSS so there is no extra request. */
.bk-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--orange);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The one handwritten accent on the page. 24px keeps the blue Caveat
   inside the large-text contrast threshold. */
.bk-minutes { margin-top: 18px; }
.bk-minutes .handwritten { font-size: 24px; line-height: 1.3; }

.bk-trust { margin-top: 30px; }
.bk-trust-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 14px;
}
.bk-trust-label b { color: var(--dark); font-weight: 600; }

.bk-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.bk-logos img {
  height: 26px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.bk-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   Calendar card
   ========================================================================== */
.bk-hero-cal { scroll-margin-top: 24px; }

/* The skeleton is layered under the embed rather than removed from flow,
   so nothing shifts when the iframe arrives. */
.bk-cal-wrap { position: relative; }

#my-cal-inline-call {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-height: 640px;
}
/* Cal renders inside a shadow root, so page CSS cannot reach its iframe.
   Only the light-DOM host is reachable from here. */
#my-cal-inline-call > * {
  max-width: 100%;
}

.bk-cal-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Dark to match the embed, which is pinned to the dark theme. A light
     skeleton would flash pale before the black calendar lands. */
  background: #000000;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
.bk-cal-skeleton.is-hidden { display: none; }

.bk-cal-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: bk-spin 0.8s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bk-cal-spinner { animation: none; }
}

.bk-cal-fallback { font-size: 14px; color: var(--gray-text); padding: 20px 0; }
.bk-cal-fallback a { color: var(--orange); text-decoration: underline; }

/* ==========================================================================
   Proof
   ========================================================================== */
.bk-proof { background: var(--bg-alt); padding: 72px 0; }

/* No cards. The screenshots carry their own backgrounds, so they sit
   straight on the section and float on a soft shadow. Masonry columns
   let each one keep its natural aspect ratio instead of being cropped
   or letterboxed into a fixed tile. */
.bk-shots {
  column-count: 3;
  column-gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
}
.bk-shot {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-radius: 10px;
  margin: 0 0 24px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* drop-shadow (not box-shadow) so the glow follows the image itself. */
  filter: drop-shadow(0 10px 26px rgba(6, 6, 18, 0.10));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.bk-shot img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.bk-shot:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 18px 38px rgba(6, 6, 18, 0.16));
}
.bk-shot:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .bk-shot:hover { transform: none; }
}

/* ==========================================================================
   What we do
   ========================================================================== */
.bk-what { padding: 76px 0 68px; }
.bk-what-title {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 40px;
}
/* Four pillars: 4 across on desktop, 2x2 on tablet, stacked on phone.
   Runs the full container width so the copy wraps into fewer lines and
   the short cards are not left with a block of empty tile under them. */
.bk-what-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 0 auto;
}
.bk-what-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}
.bk-what-label {
  display: block;
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.bk-what-item p { font-size: 15px; line-height: 1.6; color: var(--dark); }
.bk-what-close {
  text-align: center;
  margin-top: 28px;
  font-size: 15px;
  color: var(--gray-text);
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.bk-cta { background: var(--white); color: var(--dark); border-top: 1px solid var(--border); }
.bk-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 72px 30px;
  text-align: center;
}
.bk-cta-title {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.03em;
  color: var(--dark);
}

.bk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  box-shadow: 0 1.4px 4px rgba(6, 6, 18, 0.3);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.bk-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.bk-btn:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .bk-btn:hover { transform: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.bk-footer { background: var(--white); color: var(--dark); padding: 0 0 40px; }
.bk-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.bk-footer-mail { font-size: 15px; color: var(--dark); transition: color 0.3s ease; }
.bk-footer-mail:hover { color: var(--orange); }
.bk-socials { display: flex; gap: 8px; }
/* The social SVGs are white glyphs, so they keep the homepage's dark
   tile behind them rather than sitting invisibly on the light panel. */
.bk-socials a {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--dark);
  transition: opacity 0.2s ease;
}
.bk-socials a:hover { opacity: 0.8; }
.bk-socials a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bk-socials img { width: 14px; height: 14px; }
.bk-copyright { font-size: 13px; color: var(--gray-text); }

/* ==========================================================================
   Tablet (<=1099px) — calendar drops under the copy, full width.
   ========================================================================== */
@media (max-width: 1099px) {
  .bk-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 30px;
  }
  /* Order is the whole point of the mobile layout: lead copy, then the
     calendar, then the rest. The booking widget stays near the top. */
  .bk-hero-lead   { grid-column: 1; grid-row: 1; }
  .bk-hero-cal    { grid-column: 1; grid-row: 2; }
  .bk-hero-detail { grid-column: 1; grid-row: 3; }

  .bk-shots { column-count: 2; }
}

/* ==========================================================================
   Phone (<=809px)
   ========================================================================== */
@media (max-width: 809px) {
  /* Everything above the calendar is scaled down so the booking widget
     is reachable in one short scroll instead of sitting a full screen
     below the fold. */
  .bk-bar { padding: 14px 0 4px; }
  .bk-logo img { height: 32px; }

  .bk-hero { padding-top: 10px; padding-bottom: 36px; }
  .bk-hero-grid { row-gap: 20px; }

  .bk-pill { margin-bottom: 12px; }
  .bk-pill span { font-size: 10px; letter-spacing: 0.1em; padding: 0 10px; }

  .bk-title { font-size: clamp(23px, 6.4vw, 28px); line-height: 1.15; margin-bottom: 12px; }
  .bk-sub { font-size: 14px; line-height: 1.5; }

  .bk-detail-heading { font-size: 11px; margin-bottom: 10px; }
  .bk-list { gap: 9px; }
  .bk-list li { font-size: 14px; line-height: 1.45; padding-left: 22px; }
  .bk-list li::before { top: 5px; left: 3px; width: 5px; height: 9px; }

  /* Stays at 24px: blue Caveat below that fails the small-text contrast
     threshold, and it is only one line of height either way. */
  .bk-minutes { margin-top: 14px; }

  .bk-trust { margin-top: 22px; }
  .bk-trust-label { font-size: 11px; margin-bottom: 10px; }
  .bk-logos { gap: 18px; }
  .bk-logos img { height: 21px; }

  /* Full-bleed on phone. Cal renders the month grid at about viewport
     width whatever the container is, so inside the container's 26px
     gutters the Mon and Sun columns were being cut off the screen. */
  .bk-hero-cal {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  /* Scale the embed down. Its interior is a cross-origin iframe, so the
     only way to shrink what is inside is to transform the host.
     transform-origin is top CENTER so the shrink pulls in evenly from
     both sides and the block stays centred on the screen. book.js trims
     the leftover layout height the transform leaves behind. */
  #my-cal-inline-call {
    --cal-scale: 0.85;
    transform: scale(var(--cal-scale));
    transform-origin: top center;
    min-height: 640px;
  }

  .bk-proof { padding: 44px 0; }
  .bk-proof .section-eyebrow { gap: 12px; margin-bottom: 28px; }
  .bk-proof .section-eyebrow h2 { font-size: clamp(24px, 6.6vw, 30px); }
  .bk-shots { column-count: 1; }

  .bk-what { padding: 48px 0; }
  .bk-what-title { font-size: clamp(22px, 6vw, 28px); margin-bottom: 26px; }
  .bk-what-grid { grid-template-columns: minmax(0, 1fr); }
  .bk-what-item { padding: 18px 18px; }

  .bk-cta-inner { padding: 48px 26px; }
  .bk-cta-title { font-size: clamp(24px, 6.4vw, 30px); }

  .bk-footer-inner { flex-direction: column; align-items: flex-start; }
}