/* ==========================================================================
   SYS.10 initiate — the closing statement, the direct lines, and the enquiry
   form. One CTA only: everything on this screen funnels into the form beside
   it, and each contact detail appears exactly once on the page.
   ========================================================================== */

.cta{ padding-block:18vh 12vh; }

/* ---------- closing statement ---------- */
.cta-lead{
  margin-top:clamp(46px,8vh,104px);
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:clamp(24px,4vw,80px); align-items:end;
}
.cta-statement{
  font-family:var(--headline); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.85rem,5vw,4.6rem); line-height:1.04; letter-spacing:0; max-width:13ch;
}
.cta-statement .line{ display:block; overflow:hidden; padding:.08em 0; }
.cta-statement .ch{ display:inline-block; will-change:transform; }
.cta-statement .outline{ color:transparent; -webkit-text-stroke:1.1px var(--ink); }
.cta-sub{ max-width:42ch; padding-bottom:.6em; font-size:var(--fs-base); line-height:1.85; color:var(--muted); }
@media (max-width:900px){
  .cta-lead{ grid-template-columns:1fr; align-items:start; gap:26px; }
  .cta-sub{ padding-bottom:0; }
}

/* ---------- panel: direct lines + form ---------- */
.contact-panel{
  margin-top:clamp(46px,8vh,100px);
  display:grid; grid-template-columns:.82fr 1.18fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.contact-channels,.contact-form{ background:var(--panel); }
.contact-channels{ padding:clamp(24px,3vw,46px); display:flex; flex-direction:column; }
.cn-k{ font-size:var(--fs-2xs); letter-spacing:.22em; text-transform:uppercase; color:var(--amber); }

/* Key/value rows, matching the SYS.07 fact table so the page reads as one system. */
.cl-list{ margin-top:20px; border-top:1px solid var(--line); }
.cl-row{ display:grid; grid-template-columns:76px 1fr; gap:14px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); }
.cl-row dt{ font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.cl-row dd{ font-size:var(--fs-md); line-height:1.65; color:var(--ink); }
/* These are the primary contact routes on a phone — WhatsApp especially — so
   they get a full 44px tap target rather than the 26px the text alone needs. */
.cl-row dd a{ display:inline-flex; align-items:center; min-height:44px; border-bottom:1px solid transparent; transition:color .35s var(--ease-out), border-color .35s var(--ease-out); }
@media (hover:hover){ .cl-row dd a:hover{ color:var(--accent); border-bottom-color:var(--accent); } }
/* Sets expectations, and gives the left column enough substance to balance
   the form beside it instead of trailing off into empty panel. */
.cl-next{ margin-top:clamp(26px,3.5vh,40px); }
.next-list{ list-style:none; counter-reset:step; margin-top:16px; display:grid; gap:12px; }
.next-list li{ counter-increment:step; position:relative; padding-left:30px; font-size:var(--fs-md); line-height:1.6; color:var(--muted); }
.next-list li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:.1em;
  font-size:var(--fs-2xs); letter-spacing:.1em; color:var(--accent);
}
.cl-offer{ margin-top:14px; font-size:var(--fs-md); line-height:1.7; color:var(--muted); }
.cl-sla{ margin-top:auto; padding-top:26px; display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cl-sla .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2.6s var(--ease-out) infinite; }

/* ---------- form ---------- */
.contact-form{ padding:clamp(22px,3vw,46px); display:grid; gap:20px; align-content:start; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:8px; min-width:0; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:var(--fs-2xs); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.req{ color:var(--amber); }
.field input,.field select,.field textarea{
  width:100%; border:1px solid var(--field-line); background:var(--bg); color:var(--ink);
  font:inherit; font-size:var(--fs-md); line-height:1.5; padding:14px 15px; min-height:48px;
  outline:none; border-radius:0;
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint); }
/* Native select chrome would break the flat console look, so it is reset and
   given the same chevron the FAQ rows use. While the placeholder option is
   still selected the control is :invalid, which doubles as a "nothing chosen
   yet" hook for the muted colour. */
.field select{ appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.field select:invalid{ color:var(--faint); }
.field select option{ background:var(--panel); color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); background:var(--hover); box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }

/* Validation is announced in text as well as colour. */
.field-err{ font-size:var(--fs-2xs); letter-spacing:.06em; color:var(--amber); min-height:0; }
.field-err:empty{ display:none; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--amber); }
.field.invalid input:focus,.field.invalid select:focus,.field.invalid textarea:focus{ box-shadow:0 0 0 1px color-mix(in oklab, var(--amber) 40%, transparent); }

.form-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:22px; }
.form-actions .hint{ max-width:40ch; font-size:var(--fs-2xs); line-height:1.7; color:var(--muted); }
.contact-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:0 28px; border:1px solid var(--accent);
  background:var(--accent); color:var(--on-accent);
  font-size:var(--fs-sm); letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  transition:transform .4s var(--ease-out), filter .4s var(--ease-out);
}
@media (hover:hover){ .contact-submit:hover{ transform:translateY(-2px); filter:brightness(1.08); } }
@media (pointer:coarse){ .contact-submit{ cursor:pointer; } }
.form-status{ font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.form-status:empty{ display:none; }
.form-status.bad{ color:var(--amber); }

@media (max-width:900px){ .contact-panel{ grid-template-columns:1fr; } .cl-sla{ margin-top:26px; } }
@media (max-width:560px){
  .form-grid{ grid-template-columns:1fr; }
  .contact-submit{ width:100%; }
  .form-actions{ justify-content:stretch; }
  .cl-row{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- honeypot ----------
   Off-screen rather than display:none: a bot that reads computed styles skips
   a hidden field, but a field that is merely positioned away still looks real
   to it. Never given to a person — aria-hidden and tabindex="-1" in the markup
   keep it out of both the screen-reader tree and the tab order. */
.hp-field{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}

/* ---------- submit states ---------- */
.contact-submit{ position:relative; }
.contact-submit[disabled]{ cursor:progress; filter:saturate(.75); }
.submit-spin{ display:none; width:15px; height:15px; border:2px solid color-mix(in oklab, var(--on-accent) 35%, transparent); border-top-color:var(--on-accent); border-radius:50%; animation:submit-spin .7s linear infinite; }
.contact-submit.is-sending .submit-spin{ display:block; }
.contact-submit.is-sending .submit-arrow{ display:none; }
@keyframes submit-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .submit-spin{ animation-duration:1.6s; } }