/* ==========================================================================
   ENQUIRY FORM — the card that was missing from four pages
   ==========================================================================

   WHAT THIS IS NOT. It is not a new form component. Every control, label,
   focus ring, disabled state, forced-colours fallback and 16px mobile
   font-size below comes from base.css §9 (.br-field, .br-field-label,
   .br-input, .br-textarea) and the card from base.css §7 (.br-card,
   .br-card--form). This file adds FOUR things and nothing else:

     .br-enquiry__form    the 620px cap — the same measured override
                          insurance-index.css writes for .br-ix__form, and
                          for the same reason (the card holds a two-up row
                          and 464px leaves each control narrower than its
                          own placeholder)
     .br-enquiry__row     the two-up row, stacking below 480
     .br-enquiry__legend  the one line that explains the asterisk
     .br-enquiry__note    the fine print under the button

   .br-ix__form and .br-ix__form-row already say the first two on /insurance/.
   They are NOT reused here because /insurance/ renders through
   insurance-index.html, whose stylesheet is a template stylesheet — linking
   35kB of hero, featured-card and locations-strip rules onto /about/ to
   collect two grid declarations is the wrong trade. These four rules are the
   only overlap and they are eleven lines.

   WHERE IT IS USED
     /contact/  /about/  /get-started/   spliced into the prose column by
                                         scripts/build-site.mjs; the wrapper
                                         carries .br-prose__wide so the block
                                         takes the component rhythm the maps,
                                         the FAQ and the quote grid take.
     /industry/                          inside the dark Quick Check band,
                                         the same arrangement /insurance/
                                         uses. Wrapper carries
                                         .br-enquiry--band for its own top
                                         margin, since there is no prose
                                         column to inherit rhythm from.

   ⚠️ THE FORM MUST STAY OUTSIDE .br-on-dark, on /industry/ as on /insurance/.
   base.css re-points --br-bg-surface, --br-text and the control tokens inside
   that class, so a .br-card in there paints itself dark and takes every field
   with it. The band wears .br-surface-dark (a background, nothing more) and
   .br-on-dark sits on the head block only.
   ========================================================================== */

/* THE CARD.

   620px, per the note above. The box-shadow is the one addition the
   /insurance/ card does not need: there the card is white on a dark band and
   its own edge is obvious. Here it is white on a white page, where
   --br-shadow-card alone is a soft 64px bloom with no edge in it and the card
   dissolves into the paper. The hairline ring is base.css's own
   --br-ring-hairline (inset 1px, --br-border) — the same edge .br-card--
   outlined draws — stacked UNDER the bloom so the shadow still reads.

   Both shadows in one declaration because box-shadow does not cascade: naming
   only the ring here would discard .br-card--form's bloom. */
.br-enquiry__form {
  max-width: 620px;
  margin-inline: auto;
  box-shadow: var(--br-ring-hairline), var(--br-shadow-card);
}

/* On a painted band the card has its own edge again, so the ring comes off
   and the component matches /insurance/ exactly. */
.br-enquiry--band .br-enquiry__form { box-shadow: var(--br-shadow-card); }

/* The band variant's own rhythm. In the prose column .br-prose__wide already
   sets margin-block: var(--br-flow-lg) and this must not be paid twice, so
   the top margin lives on the variant rather than on the form. Mirrors
   .br-ix__form's `margin: var(--br-flow-lg) auto 0`. */
.br-enquiry--band { margin-block-start: var(--br-flow-lg); }

/* THE ASTERISK LEGEND, and why it is worded rather than symbolic.

   The asterisk in each label is aria-hidden — a screen reader gets
   "required" from the control's own required attribute and does not need to
   hear "star" six times. That leaves the mark meaningless to a sighted
   reader unless something says what it means, and a legend that reads
   "Fields marked * are required" says nothing at all once the * is hidden
   from the accessibility tree. So the sentence spells the word out and is
   readable by both. It sits ABOVE the first field because a key that appears
   after the thing it explains is not a key. */
.br-enquiry__legend {
  margin: 0 0 var(--br-space-4);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--br-text-muted);
}

/* --br-text-accent is --br-gold-ink (#8a6d00 on white), the eyebrow colour —
   an AA text colour, not the decorative gold. Red would read as an error on
   a field nobody has touched yet. */
.br-enquiry__req {
  margin-inline-start: 2px;
  color: var(--br-text-accent);
  font-weight: var(--br-weight-bold);
}

/* THE OTHER HALF OF THE CONVENTION, and no page of the site uses it today.
   It was reached only by /contact-variants/person/, which made Phone optional;
   that direction was retired on 2026-09-02 with the other four the split
   screen was chosen against. The rule stays because the convention is still
   the site's — the moment any form marks a field optional, this is what it
   should look like, and re-deriving it later from a deleted page is worse
   than carrying eight lines of CSS.

   Mark the minority. With six compulsory fields the asterisk carries the whole
   convention on its own; with five compulsory and one not, "the field with no
   star" is a difference a reader has to go hunting for. So an optional field
   says so in words. Regular weight against the label's 600 and the muted text
   colour, because it qualifies the question rather than being part of it. */
.br-enquiry__opt {
  font-weight: var(--br-weight-regular);
  color: var(--br-text-muted);
}

/* THE 16px BETWEEN FIELDS, AND WHY IT HAS TO BE RESTATED HERE.

   base.css §9 puts it on .br-field at (0,1,0). Inside a prose column
   page.css's `.br-page__prose :is(article, div, section) { margin: 0 }` is
   (0,1,1) — and every .br-field IS a div — so on /contact/, /about/ and
   /get-started/ that shorthand zeroed all six gaps and the controls stacked
   flush against each other. Measured at 390 and at 1440 before this rule:
   every gap 0, against 16 on /insurance/, whose form is not in a prose
   column. (0,2,0) wins it back without restating the value.

   IT APPLIES TO EVERY FIELD, including a row's last child, which base.css
   zeroes with .br-field:last-child. That rule is right for the last field in
   a card and wrong for the second field in a two-up row: stacked below 480 it
   left first-name/last-name touching email, and in the grid above 480 it made
   the row's own height depend on which of the two columns happened to be
   taller. Same specificity, later file, so this settles it. */
.br-enquiry .br-field { margin-bottom: var(--br-field-gap); }

/* First name + last name, and email + phone, share a row from 480px up.
   Below that they stack: two 15.5px controls side by side on a 390px screen
   give each about 160px, narrower than the email placeholder. Identical to
   .br-ix__form-row. */
.br-enquiry__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--br-space-4);
}

@media (min-width: 480px) {
  .br-enquiry__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The fine print under the button — response time and the privacy line.
   Same size and colour as .br-ix__form-note and .br-hero__form-note. */
.br-enquiry__note {
  margin: var(--br-flow-2xs) 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--br-text-muted);
}

.br-enquiry__note a { color: inherit; }