/* results-v3.php only. Loaded after home-updated.css, which supplies the
   reset, Inter/Montserrat, .container and the navbar, so this file only
   holds the page's own blocks. */

/* Normalize: no default margin/padding on text and list elements (the
   home-updated.css reset zeroes margins but leaves the UA list padding). */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dd,
figure,
blockquote {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}

/* --------------------------------------------
   RESULTS HERO (BEM)
   Full-height banner: centred title, copy and CTA, with a stats row
   pinned to the bottom. The photo is already dark top and bottom, so
   the overlay only needs to lift contrast behind the centred copy.
   Stats/CTA match services-v3 .services-hero__stat* / __cta.
   -------------------------------------------- */
.results-hero {
  position: relative;
  display: flex;
  min-height: 90vh;
  padding: 7rem 0 3.5rem;
  background: #1c2024 url("../assets/img/results-banner.jpg") center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.results-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.results-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7rem;
}
.results-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Same treatment as the homepage-v3 .hero__title */
.results-hero__title {
      font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 300;
    font-size: 3rem;
    line-height: 1.5;
    letter-spacing: .2rem;
    text-transform: uppercase;
    color: #fff;
}
.results-hero__desc {
  max-width: 60rem;
  margin-top: 2rem;
}
.results-hero__desc p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}
.results-hero__desc p + p {
  margin-top: 1.5rem;
}
.results-hero__cta {
  display: inline-block;
  margin-top: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  padding: 1rem 2rem .9rem;
  transition: all 0.2s ease;
}
.results-hero__cta:hover {
  background: #fff;
  border-color: #fff;
  color: #00467f;
}

.results-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.results-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.results-hero__stat-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.2;
  letter-spacing: -.6px;
  color: #fff;
}
.results-hero__stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

@media screen and (max-width: 1200px) {
  .results-hero__title {
    font-size: 2.8rem;
  }
  .results-hero__stat-value {
    font-size: 2rem;
  }
}
@media screen and (max-width: 800px) {
  .results-hero {
    padding: 8rem 0 3rem;
  }
  .results-hero::before {
    background: rgba(0, 0, 0, 0.45);
  }
  .results-hero__inner {
    gap: 3.5rem;
  }
  .results-hero__title {
    font-size: 2.2rem;
    letter-spacing: 0.2rem;
  }
  .results-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }
}
@media screen and (max-width: 576px) {
  .results-hero__title {
    font-size: 1.6rem;
    letter-spacing: 0.15rem;
  }
  .results-hero__desc p {
    font-size: 1rem;
  }
  .results-hero__stat-value {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------
   HIRE HELP (BEM) — "We Help You Hire"
   Results-page take on homepage-v3 .roles--hire: same copy and type
   (section title, .roles__card-title, .roles__card-desc), on white with
   pale-blue cards and a solid brand-blue CTA.
   -------------------------------------------- */
.hire-help {
    padding: 5rem 0;
    background: #fff;
}
.hire-help__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: -.6px;
  color: #000;
  text-align: center;
}
.hire-help__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 2.5rem;
}
.hire-help__card {
  padding: 2.5rem 2rem;
  background: #f5fafe;
}
.hire-help__card-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: #000;
}
.hire-help__card-text {
  margin-top: 1rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #6c6c6c;
}
.hire-help__cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}
.hire-help__cta {
  display: inline-block;
  padding: 1rem 2rem .9rem;
  background: #00467f;
  border: 1px solid #00467f;
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hire-help__cta:hover {
  background: transparent;
  color: #00467f;
}

@media screen and (max-width: 1200px) {
  .hire-help__grid {
    gap: 1.5rem;
  }
  .hire-help__card {
    padding: 2.25rem;
  }
}
@media screen and (max-width: 992px) {
  .hire-help__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hire-help__card-title {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 800px) {
  .hire-help {
    padding: 5rem 0;
  }
  .hire-help__grid {
    margin-top: 3rem;
  }
}
@media screen and (max-width: 576px) {
  .hire-help__title {
    font-size: 1.6rem;
  }
  .hire-help__grid {
    grid-template-columns: 1fr;
  }
  .hire-help__card {
    padding: 1.75rem 1.5rem;
  }
  .hire-help__card-title {
    font-size: 1.15rem;
  }
}

/* --------------------------------------------
   SEARCH EXPERIENCE (BEM) — "Unique Search Experience"
   Past searches as a 3-column grid of white tiles on the light-blue
   gradient (as homepage-v3 .roles). Each tile: the client in brand blue,
   then the role filled, in the homepage-v3 card-title type.
   -------------------------------------------- */
.search-exp {
    padding: 5rem 0 14rem;
    background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(218, 241, 252) 100%
  );
}


.search-exp__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: -.6px;
  color: #000;
  text-align: center;
}
.search-exp__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 2rem;
    margin-top: 3rem;
}
.search-exp__card {
  padding: 1rem 1.5rem;
  background: #fff;
  border-radius: 4px;
}
.search-exp__client {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: .8rem;
  line-height: 1.4;
  color: #00467f;
}
.search-exp__role {
  margin-top: 0.35rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: #000;
}

@media screen and (max-width: 1200px) {
  .search-exp__grid {
    gap: 1.25rem;
  }
  .search-exp__card {
    padding: 1.35rem 1.5rem;
  }
  .search-exp__role {
    font-size: 1.05rem;
  }
}
@media screen and (max-width: 992px) {
  .search-exp__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 800px) {
  .search-exp {
    padding: 5rem 0;
  }
  .search-exp__grid {
    margin-top: 2.5rem;
  }
}
@media screen and (max-width: 576px) {
  .search-exp__title {
    font-size: 1.6rem;
  }
  .search-exp__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* --------------------------------------------
   LET'S TALK (BEM) — centred brand-blue call-to-action box on white
   Heading in uppercase Montserrat (homepage-v3 title treatment, sized
   down for a full sentence); CTA in the lighter brand blue.
   -------------------------------------------- */
.lets-talk {
  /* background: #fff; */
  margin-top: -7rem;
}
.lets-talk__box {
  max-width: 57rem;
  margin: 0 auto;
  padding: 3.5rem;
  background: #00467f;
  text-align: center;
}
.lets-talk__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -.15px;
    /* text-transform: uppercase; */
    color: #fff;
}
.lets-talk__desc {
  max-width: 46rem;
  margin: 1.25rem auto 0;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}
.lets-talk__cta {
  display: inline-block;
  margin-top: 2.25rem;
  padding: 1rem 2rem .9rem;
  background: #39a8df;
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lets-talk__cta:hover {
  background: #fff;
  color: #00467f;
}

@media screen and (max-width: 800px) {
  .lets-talk {
    padding: 4rem 0;
  }
  .lets-talk__box {
    padding: 3.5rem 2rem;
  }
  .lets-talk__title {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 576px) {
  .lets-talk__box {
    padding: 2.75rem 1.5rem;
  }
  .lets-talk__title {
    font-size: 1.05rem;
  }
  .lets-talk__desc {
    font-size: .95rem;
  }
}

/* --------------------------------------------
   MARKET SECTORS (BEM) — "Market Sector Expertise"
   Eight sector cards (icon + name, then a · separated list of project
   types) in a 4-column grid, then "Other Trades/Specialties" as six
   icon | label rows. Title/card-name type follows homepage-v3
   (.sectors--expertise); pale grey tiles on white as in the design.
   -------------------------------------------- */
.market-sectors {
    padding: 4rem 0;
    background: #fff;
}
.market-sectors__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: -.6px;
  color: #000;
  text-align: center;
}
.market-sectors__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}
.market-sector {
  padding: 2.25rem 2rem 2.5rem;
  background: #f8f8f8;
}
.market-sector__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 4rem;
}
.market-sector__icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  display: none;
}
.market-sector__name {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: #000;
}
.market-sector__list {
  /* margin-top: .8rem; */
  font-size: .9rem;
  line-height: 1.7;
  color: #424242;
  text-align: center;
}

/* Plain centred label (no side rules, unlike homepage-v3 .sectors__subtitle) */
.market-sectors__subtitle {
  margin: 2.5rem 0 1.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -.2px;
  color: #000;
  text-align: center;
}
.market-sectors__trades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem 1.5rem;
}
.market-trade {
  display: flex;
  align-items: center;
  padding: 1rem;
  /* min-height: 5rem; */
  background: #f8f8f8;
  justify-content: center;
}
.market-trade__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 7.5rem;
  align-self: stretch;
  margin: 0.75rem 0;
  border-right: 1px solid #dadada;
  display: none;
}
.market-trade__icon {
  width: 3rem;
  height: 3rem;
}
.market-trade__name {
  padding: 0 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: #424242;
}

@media screen and (max-width: 1200px) {
  .market-sectors__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .market-sectors__trades {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media screen and (max-width: 800px) {
  .market-sectors {
    padding: 5rem 0;
  }
  .market-sectors__grid {
    margin-top: 3rem;
  }
  .market-trade__icon-wrap {
    width: 5.5rem;
  }
}
@media screen and (max-width: 576px) {
  .market-sectors__title {
    font-size: 1.6rem;
  }
  .market-sectors__grid,
  .market-sectors__trades {
    grid-template-columns: 1fr;
  }
  .market-sector {
    padding: 1.75rem 1.5rem 2rem;
  }
  .market-sectors__subtitle {
    font-size: 1.125rem;
  }
}

/* --------------------------------------------
   BEYOND RESUME (BEM) — "More Than Matching a Résumé"
   Brand-blue band with four darker, centred cards (as services-v3
   .hire-card) and a closing statement (as homepage-v3 .about__statement). Type follows the
   homepage-v3 section title, inverted to white.
   -------------------------------------------- */
.beyond-resume {
  padding: 5rem 0;
  background: #00467f;
}
.beyond-resume__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: -.6px;
  color: #fff;
  text-align: center;
}
.beyond-resume__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}
.beyond-resume__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 2rem;
  background: #003866;
  text-align: center;
}
/* Titles are one or two lines; a two-line minimum keeps the text below
   them starting at the same height across the row. */
.beyond-resume__card-title {
  display: flex;
  align-items: center;
  min-height: 2.6em;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: #fff;
}
.beyond-resume__card-text {
  margin-top: 1rem;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
.beyond-resume__statement {
    max-width: 48rem;
    margin: 3rem auto 0;
    font-weight: 400;
    font-size: .9rem;
    line-height: 1.6;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 1200px) {
  .beyond-resume__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (max-width: 800px) {
  .beyond-resume {
    padding: 5rem 0;
  }
  .beyond-resume__grid {
    margin-top: 3rem;
  }
  .beyond-resume__statement {
    margin-top: 3rem;
    font-size: 1rem;
  }
}
@media screen and (max-width: 576px) {
  .beyond-resume__title {
    font-size: 1.6rem;
  }
  .beyond-resume__grid {
    grid-template-columns: 1fr;
  }
  .beyond-resume__card {
    padding: 2.25rem 1.5rem;
  }
  .beyond-resume__card-title {
    min-height: 0;
  }
}

/* --------------------------------------------
   MEDIA SPLIT (BEM) — image + copy side by side
   Used by "Accessing Passive Talent" (image left) and, with
   --reverse, "Market Intelligence" (image right). Image treatment as
   homepage-v3 .about--talent (and about-v3 .history): the grid stretches
   both columns and the image is taken out of flow, so it always matches
   the copy's height, cropped to fit. The copy is short, so the row keeps
   a minimum height to hold the photo near its natural proportions.
   -------------------------------------------- */
.media-split {
  padding: 5rem 0;
  background: #fff;
}
.media-split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: stretch;
  min-height: 34rem;
}
.media-split__media {
  position: relative;
}
.media-split__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.media-split__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.3;
  letter-spacing: -.6px;
  color: #000;
}
.media-split__desc {
  margin-top: .5rem;
}
.media-split__desc p {
  font-size: .9rem;
  line-height: 1.7;
  color: #424242;
}
.media-split__desc p + p {
  margin-top: .9rem;
}

@media screen and (max-width: 1200px) {
  .media-split__inner {
    gap: 3rem;
    min-height: 28rem;
  }
}
@media screen and (max-width: 800px) {
  .media-split {
    padding: 5rem 0;
  }
  .media-split__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    min-height: 0;
  }
  /* stacked: back in flow at a fixed crop (no text beside it to match) */
  .media-split__image {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}
@media screen and (max-width: 576px) {
  .media-split__title {
    font-size: 1.6rem;
  }
  .media-split__desc p {
    font-size: 1rem;
  }
}

/* Image on the right on wide screens; the image stays first in the markup
   so it still leads when the columns stack. */
.media-split--reverse .media-split__media {
  order: 2;
}
@media screen and (max-width: 800px) {
  .media-split--reverse .media-split__media {
    order: 0;
  }
}

/* Back-to-back splits share one gap instead of doubling the padding */
.media-split + .media-split {
  padding-top: 0;
}


/* RESPONSIVE DESIGN STARTS HERE */
@media screen and (max-width: 800px) {
  .hire-help {
    padding: 3.5rem 0;
  }

  .hire-help__title {
    text-align: left;
  }
  .hire-help__grid {
    margin-top: 1.5rem;
  }

  .hire-help__cta-wrapper {

    margin-top: 2.5rem;
  }

  .hire-help__cta {
    width: 100%;
    text-align: center;
  }

  .results-hero__cta {
    width: 100%;
    text-align: center;
  }

  .results-hero__desc p {
    font-size: .9rem;
  }

  .results-hero__desc p:nth-child(2) {
    margin-top: .8rem;
  }

  .results-hero__cta {
    margin-top: 2rem;
  }

  .results-hero {
    min-height: auto;
  }

  .headline-breaker {
    display: none;
  }

  .results-hero {
      padding: 7rem 0 3rem;
  }

  .search-exp__grid {
    grid-template-columns: repeat(2,1fr);
    gap: .8rem;
  }

  .search-exp__client {
    font-size: .7rem;
  }

  .search-exp__role {
    font-size: .95rem;
    line-height: 1.1;
  }

  .search-exp__card {
      padding: 1rem;
  }

  .lets-talk {
      padding: 5rem 0 0;
  }

  .market-sectors {
      padding: 3rem 0;
  }

  .market-sectors__grid {
      margin-top: 1.5rem;
  }

  .market-sectors__title {
    text-align: left;
  }

  .market-sector {
    padding: 1.5rem 1rem;
  }

  .market-sector__head {
    min-height: auto;
    padding-bottom: .8rem;
  }

  .media-split__desc p {
    font-size: .9rem;
  }

  .beyond-resume {
      padding: 4rem 0;
  }

  .beyond-resume__grid {
      margin-top: 2rem;
  }

  .beyond-resume__title {
    text-align: left;
  }

  .beyond-resume__card-title {
    align-items: start;
    width: 100%;
  }

  .beyond-resume__card-text {
    text-align: left;
  }

  .contact .contact__title {
    margin-bottom: 2rem;
  }

  .market-sectors__trades {
    grid-template-columns: 1fr 1fr;
  }

  .market-trade__name {
    padding: 0;
    text-align: left;
  }
  
  .market-trade {
    justify-content: flex-start;

  }

  .media-split {
      padding: 4rem 0;
  }

  .media-split__inner {
    gap: 1.5rem;
  }

  .media-split__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: .5rem;
  }           
}