/* ============================================================
   QUOTE FORM — Gravity Forms reskin.
   Maps GF's raw HTML (rendered with theme="none") to the
   Parkway design from base.css. ALL values must match the
   static prototype — no improvised treatments.
   ============================================================ */

/* ---- Wrapper: GF sets style="display:none" inline for AJAX init.
   We override to display:contents (with !important) so the wrapper
   collapses entirely and its children become direct grid items of
   .quote-form__body — required for the 2-col layout below.
   "contents" is visible AND collapses for layout — perfect here. */
.quote-form--gf .gform_wrapper { display: contents !important; }
.quote-form--gf .gform_wrapper * { box-sizing: border-box; }

/* Reset GF's <fieldset> default browser border on every field type.
   Each radio / checkbox / image-choice / name field is wrapped in a
   <fieldset> by GF — without this they all render with a 1px UA border. */
.quote-form--gf fieldset.gfield,
.quote-form--gf fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.quote-form--gf legend {
	padding: 0;
	margin: 0;
}

/* ---- Reset list-y stuff GF inherits from old themes ---- */
.quote-form--gf .gform_fields,
.quote-form--gf .gfield_radio,
.quote-form--gf .gfield_checkbox {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Layout strategy: flex column on .quote-form__body. The PHP filter
   `gform_get_form_filter_1` injects a .quote-form__split wrapper around
   sections 2 and 3 with their fields, so the 2-col layout is owned by
   base.css's existing .quote-form__split / .quote-form__col rules.
   Each column flows independently — no grid row matching, no empty
   gaps between rows of different heights.
   GF intermediate wrappers collapse via display:contents so the cards
   row + split + footer all become direct flex children of __body. */
.quote-form--gf .quote-form__body {
	display: flex;
	flex-direction: column;
	gap: var(--mg-space-5); /* 20px between top-level sections */
}
.quote-form--gf .gform_wrapper,
.quote-form--gf .gform_wrapper > form,
.quote-form--gf .gform_body,
.quote-form--gf .gform_fields {
	display: contents;
}

/* Submit + disclaimer are moved INSIDE col-right by the
   gform_get_form_filter_1 PHP filter. They inherit the column's exact
   left/right edges automatically — no width/align tricks needed. */

/* Right column (Your Details) — tighter vertical rhythm than the left
   column. Compacts the overall form height without affecting the pill
   groups on the left. Targets the second .quote-form__col inside the
   split (`:last-child` since the split is col / rule / col). */
.quote-form--gf .quote-form__split > .quote-form__col:last-child {
	gap: var(--mg-space-3);
}

/* Section 1 is no longer hidden — it shows its own (1)-badge heading
   ("What type of project?") matching the top-bar step style. The
   image_choice field's duplicate legend is hidden below instead. */

/* ---- Hide GF "Visibility: Hidden" fields completely (label + container).
   Same !important reason as above — the Unique ID hidden field was leaking. */
.quote-form--gf .gfield_visibility_hidden { display: none !important; }

/* Hide a trailing empty section (e.g. the "Section Break" that GF inserts
   if the editor leaves an unused section at the very end). It has no
   fields after it; rendering its title as an orange eyebrow is noise. */
.quote-form--gf .gform_fields > .gfield--type-section:last-child,
.quote-form--gf .quote-form__col > .gfield--type-section:last-child { display: none !important; }

/* ---- Field container reset: ensure no inherited margins/padding
   from GF themes that might add to grid row-gap. */
.quote-form--gf .gfield,
.quote-form--gf .ginput_container,
.quote-form--gf .gform_footer {
	margin: 0;
	padding: 0;
}

.quote-form--gf .gfield--type-section {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Horizontal divider between consecutive mid-position sections in the
   left column (e.g. between "Land & Plans" and "Budget & Timing").
   The general-sibling combinator `~` ensures the first mid section
   never gets the line — only sections that follow another. */
.quote-form--gf .quote-form__col > .gfield--type-section.qform-section--pos-mid ~ .gfield--type-section.qform-section--pos-mid {
	border-top: 1px solid var(--mg-border-row);
	padding-top: var(--mg-space-4);
	margin-top: var(--mg-space-3);
}
/* Section headings inside the form mirror the top-bar step style:
   a circular numbered badge (default gray ring, not orange) + the
   section title text in navy. The CSS counter lives on the form
   wrapper because .gform_fields is display:contents and can't reset
   counters reliably in all browsers. */
.quote-form--gf { counter-reset: qform-section-num; }

.quote-form--gf .gsection_title {
	display: inline-flex;
	align-items: center;
	gap: var(--mg-space-2);
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-body);
	font-weight: var(--mg-weight-medium);
	letter-spacing: 0;
	text-transform: none;
	color: var(--mg-color-navy);
	line-height: 1.3;
	margin: 0 0 var(--mg-space-2);
}
.quote-form--gf .gsection_title::before {
	counter-increment: qform-section-num;
	content: counter(qform-section-num);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--mg-radius-pill);
	background-color: transparent;
	border: 1px solid rgba(163, 163, 163, 0.5);
	color: #7A7A7A;
	font-size: var(--mg-text-sm);
	font-weight: var(--mg-weight-medium);
	flex-shrink: 0;
	line-height: 1;
}

/* Hide the image_choice field's own legend ("What type of project?") —
   it duplicates section 1's title which now renders as the numbered
   eyebrow above the card row. */
.quote-form--gf .gfield--type-image_choice > .gfield_label,
.quote-form--gf .gfield--type-image_choice > legend.gfield_label {
	display: none;
}

/* Every .gfield behaves like .quote-form__group: flex column, full
   width of its parent column. Per the live Chrome edits, the gap is
   tightened to 4px (var(--mg-space-1)) — labels sit close to inputs/pills.
   width: 100% defeats GF's intrinsic fieldset sizing and any residual
   width-half/width-full classes that would otherwise hug content. */
.quote-form--gf .gfield,
.quote-form--gf fieldset.gfield {
	display: flex;
	flex-direction: column;
	gap: var(--mg-space-1);
	width: 100%;
}
/* The input containers (radio group, text input, name grid, etc.) also
   need to fill the field's full width. */
.quote-form--gf .ginput_container,
.quote-form--gf .gfield_radio,
.quote-form--gf .gfield_checkbox {
	width: 100%;
}

/* Field label / legend — matches .quote-form__label exactly.
   !important on margin defeats GF's own .gfield_label { margin-bottom: ... }
   from any residual stylesheet that slipped past our dequeue. */
.quote-form--gf .gfield_label {
	display: block;
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-md);
	font-weight: var(--mg-weight-medium);
	color: var(--mg-color-ink-name);
	margin: 0 !important;
	padding: 0;
	letter-spacing: 0;
	width: 100%;
	line-height: 1.3;
}
/* Small margin-top on the input container so the legend / field label
   has visible breathing room above the radio options or input. The
   .gfield flex gap (4px) alone isn't enough; this adds another 4px. */
.quote-form--gf .ginput_container {
	margin-top: var(--mg-space-1);
}
/* Hide the GF "(Required)" suffix visually — the static design never shows
   this, and we keep validation feedback at the field level instead. */
.quote-form--gf .gfield_required {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* ============================================================
   Radio field → pill button group
   Pill values (.pill in base.css):
   - min-height 48px, padding 8px 16px
   - background var(--mg-color-white)
   - border 1px var(--mg-border-form)
   - text var(--mg-text-md), color #656565
   Active (aria-pressed=true):
   - background var(--mg-surface-input)  (cream-input #F7F5F1)
   - border-color var(--mg-border-form-on)  (#777165)
   - color var(--mg-color-brown-strong)  (#4B2B0B)
   ============================================================ */
/* Radio / checkbox groups — fully-justified grid, rows always populated.
       2 opts → 50% / 50%
       3 opts → 33% / 33% / 33%
       4 opts → 25% × 4
       5 opts → 25% × 4 (row 1) + 100% (row 2 — "Prefer not to say")
       6 opts → 33% × 3 × 2 rows
   Default (7+) → 25% × 4, last row may be partial.
   `minmax(0, 1fr)` lets cells shrink to exact equal width; text wraps
   at word boundaries within the cell. */
/* Grid lives on `.gfield_radio` (the inner radio list that directly
   contains .gchoice items) — NOT on `.ginput_container_radio` (the
   outer wrapper). Putting it on both creates a nested grid where the
   inner radio list ends up in the first cell of the outer (25% wide). */
.quote-form--gf .gfield--type-radio .gfield_radio,
.quote-form--gf .gfield--type-checkbox .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mg-space-2);
	margin-top: var(--mg-space-1);
}
/* 2 options → 2-col (50/50) */
.quote-form--gf .gfield--type-radio .gfield_radio:has(.gchoice:nth-child(2):last-child),
.quote-form--gf .gfield--type-checkbox .gfield_checkbox:has(.gchoice:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 3 options → 3-col (33/33/33) */
.quote-form--gf .gfield--type-radio .gfield_radio:has(.gchoice:nth-child(3):last-child),
.quote-form--gf .gfield--type-checkbox .gfield_checkbox:has(.gchoice:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 5 options → 4-col with the 5th spanning the full row */
.quote-form--gf .gfield--type-radio .gfield_radio:has(.gchoice:nth-child(5):last-child) .gchoice:nth-child(5),
.quote-form--gf .gfield--type-checkbox .gfield_checkbox:has(.gchoice:nth-child(5):last-child) .gchoice:nth-child(5) {
	grid-column: 1 / -1;
}
/* 6 options → 3-col × 2 rows */
.quote-form--gf .gfield--type-radio .gfield_radio:has(.gchoice:nth-child(6):last-child),
.quote-form--gf .gfield--type-checkbox .gfield_checkbox:has(.gchoice:nth-child(6):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* .gchoice is the grid cell. Grid stretches cells to row height (default
   align-items: stretch), so if one option wraps to 2 lines its row
   becomes taller and all sibling cells stretch with it. Making .gchoice
   a flex container lets the inner <label> fill that stretched height. */
.quote-form--gf .gchoice {
	margin: 0;
	padding: 0;
	display: flex;
}

/* Visually-hide the actual input on every choice field — pseudo-pill /
   card is the label. Image choice was missing before. */
.quote-form--gf .gfield--type-radio .gfield-choice-input,
.quote-form--gf .gfield--type-checkbox .gfield-choice-input,
.quote-form--gf .gfield--type-image_choice .gfield-choice-input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* Pill labels — per live Chrome edits:
   - min-height 32px, padding 12px 8px (tall slim pills, full-bleed via grid)
   - border-radius 0 (square corners)
   - border var(--mg-border-form), Barlow 14px medium, color #656565
   IMPORTANT: scoped to type-radio / type-checkbox ONLY because GF also
   wraps image_choice in .gfield_radio. */
.quote-form--gf .gfield--type-radio .gfield_radio label,
.quote-form--gf .gfield--type-radio .gfield_radio .gform-field-label,
.quote-form--gf .gfield--type-checkbox .gfield_checkbox label,
.quote-form--gf .gfield--type-checkbox .gfield_checkbox .gform-field-label {
	flex: 1;
	width: 100%;
	min-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: var(--mg-space-3) var(--mg-space-2);
	background-color: #f6f4f0;
	border: 1px solid #ded9cd;
	border-radius: 0;
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-md);
	font-weight: var(--mg-weight-medium);
	line-height: var(--mg-leading-tight);
	color: #656565;
	text-align: center;
	font-style: normal;
	user-select: none;
	transition: background-color var(--mg-dur-base) var(--mg-ease-out),
				border-color var(--mg-dur-base) var(--mg-ease-out),
				color var(--mg-dur-base) var(--mg-ease-out);
}
/* Selected → 2px orange border + a 12%-opacity orange tint as bg
   (same treatment shared with the image-choice cards below).
   Negative margin compensates for the 1px → 2px border so the pill
   stays the same outer size and doesn't shift. */
.quote-form--gf .gfield--type-radio .gfield-choice-input:checked ~ label,
.quote-form--gf .gfield--type-radio .gchoice :checked ~ label,
.quote-form--gf .gfield--type-checkbox .gfield-choice-input:checked ~ label {
	background-color: color-mix(in srgb, var(--mg-accent-eyebrow) 12%, var(--mg-color-white));
	border: 2px solid var(--mg-accent-eyebrow);
	margin: -1px;
	color: var(--mg-color-brown-strong);
}

/* ============================================================
   Image-choice field → SERVICE CARDS (not pills).
   Maps to .service-card from base.css:
   - column layout: icon area on top, label below
   - background var(--mg-surface-card)  (cream-card)
   - border 2px solid transparent (only shows on hover/selected)
   - radius var(--mg-radius-sm)
   - icon area height clamp(64px, 7vw, 92px)

   For the icon: GF emits `.gfield-choice-image-no-image` when no image
   is uploaded. We fill those slots with hardcoded sample images via
   CSS background-image so the visual works pre-upload. When the user
   later uploads an image in the GF field settings, GF replaces the
   no-image span with an <img>, and our CSS no longer styles it — so
   the uploaded image takes over automatically.
   ============================================================ */
/* Project type cards — 4 EQUAL columns; equal widths and heights
   (grid auto-stretches items to match the tallest in the row). */
.quote-form--gf .gfield--type-image_choice .ginput_container_image_choice .gfield_radio {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mg-space-3);
}
/* Card wrapper stretches to fill grid cell height. */
.quote-form--gf .gfield--type-image_choice .gchoice {
	display: flex;
}
.quote-form--gf .gfield-image-choice-wrapper-outer {
	flex: 1;
	width: 100%;
}
.quote-form--gf .gfield--type-image_choice .gchoice { position: relative; }

.quote-form--gf .gfield-image-choice-wrapper-outer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mg-space-3);
	padding: var(--mg-space-4) var(--mg-space-4) var(--mg-space-3);
	background-color: var(--mg-surface-card);
	border: 2px solid transparent;
	border-radius: var(--mg-radius-sm);
	cursor: pointer;
	text-align: center;
	transition: border-color var(--mg-dur-base) var(--mg-ease-out),
				background-color var(--mg-dur-base) var(--mg-ease-out),
				transform var(--mg-dur-base) var(--mg-ease-out);
}
.quote-form--gf .gfield-image-choice-wrapper-outer:hover {
	border-color: var(--mg-border-form-on);
	transform: translateY(-2px);
}
/* Selected — matches .service-card[aria-pressed="true"] in base.css.
   The wrapper-outer is the PARENT of the radio input, not a sibling,
   so we need :has() to climb up the tree from :checked. */
.quote-form--gf .gfield--type-image_choice .gchoice:has(.gfield-choice-input:checked) .gfield-image-choice-wrapper-outer {
	border-color: var(--mg-accent-eyebrow);
	background-color: color-mix(in srgb, var(--mg-accent-eyebrow) 12%, var(--mg-color-white));
}
/* Keyboard focus ring on the card (input is visually hidden but receives focus). */
.quote-form--gf .gfield--type-image_choice .gchoice:has(.gfield-choice-input:focus-visible) .gfield-image-choice-wrapper-outer {
	outline: 2px solid var(--mg-color-ink-name);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--mg-accent);
}

/* Icon area — matches .service-card__icon dimensions. The !important on
   the inner <img> defeats GF's inline width/height HTML attributes that
   otherwise constrain the image to its natural size. */
.quote-form--gf .gfield--type-image_choice .gfield-choice-image-wrapper {
	width: 100%;
	height: clamp(64px, 7vw, 92px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.quote-form--gf .gfield--type-image_choice .gfield-choice-image-wrapper img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
}
/* Sample images per choice index — service-new-home, knockdown, dual-occ, reno.
   No-image fallback fills the entire icon area (matches the uploaded-img sizing).
   When the user uploads via GF, GF replaces this span with <img> and the rule
   above takes over. */
.quote-form--gf .gfield--type-image_choice .gfield-choice-image-no-image {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.quote-form--gf .gfield--type-image_choice .gfield-choice-image-no-image > span {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0); clip-path: inset(50%);
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(1) .gfield-choice-image-no-image {
	background-image: url('/wp-content/uploads/parkway-preview/images/service-new-home.png');
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(2) .gfield-choice-image-no-image {
	background-image: url('/wp-content/uploads/parkway-preview/images/service-knockdown.png');
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(3) .gfield-choice-image-no-image {
	background-image: url('/wp-content/uploads/parkway-preview/images/service-dual-occ.png');
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(4) .gfield-choice-image-no-image {
	background-image: url('/wp-content/uploads/parkway-preview/images/service-reno.png');
}

/* Label = .service-card__title styling (brown-strong, medium 16px).
   display:block so the ::after pseudo-element (description) sits on
   its own row below the title, not inline next to it. */
.quote-form--gf .gfield--type-image_choice .gchoice .gform-field-label,
.quote-form--gf .gfield--type-image_choice .gchoice label {
	display: block;
	width: 100%;
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-body);
	font-weight: var(--mg-weight-medium);
	color: var(--mg-color-brown-strong);
	line-height: var(--mg-leading-snug);
	letter-spacing: 0;
	cursor: pointer;
	text-align: center;
	font-style: normal;
}
.quote-form--gf .gfield--type-image_choice .gfield-image-choice-wrapper-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mg-space-1);
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
}
/* Make sure the label itself never picks up a UA outline or pill-style
   background from inherited rules — title + description sit directly
   on the cream-card background per the design. */
.quote-form--gf .gfield--type-image_choice .gform-field-label,
.quote-form--gf .gfield--type-image_choice .gform-field-label--type-inline {
	background: transparent;
	border: 0;
	min-height: 0;
}

/* Service-card descriptions per nth-of-type, since GF doesn't have a
   per-choice description field. When the user adds these as separate
   GF text/labels, we can remove this. */
.quote-form--gf .gfield--type-image_choice .gchoice .gform-field-label::after {
	display: block;
	margin-top: var(--mg-space-2);
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-base);
	font-weight: var(--mg-weight-regular);
	color: var(--mg-color-brown-soft);
	line-height: var(--mg-leading-snug);
	letter-spacing: 0;
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(1) .gform-field-label::after {
	content: 'On a block I own or am about to buy.';
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(2) .gform-field-label::after {
	content: 'Stay where you are. Replace house.';
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(3) .gform-field-label::after {
	content: 'Two homes (duplex / townhouse pair) on one block.';
}
.quote-form--gf .gfield--type-image_choice .gchoice:nth-of-type(4) .gform-field-label::after {
	content: 'Bathroom, kitchen or extension.';
}

/* Horizontal divider between Section 1 (project-type row) and the
   Budget & Timing / Your Details columns below — matches .quote-form__divider. */
.quote-form--gf .gfield--type-image_choice {
	padding-block-end: clamp(var(--mg-space-5), 3vw, var(--mg-space-7));
	border-block-end: 1px solid var(--mg-border-row);
	margin-block-end: 0;
}

/* ============================================================
   Text / email / tel / number / textarea inputs
   Maps to .input from base.css.
   ============================================================ */
.quote-form--gf .ginput_container_text input,
.quote-form--gf .ginput_container_email input,
.quote-form--gf .ginput_container_phone input,
.quote-form--gf .ginput_container_number input,
.quote-form--gf .ginput_container input[type="text"],
.quote-form--gf .ginput_container input[type="email"],
.quote-form--gf .ginput_container input[type="tel"],
.quote-form--gf .ginput_container input[type="number"],
.quote-form--gf .ginput_container textarea {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--mg-surface-input);
	border: 1px solid #ded9cd;
	border-radius: 0;
	height: 40px;
	padding: 0 var(--mg-space-4);
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-body);
	font-weight: var(--mg-weight-medium);
	color: var(--mg-color-ink-name);
	line-height: 1.25;
	outline: 0;
	transition: border-color var(--mg-dur-base) var(--mg-ease-out),
				box-shadow var(--mg-dur-base) var(--mg-ease-out);
}
/* Textarea: keep it compact per brief (not GF's default huge box). */
.quote-form--gf .ginput_container textarea {
	min-height: 80px;
	height: 80px;
	padding: var(--mg-space-3) var(--mg-space-4);
	line-height: 1.45;
	resize: vertical;
}
/* Focus ring — orange outline rendered OUTSIDE the input (not inset).
   Uses box-shadow (not outline) so it animates and respects border-radius. */
.quote-form--gf .ginput_container input:focus,
.quote-form--gf .ginput_container textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--mg-accent-eyebrow);
}
.quote-form--gf .ginput_container input::placeholder,
.quote-form--gf .ginput_container textarea::placeholder {
	color: var(--mg-color-brown-placeholder);
	opacity: 0.55;
	font-weight: var(--mg-weight-regular);
}

/* Half-width fields (e.g. First/Last name) when used. */
.quote-form--gf .gfield--width-half  { display: inline-block; width: calc(50% - var(--mg-space-2)); vertical-align: top; }
.quote-form--gf .gfield--width-half + .gfield--width-half { margin-inline-start: var(--mg-space-4); }

/* Hide the Name field's parent "Name" legend — the sub-labels
   ("First name" / "Last name") carry the meaning, so the parent label
   is redundant. */
.quote-form--gf .gfield--type-name > .gfield_label,
.quote-form--gf .gfield--type-name > legend.gfield_label {
	display: none;
}

/* Name field — 50/50 grid, 12px gap per live Chrome edit. */
.quote-form--gf .ginput_container_name {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--mg-space-3);
}
.quote-form--gf .ginput_container_name > span {
	display: flex;
	flex-direction: column;
	gap: var(--mg-space-3); /* 12px label↔input — matches .quote-form__group */
	min-width: 0;
}
.quote-form--gf .ginput_container_name input[type="text"] {
	width: 100%;
}
/* Sub-labels (First name / Last name) — styled as main labels (the
   parent "Name" legend is hidden in GF, so these are the visible labels). */
.quote-form--gf .gform-field-label--type-sub {
	display: block;
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-md);
	font-weight: var(--mg-weight-medium);
	color: var(--mg-color-ink-name);
	margin: 0;
	letter-spacing: 0;
}

/* Submit button is rebuilt by `gform_submit_button_1` PHP filter with
   the exact .btn .btn--primary .btn--lg .btn--block .quote-form__submit
   markup (and an inline <img> arrow). base.css owns ALL its styling.
   Negative margin-top per Chrome edit pulls the submit closer to the
   fields above (compensates for the inherent gap from the col flex). */
.quote-form--gf .gform_footer {
	padding: 0;
	margin: 0;
	margin-top: calc(-1 * var(--mg-space-2));
}

/* Disclaimer override — text-md (14px), normal line-height. Explicit
   margin-top: -8px pulls it closer to the green submit button than the
   default flex col gap would allow. */
.quote-form--gf .quote-form__disclaimer {
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-md);
	font-weight: var(--mg-weight-medium);
	color: var(--mg-color-brown-legal);
	line-height: var(--mg-leading-normal);
	margin: 0;
	margin-top: -8px;
}

/* ============================================================
   Validation & error states — subtle, small, no layout-breaking blocks.
   ============================================================ */

/* Top-of-form summary ("There was a problem with your submission") —
   inline, no boxed banner, no padding. */
.quote-form--gf .gform_validation_errors {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 var(--mg-space-3);
}
.quote-form--gf .gform_validation_errors > h2,
.quote-form--gf .gform_submission_error,
.quote-form--gf .gform_submission_error .gform-icon {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-sm);
	font-weight: var(--mg-weight-medium);
	color: #b3261e;
	line-height: 1.3;
}
/* GF often includes a leading icon span — hide it. */
.quote-form--gf .gform_submission_error .gform-icon { display: none; }
.quote-form--gf .gform_validation_errors_summary { display: none; }

/* Hide the required-asterisk indicator on labels (it adds noise). The
   error message below the field is enough. */
.quote-form--gf .gfield_required { display: none !important; }

/* Per-field validation message — tiny, sits flush under the field, no
   border or background, no big margin so it doesn't push siblings. */
.quote-form--gf .gfield_validation_message,
.quote-form--gf .gfield_description.validation_message,
.quote-form--gf .validation_message {
	display: block;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 4px 0 0;
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-xs);
	font-weight: var(--mg-weight-medium);
	line-height: 1.2;
	color: #b3261e;
}

/* Error field border tint. */
.quote-form--gf .gfield_error input,
.quote-form--gf .gfield_error textarea,
.quote-form--gf .gfield_error select {
	border-color: #b3261e !important;
}

/* Disclaimer link styling (the typography + margin-top: -8px live in the
   single .quote-form__disclaimer block earlier in this file — don't
   duplicate it here, or the duplicate wins the cascade). */
.quote-form--gf .quote-form__disclaimer a {
	color: var(--mg-color-link-quiet, var(--mg-color-brown-legal));
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ============================================================
   Post-submit confirmation — replaces the form in place after a
   successful AJAX submit. Subtle, no boxed modal, no big banner.
   ============================================================ */
.quote-form--gf .gform_confirmation_wrapper,
.quote-form--gf .gform_confirmation_message,
.quote-form--gf .gform_confirmation_message_1 {
	background: transparent;
	border: 0;
	padding: var(--mg-space-7) var(--mg-space-5);
	margin: 0;
	text-align: center;
	color: var(--mg-color-brown-strong);
	font-family: var(--mg-font-display);
	font-size: var(--mg-text-lg);
	font-weight: var(--mg-weight-medium);
	line-height: 1.4;
}

/* ============================================================
   RESPONSIVE — mobile rules.
   At <=900px the form collapses to 1 column. The .quote-form__split
   grid (1fr 1px 1fr from base.css) stacks because base.css handles
   the split's responsive collapse. Here we adjust the GF-specific
   bits: project-type cards become 2-col, then 1-col; radio pill
   groups go 2-col; Name field stays 50/50 on tablet, stacks on phone.
   ============================================================ */
@media (max-width: 900px) {
	/* Project type cards: 2x2 grid on tablet */
	.quote-form--gf .gfield--type-image_choice .ginput_container_image_choice .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Radio pill groups: 2-col on tablet (was 4-col on desktop) */
	.quote-form--gf .gfield--type-radio .ginput_container_radio,
	.quote-form--gf .gfield--type-radio .gfield_radio,
	.quote-form--gf .gfield--type-checkbox .gfield_checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Form-steps strip: base.css turns it into a 2×2 GRID at ≤900px.
	   Override back to a single-row flex — numbers only, with just the
	   active step's label visible — and centre it. */
	.quote-form--gf .form-steps {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		gap: var(--mg-space-4);
		padding: var(--mg-space-2) var(--mg-space-3);
	}
	.quote-form--gf .form-steps__item:not(.is-active) .form-steps__label {
		display: none;
	}
}

@media (max-width: 600px) {
	/* Project type cards stay 2×2 on phone — keeps the form compact. */
	.quote-form--gf .gfield--type-image_choice .ginput_container_image_choice .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Radio pill groups stay 2-col on phone (instead of stacking 1-col).
	   Specific 3-option groups stay 3-col since 3 short pills fit nicely. */
	.quote-form--gf .gfield--type-radio .ginput_container_radio,
	.quote-form--gf .gfield--type-radio .gfield_radio,
	.quote-form--gf .gfield--type-checkbox .gfield_checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.quote-form--gf .gfield--type-radio .gfield_radio:has(.gchoice:nth-child(3):last-child),
	.quote-form--gf .gfield--type-checkbox .gfield_checkbox:has(.gchoice:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Name field stacks First over Last on phone */
	.quote-form--gf .ginput_container_name {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Form-steps single-row rule lives in the ≤900px block above and
	   already covers phone widths. */

	/* Tighten section-eyebrow gap, body padding, top-of-section margins
	   so the form reads compact on phone. */
	.quote-form--gf .quote-form__body {
		gap: var(--mg-space-4);
	}
	.quote-form--gf .quote-form__split > .quote-form__col {
		gap: var(--mg-space-3);
	}
}

/* ============================================================================
   THANK-YOU CONFIRMATION (.pk-thanks)
   Rendered by gform_confirmation_1 in functions.php — GF AJAX swaps the form
   for this HTML inside the form-section's white card. Mirrors the structure
   of the Delta Gates confirmation but in Parkway's voice + brand. */
.pk-thanks {
	max-width: 720px;
	margin-inline: auto;
	padding: clamp(var(--mg-space-5), 3vw, var(--mg-space-7));
	text-align: center;
	color: var(--mg-color-brown-strong);
	background: var(--mg-color-white);   /* self-contained so it works on any surface */
	border-radius: var(--mg-radius-card, 8px);
	/* Match the form card's vertical footprint so there's no jump after submit.
	   Tuned to the form's rendered height on "Your details" (final step) —
	   tweak this value if the form grows/shrinks. Content vertically centred. */
	min-height: clamp(560px, 60vh, 720px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pk-thanks__heading {
	color: var(--mg-color-brown-gold);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.2;
	margin: 0 0 var(--mg-space-2);
}

.pk-thanks__subhead {
	color: var(--mg-color-brown-soft);
	font-size: var(--mg-text-md);
	margin: 0 0 var(--mg-space-6);
}

/* When GF replaces the form with our thank-you state, transform the form's
   existing step bar (still in the DOM above .pk-thanks) to "all complete":
   every circle becomes fully-saturated orange with a white check, and the
   labels switch to the active brown. Keeps the bar's native styling
   (border-bottom, padding, gaps) — no second bar inside the thank-you. */
.quote-form--gf:has(.pk-thanks) > .form-steps .form-steps__num {
	background-color: var(--mg-accent-eyebrow);
	border-color: var(--mg-accent-eyebrow);
	color: transparent;                     /* hide the number text */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'><path d='M3 8 l4 4 l6-8' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	opacity: 1;
}
.quote-form--gf:has(.pk-thanks) > .form-steps .form-steps__label {
	color: var(--mg-color-brown-strong);
}

/* "You told us" recap panel */
.pk-thanks__youtoldus {
	background: var(--mg-color-cream);
	padding: var(--mg-space-4) var(--mg-space-5);
	border-radius: var(--mg-radius-tab, 8px);
	margin-bottom: var(--mg-space-6);
}

.pk-thanks__youtoldus-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--mg-text-xs);
	color: var(--mg-color-brown-soft);
	margin: 0 0 4px;
	font-weight: var(--mg-weight-bold);
}

.pk-thanks__youtoldus-summary {
	font-family: var(--mg-font-display);
	font-size: clamp(15px, 1.6vw, 18px);
	color: var(--mg-color-brown-gold);
	margin: 0 0 var(--mg-space-2);
	line-height: 1.4;
}

.pk-thanks__youtoldus-ref {
	font-size: var(--mg-text-xs);
	color: var(--mg-color-brown-soft);
	margin: 0;
}
.pk-thanks__youtoldus-ref code {
	font-family: var(--mg-font-body);
	background: var(--mg-color-white);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: var(--mg-text-xs);
	color: var(--mg-color-brown-strong);
}

/* Owner quote — portrait + italic display-font quote + attribution */
.pk-thanks__quote {
	margin: 0 0 var(--mg-space-6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.pk-thanks__quote-portrait {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.pk-thanks__quote-text {
	font-family: var(--mg-font-display);
	font-style: italic;
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.45;
	color: var(--mg-color-brown-strong);
	margin: 0;
	max-width: 44ch;
}
.pk-thanks__quote-by {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--mg-text-xs);
	font-weight: var(--mg-weight-bold);
	color: var(--mg-color-brown-soft);
}

/* CTAs — primary call button + secondary text link */
.pk-thanks__ctas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mg-space-2);
}
.pk-thanks__cta-secondary {
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-sm);
	color: var(--mg-color-brown-strong);
	text-decoration: underline;
	text-underline-offset: 4px;
}