/* Survey additions on top of Webflow's site.css (Gareth's feedback, 1 Oct 2026).
   Colours come from site.css variables so the page stays on brand. */

/* Progress header at the top of the form: dots left, time estimate right. */
.survey-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--neutral-300);
}
.survey-dots {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.survey-dots li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neutral-400);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.survey-dots li.is-done { background: var(--dark-orange); }
.survey-dots li.is-current {
  background: var(--dark-orange);
  transform: scale(1.3);
  box-shadow: 0 0 0 3px rgba(232, 135, 30, 0.2);
}
.survey-time {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral-600);
  white-space: nowrap;
}

/* Steps sit closer to the progress header than Webflow's 40px gap. */
.survey-progress + .form_data_block,
.survey-progress ~ .form_data_block { margin-top: 28px; }
.form_data_block:focus { outline: none; }

/* One question per row (Seckler et al., Google, CHI 2014). */
.two_column.survey-stack { flex-direction: column; grid-row-gap: 30px; }

/* Missing-answer messages, shown next to the question. */
.survey-error {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  color: #b42318;
}
.survey-missing .text_field { border-bottom-color: #b42318; }

@media (prefers-reduced-motion: reduce) {
  .survey-dots li { transition: none; }
}

/* Markets: an unordered list of 17, so two columns (ordered scales such as
   experience and age stay in one column so their order reads clearly). */
@media (min-width: 480px) {
  #step5 .checkbox_block .w-embed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  /* Webflow's clearfix pseudo-elements would otherwise take a grid cell. */
  #step5 .checkbox_block .w-embed::before,
  #step5 .checkbox_block .w-embed::after { content: none; display: none; }
}

/* Smooth step changes: the form eases to its new height and the new step fades in. */
.survey-animating { overflow: hidden; transition: height 0.28s ease; }
.survey-fade-in { animation: survey-fade 0.22s ease both; }
@keyframes survey-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .survey-animating { transition: none; }
  .survey-fade-in { animation: none; }
}

/* Logo (Gareth's transparent SVG, 5 Oct 2026): small, top-left INSIDE the white card
   (Gareth's call), with the card close to the top of the page so the form stays high. */
.win-a-ticket-form-section { padding-top: 32px; }
.salarypage-content-right-2 { margin: 0 0 8px; }
.brand-wrapper-2 { width: auto; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.survey-logo { display: block; width: 120px; height: auto; }
@media (max-width: 479px) {
  .win-a-ticket-form-section { padding-top: 24px; }
  .survey-logo { width: 100px; }
}