/* Work with us: /work-with-us and /work-with-us-thank-you (front matter: styles: apply). 4 Nov 2026.
   The recruitment page for tradespeople, read on a phone from a Facebook or Instagram ad. Brand tokens
   and type sizes come from site.css; this file sets layout, spacing and colour only. The form's
   behaviour is src/js/mt-apply.js, which adds .is-stepped to the form and shows one step at a time
   by setting the hidden attribute (never by a class), so nothing here may override [hidden]. */

/* ---- Placeholders Chris fills in before the page goes live --------------------------------- */
/* Loud on purpose, on white, Stone and Indigo alike (Indigo on Brass is 7.3:1). Remove with the text. */
mark.chris-todo { padding: 1px 5px; border-radius: 2px; background: var(--brass); color: var(--indigo); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- Hero ---------------------------------------------------------------------------------- */
/* The man at work sits right of centre: keep him in the crop on a phone. */
.apply-hero .frame-hero__img { object-position: 50% 50%; }
.apply-hero__note { font-size: 15px; line-height: 1.5; color: var(--sand); }
@media (max-width: 700px) {
  .apply-hero .frame-hero__img { object-position: 68% 50%; }
  .apply-hero .frame-hero__cta { gap: 12px; }
}

/* ---- Why work with us: heading and a job photo on the left, the five points on the right ---- */
.apply-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head points" "photo points" "photo foot"; gap: 0 clamp(40px, 6vw, 112px); align-items: start; }
.apply-why__head { grid-area: head; }
.apply-why__head .split__title { margin-top: 16px; max-width: 11em; }
.apply-points { grid-area: points; list-style: none; border-top: 1px solid var(--sand); }
.apply-points li { padding-block: 24px; border-bottom: 1px solid var(--sand); }
.apply-points p { margin-top: 8px; max-width: 60ch; color: var(--ink); }
.apply-why__foot { grid-area: foot; display: grid; grid-template-columns: 30px minmax(0, 1fr); margin-top: 28px; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--indigo); }
.apply-why__foot::before { content: ''; width: 14px; height: 2px; margin-top: 12px; background: var(--brass); }
.apply-why__photo { grid-area: photo; margin: 48px 0 0; }
.apply-why__photo .frame img { aspect-ratio: 4 / 5; object-position: 50% 70%; }
@media (max-width: 900px) {
  .apply-why { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "points" "foot" "photo"; }
  .apply-points { margin-top: 40px; }
  .apply-why__photo { margin-top: 40px; }
  .apply-why__photo .frame img { aspect-ratio: 4 / 3; }
}

/* ---- The roles: three cards on Stone, the button at the foot of each ------------------------ */
.apply-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.apply-role { display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 40px); background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius-card); }
.apply-role > p { margin-top: 12px; color: var(--ink); }
.apply-role__list { list-style: none; margin-top: 20px; border-top: 1px solid var(--sand); }
.apply-role__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding-block: 12px; border-bottom: 1px solid var(--sand); font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--indigo); }
.apply-role__list li::before { content: ''; width: 14px; height: 2px; margin-top: 12px; background: var(--brass); }
.apply-role .btn { margin-top: auto; }
.apply-role > :nth-last-child(2) { margin-bottom: 32px; }
@media (max-width: 1000px) { .apply-roles { grid-template-columns: minmax(0, 1fr); } .apply-role .btn { width: 100%; } }
@media (min-width: 701px) and (max-width: 1000px) { .apply-role .btn { width: auto; align-self: flex-start; } }

/* ---- What we look for: numbered rows on Indigo ------------------------------------------- */
.apply-standard { list-style: none; border-top: 1px solid rgba(224, 221, 215, .3); }
.apply-standard li { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr); gap: 8px 32px; align-items: baseline; padding-block: 28px; border-bottom: 1px solid rgba(224, 221, 215, .3); }
.apply-standard__num { font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: 1px; color: var(--brass); }
.apply-standard p { color: var(--sand); max-width: 46ch; }
@media (max-width: 800px) {
  .apply-standard li { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; padding-block: 22px; }
  .apply-standard p { grid-column: 2; }
}

/* ---- How it works: four numbered steps joined by a line (a column of them on a phone) ------- */
.apply-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.apply-steps li { position: relative; }
.apply-steps li::before { content: ''; position: absolute; top: 23px; left: 56px; right: -24px; height: 1px; background: var(--sand); }
.apply-steps li:last-child::before { display: none; }
.apply-steps__num { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--indigo); border-radius: 50%; background: var(--white); font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--indigo); }
.apply-steps li:first-child .apply-steps__num { background: var(--indigo); color: var(--white); }
.apply-steps h3 { margin-top: 24px; }
.apply-steps p { margin-top: 8px; max-width: 34ch; color: var(--ink); }
/* A column: the number on the left, the line running down to the next one. Phones, and the
   thank-you page's list (--list) at every width. */
.apply-steps--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.apply-steps--list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 20px; padding-bottom: 32px; }
.apply-steps--list li::before { top: 56px; bottom: 8px; left: 23px; right: auto; width: 1px; height: auto; }
.apply-steps--list li:last-child { padding-bottom: 0; }
.apply-steps--list h3 { margin-top: 11px; }
@media (max-width: 900px) {
  .apply-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .apply-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 20px; padding-bottom: 32px; }
  .apply-steps li::before { top: 56px; bottom: 8px; left: 23px; right: auto; width: 1px; height: auto; }
  .apply-steps li:last-child { padding-bottom: 0; }
  .apply-steps h3 { margin-top: 11px; }
}

/* ---- Apply: the heading on the left, the form in a card on the right ------------------------ */
.apply-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 112px); align-items: start; }
.apply-wrap__head { position: sticky; top: 120px; }
.apply-wrap__head .split__title { margin-top: 16px; max-width: 10em; }
.apply-wrap__head .lead { margin-top: 24px; }
@media (max-width: 900px) {
  .apply-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .apply-wrap__head { position: static; }
}

/* ---- The form ------------------------------------------------------------------------------ */
.apply [hidden] { display: none !important; }
.apply { padding: clamp(24px, 3vw, 48px); background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius-card); }
.apply fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Legends float so they take margins like any block; everything after them clears (a grid beside
   a float would otherwise squeeze up next to it). Clearing swallows the next element's top margin,
   so the gap under a legend is the legend's own margin-bottom. */
.apply legend { float: left; width: 100%; padding: 0; }
.apply legend ~ * { clear: both; }
.apply__legend { margin-bottom: 28px; }
legend.apply__ql { margin-bottom: 12px; }
legend.apply__ql:has(~ .apply__help:not([hidden])) { margin-bottom: 4px; }

/* Progress: "Step 1 of 4" and a thin bar. Only with the script (without it, every step shows). */
.apply:not(.is-stepped) .apply__progress { display: none; }
.apply__count { font-family: var(--font-heading); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: var(--slate); }
.apply__track { height: 4px; margin-top: 12px; background: var(--sand); border-radius: 2px; overflow: hidden; }
.apply__bar { display: block; height: 100%; background: var(--indigo); transition: width .4s cubic-bezier(.2, .7, .2, 1); }

/* A step: its title, then the questions. Without the script the four steps stack, with a gap. */
.apply__step + .apply__step { margin-top: 56px; }
.apply.is-stepped .apply__step + .apply__step { margin-top: 0; }
.apply__legend { margin-top: 24px; font-family: var(--font-heading); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--indigo); outline: none; }
.apply:not(.is-stepped) .apply__step:first-of-type .apply__legend { margin-top: 0; }

/* A question: its label (a legend for a group), an optional helper, the answers, the error. */
.apply .apply__q { margin-top: 36px; }.apply__ql, .apply__field > label { display: block; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--indigo); }
.apply__help { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--slate); }
.apply__help + .apply__help { margin-top: 0; }
.apply__opts, .apply__field > input, .apply__field > textarea, .apply__money { margin-top: 12px; }

/* Answers: whole rows you tap, at least 52px tall. The circle or box is drawn here so it reads at
   a glance; the real input is still there for keyboards and screen readers. */
.apply__opts { display: grid; gap: 8px; }
.apply__opts--two { grid-template-columns: 1fr 1fr; }
.apply__opts--chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.apply__opts--chips .apply__opt { gap: 12px; padding-inline: 12px; }
.apply__opt { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 16px; border: 1px solid var(--sand); border-radius: var(--radius-btn); background: var(--white); font-size: 16px; line-height: 1.35; color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.apply__opt:hover { border-color: var(--slate); }
.apply__opt small { font-size: 15px; color: var(--slate); }
.apply__opt input { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--slate); border-radius: 50%; background: var(--white); -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.apply__opt input[type="checkbox"] { border-radius: 4px; }
.apply__opt input::before { content: ''; opacity: 0; transition: opacity .15s ease; }
.apply__opt input[type="radio"]::before { width: 10px; height: 10px; border-radius: 50%; background: var(--white); }
.apply__opt input[type="checkbox"]::before { width: 11px; height: 6px; margin-top: -3px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); }
.apply__opt input:checked { border-color: var(--indigo); background: var(--indigo); }
.apply__opt input:checked::before { opacity: 1; }
.apply__opt:has(input:checked) { border-color: var(--indigo); background: var(--stone); outline: 1px solid var(--indigo); outline-offset: -2px; }
.apply__opt input:focus-visible { outline: none; }
.apply__opt:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Text boxes: 16px so a phone doesn't zoom in; a Slate edge so the box is easy to see (3:1+). */
.apply__field > input, .apply__field > textarea, .apply__money { width: 100%; min-height: 52px; border: 1px solid var(--slate); border-radius: var(--radius-btn); background: var(--white); }
.apply__field > input, .apply__field > textarea { display: block; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); }
.apply__field > textarea { min-height: 120px; resize: vertical; }
.apply__field > input:focus, .apply__field > textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
.apply [aria-invalid="true"]:is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], textarea) { border-color: var(--indigo); border-width: 2px; }
/* The day rate: £ before, "a day" after, in the same box. */
.apply__money { display: flex; align-items: center; max-width: 280px; }
.apply__money:focus-within { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
.apply__money input { flex: 1; min-width: 0; min-height: 50px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.apply__affix { flex: none; padding-inline: 14px 0; font-family: var(--font-heading); font-weight: 600; color: var(--indigo); }
.apply__affix:last-child { padding-inline: 0 14px; font-family: var(--font-body); font-weight: 400; color: var(--slate); }
/* Boxes that open under an answer (the "Other" trade, the photo link, the WhatsApp note). */
.apply__reveal { margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--sand); }
.apply__help--box { margin-top: 0; color: var(--ink); }

/* An error: in the brand's way (no red in the palette): a brass bar, words in Indigo. */
.apply__err, .apply__fail { margin-top: 10px; padding: 2px 0 2px 12px; border-left: 3px solid var(--brass); font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--indigo); }
.apply__fail { margin-top: 20px; padding: 12px 14px; background: var(--stone); outline: none; }

/* Consent: the tick row, then the link to the privacy policy under it. */
.apply__opt--consent { align-items: flex-start; }
.apply__opt--consent input { margin-top: 1px; }
.apply__consent-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 15px; color: var(--indigo); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }

/* Back and Next / Send. Without the script there is nothing to step through, so they go. */
.apply:not(.is-stepped) .apply__nav { display: none; }
.apply__nav { display: flex; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--sand); }
.apply__go { flex: 1 1 auto; }
.apply__back { flex: 0 0 auto; }
.apply__go[disabled] { opacity: .7; cursor: progress; }
@media (min-width: 701px) { .apply__go { flex: 0 1 auto; min-width: 200px; } .apply__nav { justify-content: flex-start; } }

.apply__alt { margin-top: 24px; font-size: 15px; line-height: 1.5; color: var(--slate); }
.apply__alt a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--indigo); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }

@media (max-width: 700px) {
  /* On a phone the form runs edge to edge in the section: no card round it. */
  .apply { padding: 0; border: 0; }
  .apply__legend { margin-top: 20px; }
  .apply .apply__q { margin-top: 32px; }
  .apply__nav { position: sticky; bottom: 0; z-index: 2; margin-top: 32px; padding-block: 16px; background: var(--white); }
  /* A field you tab or tap into never hides behind the stuck Back / Next bar. */
  .apply :is(input, textarea) { scroll-margin-bottom: 112px; }
}
@media (prefers-reduced-motion: reduce) { .apply__bar, .apply__opt, .apply__opt input { transition: none; } }

/* ---- Thank-you page ------------------------------------------------------------------------ */
/* The first name the form left behind: "Thanks, Dave, that's in." Without one, "Thanks, that's in." */
.apply-tel { display: inline-block; padding-block: 12px; margin-block: -12px; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.apply-photos { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; }
.apply-photos .lead { margin-top: 24px; }
.apply-home { margin-top: 40px; }
@media (max-width: 700px) { .apply-photos .btn { width: 100%; } }

/* Tradespeople, not clients: the header's "Book a quick call" (a client call) is hidden on these two
   pages, header and phone menu. The phone number / after-hours WhatsApp stay. (4 Nov 2026) */
.page-apply .site-header__end > .btn,
.page-apply .menu-panel__cta > .btn--primary { display: none; }