/* ===========================================================================
 * Single job page — hero meta, the two tabs, and the application form.
 *
 * Loaded only on is_singular('job') (functions.php). Cards, pills and the
 * roles grid come from careers.css, which is enqueued alongside this file so
 * a job page and the Careers page share one visual language.
 * ======================================================================== */

/* --- Hero ---------------------------------------------------------------- */
/* The hero shares the body's 920px measure, and everything in it is centred on
   that column: back link, title and the job-type / function / location row. */
body.dmv2-chrome .main-content-wrapper .job-banner .job-banner-container {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* section.job-banner, not .job-banner: dm-pages.css sets the section rhythm with
   `section.fullcontainer`, whose extra element selector outweighs a bare class
   here — which is why an earlier `padding: 0` on this section did nothing.
   The 100px top is the floating nav pill's clearance; home-v2.css used to add
   its own clamp(120px, 9vw, 160px) on top of this via the `first-of-type` rule,
   which is why the hero was ~520px tall. That rule now excludes .job-banner. */
body.dmv2-chrome .main-content-wrapper section.job-banner {
  padding: 100px 0 48px;
  background-color: var(--dm-ink-strong, #011D2B);
  background-size: cover;
  background-position: center;
}
/* The theme's .inner-container adds a flat 80px top AND bottom inside the
   section — 160px of empty hero on its own. The tabs section below zeroes it
   the same way. */
body.dmv2-chrome .main-content-wrapper .job-banner > .inner-container {
  padding-top: 0;
  padding-bottom: 0;
}
/* A shade smaller than the theme's 64px page title: centred, a long role name
   ("Business Development Manager, Partnerships") stays on one or two lines
   instead of three. */
body.dmv2-chrome .main-content-wrapper .job-banner .pageTitle h1 {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.08;
}
/* The theme paints every <a> in the body copy indigo, which on a dark hero
   reads as a mis-styled link rather than a back button — hence the element
   selector and the :visited/:hover companions, not a bare class rule. */
body.dmv2-chrome .main-content-wrapper .job-banner a.job-back-link,
body.dmv2-chrome .main-content-wrapper .job-banner a.job-back-link:visited {
  display: inline-block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
body.dmv2-chrome .main-content-wrapper .job-banner a.job-back-link:hover,
body.dmv2-chrome .main-content-wrapper .job-banner a.job-back-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.dmv2-chrome .main-content-wrapper .job-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.dmv2-chrome .main-content-wrapper .job-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}
body.dmv2-chrome .main-content-wrapper .job-meta-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}
body.dmv2-chrome .main-content-wrapper .job-meta-value {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

/* --- Tabs ---------------------------------------------------------------- */
/* The theme's .inner-container adds 80px top AND bottom on top of whatever the
   section sets, which stacked into ~150px of empty space above the tabs. The
   Contact Us section zeroes it the same way (dm-pages.css, .contact-sec-1). */
body.dmv2-chrome .main-content-wrapper section.job-sec {
  padding: 0;
}
body.dmv2-chrome .main-content-wrapper .job-sec > .inner-container {
  padding-top: 0;
  padding-bottom: 0;
}
/* Matches the Contact Us form column (920px) — at the theme's 1290px the form
   rows were wider than a comfortable reading measure. */
body.dmv2-chrome .main-content-wrapper .job-sec .container {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 44px;
  padding-bottom: 64px;
}
body.dmv2-chrome .main-content-wrapper .job-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 26px;
  border-bottom: 1px solid #E3E6EE;
}
body.dmv2-chrome .main-content-wrapper .job-tab {
  position: relative;
  padding: 12px 22px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--dm-ink-muted, #5A5A6E);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
body.dmv2-chrome .main-content-wrapper .job-tab:hover {
  color: var(--dm-indigo, #1A5FD4);
}
body.dmv2-chrome .main-content-wrapper .job-tab.is-active {
  color: var(--dm-indigo, #1A5FD4);
  border-bottom-color: var(--dm-indigo, #1A5FD4);
}
body.dmv2-chrome .main-content-wrapper .job-panel[hidden] {
  display: none;
}

/* --- Tab 1: the role ----------------------------------------------------- */
body.dmv2-chrome .main-content-wrapper .job-content {
  color: var(--dm-ink, #2C2C3A);
  line-height: 1.75;
}
/* A heading must bind to the section it INTRODUCES, not the one it ends.
   css/style.css:121/127/128 give every heading `padding: 0 0 20px` (22px for
   h3/h4) on top of whatever margin is set here. Setting only a margin left the
   real gap below at padding + margin = 32px, while the gap above collapsed to
   max(p's 16px, this margin) = 26px — so every heading sat closer to the
   paragraph above it and read as detached from its own body copy. Zero the
   inherited padding so the margins are the whole story, then split them about
   3:1 (above:below), which is what makes the grouping legible. */
body.dmv2-chrome .main-content-wrapper .job-content h2,
body.dmv2-chrome .main-content-wrapper .job-content h3,
body.dmv2-chrome .main-content-wrapper .job-content h4 {
  margin: 38px 0 10px;
  padding-bottom: 0;
  color: var(--dm-ink-strong, #011D2B);
}
body.dmv2-chrome .main-content-wrapper .job-content h2 { font-size: 26px; }
body.dmv2-chrome .main-content-wrapper .job-content h3 { font-size: 21px; }
body.dmv2-chrome .main-content-wrapper .job-content h4 { font-size: 18px; }
body.dmv2-chrome .main-content-wrapper .job-content p { margin: 0 0 16px; }
body.dmv2-chrome .main-content-wrapper .job-content ul,
body.dmv2-chrome .main-content-wrapper .job-content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
body.dmv2-chrome .main-content-wrapper .job-content li {
  margin-bottom: 8px;
}
body.dmv2-chrome .main-content-wrapper .job-content > *:first-child {
  margin-top: 0;
}
body.dmv2-chrome .main-content-wrapper .job-apply-cta {
  margin-top: 34px;
  text-align: center;
}

/* --- Tab 2: the application form -----------------------------------------
 * Almost nothing lives here. The form is built on the Contact Us markup
 * conventions (.form-group / .form-control / .height-60 / .NiceSelect /
 * .form-action), and dm-pages.css styles those for .job-sec alongside
 * .contact-sec-1 — one source of truth for both forms on the site. What
 * follows is only what the application form has and the contact form does
 * not: section headings, the phone pair, a file input, the consent row.
 * ---------------------------------------------------------------------- */
body.dmv2-chrome .main-content-wrapper .job-form-title {
  margin: 0 0 18px;
  font-size: 26px;
  color: var(--dm-ink-strong, #011D2B);
}

/* One vertical rhythm for the whole form. dm-pages.css gives every .form-group
   an 18px bottom margin; these are the pieces that sat outside it and made the
   spacing look ad hoc. */

/* Section headings. The 1px rule that used to sit under these read as a table
   border across a form that has no other lines in it — the space above the
   heading already separates the two groups. */
/* THE GAP BELOW THE HEADING IS ON ITS COLUMN, NOT ON THE HEADING.
   style.css:131 is
     h1:last-child, … h6:last-child { margin-bottom: 0 !important;
                                      padding-bottom: 0 !important; }
   and each legend is the only child of its .col-sm-12, so it matches. !important
   beats any specificity, which is why a margin-bottom and then a padding-bottom
   on .jobform-legend both computed to 0 and the first field label sat flush
   against the heading. Spacing the COLUMN sidesteps the fight entirely — no
   !important of our own to unpick later. margin-TOP on the heading is not
   affected by that rule, so the gap ABOVE a section still lives here. */
body.dmv2-chrome .main-content-wrapper .jobform-legend {
  margin: 30px 0 0;
  border: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dm-ink-strong, #011D2B);
}
body.dmv2-chrome .main-content-wrapper .col-sm-12:first-child .jobform-legend {
  margin-top: 0;
}
body.dmv2-chrome .main-content-wrapper .job-form .col-sm-12:has(> .jobform-legend) {
  padding-bottom: 22px;
}

/* Sits under a control, inside the same .form-group, so it never changes the
   gap to the next field. */
body.dmv2-chrome .main-content-wrapper .jobform-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dm-ink-muted, #5A5A6E);
}

/* Country code is a fixed-width companion to the number, not an equal partner —
   at 50/50 the number field is too short to read back. */
/* THE INLINE ERROR ALWAYS SITS BELOW THE CONTROL, NEVER INSIDE IT.
   CF7 emits .wpcf7-not-valid-tip immediately after the <input>, inside the
   .wpcf7-form-control-wrap span — so on a composite control the error lands
   wherever that span happens to be: squeezed into a flex row, or inside a
   bordered box. `display: contents` on the wrap dissolves it, promoting the
   input AND the error to children of the control's own container, where flex
   can put the error on a full-width line underneath. The alternative,
   absolute positioning, needs a fixed reserved height that a two-line message
   on a narrow screen would overflow. */
body.dmv2-chrome .main-content-wrapper .jobform-phone {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
body.dmv2-chrome .main-content-wrapper .jobform-phone > .wpcf7-form-control-wrap {
  display: contents;
}
/* flex-basis 0, not auto: the theme gives .form-control width:100%, and with
   the input now the flex item itself (rather than the wrap span it used to sit
   inside) a 100% basis plus the 124px country column overflows the row and
   wraps the number onto its own line. */
body.dmv2-chrome .main-content-wrapper .jobform-phone input[type="tel"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
/* Full width of the pair, so it starts at the same left edge as the country
   code rather than indented under the number. */
body.dmv2-chrome .main-content-wrapper .jobform-phone .wpcf7-not-valid-tip {
  flex: 1 1 100%;
  margin: -2px 0 0;
}
/* Fixed, and narrow enough to leave the number field room: the trigger now
   shows "SG +65" rather than the country name, so it no longer has to stretch
   for "Saint Vincent and the Grenadines (+1)" — and, more to the point, it no
   longer CHANGES width when the country does. */
body.dmv2-chrome .main-content-wrapper .jobform-phone > .jobform-country {
  flex: 0 0 124px;
}

/* --- The searchable country picker (js/job.js) ---------------------------
 * .jobform-country, NOT .NiceSelect: main-script.js only upgrades
 * `.NiceSelect select`, and its widget has no search box — unusable at ~230
 * options. The native <select> is only hidden once JS has built the combobox
 * and added .is-ready, so the form still works without JS.
 * ---------------------------------------------------------------------- */
body.dmv2-chrome .main-content-wrapper .jobform-country {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* The hidden <select> comes before the trigger in the DOM, so CF7's error —
   emitted right after it — would render ABOVE the control. It can only happen
   if somebody tampers with the posted value (the field always has a
   selection), but "above the field" is never the right place for it. */
body.dmv2-chrome .main-content-wrapper .jobform-country > .wpcf7-form-control-wrap {
  display: contents;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .wpcf7-not-valid-tip {
  order: 9;
  margin-top: 6px;
}
/* Not `> select`: CF7 wraps every control in a .wpcf7-form-control-wrap span,
   which also has to stay in the DOM because the inline error tip renders into
   it. Hide the control, keep its wrapper. */
body.dmv2-chrome .main-content-wrapper .jobform-country.is-ready select {
  display: none;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 60px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--bd-strong, #C9D2E4);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elevated, #fff);
  color: var(--ink, #2C2C3A);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-toggle:focus-visible,
body.dmv2-chrome .main-content-wrapper .jobform-country.is-open .jfc-toggle {
  outline: 0;
  border-color: var(--action, #1A5FD4);
  box-shadow: 0 0 0 3px rgba(26, 95, 212, .15);
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-bottom: 3px;
  border-right: 1.5px solid var(--dm-ink-muted, #5A5A6E);
  border-bottom: 1.5px solid var(--dm-ink-muted, #5A5A6E);
  transform: rotate(45deg);
  transition: transform .15s;
}
body.dmv2-chrome .main-content-wrapper .jobform-country.is-open .jfc-caret {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}
/* Wider than the 180px trigger: country names are long, and the panel is free
   to overhang the phone number field beside it. */
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 280px);
  padding: 8px;
  border: 1px solid var(--bd, #E3E6EE);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elevated, #fff);
  box-shadow: var(--shadow-md, 0 18px 40px rgba(2, 10, 40, .16));
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-panel[hidden] {
  display: none;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-search {
  width: 100%;
  height: 40px;
  margin-bottom: 6px;
  padding: 0 12px;
  border: 1px solid var(--bd-strong, #C9D2E4);
  border-radius: var(--r-sm, 10px);
  background: var(--bg-elevated, #fff);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 14px;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-search:focus {
  outline: 0;
  border-color: var(--action, #1A5FD4);
  box-shadow: 0 0 0 3px rgba(26, 95, 212, .15);
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-list {
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-option {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--r-sm, 10px);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink, #2C2C3A);
  list-style: none;
  cursor: pointer;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-option[hidden] {
  display: none;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-option.is-active,
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-option:hover {
  background: var(--dm-bg-soft, #F1F5FC);
  color: var(--action, #1A5FD4);
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-option.is-selected {
  font-weight: 600;
  color: var(--action, #1A5FD4);
}
/* The rule under the four pinned markets. It is the one line in this form that
   earns its keep — without it the repeat of Singapore/Vietnam/Brazil/Portugal
   further down the A-Z looks like a bug. Hidden while a search is running,
   because "the top four" means nothing in a filtered list. */
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-option.is-last-pinned {
  margin-bottom: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd, #E3E6EE);
  border-radius: var(--r-sm, 10px) var(--r-sm, 10px) 0 0;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-list.is-filtered .jfc-option.is-last-pinned {
  margin-bottom: 0;
  padding-bottom: 9px;
  border-bottom: 0;
}
body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-empty {
  margin: 10px 12px;
  font-size: 13px;
  color: var(--dm-ink-muted, #5A5A6E);
}

/* --- The CV field --------------------------------------------------------
 * THE BORDER IS ON THE INPUT, not on a wrapper around it. That is what keeps
 * the inline error outside the box: CF7 emits the error immediately after the
 * <input>, inside .wpcf7-form-control-wrap, so any div drawing a border around
 * that span contains the error too. With .jobform-file as the .form-group and
 * the wrap dissolved by display:contents, the pieces become siblings in one
 * column — label, the bordered input, the format hint, then the error last.
 * ---------------------------------------------------------------------- */
body.dmv2-chrome .main-content-wrapper .form-group.jobform-file {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.dmv2-chrome .main-content-wrapper .jobform-file > .wpcf7-form-control-wrap {
  display: contents;
}
/* Last, under the hint, so the field reads: what it is, what it takes, what
   went wrong. */
body.dmv2-chrome .main-content-wrapper .jobform-file .wpcf7-not-valid-tip {
  order: 9;
  margin-top: 6px;
}
/* .wpcf7-form-control-wrap is in the chain only to outweigh dm-pages.css's
   `.form-holder input:not([type=submit]):not([type=checkbox]):not([type=radio])`,
   whose three :not()s make it a 6-class selector — a shorter chain here loses
   and the input keeps the 14px padding and 15px font of a text field. */
/* CENTRING THE PILL IS ARITHMETIC, NOT alignment. A file input lays its button
   and "no file chosen" out with the browser's own INLINE algorithm — `display:
   flex; align-items: center` computes on the element and then does nothing,
   because the shadow content is not a flex container. The line box simply sits
   at the top of the content box, so a 40px pill inside 58px of content left
   18px of dead space underneath and read as top-aligned.
   Make the content box exactly the pill's height instead:
     60px total - 2px borders - 18px padding = 40px content
     = 40px line-height = 40px pill, flush, and therefore centred. */
body.dmv2-chrome .main-content-wrapper .job-form .jobform-file .wpcf7-form-control-wrap input[type="file"] {
  width: 100%;
  height: 60px;
  padding: 9px 16px;
  border: 1px solid var(--bd-strong, #C9D2E4);
  border-radius: var(--r-md, 14px);
  background: var(--bg-elevated, #fff);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 14px;
  /* Also stops the pill inheriting the theme's 48px .form-control line-height,
     which made it taller than its own box and clipped it. */
  line-height: 40px;
  color: var(--ink, #2C2C3A);
  cursor: pointer;
}
body.dmv2-chrome .main-content-wrapper .job-form .jobform-file .wpcf7-form-control-wrap input[type="file"]::file-selector-button {
  height: 40px;
  /* Exactly the line box's height, aligned to its top — the pill then fills the
     content box rather than hanging off a text baseline. */
  vertical-align: top;
  margin: 0 14px 0 0;
  padding: 0 22px;
  border: 0;
  /* Half the height, so it is a true pill at any width rather than a rounded
     rectangle — 999px would do the same, but this cannot be out-specified by a
     smaller radius elsewhere without also changing the height. */
  border-radius: 20px;
  background: var(--dm-indigo, #1A5FD4);
  color: #fff;
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 40px;
  cursor: pointer;
  transition: background .15s;
}
body.dmv2-chrome .main-content-wrapper .job-form .jobform-file .wpcf7-form-control-wrap input[type="file"]:hover::file-selector-button {
  background: #14479F;
}


/* What is actually attached. A native multiple-file input only ever says
   "3 files", which on the one field where a mistake costs the candidate the
   application is not enough. Built by job.js. */
body.dmv2-chrome .main-content-wrapper .jobform-file-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-list[hidden] {
  display: none;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 7px 14px;
  border-radius: var(--r-sm, 10px);
  background: var(--dm-bg-soft, #F1F5FC);
  font-size: 13px;
  list-style: none;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-list li + li {
  margin-top: 6px;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-name {
  /* Takes the slack so the size and the remove button stay together on the
     right however long the filename is. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dm-ink-strong, #011D2B);
  font-weight: 600;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-size {
  flex: 0 0 auto;
  color: var(--dm-ink-muted, #5A5A6E);
}
/* Remove one file without re-choosing the set. A file input replaces its whole
   selection every time the dialog opens, so without this the only way to drop
   one attachment was to pick them all again. */
body.dmv2-chrome .main-content-wrapper .jobform-file-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dm-ink-muted, #5A5A6E);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-remove:hover,
body.dmv2-chrome .main-content-wrapper .jobform-file-remove:focus-visible {
  background: #FFFFFF;
  color: #D6336C;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-notice {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #D6336C;
}
body.dmv2-chrome .main-content-wrapper .jobform-file-notice[hidden] {
  display: none;
}

/* --- Yes / No as a pair of pills ----------------------------------------
 * A two-option dropdown costs two clicks and hides the answer until one of
 * them. The radio inputs stay in the DOM and stay the thing that is
 * submitted — only their labels are drawn as pills — so keyboard, screen
 * readers and CF7's own validation are untouched.
 * ---------------------------------------------------------------------- */
body.dmv2-chrome .main-content-wrapper .jobform-pills .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.dmv2-chrome .main-content-wrapper .jobform-pills .wpcf7-list-item {
  margin: 0;
}
/* .wpcf7-list-item label, NOT every label in here: a bare `.jobform-pills label`
   also matched the FIELD's own header label and zeroed the 8px margin-bottom
   every other field's label has, so the pills sat flush against the question. */
body.dmv2-chrome .main-content-wrapper .jobform-pills .wpcf7-list-item label {
  display: block;
  margin: 0;
  opacity: 1;
  cursor: pointer;
}
/* A column, so the error can be ordered below the hint the way the CV field
   does it — read the question, read the caveat, then read what went wrong.
   (It also gives the header label's margin a block to push against; the radio
   group's wrap is inline by default.) */
body.dmv2-chrome .main-content-wrapper .form-group.jobform-pills {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.dmv2-chrome .main-content-wrapper .jobform-pills > .wpcf7-form-control-wrap {
  display: contents;
}
body.dmv2-chrome .main-content-wrapper .jobform-pills .wpcf7-not-valid-tip {
  order: 9;
  margin-top: 6px;
}
/* Moved out of the layout rather than display:none — a hidden input cannot be
   focused, which would take the control off the keyboard entirely. */
body.dmv2-chrome .main-content-wrapper .jobform-pills input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
body.dmv2-chrome .main-content-wrapper .jobform-pills .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Shorter than the 60px text controls on purpose — a pill reads as a choice,
     not as a box waiting for input, and two of them at full control height
     dominated the row. The field still starts on the same line as its
     neighbour because the label above it keeps the same 8px gap. */
  min-width: 96px;
  height: 46px;
  padding: 0 26px;
  border: 1px solid var(--bd-strong, #C9D2E4);
  border-radius: var(--dm-r-pill, 999px);
  background: var(--bg-elevated, #fff);
  color: var(--ink, #2C2C3A);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
body.dmv2-chrome .main-content-wrapper .jobform-pills label:hover .wpcf7-list-item-label {
  border-color: var(--action, #1A5FD4);
  color: var(--action, #1A5FD4);
}
body.dmv2-chrome .main-content-wrapper .jobform-pills input[type="radio"]:checked + .wpcf7-list-item-label {
  border-color: var(--action, #1A5FD4);
  background: var(--action, #1A5FD4);
  color: #fff;
}
body.dmv2-chrome .main-content-wrapper .jobform-pills input[type="radio"]:focus-visible + .wpcf7-list-item-label {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(26, 95, 212, .28);
}

/* Hidden until "Other" is chosen (job.js). */
body.dmv2-chrome .main-content-wrapper .jobform-other[hidden] {
  display: none;
}

/* The consent row is a checkbox, not a labelled field, so it needs its own
   clearance from the last control above it to read as a separate step. */
body.dmv2-chrome .main-content-wrapper .form-group.jobform-consent {
  margin-top: 6px;
  margin-bottom: 4px;
}
body.dmv2-chrome .main-content-wrapper .jobform-consent .wpcf7-list-item {
  margin: 0;
}
body.dmv2-chrome .main-content-wrapper .jobform-consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  opacity: 1;
  cursor: pointer;
}
/* CF7 puts the wording in its own span, and the theme paints that #C1C1C1 —
   near-invisible for the one sentence on the form the candidate is agreeing
   to. Colouring the <label> does nothing; the span is what has to change. */
body.dmv2-chrome .main-content-wrapper .jobform-consent .wpcf7-list-item-label {
  color: var(--dm-ink-strong, #011D2B);
}
body.dmv2-chrome .main-content-wrapper .jobform-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--dm-indigo, #1A5FD4);
}
/* The consent error is the one inline tip with no field box to sit under. */
body.dmv2-chrome .main-content-wrapper .jobform-consent .wpcf7-not-valid-tip {
  margin-top: 6px;
}

/* The submit button's own clearance, so the .form-action does not depend on the
   last field happening to be the consent row. */
body.dmv2-chrome .main-content-wrapper .job-form .form-action {
  margin-top: 12px;
}

/* A field CF7 rejected gets a red edge, so the inline message underneath has
   something to point at — the message alone is easy to miss on a long form.
   Three of the controls are drawn by something other than the input CF7 marks:
   niceSelect (visa, "how did you hear"), the country combobox, and the CV box.
   Each needs the marked element's red passed on to the box the eye actually
   sees, or the tip points at nothing. */
body.dmv2-chrome .main-content-wrapper .job-form .wpcf7-not-valid {
  border-color: #D6336C;
}
body.dmv2-chrome .main-content-wrapper .job-form .wpcf7-not-valid + .nice-select,
body.dmv2-chrome .main-content-wrapper .job-form .jobform-country .wpcf7-not-valid ~ .jfc-toggle,
body.dmv2-chrome .main-content-wrapper .job-form .jobform-file input[type="file"].wpcf7-not-valid,
body.dmv2-chrome .main-content-wrapper .job-form .jobform-pills .wpcf7-not-valid .wpcf7-list-item-label {
  border-color: #D6336C;
}

/* On success the visitor is being sent to the confirmation page (job.js), so
   CF7's own "thank you" would only flash up under the button on the way out.
   Error output stays visible — that one is doing a job. */
body.dmv2-chrome .main-content-wrapper .job-form form.sent .wpcf7-response-output {
  display: none;
}
@media (max-width: 767px) {
  body.dmv2-chrome .main-content-wrapper section.job-banner {
    padding: 104px 0 40px;
  }
  body.dmv2-chrome .main-content-wrapper .job-meta {
    gap: 14px 26px;
  }
  /* Two tabs only, so they split the width rather than scrolling sideways. */
  body.dmv2-chrome .main-content-wrapper .job-tabs {
    gap: 0;
  }
  body.dmv2-chrome .main-content-wrapper .job-tab {
    flex: 1 1 50%;
    padding: 12px 8px;
    font-size: 15px;
  }
  /* Country code above the number rather than beside it — side by side the
     number field drops below a usable width on a 375px screen. */
  body.dmv2-chrome .main-content-wrapper .jobform-phone {
    flex-wrap: wrap;
  }
  body.dmv2-chrome .main-content-wrapper .jobform-phone > .jobform-country {
    flex: 1 1 100%;
  }
  /* Full width, and it can no longer overhang a neighbour. */
  body.dmv2-chrome .main-content-wrapper .jobform-country .jfc-panel {
    width: 100%;
  }
  /* Two pills sharing the row rather than a 104px pair with dead space. */
  body.dmv2-chrome .main-content-wrapper .jobform-pills .wpcf7-list-item {
    flex: 1 1 0;
  }
  body.dmv2-chrome .main-content-wrapper .jobform-pills .wpcf7-list-item-label {
    display: flex;
    min-width: 0;
    padding: 0 12px;
  }
  /* Just the pill and "no file chosen" fit at 375px; the format hint is its
     own line below the control now, so nothing has to wrap inside the box. */
  body.dmv2-chrome .main-content-wrapper .job-form .jobform-file .wpcf7-form-control-wrap input[type="file"] {
    /* Only the side padding narrows. Dropping the 9px top/bottom as well left
       the 40px pill sitting at the top of a 58px content box instead of
       filling a 40px one — it read as hanging above centre. */
    padding: 9px 12px;
    font-size: 13px;
  }
  body.dmv2-chrome .main-content-wrapper .job-form .jobform-file .wpcf7-form-control-wrap input[type="file"]::file-selector-button {
    padding: 0 16px;
  }
  /* A thumb needs more than 22px, and removing the wrong CV is expensive. */
  body.dmv2-chrome .main-content-wrapper .jobform-file-remove {
    width: 32px;
    height: 32px;
    margin: -5px -6px -5px 0;
  }
}