/* ==========================================
   Industries Detail — Hero Section
   ========================================== */

.industries-hero {
  --hero-top-space: 100px;
  padding-top: calc(var(--header-height, 0px) + var(--hero-top-space));
  padding-bottom: 100px;
  overflow: hidden;
  background: linear-gradient(
    280.52deg,
    var(--pearl-bush) -86.98%,
    var(--white) 63.16%
  );
  @media (max-width: 1179px) {
    --hero-top-space: 80px;
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    --hero-top-space: 60px;
    padding-bottom: 60px;
  }
}

.industries-hero-inner {
  display: grid;
  grid-template-columns: 1.968fr 1fr;
  gap: 32px;
  position: relative;
  z-index: 1;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.industries-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
  @media (max-width: 1179px) {
    gap: 32px;
  }
}

.industries-hero-copy .title-section {
  max-width: 790px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.industries-hero-bottom {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  @media (max-width: 1179px) {
    flex-direction: column;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.industries-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 494px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

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

.industries-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.industries-hero-media {
  margin: 0;
}

.industries-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-8);
  @media (max-width: 1179px) {
    height: auto;
  }
}

.industries-hero-bottom .industries-hero-inset {
  @media (max-width: 1179px) {
    display: none;
  }
}

.hero-image-wrapper .industries-hero-inset {
  display: none;
  @media (max-width: 1179px) {
    display: block;
  }
}

/* A grid at every width: on desktop it keeps the main figure stretched to the
   row height, which the image's height: 100% depends on. Below desktop it puts
   both images side by side, the small one sitting on the tall one's baseline. */
.hero-image-wrapper {
  display: grid;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr 1.45fr;
    align-items: end;
    gap: 32px;
  }
  @media (max-width: 767px) {
    gap: 24px;
    grid-template-columns: 1fr;
  }
}

.industries-hero-inset {
  max-width: 284px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.hero-image-wrapper .industries-hero-inset img {
  @media (max-width: 1179px) {
    aspect-ratio: 284 / 188;
  }
}

.hero-image-wrapper .industries-hero-main img {
  @media (max-width: 1179px) {
    aspect-ratio: 412 / 533;
  }
}

.industries-hero-bottom-bg {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  min-width: 2560px;
  @media (max-width: 1179px) {
    display: none;
  }
}

.industries-hero-bottom-bg img {
  width: 100%;
  height: auto;
  max-height: 1917px;
}

/* the challenge section */
.the-challenge-section {
  padding: 100px 0;
  @media (max-width: 1179px) {
    padding: 80px 0;
  }
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}

.the-challenge-section .about-problem-bottom-section {
  position: relative;
  z-index: 1;
}

.the-challenge-section .about-problem-bottom-section .title-section {
  max-width: 720px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.the-challenge-section
  .about-problem-bottom-section
  .about-problem-bottom-description {
  max-width: 552px;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

/* ==========================================
   Industries Detail — Relevant Capabilities
   ========================================== */

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

/* Tag alone in the narrow column, heading and cards together in the wide one. */
.relevant-capabilities-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: flex-start;
  @media (max-width: 1179px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.capabilities-tag {
  display: flex;
  gap: 8px;
}

.capabilities-tag svg {
  min-width: 12px;
  margin-top: 5px;
}

.capabilities-tag-title {
  font: var(--tag);
  color: var(--burnt-orange);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-2);
}

/* Pinned to the wide track: the tag is optional, and without this an absent
   `.capabilities-tag` would let this auto-place into the narrow first column.
   Released below 1179px, where the grid is a single column and column 2 would
   be an implicit track. */
.capabilities-content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media (max-width: 1179px) {
    grid-column: auto;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.capabilities-heading {
  font: var(--heading-h2);
  color: var(--dark);
  letter-spacing: var(--letter-spacing-m2);
  margin: 0;
  /* Per-instance override: set inline from the component's heading_max_width arg. */
  max-width: var(--capabilities-heading-max-width, 562px);
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  @media (max-width: 767px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* Odd card count: the last one has no partner, so it widens to the full row. */
.capability-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.capability-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--radius-12);
  background-color: var(--white);
  text-decoration: none;
  @media (max-width: 1179px) {
    padding: 28px;
  }
  @media (max-width: 767px) {
    padding: 24px;
  }
}

.capability-card-number {
  font: var(--body-b4);
  color: var(--slate);
  margin-bottom: 32px;
  @media (max-width: 1179px) {
    margin-bottom: 28px;
  }
  @media (max-width: 767px) {
    margin-bottom: 24px;
  }
}

.capability-card-title {
  font: var(--heading-h5);
  color: var(--off-black);
  letter-spacing: var(--letter-spacing-m1);
  margin: 0 0 12px;
  @media (max-width: 767px) {
    margin: 0 0 8px;
  }
}

.capability-card-text {
  font: var(--body-b3);
  color: var(--graphite);
  margin: 0 0 20px;
  @media (max-width: 767px) {
    margin-bottom: 16px;
  }
}

/* The label flows as text so it can wrap; the arrow sits inline on the last
   word, which is nowrap, so the two never break apart. The `.link-component`
   defaults from link.css are overridden through a descendant selector so the
   result does not depend on which stylesheet is enqueued last. */
.capability-card-link {
  margin-top: auto;
  color: var(--burnt-orange);
}

.capability-card-link .link-component {
  display: block;
  gap: 0;
  font: var(--button);
}

.capability-card-link .link-lastword {
  white-space: nowrap;
}

.capability-card-link .link-component .link-arrow {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
}

.capability-card-link .link-component .link-arrow svg {
  display: inline-flex;
  vertical-align: middle;
}

.capability-card:hover .link-arrow svg {
  transform: rotate(-45deg);
}

/* ==========================================
   Industries Detail — Why Industries Matter
   ========================================== */

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

.why-matters-wrapper {
  display: flex;
  flex-direction: column;
  gap: 100px;
  position: relative;
  z-index: 1;
  @media (max-width: 1179px) {
    gap: 80px;
  }
  @media (max-width: 767px) {
    gap: 60px;
  }
}

/* ---- 1. Why it matters ---- */

.why-matters-top {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--stone);
  @media (max-width: 1179px) {
    gap: 40px;
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    gap: 32px;
    padding-bottom: 60px;
  }
}

/* No "In practice" block below — drop the rule and the space reserved for it. */
.why-matters-top:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.why-matters-top .title-section {
  @media (max-width: 1179px) {
    max-width: 100% !important;
  }
}

.why-matters-grid {
  display: grid;
  grid-template-columns: 1fr 1.31fr;
  gap: 48px;
  @media (max-width: 1179px) {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.why-matters-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  gap: 48px;
  @media (max-width: 1179px) {
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

.why-matters-aside .why-matters-media-inset {
  @media (max-width: 1179px) {
    display: none;
  }
}

.why-matters-grid-inner .why-matters-media-inset {
  display: none;
  @media (max-width: 1179px) {
    display: flex;
  }
}

.why-matters-grid-inner {
  @media (max-width: 1179px) {
    display: grid;
    grid-template-columns: 2.11fr 1fr;
    gap: 32px;
    align-items: start;
  }
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.why-matters-media {
  margin: 0;
  width: 100%;
}

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

.why-matters-media-main img {
  height: 100%;
  @media (max-width: 1179px) {
    height: auto;
  }
}

.why-matters-media-main {
  height: 100%;
}

.why-matters-media-inset {
  max-width: 224px;
  aspect-ratio: 224 / 150;
  @media (max-width: 1179px) {
    max-width: 100%;
  }
}

.why-matters-description {
  font: var(--body-b2);
  color: var(--off-black);
  margin: 0;
}

/* ---- 2. In practice ---- */
/* The rule and the wrapper gap already carry the spacing above the block. */
.why-matters-wrapper .exception-block {
  padding-top: 0;
}

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

.industries-page-bottom-bg img {
  width: 100%;
  height: 100%;
  max-height: 2182px;
}