/**
 * Sequoia GF-3 multi-step intake — page-surface styling.
 *
 * Restyles the native 4-step Gravity Forms form 3 on the dedicated
 * /get-a-free-estimate/ page and on paid /lp/* inline embeds. All rules are
 * scoped to #gform_wrapper_3 so nothing leaks to other forms or the (dead)
 * modal surface. The historical tile grid lived at
 * `.form-modal form.free-estimate-form .gfield_checkbox` (style.css) and was
 * inert on the page — these rules replace it un-scoped from the modal.
 *
 * Brand tokens come from the theme's generated :root vars (sequoia_colors),
 * with literal fallbacks so the form still reads on-brand if a page renders
 * before the inline color block (e.g. a bare LP).
 */

#gform_wrapper_3 {
  --seq-gf3-green-dark: #132f35;
  --seq-gf3-green: #245f58;
  --seq-gf3-green-accent: var(--global--color-secondary, #a8c269);
  --seq-gf3-cream: var(--global--color-primary-3, #f6f5f1);
  --seq-gf3-teal-gray: #6a8886;
  --seq-gf3-border: #cdd7d7;
  --seq-gf3-border-soft: #e6ebea;
  --seq-gf3-ink: var(--global--color-primary-alt, #053936);
  --seq-gf3-font-head: var(--global--font-primary, "Montserrat", sans-serif);
  --seq-gf3-font-body: var(--global--font-secondary, "Nunito Sans", sans-serif);
  --seq-gf3-radius: 2px;
  --seq-gf3-tap: 44px;
  --seq-gf3-card-max: 43rem;

  font-family: var(--seq-gf3-font-body);
  color: var(--seq-gf3-ink);
  /* Full-bleed surround band. The theme content area is an un-constrained
     full-width column with no max-width (02 §7), so the form provides its own
     containment: a soft cream band frames a centered white card and the form
     never sprawls edge-to-edge on any page. */
  background: linear-gradient(180deg, var(--seq-gf3-cream) 0%, #eaefec 100%);
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  /* The theme constrains .gform_wrapper to a narrow, left-aligned column; take
     over full width so the surround band is a clean full-bleed section and the
     card centers on the page (not hugging the left edge). */
  width: 100%;
  max-width: none;
  margin: 0;
}

/* box-sizing everywhere; overflow guard limited to media so it can NEVER
   clobber the card's own max-width. A previous blanket `max-width:100%` on the
   wrapper itself (equal specificity, later in source) defeated the 46rem
   containment — that was the root cause of the edge-to-edge sprawl. */
#gform_wrapper_3,
#gform_wrapper_3 * {
  box-sizing: border-box;
}

#gform_wrapper_3 img,
#gform_wrapper_3 svg,
#gform_wrapper_3 video {
  max-width: 100%;
  height: auto;
}

/* The centered card = the <form> itself (progress bar, all pages, footers, and
   the AJAX confirmation all render inside it). */
#gform_wrapper_3 form,
#gform_3 {
  max-width: var(--seq-gf3-card-max);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--seq-gf3-border-soft);
  border-radius: 6px;
  box-shadow: 0 24px 60px -30px rgba(5, 57, 54, 0.4),
    0 4px 14px -8px rgba(5, 57, 54, 0.16);
  padding: clamp(1.35rem, 4.5vw, 2.75rem);
}

/* ---------------------------------------------------------------------------
 * Step / progress indicator (GF "steps" pagination)
 * GF renders either .gf_progressbar (percentage) or .gf_page_steps > .gf_step
 * (steps style). Style both so we degrade if the wrong style is configured.
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .gf_progressbar_wrapper {
  margin-bottom: var(--global--spacing-md, 32px);
}

#gform_wrapper_3 .gf_progressbar_title {
  font-family: var(--seq-gf3-font-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--seq-gf3-teal-gray);
  margin-bottom: 0.5rem;
}

#gform_wrapper_3 .gf_progressbar {
  background: var(--seq-gf3-border-soft);
  border-radius: 100px;
  overflow: hidden;
  height: 0.5rem;
  padding: 0;
}

#gform_wrapper_3 .gf_progressbar_percentage {
  background: var(--seq-gf3-green);
  height: 100%;
  border-radius: 100px;
  transition: width 0.3s ease-out;
}

#gform_wrapper_3 .gf_progressbar_percentage span {
  display: none;
}

/* Steps-style indicator. */
#gform_wrapper_3 .gf_page_steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
  position: relative;
  border: 0;
  margin-bottom: var(--global--spacing-md, 32px);
  padding: 0;
}

#gform_wrapper_3 .gf_page_steps::before {
  position: absolute;
  z-index: 0;
  top: 0.875rem;
  right: 16.666%;
  left: 16.666%;
  height: 2px;
  background: var(--seq-gf3-border);
  content: "";
}

#gform_wrapper_3 .gf_step {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
	gap: 0.4rem;
  font-family: var(--seq-gf3-font-head);
  font-size: 0.85rem;
  font-weight: 600;
	color: #526f6d;
	opacity: 1;
	min-width: 0;
  margin: 0;
  padding: 0;
}

#gform_wrapper_3 .gf_step_number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--seq-gf3-border-soft);
  color: var(--seq-gf3-teal-gray);
  font-size: 0.85rem;
  line-height: 1;
}

/* Gravity Forms' legacy theme draws a second 40px status disk with ::before.
   It sits behind our fixed 28px marker and makes completed steps look enlarged
   and off-center after every AJAX page replacement. */
#gform_wrapper_3 .gf_step_number::before {
  display: none !important;
  content: none !important;
}

#gform_wrapper_3 .gf_step_label {
	white-space: nowrap;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
}

#gform_wrapper_3 .gf_step_active {
  opacity: 1;
  color: var(--seq-gf3-green-dark);
}

#gform_wrapper_3 .gf_step_active .gf_step_number {
  background: var(--seq-gf3-green);
  color: #fff;
}

#gform_wrapper_3 .gf_step_completed {
  opacity: 1;
  color: var(--seq-gf3-green);
}

#gform_wrapper_3 .gf_step_completed .gf_step_number {
  position: relative;   /* anchor the checkmark so it centers regardless of the hidden number node */
  background: var(--seq-gf3-green-accent);
  color: var(--seq-gf3-green-dark);
	font-size: 0;
}

/* Checkmark absolutely centered in the disk. As a flex item it drifted to a
   corner once the number was hidden (font-size:0); anchoring it removes the drift. */
#gform_wrapper_3 .gf_step_completed .gf_step_number::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.28rem;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	content: "";
	transform: translate(-50%, -70%) rotate(-45deg);
}

#gform_wrapper_3 .seq-gf3-service-toggle {
	min-height: var(--seq-gf3-tap);
	margin-top: 0.85rem;
	padding: 0.65rem 1rem;
	font: 700 0.95rem/1.3 var(--seq-gf3-font-body);
	color: var(--seq-gf3-green);
	background: #fff;
	border: 2px solid var(--seq-gf3-border);
	border-radius: 999px;
	cursor: pointer;
}

#gform_wrapper_3 .seq-gf3-secondary-choice {
	display: none;
}

#gform_wrapper_3 .seq-gf3-services-expanded .seq-gf3-secondary-choice {
	display: block;
}

#gform_wrapper_3.seq-gf3-budget-disqualified #gform_page_3_2 .gform_next_button {
	display: none;
}

#gform_wrapper_3 .seq-gf3-band-under-25k .seq-gf3-band-msg {
	border-left: 4px solid var(--seq-gf3-green);
	background: var(--seq-gf3-cream);
	color: var(--seq-gf3-green-dark);
}

/* ---------------------------------------------------------------------------
 * Step headings (HTML fields with .seq-gf3-step-heading)
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .seq-gf3-step-heading {
  margin-bottom: var(--global--spacing-s, 10px);
}

#gform_wrapper_3 .seq-gf3-step-heading h2,
#gform_wrapper_3 .seq-gf3-step-heading .seq-gf3-heading {
  font-family: var(--seq-gf3-font-head);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--seq-gf3-green-dark);
  margin: 0 0 0.35rem;
	scroll-margin-top: 1.5rem;
}

#gform_wrapper_3 .seq-gf3-step-heading p,
#gform_wrapper_3 .seq-gf3-step-heading .seq-gf3-helper {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--seq-gf3-teal-gray);
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Generic field / label / input styling
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .gform_fields {
  gap: var(--global--spacing-md, 32px) 1.5rem;
}

#gform_wrapper_3 .gfield_label {
  font-family: var(--seq-gf3-font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--seq-gf3-green-dark);
  margin-bottom: 0.4rem;
}

#gform_wrapper_3 .gfield_required {
  color: var(--seq-gf3-teal-gray);
}

#gform_wrapper_3 input[type="text"],
#gform_wrapper_3 input[type="email"],
#gform_wrapper_3 input[type="tel"],
#gform_wrapper_3 input[type="number"],
#gform_wrapper_3 textarea {
  width: 100%;
  min-height: var(--seq-gf3-tap);
  padding: 0.7rem 0.9rem;
  font-family: var(--seq-gf3-font-body);
  font-size: 1rem;
  color: var(--seq-gf3-ink);
  background: #fff;
  border: 2px solid var(--seq-gf3-border);
  border-radius: var(--seq-gf3-radius);
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

#gform_wrapper_3 input[type="text"]:focus,
#gform_wrapper_3 input[type="email"]:focus,
#gform_wrapper_3 input[type="tel"]:focus,
#gform_wrapper_3 input[type="number"]:focus,
#gform_wrapper_3 textarea:focus {
  outline: none;
  border-color: var(--seq-gf3-green);
  box-shadow: 0 0 0 3px rgba(36, 95, 88, 0.15);
}

#gform_wrapper_3 .ginput_container_name {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#gform_wrapper_3 .ginput_container_name > span {
  flex: 1 1 12rem;
}

/* ZIP field: full-width so it sits in the same rhythm as the other contact
   fields. A narrow (12rem) box left it stranded on its own wide row — most
   obvious on mobile, where it read as an orphaned field below Phone. */
#gform_wrapper_3 .seq-gf3-zip .ginput_container {
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * Step 2 — service tiles (field 10, .seq-gf3-tiles)
 * Un-scoped from the modal. Supports BOTH GF image-choice markup and plain
 * checkbox-card markup, so it looks intentional with or without a photo.
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .seq-gf3-tiles .gfield_checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  /* Override the theme's column-count fallback. */
  -moz-column-count: initial;
  column-count: initial;
}

#gform_wrapper_3 .seq-gf3-tiles .gchoice {
  position: relative;
  margin: 0;
}

/* The clickable card is the label; the native checkbox is visually hidden but
   still focusable for keyboard/AT. */
#gform_wrapper_3 .seq-gf3-tiles .gchoice input[type="checkbox"] {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  z-index: 2;
  accent-color: var(--seq-gf3-green);
}

#gform_wrapper_3 .seq-gf3-tiles .gchoice label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.6rem;
  height: 100%;
  padding: 0.85rem 1rem;
  padding-left: 2.75rem;
  font-family: var(--seq-gf3-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--seq-gf3-green-dark);
  background: var(--seq-gf3-cream);
  border: 2px solid var(--seq-gf3-border-soft);
  border-radius: var(--seq-gf3-radius);
  cursor: pointer;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out,
    background 0.15s ease-out;
}

/* GF image-choice markup: an <img> / background sits above the label text. */
#gform_wrapper_3 .seq-gf3-tiles .gchoice .gfield_choice_image,
#gform_wrapper_3 .seq-gf3-tiles .gchoice img {
  display: block;
  width: 100%;
  height: 6.5rem;
  object-fit: cover;
  border-radius: calc(var(--seq-gf3-radius) - 3px);
  margin-bottom: 0.5rem;
}

#gform_wrapper_3 .seq-gf3-tiles .gchoice label:hover {
  border-color: var(--seq-gf3-green-accent);
  box-shadow: 0 4px 14px -8px rgba(5, 57, 54, 0.5);
}

#gform_wrapper_3 .seq-gf3-tiles .gchoice input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--seq-gf3-green);
  outline-offset: 2px;
}

#gform_wrapper_3 .seq-gf3-tiles .gchoice input[type="checkbox"]:checked + label {
  border-color: var(--seq-gf3-green);
  background: #fff;
  box-shadow: 0 0 0 2px var(--seq-gf3-green) inset;
}

/* ---------------------------------------------------------------------------
 * Step 3 — investment bands (field 14, .seq-gf3-band) as full-width rows
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .seq-gf3-band .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#gform_wrapper_3 .seq-gf3-band-feedback {
	overflow-anchor: none;
}

#gform_wrapper_3 .seq-gf3-band .gchoice {
	position: relative;
  margin: 0;
}

#gform_wrapper_3 .seq-gf3-band .gchoice input[type="radio"] {
  position: absolute;
	inset: 0;
  opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}

#gform_wrapper_3 .seq-gf3-band .gchoice label {
  display: flex;
  align-items: center;
  min-height: var(--seq-gf3-tap);
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.9rem;
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  color: var(--seq-gf3-green-dark);
  background: var(--seq-gf3-cream);
  border: 2px solid var(--seq-gf3-border-soft);
  border-radius: var(--seq-gf3-radius);
  cursor: pointer;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

/* Custom radio dot. */
#gform_wrapper_3 .seq-gf3-band .gchoice label::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid var(--seq-gf3-border);
  background: #fff;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

#gform_wrapper_3 .seq-gf3-band .gchoice label:hover {
  border-color: var(--seq-gf3-green-accent);
}

#gform_wrapper_3 .seq-gf3-band .gchoice input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--seq-gf3-green);
  outline-offset: 2px;
}

#gform_wrapper_3 .seq-gf3-band .gchoice input[type="radio"]:checked + label {
  border-color: var(--seq-gf3-green);
  background: #fff;
}

#gform_wrapper_3 .seq-gf3-band .gchoice input[type="radio"]:checked + label::before {
  border-color: var(--seq-gf3-green);
  box-shadow: inset 0 0 0 4px var(--seq-gf3-green);
}

/* Per-band feedback (HTML fields, .seq-gf3-band-feedback). Native GF
   conditional logic shows exactly one; style it calm and reassuring — NOT an
   alert. It reads as helpful context, never a rejection. */
#gform_wrapper_3 .seq-gf3-band-feedback {
  margin-top: calc(-1 * var(--global--spacing-s, 10px));
}

#gform_wrapper_3 .seq-gf3-band-feedback > * {
  margin: 0;
}

#gform_wrapper_3 .seq-gf3-band-feedback p,
#gform_wrapper_3 .seq-gf3-band-feedback .seq-gf3-feedback-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--seq-gf3-green-dark);
  background: var(--seq-gf3-cream);
  border-left: 4px solid var(--seq-gf3-green-accent);
  border-radius: 0 var(--seq-gf3-radius) var(--seq-gf3-radius) 0;
  padding: 0.85rem 1rem;
  /* Reserve ~2 lines so the box height is stable between the default prompt and
     each band message — kills the Next-button jump on first selection. */
  box-sizing: border-box;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
}

/* Default (no-selection) helper occupies the feedback slot; hide it once a band
   is chosen (JS adds .seq-gf3-band-chosen to the wrapper) so GF's per-band
   message takes the same slot with no shift. */
#gform_wrapper_3.seq-gf3-band-chosen .seq-gf3-band-default {
  display: none;
}
#gform_wrapper_3 .seq-gf3-band-default .seq-gf3-band-msg {
  color: var(--seq-gf3-teal-gray);
}

/* Disabled Next (steps 1 & 2 require a selection) + its helper line. */
#gform_wrapper_3 .gform_next_button.seq-gf3-next-disabled,
#gform_wrapper_3 .gform_next_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Let the footer wrap so the helper drops onto its own line BELOW the buttons
   (GF's default footer is flex/nowrap, which squeezed it beside them). Back +
   Continue still share line 1; the helper takes line 2. */
#gform_wrapper_3 .gform_page_footer,
#gform_wrapper_3 .gform_footer {
  flex-wrap: wrap;
}
#gform_wrapper_3 .seq-gf3-next-help {
  flex-basis: 100%;
  width: 100%;
  order: 99;
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--seq-gf3-teal-gray);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Step 1 — in-area / out-of-area blocks (HTML fields)
 * Hidden by default; gf3-multistep.js toggles visibility from the client-side
 * ZIP check. The out-of-area block is an honest, warm end-state — never styled
 * as an error.
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .gfield.seq-gf3-inarea,
#gform_wrapper_3 .gfield.seq-gf3-ooa {
  display: none;
}

#gform_wrapper_3 .gfield.seq-gf3-inarea.seq-gf3-show,
#gform_wrapper_3 .gfield.seq-gf3-ooa.seq-gf3-show {
  display: block;
}

#gform_wrapper_3 .seq-gf3-inarea .gfield_html_formatted,
#gform_wrapper_3 .seq-gf3-inarea > * {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--seq-gf3-green-dark);
  background: rgba(168, 194, 105, 0.18);
  border-radius: var(--seq-gf3-radius);
  padding: 0.75rem 1rem;
  margin: 0;
}

#gform_wrapper_3 .seq-gf3-ooa > * {
  margin: 0;
}

#gform_wrapper_3 .seq-gf3-ooa p,
#gform_wrapper_3 .seq-gf3-ooa .seq-gf3-ooa-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--seq-gf3-green-dark);
  background: var(--seq-gf3-cream);
  border: 2px solid var(--seq-gf3-border-soft);
  border-radius: var(--seq-gf3-radius);
  padding: 1.1rem 1.25rem;
  margin: 0;
}

#gform_wrapper_3 .seq-gf3-ooa strong,
#gform_wrapper_3 .seq-gf3-ooa b {
  display: block;
  font-family: var(--seq-gf3-font-head);
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
  color: var(--seq-gf3-green-dark);
}

/* Inline ZIP feedback — injected by gf3-multistep.js directly BELOW the ZIP
 * input. Unlike the warm out-of-area block (which sits above the input), this
 * note is co-located with the field the visitor is typing in, so a disabled
 * submit reads as an intentional service-area gate rather than a broken form.
 * Hidden until the ZIP is conclusive (5 digits + out-of-area). */
#gform_wrapper_3 .seq-gf3-zip-note,
#gform_wrapper_3 .seq-gf3-phone-note {
  display: none;
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
  color: #9a3412;
  background: #fff4ed;
  border: 1px solid #f0c3a4;
  border-left: 4px solid #d97706;
  border-radius: var(--seq-gf3-radius);
}
#gform_wrapper_3 .seq-gf3-zip-note.seq-gf3-show,
#gform_wrapper_3 .seq-gf3-phone-note.seq-gf3-show {
  display: block;
}
/* Flag the input itself so the invalid state is unmistakable at a glance. */
#gform_wrapper_3 .seq-gf3-zip.seq-gf3-zip-oos input[type="text"],
#gform_wrapper_3 .seq-gf3-zip.seq-gf3-zip-oos input,
#gform_wrapper_3 .gfield.seq-gf3-phone-invalid input {
  border-color: #d97706;
  box-shadow: 0 0 0 1px #d97706;
}

/* ---------------------------------------------------------------------------
 * Step 4 — trust line + consent line
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .seq-gf3-trust,
#gform_wrapper_3 .seq-gf3-trust > * {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--seq-gf3-green);
  margin: 0 0 0.25rem;
}

/* The trust line is the heading's caption — pull it up out of the 32px grid gap
   so it sits snug under the "Last step" intro instead of floating in dead space. */
#gform_wrapper_3 .seq-gf3-trust-field {
  margin-top: calc(-1 * var(--global--spacing-md, 32px) + 0.5rem);
}

#gform_wrapper_3 .seq-gf3-consent,
#gform_wrapper_3 .seq-gf3-consent p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--seq-gf3-teal-gray);
  margin: 0;
}

#gform_wrapper_3 .seq-gf3-consent a {
  color: var(--seq-gf3-green);
  text-decoration: underline;
}

#gform_wrapper_3 .seq-gf3-confirmation {
  max-width: var(--seq-gf3-card-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--seq-gf3-border-soft);
  border-left: 4px solid var(--seq-gf3-green);
  border-radius: 2px;
  background: #fff;
}

#gform_wrapper_3 .seq-gf3-confirmation h2 {
  margin-top: 0;
  color: var(--seq-gf3-green-dark);
}

#gform_wrapper_3 .seq-gf3-confirmation a {
  color: var(--seq-gf3-green);
  font-weight: 700;
}

/* Phone / field microcopy (GF description). */
#gform_wrapper_3 .gfield_description {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--seq-gf3-teal-gray);
  padding-top: 0.35rem;
}

/* ---------------------------------------------------------------------------
 * Navigation — Previous / Next / Submit buttons + "Submitting…" state
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .gform_page_footer,
#gform_wrapper_3 .gform_footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--global--spacing-md, 32px);
  border-top: 0;
  padding-top: 0;
}

#gform_wrapper_3 .gform_next_button,
#gform_wrapper_3 .gform_button,
#gform_wrapper_3 .gform_footer input[type="submit"],
#gform_wrapper_3 .gform_page_footer input[type="submit"] {
  flex: 1 1 auto;
  min-height: var(--seq-gf3-tap);
  order: 2;
  padding: 0.85rem 1.5rem;
  font-family: var(--seq-gf3-font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--seq-gf3-green);
  border: 0;
  border: 2px solid var(--seq-gf3-green);
  border-radius: 0; /* fully-square buttons (owner directive 2026-07-17) */
  cursor: pointer;
  transition: background 0.2s ease-out, opacity 0.2s ease-out;
}

#gform_wrapper_3 .gform_next_button:hover,
#gform_wrapper_3 .gform_button:hover,
#gform_wrapper_3 .gform_footer input[type="submit"]:hover,
#gform_wrapper_3 .gform_page_footer input[type="submit"]:hover {
  background: var(--seq-gf3-green-dark);
}

#gform_wrapper_3 .gform_previous_button {
  order: 1;
  flex: 0 0 auto;
  min-height: var(--seq-gf3-tap);
  padding: 0.85rem 1.25rem;
  font-family: var(--seq-gf3-font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--seq-gf3-green);
  background: transparent;
  border: 2px solid var(--seq-gf3-border);
  border-radius: 0; /* fully-square buttons (owner directive 2026-07-17) */
  cursor: pointer;
}

#gform_wrapper_3 .gform_previous_button:hover {
  border-color: var(--seq-gf3-green);
}

/* Submitting state, set by JS on final submit (avoids GF's 0×0 spinner). */
#gform_wrapper_3 .seq-gf3-submitting {
  opacity: 0.7;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Contact reveal (v2 reorder) — the final step gates the contact block + submit
 * behind an in-area ZIP. Progressive enhancement: the gate applies ONLY when
 * gf3-multistep.js marks the wrapper `.seq-gf3-js` (which it does only when a
 * ZIP allowlist is configured to gate with). Without JS — or without config —
 * everything is visible and submittable. `.seq-gf3-contact-ok` is added by the
 * client ZIP check when an in-area ZIP is confirmed, and removed when the ZIP is
 * out-of-area / incomplete.
 * ------------------------------------------------------------------------- */
/* v6 (2026-07-17, owner): the submit button stays VISIBLE at all times — hiding it
   read as "there is no button." Until an in-area ZIP confirms eligibility it renders
   DISABLED (dimmed, non-interactive); JS also sets the real `disabled` attribute, and
   the server gate in seq-gf-zip-gate.php still hard-blocks any out-of-area POST. */
#gform_wrapper_3.seq-gf3-js:not(.seq-gf3-contact-ok) #gform_submit_button_3,
#gform_wrapper_3.seq-gf3-js:not(.seq-gf3-contact-ok) .gform_footer input[type="submit"],
#gform_wrapper_3.seq-gf3-js:not(.seq-gf3-contact-ok) .gform_footer button[type="submit"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Contact details remain visible from the moment the final step opens. ZIP is
   still the hard gate for submit, but the step no longer looks broken or
   incomplete while the visitor is deciding what information is required. */
#gform_wrapper_3.seq-gf3-js:not(.seq-gf3-contact-ok) .seq-gf3-contact-gated {
  opacity: 1;
}

/* Page-3 composition: the in-area confirmation reads as the divider between the
   ZIP ask and the revealed contact block, so give the contact group a little
   breathing room above its first field via the standard field gap (already set
   on .gform_fields). Ensure a focus-scroll to a revealed field isn't hidden
   under the sticky header. */
#gform_wrapper_3 .seq-gf3-contact-gated {
  scroll-margin-top: 5rem;
}

/* GF's default AJAX spinner tends to render 0×0 under the theme. */
#gform_wrapper_3 .gform_ajax_spinner {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * Validation states
 * ------------------------------------------------------------------------- */
#gform_wrapper_3 .gfield_error input[type="text"],
#gform_wrapper_3 .gfield_error input[type="email"],
#gform_wrapper_3 .gfield_error input[type="tel"],
#gform_wrapper_3 .gfield_error textarea {
  border-color: #c0392b;
}

#gform_wrapper_3 .gfield_validation_message,
#gform_wrapper_3 .validation_message {
  font-size: 0.85rem;
  color: #c0392b;
  margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
  /* Slightly tighter card gutter + section rhythm on phones. */
  #gform_wrapper_3 {
    padding: 1.5rem 0.85rem;
  }

	#gform_wrapper_3 .gform_fields {
    gap: var(--global--spacing-s, 18px) 1rem;
	}

	#gform_wrapper_3 .gf_step {
		justify-content: center;
	}

	#gform_wrapper_3 .gf_step_label {
		font-size: 0.68rem;
	}

  /* Nav stays in normal flow at the end of each step. A sticky bottom bar
     overlapped tile/field content inside the padded card (the card is taller
     than the viewport), so flow placement is the robust, clean choice. */
  #gform_wrapper_3 .gform_page_footer,
  #gform_wrapper_3 .gform_footer {
    flex-wrap: wrap;
    margin-top: var(--global--spacing-md, 28px);
  }

  #gform_wrapper_3 .ginput_container_name {
    flex-direction: column;
  }

  /* Reset the row-layout flex-basis: with flex-direction:column the 12rem basis
     becomes each sub-field's HEIGHT, ballooning First/Last name to ~192px tall. */
  #gform_wrapper_3 .ginput_container_name > span {
    flex: 0 0 auto;
  }
}

/* Single-column tiles on phones — full-width cards read cleaner than a cramped
   2-col grid where long tile labels wrap to 3-4 uneven lines (design brief §3). */
@media only screen and (max-width: 480px) {
  #gform_wrapper_3 .seq-gf3-tiles .gfield_checkbox {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gform_wrapper_3 * {
    transition: none !important;
    animation: none !important;
  }
}