/* ============================================================
   Quote Journey — multi-step "Get a Free Quote" form
   Reuses design tokens from styles.css (:root) — no new palette,
   no cards/shadows/gradients, same button/typography components.
   ============================================================ */

.quote-journey{
  position: relative;
  background: var(--white);
  padding-top: 72px;
  padding-bottom: 120px;
  /* So the header CTA's #quote-journey anchor lands the section's own
     heading below the sticky header instead of half-hidden under it. */
  scroll-margin-top: var(--header-h);
}

/* ------------------------------------------------------------
   Vertical, centred layout: intro text block on top, the big form
   centred beneath it. (Previously a two-column layout with a sticky
   form card on the right — replaced in favour of a single centred
   column, per an explicit later revision.)
   ------------------------------------------------------------ */
/* .container is left:0/right:auto site-wide — see the same fix on
   .how__inner / .testimonial__inner / .faq__inner. Without this, the
   internally-centred .qj__layout (align-items:center) is only centred
   WITHIN a container that itself sits flush against the viewport's
   left edge on screens wider than 1300px, dragging the whole intro +
   trust-grid + form composition off the page's true centre. */
.quote-journey .container{
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.qj__layout{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qj__side{
  max-width: 640px;
  margin-inline: auto;
  padding-top: 0;
  text-align: center;
}
.qj__side .hero__eyebrow{
  justify-content: center;
}

.qj__coupon{
  width: 100%;
  max-width: 1100px;
  /* quote-coupon-v2.png is trimmed to the banner plus a few px of its
     soft shadow, so these margins are the real visible gaps. */
  margin: 44px auto 0;
}
.qj__coupon img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.qj__form-wrap{
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0;
}

.qj__card{
  position: relative;
  width: 100%;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  overflow: hidden;
}
/* Thin red accent line across the top — the same signature detail
   already used elsewhere on the site (e.g. the Services mega menu). */
.qj__card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
  z-index: 1;
}

.qj__card-head{
  padding: 28px 36px 0;
}

/* .qj__card-body is now a fixed-height BOUNDING BOX only — it no longer
   scrolls itself. Each .qj__panel becomes a real 3-region flex column
   (content / footer) so the Back-Continue bar is a true opaque sibling
   in normal flow, never a sticky element floating over content that's
   still scrolling underneath it (that was the previous bug: a sticky
   footer *inside* the same box it needed to mask couldn't be trusted to
   fully cover what was scrolling behind it). Only .qj__step-body /
   .qj__contact-grid — the actual step content — scrolls now; the footer
   sits below it, outside the scroll area entirely. */
.qj__card-body{
  padding: 0;
  /* Fixed at a height that fits Step 1 in full (the tallest step:
     postcodes + move-type grid + date + two segmented groups + its own
     footer, ~900px) plus extra breathing room around the nav bar — this
     is ONE shared height for every step, so the card never changes shape
     as the user moves between steps. It's allowed to run past the
     bottom of the viewport on shorter windows (the card is sticky, not
     fixed, so the page simply scrolls a little further to reach
     Continue) rather than clipping content into an internal scrollbar —
     only genuinely short windows fall back to it. */
  height: min(990px, calc(100vh - 40px));
  overflow: hidden;
}

.qj__panel:not([hidden]){
  display: flex;
  flex-direction: column;
  height: 100%;
}

.qj__step-body,
.qj__contact-grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0 36px 28px;
  /* The taller card (.qj__card-body) means this almost never actually
     needs to scroll at normal desktop sizes any more — but keep
     overflow:auto rather than hidden/visible so a genuinely short
     window (or a step that's grown past its budget) still scrolls
     instead of clipping content. Just hide the browser's own scrollbar
     chrome so it never reads as "this is a little scrollable widget" —
     wheel/trackpad/touch scrolling keep working either way. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.qj__step-body::-webkit-scrollbar,
.qj__contact-grid::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.qj__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  /* Symmetric top/bottom padding — the button sits vertically centred
     in this bar rather than crammed against the card's bottom edge. */
  padding: 24px 36px;
  border-top: 1px solid rgba(0,0,0,.07);
  background: var(--white);
}
.qj__error--submit,
.qj__disclaimer{
  flex: 0 0 auto;
  padding: 0 36px;
}
.qj__disclaimer{ padding-bottom: 20px; }

@media (max-width: 1100px){
  .qj__coupon{ max-width: 700px; margin-top: 22px; }
  .qj__form-wrap{ max-width: 700px; margin-top: 26px; }
  .qj__card{ border-radius: 30px; }
  /* Below this breakpoint the page itself scrolls, so there's no need
     for (and no room to force) an internally-scrolling step — let
     content/footer both grow naturally in normal flow. */
  .qj__card-body{ height: auto; overflow: visible; }
  .qj__panel:not([hidden]){ height: auto; }
  .qj__step-body,
  .qj__contact-grid{ flex: none; overflow: visible; }
}

.qj__visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Progress indicator
   ------------------------------------------------------------ */
.qj__progress-wrap{
  max-width: 920px;
  margin: 0 auto 64px;
}

.qj__progress{
  display: flex;
  align-items: flex-start;
}

.qj__progress-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 92px;
}

.qj__progress-node{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--grey-soft);
  background: var(--white);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.qj__progress-num{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.85rem;
  color: #B9B9B6;
  transition: color 0.3s var(--ease);
}
.qj__progress-label{
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--text-secondary);
  text-align: center;
  transition: color 0.3s var(--ease);
}

.qj__progress-line{
  flex: 1;
  height: 1.5px;
  background: var(--grey-soft);
  margin-top: 17px;
  position: relative;
  overflow: hidden;
}
.qj__progress-line-fill{
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.qj__progress-line.is-done .qj__progress-line-fill{
  transform: scaleX(1);
}

.qj__progress-step.is-current .qj__progress-node{
  background: var(--red);
  border-color: var(--red);
}
.qj__progress-step.is-current .qj__progress-num{ color: var(--white); }
.qj__progress-step.is-current .qj__progress-label{ color: var(--red); font-weight: 700; }

.qj__progress-step.is-done .qj__progress-node{
  border-color: var(--red);
}
.qj__progress-step.is-done .qj__progress-num{ color: var(--red); }
.qj__progress-step.is-done .qj__progress-label{ color: var(--black); }

.qj__progress-compact{ display: none; }
.qj__progress-compact-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.qj__progress-compact-step{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}
.qj__progress-compact-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
}
.qj__progress-bar-track{
  height: 3px;
  border-radius: 2px;
  background: var(--grey-soft);
  overflow: hidden;
}
.qj__progress-bar-fill{
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

/* ------------------------------------------------------------
   Panels + step transition
   ------------------------------------------------------------ */
.qj__panel{
  opacity: 1;
  transform: translateX(0);
}
.qj__panel.qj__panel--enter{
  animation: qjPanelEnter 0.2s var(--ease);
}
.qj__panel.qj__panel--enter-back{
  animation: qjPanelEnterBack 0.2s var(--ease);
}
@keyframes qjPanelEnter{
  from{ opacity: 0; transform: translateX(8px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes qjPanelEnterBack{
  from{ opacity: 0; transform: translateX(-8px); }
  to{ opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .qj__panel.qj__panel--enter,
  .qj__panel.qj__panel--enter-back{
    animation: none;
  }
}

.qj__step-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  letter-spacing: -0.01em;
  color: var(--black);
}
.qj__step-text{
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Left-column intro copy (.qj__side) */
.qj__heading{
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--black);
}
.qj__intro-text{
  margin-top: 18px;
  max-width: 30rem;
  margin-inline: auto;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Trust/proof block — lives directly on the section's own white
   background (no cards/boxes/shadows), so the large quote form on
   the right stays the only "contained" element in this layout.
   ------------------------------------------------------------ */
.qj__trust{
  margin-top: 40px;
  max-width: 980px;
  margin-inline: auto;
}
.qj__trust-eyebrow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.qj__trust-eyebrow-line{
  width: 16px;
  height: 1.5px;
  background: var(--red);
  flex-shrink: 0;
}

.qj__trust-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 30px;
  margin-top: 22px;
}

@media (max-width: 700px){
  .qj__trust-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.qj__trust-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.qj__trust-item.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.qj__trust-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.qj__trust-item.is-visible .qj__trust-icon{
  opacity: 1;
  transform: scale(1);
}

.qj__trust-value{
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 1.8vw, 1.9rem);
  line-height: 1;
  color: var(--black);
}
.qj__trust-title{
  display: block;
  margin-top: 6px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--black);
}
.qj__trust-desc{
  margin-top: 5px;
  max-width: 22ch;
  font-family: var(--font-text);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.qj__trust-underline{
  display: block;
  margin-top: 12px;
  width: 0;
  height: 1.5px;
  background: var(--red);
  transition: width 0.5s var(--ease) 0.1s;
}
.qj__trust-item.is-visible .qj__trust-underline{
  width: 26px;
}

@media (prefers-reduced-motion: reduce){
  .qj__trust-item,
  .qj__trust-icon,
  .qj__trust-underline{
    transition: none;
  }
}
.qj__step-body--wide{
  max-width: 1000px;
  margin: 0 auto;
}

/* ------------------------------------------------------------
   Fields
   ------------------------------------------------------------ */
.qj__field{
  margin-top: 30px;
}
.qj__step-body > .qj__field:first-of-type,
.qj__step-body--wide > .qj__field:first-of-type{
  margin-top: 32px;
}

.qj__field > label,
.qj__field > legend{
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--black);
}
.qj__field > legend{ padding: 0; }
.qj__req{ color: var(--red); }

.qj__field input[type="text"],
.qj__field input[type="email"],
.qj__field input[type="tel"],
.qj__field input[type="date"],
.qj__field select,
.qj__field textarea{
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--grey-soft);
  border-radius: 9999px;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--black);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.qj__field textarea{
  min-height: 96px;
  padding: 14px 16px;
  border-radius: 24px;
  resize: vertical;
}
.qj__field select{
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656565' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.qj__field select:has(option[value=""]:checked){
  color: #A9A9A6;
}
.qj__field input::placeholder,
.qj__field textarea::placeholder{
  color: #A9A9A6;
}
.qj__field input:focus,
.qj__field select:focus,
.qj__field textarea:focus{
  outline: none;
  border-color: var(--red);
  box-shadow: inset 0 0 0 1.5px var(--red);
}
.qj__field input.qj__field-invalid,
.qj__field textarea.qj__field-invalid{
  border-color: var(--red);
}

.qj__field-hint{
  margin: -4px 0 12px;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

.qj__error{
  display: none;
  margin-top: 8px;
  font-family: var(--font-text);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--red);
}
.qj__error.is-visible{ display: block; }

.qj__field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.qj__field-row .qj__field{ margin-top: 0; }

/* Native fieldset/legend reset */
fieldset.qj__field{
  border: none;
  padding: 0;
  margin: 30px 0 0;
  min-width: 0;
}

/* ------------------------------------------------------------
   Tiles (move type / property type)
   ------------------------------------------------------------ */
.qj__tiles{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.qj__tile-input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.qj__tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px 10px;
  border: 1px solid var(--grey-soft);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--black);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.qj__tile-icon{
  width: 26px;
  height: 26px;
  color: var(--black);
  transition: color 0.2s var(--ease);
}
.qj__tile:hover{ border-color: var(--grey-border); }
.qj__tile-input:checked + .qj__tile{
  border-color: var(--red);
  background: var(--red-tint);
}
.qj__tile-input:checked + .qj__tile .qj__tile-icon{ color: var(--red); }
.qj__tile-input:focus-visible + .qj__tile{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Move-type tiles (8 options, Step 1) run slightly more compact than the
   base size — this is the single tallest block in the step, and Step 1
   is already the tallest panel in the wizard. */
#qjMoveTypeGroup .qj__tile{
  gap: 6px;
  padding: 14px 10px;
}
#qjMoveTypeGroup .qj__tile-icon{
  width: 22px;
  height: 22px;
}

/* Step 1 is the tallest panel (postcodes + move-type grid + date + two
   segmented groups) — a touch tighter than the 30px default elsewhere,
   still within the 24-32px range, to reduce how much of it needs to
   scroll on a normal desktop window. */
#qjPanel1 .qj__field{ margin-top: 26px; }
#qjPanel1 .qj__step-body > .qj__field:first-of-type{ margin-top: 28px; }

/* Property-type tiles (6 options) use a slightly wider grid */
#qjCollPropertyTypeGroup .qj__tiles,
#qjDelivPropertyTypeGroup .qj__tiles{
  grid-template-columns: repeat(3, 1fr);
}

/* ------------------------------------------------------------
   Segmented controls (Yes/No, ranges, etc.)
   ------------------------------------------------------------ */
.qj__segmented{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.qj__seg-input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.qj__seg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid var(--grey-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--black);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.qj__seg:hover{ border-color: var(--grey-border); }
.qj__seg-input:checked + .qj__seg{
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red);
}
.qj__seg-input:focus-visible + .qj__seg{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.qj__segmented--compact .qj__seg{ padding: 9px 16px; font-size: 0.82rem; }

/* ------------------------------------------------------------
   Checkboxes (multi-select)
   ------------------------------------------------------------ */
.qj__checks{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.qj__check-input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.qj__check{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--grey-soft);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--black);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.qj__check::before{
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid var(--grey-soft);
  border-radius: 4px;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.qj__check:hover{ border-color: var(--grey-border); }
.qj__check-input:checked + .qj__check{
  border-color: var(--red);
  background: var(--red-tint);
  color: var(--red);
}
.qj__check-input:checked + .qj__check::before{
  border-color: var(--red);
  background: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l3 3 6-6.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.qj__check-input:focus-visible + .qj__check{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Conditional reveal
   ------------------------------------------------------------ */
.qj__conditional{
  animation: qjConditionalIn 0.3s var(--ease);
}
@keyframes qjConditionalIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .qj__conditional{ animation: none; }
}

/* ------------------------------------------------------------
   Nav buttons
   ------------------------------------------------------------ */
.qj__nav--end{
  justify-content: flex-end;
}
.qj__nav--submit{
  justify-content: flex-end;
}
.qj__nav .qj__next,
.qj__nav .qj__submit{
  margin-left: auto;
}
.qj__submit[disabled]{
  opacity: 0.6;
  cursor: not-allowed;
}
.qj__disclaimer{
  margin-top: 16px;
  text-align: right;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.qj__error--submit{
  display: none;
  margin-top: 12px;
  text-align: right;
}
.qj__error--submit.is-visible{ display: block; }

/* ------------------------------------------------------------
   Inventory (Step 4)
   ------------------------------------------------------------ */
.qj__inventory-group{
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--grey-soft);
}
.qj__step-body--wide > .qj__inventory-group:first-of-type{
  border-top: none;
  padding-top: 0;
}
.qj__inventory-heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--black);
}

.qj__stepper-list{ margin-top: 18px; }
.qj__stepper-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--grey-light);
}
.qj__stepper-row:last-child{ border-bottom: none; }
.qj__stepper-label{
  font-family: var(--font-text);
  font-size: 0.94rem;
  color: var(--black);
}
.qj__stepper{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.qj__stepper-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--grey-soft);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--black);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.qj__stepper-btn:hover{ border-color: var(--red); color: var(--red); }
.qj__stepper-value{
  width: 28px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
  -moz-appearance: textfield;
}
.qj__stepper-value::-webkit-outer-spin-button,
.qj__stepper-value::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.qj__add-other{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.qj__add-other-input{
  flex: 1;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--grey-soft);
  border-radius: 9999px;
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: var(--black);
}
.qj__add-other-input:focus{
  outline: none;
  border-color: var(--red);
}
.qj__add-other-btn{
  padding: 0 18px;
  border: 1px solid var(--grey-soft);
  border-radius: 9999px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--black);
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.qj__add-other-btn:hover{ border-color: var(--red); color: var(--red); }

.qj__inventory-details{
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--grey-soft);
}
.qj__inventory-details summary{
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--black);
  list-style: none;
}
.qj__inventory-details summary::-webkit-details-marker{ display: none; }
.qj__inventory-details summary::after{
  content: "+";
  float: right;
  color: var(--red);
  font-weight: 400;
}
.qj__inventory-details[open] summary::after{ content: "\2212"; }
.qj__inventory-details .qj__stepper-list{ margin-top: 20px; }

/* Photo upload */
.qj__photo-btn{ margin-top: 4px; }
.qj__photo-btn--small{ padding: 11px 20px; margin-top: 12px; }
.qj__photo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.qj__photo-thumb{
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--grey-soft);
}
.qj__photo-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qj__photo-remove{
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(17,17,17,0.72);
  color: var(--white);
  font-size: 0.8rem;
  line-height: 1;
}
.qj__photo-remove:hover{ background: var(--red); }
.qj__photo-count{
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Services (Step 5)
   ------------------------------------------------------------ */
.qj__services-grid{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
}
.qj__service-row{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--grey-soft);
  border-radius: 14px;
}
.qj__service-copy h3,
.qj__service-copy h4{
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
}
.qj__service-copy p{
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--black);
}
.qj__service-control{
  border: none;
  padding: 0;
  margin: 0;
}
.qj__service-control .qj__conditional{
  margin-top: 14px;
}

/* ------------------------------------------------------------
   Contact + Summary (Step 6)
   ------------------------------------------------------------ */
.qj__contact-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.qj__contact-fields{ min-width: 0; }

.qj__summary{
  grid-row: 1 / 3;
  grid-column: 2;
  padding: 28px;
  border: 1px solid var(--grey-soft);
  border-radius: 14px;
}
.qj__summary-heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--black);
}
.qj__summary-group{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-soft);
}
.qj__summary-heading + .qj__summary-group{
  border-top: none;
  padding-top: 18px;
  margin-top: 6px;
}
.qj__summary-group-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.qj__summary-edit{
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qj__summary-text{
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--black);
}

.qj__consent{
  grid-column: 1;
  margin-top: 36px;
}
.qj__field--checkbox{
  margin-top: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.qj__field--checkbox input[type="checkbox"]{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--red);
}
.qj__field--checkbox label{
  margin: 0;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--black);
}
.qj__consent-note{
  display: block;
  width: fit-content;
  margin: 8px 0 0 28px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.qj__consent-note:hover{ color: var(--red); }

.qj__nav--submit{
  grid-column: 1;
  margin-top: 28px;
}
.qj__nav--submit .qj__submit{ min-width: 260px; justify-content: center; }
.qj__contact-grid > .qj__disclaimer{
  grid-column: 1;
  text-align: left;
  margin-top: 14px;
}

/* ------------------------------------------------------------
   Success state
   ------------------------------------------------------------ */
.qj__success{
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 0;
  text-align: center;
}
.qj__success-icon{
  color: var(--red);
  margin-bottom: 8px;
}
.qj__success h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--black);
}
.qj__success p{
  margin-top: 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.qj__success-actions{
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px){
  .qj__step-body--wide{ max-width: 100%; }
  .qj__tiles{ grid-template-columns: repeat(3, 1fr); }
  .qj__contact-grid{ grid-template-columns: 1fr; max-width: 700px; }
  .qj__summary{ grid-row: auto; grid-column: 1; margin-top: 40px; }
  .qj__consent{ grid-column: 1; }
  .qj__nav--submit{ grid-column: 1; }
}

@media (max-width: 900px){
  .quote-journey{ padding-top: 44px; padding-bottom: 80px; }

  .qj__card-head{ padding: 22px 20px 0; }
  .qj__card-body{ padding: 0 20px 22px; }

  .qj__progress{ display: none; }
  .qj__progress-compact{ display: block; }
  .qj__progress-wrap{ margin-bottom: 40px; }

  .qj__tiles{ grid-template-columns: repeat(2, 1fr); }
  #qjCollPropertyTypeGroup .qj__tiles,
  #qjDelivPropertyTypeGroup .qj__tiles{ grid-template-columns: repeat(2, 1fr); }

  .qj__field-row{ grid-template-columns: 1fr; gap: 0; }
  .qj__field-row .qj__field{ margin-top: 30px; }
  .qj__field-row .qj__field:first-child{ margin-top: 0; }

  .qj__services-grid{ grid-template-columns: 1fr; gap: 14px; }

  .qj__nav{ flex-wrap: wrap; }
  .qj__nav--submit .qj__submit{ width: 100%; }
  .qj__disclaimer,
  .qj__contact-grid > .qj__disclaimer,
  .qj__error--submit{ text-align: center; }
}

@media (max-width: 560px){
  .qj__tiles{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qj__tile{ padding: 14px 8px; font-size: 0.78rem; }
  .qj__tile-icon{ width: 20px; height: 20px; }
  .qj__seg{ padding: 10px 14px; font-size: 0.82rem; }
  .qj__nav{ flex-direction: column-reverse; align-items: stretch; }
  .qj__nav .qj__back,
  .qj__nav .qj__next,
  .qj__nav .qj__submit{ width: 100%; justify-content: center; margin-left: 0; }
}

/* The quote page's heading is its H1. As an H2 it picked up the
   site-wide `main h2` tracking; keep exactly that look now it's an H1. */
h1.qj__heading{ letter-spacing: -0.02em; }

/* Step titles are H2s under the page H1 (room and service labels inside
   them are H3s). Keep their own tracking over the site-wide `main h2`. */
main h2.qj__step-title{ letter-spacing: -0.01em !important; }
/* These were H4s and relied on the browser's default H4 spacing (1.33em);
   as H3s (which the global reset zeroes) they keep that exact spacing. */
h3.qj__inventory-heading,
.qj__service-copy h3{ margin-block: 1.33em; }