/* =========================================================
   Industries section — landing page + IndustryPageTemplate
   (builds on services.css: hero, capability/why grids, process, CTA banner)
   ========================================================= */

/* ---------- Landing hero ---------- */
.hero--industries {
  min-height: clamp(460px, 36vw, 540px);
}

.hero--industries .hero__inner {
  padding-block: 3.5rem;
}

.hero--industries .hero__actions {
  margin-bottom: 0;
}

/* The SPO officer and his shoulder patch sit at the left edge of the photo, so the image starts
   where the copy ends (never underneath it) and only a narrow fade softens the seam. */
@media (min-width: 1024px) {
  .hero--industries {
    --hero-copy: 560px;
  }

  .hero--industries .hero__content {
    max-width: var(--hero-copy);
  }

  .hero--industries .hero__media {
    inset: 0 0 0 max(50%, calc(var(--edge) + var(--hero-copy) + 1.5rem));
  }

  .hero--industries .hero__media::after {
    background:
      linear-gradient(90deg, var(--color-navy) 0%, rgba(6, 27, 58, 0) 5%),
      linear-gradient(0deg, rgba(3, 19, 41, 0.5) 0%, rgba(3, 19, 41, 0) 28%);
  }
}

@media (min-width: 1280px) {
  .hero--industries {
    --hero-copy: 640px;
  }
}

/* Tablet: not enough width for copy and officer side by side, so stack the photo above the copy */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero--industries {
    display: block;
    min-height: 0;
  }

  .hero--industries .hero__media {
    position: relative;
    inset: auto;
    height: clamp(320px, 52vw, 480px);
  }

  .hero--industries .hero__media::after {
    background: linear-gradient(180deg, rgba(6, 27, 58, 0) 50%, rgba(6, 27, 58, 0.7) 82%, var(--color-navy) 100%);
  }

  .hero--industries .hero__inner {
    margin-top: -3.5rem;
    padding-block: 0 3rem;
  }
}

/* ---------- Split feature with a wider copy column ---------- */
@media (min-width: 1024px) {
  .why--wide-copy .why__media {
    inset: 0 52% 0 0;
  }

  .why--wide-copy .why__content {
    width: 56%;
    margin-left: 44%;
    padding-right: 2.5rem;
  }

  .why--wide-copy .why__content .h2 {
    font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.375rem);
  }

  .why--wide-copy .why__media::after {
    background: linear-gradient(90deg, rgba(6, 27, 58, 0) 62%, rgba(6, 27, 58, 0.65) 88%, var(--color-navy) 100%);
  }
}

/* ---------- ValueStrip ---------- */
.value-strip {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.value-strip__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-strip__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.value-strip__item:first-child {
  padding-left: 0;
}

.value-strip__item + .value-strip__item {
  border-left: 1px solid rgba(237, 187, 0, 0.35);
}

.value-strip__item .icon {
  flex-shrink: 0;
  font-size: 2.25rem;
  color: var(--color-gold);
  stroke-width: 1.5;
}

/* Value strip with a supporting line under each label (Careers, Resources) */
.value-strip--detail .value-strip__item span {
  display: flex;
  flex-direction: column;
}

.value-strip--detail small {
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-on-dark-muted);
}

@media (max-width: 1023px) {
  .value-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-strip__item,
  .value-strip__item:first-child {
    padding: 1.25rem 1rem;
  }

  .value-strip__item:nth-child(3) {
    border-left: 0;
  }

  .value-strip__item:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 479px) {
  .value-strip__item,
  .value-strip__item:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
  }

  .value-strip__item .icon {
    font-size: 1.875rem;
  }
}

/* ---------- IndustryGrid (5-up) + IndustryCard variant ---------- */
.services-grid.services-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}

.service-card--industry .service-card__media {
  aspect-ratio: 16 / 10;
}

.service-card--industry .service-card__body {
  padding: 0 1.125rem 1.125rem;
}

.service-card--industry .service-card__title {
  font-size: 1rem;
  line-height: 1.3;
}

.service-card--industry .service-card__text {
  font-size: 0.8125rem;
}

.service-card--industry .service-card__cta-label {
  max-width: 8rem;
  margin-right: 0.5rem;
  opacity: 1;
  transform: none;
}

@media (max-width: 1199px) {
  .services-grid.services-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .services-grid.services-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 559px) {
  .services-grid.services-grid--5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card--industry .service-card__media {
    aspect-ratio: auto;
  }

  .service-card--industry .service-card__body {
    padding: 1rem 1rem 1rem 1.75rem;
  }
}

/* ---------- MetricStrip ---------- */
.metrics {
  background:
    radial-gradient(circle at 10% 50%, rgba(4, 9, 228, 0.22), transparent 40%),
    var(--color-navy);
  color: var(--color-white);
}

.metrics__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.metric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.25rem 1rem;
}

.metric + .metric {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.metric__icon {
  font-size: 2.625rem;
  color: var(--color-gold);
}

.metric__icon .icon {
  stroke-width: 1.4;
}

.metric__body {
  display: flex;
  flex-direction: column;
}

.metric__value {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

.metric__label {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--color-text-on-dark-muted);
}

@media (max-width: 1023px) {
  .metrics__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric {
    justify-content: flex-start;
    padding: 1.75rem 1rem;
  }

  .metric:nth-child(3) {
    border-left: 0;
  }

  .metric:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 479px) {
  .metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 1.5rem 0.75rem;
  }

  .metric__icon {
    font-size: 2rem;
  }
}

/* ---------- Industry hero (image, no highlight chips) ---------- */
.svc-hero--plain .svc-hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

.svc-hero--plain .svc-hero__content {
  max-width: 580px;
}

/* ---------- Industry overview ---------- */
.ind-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 3.5rem;
  align-items: start;
}

.ind-overview__copy .h2 {
  margin-bottom: 1.25rem;
}

.ind-overview__copy .lead + .lead {
  margin-top: 1rem;
}

.ind-env {
  position: relative;
  padding: 2rem;
  color: var(--color-white);
  background:
    radial-gradient(circle at 100% 0%, rgba(4, 9, 228, 0.3), transparent 50%),
    var(--color-navy);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
}

.ind-env__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 1.5rem;
}

.ind-env__title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.ind-env__list {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.ind-env__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: #dbe3f0;
}

.ind-env__list .icon {
  margin-top: 3px;
  color: var(--color-gold);
  stroke-width: 2.5;
}

.ind-env__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.ind-env__link .icon {
  transition: transform var(--dur) var(--ease-out);
}

.ind-env__link:hover .icon {
  transform: translateX(4px);
}

@media (max-width: 1023px) {
  .ind-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* ---------- IndustryChallenge ---------- */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.challenge {
  position: relative;
  padding: 1.5rem 1.25rem 1.375rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: translate 450ms var(--ease-out), box-shadow 450ms var(--ease-out), border-color 350ms var(--ease-out);
}

.challenge:hover {
  translate: 0 -5px;
  border-color: rgba(237, 187, 0, 0.5);
  box-shadow: var(--shadow-md);
}

.challenge__num {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-gold-ink);
}

.challenge__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  color: var(--color-navy);
  font-size: 1.375rem;
  transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out);
}

.challenge:hover .challenge__icon {
  background: var(--color-navy);
  color: var(--color-gold);
}

.challenge__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin-bottom: 0.375rem;
}

.challenge__text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

@media (max-width: 1199px) {
  .challenge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .challenge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 479px) {
  .challenge-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Why grid, 4-up ---------- */
.why-grid.why-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .why-grid.why-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .why-grid.why-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- CaseStudyCard ---------- */
.case-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-list--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-study {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: translate 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}

.case-study:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-md);
}

.case-list:not(.case-list--2) .case-study {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.case-study__media {
  position: relative;
  min-height: 260px;
  background: var(--color-navy);
  overflow: hidden;
}

.case-study__media picture,
.case-study__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-study__media img {
  object-fit: cover;
  transition: transform 1400ms var(--ease-out);
}

.case-study:hover .case-study__media img {
  transform: scale(1.05);
}

.case-study__media .pill {
  position: absolute;
  left: 1rem;
  top: 1rem;
}

.case-study__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.case-study__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-ink);
  margin-bottom: 0.5rem;
}

.case-study__title {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.25;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.case-study__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy-600);
}

.case-study__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.case-study__meta .icon {
  color: var(--color-gold-ink);
}

.case-study__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 1023px) {
  .case-list--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 639px) {
  .case-study,
  .case-list:not(.case-list--2) .case-study {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-study__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .case-study__body {
    padding: 1.5rem;
  }
}

/* ---------- Medium section heading (used under an eyebrow) ---------- */
.h2--md {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  margin-bottom: 1.125rem;
}