/* ==========================================================================
   KOBIL — Industries: overview (shared, Aug 2026 net-new industry pages)
   ========================================================================== */

/* The .page-surface wrapper around overview/key-use-cases/compliance
   (build.py's {"surface": [...], "variant": "industry-flat"}) is normally
   a rounded white CARD, 40px narrower than the page (page-pad eats into
   its width) with a 20px gap before it — none of that applies to this
   design: it's meant to run the full 1440px width, flush against the hero
   above it, with square corners (the section backgrounds inside handle
   their own visual separation, there's no card chrome around the group). */
.page-surface--industry-flat {
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--section-gap));
  border-radius: 0;
}

.sec-new-industry-overview {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: 100%;
  padding: var(--w80) var(--w80) 0;
}

.sec-new-industry-overview__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-overview__row {
  display: flex;
  gap: var(--w91);
  align-items: center;
}

.sec-new-industry-overview__title {
  flex: 0 0 auto;
  width: var(--w576);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.3;
  color: var(--navy);
}

.sec-new-industry-overview__desc {
  flex: 0 0 auto;
  width: var(--w488);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

@media (max-width: 768px) {
  .sec-new-industry-overview {
    padding: var(--w64) var(--w40) 0;
  }

  .sec-new-industry-overview__row {
    flex-direction: column;
    gap: var(--w24);
  }

  .sec-new-industry-overview__title,
  .sec-new-industry-overview__desc {
    width: 100%;
  }

  .sec-new-industry-overview__title {
    font-size: var(--w44);
  }
}

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

  .sec-new-industry-overview__title {
    font-size: var(--m34);
  }
}