/* Gravity Forms styled with tokens. GF theme CSS is disabled in inc/gravity-forms.php. */
/* GF's own theme CSS normally hides the honeypot field; since that CSS is disabled, replicate it here. */
.gform_validation_container { display: none !important; }
/* Same story for the hidden fields (Page URL, Location Slug, the three UTMs): GF renders each one as a
full `.gfield` row that happens to contain an ``, so in this grid they were five
zero-height rows — 80px of dead space above the submit button. Their inputs stay in the DOM, which
is all assets/js/forms.js needs to populate them. */
.gform_wrapper .gfield.gform_hidden, .gform_wrapper .gfield--type-hidden { display: none; }
.gform_wrapper { font-family: var(--hbd-font-body); }
.gform_wrapper .gform_fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.gform_wrapper .gfield { grid-column: span 2; } .gform_wrapper .gfield.gf-half { grid-column: span 1; }
@media (max-width: 640px) { .gform_wrapper .gfield.gf-half { grid-column: span 2; } }
.gform_wrapper .gfield_label { display: block; font-family: var(--hbd-font-mono); font-size: var(--hbd-fs-mono); letter-spacing: var(--hbd-tracking-mono); text-transform: uppercase; margin-bottom: .5rem; }
.gform_wrapper .gfield_required { color: var(--hbd-orange); margin-left: .25rem; }
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper select, .gform_wrapper textarea { width: 100%; font: inherit; padding: .9rem 1rem; border: 1px solid var(--hbd-grey-200); border-radius: var(--hbd-radius-s); background: var(--hbd-white); color: var(--hbd-ink); }
/* The field box. forms.css had no height of its own, so Astra's site-wide `height: 40px` on form
controls was the one in force — the right number, as it happens (the Figma comp draws 40px too), but
it clipped the .9rem of vertical padding the rule above asks for and cut the selects' value in half.
Height and vertical padding are stated together now; the horizontal padding is unchanged.
Global: this is every Gravity form on the site. The footer newsletter's email input was already
rendering at 40px, so only the clipping changes there. */
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper select { height: var(--hbd-field-h); padding-block: 0; }
/* Gravity Forms sizes a textarea with a `rows` attribute (10 by default, ~279px); the comp draws 142. */
.gform_wrapper textarea { height: var(--hbd-field-textarea-h); }
.gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus { outline: 2px solid var(--hbd-blue); outline-offset: 0; border-color: var(--hbd-blue); }
/* `margin: 0` is the point of this line as much as the flex is: these are `
`s, and the 48px list
indent they inherit set every choice row 48px right of the fields above it, which production does not
do (client QC, 2026-09-21). */
.gform_wrapper .gfield_radio, .gform_wrapper .gfield_checkbox { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0; }
.gform_wrapper .gchoice { display: flex; align-items: center; gap: .5rem; }
.gform_wrapper .gform_footer { margin-top: 1.25rem; }
.gform_wrapper .validation_message, .gform_wrapper .gform_validation_errors { color: var(--hbd-danger); font-size: .875rem; }
.gform_wrapper .gform_validation_errors { border: 1px solid var(--hbd-danger-bg); border-radius: var(--hbd-radius-s); padding: .75rem 1rem; margin-bottom: 1rem; }
.gform_confirmation_message { font-family: var(--hbd-font-display); font-size: 1.5rem; }
/* Newsletter inline variant */
.hbd-newsletter .gform_wrapper form { display: flex; gap: .5rem; align-items: stretch; }
.hbd-newsletter .gform_wrapper .gform_fields { display: block; flex: 1; }
.hbd-newsletter .gform_wrapper input[type=email] { border-radius: var(--hbd-radius-pill); padding-left: 1.25rem; }
.hbd-newsletter .gform_wrapper .gform_footer { margin: 0; }
.hbd-newsletter .gform_wrapper .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ------------------------------------------------------- the Yes/No toggle
One question on the contact form is a segmented control on production rather than a pair of radios:
the label keeps the left of its row and a 40px capsule sits at the right end of it, the chosen
segment reversed out in white (client QC, 2026-09-21; the capsule's ground was sampled off
production's own screenshot). The markup is Gravity Forms' ordinary radio field — `hbd-field-toggle`
is the class `bin/setup-forms.php` puts on it — so the input stays a real radio and only its label is
drawn, which keeps the keyboard and the accessible name intact. */
.gform_wrapper .hbd-field-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--hbd-space-4, 16px); }
.gform_wrapper .hbd-field-toggle > .gfield_label { margin: 0; }
.gform_wrapper .hbd-field-toggle .ginput_container { flex: 0 0 auto; margin: 0; }
.gform_wrapper .hbd-field-toggle .gfield_radio { gap: 0; padding: 0; border-radius: var(--hbd-radius-pill); background: var(--hbd-contact-toggle-bg); }
.gform_wrapper .hbd-field-toggle .gchoice { margin: 0; }
/* The radio is still there and still focusable — it is only invisible, so the label is what paints. */
.gform_wrapper .hbd-field-toggle .gchoice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gform_wrapper .hbd-field-toggle .gchoice label {
display: inline-flex; align-items: center; justify-content: center;
min-width: var(--hbd-contact-toggle-seg); height: var(--hbd-contact-toggle-h);
margin: 0; padding-inline: var(--hbd-space-5, 20px);
border-radius: var(--hbd-radius-pill); cursor: pointer; color: var(--hbd-text);
}
.gform_wrapper .hbd-field-toggle .gchoice input:checked + label { background: var(--hbd-navy); color: var(--hbd-white); }
.gform_wrapper .hbd-field-toggle .gchoice input:focus-visible + label { outline: 2px solid var(--hbd-navy); outline-offset: 2px; }
/* ------------------------------------------------------ the SMS consents
The two consent checkboxes are paragraphs, not labels, so the box aligns to the first line rather
than to the middle of a five-line block, and the copy drops to the small size. They are conditional
on the Yes/No question above (Gravity Forms shows them only when it is Yes) and their wording is the
client's verbatim TCPA text — see bin/setup-forms.php. */
.gform_wrapper .hbd-field-consent .gchoice { align-items: flex-start; }
.gform_wrapper .hbd-field-consent .gchoice input { margin-top: .2em; flex: 0 0 auto; }
.gform_wrapper .hbd-field-consent .gchoice label { font-size: var(--hbd-fs-small, .875rem); line-height: 1.5; text-transform: none; }