.ll-clio-consultation {
	display: grid;
	gap: var(--space-7);
	width: 100%;
	max-width: 100%;
}

.ll-contact-columns {
	max-width: 100%;
}

@media (max-width: 47.9375em) {
	.ll-contact-columns {
		gap: var(--space-6);
	}

	.ll-clio-consultation {
		gap: var(--space-6);
	}
}

/* ============================================================================
   Clio Grow [grow-contact-form] integration (T-DESIGN-CLIO-FORM-STYLE-01)
   ----------------------------------------------------------------------------
   Applies on the home (.ll-home-lead-form), /contact/ (.ll-clio-consultation
   .ll-clio-consultation__form), and the Homestead draft (same wrapper as
   /contact/). The Clio plugin renders #lf_form_container > form with real
   <label class="description"> elements; clio-form-enhance.js copies each label
   text into the matching placeholder and marks the label .ll-clio-label-srhidden
   so the DOM/AT label is preserved.

   Goals:
     - Remove the white card so the form blends into the section band.
     - Tighten the field stack so rows visually touch (collapsed borders).
     - Token-driven placeholder gray that meets WCAG AA on both surface-0 and
       surface-1 (--color-ink-500 = #4E556A => 7.28:1 on white, 6.91:1 on
       --color-surface-1 #F8F9FB).
     - Hide the plugin's duplicate <h3>Contact Us</h3>; our <h2> heading wins.
   ============================================================================ */

/* sr-only utility for labels (applied by clio-form-enhance.js). Labels stay in
   the DOM and remain associated with their inputs via for/id; only the visual
   layer is hidden. */
.ll-clio-label-srhidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* No white box: the wrappers around the Clio embed blend into the band
   instead of floating as a card. */
.ll-home-lead-form,
.ll-clio-consultation__form {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

#lf_form_container {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	background: transparent;
}

/* Hide the Clio plugin's own duplicate heading. Our section <h2>Contact Us
   Today!</h2> remains as the heading; removing the plugin <h3> avoids the
   duplicate "Contact Us" outline. */
#lf_form_container > form > h3 {
	display: none;
}

/* Tighten the rows: zero margin on field paragraphs, then collapse the gap
   between adjacent rows by 1px so input borders visually merge into a single
   continuous stack. */
#lf_form_container form > p[id$="_block"] {
	margin: 0;
	padding: 0;
}

#lf_form_container form > p[id$="_block"] + p[id$="_block"] {
	margin-top: -1px;
}

/* Fields: squared per the design system, token-driven, full-width. */
#lf_form_container input[type="text"],
#lf_form_container input[type="email"],
#lf_form_container textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.75rem 0.875rem;
	font: 400 var(--text-md)/1.4 var(--font-sans);
	color: var(--color-ink-1000);
	background: var(--color-surface-0);
	border: 1px solid var(--color-ink-200);
	border-radius: 0;
	transition: border-color var(--motion-fast),
	            box-shadow var(--motion-fast);
}

#lf_form_container textarea {
	min-height: 7rem;
	resize: vertical;
}

/* Placeholder = injected label text. Reset Firefox's 0.54 default opacity so
   the rendered color matches the token. */
#lf_form_container input::placeholder,
#lf_form_container textarea::placeholder {
	color: var(--color-ink-500);
	opacity: 1;
}

/* Hint clears on focus so the typing area reads clean. */
#lf_form_container input:focus::placeholder,
#lf_form_container input:focus-visible::placeholder,
#lf_form_container textarea:focus::placeholder,
#lf_form_container textarea:focus-visible::placeholder {
	color: transparent;
}

/* Visible focus ring; position:relative + z-index so the focused row's
   border sits above the collapsed-border neighbors. */
#lf_form_container input[type="text"]:focus,
#lf_form_container input[type="email"]:focus,
#lf_form_container textarea:focus,
#lf_form_container input[type="text"]:focus-visible,
#lf_form_container input[type="email"]:focus-visible,
#lf_form_container textarea:focus-visible {
	outline: none;
	border-color: var(--color-brand-gold);
	box-shadow: var(--shadow-focus-gold);
	position: relative;
	z-index: 1;
}

/* Submit row breathing room above the stack; center the submit so the CTA
   sits as the visual anchor under the field stack. */
#lf_form_container p.buttons {
	margin: var(--space-4) 0 0;
	text-align: center;
}

/* End T-DESIGN-CLIO-FORM-STYLE-01 */

/* ============================================================================
   T-DESIGN-CLIO-SUBMIT-CTA-01: promote the Clio submit to a primary CTA.
   The base border/padding/typography already comes from components.css; here
   we add the gold fill + ink color so the rendered button matches
   .wp-block-button.is-style-leverlaw-primary. The existing :hover rule in
   components.css already transitions background to --color-brand-gold-strong,
   which matches the primary CTA hover state.
   ============================================================================ */
#lf_form_container input[type="submit"].button_text {
	background: var(--color-brand-gold);
	color: var(--color-ink-1000);
}
/* End T-DESIGN-CLIO-SUBMIT-CTA-01 */