/* ═══════════════════════════════════════════════════════════
   FORM PAGES (teardown request, discovery call) + THANK YOU

   .form-page is the two-column shell both request pages share:
   what you get on the left, the form card on the right. It was
   .audit-page when the teardown was the only one of these.
   The page every CTA on the site points at, so it has to feel
   like the end of that sentence rather than a form on a page.

   Two columns: what you get on the left, the form on the right.
   The form is the brightest object on screen. It used to earn that
   with a yolk fill; it now earns it by being literally white on the
   cream page. Same hierarchy, quieter. White on Northcoast is only
   1.17:1, so the card carries no readable edge of its own and is
   lifted with the shadow the navpanel already uses rather than a
   hairline, which measures 1.33:1 and would not be seen.

   Everything inside was tuned against yolk and has been re-measured
   against white. The numbers are on each rule.
   ═══════════════════════════════════════════════════════════ */
.form-page{
  background:var(--northcoast);color:var(--elgouna);
  /* One more step down the same hue and saturation as --deveney-ink,
     which is itself Deveney taken deep enough to clear cream. That
     token measures 4.47:1 on white and misses AA by 0.03. This is
     5.00:1 on white and 4.28:1 on cream. Scoped to this page: it is
     an error colour for a white card, not a new brand value. */
  --form-err:#D3216B;
}

.form-page .audit{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,64px);align-items:start;
  max-width:var(--frame);margin:0 auto;
  padding:calc(var(--nav-clear) + var(--hero-gap)) var(--pad-x) clamp(60px,8vw,110px);
}
.form-page .audit-intro .tag{margin-bottom:16px}
.form-page h1{max-width:14ch}
.form-page .lead-p{max-width:44ch}

/* ── the form ─────────────────────────────────────────────── */
.form-card{
  background:#fff;
  border-radius:var(--r);padding:clamp(26px,3vw,40px);
  color:var(--elgouna);
  box-shadow:0 24px 60px -24px rgba(var(--elgouna-rgb),.45);
}
.field{display:block;margin-bottom:clamp(14px,1.6vw,20px)}
.field-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:7px;
}
/* Field and card are both white, so the border is the only boundary
   there is. That is deliberate: the alternative, a cream fill with no
   stroke, measures 1.17:1 against the card and is not an edge at all.
   .52 composites to #8F959F, 3.01:1 on white, the floor for a control
   edge. Focus takes the same border to full strength rather than
   changing the fill, since there is no longer a fill to change. */
.field input,
.field textarea{
  width:100%;font:inherit;font-size:16px;   /* 16px or iOS zooms the page on focus */
  padding:13px 16px;border-radius:12px;
  border:1.5px solid rgba(var(--elgouna-rgb),.52);
  background:#fff;color:var(--elgouna);
  transition:border-color .2s,background .2s;
}
/* .42 composited to 2.34:1 on the old ground. .60 is 3.73:1: clearly
   legible, and deliberately still short of the 4.53:1 that body text
   needs, because a placeholder as dark as a real value reads as a
   filled field. Every field has a visible label above it, so these
   are examples rather than instructions. */
.field input::placeholder,
.field textarea::placeholder{color:rgba(var(--elgouna-rgb),.60)}
/* Resize vertically only. A horizontal drag would push the textarea
   out past the card it sits in. */
.field textarea{resize:vertical;min-height:120px;line-height:1.5;display:block}
.field input:focus,
.field textarea:focus{
  outline:none;border-color:var(--elgouna);
  box-shadow:0 0 0 3px rgba(var(--elgouna-rgb),.12);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--form-err)}
.field-error{
  display:none;font-size:12.5px;font-weight:600;
  color:var(--form-err);margin-top:6px;
}
.field-error.on{display:block}

/* Off-canvas rather than display:none. A hidden input is not submitted by
   some browsers, and the whole point is that a bot fills it and we see it. */
.hp{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* The submit button was .btn-light with three overrides that rebuilt
   .btn's resting state and then gave it a hover of its own, darkening
   to #1C2533 instead of trading fill and label the way every other
   filled button does. It is now plain .btn, so it looks and behaves
   like the primary button on the homepage. */
.form-card .btn{margin-top:clamp(8px,1vw,14px)}
.form-card .btn[disabled]{opacity:.55;pointer-events:none}

/* .7 opacity composites to 4.94:1 on white, so this one carried over
   from the yolk unchanged. */
.form-note{
  font-size:12.5px;line-height:1.5;margin-top:16px;opacity:.7;max-width:34ch;
}
.form-status{
  font-size:13.5px;font-weight:600;margin-top:12px;min-height:1.2em;
}
.form-status.err{color:var(--form-err)}

/* ── book a call: a shorter card ──────────────────────────────
   Three fields against a two line lead, so the card ran 583px next to
   a 309px column and the imbalance was the first thing you saw. The
   teardown page does not have this problem: its headline is three
   lines and its lead is longer, so its card sits close to level. That
   is why this is scoped here rather than tightened in the shared
   rules, which both pages use.

   The textarea keeps three visible lines at 16px/1.5 plus its own
   padding, which is what "a sentence or two" actually needs. */
.book-page .form-card{padding:clamp(22px,2.4vw,30px)}
.book-page .field{margin-bottom:clamp(12px,1.3vw,15px)}
.book-page .field textarea{min-height:101px}

/* ── thank you ────────────────────────────────────────────── */
.thanks-page .thanks{
  max-width:var(--frame);margin:0 auto;
  padding:calc(var(--nav-clear) + var(--hero-gap)) var(--pad-x) clamp(70px,9vw,130px);
}
.thanks-page .thanks .tag{margin-bottom:16px}
.thanks-page h1{max-width:16ch}
.thanks-page .lead-p{max-width:52ch}
.thanks-page .thanks-next{
  margin-top:clamp(34px,4vw,56px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--rule);max-width:52ch;
}
.thanks-page .thanks-label{
  font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--medford);margin-bottom:10px;
}
.thanks-page .thanks-next p{color:var(--ink-2);margin-bottom:20px}
.thanks-page .thanks-back{
  margin-top:clamp(30px,3.4vw,44px);font-size:14px;color:var(--ink-2);
}
.thanks-page .thanks-back a{text-decoration:underline;text-decoration-color:var(--deveney-ink);text-underline-offset:3px}
.thanks-page .thanks-back a:hover{color:var(--deveney-ink)}

@media (max-width:900px){
  .form-page .audit{grid-template-columns:1fr;gap:34px}
  .form-page h1{max-width:none}
}