/* Book, where every "Get a Quote" lands. The ask beside the calendar: the consultation is booked on a sheet, through
   Calendly's inline embed once the real event exists. Beside it the two founders and the other ways in. Then what happens after you book, on the field
   colour, with the three sites we built fanned out like phones on a table. */

.bk-head { padding: clamp(20px, 3.4vh, 40px) 0 var(--s6); }
.bk-head__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: var(--s4) var(--s5); align-items: start; }
.bk-say { position: sticky; top: calc(var(--head) + 24px); display: grid; gap: 22px; }
.bk-say h1 { font-size: clamp(70px, 9.6vw, 156px); font-weight: 900; line-height: .82; letter-spacing: -0.015em; }
.bk-nowrap { white-space: nowrap; }
/* The shell marks the current page with an underline and square corners; on this page the current link is the
   booking pill, which keeps its shape. (Better fixed once in shell.css: see the report.) */
.head__nav .head__book[aria-current="page"] { border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); }
.bk-say__lede { max-width: 30ch; font: 500 clamp(19px, 1.5vw, 23px)/1.4 var(--text); }
.bk-who { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.bk-who__frames { display: flex; gap: 8px; }
.bk-who__names { font-weight: 700; }
.bk-ways { display: grid; gap: 2px; font-weight: 700; }
.bk-ways a { display: inline-flex; align-items: center; min-height: 44px; color: var(--signal-ink); text-underline-offset: 4px; }
.bk-ways a:hover { color: var(--ink); }

/* The small founder frames, the same as on About: a real photograph in colour, a placeholder toned the same way. */
.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--signal); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait[data-placeholder] img { filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; }
.portrait--small { width: 84px; }
.portrait__initials { position: absolute; left: 7px; bottom: 4px; font: 900 34px/.8 var(--display); color: var(--bone); }
.portrait__flag { position: absolute; top: 5px; left: 5px; right: 5px; padding: 3px 0; border-radius: 4px; background: var(--ink); color: var(--on-dark); font: 700 10px/1 var(--text); text-align: center; letter-spacing: .02em; }

/* The calendar, on a sheet. Calendly draws inside .bk-cal__embed; until the event exists, a marked empty slot. */
.bk-cal { display: grid; gap: var(--s3); padding: clamp(28px, 3vw, 44px); border-radius: var(--r); background: var(--paper); box-shadow: 0 40px 60px -40px rgba(19, 17, 21, .45), inset 0 0 0 1px var(--hair); }
.bk-cal__title { font-size: clamp(40px, 3.6vw, 56px); }
.bk-cal__asks { max-width: 46ch; }
.bk-cal__embed { min-width: 320px; height: 700px; margin-inline: -12px; }
.bk-cal__off { display: grid; place-items: center; min-height: 320px; padding: 24px; border: 2px dashed #B9AFA2; border-radius: 12px; background: var(--bone); color: var(--slate); font-weight: 700; text-align: center; }

/* After you book. */
.after { position: relative; padding: var(--s6) 0; background: var(--signal); color: var(--ink); overflow: clip; }
.after__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s4) var(--s5); align-items: center; }
.after__text { display: grid; gap: var(--s4); }
.after h2 { font-size: clamp(54px, 5.8vw, 96px); }
.after__steps { display: grid; gap: 0; counter-reset: step; border-top: 2px solid var(--ink); }
.after__step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(19, 17, 21, .3); counter-increment: step; }
.after__step::before { content: counter(step); grid-row: span 2; font: 900 64px/.8 var(--display); }
.after__step h3 { font-size: 23px; }
.after__step p { margin-top: 4px; }
.after__links { display: flex; flex-wrap: wrap; gap: 8px 32px; }

.after__fan { display: grid; gap: var(--s3); }
.fan { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 12px; }
.fan__phone { position: relative; display: grid; justify-items: center; gap: 10px; width: 31%; color: var(--ink); text-decoration: none; transition: translate .3s var(--ease); }
.fan__phone img { width: 124%; max-width: none; margin-inline: -12%; }
.fan__phone--launch img { rotate: -7deg; translate: 0 5%; }
.fan__phone--signature { z-index: 1; width: 38%; }
.fan__phone--flagship img { rotate: 7deg; translate: 0 5%; }
.fan__phone:hover { translate: 0 -10px; }
.fan__label { padding: 6px 11px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-size: 14px; white-space: nowrap; }
.fan__label b { font-weight: 800; }
.fan__phone:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 18px; }
.after__eg { text-align: center; font-size: 16px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fan__phone--launch img { animation: bk-left linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .fan__phone--flagship img { animation: bk-right linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes bk-left { from { translate: 30% 5%; rotate: 0deg; } to { translate: 0 5%; rotate: -7deg; } }
@keyframes bk-right { from { translate: -30% 5%; rotate: 0deg; } to { translate: 0 5%; rotate: 7deg; } }

@media (max-width: 1099.98px) {
  .bk-head__in { grid-template-columns: 1fr; }
  .bk-say { position: static; }
  .after__in { grid-template-columns: 1fr; }
}
@media (max-width: 759.98px) {
  .bk-head { padding-bottom: var(--s5); }
  .bk-say h1 { font-size: clamp(60px, 18.5vw, 110px); }
  .bk-cal { margin-inline: calc(-1 * var(--gutter) + 8px); padding: 24px 18px; }
  .bk-cal__embed { height: 760px; margin-inline: -10px; }
  .bk-cal__off { min-height: 220px; }
  .after { padding: var(--s5) 0; }
  .fan__label { font-size: 13px; padding: 5px 9px; }
  .fan__phone { width: 32%; }
  .fan__phone--signature { width: 36%; }
  .fan__label { white-space: normal; text-align: center; border-radius: 12px; }
}