/* Naytra — contact section ("Contact us"): light, full-bleed. Content left, form right.
   Light ground (--paper) + Fraunces/DM Sans. System colour/spacing tokens only.
   Depends on tokens.css + base.css. */

.fcta{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-block:clamp(96px,14vh,180px);
  background:var(--paper);
}

/* Full-bleed content — no frame cap, shared 6vw side padding.
   Top-aligned: the form starts level with the title (no eyebrow in this section). */
.fcta__inner{padding:0 clamp(var(--space-40),6vw,var(--space-120));
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:start}

/* Left — statement. Title + body match the other section heads (title 1.08, body 17px/1.5,
   --space-20 between them). */
.fcta__title{font-family:var(--font-serif);font-weight:340;color:var(--ink);
  font-size:clamp(30px,3.8vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0;
  max-width:16ch;text-wrap:balance}
.fcta__body{font-family:var(--font-sans);font-weight:400;font-size:17px;
  line-height:1.5;color:var(--ink-2);margin:var(--space-20) 0 0;max-width:42ch}

/* Right — the form; top-aligned with the title. */
.fcta__right{width:100%;max-width:460px;justify-self:start}
.fcta__form{display:flex;flex-direction:column;gap:var(--space-30)}
/* Underlined fields — no box, just a baseline rule */
.fcta__input{width:100%;box-sizing:border-box;padding:var(--space-10) 0;
  background:transparent;border:0;border-bottom:1px solid var(--ink);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;transition:border-color .18s ease}
.fcta__input::placeholder{color:var(--ink-3)}
.fcta__input:focus{outline:none;border-bottom-color:var(--accent)}
/* Phone: a narrow country-code field beside the number, sharing the underline style. */
.fcta__phone{display:flex;gap:var(--space-20)}
.fcta__code{flex:0 0 72px;text-align:center}
.fcta__num{flex:1 1 auto}
.fcta__form.is-done .fcta__phone{display:none}
/* Message: same underlined field, grows vertically. */
.fcta__msg{display:block;resize:vertical;min-height:calc(16px * 1.5 * 3 + var(--space-10) * 2);
  line-height:1.5}
.fcta__submit{width:100%;height:52px;margin-top:var(--space-20)}
.fcta__submit:disabled{opacity:.6;cursor:progress}
.fcta__done{display:none;font-family:var(--font-sans);font-size:15px;color:var(--ink);
  margin:0;padding:var(--space-20) 0}
.fcta__form.is-done .fcta__field,.fcta__form.is-done .fcta__submit,
.fcta__form.is-done .fcta__err--form{display:none}
.fcta__form.is-done .fcta__done{display:block}

/* Validation. Errors use --neg (the system's red; flips to --neg-dark on dark grounds) -
   the one sanctioned use of red outside P&L figures. Message sits under its field. */
.fcta__field{display:flex;flex-direction:column}
.fcta__input[aria-invalid="true"],
.fcta__input[aria-invalid="true"]:focus{border-bottom-color:var(--neg)}
.fcta__err{margin:var(--space-10) 0 0;font-family:var(--font-sans);font-size:13px;
  line-height:1.4;color:var(--neg)}
.fcta__err[hidden]{display:none}

@media (max-width:820px){
  .fcta__inner{grid-template-columns:1fr;gap:clamp(32px,6vw,56px)}
  .fcta__title{max-width:none}
  .fcta__right{max-width:none}
}