/* North Focus — Contact page styles.
   A short two-column "begin the conversation" layout: concise framing + the
   two-question card on the left, Microsoft Bookings as the dominant element on
   the right. Shared header/footer and the .nf-wte-questions card live in site.css. */

/* ── Two-column shell ──────────────────────────────────────────────
   Desktop: a flex row — a compact framing column beside a wide booking panel.
   The booking panel is intentionally the larger, dominant element. */
.nf-book__grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 5vw, 76px);
}
.nf-book__left {
  flex: 0 1 clamp(320px, 36%, 440px);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.4vw, 40px);
  position: sticky;
  top: 120px;
}
.nf-book__panel {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Left column — framing ── */
.nf-book__intro { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.nf-book__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(27px, 3vw, 40px); line-height: 1.05; color: var(--nf-navy);
  margin: 0; text-wrap: balance; max-width: 16ch;
}
.nf-book__body {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600);
  margin: 0; max-width: 40ch; text-wrap: pretty;
}

/* The two-question card sits as the visual anchor of the left column. */
.nf-book__card { margin: 0; }

/* Closing statement — the motif's resolving hand-off to the reader.
   One calm display line set apart by a thin coral rule; the owned phrase
   carries the only coral accent. */
.nf-book__resolve {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2vw, 25px); line-height: 1.42; color: var(--nf-navy);
  max-width: 34ch; text-wrap: pretty; margin: 0;
  padding-top: clamp(22px, 2.8vw, 30px);
  border-top: 2px solid var(--nf-coral);
}
.nf-book__resolve em { color: var(--nf-coral); font-style: normal; }

/* Quiet email fallback — a calm body line under the resolve, for anyone who
   would rather write before booking (also covers a blocked Bookings embed). */
.nf-book__email {
  font-family: var(--font-body); font-size: var(--text-sm);
  line-height: 1.6; color: var(--nf-ink-600); margin: 14px 0 0;
}
.nf-book__email a {
  color: var(--nf-navy); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--nf-coral);
}
.nf-book__email a:hover { color: var(--nf-coral); }

/* ── Right column — Microsoft Bookings, the dominant interaction ──
   Held in the site's paper/grid language: an eyebrow + single line, then the
   framed scheduler with the signature single-corner sweep. No heavy chrome —
   it reads as part of the page, not a widget dropped on top. */
.nf-book__panelhead {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.nf-book__panelsub {
  font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600);
  margin: 0; max-width: 44ch; text-wrap: pretty;
}

.nf-booking__embed {
  position: relative;
  width: 100%;
  height: 2070px;
  border-radius: 12px;
  border-bottom-left-radius: var(--radius-curve);
  overflow: hidden;
  background: var(--nf-white);
  border: 1px solid var(--nf-hairline);
  box-shadow: var(--shadow-md);
}
.nf-booking__frame {
  display: block; width: 100%; height: 100%; border: 0;
}
.nf-booking__loading {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: var(--nf-paper-2);
  transition: opacity var(--dur-slow, 320ms) var(--ease-out, ease);
}
.nf-booking__loading--hidden { opacity: 0; pointer-events: none; }
.nf-booking__spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--nf-navy-100);
  border-top-color: var(--nf-coral);
  animation: nf-booking-spin 720ms linear infinite;
}
@keyframes nf-booking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .nf-booking__spinner { animation: none; }
}
.nf-booking__loadingtext {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-600);
}
.nf-booking__meta {
  font-size: var(--text-sm); line-height: 1.55; color: var(--nf-ink-600);
  opacity: 0.85; margin: clamp(14px, 2vw, 18px) 0 0;
}
.nf-booking__meta a {
  color: var(--nf-navy-600); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 2px;
}
.nf-booking__meta a:hover { color: var(--nf-navy); }

/* ── Mobile — single column, reordered ──────────────────────────────
   The left wrapper collapses to display:contents so intro · card · closing
   join the grid as direct items, with the booking panel last:
     1 intro · 2 card · 3 closing · 4 email links · 5 bookings. */
@media (max-width: 920px) {
  .nf-book__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 6vw, 44px);
  }
  .nf-book__left { display: contents; }
  .nf-book__intro   { order: 1; }
  .nf-book__card    { order: 2; }
  .nf-book__resolve { order: 3; }
  .nf-book__email   { order: 4; margin-top: -14px; }
  .nf-book__email + .nf-book__email { margin-top: -26px; }
  .nf-book__panel   { order: 5; }
  .nf-booking__embed { height: 2200px; }
}

@media (max-width: 620px) {
  .nf-booking__embed { height: 2420px; }
}