/* Enquiry form styles for the homepage.

   A copy of section 22 of premium.css. The generated pages load
   premium.css and get the rules from there; the homepage loads only
   index.css, so it needs its own copy. Both files define the same
   .cform rules - change one, change the other.

   The four variables used here (--navy, --coral, --line, --body) are
   defined by index.css and by premium.css alike, so the card looks the
   same on either. */
.cform-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
@media(max-width:900px){.cform-wrap{grid-template-columns:1fr;gap:34px}}

.cform{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:30px 30px 26px;box-shadow:0 24px 54px -34px rgba(20,20,63,.3)}
.cform > div{display:flex;flex-direction:column;gap:6px}
.cform label{font-size:13.2px;font-weight:600;color:var(--navy);letter-spacing:.01em}
.cform input,.cform select,.cform textarea{
  font:inherit;font-size:15px;color:var(--navy);background:#FBFBFD;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .18s,box-shadow .18s,background .18s}
.cform textarea{resize:vertical;min-height:104px;line-height:1.55}
.cform input::placeholder,.cform textarea::placeholder{color:#9A9ABA}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:0;background:#fff;border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(255,90,110,.16)}
.cform .two-col{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:560px){.cform{padding:24px 20px 22px}.cform .two-col{grid-template-columns:1fr}}
.cform button{margin-top:4px;width:100%}
.cform button[disabled]{opacity:.65;cursor:default}
.cform-note{margin:10px 0 0;font-size:14px;line-height:1.5}

/* what the visitor gets for filling it in, beside the form rather than above it */
.cform-aside{padding-top:6px}
.cform-aside h3{font-size:19px;font-weight:700;color:var(--navy);margin:0 0 14px}
.cform-aside ol{margin:0;padding:0;counter-reset:cf}
.cform-aside li{list-style:none;counter-increment:cf;position:relative;padding:0 0 18px 42px}
.cform-aside li::before{content:counter(cf,decimal-leading-zero);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,90,110,.1);border:1px solid rgba(255,90,110,.32);
  color:var(--coral);font-size:11.5px;font-weight:700}
.cform-aside li b{display:block;font-size:15.4px;color:var(--navy);margin-bottom:3px}
.cform-aside li span{display:block;font-size:14.4px;color:var(--body);line-height:1.6}


/* ---- the homepage variant -------------------------------------------
   The closing CTA is a navy band. A white card on it reads as something
   to fill in rather than another block of text, and the pitch sits beside
   it instead of above so the form is visible without scrolling past it. */
.cta--form{text-align:left;align-items:stretch;padding:56px 44px}
.cta--form .cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.cta--form h2{max-width:none;margin:0 0 14px}
.cta--form p{max-width:46ch;margin:0}
.cta--form .row{justify-content:flex-start;margin-top:22px}
.cta--form .ph{display:block;margin-top:16px;text-align:left}
.cta--form .cform{margin:0}
.cta--form .cform label{color:var(--navy)}
@media(max-width:900px){
  .cta--form{padding:44px 24px;text-align:center}
  .cta--form .cta-grid{grid-template-columns:1fr;gap:30px}
  .cta--form p{max-width:none}
  .cta--form .row{justify-content:center}
  .cta--form .ph{text-align:center}
  .cta--form .cform{text-align:left}
}