/* ==========================================================================
   page-careers.css — Careers page only.
   Loaded after css/styles.css. Nothing here may be relied on by other pages.
   Palette: cream field #f2f1ea, charcoal #252525, sage panels via .nicholii-sage,
   forest #2c3a2f icons on light, yellow #f9ffaa scarce and never an icon colour
   on a light surface. No keylines on buttons. Label pills keep their hairline.
   ========================================================================== */

/* --- Hero media: the video slot now carries a real photograph ------------- */
.about-hero_video.is-photo {
  overflow: hidden;
  height: 20.625rem;
}

.about-hero_video.is-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 05 Values: forest icons on the light cream field, never yellow ------- */
.stats_list_single .combo-tabs_icon-title {
  color: #2c3a2f;
}

.stats_list_single .combo-tabs_link_title {
  display: flex;
  align-items: center;
  gap: var(--spacing--12);
}

/* --- 06 Open roles: Apply sits under the blurb, left aligned -------------- */
.role_apply {
  align-self: flex-start;
}

/* --- Responsive ---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .about-hero_video.is-photo {
    width: 100%;
    height: 14rem;
  }
}

/* The template drops .team_grid to two columns under 767px. "How we work"
   carries a full body paragraph per item (not a one-liner like the numbered
   lists elsewhere), so two columns reads as two cramped ribbons on a phone.
   One column on small screens. */
@media screen and (max-width: 600px) {
  .section_team .team_grid {
    grid-template-columns: 1fr;
  }
}

/* Close the dead space between the closing band and the footer. */
.section_contact-left {
  padding-top: var(--section-padding--small);
  padding-bottom: var(--spacing--48);
}
.section_contact-left .contact-left_headline { gap: var(--spacing--24); }