h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

.nav {
  font-weight: 600;
}

.page-h-offset {
  margin-top: 85px;
}

.case-listings {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .case-listings {
    margin-top: -130px;
  }
}

.case-listing .line {
  overflow: hidden;
  position: relative;
}

.case-listing .line:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #1E4264;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.case-listing a {
  overflow: hidden;
}

.case-listing a img {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.case-listing:hover {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.case-listing:hover img {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.case-listing:hover .line:after {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  background-color: #EDFF1C;
}

.coloredCards__div.mint {
  background-color: #B0F0C7;
  color: #12293E;
}

.coloredCards__div.mint .line {
  background-color: #12293E;
}

.coloredCards__div.light-blue {
  background-color: #1E4264;
  color: #fff;
}

.coloredCards__div.light-blue .line {
  background-color: #fff;
}

.Helping-Local .Helping-Local__secondPart .learnMoreBtn {
  width: 12.5em;
}

/* Helping-Local buttons — same hover-fill pattern as contact-button.
   Each variant has a matching initial box-shadow so the fill colour
   doesn't interpolate from the base navy, and 200px spread paces the
   wipe across the full .25s transition. */

/* Box 1 — blue card: white fill, navy text */
.Helping-Local .Helping-Local__secondPart .blue .learnMoreBtn {
  -webkit-box-shadow: inset 0 0 0 0 #fff;
          box-shadow: inset 0 0 0 0 #fff;
}
.Helping-Local .Helping-Local__secondPart .blue .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #fff;
          box-shadow: inset 200px 0 0 0 #fff;
  color: #12293E !important;
}

/* Box 2 — navy card: light-grey fill, navy text */
.Helping-Local .Helping-Local__secondPart .navy .learnMoreBtn {
  -webkit-box-shadow: inset 0 0 0 0 #E4E8EA;
          box-shadow: inset 0 0 0 0 #E4E8EA;
}
.Helping-Local .Helping-Local__secondPart .navy .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #E4E8EA;
          box-shadow: inset 200px 0 0 0 #E4E8EA;
  color: #12293E !important;
}

/* Box 3 — yellow card: navy fill, yellow text (already matches base init) */
.Helping-Local .Helping-Local__secondPart .yellow .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #12293E;
          box-shadow: inset 200px 0 0 0 #12293E;
  color: #EDFF1C !important;
}

/* Navy-fill hover for .learnMoreBtn.border-navy on light backgrounds.
   Selector covers .case-study.home (home block), bare .case-study
   (service-detail sub-pages), .content-casesatudy (single case-study detail
   page header CTAs), .join-us-our-role ("Current Vacancies" on Join Us),
   and .apprenticships (CMS banner "Get In Touch" on Join Us). */
.case-study .learnMoreBtn.border-navy,
.content-casesatudy .learnMoreBtn.border-navy,
.join-us-our-role .learnMoreBtn.border-navy,
.apprenticships .learnMoreBtn.border-navy {
  -webkit-box-shadow: inset 0 0 0 0 #12293E;
          box-shadow: inset 0 0 0 0 #12293E;
}
.case-study .learnMoreBtn.border-navy:hover,
.content-casesatudy .learnMoreBtn.border-navy:hover,
.join-us-our-role .learnMoreBtn.border-navy:hover,
.apprenticships .learnMoreBtn.border-navy:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #12293E;
          box-shadow: inset 200px 0 0 0 #12293E;
  color: #FFF !important;
}

/* Apprenticeships banner (Join Us, CMS-injected `.apprenticships`) — 24px L/R gutter on its
   .container at the xs tier (≤575.98) so the heading/text aren't flush to the screen edge (img #40,
   audit #29). The section's `py-5` is on the SECTION (not the container), so `padding: 0 24px` only
   bumps horizontal 12→24px; vertical stays governed by py-5. `.apprenticships .container` (0,2,0)
   beats Bootstrap `.container` (0,1,0). Banner is Join-Us-only, so no other page is affected. */
@media only screen and (max-width: 575.98px) {
  .apprenticships .container {
    padding: 0 24px;
  }
}

/* #29 — case-study detail header CTAs ("Our Services" / "More Case Studies") are FULL-WIDTH at
   ≤767px (app.css:18644 `.content-casesatudy__heading--cta{width:100%}`, max ~525px wide), so the
   200px navy fill above stops halfway (img #29). Bump the inset to cover the full-width button — this
   page only. ≥768 the buttons are content-width → keep the 200px pacing. (Same fix as #28's navy CTA.)
   #FFF text carries from the base :hover rule above. */
@media only screen and (max-width: 767px) {
  .content-casesatudy .learnMoreBtn.border-navy:hover {
    -webkit-box-shadow: inset 600px 0 0 0 #12293E;
            box-shadow: inset 600px 0 0 0 #12293E;
  }
}

/* Case Studies — single-page header strip: mint → brand yellow,
   matches colour-swap on Home / Our Services / Mission & Values. */
.content-casesatudy__container {
  border-top-color: #EDFF1C;
}

.ourvalues .tfMint .line {
  background-color: #B0F0C7;
}

/* .team-contact "View Vacancies" / Indeed CTA — white-bordered button on
   navy bg: white fill on hover, text → navy. Initial state added so the
   fill doesn't interpolate from base; pacing 200px (was 100vw — too fast,
   finished in ~30ms of the .25s transition). Same pattern used elsewhere. */
.team-contact .learnMoreBtn {
  -webkit-box-shadow: inset 0 0 0 0 #fff;
          box-shadow: inset 0 0 0 0 #fff;
}
.team-contact .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #fff;
          box-shadow: inset 200px 0 0 0 #fff;
  color: #12293E !important;
}

/* .missionFounded__container .learnMoreBtn:hover — removed 2026-05-16.
   Button class changed from `.tfMint.border-mint` → `.tfGrey.border-tfGrey`
   on Mission & Values trio (bottom-right navy block). Hover is now provided
   by the global `.learnMoreBtn.tfGrey` / `:hover` rules below (paced 200px
   light-grey fill, text → navy). Old rule used 100vw + mint fill. */

/* Mission & Values: stop the missionFounded trio from overlapping the title
   section above. Overrides app.css `.translateUp { transform: translateY(-150px) }`
   which was pulling this block up by 150px to overlap the hero's bottom padding.
   Scoped via `.missionFounded__container` (only used on M&V — verified). */
.missionFounded__container.translateUp {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

/* Mission & Values: close the gap below the title section so the trio sits
   flush. Beats both .pb-150 (utility on the section, app.css:14097, 0,1,0)
   and the .hero-serivces desktop rule (app.css:18028, 0,1,0) on specificity
   (0,2,0) — and `!important` is required because both source rules use it.
   Mobile (≤767px) was already zeroed by app.css:18433 with the same selector;
   this unwrapped rule extends 0 to tablet (768–992) and desktop (≥993) too.
   Scoped to .missionvalues so other page heroes keep their 150px below. */
.hero-serivces.missionvalues {
  padding-bottom: 0 !important;
}

/* Mission & Values — Our Values: drop the desktop translateY(100px) that
   was pushing the block down. Overrides app.css:18516 `.ourvalues__container
   { transform: translateY(100px) }` — same specificity (0,1,0), wins by
   cascade order (custom.css loads after app.css). Mobile/tablet (≤992px)
   already nulls it at app.css:18523. Class is M&V-only — verified. */
.ourvalues__container {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

/* Mission & Values — Our Mission: tighten vertical margins. Was margin:180px 0
   (app.css:18532). `.ourmission` is M&V-only — verified. Keeps margin-bottom:0px
   from the original so the stats block below sits flush. */
.ourmission {
  margin: 80px 0;
  margin-bottom: 0px;
}

.join-us-benefits h3 {
  text-wrap: balance;
}

@media (max-width: 992px) {
  .speak .customer-say-btn-carousel {
    display: none;
  }
}

.speak .carousel-control-prev-icon,
.speak .carousel-control-next-icon {
  top: -130px !important;
}

.hero-serivces .tfBluecolor {
  width: 25em;
}

.missionvalues .hero-serivces__container {
  margin-bottom: 50px;
}

/* Case Studies listings + Get In Touch heroes: pin the centered title near
   the top of the band instead of vertically centering it. Scoped via the
   page-specific classes (added to the section in inc-case-listings.twig and
   inc-get-in-touch-article.twig respectively) so other shared
   `.get-in-touch.page-h-offset` heroes keep their original `top: 50%`. */
.case-listings-heading .centerElement,
.get-in-touch-heading .centerElement {
  top: 70px;
}

/* Tighten the shared `.get-in-touch` hero band — applies to both the
   Case Studies listings hero and the Get In Touch hero (same wrapper
   class). Was `height: 300px; padding-bottom: 100px` at app.css:18843. */
.get-in-touch {
  height: 275px;
  padding-bottom: 0;
}

/* #28 — shrink the shared .get-in-touch hero band to 125px below md (≤767.98) to close the large
   gap between the centred title and the content below (Case Studies listing — img #39). Applies to
   BOTH heroes sharing this wrapper (Case Studies listing + Get In Touch page) — same as the 275px
   rule above. Title (~48px, pinned top:70px) fits the 125px band. ≥768 keeps the 275px band. Beats
   the 275px base (same 0,1,0 specificity, later in source). */
@media only screen and (max-width: 767.98px) {
  .get-in-touch {
    height: 125px;
  }
}

.accredition .logo-item {
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 0;
}

.accredition .logo-item img {
  padding: 1.25em;
}

.accredition .logo-item a:hover {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.accredition p {
  font-size: 16px;
}

.accredition .accredition__cards {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  opacity: 1;
}

.logos:hover .logo-item a:not(:hover) {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  opacity: 0.5;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.wysiwyg--case-studies {
  color: #12293E;
}

.wysiwyg--case-studies p strong {
  margin-bottom: 0;
}

p {
  margin-bottom: 1em;
  margin-top: 0;
}

.speak .customer-say-btn-carousel,
.customer-saying .customer-say-btn-carousel,
.clientReviews .customer-say-btn-carousel {
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.speak:hover .customer-say-btn-carousel,
.customer-saying:hover .customer-say-btn-carousel,
.clientReviews:hover .customer-say-btn-carousel {
  opacity: 0.9;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

/* Carousel arrows are opacity:0 and only revealed on container :hover (above).
   Touch devices have no :hover, so the prev/next arrows never appear there (a
   sticky tap-hover is why they showed only after tapping a dot). Force them visible
   on phones + tablets (≤992px) OR on any touch device (hover:none + pointer:coarse).
   Desktop (≥993px) keeps the hover reveal. Covers every carousel —
   .speak/.customer-saying/.clientReviews share .customer-say-btn-carousel.
   2026-06-02 client request (extended to tablets/MD same day). (.speak arrows still
   hidden ≤992 by their own display:none ~line 252 — that carousel's mobile/tablet
   nav is intentional.) */
@media only screen and (max-width: 992px),
       (hover: none) and (pointer: coarse) {
  .speak .customer-say-btn-carousel,
  .customer-saying .customer-say-btn-carousel,
  .clientReviews .customer-say-btn-carousel {
    opacity: 0.9;
  }
}

.case-study .d-block {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.case-study .d-block:hover .line img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

.case-study .d-block:hover:after {
  background-color: #EDFF1C;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.case-study .line {
  overflow: hidden;
}

.case-study img {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.safetySolutions .coloredCards__div p {
  text-wrap: balance;
}

.safetySolutions .wrapper {
  position: relative;
  top: 0%;
}

@media (min-width: 768px) and (max-width: 992px) {
  .safetySolutions .wrapper {
    top: calc(100% - 60px);
  }
}

.serviceWord {
  display: inline;
}

.swiper button {
  height: 50px;
  width: 50px;
}

.swiper button .chevron {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='35' viewBox='0 0 20 35' fill='red' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 31L17 17.5L4 4' stroke='%2312293E' stroke-width='5.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  fill: red;
  background-color: red;
}

.swiper-button-next--custom, .swiper-button-prev--custom {
  display: block;
  opacity: 0.5;
  -ms-flex-line-pack: end;
      align-content: flex-end;
}

@media (min-width: 993px) {
  .swiper-button-next--custom, .swiper-button-prev--custom {
    display: none;
  }
}

.swiper-button-next--custom:hover, .swiper-button-prev--custom:hover {
  opacity: 1;
}

.slide-box {
  height: 250px;
  background-color: #f8d7da;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* align-items: self-start; */
  /* justify-content: center; */
  /* font-size: 1.5rem;
    box-sizing: border-box; */
}

.chevron {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='35' viewBox='0 0 20 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 31L17 17.5L4 4' stroke='%2312293E' stroke-width='5.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  /* #21 — carousel arrows smaller/lighter on mobile (40→24px). Arrows only render
     ≤992px (display:none ≥993), so this is effectively mobile/tablet-only. Box shrink
     also thins the rendered SVG stroke; drop stroke-width 5.5→~3 above if lighter still. */
  height: 24px;
  width: 24px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

.chevron.r180 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.header__navLinks {
  text-transform: capitalize;
}

.contact-button {
  text-transform: capitalize;
}

.types-services .mintgreen, .types-services .yellow, .types-services .blue, .types-services .navy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.types-services .learnMoreBtn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.buildExpert__heading h2 {
  display: inline;
  background-color: #fff;
}

.wysiwyg--case-studies ul {
  list-style: disc;
}

.wysiwyg--case-studies li {
  display: list-item;
  width: 75ch;
  margin-bottom: 0.5rem;
}

.missionFounded__leftside--p {
  text-wrap: balance;
}

.Helping-Local .Helping-Local__secondPart .navy div h3 {
  width: 10ch;
}

/* Home Case Studies: the `.case-study.home { transform: translateY(-50px) }` upward shift
   (formerly @≤1199, with a phone override to `none`) is REMOVED (2026-06-02, user request) —
   the section now sits in normal flow at all widths. app.css has no `.case-study.home`
   transform, so removing it here is sufficient (the phone `transform:none` override became
   redundant once the -50px was gone). */

.txt-balance {
  text-wrap: balance;
}

.txt-fit-content {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.hp-test-block .carousel-caption {
  height: auto;
}

.hp-test-block .no-of-projects {
  margin: 0;
}

.hp-test-block .customer-saying {
  padding-bottom: 100px !important;
}

@media (max-width: 480px) {
  .hp-test-block .customer-saying__qoute {
    display: none;
  }
  .hp-test-block .customer-saying {
    padding-bottom: 0 !important;
  }
  .hp-test-block .no-of-projects .container {
    padding: 0 !important;
  }
}

@media (min-width: 499px) {
  .hp-test-block .custom-transform.no-of-projects {
    margin-top: -100px;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
  }
  .hp-test-block .carousel-caption {
    height: 12em;
  }
}

/* ===================================================
   Job 100987 — Colour Changes
   =================================================== */

/* Utility: TFJ Grey 1px border (#E4E8EA) — paired with .tfGrey foreground class */
.border-tfGrey {
  border: 1px solid #E4E8EA;
}

/* =====================================================================
   Button hover-fill animation
   ---------------------------------------------------------------------
   Pattern isolated from .team-contact .contact-button (app.css:18009).
   The inset box-shadow grows from 0 → 200px on hover, painting the
   button bg with the fill colour while the text colour inverts. The
   button keeps its border throughout — it "fills in" with the same
   colour as the border so the edge appears to dissolve into the fill.

   IMPORTANT: target spread is 200px (≈ button width), NOT 100vw.
   With 100vw the shadow hits the button edge in ~12% of .25s, so the
   visible wipe is too quick. 200px paces the wipe across the full .25s.

   To apply to any button:
     1. Give it a 1px border in the fill colour
     2. Initial state: box-shadow: inset 0 0 0 0 <fill>; transition: .25s;
     3. Hover state:   box-shadow: inset 200px 0 0 0 <fill>; color: <invert>;
   The .25s transition is inherited from the base .learnMoreBtn rule.
   ===================================================================== */

/* Hero "Learn More" — fill light grey, text → navy on hover */
.learnMoreBtn.tfGrey {
  -webkit-box-shadow: inset 0 0 0 0 #E4E8EA;
          box-shadow: inset 0 0 0 0 #E4E8EA;
}

.learnMoreBtn.tfGrey:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #E4E8EA;
          box-shadow: inset 200px 0 0 0 #E4E8EA;
  color: #12293E !important;
}

/* Home: Helping Local trio — navy block: mint → light grey */
.Helping-Local__secondPart .navy {
  color: #E4E8EA;
}
.Helping-Local__secondPart .navy .line {
  background-color: #E4E8EA;
}
.Helping-Local__secondPart .navy .learnMoreBtn {
  border-color: #E4E8EA;
}
.Helping-Local__secondPart .navy h3,
.Helping-Local__secondPart .navy p {
  color: #E4E8EA !important;
}

/* Home: testimonial — bg mint → light grey, dots white (active stays yellow), quote marks updated */
.customer-saying {
  background-color: #E4E8EA;
}
.customer-saying div.carousel .carousel-indicators button:not(.active),
.clientReviews div.carousel .carousel-indicators button:not(.active) {
  background-color: #fff !important;
}
.customer-saying__qoute {
  filter: brightness(0) invert(1);
}

/* Home: stats trio — all → yellow */
.no-of-projects__container .th-white,
.no-of-projects__container .th-min-green {
  color: #EDFF1C;
}

/* ---------------------------------------------------------------------
   Our Services — quad blocks: .navy mint content → light grey,
   .mintgreen mint bg → light grey. Plus hover-fill rewrite (paced 200px
   + explicit initial state) replacing the old 100vw rules above.
   --------------------------------------------------------------------- */

/* .navy block (bottom-left) — content / line / bullets / btn-border: mint → light grey */
.types-services__container .navy {
  color: #E4E8EA;
}
.types-services__container .navy .line {
  background-color: #E4E8EA;
}
.types-services__container .navy li:after {
  background-color: #E4E8EA !important;
}
.types-services__container .navy .learnMoreBtn {
  border-color: #E4E8EA;
}

/* .mintgreen block (bottom-right) — bg: mint → light grey (text/line/border stay navy) */
.types-services__container .mintgreen {
  background-color: #E4E8EA;
}

/* Hover-fill — each variant: initial 0px shadow in fill colour, hover 200px paced over .25s */

.types-services .blue .learnMoreBtn {
  -webkit-box-shadow: inset 0 0 0 0 #fff;
          box-shadow: inset 0 0 0 0 #fff;
}
.types-services .blue .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #fff;
          box-shadow: inset 200px 0 0 0 #fff;
  color: #12293E !important;
}

.types-services .yellow .learnMoreBtn {
  -webkit-box-shadow: inset 0 0 0 0 #12293E;
          box-shadow: inset 0 0 0 0 #12293E;
}
.types-services .yellow .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #12293E;
          box-shadow: inset 200px 0 0 0 #12293E;
  color: #EDFF1C !important;
}

.types-services .navy .learnMoreBtn {
  -webkit-box-shadow: inset 0 0 0 0 #E4E8EA;
          box-shadow: inset 0 0 0 0 #E4E8EA;
}
.types-services .navy .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #E4E8EA;
          box-shadow: inset 200px 0 0 0 #E4E8EA;
  color: #12293E !important;
}

.types-services .mintgreen .learnMoreBtn {
  -webkit-box-shadow: inset 0 0 0 0 #12293E;
          box-shadow: inset 0 0 0 0 #12293E;
}
.types-services .mintgreen .learnMoreBtn:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #12293E;
          box-shadow: inset 200px 0 0 0 #12293E;
  color: #E4E8EA !important;
}

/* Banner buttons (CMS-injected via banners[1]/banners[2]):
   .help-community "Learn More" + "Get In Touch" and .buildExpert__container "Get In Touch".
   Pattern: navy border on white bg → navy fill on hover, text → white, 200px paced. */
.help-community .learnMoreBtn.border-navy,
.buildExpert__container .learnMoreBtn.border-navy {
  -webkit-box-shadow: inset 0 0 0 0 #12293E;
          box-shadow: inset 0 0 0 0 #12293E;
}
.help-community .learnMoreBtn.border-navy:hover,
.buildExpert__container .learnMoreBtn.border-navy:hover {
  -webkit-box-shadow: inset 200px 0 0 0 #12293E;
          box-shadow: inset 200px 0 0 0 #12293E;
  color: #fff !important;
}

/* =====================================================================
   Join Us — colour swap (Job 100987 §§1, 2, 5, 6)
   ===================================================================== */

/* §1 — top section mint edge → brand yellow */
.join-us-heading .hero-serivces__container--title {
  border-top-color: #EDFF1C;
}

/* §2 — Discover TF Jones: ensure all text inside the (now-grey) section reads navy.
   bg-tfBlue → bg-tf-grey is a twig class swap; text-white classes removed from
   the h2/h3/p directly (couldn't override .text-white !important from Bootstrap).
   .size-18-reg-white (no !important) handled by the explicit override below.
   .join-us-discover--list h3:after — small horizontal accent above each
   sub-heading was white to sit on the old blue bg (app.css:18754); now navy
   to match the new grey bg. */
.join-us-discover {
  color: #1E4264;
}
.join-us-discover .size-18-reg-white {
  color: #1E4264;
}
.join-us-discover--list h3:after,
.join-us-discover--list .h3:after {
  background-color: #1E4264;
}

/* §5 — Quote carousel: active dot yellow. Inactive-white covered by the
   extended .customer-saying selector above. */
.clientReviews div.carousel .carousel-indicators button.active {
  background-color: #EDFF1C !important;
}

/* §6 — Perks icons: recolour embedded SVG mint fill (%23B0F0C7) → brand
   yellow (%23EDFF1C). Mirrors each rule from app.css:18807–18841; navy
   strokes (%2312293E / %231E4264) and clip masks (%23fff) untouched. */
.join-us-benefits__items--icon.tree {
  background-image: url("data:image/svg+xml,%3Csvg width='71' height='87' viewBox='0 0 71 87' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5305 28.9456C28.5305 28.9456 22.4493 17.5697 10.0344 15.7689C10.0344 15.7689 26.2912 11.4096 33.7446 24.213C33.7446 24.213 36.6205 15.5932 29.9136 1C29.9136 1 47.6524 9.13662 39.0245 29.879C39.0245 29.879 54.996 15.9885 70.4625 29.5495C70.4625 29.5495 57.2243 25.6075 50.3747 33.8649C50.3747 33.8649 61.9553 38.1144 62.2407 53.7508C62.2407 53.7508 52.5591 41.9027 44.7325 41.1999C44.7325 41.1999 51.4833 52.3782 40.2539 64.951C40.2539 64.951 43.9531 39.8164 33.8653 38.4658C33.8653 38.4658 25.446 29.5166 5.41309 39.3882C5.41309 39.3882 14.1617 25.4318 28.5525 28.9456H28.5305Z' fill='%23EDFF1C'/%3E%3Cpath d='M8.95801 85.9127C8.95801 85.9127 9.59467 43.9449 32.8219 34.3149C32.8219 34.3149 14.3477 52.3451 20.89 85.9127' stroke='%231E4264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.9429 35.5338C22.9429 35.5338 14.4797 32.7118 1 39.388C1 39.388 12.2953 21.0284 30.7695 31.6906' stroke='%231E4264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32.1746 30.5266C32.1746 30.5266 27.6851 10.8933 5.10547 15.7687C5.10547 15.7687 10.7037 15.2416 19.3426 22.7633' stroke='%231E4264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.8696 16.5373C29.8696 16.5373 29.3537 9.34501 25.5117 1.01074C25.5117 1.01074 43.0858 9.35599 34.6226 29.8897C34.6226 29.8897 50.2757 15.6479 66.4448 29.8897C66.4448 29.8897 56.1813 27.1995 50.0232 30.5266' stroke='%231E4264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M36.1592 32.4591C36.1592 32.4591 56.6861 30.5375 57.8387 54.4093C57.8387 54.4093 50.0121 44.8781 45.9726 43.4177' stroke='%231E4264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M36.1596 34.897C36.1596 34.897 50.6602 49.6659 35.3913 65.445C35.3913 65.445 38.7283 46.5364 33.8545 42.8579' stroke='%231E4264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.rfr-friend {
  background-image: url("data:image/svg+xml,%3Csvg width='71' height='41' viewBox='0 0 71 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1393)'%3E%3Cpath d='M50.5535 6.85996L59.0182 26.2006C59.3699 27.0085 60.3078 27.353 61.0933 26.9728L70.1207 22.601C70.871 22.2327 71.1993 21.3298 70.871 20.5576L62.5471 1.39516C62.2071 0.599197 61.2809 0.242797 60.4954 0.599197L51.3273 4.80472C50.5535 5.16112 50.2135 6.07588 50.5535 6.85996Z' fill='%23EDFF1C'/%3E%3Cpath d='M6.26097 4.07986L0.0707438 24.2878C-0.187182 25.1312 0.293498 26.0222 1.1259 26.2598L10.763 28.9922C11.5602 29.218 12.4043 28.7665 12.6505 27.9587L18.8407 7.96462C19.0986 7.13302 18.6414 6.2539 17.809 6.00442L8.18369 3.0463C7.37474 2.79682 6.51889 3.26014 6.26097 4.07986Z' fill='%23EDFF1C'/%3E%3Cpath d='M11.1731 1.88204L20.5874 4.67384C21.2908 4.8758 21.6894 5.61236 21.5018 6.32516L15.933 26.9726C15.7337 27.6973 14.9951 28.125 14.2682 27.9111L4.38492 25.0124C3.66976 24.7986 3.25942 24.0501 3.47045 23.3255L9.51999 2.7968C9.73102 2.084 10.4696 1.68007 11.1731 1.88204Z' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M59.4167 2.74948L49.9907 6.99064C49.3224 7.29952 49.0176 8.09548 49.3107 8.77264L57.9747 28.6004C58.2795 29.3013 59.0884 29.5983 59.7684 29.2775L69.0772 24.8107C69.7338 24.5018 70.0151 23.7058 69.722 23.0405L61.1753 3.43852C60.8822 2.74948 60.085 2.4406 59.4167 2.74948Z' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5186 24.8342L32.2989 37.831C33.1196 38.5081 34.1396 38.9002 35.1947 38.9002C36.3437 38.9002 37.8209 38.6744 39.0167 37.6765' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M35.5117 34.1363L40.4592 39.1497C41.3854 40.0882 42.8743 40.1119 43.8357 39.2209C44.8557 38.2705 44.8908 36.6549 43.9178 35.6688L37.8331 29.4556' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21.1973 7.4658C21.1973 7.4658 31.5026 7.53708 35.5122 7.18068C39.5217 6.82428 46.4506 8.53501 50.0381 10.412' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30.1771 7.40625L27.4688 14.9857C27.0585 16.1499 27.2461 17.5043 28.1371 18.3477C29.4619 19.607 31.3143 18.9061 34.257 16.7796C34.257 16.7796 38.5362 13.1562 42.6161 16.7796C45.465 19.3219 50.6236 25.2381 53.449 28.5646C54.5745 29.8832 54.4573 31.8672 53.1794 33.0314C51.9132 34.1957 49.9436 34.1244 48.7595 32.877L41.4789 25.155' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M53.7656 28.9449C53.7656 28.9449 56.6732 27.3292 57.1069 26.6045' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M43.9062 35.6569L44.938 36.5836C45.9814 37.6409 47.6696 37.6171 48.7013 36.5479C49.6861 35.5144 49.6861 33.8749 48.7013 32.8295L47.3648 31.3801' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1393'%3E%3Crect width='71' height='40' fill='white' transform='translate(0 0.456543)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.social-evnts {
  background-image: url("data:image/svg+xml,%3Csvg width='53' height='50' viewBox='0 0 53 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1429)'%3E%3Cpath d='M0 11.8879H45.5295V8.78913C45.5295 5.22885 42.6643 2.32788 39.1187 2.32788H6.41076C2.86522 2.32788 0 5.21566 0 8.78913V11.8879Z' fill='%23EDFF1C'/%3E%3Cpath d='M42.4546 4.49048H9.48501C6.0167 4.49048 3.20508 7.32424 3.20508 10.8199V38.7615C3.20508 42.2571 6.0167 45.0909 9.48501 45.0909H42.4546C45.923 45.0909 48.7346 42.2571 48.7346 38.7615V10.8199C48.7346 7.32424 45.923 4.49048 42.4546 4.49048Z' stroke='%2312293E' stroke-width='1.05' stroke-miterlimit='10'/%3E%3Cpath d='M8.28125 45.1039C8.28125 47.4115 10.1391 49.2839 12.4286 49.2839H45.7777C49.3886 49.2839 52.3193 46.3302 52.3193 42.6908V13.8262C52.3193 11.7823 50.6839 10.134 48.656 10.134' stroke='%2312293E' stroke-width='1.05' stroke-miterlimit='10'/%3E%3Cpath d='M3.20508 14.0505H48.7346' stroke='%2312293E' stroke-width='1.05' stroke-miterlimit='10'/%3E%3Cpath d='M12.8086 1.61597V7.10143' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.9697 1.61597V7.10143' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M39.3936 1.61597V7.10143' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.5968 33.5661C24.7931 33.5661 24.9631 33.6321 25.1071 33.7771C25.251 33.9222 25.3164 34.0936 25.3164 34.2914C25.3164 34.4892 25.251 34.6606 25.1071 34.7924C24.9631 34.9243 24.7931 34.9902 24.5968 34.9902H17.7543C17.545 34.9902 17.3618 34.9243 17.2179 34.7924C17.074 34.6606 16.9955 34.476 16.9955 34.2518C16.9955 34.054 17.0609 33.8694 17.2048 33.698L21.483 29.0037C22.0848 28.3444 22.5558 27.7246 22.8829 27.1576C23.21 26.5774 23.367 26.0236 23.367 25.483C23.367 24.9819 23.2623 24.5336 23.053 24.1512C22.8437 23.7688 22.5297 23.4787 22.1372 23.2545C21.7447 23.0435 21.2737 22.938 20.7504 22.938C20.2663 22.938 19.7822 23.0699 19.3243 23.3468C18.8664 23.6237 18.5 24.0325 18.2384 24.5863C18.1468 24.7182 18.0552 24.8105 17.9506 24.8764C17.8459 24.9423 17.7281 24.9687 17.6235 24.9687C17.4403 24.9687 17.2571 24.9028 17.1001 24.7577C16.9431 24.6127 16.8516 24.4544 16.8516 24.283C16.8516 24.138 16.8908 24.0061 16.9693 23.8874C17.0478 23.7556 17.1525 23.6237 17.2833 23.4918C17.6758 22.8589 18.1991 22.371 18.8402 22.0282C19.4944 21.6853 20.1616 21.5139 20.8419 21.5139C21.7054 21.5139 22.4381 21.6853 23.0399 22.015C23.6417 22.3446 24.1127 22.8062 24.4398 23.3864C24.7669 23.9666 24.9239 24.6391 24.9239 25.4039C24.9239 25.8786 24.8323 26.3796 24.6622 26.8807C24.4921 27.3818 24.2305 27.896 23.8772 28.4235C23.5371 28.9509 23.0922 29.5048 22.5427 30.0981L19.2458 33.7639L19.0626 33.5793H24.5837L24.5968 33.5661Z' fill='%2312293E'/%3E%3Cpath d='M31.7406 35.1748C30.694 35.1748 29.8305 34.8716 29.124 34.2782C28.4175 33.6848 27.8942 32.8673 27.5409 31.8387C27.1877 30.8102 27.0176 29.6366 27.0176 28.3312C27.0176 27.0258 27.1877 25.839 27.5409 24.8237C27.8942 23.7951 28.4175 22.9908 29.124 22.3974C29.8305 21.804 30.694 21.5007 31.7406 21.5007C32.7873 21.5007 33.6508 21.804 34.3442 22.3974C35.0376 22.9908 35.5609 23.8083 35.9141 24.8237C36.2674 25.8522 36.4375 27.0258 36.4375 28.3312C36.4375 29.6366 36.2674 30.797 35.9141 31.8387C35.5609 32.8673 35.0376 33.6848 34.3442 34.2782C33.6508 34.8716 32.7742 35.1748 31.7406 35.1748ZM31.7406 33.6321C32.3948 33.6321 32.9443 33.4211 33.4022 32.9859C33.8601 32.5508 34.2133 31.9442 34.4619 31.153C34.7105 30.3619 34.8282 29.4257 34.8282 28.3312C34.8282 27.2367 34.7105 26.2873 34.4619 25.4962C34.2133 24.705 33.8601 24.0984 33.4022 23.6765C32.9443 23.2545 32.3817 23.0435 31.7406 23.0435C31.0995 23.0435 30.5108 23.2545 30.0529 23.6765C29.595 24.0984 29.2417 24.705 28.9931 25.4962C28.7446 26.2873 28.6268 27.2367 28.6268 28.3312C28.6268 29.4257 28.7446 30.3619 28.9931 31.153C29.2417 31.9442 29.595 32.5508 30.0529 32.9859C30.5108 33.4211 31.0734 33.6321 31.7406 33.6321Z' fill='%2312293E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1429'%3E%3Crect width='53' height='49' fill='white' transform='translate(0 0.956543)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.employee-assist {
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='53' viewBox='0 0 52 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1371)'%3E%3Cpath d='M12.9019 37.1066H10.7647C8.07689 37.1066 5.90039 34.9339 5.90039 32.2508V10.9691C5.90039 8.57398 7.64421 6.54528 10.0043 6.17881L46.3754 0.433026C49.3255 -0.038155 52.0002 2.23922 52.0002 5.22336V32.2508C52.0002 34.9339 49.8237 37.1066 47.1359 37.1066H25.7642L15.0522 47.682V37.1066H12.9019Z' fill='%23EDFF1C'/%3E%3Cpath d='M7.65679 41.1378H5.51962C2.83177 41.1378 0.655273 38.9652 0.655273 36.282V15.0004C0.655273 12.6052 2.3991 10.5765 4.75916 10.2101L41.1303 4.46428C44.0804 3.9931 46.7551 6.27047 46.7551 9.25461V36.282C46.7551 38.9652 44.5786 41.1378 41.8908 41.1378H20.5191L9.80706 51.7132V41.1378H7.65679Z' stroke='%231E4264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4265 26.78C14.1868 26.78 14.8032 26.1648 14.8032 25.4058C14.8032 24.6468 14.1868 24.0315 13.4265 24.0315C12.6662 24.0315 12.0498 24.6468 12.0498 25.4058C12.0498 26.1648 12.6662 26.78 13.4265 26.78Z' fill='%231E4264'/%3E%3Cpath d='M23.2331 26.78C23.9935 26.78 24.6098 26.1648 24.6098 25.4058C24.6098 24.6468 23.9935 24.0315 23.2331 24.0315C22.4728 24.0315 21.8564 24.6468 21.8564 25.4058C21.8564 26.1648 22.4728 26.78 23.2331 26.78Z' fill='%231E4264'/%3E%3Cpath d='M33.0798 26.78C33.8402 26.78 34.4565 26.1648 34.4565 25.4058C34.4565 24.6468 33.8402 24.0315 33.0798 24.0315C32.3195 24.0315 31.7031 24.6468 31.7031 25.4058C31.7031 26.1648 32.3195 26.78 33.0798 26.78Z' fill='%231E4264'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1371'%3E%3Crect width='52' height='52' fill='white' transform='translate(0 0.367676)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.bonus-scheme {
  background-image: url("data:image/svg+xml,%3Csvg width='61' height='55' viewBox='0 0 61 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1407)'%3E%3Cpath d='M32.628 4.83963L25.9385 19.2105C25.7042 19.7247 25.1966 20.0717 24.624 20.1231L8.48574 21.5499C7.10618 21.6785 6.52052 23.3624 7.53567 24.2879L19.34 35.0853C19.7435 35.4581 19.9257 35.9979 19.8216 36.5378L16.8152 52.4769C16.5679 53.8137 18.0125 54.8163 19.1969 54.135L33.2267 46.1012C33.7213 45.8185 34.346 45.8185 34.8406 46.1012L48.7533 54.1222C49.9376 54.8035 51.3823 53.8008 51.135 52.4769L48.1806 36.5249C48.0765 35.9979 48.2717 35.4452 48.6622 35.0853L60.4535 24.2622C61.4817 23.3238 60.87 21.6271 59.4774 21.5242L44.0289 20.4188C43.4563 20.3802 42.9487 20.0332 42.7014 19.5318L35.5043 4.80107C34.9186 3.59278 33.1747 3.60564 32.602 4.82678L32.628 4.83963Z' fill='%23EDFF1C'/%3E%3Cpath d='M26.2511 1.93469L19.5615 16.3056C19.3273 16.8197 18.8197 17.1668 18.247 17.2182L2.10879 18.645C0.729227 18.7735 0.143565 20.4574 1.15871 21.3829L12.9631 32.1803C13.3665 32.5531 13.5487 33.093 13.4446 33.6329L10.4382 49.5719C10.1909 50.9087 11.6356 51.9114 12.8199 51.2301L26.8498 43.1963C27.3443 42.9135 27.969 42.9135 28.4636 43.1963L42.3763 51.2172C43.5607 51.8985 45.0053 50.8959 44.758 49.5719L41.8037 33.62C41.6996 33.093 41.8948 32.5403 42.2852 32.1803L54.0766 21.3572C55.1047 20.4189 54.493 18.7221 53.1005 18.6193L37.652 17.5138C37.0793 17.4753 36.5718 17.1282 36.3245 16.6269L29.1404 1.90898C28.5547 0.700695 26.8107 0.713549 26.2381 1.93469H26.2511Z' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1407'%3E%3Crect width='61' height='54' fill='white' transform='translate(0 0.366455)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.dev-opp {
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='55' viewBox='0 0 54 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1445)'%3E%3Cpath d='M18.4498 0.701579C14.2771 2.82385 14.765 6.78294 14.765 6.78294C12.1587 5.15711 6.24006 4.26352 5.13592 10.3449C4.78927 12.2562 5.12308 13.671 5.76502 14.7259L5.46973 15.0114C5.46973 15.0114 0.642338 14.9245 0.0517531 18.9332C-0.371927 21.7754 1.50254 23.3764 3.35132 24.1583C-1.16793 27.9808 3.68513 31.8158 3.68513 31.8158C1.92622 35.2785 2.87629 39.6099 6.25289 42.0176L6.83064 42.4272C8.19155 43.3952 10.6438 43.9661 12.377 44.0406L12.2743 43.1594C12.3256 44.4998 12.9034 45.927 14.5082 47.2302C20.6067 52.1697 28.3741 44.0033 28.3741 44.0033V7.09321C28.3741 7.09321 22.6095 -1.42069 18.4498 0.701579Z' fill='%23EDFF1C'/%3E%3Cpath d='M12.4025 44.0653C12.2613 44.0653 12.1072 44.0405 11.9531 44.0281V44.0653H12.4025Z' fill='%23EDFF1C'/%3E%3Cpath d='M38.8245 42.4768C38.8245 42.4768 43.8702 47.8755 38.8245 51.9711C32.7261 56.9107 28.3994 50.0102 28.3994 50.0102V7.94954C28.3994 7.94954 30.7361 3.28302 34.9087 5.41771C39.0813 7.55239 38.5934 11.4991 38.5934 11.4991' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M35.5254 34.4593L37.464 33.2554C40.969 31.0711 45.6038 31.6916 48.377 34.7075C51.7023 38.3067 51.0989 43.8916 47.0803 46.7585L46.5026 47.1681C45.0261 48.223 42.7793 48.7815 40.9562 48.7815H41.4184' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M47.876 19.7274C47.876 19.7274 52.7034 19.6406 53.2939 23.6493C53.8845 27.658 49.9045 29.2094 47.876 29.4576' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49.6602 36.5443C49.6602 36.5443 54.5132 32.7217 49.994 28.8867' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M41.7906 22.5075C41.7906 22.5075 49.4939 22.0979 48.2229 15.0609C46.9518 8.0239 39.2485 10.3199 37.6437 12.2809C36.0388 14.2418 34.511 15.0609 32.7393 14.8996' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.3994 19.4917C28.3994 19.4917 29.5035 25.8585 35.2938 24.605' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.3994 35.564C28.3994 35.564 29.2211 39.8333 32.7261 39.1135' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.9749 42.4768C17.9749 42.4768 12.9293 47.8755 17.9749 51.9711C24.0734 56.9107 28.4 50.0102 28.4 50.0102V7.94954C28.4 7.94954 26.0634 3.28302 21.8908 5.41771C17.7182 7.55239 18.206 11.4991 18.206 11.4991' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21.2746 34.4593L19.336 33.2554C15.831 31.0711 11.1962 31.6916 8.423 34.7075C5.09775 38.3067 5.70118 43.8916 9.71972 46.7585L10.2975 47.1681C11.7739 48.223 14.0207 48.7815 15.8438 48.7815H15.3816' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.92339 19.7274C8.92339 19.7274 4.096 19.6406 3.50542 23.6493C2.91483 27.658 6.89486 29.2094 8.92339 29.4576' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.15191 36.5443C7.15191 36.5443 2.29884 32.7217 6.8181 28.8867' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.0221 22.5075C15.0221 22.5075 7.31881 22.0979 8.58985 15.0609C9.8609 8.0239 17.5642 10.3199 19.169 12.2809C20.7739 14.2418 22.3017 15.0609 24.0735 14.8996' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.4003 19.4917C28.4003 19.4917 27.2962 25.8585 21.5059 24.605' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28.3999 35.564C28.3999 35.564 27.5782 39.8333 24.0732 39.1135' stroke='%2312293E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1445'%3E%3Crect width='54' height='54' fill='white' transform='translate(0 0.366455)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.comp-veh {
  background-image: url("data:image/svg+xml,%3Csvg width='64' height='39' viewBox='0 0 64 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1381)'%3E%3Cpath d='M33.4678 18.8706H47.4374C47.4374 18.8706 45.9982 10.7269 39.7958 8.4903C38.8249 8.1462 37.7969 8.04297 36.7689 8.04297H33.4678V18.8706Z' fill='%23EDFF1C'/%3E%3Cpath d='M12.976 38.2777C15.8779 38.2777 18.2303 35.9155 18.2303 33.0015C18.2303 30.0876 15.8779 27.7253 12.976 27.7253C10.0741 27.7253 7.72168 30.0876 7.72168 33.0015C7.72168 35.9155 10.0741 38.2777 12.976 38.2777Z' fill='%23EDFF1C'/%3E%3Cpath d='M47.4379 38.2777C50.3398 38.2777 52.6923 35.9155 52.6923 33.0015C52.6923 30.0876 50.3398 27.7253 47.4379 27.7253C44.536 27.7253 42.1836 30.0876 42.1836 33.0015C42.1836 35.9155 44.536 38.2777 47.4379 38.2777Z' fill='%23EDFF1C'/%3E%3Cpath d='M54.7708 30.5815H57.832C60.9275 30.5815 63.429 28.0695 63.429 24.9612V22.8507C63.429 20.052 62.0127 17.4828 59.7053 15.9114C57.7635 14.5923 55.1363 12.4819 52.018 9.15557C45.0732 1.75745 42.4003 1.00043 37.283 0.897198C32.1658 0.793969 25.0153 0.897198 25.0153 0.897198H5.51721C2.78724 0.897198 0.571289 3.12237 0.571289 5.87516V25.615C0.571289 28.3563 2.78724 30.5815 5.51721 30.5815H10.0633' stroke='%2312293E' stroke-miterlimit='10'/%3E%3Cpath d='M20.3096 30.5815H44.5252' stroke='%2312293E' stroke-miterlimit='10'/%3E%3Cpath d='M15.1915 35.72C18.0177 35.72 20.3087 33.4194 20.3087 30.5814C20.3087 27.7435 18.0177 25.4429 15.1915 25.4429C12.3653 25.4429 10.0742 27.7435 10.0742 30.5814C10.0742 33.4194 12.3653 35.72 15.1915 35.72Z' stroke='%2312293E' stroke-miterlimit='10'/%3E%3Cpath d='M49.6417 35.72C52.4679 35.72 54.7589 33.4194 54.7589 30.5814C54.7589 27.7435 52.4679 25.4429 49.6417 25.4429C46.8155 25.4429 44.5244 27.7435 44.5244 30.5814C44.5244 33.4194 46.8155 35.72 49.6417 35.72Z' stroke='%2312293E' stroke-miterlimit='10'/%3E%3Cpath d='M36.5407 15.2806H48.8541C48.8541 15.2806 47.5862 8.65097 42.1149 6.83872C41.2582 6.55197 40.3444 6.47168 39.442 6.47168H36.5293V15.2806H36.5407Z' stroke='%2312293E' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1381'%3E%3Crect width='64' height='38' fill='white' transform='translate(0 0.277832)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.enhance-family {
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1413)'%3E%3Cpath d='M31.9755 26.9519C37.194 23.6769 41.9447 18.9545 44.7878 14.6124C46.8801 11.4111 46.1786 7.13028 43.237 4.66484C40.6278 2.46926 36.8863 2.26074 34.0432 4.13741L31.7047 5.92822L28.997 4.13741C26.154 2.26074 22.4124 2.46926 19.8032 4.66484C16.8493 7.14254 16.1724 11.4479 18.2893 14.6738C20.8986 18.6479 25.2432 22.99 29.9693 26.1914L31.0647 26.9273C31.3355 27.1113 31.6924 27.1236 31.9755 26.9519Z' fill='%23EDFF1C'/%3E%3Cpath d='M22.3382 39.6471C21.169 37.9667 19.569 36.5929 17.6982 35.6975' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M7.31084 35.6975C3.29853 37.6232 0.529297 41.72 0.529297 46.4546V55.2493H24.4801' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M12.5043 37.4392C16.8478 37.4392 20.3689 33.93 20.3689 29.6013C20.3689 25.2726 16.8478 21.7634 12.5043 21.7634C8.16076 21.7634 4.63965 25.2726 4.63965 29.6013C4.63965 33.93 8.16076 37.4392 12.5043 37.4392Z' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M31.5195 55.2493H55.4703V46.4546C55.4703 41.72 52.7011 37.6232 48.6888 35.6975' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M38.3009 35.6975C36.4794 36.5684 34.9163 37.8931 33.7471 39.5122' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M43.4828 37.4392C47.8263 37.4392 51.3474 33.93 51.3474 29.6013C51.3474 25.2726 47.8263 21.7634 43.4828 21.7634C39.1393 21.7634 35.6182 25.2726 35.6182 29.6013C35.6182 33.93 39.1393 37.4392 43.4828 37.4392Z' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M23.0893 45.9639C19.6186 47.1659 17.1201 50.4654 17.1201 54.3292V55.2491H38.6709V54.3292C38.6709 50.4654 36.1847 47.1659 32.714 45.9639' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M27.9017 48.0369C31.3208 48.0369 34.0925 45.2747 34.0925 41.8672C34.0925 38.4598 31.3208 35.6975 27.9017 35.6975C24.4826 35.6975 21.7109 38.4598 21.7109 41.8672C21.7109 45.2747 24.4826 48.0369 27.9017 48.0369Z' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3Cpath d='M28.1728 25.3942C33.3912 22.1193 38.142 17.3969 40.9851 13.0548C43.0774 9.85344 42.3758 5.57266 39.4343 3.10723C36.8251 0.911643 33.0835 0.703123 30.2405 2.5798L27.902 4.37061L25.1943 2.5798C22.3512 0.703123 18.6097 0.923908 16.0005 3.10723C13.0466 5.58493 12.3697 9.89023 14.4866 13.1161C17.0958 17.0903 21.4405 21.4324 26.1666 24.6338L27.262 25.3697C27.5328 25.5537 27.8897 25.566 28.1728 25.3942Z' stroke='%2312293E' stroke-width='0.87' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1413'%3E%3Crect width='56' height='55' fill='white' transform='translate(0 0.776611)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.join-us-benefits__items--icon.interest-free {
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='63' viewBox='0 0 48 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_116_1469)'%3E%3Cpath d='M20.013 0.869172C19.2584 0.732407 18.5602 1.35925 18.594 2.14564C18.684 4.73277 19.54 10.2034 25.3288 9.97542C31.1176 9.74748 32.0074 4.53903 32.12 2.08866C32.1538 1.40483 31.5794 0.846378 30.9037 0.903363C29.3945 1.01733 28.3246 1.27947 25.6892 1.88351C23.8985 2.2938 22.0064 1.24527 20.013 0.880569V0.869172Z' fill='%23EDFF1C'/%3E%3Cpath d='M27.9642 11.0013L23.6057 10.1123C29.0904 10.4428 38.5733 35.5733 31.8384 48.7027C25.1036 61.8322 11.2734 56.8402 11.2734 56.8402C11.2734 56.8402 18.7178 64.2597 32.1876 61.7752C40.1613 60.3049 47.4255 54.3671 47.9435 46.184C47.9661 45.7623 47.9886 45.3406 47.9999 44.9075C48.1463 39.5053 46.0177 31.5502 43.6301 26.7178C40.7357 20.8825 35.1045 12.4715 27.9642 11.0013Z' fill='%23EDFF1C'/%3E%3Cpath d='M17.2318 0.869172C16.4772 0.732407 15.7789 1.35925 15.8127 2.14564C15.9028 4.73277 16.7587 10.2034 22.5476 9.97542C28.3364 9.74748 29.2261 4.53902 29.3387 2.08866C29.3725 1.40483 28.7982 0.846378 28.1224 0.903363C26.6133 1.01733 25.5433 1.27947 22.908 1.88351C21.1173 2.2938 19.2252 1.24527 17.2318 0.880569V0.869172Z' stroke='%2312293E' stroke-miterlimit='10'/%3E%3Cpath d='M4.36944 27.5156C6.09258 23.2189 8.52524 19.2185 11.69 15.8792C14.6069 12.802 18.4136 9.96411 22.5356 9.96411C31.5342 9.96411 38.3028 21.4637 40.4652 25.6921C42.6275 29.9204 49.1034 49.5917 38.3028 54.8343C27.5022 60.077 11.8927 58.9601 6.04753 54.2531C0.596568 49.8652 -1.16035 43.3233 2.44359 32.5417C2.44359 32.5417 3.10807 30.6498 4.36944 27.5156Z' stroke='%2312293E' stroke-miterlimit='10'/%3E%3Cpath d='M17.6485 43.5512V42.3317C19.259 41.4997 20.3965 39.8927 20.3965 38.0578C20.3965 37.4765 20.374 36.9864 20.2726 36.3482H17.7836V34.8096H20.0249C19.901 34.0802 19.7546 33.1228 19.7546 32.1769C19.7546 29.2934 21.7029 27.4243 24.3834 27.4243C25.6335 27.4243 26.5007 27.7206 27.0075 28.0398L26.5232 29.6467C26.084 29.4074 25.3857 29.1567 24.3721 29.1567C22.4913 29.1567 21.7255 30.4787 21.7255 32.2111C21.7255 33.2596 21.8719 34.046 22.0183 34.821H25.4871V36.3596H22.2097C22.2773 37.2828 22.3336 38.2173 22.1084 39.0949C21.8381 40.1434 21.2637 41.021 20.4416 41.7276V41.7732H27.6269V43.5512H17.626H17.6485Z' fill='%2312293E'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_116_1469'%3E%3Crect width='48' height='62' fill='white' transform='translate(0 0.276611)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

/* =====================================================================
   Get In Touch — colour swap (Job 100987 §3)
   ===================================================================== */

/* §3 — "Call us" block (right column of .reach-us, sits on bg-navy):
   tfMint → tfGrey swap done at source in inc-get-in-touch-article.twig
   (matches the M&V .tfMint.border-mint → .tfGrey.border-tfGrey pattern).
   Only the pseudo-element accent bar above the heading needs an override —
   no `bg-after-grey` sibling exists for the bg-after-mint class. */
.reach-us__heading.bg-after-mint:after {
  background-color: #E4E8EA;
}

/* ============================================
   Contact form validation states
   (overrides border: none !important on .styleFormInput)
   ============================================ */
.was-validated .styleFormInput:invalid,
.styleFormInput.is-invalid {
  border-left: 3px solid #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.05) !important;
}

.was-validated .styleFormInput:valid,
.styleFormInput.is-valid {
  border-left: 3px solid #198754 !important;
}

.get-in-touch-form .invalid-feedback {
  padding-left: 30px;
  font-size: 13px;
}

/* ============================================================================
   Mobile responsive round — 2026-06-01 — MIGRATED FROM app.css
   These overrides previously lived in app.css (the compiled Stencil artefact,
   treated as opaque). Moved here so they survive a recompile; app.css reverted
   to original. Rendered output is unchanged from when they were in app.css.
   Full audit + history: plans/2026-06-01-responsive-updates-audit.md
   ============================================================================ */

/* #1 — Hero content padding on small phones (was app.css .hero__content @600).
   Both declarations reproduced: the shorthand would set bottom to 5px, so
   padding-bottom:0 is re-asserted after it. */
@media only screen and (max-width: 600px) {
  .hero__content {
    padding: 5px 14px !important;
    padding-bottom: 0 !important;
  }
}

/* #3 + #4 — .Helping-Local hero padding-top waterfall (phones).
   ORDER MATTERS: 575.98 must precede 500 so ≤500 wins 120 over 220. These sit
   after app.css's own ≤991→400 / ≤767→300 / ≤500→180 (custom.css loads later),
   producing: ≤991→400 · ≤767→300 · ≤575.98→220 · ≤500→120.
   2026-06-02: client asked to reduce gap above "Helping Local…" on phones (150→120). */
@media only screen and (max-width: 575.98px) {
  .Helping-Local {
    padding-top: 220px;
  }
}
@media only screen and (max-width: 500px) {
  .Helping-Local {
    padding-top: 120px;
  }
  /* #18 — Helping Local cards: tighten L/R inset 30px → 24px on phones.
     Same specificity (0,1,1) as app.css:17757 base; custom.css loads later → wins.
     Only L/R set, so padding-bottom:50px + flex-basis carry through. ≥501 = 30px,
     ≥991 = 40px (both untouched). */
  .Helping-Local__secondPart > div {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* #6 — Stat numbers (.fixed-size-bold-48) 48px → 40px on phones <480
   (was app.css). Overrides the 48px base in app.css. */
@media only screen and (max-width: 479.98px) {
  .fixed-size-bold-48 {
    font-size: 40px;
  }
}

/* (#11 .pb-150 → 70px override REMOVED 2026-06-01 — `pb-150` class dropped from
   both hero sections. our-services bottom = 150px at ≥993 (app.css
   `.hero-serivces @min-width:993` — REQUIRED: service cards translate up into it,
   else they overlap the title), 0 below 993. mission-values = 0 everywhere via
   the `.missionvalues` override above.) */

/* #12 — Home Case Studies: phone gutter (24px L/R) + tightened vertical spacing.
   (The companion `.case-study.home` translateY(-50px)/none transform was removed 2026-06-02.)
   Breakpoint extended 480 → 575.98 (2026-06-02): at 481–575 the block had neither this
   gutter nor the container's max-width:540 (≥576), so content sat near-flush (img #32).
   Extending to ≤575.98 makes the whole phone tier match the ≤480 look; ≥576 unchanged.
   2026-06-02 client: reduce top space ¼ (py-5 48px → 36px) and bottom ⅓ (section pb
   48px → 32px, + drop the first card's 16px mb-3). py-5/mb-3 are !important so these
   overrides must be !important too. */
@media only screen and (max-width: 575.98px) {
  .case-study.home {
    padding-top: 36px !important;     /* was 48px (py-5) — reduce ¼ */
    padding-bottom: 32px !important;  /* was 48px (py-5) — reduce ⅓ */
    padding-left: 24px;
    padding-right: 24px;
  }
  .case-study.home .container {
    padding: 0;
  }
  .case-study.home .col-6 {
    margin-bottom: 0 !important;      /* drop first card's mb-3 (16px) on phones */
  }
}

/* #19 — services-page Help Community section: mobile gutter + stacked CTAs.
   Section is CMS-banner-injected (banners[1] in inc-our-services-article.twig) → CSS-only.
   Mirrors #12 (case-studies 24px gutter).
   GUTTER: ≤575.98 (XS) — widened from ≤500 on 2026-06-09 after the client saw the 12px
   shortfall at 575px; this matches the 24px design guide across all of XS (same as #44).
   Zero the inner Bootstrap .container so the 24px isn't doubled.
   CTA STACKING keeps its custom ≤500 breakpoint (Bootstrap has no 500px BP); at 501–575.98
   the two CTAs stay side-by-side as designed. */
@media only screen and (max-width: 575.98px) {
  .help-community {
    padding: 0 24px;
  }
  .help-community .container {
    padding: 0;
  }
}
@media only screen and (max-width: 500px) {
  /* stack the two CTAs full-width. d-flex (row) → column; force 100% width to beat
     app.css:18231 `.help-community .learnMoreBtn{width:auto!important}` + `.w-auto` on btn 2;
     kill btn 2's `ms-4` so both sit flush. Inter-button gap = btn 1's existing mb-3 (16px). */
  .help-community__container .d-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .help-community__container .d-flex .learnMoreBtn {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* #22 — Join Us mobile: shorter hero + full-bleed image trio */

/* (1) hero 500 → 335px at ≤sm. custom.css loads after app.css:18688 → wins the (0,1,0) tie. */
@media only screen and (max-width: 575.98px) {
  .join-us {
    height: 335px;
  }
}

/* (2) trio full-bleed + no grey gap above the row, below md (≤767.98px). Breakout on the IMAGES
   wrapper only (the "Discover TF Jones" heading/text below are siblings → untouched). Uses
   calc(50% - 50vw) so it reaches the viewport edges even at 576–767 where .container is a CENTRED
   max-width box (540px) — a flat -0.75rem only reaches the edge <576 where the container is
   full-width. Zero the inner .row gutter so the 3 cols fill 0–100% cleanly; .col flex:1 keeps them
   3-in-a-row. padding-top:0 removes the 50px grey gap above (app.css:18766 @≤769); bottom 50px kept. */
@media only screen and (max-width: 767.98px) {
  .join-us-discover--imgs {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .join-us-discover--imgs .row {
    margin-left: 0;
    margin-right: 0;
  }
  .join-us-discover__container {
    padding-top: 0;
  }
}

/* #24 — Join Us navy "View Vacancies" CTA (.team-contact): stack text + button on phones (≤500px).
   That section uses a 50/50 `.row > .col-6 + .col-6` that stays side-by-side at all widths → text
   squished to a narrow column on mobile. Scoped via `.col-6` which is UNIQUE to this instance —
   the other .team-contact sections (get-in-touch, services-detail) use col-8/col-12 layouts that
   already stack, so they're untouched. CSS-only because Bootstrap has no 500px breakpoint. */
@media only screen and (max-width: 500px) {
  .team-contact .col-6 {
    width: 100%;                    /* both cols full-width → text stacks above the button */
  }
  .team-contact .col-6.d-flex {
    margin-top: 1rem;               /* gap between the text and the button */
  }
  .team-contact .learnMoreBtn {
    width: 100%;                    /* button full-width under the text */
    text-align: center;
  }
  /* #28 — hover fill must sweep the now-full-width button. Base hover (custom.css:173) is a paced
     `inset 200px` tuned for the content-width DESKTOP button; bump to 500px on mobile only (button
     ≈410px ≤ viewport) so the white fill reaches the far edge. ~2000px/s over .25s = smooth. */
  .team-contact .learnMoreBtn:hover {
    -webkit-box-shadow: inset 500px 0 0 0 #fff;
            box-shadow: inset 500px 0 0 0 #fff;
  }
}

/* #26 — case-study detail page mobile fixes */

/* (1) hero image height 500 → 335px at ≤500px — mirrors the Join Us hero logic (#22); .casestudy
   base is also 500px (app.css:18611). custom.css loads after app.css → wins the (0,1,0) tie. */
@media only screen and (max-width: 500px) {
  .casestudy {
    height: 335px;
  }
}

/* (2) Key Takeaway grey block — 24px horizontal padding below lg (≤991.98) so its content isn't
   flush to the edge. At ≤768 app.css:18615 zeroes `.content-casesatudy .container` padding (grey
   goes edge-to-edge), so the text sat hard against the edge. Scoped to `.content-casesatudy
   .bg-tf-grey` — the only bg-tf-grey in this template (the class is shared elsewhere). The inner
   .row's -12px gutter and the cols' +12px padding cancel → clean 24px text inset, no overflow.
   py-3/py-sm-5 (vertical) untouched; ≥992 keeps the col-lg-10 offset desktop layout. */
@media only screen and (max-width: 991.98px) {
  .content-casesatudy .bg-tf-grey {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* #27 — hero title blocks: stop the title "floating" right-of-centre below lg (≤991.98).
   The hero container is `.hero-serivces__container.container`, so Bootstrap centres it at a
   max-width (540 @≥576, 720 @≥768) while the inner layout is still the stacked phone layout
   (col-11, no justify-content-lg-center until ≥992) — so the title sits indented/centred instead
   of left-aligned (img #38). Releasing the max-width below lg lets it run full-width → the
   `col-11 mx-auto` gives a small symmetric inset → left-aligned (img #36). TARGETED to
   `.hero-serivces__container` (NOT the global `.container`), so only the title blocks change —
   intentionally ALL of them (Our Services / A Trusted Partner / Join Us / service-detail). ≥992
   keeps the centred desktop hero (col-lg-10 + justify-content-lg-center). Same specificity as
   Bootstrap `.container` (0,1,0); custom.css loads later → wins. */
@media only screen and (max-width: 991.98px) {
  .hero-serivces__container {
    max-width: none;
  }
}

/* ============================================================================
   #29 — White-topped pages: tighten top spacing + 24px L/R gutter to match home
   (client 2026-06-02). Top space: the per-page `pt-3` was removed in templates
   (Our Services / M&V sections, Service sub-pages container); the shared 85px
   `.page-h-offset` nav clearance is kept. L/R: 24px on phones like home.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  /* (a) hero-serivces family (Our Services / M&V / Service sub-pages / Join Us):
     24px L/R gutter. .container default is ~12px; M&V already has 24px via p-4
     (no-op there). Same specificity as Bootstrap .container — custom.css wins on order. */
  .hero-serivces__container {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* (b) Case Studies listing: mirror home's .case-study gutter so cards sit 24px in. */
  .case-study.case-listings {
    padding: 0 24px;
  }
  .case-study.case-listings > .container {
    padding: 0;
  }
  /* (c) Get In Touch: the address/call cards container has 0 L/R on phones
     (app.css .reach-us__container padding:25px 0 @≤769) — add 24px to match home. */
  .reach-us__container {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* (d) get-in-touch / case-listings hero band: less top space. Band was 125px (#28)
     with the title pinned at top:70px; trim to 100px and raise the title so the white
     space around the heading is closer to home. One short line, so it fits. ≥576 keeps
     the 125/275px band. Later in source than #28 → wins. */
  .get-in-touch {
    height: 100px;
  }
  .case-listings-heading .centerElement,
  .get-in-touch-heading .centerElement {
    top: 50px;
  }
  /* (e) hero title row: Bootstrap .row negative margins (-12px L/R) were eating the
     container's 24px padding (M&V "A Trusted Partner" sat near-flush). Zero them so the
     24px gutter applies cleanly. Direct child only → just the title row, not nested rows.
     Covers Our Services / M&V / Service sub-pages (the hero-serivces title rows). */
  .hero-serivces__container--title > .row {
    margin-left: 0;
    margin-right: 0;
  }
  /* (f) Our Services hero col is `col-11` + mx-auto (M&V / sub-pages use col-12); the
     auto side-margins pushed its title in further than the col-12 pages once (e) zeroed
     the row margin. Kill the auto-margins so the left gutter matches. Scoped to the col-11
     hero col only; mx-auto is !important → override needs it. */
  .hero-serivces__container > .col-11 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================================
   #30 — Our Services: tighten the bottom gap on two DB-banner sections
   (client 2026-06-03). Both sections are {{banners[1|2]|raw}} so this is CSS,
   not markup. Phones only (≤575.98) per the client's mobile review.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  /* (a) "Helping Community" — the Learn More / Get In Touch button row carries
     mb-4 (24px) beneath it. Drop it on phones (client: "mb-0 mb-sm-4"); ≥576 keeps
     the 24px via the unscoped Bootstrap mb-4. mb-4 is !important → override needs it. */
  .help-community .d-flex.align-items-lg-center.mb-4 {
    margin-bottom: 0 !important;
  }
  /* (b) "Built on Expert…" — section p-5 puts 48px all round; that 48px bottom is
     the large gap before the navy band. Zero only the bottom on phones (client
     tested `p-5 pb-0` in DevTools); the inner .buildExpert__container py-3 keeps
     16px as breathing room. p-5 is !important → override needs it. */
  .buildExpert.p-5 {
    padding-bottom: 0 !important;
  }
}

/* ============================================================================
   #31 — Service-detail "Case Studies" block: match the home gutter on phones
   (client 2026-06-03). Bare `.case-study` (service pages + our-services-detail)
   sat at the ~12px Bootstrap container gutter; home/listings sit at 24px. Give
   the bare `.case-study` container the same 24px L/R at ≤575.98 as home (#12).
   Home (.case-study.home .container) / listings (.case-study.case-listings >
   .container) are (0,3,0) so they win → only bare .case-study picks this up.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .case-study .container {
    padding: 0 24px;
  }
}

/* ============================================================================
   #32 — M&V "Our Mission": restore the mobile margin taper (client 2026-06-04).
   app.css tapers .ourmission 180→100→50px down the breakpoints, but the
   colour-round override at custom.css:~242 (.ourmission { margin: 80px 0 }) is
   UNSCOPED → it flattened mobile to 80px (the "big gap above"). Keep 80px on
   desktop; trim the top gap on phones. margin-bottom stays 0 (flush w/ stats).
   2026-06-08: client still finds the phone gap too big ("big spacing around Our
   Mission") → tighten 40px → 0. margin-bottom still 0 (flush with stats below).
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .ourmission {
    margin-top: 0px;
  }
}

/* ============================================================================
   #33 — Stats block (home + M&V): full-bleed on phones + 24px content inset +
   gap around the block (client 2026-06-04, "broadly like the mockup"). The
   .no-of-projects* / .custom-transform classes are stats-only → no bleed.
   Phones only; ≥576 keeps the contained layout, ≥992 stays 3-across.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  /* (a) full-bleed — drop the container gutter so the navy block reaches both edges */
  .no-of-projects .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
  /* (b) content 24px from the edges (beats ps-3 16px); keep py-5 vertical */
  .no-of-projects__container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* (c) stats stack full-width, aligned to the 24px (kill row neg-margins + col-11/mx-auto inset) */
  .no-of-projects__container .row {
    margin-left: 0;
    margin-right: 0;
  }
  .no-of-projects__container .row > div {
    width: 100%;
    max-width: 100%;
  }
  /* (d) gap around the block on BOTH pages (home is 0/overlap, M&V 50px). !important
     to beat .hp-test-block margin:0 / -100px and normalise both to one value. */
  .hp-test-block .no-of-projects,
  .no-of-projects.custom-transform {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
}

/* ============================================================================
   #34 — Join Us "Discover TF Jones": 24px L/R gutter on the text area (client
   2026-06-04). app.css gives the __container `padding:50px 0` (0 L/R) inside a
   12px .container → text sat ~12px in. Zero the container gutter + put 24px on
   the __container = 24px from the edge. The .join-us-discover--imgs full-bleed
   is relative to its parent content box, so it self-corrects (stays edge-to-edge).
   Classes are Join-Us-only → no bleed. ≤767.98 = the section's mobile range.
   ============================================================================ */
@media only screen and (max-width: 767.98px) {
  .join-us-discover .container {
    padding-left: 0;
    padding-right: 0;
  }
  .join-us-discover__container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================================
   #35 — Join Us heading ("Join Us" hero): clean 24px content gutter on < MD
   (client 2026-06-04). Two compounding causes: (1) the .container's `g-0` gutter
   wasn't zeroing in practice → 12px L/R remained; (2) at xs, #29(e) zeroes the row's
   −12px margin which had been cancelling that 12px → content jumped to ~36px (sm,
   where #29e doesn't reach, kept the −12px so it happened to net 24px). Fix < md for
   THIS heading only: zero the container L/R padding (explicit + !important — g-0's
   variable wasn't winning) AND zero the row margin, so the row's px-4 lands a true
   24px across phone + tablet-portrait. md+ keeps the original centred hero.
   ============================================================================ */
@media only screen and (max-width: 767.98px) {
  .join-us-heading .hero-serivces__container.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .join-us-heading .hero-serivces__container--title > .row {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================================
   #36 — Join Us "Our Roles": 24px L/R gutter on phones (client 2026-06-04).
   The section's `.container` keeps its default 12px gutter at <576 → the
   "Our Roles" heading/text/CTA sat ~12px in. Set the container to 24px L/R
   (vertical stays 0 — the container has no vertical padding). `.join-us-our-role`
   is Join-Us-only → no bleed. ≤575.98 = phones only (tablet+ already fine).
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .join-us-our-role .container {
    padding: 0 24px;
  }
}

/* ============================================================================
   #37 — Join Us "Our Roles" cards (the coloured Trades/Support/… squares):
   full-bleed boxes with 24px content inset on phones (client 2026-06-04).
   At <576 the cards stack col-12 inside a 12px `.container`; each box
   (.coloredCards__div) adds 30px L/R → the box edge sat ~12px in, text ~42px in.
   Client wants the coloured boxes flush to the viewport with text 24px from the
   edge: zero the container gutter (the container is already 100%-wide below 576,
   so this alone makes the boxes edge-to-edge) + drop the box L/R padding 30px→24px.
   Scoped to `.join-us-sliding` so the shared .coloredCards__div component (Our
   Services sub-pages etc.) is untouched. ≤575.98 = phones only.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .join-us-sliding .container {
    padding-left: 0;
    padding-right: 0;
  }
  .join-us-sliding .coloredCards__div {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================================
   #38 — Join Us testimonial carousel (.clientReviews): stop the quote text
   overlapping the prev/next arrows on phones (client 2026-06-04, img #53).
   .carousel-caption is position:static globally (app.css:14320) so the quote is
   full-width; the arrows are absolute 15%-wide zones at the L/R edges
   (app.css:7119) → on narrow phones the wrapping text runs under the chevrons.
   Fix (mirrors the client's DevTools mockup, img #54): inset the caption text
   24px L/R + narrow the arrow zones 15%→10% so the centred chevron sits closer
   to the edge, clearing the text. Scoped to .clientReviews (Join-Us-only — the
   home/service-detail testimonial carousels share .carousel-* but not this
   ancestor, so they're untouched). ≤575.98 = sm-down (whole phone tier).
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .clientReviews .carousel-caption {
    padding-left: 24px;
    padding-right: 24px;
  }
  .clientReviews .carousel-control-prev,
  .clientReviews .carousel-control-next {
    width: 10%;
  }
}

/* ============================================================================
   #39 — Join Us "Perks, Benefits and Rewards" (.join-us-benefits): pull the
   heading + icon grid to a clean 24px left gutter on phones (client 2026-06-04,
   img #56). At ≤575.98 the __container is col-11 + mx-auto → heading sat ~35px
   in (12px container gutter + ~23px centring) and the icon .row's −12px margin
   sat the icons ~23px → indented past 24px and misaligned with each other.
   Fix: zero the .container gutter, make the __container full-width with a 24px
   gutter (heading → 24px), and zero the items .row's −12px margin so the p-0
   icon cols land at 24px too. Scoped to .join-us-benefits (Join-Us-only → no
   bleed). ≤575.98 = phones (matches the Our Roles #36 / Discover gutter work).
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .join-us-benefits .container {
    padding-left: 0;
    padding-right: 0;
  }
  .join-us-benefits__container {
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
  .join-us-benefits__items .row {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================================
   Our Services / hero responsive boundary fixes — 2026-06-01
   The hero layout (lg, ≥992), the `.w-100-mobile` width override (app.css
   @max-width:992), the hero bottom padding (@min-width:993) and the cards'
   upward pull (@≥994) were each on a slightly different breakpoint, producing
   glitches across 992–994px. These align them.
   ============================================================================ */

/* (A) Title-wrapper + sub-text stack full-width on phones. app.css already has
   `.w-100-mobile{width:100%}` @max-width:992, BUT the sub-text's `w-50 !important`
   wins over it (later in cascade) so the sub-text never stacked. Declared here
   (custom.css loads last) so it beats `w-50`. Stops at 991.98 so it doesn't
   collide with the lg (≥992) side-by-side layout. */
@media only screen and (max-width: 991.98px) {
  .w-100-mobile {
    width: 100% !important;
  }
}

/* (B) Release the title wrapper at the lg switch (≥992) so the hero goes
   side-by-side cleanly. app.css's @max-width:992 forces the wrapper to 100% at
   *exactly* 992 (no `w-50` to beat it), colliding with lg (min-width:992) so the
   separator + sub-text wrap below. Re-assert auto width ≥992 (sub-text keeps its
   `w-50`). Applies to all .hero-serivces heroes — consistent. */
@media only screen and (min-width: 992px) {
  .wrapper.w-100-mobile {
    width: auto !important;
  }
  /* …and release the sub-text too. app.css:14314 (`.w-100-mobile @max-width:992`)
     beats `.w-50` (app.css:9002, later in source) so the sub-text is forced to
     100% at exactly 992 → wraps below the title while the layout has gone
     side-by-side (lg ≥992). (0,2,0)+!important restores its 50% at ≥992. */
  .w-100-mobile.w-50 {
    width: 50% !important;
  }
}

/* (C) Align the Our Services cards' upward pull with the hero's bottom padding.
   Hero reserves 150px at ≥993 (app.css .hero-serivces @min-width:993), but the
   cards only translate up at ≥994 (app.css turns `.types-services` transform off
   at ≤993) → at exactly 993 a 150px empty gap appears above the cards. Re-enable
   the pull-up at ≥993 so 993 matches 994. `.types-services` (the section) is
   Our-Services-only — M&V uses the `__container` child class, not this. */
@media only screen and (min-width: 993px) {
  .types-services {
    -webkit-transform: translateY(-100px) !important;
        -ms-transform: translateY(-100px) !important;
            transform: translateY(-100px) !important;
  }
}


/* ============================================================================
   app.css colour edits — re-expressed as custom.css overrides (Job 100987)
   The colour round changed 4 values directly in dev's app.css (the opaque
   Stencil bundle). php8 keeps app.css pristine (per migration plan) and
   overrides here instead — custom.css loads after app.css, so these win.
     • global title highlight   .afterElement:after   mint → yellow
     • Our Services sub-pages    .coloredCards .navy   content/line/btn mint → light grey
   ============================================================================ */
.afterElement:after {
  background-color: #EDFF1C;
}
.coloredCards .navy {
  color: #E4E8EA;
}
.coloredCards .navy .line {
  background-color: #E4E8EA;
}
.coloredCards .navy .learnMoreBtn {
  border: 1px solid #E4E8EA;
}

/* ============================================================================
   #40 — Home stats block: kill the "odd gap below the carousel" (client
   2026-06-08). #33(d) normalised home + M&V stats to 50px top/bottom on phones;
   on home the 50px TOP margin reads as an odd empty band between the testimonial
   dots and the navy "5,000" stats. Client wants it flush (0) with a tighter 20px
   below. SCOPED TO HOME via `.hp-test-block` (that wrapper is home-only —
   inc-hp-article.twig:37); M&V's stats sections have no wrapper so they keep the
   #33 50/50. Specificity 0,0,3,0 + !important + later source beats the #33(d) base.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .hp-test-block .no-of-projects.custom-transform {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
}

/* ============================================================================
   #41 — Home testimonial bottom padding (client 2026-06-08, same "odd gap below
   carousel" thread). Pairs with #40: #40 zeroed the stats top-margin (killed the
   separate band); this puts the 50px gap back INSIDE the testimonial's mint bg so
   it reads as one continuous block before the navy stats. SCOPED to .hp-test-block
   — `.customer-saying` also renders on M&V + reviews testimonials; only home is
   wrapped (inc-hp-article.twig:37). Must beat the existing ≤480 `.hp-test-block
   .customer-saying{padding-bottom:0 !important}`: same 0,0,2,0 specificity +
   !important + later source → wins across the full ≤575.98 range incl. ≤480px.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .hp-test-block .customer-saying {
    padding-bottom: 50px !important;
  }
}

/* ============================================================================
   #42 — M&V stats block "odd gap below stats" (client 2026-06-08, same thread as
   #40/#41). The #33(d) base sets the stats margin-bottom to 50px on both pages; on
   M&V that 50px is the empty band between the navy stats and the testimonial below
   (inc-testimonial-mission-values.twig, mt-0 on mobile). Collapse it to 0.
   SHARED SELECTOR: `.no-of-projects.custom-transform` is on Home + M&V. Bare
   selector (0,0,2,0) sets M&V to 0; Home is HELD at #40's 20px because #40's
   `.hp-test-block .no-of-projects.custom-transform` (0,0,3,0) is more specific.
   M&V has no .hp-test-block wrapper → #40 can't reach it. Last in source beats the
   #33 base (equal 0,0,2,0) via order.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .no-of-projects.custom-transform {
    margin-bottom: 0 !important;
  }
}

/* ============================================================================
   #43 — M&V "A Trusted Partner" → "Founded 1975" gap too loose on XS vs Services
   (client 2026-06-08). Services' first colour block is pulled up −100px via
   .types-services (app.css:18111); M&V's .missionFounded__container.translateUp
   has its pull-up cancelled to `transform:none` (custom.css:211) so the navy block
   sits at natural position → loose gap. Add a small −20px top margin on XS to
   tighten toward the Services look. Negative MARGIN (not transform) so it's
   independent of the transform:none override. .missionFounded is M&V-only
   (verified) → no bleed.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .missionFounded__container.translateUp {
    margin-top: -20px;
  }
}

/* ============================================================================
   #44 — M&V Certifications block sits short of the 24px guide at XS
   (client 2026-06-08, devtools-confirmed). At ≤575.98px the section's Bootstrap
   .container has only 12px side padding, so the Certifications heading, intro and
   logo grid all fall ~12px outside the 24px design guideline. Widen the
   accredition container's side padding to 24px so the whole block aligns to the
   guide. .accredition is M&V-only (inc_accreditations → mission-values-template)
   → no bleed to other .container usage.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .accredition .container {
    padding: 0 24px;
  }
}

/* ============================================================================
   #45 — M&V "Our Values" heading sits short of the 24px guide at XS
   (client 2026-06-09, devtools-confirmed). ONLY the heading needs the 12px
   gutter — the colour cards below it are deliberately full-bleed (flush edge),
   so we must NOT pad their container/row (that pushes the blocks in). Add 12px
   horizontal padding to the heading itself. py-4 is !important (app.css:9590) so
   vertical spacing is untouched. Scoped to .ourvalues because
   .text-blue-48-bold--1 is the shared 48px heading used across the M&V page (6×);
   .ourvalues is M&V-only and holds just this one heading.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  .ourvalues .text-blue-48-bold--1 {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ============================================================================
   #46 — Service-detail "Safety Solutions": full-bleed colour blocks + 24px guide
   on phones (client 2026-06-09). Heading/intro sit at 12px by default; colour
   blocks (.swiper) at 12px (not flush); card text at 42px (.coloredCards__div
   30px). Pull it all to the 24px design language: nudge the heading/intro col to
   24px, full-bleed the swiper to the viewport edges (calc(50% - 50vw) — the
   project's breakout idiom, same as the Join Us trio ~L984), and drop card text
   inset 30px→24px (mirrors #37 on Join Us). Scoped to .safetySolutions →
   service-detail pages only (verified). ≤575.98 = phones only.
   ============================================================================ */
@media only screen and (max-width: 575.98px) {
  /* (1) heading + intro onto the 24px guide (default leaves them at 12px) */
  .safetySolutions .row .col-12 {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* (2) full-bleed the carousel so the colour blocks reach both viewport edges.
     .swiper is the clipping (overflow) element, so the breakout must be on it. */
  .safetySolutions .swiper {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  /* (3) card text inset 24px from the now-flush edge (was 30px). L/R only so the
     pt/pb-50px vertical rhythm of .coloredCards__div is preserved. */
  .safetySolutions .coloredCards__div {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================================
   #47 — Service-detail testimonials carousel ("What Our Customers Say", .speak):
   show the prev/next nav arrows on phones (client 2026-06-09). Arrows were hidden
   ≤992 (custom.css:252) and the .speak icons carry a desktop top:-130px offset
   (custom.css:257). Un-hide on phones only and zero that offset so they centre
   like the working services/index reference (.customer-saying). Mirror approach:
   keep Bootstrap's default 15%-wide control (icon lands ~7.5% in — on the 24px
   guide). .speak is service-detail-only (verified) → no bleed. ≤767.98 only, so
   768–991 stays hidden and ≥993 keeps its hover-reveal — ≥MD unchanged. Opacity
   already 0.9 ≤992 (custom.css:382). Overrides win by equal specificity + later
   source order.
   ============================================================================ */
@media only screen and (max-width: 767.98px) {
  .speak .customer-say-btn-carousel {
    display: flex;
  }
  .speak .carousel-control-prev-icon,
  .speak .carousel-control-next-icon {
    top: 0 !important;
  }
  /* narrow + centre the quote area so it clears the edge arrows instead of running
     under them (client 576px review 2026-06-09). */
  .speak .carousel-inner {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

/*# sourceMappingURL=custom.css.map */