/* ============================================================
   Quote Page — NextGen Solutions Ltd
   quote.css
   ============================================================ */

/* ── 1. Variables ─────────────────────────────────────────── */
:root {
  --quote-accent:        #C8A96E;
  --quote-accent-dark:   #8B6914;
  --quote-step-inactive: #9E9689;
  --quote-step-done:     #2D7A4F;
  --font-quote:          'DM Sans', sans-serif;
}

/* ── 2. Page scaffolding ─────────────────────────────────── */

/* Hide the default page title and empty node body on this page */
.quote-page #block-nextgen-page-title,
.quote-page #block-nextgen-content {
  display: none;
}

/* Remove the container's inline padding-top so the hero sits flush */
.quote-page .page-main .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ── 3. Hero banner ──────────────────────────────────────── */
.quote-hero {
  background: var(--charcoal);
  padding: 5rem var(--section-px) 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.quote-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 120%, rgba(200, 169, 110, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.quote-hero__eyebrow {
  font-family: var(--font-quote);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quote-accent);
  margin-bottom: 1rem;
}

.quote-hero__heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.quote-hero__sub {
  font-family: var(--font-quote);
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

/* Trust signals row */
.quote-trust-signals {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.quote-trust-signal {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-quote);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.quote-trust-signal svg {
  flex-shrink: 0;
  color: var(--quote-accent);
}

/* ── 4. Two-column layout ─────────────────────────────────── */
.quote-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--section-px) 5rem;
  align-items: start;
}

/* Mobile-only pill strip — hidden on desktop */
.quote-trust-signals-mobile {
  display: none;
}

/* ── 5. Trust panel (left column) ────────────────────────── */
.quote-trust-panel {
  padding: 3rem 2.5rem 3rem 0;
  position: sticky;
  top: 88px;
}

.quote-trust-panel__heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.quote-reasons {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.quote-reasons li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-family: var(--font-quote);
  font-size: 0.9375rem;
  color: var(--charcoal);
  line-height: 1.5;
}

.quote-reasons li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1em;
  background-color: var(--quote-step-done);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E");
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}

.quote-testimonial {
  background: var(--warm-sand);
  border-left: 3px solid var(--quote-accent);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.quote-testimonial__body {
  font-family: var(--font-quote);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.6;
  margin-bottom: 0.625rem;
}

.quote-testimonial__attribution {
  font-family: var(--font-quote);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--taupe);
}

.quote-call-fallback {
  font-family: var(--font-quote);
  font-size: 0.875rem;
  color: var(--taupe);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quote-call-fallback a {
  color: var(--quote-accent-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.quote-call-fallback a:hover {
  color: var(--charcoal);
}

/* ── 6. Form column (right) ───────────────────────────────── */
.quote-form-col {
  padding: 3rem 0 3rem 3rem;
  border-left: 1px solid rgba(38, 36, 34, 0.08);
}

#block-nextgen-get-a-quote-form {
  font-family: var(--font-quote);
}

/* ── 7. Progress tracker override ────────────────────────── */
.webform-submission-get-a-quote-add-form .webform-progress {
  margin-bottom: 2.5rem;
}

.webform-submission-get-a-quote-add-form .progress-tracker {
  padding: 0;
  margin: 0;
}

/* Step circles */
.webform-submission-get-a-quote-add-form .progress-step .progress-marker {
  background-color: transparent;
  border: 2px solid var(--quote-step-inactive);
  color: var(--quote-step-inactive);
  font-family: var(--font-quote);
  font-weight: 700;
  font-size: 0.8125rem;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Active step */
.webform-submission-get-a-quote-add-form .progress-step.is-active .progress-marker {
  background-color: var(--quote-accent);
  border-color: var(--quote-accent);
  color: var(--charcoal);
}

/* Completed step */
.webform-submission-get-a-quote-add-form .progress-step.is-complete .progress-marker {
  background-color: var(--quote-step-done);
  border-color: var(--quote-step-done);
  color: #fff;
  /* Replace number with checkmark */
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,7 6,11 12,3'/%3E%3C/svg%3E");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Connector line */
.webform-submission-get-a-quote-add-form .progress-step::before {
  background-color: var(--quote-step-inactive);
  height: 2px;
  transition: background-color 0.3s ease;
}

.webform-submission-get-a-quote-add-form .progress-step.is-complete::before {
  background-color: var(--quote-step-done);
}

/* Step labels
   Inactive label uses #6B645C (5.37:1 on white) not --quote-step-inactive
   (#9E9689 = 2.93:1) which fails WCAG AA at this font size (12px). */
.webform-submission-get-a-quote-add-form .progress-title {
  font-family: var(--font-quote);
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B645C;
  margin-top: 0.5rem;
  transition: color 0.25s ease;
}

.webform-submission-get-a-quote-add-form .progress-step.is-active .progress-title {
  color: var(--charcoal);
}

.webform-submission-get-a-quote-add-form .progress-step.is-complete .progress-title {
  color: var(--quote-step-done);
}

/* ── 8. Form items and labels ─────────────────────────────── */
.webform-submission-get-a-quote-add-form .form-item {
  margin-bottom: 1.375rem;
}

.webform-submission-get-a-quote-add-form .form-item > label,
.webform-submission-get-a-quote-add-form .form-item .fieldset-legend {
  display: block;
  font-family: var(--font-quote);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
  line-height: 1.4;
}

/* Required asterisk */
.webform-submission-get-a-quote-add-form .form-required::after {
  content: ' *';
  color: #c0392b;
  font-weight: 700;
}
/* Drupal native .form-required uses a different method; keep both */
.webform-submission-get-a-quote-add-form label.js-form-required::after {
  content: ' *';
  color: #c0392b;
}

/* Description / help text */
.webform-submission-get-a-quote-add-form .form-item .description,
.webform-submission-get-a-quote-add-form .form-item__description {
  font-family: var(--font-quote);
  font-size: 0.8125rem;
  color: var(--taupe);
  margin-top: 5px;
  line-height: 1.5;
}

/* ── 9. Text, email, tel, select, textarea ────────────────── */
.webform-submission-get-a-quote-add-form input.form-text,
.webform-submission-get-a-quote-add-form input[type="email"],
.webform-submission-get-a-quote-add-form input[type="tel"],
.webform-submission-get-a-quote-add-form select.form-select,
.webform-submission-get-a-quote-add-form textarea.form-textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-quote);
  font-size: 0.9375rem;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid #D4CFC8;
  border-radius: 6px;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.webform-submission-get-a-quote-add-form input.form-text:focus,
.webform-submission-get-a-quote-add-form input[type="email"]:focus,
.webform-submission-get-a-quote-add-form input[type="tel"]:focus,
.webform-submission-get-a-quote-add-form select.form-select:focus,
.webform-submission-get-a-quote-add-form textarea.form-textarea:focus {
  outline: none;
  border-color: var(--quote-accent);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.2);
}

.webform-submission-get-a-quote-add-form input::placeholder,
.webform-submission-get-a-quote-add-form textarea::placeholder {
  color: #b0a99e;
}

/* Select arrow */
.webform-submission-get-a-quote-add-form select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

.webform-submission-get-a-quote-add-form textarea.form-textarea {
  resize: vertical;
  min-height: 110px;
}

/* ── 10. Custom checkboxes ────────────────────────────────── */
.webform-submission-get-a-quote-add-form .form-checkboxes,
.webform-submission-get-a-quote-add-form .form-radios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 4px;
}

/* Hide native inputs */
.webform-submission-get-a-quote-add-form .form-checkbox,
.webform-submission-get-a-quote-add-form .form-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* Custom checkbox label */
.webform-submission-get-a-quote-add-form .form-type-checkbox label.option,
.webform-submission-get-a-quote-add-form .form-type-radio label.option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-left: 1.875rem;
  font-family: var(--font-quote);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--charcoal);
  cursor: pointer;
  line-height: 1.5;
  user-select: none;
}

/* The box / circle */
.webform-submission-get-a-quote-add-form .form-type-checkbox label.option::before,
.webform-submission-get-a-quote-add-form .form-type-radio label.option::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid #D4CFC8;
  background: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.webform-submission-get-a-quote-add-form .form-type-checkbox label.option::before {
  border-radius: 4px;
}

.webform-submission-get-a-quote-add-form .form-type-radio label.option::before {
  border-radius: 50%;
}

/* Checked state — checkbox */
.webform-submission-get-a-quote-add-form .form-checkbox:checked + label.option::before {
  background-color: var(--quote-accent);
  border-color: var(--quote-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23262422' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5,7 6,10.5 11.5,3.5'/%3E%3C/svg%3E");
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Checked state — radio */
.webform-submission-get-a-quote-add-form .form-radio:checked + label.option::before {
  border-color: var(--quote-accent);
  background-color: #fff;
  box-shadow: inset 0 0 0 4px var(--quote-accent);
}

/* Focus ring */
.webform-submission-get-a-quote-add-form .form-checkbox:focus-visible + label.option::before,
.webform-submission-get-a-quote-add-form .form-radio:focus-visible + label.option::before {
  outline: 2px solid var(--quote-accent);
  outline-offset: 2px;
}

/* Fieldset legend for checkbox/radio groups */
.webform-submission-get-a-quote-add-form fieldset.form-item {
  border: none;
  padding: 0;
  margin: 0 0 1.375rem;
}

.webform-submission-get-a-quote-add-form fieldset .fieldset-legend {
  font-family: var(--font-quote);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 10px;
  padding: 0;
}

/* Hide the Webform help tooltip button — it clutters the fieldset legend */
.webform-submission-get-a-quote-add-form .webform-element-help {
  display: none;
}

/* ── 11. Buttons ──────────────────────────────────────────── */
.webform-submission-get-a-quote-add-form .form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Next and Submit — primary */
.webform-submission-get-a-quote-add-form .webform-button--next,
.webform-submission-get-a-quote-add-form .webform-button--submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 32px;
  font-family: var(--font-quote);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  background: var(--quote-accent);
  border: 2px solid var(--quote-accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  line-height: 1;
}

.webform-submission-get-a-quote-add-form .webform-button--next:hover,
.webform-submission-get-a-quote-add-form .webform-button--submit:hover {
  background-color: var(--quote-accent-dark);
  border-color: var(--quote-accent-dark);
  color: #fff;
}

.webform-submission-get-a-quote-add-form .webform-button--next:active,
.webform-submission-get-a-quote-add-form .webform-button--submit:active {
  transform: translateY(1px);
}

/* Submit button arrow */
.webform-submission-get-a-quote-add-form .webform-button--submit::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23262422' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='10' x2='17' y2='10'/%3E%3Cpolyline points='11 4 17 10 11 16'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: background-image 0.2s ease;
}

.webform-submission-get-a-quote-add-form .webform-button--submit:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='10' x2='17' y2='10'/%3E%3Cpolyline points='11 4 17 10 11 16'/%3E%3C/svg%3E");
}

/* Previous — ghost */
.webform-submission-get-a-quote-add-form .webform-button--previous {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  font-family: var(--font-quote);
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  background: transparent;
  border: 2px solid var(--charcoal);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  line-height: 1;
}

.webform-submission-get-a-quote-add-form .webform-button--previous:hover {
  background-color: rgba(38, 36, 34, 0.06);
}

/* Draft button — very subtle */
.webform-submission-get-a-quote-add-form .webform-button--draft {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--font-quote);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--taupe);
  background: transparent;
  border: 1px solid #D4CFC8;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin-left: auto;
  line-height: 1;
}

.webform-submission-get-a-quote-add-form .webform-button--draft:hover {
  color: var(--charcoal);
  border-color: var(--charcoal);
}

/* ── 12. Error states ─────────────────────────────────────── */
.webform-submission-get-a-quote-add-form .form-item--error input,
.webform-submission-get-a-quote-add-form .form-item--error select,
.webform-submission-get-a-quote-add-form .form-item--error textarea,
.webform-submission-get-a-quote-add-form input.error,
.webform-submission-get-a-quote-add-form select.error,
.webform-submission-get-a-quote-add-form textarea.error {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.webform-submission-get-a-quote-add-form .form-item--error-message,
.webform-submission-get-a-quote-add-form .error {
  color: #c0392b;
  font-family: var(--font-quote);
  font-size: 0.8125rem;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Drupal messages block (inline validation summary) */
.webform-submission-get-a-quote-add-form .messages--error {
  background: #fdf2f0;
  border: 1px solid #e8a09a;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-quote);
  font-size: 0.9rem;
  color: #8b2a20;
}

/* ── 13. Review step summary (computed twig output) ──────── */
.webform-submission-get-a-quote-add-form .quote-review {
  background: var(--warm-sand);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-quote);
}

.webform-submission-get-a-quote-add-form .quote-review h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #D4CFC8;
}

.webform-submission-get-a-quote-add-form .quote-review__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.webform-submission-get-a-quote-add-form .quote-review__table tr:not(:last-child) td,
.webform-submission-get-a-quote-add-form .quote-review__table tr:not(:last-child) th {
  border-bottom: 1px solid rgba(38, 36, 34, 0.07);
}

.webform-submission-get-a-quote-add-form .quote-review__table th {
  text-align: left;
  font-weight: 600;
  color: var(--taupe);
  padding: 8px 12px 8px 0;
  width: 35%;
  vertical-align: top;
  white-space: nowrap;
}

.webform-submission-get-a-quote-add-form .quote-review__table td {
  padding: 8px 0;
  color: var(--charcoal);
  vertical-align: top;
}

/* Terms checkbox on step 3 */
.webform-submission-get-a-quote-add-form .form-type-checkbox.form-item-terms {
  background: rgba(200, 169, 110, 0.08);
  border: 1px solid rgba(200, 169, 110, 0.3);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* ── 14. Thank You page ───────────────────────────────────── */
.quote-thankyou {
  text-align: center;
  padding: 6rem var(--section-px) 5rem;
  max-width: 640px;
  margin: 0 auto;
}

.quote-thankyou__icon {
  width: 80px;
  height: 80px;
  background: var(--quote-step-done);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
}

.quote-thankyou__icon svg {
  color: #fff;
}

.quote-thankyou__heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 1rem;
}

.quote-thankyou__body {
  font-family: var(--font-quote);
  font-size: 1.0625rem;
  color: var(--taupe);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.quote-thankyou__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.quote-thankyou__btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  font-family: var(--font-quote);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.quote-thankyou__btn--primary {
  color: var(--charcoal);
  background: var(--quote-accent);
  border: 2px solid var(--quote-accent);
}

.quote-thankyou__btn--primary:hover {
  background: var(--quote-accent-dark);
  border-color: var(--quote-accent-dark);
  color: #fff;
}

.quote-thankyou__btn--secondary {
  color: var(--charcoal);
  background: transparent;
  border: 2px solid var(--charcoal);
}

.quote-thankyou__btn--secondary:hover {
  background: rgba(38, 36, 34, 0.06);
}

/* ── 15. Mobile — 767px and below ────────────────────────── */
@media (max-width: 767px) {
  .quote-layout {
    display: block;
    padding: 0 1rem 3rem;
  }

  /* Trust panel becomes a horizontal pill strip above the form */
  .quote-trust-panel {
    position: static;
    padding: 1.25rem 0;
    border-left: none;
    border-bottom: 1px solid #E8E2DA;
    margin-bottom: 1.5rem;
  }

  .quote-trust-panel__heading,
  .quote-reasons,
  .quote-testimonial,
  .quote-call-fallback {
    display: none;
  }

  /* Collapsed trust panel shows only the signal pills */
  .quote-trust-panel.is-collapsed .quote-trust-signals-mobile {
    display: flex;
  }

  .quote-trust-signals-mobile {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .quote-trust-signals-mobile::-webkit-scrollbar {
    display: none;
  }

  .quote-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: rgba(200, 169, 110, 0.12);
    border: 1px solid rgba(200, 169, 110, 0.3);
    border-radius: 999px;
    font-family: var(--font-quote);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .quote-trust-pill svg {
    width: 12px;
    height: 12px;
    color: var(--quote-accent);
    flex-shrink: 0;
  }

  .quote-form-col {
    padding: 0;
    border-left: none;
  }

  /* Trust signals in hero become the pills on desktop, hidden on mobile */
  .quote-hero .quote-trust-signals {
    display: none;
  }

  /* Hero compact */
  .quote-hero {
    padding: 4rem 1.5rem 2.5rem;
  }

  /* Form full-width */
  .webform-submission-get-a-quote-add-form .form-actions {
    flex-direction: column;
  }

  .webform-submission-get-a-quote-add-form .webform-button--next,
  .webform-submission-get-a-quote-add-form .webform-button--submit,
  .webform-submission-get-a-quote-add-form .webform-button--previous {
    width: 100%;
    justify-content: center;
  }

  .webform-submission-get-a-quote-add-form .webform-button--draft {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  /* Progress bar: hide step labels on mobile, show numbers only */
  .webform-submission-get-a-quote-add-form .progress-text {
    display: none;
  }
}

/* ── 16. Progress bar animate-in on load ─────────────────── */
.webform-progress-tracker--animate .progress-marker {
  animation: quote-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes quote-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.progress-step.is-complete .progress-marker {
  animation-delay: 0.05s;
}

.progress-step.is-active .progress-marker {
  animation-delay: 0.15s;
}