/* ==========================================================================
   KOBIL — Company — Section: Careers
   Figma D-Company 5882:51207 "WE ARE KOBIL" (full-bleed 1440x836 — copy 738
   wide at 120/80, marquee band 1360 wide at 40/330) ·
   M-Company 5882:51511 (393x616 — copy at 16/60, 56px tiles).
   The Aug-2026 frame drops the old contact button.
   Eyebrow + H3 + text top left, team photo marquee (3 endlessly scrolling
   rows of 90px tiles, row 1+3 right→left, row 2 left→right, edges faded
   out on both sides via mask), contact button with corner notch bottom
   center. Blur vectors from Figma baked in as bg-wash.webp, white diamond
   blobs ("team line") positioned exactly as SVG.
   ========================================================================== */

.sec-company-careers {
  position: relative;
  overflow: clip;
  background: #fff url("/assets/company/careers/bg-wash.webp") no-repeat center top / cover;
}

/* Height budget: 80 + 173 (head) + 77 + 352 (marquee) + 154 = 836 */
.sec-company-careers__inner {
  position: relative;
  padding: var(--w80) var(--w120) var(--w154);
}

/* ---- Decoration: blue blur blobs in the background (Figma 16769:21218-21221,
   behind the mosaic) + white diamond blobs "team line" (Figma
   16769:21270/21271, above the mosaic). All values = Figma layout box of
   the frame "WE ARE KOBIL" (16769:21217, 1280×836) + padding of .inner
   (40 left, 80 top), since absolutely positioned children count from the
   padding box's outer edge, not from the content box. No rotate needed —
   the target geometry is already baked into the SVG path. ---- */

.sec-company-careers__blob {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.sec-company-careers__blob--blue {
  z-index: 0;
}

/* 16769:21218 — #013DD5, blur 300 */
.sec-company-careers__blob--blue-1 {
  left: -1347.88px;
  top: -288.1px;
  width: 2806.11px;
  height: 2753.9px;
}

/* 16769:21219 — #3E5EFC, blur 250 */
.sec-company-careers__blob--blue-2 {
  left: -128.46px;
  top: -77px;
  width: 2202.41px;
  height: 2520.09px;
}

/* 16769:21220 — #9AF5FF, blur 198.5 */
.sec-company-careers__blob--blue-3 {
  left: -418.98px;
  top: -99.35px;
  width: 2182.59px;
  height: 2297.16px;
}

/* 16769:21221 — #3EBFFC, blur 250 */
.sec-company-careers__blob--blue-4 {
  left: -467.13px;
  top: -772.75px;
  width: 1939.6px;
  height: 1718.18px;
}

.sec-company-careers__blob--tr,
.sec-company-careers__blob--bl {
  z-index: 3;
}

/* 16769:21271 — arc top right */
.sec-company-careers__blob--tr {
  left: 318.32px;
  top: -1071px;
  width: 1970.02px;
  height: 1453.48px;
}

/* 16769:21270 — arc bottom left */
.sec-company-careers__blob--bl {
  left: -743.68px;
  top: 466.93px;
  width: 1970.02px;
  height: 1442.05px;
}

/* ---- Header row ---- */

.sec-company-careers__head {
  position: relative;
  z-index: 4;
  max-width: var(--w738);
}

/* Figma tag: IBM Plex Mono 12/18, tracking 0.48 */
.sec-company-careers__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
  /* Figma's `tag` is a cap-trimmed 8px box, so its 12/18 line box is 5px
     taller on each side. Pulling those back in keeps every y below it on
     the frame's own numbers. */
  margin-block: calc(-1 * var(--w5));
}

/* Serif line + the KOBIL wordmark set in Instrument Sans Bold 50/62 */
.sec-company-careers__title {
  margin-top: var(--w28);
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.sec-company-careers__title-accent {
  margin-left: var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w50);
  font-weight: 700;
  line-height: var(--w62);
  /* Figma 5948:96848 "Linear 2" — gradient clipped to the wordmark, not flat blue */
  background-image: linear-gradient(
    90deg,
    #3ebffc 3.5%,
    #1046cf 13.2%,
    #696ef5 41.2%,
    #ca80f4 63.6%,
    #ffc4a0 99.4%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: #696ef5;
  -webkit-text-fill-color: transparent;
}

/* Body L: 18/26 */
.sec-company-careers__text {
  margin-top: var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* ---- Team photo marquee (Figma "images": tiles 90px, gap 70, row gap 40)
   3 rows, each doubles its tile list in the markup; the animation runs
   from translateX(0) to -50%, so the second half seamlessly replaces the
   first — endless loop with no jump. Row 2 runs in the opposite direction
   (animation-direction: reverse). Left/right edges faded out via mask. */
.sec-company-careers__mosaic {
  position: relative;
  z-index: 1;
  /* Figma "images" runs 1360 wide at x=40 in the 1440 frame, so it bleeds
     80px past .inner's 120px side padding on each side. */
  width: calc(100% + var(--w160));
  margin: var(--w77) 0 0 calc(-1 * var(--w80));
  display: flex;
  flex-direction: column;
  gap: var(--w40);
  /* Fade only on the left (Figma mask 1360x740: transparent up to 74.5px,
     30% at 213px, opaque from 308.6px) — on the right the gradient panel
     (.sec-company-careers__fade) handles the transition, no second fade needed. */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 74.5px, rgba(0, 0, 0, 0.3) 213px, #000 308.6px);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 74.5px, rgba(0, 0, 0, 0.3) 213px, #000 308.6px);
}

.sec-company-careers__track {
  display: flex;
  gap: var(--w70);
  width: max-content;
  animation: sec-company-careers-marquee 76s linear infinite;
  will-change: transform;
}

.sec-company-careers__row--reverse .sec-company-careers__track {
  animation-direction: reverse;
}

@keyframes sec-company-careers-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sec-company-careers__track {
    animation: none;
  }
}

.sec-company-careers__tile {
  position: relative;
  flex: none;
  width: var(--w90);
  height: var(--w90);
  box-shadow: 11px 9px 35px 0 rgba(17, 69, 203, 0.18);
}

/* Figma fill: image, scale "contain", gaps gray instead of cropping.
   Radius + clip live on the img (not the tile) so the tile's own
   box-shadow isn't clipped by an overflow:hidden on the same box. */
.sec-company-careers__tile img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--w8);
  overflow: hidden;
  object-fit: contain;
  object-position: 50% 50%;
  background-color: lightgray;
}

/* 1px border sits over the image as in Figma */
.sec-company-careers__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #fff;
  border-radius: var(--w8);
  pointer-events: none;
}

/* ---- Right gradient panel (Figma 16769:21269, 450px, above the mosaic,
   fades the marquee into the section background on the right) ---- */

.sec-company-careers__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--w450);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(89.6deg, rgba(239, 243, 255, 0) 0.655%, rgb(239, 244, 255) 82.264%);
}

/* ---- Tablet (≤1024): narrower marquee bleed, mask closer to the edge ---- */

@media (max-width: 1024px) {
  .sec-company-careers__inner {
    padding: var(--w64) var(--w32);
  }

  .sec-company-careers__mosaic {
    width: calc(100% + var(--w64));
    margin: var(--w72) 0 0 calc(-1 * var(--w32));
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 140px, #000 calc(100% - 140px), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 140px, #000 calc(100% - 140px), rgba(0, 0, 0, 0));
  }

  .sec-company-careers__fade {
    display: none;
  }

}

/* ---- Mobile (Figma M-Company 16578:18888: tiles 56px, gap 32,
   text from y=60, button 40px tall, 60px baseline padding) ---- */

@media (max-width: 768px) {
  .sec-company-careers__inner {
    padding: var(--m60) var(--m16) var(--m74);
  }

  .sec-company-careers__blob {
    display: none;
  }

  /* Figma's phone copy column is 313 wide, which is what wraps the headline
     onto its second line ("KOBIL" alone). */
  .sec-company-careers__head {
    max-width: var(--m313);
  }

  .sec-company-careers__eyebrow {
    font-size: var(--m12);
    line-height: var(--m18);
    margin-block: calc(-1 * var(--m5));
  }

  .sec-company-careers__title {
    margin-top: var(--m24);
    font-size: var(--m34);
    line-height: 1.2;
  }

  .sec-company-careers__title-accent {
    margin-left: var(--m8);
    font-size: var(--m32);
    line-height: var(--m42);
  }

  .sec-company-careers__text {
    margin-top: var(--m12);
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .sec-company-careers__mosaic {
    width: calc(100% + var(--m32));
    /* 32 to the images frame plus its own 20.5 inset before the first row */
    margin: var(--m52) 0 0 calc(-1 * var(--m16));
    gap: var(--m32);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0));
  }

  /* Tiles 56px, gap 32, row spacing 88 (Figma M: y 7.5/95.5/183.5) */
  .sec-company-careers__track {
    gap: var(--m32);
    animation-duration: 30s;
  }

  .sec-company-careers__tile {
    width: var(--m56);
    height: var(--m56);
    box-shadow: 7px 6px 22px 0 rgba(17, 69, 203, 0.18);
  }



}