/* ==========================================================================
   start.css — the consultation form on a page of its own.

   The landing page keeps its form; this is the same form with nothing above
   it, so a link sent straight to a prospect opens on the thing you asked them
   to do instead of on a wall of scrolling.

   Everything here is about height. Measured at 1440x900 the single-column
   version ran 364px past the fold and put the submit button 12px below it,
   which is the worst place a button can be. Most of that was the intro
   (235px) sitting above the form in the same vertical stack.

   So on a wide screen the intro moves beside the form rather than above it,
   and the whole thing centres in the viewport. On a phone it stacks and does
   scroll a little: five fields and the consent paragraph carriers require us
   to show in full will not fit a phone screen, and shrinking that paragraph
   to make them fit is not a trade worth making.
   ========================================================================== */

.startpage{
  padding-block:clamp(22px,3vw,34px) clamp(24px,3vw,36px);
}
.startpage .wrap{max-width:1020px}

/* Intro beside the form, not above it. align-items:center keeps the two
   columns optically balanced when the intro is much shorter than the form. */
.start__grid{
  display:grid;
  grid-template-columns:.82fr 1fr;
  gap:clamp(30px,4vw,54px);
  align-items:center;
}

.start__intro h1{
  font-size:clamp(25px,3.1vw,34px);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:12px 0 10px;
}
.start__intro p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--soft);
  margin:0;
  max-width:42ch;
}

/* Name and phone share a row: two short fields stacked is pure wasted height,
   and they are the two everyone fills without thinking. */
.start__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.start__row .form__field+.form__field{margin-top:0}

/* 110px is right when the form sits in a long page. Here it is the page, and
   the extra height costs more than it gives. */
.startpage .form{padding:clamp(22px,2.4vw,28px)}
.startpage .form textarea{min-height:84px}
.startpage .form .btn{margin-top:18px}

.start__alt{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
}
.start__alt a{color:var(--accent-deep);font-weight:700}

/* The footer is chrome on this page, not a destination. Its usual padding is
   90px of the height that pushed the button off screen. */
.startpage+.footer{padding-block:0}
.startpage+.footer .footer__bottom{
  margin-top:0;
  border-top:0;
  padding-block:14px 18px;
  font-size:12px;
}

/* Short laptops. A 1366x768 or 1280x720 screen clears the form and its button
   but leaves the footer hanging 120-150px below the fold, which still reads as
   "this page scrolls" even though everything you need is already visible.
   Keyed on height rather than width, because height is the actual constraint. */
@media (min-width:901px) and (max-height:830px){
  .startpage{padding-block:14px}
  .start__intro h1{font-size:clamp(22px,2.5vw,28px);margin:9px 0 8px}
  .start__intro p{font-size:13.5px}
  .startpage .form{padding:20px}
  .startpage .form textarea{min-height:72px}
  .startpage .form .btn{margin-top:15px}
  .start__alt{margin-top:11px;font-size:12px}
  .startpage+.footer .footer__bottom{padding-block:10px 12px}
}

@media (max-width:900px){
  .start__grid{grid-template-columns:1fr;gap:22px}
  .startpage .wrap{max-width:620px}
  .start__intro{text-align:center}
  .start__intro p{margin-inline:auto}
  .start__alt{text-align:center}
}

@media (max-width:540px){
  .start__row{grid-template-columns:1fr;gap:0}
  .start__row .form__field+.form__field{margin-top:16px}
}