*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--ff-font-body); background: var(--ff-surface-3); color: var(--ff-ink-deep); }

    .hero { background: #ffffff; color: var(--ff-ink); border-bottom: 1px solid #ececec; text-align: center; padding: 60px 20px 50px; }
    .hero h1 { font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls); text-transform: uppercase; font-size: 2.4rem; color: var(--ff-brand-deep); margin-bottom: 12px; }
    .hero p { font-size: 1rem; color: var(--ff-muted-2); max-width: 520px; margin: 0 auto; }

    .form-wrapper { max-width: 780px; margin: 50px auto; padding: 0 24px 60px; }

    .form-section { background: #fff; border-radius: 16px; padding: 28px 32px; margin-bottom: 24px; box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
    .form-section h2 { font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls); font-size: 1rem; color: var(--ff-brand); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ff-line-faint); }

    .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .form-group:last-child { margin-bottom: 0; }
    .form-group label { font-size: 0.8rem; font-weight: 700; color: var(--ff-muted); }
    .form-group input, .form-group textarea, .form-group select {
      padding: 11px 14px; border: 2px solid var(--ff-line-strong); border-radius: 10px;
      font-size: 0.9rem; font-family: var(--ff-font-body);
      outline: none; transition: border-color 0.2s; background: #fff;
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--ff-brand); }
    .form-group textarea { resize: vertical; min-height: 110px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .hint { font-size: 0.75rem; color: var(--ff-muted-4); margin-top: 3px; }

    /* -- SERVICE INPUT + TAGS -- */
    .service-input-wrap { position: relative; }
    .service-input-wrap input { width: 100%; padding-right: 40px; }
    .service-suggestions {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: #fff; border: 2px solid var(--ff-line-strong); border-radius: 10px;
      z-index: 100; max-height: 220px; overflow-y: auto;
      box-shadow: 0 8px 24px rgba(0,0,0,0.1); display: none;
    }
    .service-suggestion {
      padding: 10px 14px; cursor: pointer; font-size: 0.88rem; color: #333;
      display: flex; align-items: center; gap: 10px; transition: background 0.12s;
    }
    .service-suggestion:hover { background: var(--ff-brand-tint-2); color: var(--ff-brand); }
    .service-suggestion i { color: var(--ff-brand); width: 16px; text-align: center; }

    .selected-services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .service-tag {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--ff-brand-tint); border: 1.5px solid var(--ff-brand);
      color: var(--ff-brand-hover); border-radius: 50px;
      padding: 5px 12px 5px 14px; font-size: 0.82rem; font-weight: 700;
    }
    .service-tag button {
      background: none; border: none; color: var(--ff-brand-hover); cursor: pointer;
      font-size: 0.9rem; padding: 0; line-height: 1; transition: color 0.2s;
    }
    .service-tag button:hover { color: var(--ff-danger); }

    /* -- DOCUMENT REQUIREMENTS -- */
    .doc-requirements { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
    .doc-service-block {
      border: 1.5px solid #ebebeb; border-radius: 14px; overflow: hidden;
    }
    .doc-service-header {
      background: var(--ff-surface-2); padding: 14px 18px;
      display: flex; align-items: center; gap: 10px;
      border-bottom: 1.5px solid #ebebeb;
    }
    .doc-service-header i { color: var(--ff-brand); }
    .doc-service-header strong { font-size: 0.92rem; color: var(--ff-ink); }
    .doc-service-header span { font-size: 0.75rem; color: var(--ff-muted-4); margin-left: auto; }
    .doc-fields { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }

    .doc-field { display: flex; flex-direction: column; gap: 5px; }
    .doc-field-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .doc-field label { font-size: 0.8rem; font-weight: 700; color: #444; display: flex; align-items: center; gap: 6px; }
    .doc-field label i { color: var(--ff-brand); font-size: 0.75rem; }
    .doc-required-badge {
      font-size: 0.65rem; font-weight: 700; background: #fff0f0;
      color: var(--ff-danger); padding: 2px 7px; border-radius: 50px; white-space: nowrap;
    }
    .doc-optional-badge {
      font-size: 0.65rem; font-weight: 700; background: var(--ff-line-faint);
      color: #999; padding: 2px 7px; border-radius: 50px; white-space: nowrap;
    }
    .doc-hint { font-size: 0.73rem; color: var(--ff-muted-4); }

    .file-upload-btn {
      display: flex; align-items: center; gap: 10px;
      border: 2px dashed var(--ff-line-strong); border-radius: 10px; padding: 11px 16px;
      cursor: pointer; transition: border-color 0.2s, background 0.2s;
      position: relative; overflow: hidden;
    }
    .file-upload-btn:hover { border-color: var(--ff-brand); background: #f8feff; }
    .file-upload-btn input[type="file"] {
      position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
    }
    .file-upload-btn i { color: var(--ff-brand); font-size: 1rem; flex-shrink: 0; }
    .file-upload-btn span { font-size: 0.85rem; color: #777; }
    .file-upload-btn .file-name { font-size: 0.82rem; color: var(--ff-brand-hover); font-weight: 600; }
    .file-upload-btn.has-file { border-color: var(--ff-brand); background: var(--ff-brand-tint); }
    .file-upload-btn.has-file span { color: var(--ff-brand-hover); }

    /* -- DYNAMIC LIST (prices) -- */
    .dynamic-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
    .dynamic-item { display: flex; align-items: center; gap: 10px; background: var(--ff-surface-3); border-radius: 10px; padding: 10px 14px; }
    .dynamic-item input { border: 2px solid var(--ff-line-strong); border-radius: 8px; padding: 8px 12px; font-size: 0.88rem; font-family: var(--ff-font-body); outline: none; flex: 1; transition: border-color 0.2s; }
    .dynamic-item input:focus { border-color: var(--ff-brand); }
    .dynamic-item .price-input { width: 90px; flex: none; }
    .remove-btn { background: none; border: none; color: #ccc; font-size: 1.1rem; cursor: pointer; padding: 4px; transition: color 0.2s; flex-shrink: 0; }
    .remove-btn:hover { color: #ff4444; }
    .add-btn { background: none; border: 2px dashed var(--ff-brand); color: var(--ff-brand); border-radius: 10px; padding: 9px 18px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.2s; font-family: var(--ff-font-body); }
    .add-btn:hover { background: #e8fbff; }

    /* -- SCHEDULE -- */
    .schedule-grid { display: flex; flex-direction: column; gap: 12px; }
    .schedule-day { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; background: var(--ff-surface-3); border-radius: 10px; }
    .day-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
    .day-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ff-brand); cursor: pointer; }
    .day-toggle span { font-weight: 600; font-size: 0.88rem; }
    .slots-input { border: 2px solid var(--ff-line-strong); border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; font-family: var(--ff-font-body); outline: none; width: 100%; transition: border-color 0.2s; color: var(--ff-muted); }
    .slots-input:focus { border-color: var(--ff-brand); }
    .slots-input:disabled { background: #eee; color: var(--ff-muted-4); cursor: not-allowed; }
    .slots-hint { font-size: 0.72rem; color: var(--ff-muted-4); white-space: nowrap; }

    /* -- IMAGE UPLOAD -- */
    .image-upload-area { border: 2px dashed var(--ff-line-strong); border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; }
    .image-upload-area:hover { border-color: var(--ff-brand); background: #f8feff; }
    .image-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .image-upload-area i { font-size: 2rem; color: var(--ff-brand); margin-bottom: 10px; display: block; }
    .image-upload-area p { font-size: 0.88rem; color: #777; }
    .image-upload-area span { font-size: 0.75rem; color: var(--ff-muted-4); }
    .image-previews { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
    .image-preview-item { position: relative; width: 90px; height: 90px; }
    .image-preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 2px solid var(--ff-line-strong); }
    .image-preview-item .remove-img { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #ff4444; color: #fff; border: none; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }

    /* -- PASSWORD -- */
    .password-strength { height: 4px; border-radius: 4px; margin-top: 6px; background: #eee; overflow: hidden; }
    .password-strength-bar { height: 100%; width: 0; border-radius: 4px; transition: width 0.3s, background 0.3s; }

    /* -- SUBMIT -- */
    .submit-btn { width: 100%; padding: 16px; background: var(--ff-brand); color: #fff; border: none; border-radius: 50px; font-size: 1rem; font-weight: 700; font-family: var(--ff-font-body); cursor: pointer; transition: background 0.2s, box-shadow 0.2s; margin-top: 10px; }
    .submit-btn:hover { background: var(--ff-brand-hover); box-shadow: 0 0 16px #00c2ee88; }
    .submit-btn:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }
    .error-msg { color: #ff4444; font-size: 0.85rem; margin-top: 10px; text-align: center; }

    /* -- SUCCESS -- */
    .success-screen { text-align: center; padding: 60px 20px; display: none; }
    .success-screen.visible { display: block; }
    .success-icon { width: 80px; height: 80px; background: var(--ff-success-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 2.2rem; color: #fff; animation: popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
    @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .success-screen h2 { font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls); color: var(--ff-ink-deep); font-size: 1.6rem; margin-bottom: 12px; }
    .success-screen p { color: var(--ff-muted-2); font-size: 0.95rem; line-height: 1.7; }
    .success-screen a { display: inline-block; margin-top: 24px; background: var(--ff-brand); color: #fff; padding: 12px 32px; border-radius: 50px; text-decoration: none; font-weight: 700; transition: background 0.2s; }
    .success-screen a:hover { background: var(--ff-brand-hover); }

/* -- RIGHT TO WORK -- */
.rtw-options {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.rtw-option {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  border: 2px solid var(--ff-line-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  background: #fafafa;
  text-align: center;
  position: relative;
}

.rtw-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.rtw-option i {
  font-size: 1.6rem;
  color: #ccc;
  transition: color 0.2s;
}

.rtw-option span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ff-muted-3);
  transition: color 0.2s;
}

.rtw-option:hover {
  border-color: var(--ff-brand);
  background: var(--ff-brand-tint-2);
}

.rtw-option:hover i {
  color: var(--ff-brand);
}

.rtw-option:hover span {
  color: var(--ff-brand-hover);
}

.rtw-option.selected {
  border-color: var(--ff-brand);
  background: var(--ff-brand-tint);
  box-shadow: 0 0 0 3px rgba(0, 194, 238, 0.15);
}

.rtw-option.selected i {
  color: var(--ff-brand);
}

.rtw-option.selected span {
  color: var(--ff-brand-hover);
}

/* Tick badge on selected card */
.rtw-option.selected::after {
  content: '\2713';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: var(--ff-brand);
  color: #fff;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- RTW UPLOAD PANELS -- */
.rtw-upload {
  margin-top: 4px;
  animation: fadeSlideIn 0.2s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- QUALIFICATION HELP LINK -- */
.qual-help-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--ff-brand-hover);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ff-font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.qual-help-link:hover { color: #0090b8; }
.qual-help-link i { font-size: 0.7rem; }

/* -- QUALIFICATIONS MODAL -- */
.qual-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.qual-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.qual-modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  max-width: 520px;
  width: calc(100% - 48px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transform: translateY(10px);
  transition: transform 0.2s;
}

.qual-modal-overlay.open .qual-modal { transform: translateY(0); }

.qual-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ff-line-faint);
}

.qual-modal-header h3 {
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls);
  font-size: 0.88rem;
  color: var(--ff-brand);
}

.qual-modal-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--ff-muted-4);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}

.qual-modal-close:hover { color: #333; background: var(--ff-line-faint); }

.qual-modal-body p {
  font-size: 0.84rem;
  color: var(--ff-muted-2);
  margin-bottom: 14px;
  line-height: 1.5;
}

.qual-modal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qual-modal-list li {
  padding: 11px 14px;
  background: var(--ff-surface-2);
  border-radius: 10px;
  border-left: 3px solid var(--ff-brand);
}

.qual-modal-list li strong {
  display: block;
  font-size: 0.84rem;
  color: var(--ff-ink);
  margin-bottom: 3px;
}

.qual-modal-list li span {
  font-size: 0.74rem;
  color: var(--ff-muted-3);
}

/* -- RESPONSIVE -- */
@media (max-width: 768px) {
  .hero h1 { font-size: 1.8rem; }
  .form-wrapper { margin: 32px auto; padding: 0 16px 40px; }
  .form-section { padding: 20px 18px; }
  .form-row { grid-template-columns: 1fr; }
  .schedule-day { grid-template-columns: 100px 1fr auto; gap: 10px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.5rem; }
  .hero { padding: 44px 16px 36px; }
  .schedule-day { grid-template-columns: 1fr; gap: 8px; }
  .rtw-options { flex-direction: column; }
  .rtw-option { min-width: unset; }
  .form-section { padding: 16px 14px; }
}
/* =============================================================================
   JOIN US — WIDE FORM LAYOUT
   -----------------------------------------------------------------------------
   Appended last so it supersedes the rules above without unpicking them.

   The page was a 780px column, which made a long onboarding form feel like an
   endless narrow ribbon. On desktop each section now splits in two: the heading
   and its guidance sit in a left rail, the fields fill a wider right column.

   The field column is deliberately capped rather than allowed to fill the new
   width — a 700px-wide text input is harder to fill than a 600px one, not
   easier. The extra width buys air and the guidance rail, not longer inputs.

   Everything here is inside a min-width query, so mobile keeps the existing
   single-column stack untouched.
   ========================================================================== */

/* Section numbers come from a counter, so no markup carries an index that could
   drift out of step if a section is added or reordered. */
.form-wrapper { counter-reset: ff-section; }

/* body is a flex column (see style.css). `margin: … auto` on a flex item turns
   off the default stretch, so the wrapper was sizing to its own content instead
   of filling the row up to max-width — it never actually reached the width it
   declared. An explicit width restores that at every breakpoint. */
.form-wrapper { width: 100%; }

@media (min-width: 1024px) {
  .form-wrapper {
    /* Shared so the submit button can line up with the field column without
       anyone having to re-add these numbers by hand. */
    --jf-rail: 300px;   /* left guidance rail */
    --jf-gap:  48px;    /* rail -> fields gutter */
    --jf-pad:  40px;    /* section card horizontal padding */
    --jf-field-max: 660px;

    max-width: 1180px;
    margin: 56px auto;
    padding: 0 32px 72px;
  }

  .form-section {
    display: grid;
    grid-template-columns: var(--jf-rail) minmax(0, 1fr);
    column-gap: var(--jf-gap);
    align-items: start;
    padding: 36px var(--jf-pad);
    border-radius: 18px;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(16,24,40,0.06);
    border: 1px solid var(--ff-line-soft);
  }

  /* Heading occupies the left rail; everything else stacks in the right column. */
  .form-section > h2 {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.5rem;
    line-height: 1.06;
    color: var(--ff-ink);
  }

  .form-section > h2::before {
    counter-increment: ff-section;
    content: "Step " counter(ff-section);
    display: block;
    font-family: var(--ff-font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ff-brand-deep);
    margin-bottom: 9px;
  }

  .form-section > .form-section-hint {
    grid-column: 1;
    grid-row: 2;
    margin-top: 12px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--ff-muted-2);
  }

  /* Fields fill column two, starting level with the heading. */
  .form-section > *:not(h2):not(.form-section-hint) {
    grid-column: 2;
    max-width: var(--jf-field-max);
  }
  .form-section > *:not(h2):not(.form-section-hint):first-of-type { grid-row: 1; }

  /* A touch more room now the column is wider. */
  .form-group { margin-bottom: 20px; }
  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 13px 15px;
    font-size: 0.94rem;
    border-radius: 11px;
  }
  .form-group label { font-size: 0.82rem; }
  .form-group textarea { min-height: 132px; }
  .form-row { gap: 20px; }

  /* Sits directly under the field column — same left edge and same width — so
     the form has one clear left edge all the way down instead of the button
     drifting into the rail's gutter.

     The button is a sibling of the sections, not a grid item inside one, so its
     geometry is rebuilt from the same variables. The stray 1px is the section
     card's border, which the fields sit inside and the button does not. */
  .submit-btn {
    --jf-offset: calc(var(--jf-pad) + var(--jf-rail) + var(--jf-gap) + 1px);
    margin-left: var(--jf-offset);
    margin-right: 0;
    width: calc(100% - var(--jf-offset) - var(--jf-pad) - 1px);
    /* The fields are capped at this too, so on wide screens where the column is
       larger than the cap the button stops with them rather than running on. */
    max-width: var(--jf-field-max);
  }
}

/* Below the split, the rail would squeeze the fields, so the heading simply
   sits above them again — but the page still gets more width than 780px. */
/* Between the phone layout and the split, the heading still sits above its
   fields. The wrapper gets more room than the old 780px, but is held back from
   the full 1180 — a single stacked column that wide gives 800px-long text
   inputs, which is harder to fill, not easier. */
@media (min-width: 769px) and (max-width: 1023px) {
  .form-wrapper { max-width: 840px; padding: 0 28px 64px; }
}

/* The hint is desktop guidance; on narrow screens it competes with the fields. */
@media (max-width: 1023px) {
  .form-section-hint { display: none; }
}

/* A .form-row with a single child (Phone Number is one) would otherwise sit at
   half width with an empty column beside it — barely noticeable in the old 780px
   column, obvious now the section is wider. Let it fill the row instead. */
.form-row:has(> :only-child) { grid-template-columns: 1fr; }