/* ============================================================
   Contact page — page-scoped styles (body.page-contact only).
   Loaded ONLY by contact.html and fr/contact.html, after styles.css.
   Reuses landing tokens + .eyebrow / .btn / .wrap / .field / .err / .hint / .hp
   components; adds the dark contact-page layout, dark form controls, status
   variants, and the confirmation panel. Every selector is gated on .page-contact,
   so nothing here affects the landing page or any other page.
   ============================================================ */

body.page-contact{background:var(--ink);color:var(--on-ink)}

/* --- Hero (compact) ---
   The hero is now the H1 alone (2026-08-03): the eyebrow, lede, reassurance line, upper
   direct-email row, and the "Before you write" guidance cards were removed at the owner's request,
   so the page opens on the heading and goes straight to the form. Their rules are gone with them;
   the lower "Prefer email?" .ct-note below the form remains the email alternative. Padding was
   tightened in the same pass so the heading no longer floats in a tall empty band. */
.page-contact .ct-hero{padding:clamp(20px,2.2vw,30px) 0 clamp(12px,1.2vw,16px)}
.page-contact .ct-h1{font-family:var(--serif);max-width:none;margin:0;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem);line-height:1.08;letter-spacing:-.01em;color:var(--on-ink)}

/* --- Form band: full-width, directly under the hero. --- */
.page-contact .ct-band{display:block;padding-top:clamp(12px,1.4vw,18px)} /* padding-top only — keep .wrap's gutter */

/* --- Form column ---
   The form itself is the contained surface (2026-08-01): one panel, same surface + radius as the
   confirmation panel it is replaced by on success, so the interaction area reads as a single block
   rather than loose controls on the page background. No extra wrapper element was needed. */
.page-contact form.contact{max-width:none;background:rgba(237,241,244,.04);
  border:1px solid rgba(237,241,244,.16);border-radius:14px;padding:clamp(16px,2.4vw,32px)}
.page-contact .field{margin-bottom:var(--s3)}
.page-contact .field label{display:block;font-weight:600;color:var(--on-ink);margin-bottom:6px}
.page-contact .field .hint{color:var(--on-ink-muted);font-size:.9rem;margin:5px 0 0}
.page-contact input[type=text],
.page-contact input[type=email],
.page-contact input[type=tel],
.page-contact textarea,
.page-contact select{
  width:100%;box-sizing:border-box;font:inherit;color:var(--on-ink);
  /* Border alpha lifted .18 -> .42 (2026-08-01) so the control boundary clears WCAG 1.4.11 3:1
     against both the panel surface and the control fill now that the form sits on its own panel. */
  background:rgba(237,241,244,.04);border:1px solid rgba(237,241,244,.42);border-radius:8px;
  padding:11px 13px;min-height:44px;transition:border-color .15s ease,box-shadow .15s ease}
.page-contact textarea{min-height:140px;line-height:1.5;resize:vertical}
.page-contact select{appearance:none;-webkit-appearance:none;cursor:pointer;color:var(--on-ink);
  /* solid dark control colour so the native option popup is dark, not white */
  background-color:#1b283a;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-ink-muted) 50%),linear-gradient(135deg,var(--on-ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.page-contact select option{background-color:#1b283a;color:var(--on-ink)}
.page-contact input::placeholder,.page-contact textarea::placeholder{color:rgba(175,192,206,.6)}
.page-contact input:focus,.page-contact textarea:focus,.page-contact select:focus{
  border-color:var(--accent-bright);outline:2px solid var(--accent-bright);outline-offset:1px}
.page-contact .field.invalid input,.page-contact .field.invalid textarea,.page-contact .field.invalid select{border-color:#F2A197}
.page-contact .err{color:#F2A197;font-size:.92rem;margin-top:6px;display:none}
.page-contact .field.invalid .err{display:block}
.page-contact .lbl-opt{font-weight:400;color:var(--on-ink-muted)}
.page-contact .field-grid{display:grid;gap:var(--s3)}
@media (min-width:560px){.page-contact .field-grid.two{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s2)}}
@media (min-width:560px){.page-contact .field-grid.name-email{grid-template-columns:1fr 2fr;gap:var(--s3) var(--s2)}}
.page-contact .field-grid .field{margin-bottom:0} /* row gap handles spacing inside a field-grid */

/* Two-column form (2026-08-01): identity + classification fields left (~40%), the problem
   description right (~60%), on the same grid row; the submit button is a full-width action row
   underneath, so it closes the whole form rather than only the narrow metadata column. Collapses
   to one column below 1000px (DOM order = visual order = tab order throughout: inputs → message
   → submit).
   The textarea is deliberately NOT stretched to the full height of the five-field stack: matching
   it exactly produced a ~460px near-square field filling ~47% of the panel, which asks for a
   written brief rather than a short scoping note. It is sized to ~13 visible lines and the right
   column is allowed to end early; resize:vertical stays available and no max-height is imposed.
   The action row pairs the submit button (left, under the field stack) with the confidentiality
   note (right, under the textarea), so the note sits where the eye lands before pressing send and
   the row closes the form evenly. */
.page-contact .ct-form-grid{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-bottom:0}
@media (min-width:1000px){
  .page-contact .ct-form-grid{grid-template-columns:minmax(300px,2fr) 3fr;grid-template-rows:auto auto;
    gap:var(--s3) var(--s4)}
  .page-contact .ct-fields{grid-column:1;grid-row:1}
  .page-contact .ct-message{grid-column:2;grid-row:1;align-self:start}
  .page-contact .ct-message textarea{flex:0 0 auto;height:380px}
  .page-contact .ct-form-grid > .btn{grid-column:1;grid-row:2;justify-self:start;align-self:start}
  .page-contact .ct-form-grid > .ct-note{grid-column:2;grid-row:2;align-self:center}
}
/* The in-grid confidentiality note is a form member, not page-tail copy: no top margin, and it
   keeps its own measure so the line length stays readable beside the button. */
.page-contact .ct-form-grid > .ct-note{margin:0;font-size:.88rem;line-height:1.5}
.page-contact .ct-fields{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.page-contact .ct-fields .field{margin-bottom:0}
.page-contact .ct-message{display:flex;min-width:0}
.page-contact .ct-message .field{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-bottom:0}
.page-contact .ct-message textarea{flex:1 1 auto;min-height:200px}
.page-contact .ct-form-grid > .btn{margin-top:0;min-height:44px}
.page-contact form.contact[aria-busy="true"] .btn[type="submit"]{opacity:.7;cursor:progress}

/* --- Inline status (validation / submitting / error / rate-limit / mailto) --- */
.page-contact .form-status{display:none;margin-top:var(--s3);border-radius:8px;
  padding:12px 14px;border:1px solid rgba(98,214,190,.4);background:rgba(98,214,190,.08);
  color:var(--on-ink);font-size:.95rem;line-height:1.5}

/* --- Confirmation panel (success / partial success) --- */
.page-contact .form-done{border:1px solid rgba(98,214,190,.4);border-radius:14px;
  padding:clamp(20px,2.6vw,30px);background:rgba(237,241,244,.04)}
.page-contact .form-done:focus{outline:2px solid var(--accent-bright);outline-offset:3px}
.page-contact .form-done-h{font-family:var(--serif);font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);
  line-height:1.15;margin:0 0 10px;color:var(--on-ink)}
.page-contact .form-done-body{margin:0;color:var(--on-ink-muted);line-height:1.6}
.page-contact .form-done-note{margin:10px 0 0;color:var(--on-ink-muted);font-size:.95rem;line-height:1.55}
.page-contact .form-done-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

/* --- Direct email / privacy note --- */
.page-contact .ct-note{max-width:none;margin:clamp(16px,2vw,22px) 0 0;color:var(--on-ink-muted);
  font-size:.95rem;line-height:1.6}
.page-contact .ct-note a{color:var(--accent-bright);text-decoration:none}
.page-contact .ct-note a:hover{text-decoration:underline}

/* --- What happens next --- */
.page-contact .ct-next{padding:clamp(30px,3.6vw,48px) 0 0;margin-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgba(237,241,244,.10)}
.page-contact .ct-next-h{margin:0 0 clamp(16px,2vw,24px);color:var(--accent-bright)}
.page-contact .ct-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:720px){.page-contact .ct-steps{grid-template-columns:repeat(3,1fr)}}
.page-contact .ct-step{margin:0}
.page-contact .ct-step-n{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-bright);margin-bottom:6px}
.page-contact .ct-step-t{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--on-ink);margin-bottom:4px}
.page-contact .ct-step-c{display:block;color:var(--on-ink-muted);font-size:.92rem;line-height:1.5}

/* --- Closing spacing --- */
.page-contact .ct-tail{padding-bottom:clamp(40px,5vw,72px)}