/* Copyright (c) 2025-2026 Systèmes Calibre Inc. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/*
Contact / book page only. (The 404's .page-hero.is-display and the .choices focus ring were promoted to style.css in
the round-4 consistency pass; 404.html no longer links this file.)
Round 4 (2026-09-23): rebuilt against copy/site-copy-v3.md section 5. The page is one split screen, navy (the ask,
with Phil's face on the reply) beside mist (the form), then an amber band with the price and the languages.
The form fields themselves (.form-panel, .field, .choices, .form-status) are shared and stay in style.css; this
file only takes the panel off, because here the whole mist half is the panel.
Round 5 (2026-09-23, review 07): the reply ("what happens next") is its own grid item. On a desktop it sits under
the ask in the navy half; below 900px the order is ask, form, reply, so the fields start sooner. The "Or write to"
address gets a 44px tap target.
*/

/* ---------- The split: navy | mist, each colour running to its own edge of the screen ----------
   The section paints both halves with a hard stop at 50%. The container is centred and its two equal columns meet
   in the middle of their gap, which is therefore exactly 50% too: the colour edge sits in the gutter at every width,
   with no 100vw arithmetic (100vw counts the scrollbar, 50% does not). */
.contact { background: linear-gradient(90deg, var(--navy) 50%, var(--mist) 50%); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 144px;
  grid-template-areas: "ask book" "reply book"; grid-template-rows: auto 1fr;
}
.contact-ask { grid-area: ask; padding-top: 112px; }   /* 112px: the h1 sits where every inner page's does */
.contact-book { grid-area: book; padding-block: 112px 120px; }
.contact-reply { grid-area: reply; align-self: start; margin-bottom: 120px; }

/* Left: the ask */
.contact-ask { color: var(--on-navy); }
/* The h1 is the shared .page-title (same face, size, tracking and leading as every inner page); .contact-title only
   resizes it where the halves stack */
.contact-say {
  margin-top: 44px;
  font: 800 clamp(1.75rem, 2.5vw, 2.375rem)/1.15 var(--display);
  letter-spacing: -0.014em;
  color: var(--on-navy);
  text-wrap: balance;
}
.contact-text { margin-top: 18px; max-width: 33rem; font-size: var(--fs-lede); line-height: 1.55; color: var(--on-navy-dim); text-wrap: pretty; }
.contact-text + .contact-text { margin-top: 14px; }

/* What happens next: Phil's face beside the promise of an answer and the first session, signed with the name line */
.contact-reply {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start;
  margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--amber); max-width: 32rem;
}
.contact-reply-photo { width: 96px; height: 96px; }  /* the round portrait itself is the shared .avatar */
.contact-reply p { font-size: 1.125rem; line-height: 1.6; color: var(--on-navy-dim); text-wrap: pretty; }
.contact-reply p + p { margin-top: 12px; }
.contact-reply .contact-next-link { margin-top: 18px; }
.contact-reply .contact-sign { margin-top: 20px; }
.contact-sign strong { display: block; font: 800 1.375rem/1.2 var(--display); color: var(--on-navy); letter-spacing: -0.01em; }
.contact-sign span { display: block; margin-top: 3px; font-size: 1rem; color: var(--on-navy-dim); }

/* Right: the form. The mist half is the panel, so the panel's own fill, corner and padding come off */
.contact-book { color: var(--ink); }
.contact .form-panel { background: none; border-radius: 0; padding: 0; max-width: 34rem; }
.contact .form-panel .btn { margin-top: 10px; }
.contact .form-status { margin-top: 20px; }
.contact .form-status .note { display: table; margin-top: 10px; }
.contact-mail { margin-top: 30px; font-size: 1.1875rem; color: var(--ink); }
.contact-mail a { display: inline-block; padding-block: 11px; margin-block: -11px; }  /* 44px tap target */
.contact-book .note-block { margin-top: 36px; border-left-color: var(--line-strong); }
.contact-book .note-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1100px) { .contact-grid { column-gap: 96px; } }

/* Stacked: navy ask, mist form, navy reply, each full width (the blocks reach past the container's gutters) */
@media (max-width: 900px) {
  .contact { background: none; }
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: "ask" "book" "reply"; grid-template-rows: auto; column-gap: 0; }
  .contact-ask, .contact-book, .contact-reply { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .contact-ask { background: var(--navy); padding-block: 80px 72px; }
  .contact-book { background: var(--mist); padding-block: 64px 80px; }
  .contact-reply { background: var(--navy); max-width: none; margin-block: 0; padding-block: 64px 72px; border-top: 0; grid-template-columns: 96px minmax(0, 32rem); }
  .contact-title { font-size: clamp(2.5rem, 6.5vw, 3.75rem); }
}
@media (max-width: 640px) {
  .contact-ask { padding-block: 60px 56px; }
  .contact-book { padding-block: 44px 56px; }
  .contact-reply { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding-block: 48px 56px; }
  .contact-title { font-size: 2.4rem; }
  .contact-say { margin-top: 30px; font-size: 1.625rem; }
  .contact-text { font-size: 1.1875rem; }
  .contact-reply-photo { width: 72px; height: 72px; }
  .contact-reply p { font-size: 1.0625rem; }
  .contact-mail { text-align: center; }
  /* the three language choices on one row, equal widths, instead of "Either" wrapping alone */
  .contact .choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .contact .choices label { justify-content: center; gap: 8px; padding: 0 8px; }
}

/* ---------- The amber band: the price as one sentence, and the languages ---------- */
.contact-terms {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "fig body";
  column-gap: 112px; align-items: end;
}
.contact-terms .price-block-fig { max-width: 24rem; }
.contact-terms-body { grid-area: body; }
.contact-terms-body p { padding-top: 16px; border-top: 2px solid var(--navy); font-size: 1.3125rem; line-height: 1.5; color: var(--ink); padding-right: 12%; text-wrap: pretty; }
.contact-terms-body p + p { margin-top: 30px; }
@media (max-width: 860px) {
  .contact-terms { grid-template-columns: 1fr; grid-template-areas: "fig" "body"; row-gap: 40px; }
}
@media (max-width: 640px) {
  .contact-terms-body p { font-size: 1.1875rem; padding-right: 0; }
  .contact-terms-body p + p { margin-top: 24px; }
}

/* Added in the Eleventy port (2026-09-24), not in the mockup: the live backend's honeypot. Off-screen for people and
   assistive tech (aria-hidden, tabindex -1 in the markup); naive bots fill it and the backend drops the message. */
.field-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* "When would a short call suit you?" (2026-09-24): a two-line box, so its example wraps on a phone instead of being
   cut off, and people can offer a couple of times. Cancels the shared 168px textarea floor for this field only. */
#f-times { min-height: 0; }