/* Contact page: heading beside a compact booking card, in line with the v4 homepage */
@font-face { font-family: 'P2 Sans'; src: url('assets/inter-tight-var.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
body.contact { font-family: 'P2 Sans', 'Profile Sans', Arial, sans-serif; font-weight: 400; }
body.contact main { min-height: 0; }
body.contact .contact-layout { --pad-top: clamp(48px, 9vh, 112px); width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; padding: var(--pad-top) 0 clamp(72px, 11vh, 136px); display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: clamp(48px, 8vw, 128px); align-items: start; }
body.contact .contact-intro { position: sticky; top: calc(76px + var(--pad-top)); }
body.contact h1 { font-size: var(--h2); letter-spacing: -.045em; line-height: .96; max-width: none; }
body.contact .lead { font: 400 clamp(19px, 1.6vw, 22px)/1.5 'P2 Sans', 'Profile Sans', Arial, sans-serif; letter-spacing: -.01em; color: var(--ink-2); margin-top: 28px; max-width: 24em; text-wrap: pretty; }

/* Booking card. Calendly's free plan only serves a white card, so the frame is inverted and
   screened onto the page: its white becomes this card's own navy and its ink becomes light. */
body.contact .booking { position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(255,255,255,.025); overflow: hidden; scroll-margin-top: 100px; }
/* The loading note leaves on its own after ten seconds, so it never depends on the script. */
body.contact .booking::before { content: 'Loading the calendar'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--ink-3); animation: booking-note-out 0s linear 10s forwards; }
body.contact .booking.is-ready::before { content: none; }
@keyframes booking-note-out { to { visibility: hidden; } }
body.contact .booking-frame { display: block; position: relative; width: 100%; height: 602px; border: 0; background: transparent; color-scheme: normal; filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
/* Forced-colours modes get Calendly's own untouched card. */
@media (forced-colors: active) { body.contact .booking-frame { filter: none; mix-blend-mode: normal; } }

@media (max-width: 960px) {
  body.contact .contact-layout { --pad-top: clamp(48px, 11vw, 88px); grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-bottom: 72px; }
  body.contact .contact-intro { position: static; }
  body.contact .booking { width: min(100%, 480px); }
}
@media (max-width: 700px) {
  body.contact .booking { scroll-margin-top: 80px; }
  /* Phones: run the card edge to edge so Calendly's own header has room for its title. */
  body.contact .booking { width: auto; margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-radius: 0; }
  body.contact footer { flex-wrap: wrap; row-gap: 4px; }
  body.contact footer > a { flex-basis: 100%; }
}