/* ==========================================
   Careers Hero Section
   ========================================== */

/* Black ground, with both decorative layers as their own absolutely-positioned
   <img> elements rather than CSS backgrounds: the careers backdrop first, the
   orange glow over it. Both sit at z-index -1 behind .careers-hero-inner, so
   DOM order is what stacks them against each other. */
.careers-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--black);
}

.careers-hero-bg {
  position: absolute;
  width: 2560px;
  height: 2803px;
  object-fit: cover;
  object-position: top center;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  top: -29%;
  left: 50%;
  transform: translateX(-50%);
}

.careers-hero-gradient {
  position: absolute;
  top: var(--announcement-bar-height, 34px);
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  min-width: 1440px;
}

/* Adds back the header height that .hero-spacing pulls off in header.php. */
.careers-hero-inner {
  --hero-top-space: 100px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: calc(var(--header-height, 0px) + var(--hero-top-space));
  padding-bottom: 100px;
  @media (max-width: 1179px) {
    --hero-top-space: 80px;
    gap: 32px;
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    --hero-top-space: 60px;
    padding-bottom: 60px;
  }
}

.careers-hero-heading {
  align-items: flex-start;
  text-align: left;
}

.careers-hero-inner .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

.careers-hero-body {
  display: grid;
  grid-template-columns: 1fr 1.207fr;
  align-items: stretch;
  gap: 60px;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.careers-hero-media {
  position: relative;
}

.careers-hero-media img {
  border-radius: var(--radius-8);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 580 / 322;
}

.careers-hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.careers-hero-description {
  margin: 0;
  color: var(--gray);
  font: var(--body-b1);
}

.careers-hero-actions {
  display: flex;
}

/* Credentials card — one row per credential: IFS badge on the left, the
   headline stat it backs up on the right. */
.careers-hero-credentials {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding: 32px 28px 32px 32px;
  border: 1px solid var(--off-black);
  border-radius: var(--radius-8);
  background-color: var(--dark);
  margin-top: 12px;
  @media (max-width: 1179px) {
    gap: 28px;
    padding: 28px;
    margin-top: 0;
  }
  @media (max-width: 767px) {
    gap: 24px;
    padding: 24px;
  }
}

.careers-hero-credential {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  @media (max-width: 700px) {
    grid-template-columns: 1fr;
  }
}

.careers-hero-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  @media (max-width: 700px) {
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}

.careers-hero-badge-icon {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.careers-hero-badge-text,
.careers-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  @media (max-width: 600px) {
    gap: 6px;
  }
}

.careers-hero-badge-title,
.careers-hero-stat-value {
  color: var(--white);
  font: var(--body-b1);
}

.careers-hero-badge-subtitle,
.careers-hero-stat-label {
  color: var(--gray);
  font: var(--body-b3);
}

@media (max-width: 1179px) {
  .careers-hero-content {
    display: contents;
  }

  .careers-hero-description {
    order: 1;
  }

  .careers-hero-actions {
    order: 2;
  }

  .careers-hero-media {
    order: 3;
    margin-top: 40px;
  }

  .careers-hero-credentials {
    order: 4;
  }
}

/* ==========================================
   Why Coredrive
   ========================================== */

.careers-why {
  padding: 100px 0;
  position: relative;
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.careers-why-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.careers-why-inner .title-section {
  z-index: 1;
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

/* Photo left, copy right. Top-aligned so the list is free to run on past the
   bottom of the photo. */
.careers-why-body {
  display: grid;
  grid-template-columns: 1fr 1.375fr;
  align-items: start;
  gap: 80px;
  z-index: 1;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  @media (max-width: 767px) {
    gap: 40px;
  }
}

.careers-why-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-8);
}

.careers-why-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  @media (max-width: 1179px) {
    gap: 32px;
  }
  @media (max-width: 767px) {
    gap: 28px;
  }
}

.careers-why-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  @media (max-width: 767px) {
    gap: 16px;
  }
}

.careers-why-text p {
  margin: 0;
  color: var(--off-black);
  font: var(--body-b2);
}

.careers-why-points {
  display: flex;
  flex-direction: column;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  @media (max-width: 1179px) {
    gap: 24px;
  }
  @media (max-width: 767px) {
    gap: 20px;
  }
}

.careers-why-points li {
  position: relative;
  padding-left: 34px;
  color: var(--off-black);
  font: var(--body-b2);
  @media (max-width: 767px) {
    padding-left: 28px;
  }
}

.careers-why-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  background: linear-gradient(
    90deg,
    var(--burnt-orange) 0%,
    var(--light-orange) 100%
  );
  border-radius: var(--radius-1);
  @media (max-width: 767px) {
    width: 8px;
    height: 8px;
  }
}

.careers-why-bottom-bg {
  position: absolute;
  left: 0;
  width: 100%;
  top: -47%;
  pointer-events: none;
  @media (max-width: 1179px) {
    display: none;
  }
}

.careers-why-bottom-bg img {
  width: 100%;
  height: 100%;
  max-height: 2803px;
  pointer-events: none;
}

/* ==========================================
   Who We Are
   ========================================== */

.careers-who {
  position: relative;
  z-index: 1;
  padding: 100px 0;
  background-color: var(--pearl);
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.careers-who-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.careers-who-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.careers-who-head .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

.careers-who-intro {
  align-self: flex-end;
  max-width: 720px;
  margin: 0;
  color: var(--off-black);
  font: var(--body-b2);
  @media (max-width: 1179px) {
    align-self: stretch;
    max-width: 100%;
  }
}

/* Bento grid. Desktop runs on 6 tracks so a card can take a third (2), a half
   (3) or the full row (6); the last row is rebalanced from the card count
   alone, so any number of cards fills its rows:
   - n % 3 == 2 → the last two cards are halves        (5 = 3 + 2)
   - n % 3 == 1 → the last four cards are halves       (4 = 2 + 2, 7 = 3 + 2 + 2)
   - a single card spans the whole row.
   The 4th-from-last card sitting at a 3n+1 position is exactly the n % 3 == 1
   case, and the same test on the 2nd-from-last is the n % 3 == 2 case.
   Shared by the What We Offer cards, so both grids fit their rows the same way. */
.careers-who-grid,
.careers-offer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  @media (max-width: 1179px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  @media (max-width: 767px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1180px) {
  .careers-who-card,
  .careers-offer-card {
    grid-column: span 2;
  }

  .careers-who-card:nth-last-child(2):nth-child(3n + 1),
  .careers-who-card:nth-last-child(2):nth-child(3n + 1) ~ .careers-who-card,
  .careers-who-card:nth-last-child(4):nth-child(3n + 1),
  .careers-who-card:nth-last-child(4):nth-child(3n + 1) ~ .careers-who-card,
  .careers-offer-card:nth-last-child(2):nth-child(3n + 1),
  .careers-offer-card:nth-last-child(2):nth-child(3n + 1) ~ .careers-offer-card,
  .careers-offer-card:nth-last-child(4):nth-child(3n + 1),
  .careers-offer-card:nth-last-child(4):nth-child(3n + 1)
    ~ .careers-offer-card {
    grid-column: span 3;
  }

  .careers-who-card:only-child,
  .careers-offer-card:only-child {
    grid-column: 1 / -1;
  }
}

/* Two columns: an odd card out takes the full last row. */
@media (min-width: 768px) and (max-width: 1179px) {
  .careers-who-card:last-child:nth-child(odd),
  .careers-offer-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.careers-who-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-radius: var(--radius-12);
  background-color: var(--white);
  @media (max-width: 1179px) {
    padding: 28px;
    gap: 20px;
  }
  @media (max-width: 767px) {
    padding: 24px;
    gap: 16px;
  }
}

.careers-who-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.careers-who-card-title {
  margin: 0;
  color: var(--off-black);
  font: var(--heading-h5);
  letter-spacing: var(--letter-spacing-m1);
}

.careers-who-card-icon {
  display: flex;
  flex-shrink: 0;
}

.careers-who-card-icon svg {
  display: block;
  width: 42px;
  height: 42px;
  @media (max-width: 767px) {
    width: 38px;
    height: 38px;
  }
}

.careers-who-card-text {
  max-width: 440px;
  margin: 0;
  color: var(--graphite);
  font: var(--body-b3);
}

/* careers content section */

.careers-content-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 100px;
  @media (max-width: 1179px) {
    padding: 80px 0;
    gap: 80px;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
    gap: 60px;
  }
}

.careers-content-bg {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  pointer-events: none;
  @media (max-width: 1179px) {
    display: none;
  }
}

.careers-content-bg img {
  width: 100%;
  height: 100%;
  max-height: 2803px;
  pointer-events: none;
}

/* ==========================================
   What We Offer
   ========================================== */

.careers-offer {
  position: relative;
  z-index: 1;
}

.careers-offer-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.careers-offer-inner .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

/* Both faces share one grid cell, so the card is as tall as the taller face.
   Each face carries its own background so the whole card turns over. */
.careers-offer-card {
  display: grid;
  outline: none;
  perspective: 1200px;
}

.careers-offer-card-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--radius-12);
  background-color: var(--pearl);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  @media (max-width: 1179px) {
    padding: 28px;
  }
  @media (max-width: 767px) {
    padding: 24px;
  }
}

.careers-offer-card-front {
  justify-content: space-between;
  gap: 40px;
  @media (max-width: 1179px) {
    justify-content: unset;
    gap: 28px;
  }
  @media (max-width: 767px) {
    gap: 24px;
  }
}

.careers-offer-card-back {
  background-color: var(--ash);
  @media (max-width: 1179px) {
    display: none;
  }
}

/* Flip is desktop-only; tablet and mobile show just the front face. The back
   starts turned away and both faces rotate the same way on hover. */
@media (min-width: 1180px) {
  .careers-offer-card-back {
    transform: rotateY(-180deg);
  }

  .careers-offer-card:hover .careers-offer-card-front,
  .careers-offer-card:focus-within .careers-offer-card-front {
    transform: rotateY(180deg);
  }

  .careers-offer-card:hover .careers-offer-card-back,
  .careers-offer-card:focus-within .careers-offer-card-back {
    transform: rotateY(0deg);
  }
}

.careers-offer-card-icon {
  display: flex;
}

.careers-offer-card-icon svg {
  display: block;
  width: 42px;
  height: 42px;
  @media (max-width: 767px) {
    width: 38px;
    height: 38px;
  }
}

.careers-offer-card-title {
  margin: 0;
  color: var(--dark);
  font: var(--heading-h5);
  letter-spacing: var(--letter-spacing-m1);
}

.careers-offer-card-text {
  margin: 0;
  color: var(--off-black);
  font: var(--body-b3);
}

.careers-offer-card-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  @media (max-width: 1179px) {
    gap: 16px;
  }
  @media (max-width: 767px) {
    gap: 12px;
  }
}

.careers-offer-card-content .careers-offer-card-text {
  display: none;
  @media (max-width: 1179px) {
    display: flex;
  }
}

/* ==========================================
   Open Roles
   ========================================== */

.careers-roles {
  position: relative;
  z-index: 1;
  scroll-margin-top: calc(var(--header-height, 80px) + 15px);
}

.careers-roles-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.careers-roles-inner .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

.careers-roles-board {
  border-radius: var(--radius-12);
  background-color: var(--pearl);
}

/* ==========================================
   careers faqs
   ========================================== */

.careers-faqs {
  position: relative;
  z-index: 1;
}

.careers-faqs-inner {
  display: grid;
  grid-template-columns: 1fr 1.164fr;
  gap: 60px;
  align-items: start;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.careers-faqs-inner .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

.careers-faqs-list {
  padding-top: 32px;
  @media (max-width: 1179px) {
    padding-top: 0;
  }
}

/* ==========================================
   careers culture
   ========================================== */

.careers-culture {
  position: relative;
  z-index: 1;
}

.careers-culture-inner {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr 1.5fr;
  }
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.careers-culture-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-12);
  @media (max-width: 768px) {
    height: auto;
  }
}

.careers-culture-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 80px;
  border-radius: var(--radius-12);
  background-color: var(--pearl);
  margin-left: -20px;
  @media (max-width: 1179px) {
    gap: 32px;
    padding: 60px;
  }
  @media (max-width: 768px) {
    gap: 28px;
    padding: 32px;
    margin-left: 0;
    margin-top: -20px;
  }
  @media (max-width: 767px) {
    gap: 24px;
    padding: 24px;
  }
}

.careers-culture-panel .title-section {
  max-width: 100%;
}

.careers-culture-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 604px;
  width: 100%;
  align-self: flex-end;
  @media (max-width: 1179px) {
    gap: 28px;
    align-self: flex-start;
    max-width: 100%;
  }
  @media (max-width: 767px) {
    gap: 24px;
  }
}

.careers-culture-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.careers-culture-text p {
  margin: 0;
  color: var(--off-black);
  font: var(--body-b3);
}

.careers-culture-author {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.careers-culture-author-name {
  margin: 0;
  color: var(--black);
  font: var(--body-b2);
}

.careers-culture-author-role {
  margin: 0;
  color: var(--graphite);
  font: var(--body-b3);
}

/* ==========================================
   careers testimonials
   ========================================== */

/* The head sits in a .container; the slider below is a full-width sibling of
   it, so the two are spaced from here rather than from a shared inner wrap. */
.careers-testimonials {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.careers-testimonials .container {
  width: 100%;
}

.careers-testimonials-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  @media (max-width: 767px) {
    flex-direction: column;
    align-items: flex-end;
  }
}

.careers-testimonials-head .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

/* ==========================================
   Slider navigation
   ========================================== */

/* One set of arrows for both sliders on this page — the testimonials and the
   life-at-Coredrive strip. They differ only in the resting fill of the prev
   button, which each section states for itself below its own rules. */
.careers-slider-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.careers-slider-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: var(--radius-8);
  background-color: var(--burnt-orange);
  color: var(--white);
  box-shadow: none;
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.careers-slider-nav-btn:hover,
.careers-slider-nav-btn:focus {
  background-color: var(--burnt-orange);
  color: var(--white);
}

/* After the hover rule on purpose: same specificity, so a disabled button that
   is hovered still reads as disabled. */
.careers-slider-nav-btn:disabled {
  background-color: var(--soft-peach);
  color: var(--coral-peach);
  cursor: not-allowed;
}

.careers-slider-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.careers-slider-nav-icon svg {
  display: block;
  overflow: hidden;
  width: 24px;
  height: 24px;
}

.careers-slider-nav-prev .careers-slider-nav-icon {
  transform: scaleX(-1);
}

/* The arrow ships stacked: the default sits in place and the hover copy waits
   one width to the left, so hovering slides one out as the other slides in. */
.careers-slider-nav-icon .default-arrow,
.careers-slider-nav-icon .hover-arrow {
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.careers-slider-nav-icon .default-arrow {
  transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 1;
}

.careers-slider-nav-icon .hover-arrow {
  transform: translate3d(-100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 0;
}

.careers-slider-nav-btn:hover:not(:disabled)
  .careers-slider-nav-icon
  .default-arrow {
  transform: translate3d(100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 0;
}

.careers-slider-nav-btn:hover:not(:disabled)
  .careers-slider-nav-icon
  .hover-arrow {
  transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
    rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  opacity: 1;
}

/* ==========================================
   Slider track
   ========================================== */

.careers-testimonials-viewport {
  overflow: hidden;
}

.careers-testimonials-track {
  --tst-card-w: 416px;
  --tst-gap: 24px;
  display: flex;
  align-items: stretch;
  gap: var(--tst-gap);
  will-change: transform;
  touch-action: pan-y;
  @media (max-width: 1179px) {
    --tst-gap: 20px;
    --tst-card-w: 408px;
  }
  @media (max-width: 449px) {
    --tst-card-w: 100%;
  }
}

.careers-testimonials.is-ready .careers-testimonials-track {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.careers-testimonials.is-dragging .careers-testimonials-track {
  transition: none;
}

.careers-testimonials-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 min(var(--tst-card-w), 100%);
  margin: 0;
  padding: 32px;
  border-radius: var(--radius-12);
  background-color: var(--pearl);
  @media (max-width: 1179px) {
    padding: 28px;
    gap: 28px;
  }
  @media (max-width: 767px) {
    gap: 24px;
    padding: 24px;
  }
}

.careers-testimonials-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  height: 100%;
  justify-content: space-between;
  @media (max-width: 1179px) {
    gap: 60px;
  }
  @media (max-width: 767px) {
    gap: 40px;
  }
}

.careers-testimonials-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.careers-testimonials-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  border: 1px solid var(--light-silver);
  overflow: hidden;
}

.careers-testimonials-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.careers-testimonials-quote-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.careers-testimonials-quote-icon svg {
  display: block;
  width: 42px;
  height: 36px;
}

.careers-testimonials-quote {
  flex: 1;
}

.careers-testimonials-quote p {
  margin: 0;
  color: var(--off-black);
  font: var(--body-b1);
}

.careers-testimonials-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.careers-testimonials-author-name {
  margin: 0;
  color: var(--dark);
  font: var(--body-b2);
}

.careers-testimonials-author-role {
  margin: 0;
  color: var(--graphite);
  font: var(--body-b5);
}

/* ==========================================
   careers life at coredrive
   ========================================== */
.careers-life {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.careers-life .container {
  width: 100%;
}

.careers-life-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  @media (max-width: 767px) {
    flex-direction: column;
    align-items: flex-end;
  }
}

.careers-life-head .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

.careers-life-marquee {
  overflow: hidden;
}

.careers-life-track {
  --life-img-h: 320px;
  --life-gap: 24px;
  --life-photo-seconds: 8;
  display: flex;
  width: max-content;
  will-change: transform;
  animation: careers-life-scroll
    calc(var(--life-count, 4) * var(--life-photo-seconds) * 1s) linear infinite;
  @media (max-width: 1179px) {
    --life-img-h: 240px;
    --life-gap: 20px;
  }
  @media (max-width: 767px) {
    --life-img-h: 200px;
  }
}

.careers-life-list {
  display: flex;
  gap: var(--life-gap);
  padding: 0 var(--life-gap) 0 0;
  margin: 0;
  list-style: none;
}

.careers-life-item {
  flex: 0 0 auto;
}
.careers-life-item img {
  display: block;
  height: var(--life-img-h);
  width: auto;
  max-width: none;
  border-radius: var(--radius-12);
}

@keyframes careers-life-scroll {
  to {
    transform: translateX(calc(-100% / var(--life-copies, 2)));
  }
}

.careers-life.is-ready .careers-life-track {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .careers-life-track {
    animation: none;
  }
  .careers-offer-card-face {
    transition: none;
  }
  .careers-testimonials.is-ready .careers-testimonials-track {
    transition: none;
  }

  .careers-slider-nav-icon .default-arrow,
  .careers-slider-nav-icon .hover-arrow {
    transition: none;
  }
}