/* Local overrides for BHF page recreation */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* Demo-only client-side form submission feedback (contact form, etc.) */
.js-demo-form-success {
  display: none;
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #eaf7ec;
  border: 1px solid #bfe6c6;
  color: #1c7d31;
  font-weight: 700;
}

.js-demo-form-success.is-visible {
  display: block;
}

/* Fix quicksearch (home page "View all vacancies" widget + mobile variant):
   inputs/selects render with box-sizing:content-box in the scraped stylesheet, so their
   heavy horizontal padding pushes them wider than their flex container, causing the
   postcode field to visually overlap the "Search jobs" button. */
.quicksearch input,
.quicksearch select,
.quicksearch button {
  box-sizing: border-box;
}

.quicksearch .quicksearch__field-container {
  padding-right: 16px;
}

.quicksearch .quicksearch__field-container--button-cntr {
  padding-right: 0;
}

/* "View all vacancies" search fields (Keywords / Miles / Postcode) on the home page:
   the scraped stylesheet never set an explicit border-style, so browsers fell back to
   their default "inset" rendering, which shades the bottom/right edges almost invisible
   against a white background (looked like the bottom border was clipped/missing).
   Give each field a clean, complete, subtle light-green border by default, and only turn
   the individual field the user is interacting with to a strong black border on hover/focus
   (never the whole search bar). Border width stays constant so nothing shifts on hover. */
.quicksearch--home input[type="text"],
.quicksearch--home select {
  border-style: solid;
  border-width: 2px;
  border-color: #dadcde;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease;
}

.quicksearch--home input[type="text"]:hover,
.quicksearch--home input[type="text"]:focus,
.quicksearch--home select:hover,
.quicksearch--home select:focus {
  border-color: #000;
}

/* Replace the native dropdown arrow on the Miles select with a custom one so we can
   control its distance from the right edge (the native arrow sat too close to the border). */
.quicksearch--home select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23404040' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px 8px;
  padding-right: 44px;
}

/* Inline keyword/location search bar on the Vacancies hub page */
.quicksearch--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.quicksearch--inline .quicksearch__field-container {
  flex: 1 1 220px;
}

.quicksearch--inline .quicksearch__field-container--button-cntr {
  flex: 0 0 auto;
}

.quicksearch--inline input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #dadcde;
  border-radius: 8px;
  font-size: 1rem;
}

.quicksearch--inline .more-info-btn {
  width: auto;
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
  white-space: nowrap;
}

@media screen and (max-width: 600px) {
  .quicksearch--inline .quicksearch__field-container {
    flex: 1 1 100%;
  }
}

/* Empty-state used on the Saved Vacancies view */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state p {
  color: #6b6b6b;
  font-size: 1.05rem;
}

.sr-only,
.its-u-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;
}

.section--brand-1 .slick-dots li button:before {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}

.section--brand-1 .slick-dots li.slick-active button:before {
  background-color: #fff;
  border-color: #fff;
}

/* Latest opportunities – job cards */
.section--brand-1 .job-slider-item .tag--jobs {
  padding: 0;
  font-size: 13px;
}

.section--brand-1 .job-slider-item h3 {
  font-family: "BHFBeats", Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.section--brand-1 .job-slider-item h3 a {
  color: #d50032;
  text-decoration: underline;
}

.job-slider-item .vac-field-layout--show-labels .item > div {
  flex-direction: column;
}

.job-slider-item .vac-field-layout--show-labels .item .label {
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.5;
}

.job-slider-item .vac-field-layout--show-icons .label .icon {
  width: 30px;
  color: #ff0030;
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  font-family: "icomoon", sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.job-slider-item .vac-field-layout--show-icons .label .icon:before {
  display: inline-block;
}

.job-slider-item .vac-field-layout--show-icons.vac-field-layout--show-labels .item .content {
  margin-left: 10px;
}

.job-slider-item .vac-field-layout .label > span:first-child {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}

.job-slider-item .vac-field-layout .label > span:last-child {
  vertical-align: middle;
}

.job-slider-item .vac-field-layout .item {
  margin-bottom: 10px;
}

.job-slider-item .vac-field-layout .item:last-child {
  margin-bottom: 0;
}

.job-slider-item .vac-field-layout .content {
  line-height: 1.5;
}

.job-slider-item .save-job .icon {
  color: #c70f31;
  font-size: 21px;
}

/* "More info" button – shared style used by job cards and team cards */
.job-slider-item__buttons,
.people-slider-item__button {
  box-sizing: border-box;
  text-align: center;
}

.more-info-btn {
  display: block;
  width: calc(100% - 32px);
  max-width: 280px;
  margin: 0 auto;
  padding: 13px 20px;
  background-color: #ff0030;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.more-info-btn:hover {
  background-color: #d40029;
}

.more-info-btn:active {
  transform: scale(0.98);
}

.more-info-btn:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

.people-slider-item__button {
  padding: 0 20px 20px;
}

/* ============================================================
   Shared primary red CTA button.
   Canonical visual reference: the Latest Opportunities "More info" button
   defined above (.more-info-btn). Every red call-to-action across the site
   (Apply now, Search jobs, Register, Sign in, Create account, Submit,
   Continue, benefits/wellbeing jump links, etc.) shares this exact look:
   colour, font, radius, border, hover/active/focus states, transition,
   cursor. Only the WIDTH is intentionally left to size naturally to its
   own content/context, rather than forcing every button to match the
   card-filling width used by .more-info-btn.
   ============================================================ */
.primary-red-btn,
.button--main,
.button:not(.button--back):not(.button--plain):not(.save-job) {
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 13px 28px;
  background-color: #ff0030;
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.primary-red-btn:hover,
.button--main:hover,
.button:not(.button--back):not(.button--plain):not(.save-job):hover {
  background-color: #d40029;
  color: #ffffff;
}

.primary-red-btn:active,
.button--main:active,
.button:not(.button--back):not(.button--plain):not(.save-job):active {
  background-color: #d40029;
  border-color: transparent;
  transform: scale(0.98);
}

.primary-red-btn:focus-visible,
.button--main:focus-visible,
.button:not(.button--back):not(.button--plain):not(.save-job):focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Save-vacancy controls stay a neutral secondary style (never the red CTA colour),
   matching the original site's design language of Save = secondary, Apply = primary. */
.save-job.button-negative {
  background-color: #f7f7f7;
  color: #404040;
  border: 1px solid #dadcde;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 13px 28px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.save-job.button-negative:hover {
  background-color: #ececec;
}

.save-job.button-negative.is-added {
  background-color: #ffe6ea;
  color: #c70f31;
}

.primary-red-btn[disabled],
.button[disabled] {
  background-color: #f1f1f1 !important;
  color: #aaa !important;
  cursor: not-allowed;
}

/* Buttons meant to fill the width of their row/container (e.g. a sticky
   Save + Apply pair sitting side by side on a vacancy page). */
.primary-red-btn--stretch {
  display: block;
  width: 100%;
  flex: 1 0 0;
}

/* A row of pill-style jump links (Benefits / Wellbeing / Learning pages)
   should wrap neatly and keep comfortable spacing between pills. */
.page__buttons .button {
  margin: 0;
}

/* The vacancy-page sidebar's "image + title" cards (The use of AI / Our
   Benefits / Application hints and tips) declare width:450px with
   max-width:100% but content-box sizing, so their own padding pushes them
   past their container on narrow screens. Force border-box so the
   max-width cap actually includes the card's own padding/border. */
.vac-d__benefits {
  box-sizing: border-box;
}

/* ============================================================
   Vacancy detail page: description (left) + supporting info
   sidebar (right), inside ONE shared section -- never stacked
   after the description on desktop.

   The site's legacy float grid (.grid__row / .col-lg-8 / .col-lg-4)
   has zero spare width once its own padding/negative-margin math is
   applied, so on some widths the two columns silently wrap onto
   separate lines instead of sitting side by side. Flexbox removes
   that fragility for this specific row while leaving the shared
   grid classes untouched everywhere else on the site. */
.vac-details__layout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  float: none;
}

.vac-details__main-col,
.vac-details__sidebar-col {
  float: none;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .vac-details__main-col {
    width: 66.6666667%;
  }

  .vac-details__sidebar-col {
    width: 33.3333333%;
  }
}

@media (max-width: 991px) {
  .vac-details__main-col,
  .vac-details__sidebar-col {
    width: 100%;
  }
}

/* ============================================================
   Sign in / Register / Account experience
   ============================================================ */

.text-link {
  color: #ff0030;
  font-weight: 700;
  text-decoration: underline;
}

.text-link:hover {
  color: #d40029;
}

.demo-disclaimer {
  margin-top: 32px;
  color: #6b6b6b;
  font-size: 0.85rem;
  line-height: 1.5;
}

.requiredIndicator {
  color: #ff0030;
  margin-right: 2px;
}

/* Field rows reuse the site's existing .row.inputrow/.label/.content
   pattern; fieldset/legend need a little extra normalising so they match. */
.row.inputrow fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.row.inputrow legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 8px;
  width: 100%;
}

.field-error {
  display: block;
  color: #c70f31;
  font-size: 0.85rem;
  margin-top: 6px;
  min-height: 0;
}

.form-error {
  color: #c70f31;
  background: #fbeef0;
  border: 1px solid #f4d2d8;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 16px;
  font-weight: 600;
}

.form-success {
  color: #1b7a3d;
  font-weight: 600;
  margin-top: 12px;
}

.errorsummary[role="alert"] {
  background: #fbeef0;
  border: 1px solid #f4d2d8;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
  color: #c70f31;
}

.errorsummary ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* Radio "pill" groups (Yes/No) */
.radio-pill-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.radio-pill-group li {
  margin: 0;
}

.radio-pill-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.radio-pill-group label {
  display: inline-block;
  padding: 10px 22px;
  border: 2px solid #dadcde;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  color: #404040;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.radio-pill-group input[type="radio"]:checked + label {
  border-color: #ff0030;
  background: #fff0f2;
  color: #c70f31;
}

.radio-pill-group input[type="radio"]:focus-visible + label {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Checkbox rows (declaration / remember me) */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #ff0030;
}

.checkbox-row label {
  font-weight: 400;
}

/* Text/email/password/select inputs on these pages */
.row.inputrow input[type="text"],
.row.inputrow input[type="email"],
.row.inputrow input[type="password"],
.row.inputrow select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 2px solid #dadcde;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.15s ease;
}

.row.inputrow input[type="text"]:hover,
.row.inputrow input[type="email"]:hover,
.row.inputrow input[type="password"]:hover,
.row.inputrow select:hover,
.row.inputrow input[type="text"]:focus,
.row.inputrow input[type="email"]:focus,
.row.inputrow input[type="password"]:focus,
.row.inputrow select:focus {
  border-color: #000;
  outline: none;
}

.row.inputrow input[aria-invalid="true"] {
  border-color: #c70f31;
}

.row.inputrow select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3e%3cpath fill='%23404040' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Password field with visibility toggle */
.password-field {
  position: relative;
}

.password-field input {
  padding-right: 48px !important;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #6b6b6b;
  display: flex;
  align-items: center;
}

.password-toggle:hover {
  color: #404040;
}

.password-toggle:focus-visible {
  outline: 3px solid #000;
  border-radius: 6px;
}

.password-help {
  color: #6b6b6b;
  font-size: 0.82rem;
  margin-top: 6px;
  line-height: 1.4;
}

/* Password strength meter */
.password-strength {
  height: 6px;
  border-radius: 4px;
  background: #ececec;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
}

.password-strength span {
  position: absolute;
  left: -9999px;
}

.password-strength::after {
  content: '';
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.password-strength.is-level-1::after { width: 20%; background: #d9363e; }
.password-strength.is-level-2::after { width: 40%; background: #e8821e; }
.password-strength.is-level-3::after { width: 60%; background: #e8b41e; }
.password-strength.is-level-4::after { width: 80%; background: #6fbf3c; }
.password-strength.is-level-5::after { width: 100%; background: #1b7a3d; }

/* Social login buttons */
.social-login-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 16px 0 8px;
}

.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #dadcde;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.social-btn:hover {
  border-color: #000;
}

.social-btn:active {
  transform: scale(0.96);
}

.social-btn:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

.social-btn--facebook i { color: #3b5998; }
.social-btn--google i { color: #dd4b39; }
.social-btn--linkedin i { color: #007bb6; }

.social-message {
  text-align: center;
  color: #6b6b6b;
  font-size: 0.88rem;
  max-width: 460px;
  margin: 10px auto 0;
  line-height: 1.5;
}

/* CV upload widget */
.cv-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.cv-upload__idle,
.cv-upload__progress,
.cv-upload__done {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cv-upload__btn {
  border-radius: 9999px;
  border: 2px solid #dadcde;
  background: #fff;
  padding: 10px 22px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.cv-upload__btn:hover {
  border-color: #000;
}

.cv-upload__hint {
  color: #6b6b6b;
  font-size: 0.85rem;
}

.cv-upload__progress-bar {
  width: 160px;
  height: 8px;
  border-radius: 4px;
  background: #ececec;
  overflow: hidden;
}

.cv-upload__progress-bar span {
  display: block;
  height: 100%;
  width: 60%;
  background: #ff0030;
  border-radius: 4px;
  animation: cv-upload-progress 0.9s ease-in-out infinite alternate;
}

@keyframes cv-upload-progress {
  from { transform: translateX(-40%); }
  to { transform: translateX(120%); }
}

.cv-upload__done {
  background: #f7fbf8;
  border: 1px solid #cdeada;
  border-radius: 10px;
  padding: 12px 16px;
}

.cv-upload__done i {
  color: #1b7a3d;
  font-size: 1.2rem;
}

.cv-upload__filename {
  font-weight: 600;
  color: #404040;
  word-break: break-word;
}

.cv-upload__replace,
.cv-upload__remove {
  color: #ff0030;
  font-weight: 700;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.cv-upload__replace:hover,
.cv-upload__remove:hover {
  color: #d40029;
}

/* Account pages */
.account-hero {
  padding-bottom: 20px;
  border-bottom: 1px solid #dadcde;
  margin-bottom: 24px;
}

.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.account-card {
  background: #fff;
  border: 1px solid #dadcde;
  border-radius: 16px;
  padding: 20px;
}

.account-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

@media (max-width: 600px) {
  .social-login-row {
    gap: 10px;
  }

  .account-cards {
    grid-template-columns: 1fr;
  }
}

.job-slider-item .o-flexi__cell h3 {
  margin-top: 0;
}

.people-slider-item .o-flexi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  overflow-y: auto;
  padding: 20px;
}

.modal-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay .colleague-popup {
  display: block !important;
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

.modal-overlay .modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10001;
  line-height: 1;
}

.modal-overlay .dtable {
  display: table;
  width: 100%;
  min-height: 440px;
}

.modal-overlay .dtable__cell {
  display: table-cell;
  vertical-align: top;
}

.modal-overlay .dtable__cell--image {
  width: 40%;
  background-size: cover;
  background-position: center;
  min-height: 440px;
}

.modal-overlay .dtable__cell--padding {
  padding: 40px;
}

@media screen and (max-width: 1024px) {
  .modal-overlay .dtable,
  .modal-overlay .dtable__cell {
    display: block;
    width: 100%;
  }

  .modal-overlay .dtable__cell--image {
    min-height: 280px;
    width: 100%;
  }
}

.quote blockquote {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.quote blockquote span {
  display: block;
  margin-top: 20px;
  font-weight: bold;
}

.wrap-page-title h1 {
  color: #fff;
}

.icon--medium {
  font-size: 20px !important;
}

/* ============================================================
   Site-wide responsive system
   Breakpoints match candidate.css: 1279 / 1024 / 767 / 600
   Desktop stays as designed; tablet/phone get progressive polish.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

iframe {
  display: block;
}

/* Vacancy listing grids (hub + saved) — replace brittle inline minmax(320px) */
.vacancy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

.vacancy-grid .job-slider-item {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
}

/* Long strings (emails, locations) should wrap instead of forcing overflow */
.question__text,
.questions a,
.footer-legal__text,
.job-slider-item .content,
.vacancy-card .content,
.vac-d__content,
.row.inputrow,
a[href^="mailto:"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hamburger close glyph — candidate.css hides .icon-close by default */
.js-hamburger.nav-active .icon-close {
  display: inline-block !important;
}

.js-hamburger.nav-active .icon-menu {
  display: none !important;
}

/* ---------- Tablet / nav breakpoint ---------- */
@media screen and (max-width: 1279px) {
  .header .header__nav {
    gap: 8px;
  }

  .mobile-menu .icon-and-text--text {
    white-space: normal;
    font-size: 12px;
    line-height: 1.2;
    max-width: 4.8em;
    text-align: center;
  }

  .dropdown-menu {
    max-width: 100vw;
    left: 0;
    right: 0;
  }

  .nav--mobile .nav__link,
  .nav--mobile .nav__subnav-link {
    white-space: normal;
    line-height: 1.3;
  }
}

.fifty__video {
  width: 100%;
}

.fifty__video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  height: auto;
}

/* ---------- Tablet / content breakpoint ---------- */
@media screen and (max-width: 1024px) {
  .bhfBanner--gradient {
    padding: 28px 0;
  }

  .bhfBanner--gradient h1,
  .bhfBanner__title {
    font-size: 34px;
    line-height: 1.15;
  }

  .bhfBanner__subTitle,
  .bhfBanner--gradient h3,
  .wrap-page-title h3 {
    font-size: 18px;
    line-height: 1.35;
  }

  .section__title,
  .section h2.section__title {
    font-size: 32px;
    line-height: 1.15;
  }

  .mega {
    font-size: 36px;
    line-height: 1.15;
  }

  .giga {
    font-size: 42px;
    line-height: 1.1;
  }

  .departments {
    gap: 16px;
  }

  .fifty__video iframe,
  .fifty__col iframe {
    width: 100%;
    min-height: 220px;
  }

  /* Footer: reliable wrap instead of floats */
  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .footer__links-item {
    float: none;
  }

  .footer__links-social {
    gap: 20px 28px;
    justify-content: flex-start;
  }

  .footer-legal {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .footer-legal__logo,
  .footer-legal__logo--regulator {
    max-width: 160px;
    width: auto;
    height: auto;
  }

  .footer-legal__text {
    flex: 1 1 220px;
    font-size: 12px;
    line-height: 1.45;
  }

  .reciteme-float {
    top: auto;
    bottom: 16px;
    right: 12px;
    font-size: 2.25em;
  }

  .reg-tab-bar__container {
    padding: 28px 20px;
  }

  .vac-d__benefits {
    width: 100%;
    max-width: 100%;
  }

  .history-item,
  .history-item--large {
    width: 100% !important;
    max-width: 100%;
    display: block;
    padding-left: 20px;
    padding-right: 20px;
  }

  .modal-overlay {
    padding: 12px;
    align-items: flex-start;
  }

  .modal-overlay .dtable__cell--padding {
    padding: 24px 20px;
  }

  .modal-overlay .modal-close {
    top: 12px;
    right: 12px;
  }

  .page__buttons {
    justify-content: center;
  }

  .page__buttons .button,
  .page__buttons .primary-red-btn {
    max-width: 100%;
  }

  .hero__button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero__button-container .button,
  .hero__button-container .primary-red-btn,
  .hero__button-container .save-job {
    flex: 1 1 160px;
    text-align: center;
  }
}

/* ---------- Phone ---------- */
@media screen and (max-width: 767px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .header > .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Utility bar crowds the compact logo; float button remains for a11y tools */
  .header .header__nav {
    display: none;
  }

  .header > .wrap {
    gap: 8px;
  }

  .header__logo--mobile {
    flex-shrink: 0;
  }

  .nav--desktop.nav--right {
    gap: 6px;
    flex-shrink: 0;
  }

  .mobile-menu .icon-and-text img,
  .mobile-menu .icon-and-text .icon {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .bhfBanner--gradient {
    padding: 20px 0;
  }

  .bhfBanner--gradient h1,
  .bhfBanner__title {
    font-size: 28px;
    line-height: 1.2;
    padding-top: 16px;
  }

  .bhfBanner__subTitle,
  .bhfBanner--gradient h3,
  .wrap-page-title h3 {
    font-size: 16px;
    line-height: 1.4;
  }

  .bhfBanner__img,
  .bhfBanner__img img {
    max-height: 240px;
    width: 100%;
    object-fit: cover;
  }

  .section__title,
  .section h2.section__title {
    font-size: 26px;
    line-height: 1.2;
  }

  h1,
  .h1,
  h2.h1,
  .footer h2.h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  .mega {
    font-size: 30px;
  }

  .giga {
    font-size: 34px;
  }

  /* Department / Join us tiles: one column */
  .departments {
    --departmentsRow: 1;
    gap: 16px;
  }

  .departments .departments__item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .fifty__container {
    width: 100%;
    max-width: 100%;
  }

  .questions {
    display: block;
    max-width: 100%;
  }

  .questions > * + * {
    margin-top: 16px;
  }

  .section--brand-1 .job-slider-item h3 {
    font-size: 18px;
  }

  .job-slider-item .vac-field-layout .item > div,
  .job-slider-item .vac-field-layout--show-labels .item > div {
    flex-wrap: wrap;
  }

  .more-info-btn {
    width: 100%;
    max-width: none;
  }

  .benefit {
    width: 100%;
    margin-top: 56px;
  }

  .people-container .people-item {
    flex: 0 0 100%;
  }

  /* Forms / auth */
  .reg-tab-bar__container {
    padding: 20px 16px;
  }

  .wrap.wrap-small,
  .wrap[style*="max-width"] {
    padding-left: 16px;
    padding-right: 16px;
  }

  .row.inputrow input[type="text"],
  .row.inputrow input[type="email"],
  .row.inputrow input[type="password"],
  .row.inputrow select,
  .quicksearch input[type="text"],
  .quicksearch select {
    font-size: 16px; /* prevent iOS zoom */
  }

  .reg-tab-bar__container .primary-red-btn,
  .reg-tab-bar__container .button--main,
  .reg-tab-bar__container .button:not(.button--back):not(.button--plain),
  .vac-details__actions .primary-red-btn,
  .vac-details__actions .button,
  .vac-details__actions .save-job,
  .hero__button-container .primary-red-btn,
  .hero__button-container .button,
  .hero__button-container .save-job,
  .page__buttons .button,
  .page__buttons .primary-red-btn,
  form .button--main,
  form .primary-red-btn,
  form .button:not(.button--back):not(.button--plain):not(.save-job),
  form .save-job.button-negative {
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .vac-details__actions,
  .hero__button-container,
  .o-flexi--buttons,
  .page__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Footer */
  .footer {
    padding: 24px 16px;
  }

  .footer__links {
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
  }

  .footer__links-social {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 20px;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer-legal__logo,
  .footer-legal__logo--regulator {
    max-width: 140px;
  }

  .footer-legal__text {
    flex: 1 1 auto;
    font-size: 11px;
  }

  .empty-state {
    padding: 40px 12px;
  }

  .account-cards {
    grid-template-columns: 1fr;
  }

  .cv-upload__progress-bar {
    width: 100%;
    max-width: 220px;
  }

  .quote blockquote {
    font-size: 16px;
  }

  .modal-overlay .dtable__cell--image {
    min-height: 200px;
  }

  .modal-overlay .dtable__cell--padding {
    padding: 20px 16px;
  }

  .accordion-trigger,
  .accordion-title {
    white-space: normal;
    line-height: 1.3;
  }

  /* Tables that force wide layouts become scrollable */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Narrow phone ---------- */
@media screen and (max-width: 600px) {
  .vacancy-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .quicksearch--home .quicksearch__field-container,
  .quicksearch--home .quicksearch__field-container--button-cntr,
  .quicksearch--inline .quicksearch__field-container {
    width: 100%;
    flex: 1 1 100%;
    padding-right: 0;
  }

  .quicksearch--home button,
  .quicksearch--home .more-info-btn,
  .quicksearch--inline button,
  .quicksearch--inline .more-info-btn {
    width: 100%;
    max-width: none;
  }

  .social-login-row {
    gap: 10px;
  }

  .radio-pill-group {
    width: 100%;
  }

  .radio-pill-group li,
  .radio-pill-group label {
    flex: 1 1 auto;
    text-align: center;
  }

  .its-c-login__utility {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

@media screen and (max-width: 360px) {
  .bhfBanner--gradient h1,
  .bhfBanner__title {
    font-size: 24px;
  }

  .section__title {
    font-size: 22px;
  }

  .mobile-menu .icon-and-text--text {
    font-size: 11px;
    max-width: 3.8em;
  }
}

/* ---------- Desktop / laptop polish (ensure large screens stay clean) ---------- */
@media screen and (min-width: 1280px) {
  .vacancy-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .js-hamburger.nav-active .icon-close {
    display: none !important;
  }
}