/* ==========================================================================
   Contact — the enquiry form, and the thank-you page it posts through to

   The site's first form, so the field styling starts here rather than being
   lifted from somewhere else. Loads after home.css and mobile.css.
   ========================================================================== */

.ct{ background:var(--white); padding:var(--section-y) 0; }
.ct__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:start; }

/* ---------- the pitch beside the form ---------- */
.ct__intro h1{
  font-size:calc(clamp(34px,4vw,54px) * var(--type-scale));
  line-height:1.08; letter-spacing:-.02em; max-width:15ch;
}
.ct__intro p{ margin-top:24px; max-width:46ch; font-size:17px; line-height:1.7; color:var(--ink-soft); }
.ct__direct{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.ct__direct-label{ display:block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ct__direct a{ display:inline-block; margin-top:8px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--accent); }
.ct__direct a:hover{ border-bottom:1px solid currentColor; }

/* ---------- the form ---------- */
.ct__form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:38px 40px 40px; box-shadow:0 14px 40px rgba(28,41,87,.08);
}
.ct__row{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.ct__field{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.ct__field label{ font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--ink); }
.ct__field input,
.ct__field select,
.ct__field textarea{
  width:100%; padding:13px 15px;
  font-family:var(--font-body); font-size:16px; line-height:1.5; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:10px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.ct__field textarea{ resize:vertical; min-height:140px; }
/* Native select chrome varies too much between platforms to sit beside the
   text inputs, so it draws its own chevron. */
.ct__field select{
  appearance:none; -webkit-appearance:none;
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:18px 18px;
}
/* Until a real choice is made the placeholder reads as placeholder, not value. */
.ct__field select:invalid{ color:var(--ink-soft); }
.ct__field input:hover,
.ct__field select:hover,
.ct__field textarea:hover{ border-color:#cddaf8; }
.ct__field input:focus,
.ct__field select:focus,
.ct__field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,95,227,.16);
}
/* Only after a submit attempt, so the fields are not red while still empty. */
.ct__form:invalid .ct__field input:invalid,
.ct__form:invalid .ct__field textarea:invalid{ border-color:var(--line); }
.ct__send{ width:100%; justify-content:center; margin-top:6px; }
.ct__note{ margin-top:18px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* Netlify's honeypot: a real field that a person never sees and a bot fills. */
.ct__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- thank you ---------- */
.ct--thanks{ background:var(--cream); }
.ct__thanks{ max-width:620px; margin:0 auto; text-align:center; padding:40px 0 60px; }
.ct__tick{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 30px;
  border-radius:50%; background:var(--soft-blue); color:var(--accent);
}
.ct__tick svg{ width:30px; height:30px; display:block; }
.ct__thanks h1{ font-size:calc(clamp(32px,3.6vw,46px) * var(--type-scale)); line-height:1.1; letter-spacing:-.02em; }
.ct__thanks p{ margin-top:20px; font-size:17px; line-height:1.7; color:var(--ink-soft); }
.ct__thanks-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:34px; }

@media (max-width:960px){
  .ct__grid{ grid-template-columns:1fr; gap:44px; }
  .ct__intro h1{ max-width:none; }
}
@media (max-width:560px){
  .ct__form{ padding:28px 24px 30px; }
  .ct__row{ grid-template-columns:1fr; gap:0; }
}