/* ==========================================================================
   KOBIL — Industries: case-study band (Aug 2026 net-new industry pages).
   Today only Mobility uses it (Spark Connect — Figma D 7176:22436,
   M 7178:22762), but it lives in _shared like its sibling sections so the
   next industry page with a case band reuses it.
   ========================================================================== */

/* The surface paints an opaque white background and does NOT form a
   stacking context, so z-index:-1 children (this page's Figma background
   vectors — and the family's ::before radial, for that matter) would paint
   BEHIND that white and never show. Isolating the surface puts the
   negative-z layer above its own background and below every section's
   content — Figma's painting order. Scoped via :has() so only the page
   that carries this band (Mobility) changes. */
.page-surface--industry-flat:has(.sec-new-industry-case) {
  isolation: isolate;
}

.sec-new-industry-case {
  position: relative;
  width: 100%;
  /* Figma separates this band from its neighbours by 40, not the 80 the
     sibling sections bring: 40 above (overview has no bottom padding) and
     40 below — the following section's own 80 top padding minus this
     negative margin. */
  margin-top: var(--w40);
  margin-bottom: calc(-1 * var(--w40));
  padding: var(--w50) var(--w80) var(--w98);
}

/* The soft blue wash behind the band (Figma "blue" 7176:22437) — the
   original blurred vectors as one SVG, placed at the frame's own coordinates
   (the img offsets are the blur bleed the export carries: 2240x2046 canvas
   for a 1753x1314 frame). .page-surface's overflow:clip crops the bleed the
   same way Figma's page does. */
.sec-new-industry-case__wash {
  position: absolute;
  z-index: 0;
  left: calc(-1 * var(--w70));
  top: calc(-1 * var(--w62));
  width: var(--w1753);
  height: var(--w1314);
  pointer-events: none;
}

.sec-new-industry-case__wash img {
  position: absolute;
  left: -18.39%;
  top: -28.43%;
  width: 127.78%;
  height: 155.69%;
  max-width: none;
}

/* Page-level cyan glow under the band (Figma 7174:21823). The export is
   clipped to the 1440 page frame, so its x axis maps 1:1 onto the page:
   left 0 + width w1440, and only the top anchor is page math (the export's
   canvas starts at page y 746.42, the band at 1067 → -320.6 from here). */
.sec-new-industry-case__glow {
  position: absolute;
  z-index: -1;
  left: 0;
  top: calc(-1 * var(--w321));
  width: var(--w1440);
  height: var(--w2327);
  max-width: none;
  pointer-events: none;
}

/* The M-frame's own two vectors (7178:22763/22764), clipped to the 369-wide
   band box — desktop hides them, the phone block below swaps them in. */
.sec-new-industry-case__wash-m {
  display: none;
}

.sec-new-industry-case__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  max-width: var(--w958);
}

.sec-new-industry-case__tag {
  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);
}

.sec-new-industry-case__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.3;
  color: var(--navy);
}

.sec-new-industry-case__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--w72);
  margin-top: var(--w64);
}

.sec-new-industry-case__left {
  flex: 0 0 auto;
  width: var(--w594);
}

.sec-new-industry-case__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--w32);
}

.sec-new-industry-case__block {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
}

.sec-new-industry-case__label {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 700;
  line-height: var(--w23);
  color: var(--navy);
}

.sec-new-industry-case__body {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

.sec-new-industry-case__list {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sec-new-industry-case__item {
  display: flex;
  align-items: flex-start;
  gap: var(--w12);
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

.sec-new-industry-case__check {
  flex: 0 0 auto;
  width: var(--w20);
  height: var(--w20);
  margin-top: var(--w3);
}

.sec-new-industry-case__buttons {
  display: flex;
  align-items: center;
  gap: var(--w21);
  margin-top: var(--w48);
}

.sec-new-industry-case__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--w8);
  height: var(--w40);
  padding: var(--w4) var(--w12) var(--w4) var(--w16);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w14);
  font-weight: 600;
  line-height: var(--w18);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.sec-new-industry-case__btn img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.sec-new-industry-case__btn:hover img {
  transform: translateX(3px);
}

.sec-new-industry-case__btn--primary {
  background: var(--navy);
  color: var(--white);
}

.sec-new-industry-case__btn--primary:hover {
  background: var(--btn-blue);
}

.sec-new-industry-case__btn--secondary {
  border: 1px solid var(--navy);
  color: var(--navy);
}

.sec-new-industry-case__btn--secondary:hover {
  background: var(--navy-20);
}

.sec-new-industry-case__media {
  flex: 0 0 auto;
  width: var(--w614);
  height: var(--w522);
  margin: 0;
  border-radius: var(--w12);
  overflow: hidden;
}

.sec-new-industry-case__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Phone (≤768px) — Figma M 7178:22762: title, image, text blocks, buttons.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .sec-new-industry-case {
    padding: var(--m50) var(--m24) var(--m48);
  }

  .sec-new-industry-case__wash,
  .sec-new-industry-case__glow {
    display: none;
  }

  .sec-new-industry-case__wash-m {
    display: block;
    position: absolute;
    left: calc((100% - var(--m369)) / 2);
    z-index: 0;
    max-width: none;
    pointer-events: none;
  }

  .sec-new-industry-case__wash-m--top {
    top: 0;
    width: var(--m369);
    height: var(--m600);
  }

  .sec-new-industry-case__wash-m--bottom {
    top: var(--m28);
    width: var(--m369);
    height: var(--m1106);
  }

  .sec-new-industry-case__head {
    gap: var(--m24);
  }

  .sec-new-industry-case__title {
    font-size: var(--m32);
  }

  /* Image moves between the title and the text (column-reverse puts the
     media figure first, the text column after it). */
  .sec-new-industry-case__content {
    flex-direction: column-reverse;
    gap: var(--m32);
    margin-top: var(--m24);
  }

  .sec-new-industry-case__left {
    width: 100%;
  }

  .sec-new-industry-case__blocks {
    gap: var(--m24);
  }

  .sec-new-industry-case__label {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-new-industry-case__body,
  .sec-new-industry-case__item {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-new-industry-case__check {
    width: var(--m18);
    height: var(--m18);
    margin-top: var(--m3);
  }

  .sec-new-industry-case__buttons {
    gap: var(--m21);
    margin-top: var(--m32);
  }

  .sec-new-industry-case__btn {
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14);
    line-height: var(--m18);
  }

  .sec-new-industry-case__btn img {
    width: var(--m18);
    height: var(--m18);
  }

  .sec-new-industry-case__media {
    width: 100%;
    height: auto;
    aspect-ratio: 337 / 314;
    border-radius: var(--m12);
  }
}