.segment-hero {
  background: var(--navy);
  padding-top: calc(var(--nav-stack-h) + clamp(2.75rem, 6vh, 4.5rem));
  padding-bottom: clamp(2.75rem, 6vh, 4rem);
  position: relative;
  overflow: hidden;
}

.segment-hero__inner {
  position: relative;
  z-index: 1;
}

.segment-hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.segment-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,0.06);
  aspect-ratio: 4 / 5;
  max-height: clamp(240px, 32vw, 420px);
}

.segment-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 15%;
}

@media (min-width: 900px) {
  .segment-hero__layout {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
  }

  .segment-hero__media {
    justify-self: end;
    width: min(420px, 100%);
    max-height: none;
  }

  /* Military electronics pillar: slightly larger PCB hero image */
  .segment-hero--milel .segment-hero__media {
    width: min(480px, 100%);
  }

  .segment-hero__layout:has(> .segment-hero__content:only-child) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 899px) {
  /* Military electronics: modest bump where hero media is height-capped */
  .segment-hero--milel .segment-hero__media {
    max-height: clamp(260px, 36vw, 460px);
  }
}

.segment-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(0,168,255,0.06), transparent);
  pointer-events: none;
}

.segment-hero__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.segment-hero h1 { color: var(--white); margin-bottom: 1rem; }

.segment-hero__stat {
  display: inline-block;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.segment-hero__stat-label {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
}

.segment-hero p {
  color: rgba(255,255,255,0.65);
  font-size: 1.0625rem;
  max-width: 52ch;
  margin-bottom: 1.5rem;
}

.segment-hero .btn {
  margin-top: 0.25rem;
}

/* Compact variant (used by /industry overview) */
.segment-hero--compact {
  padding-top: calc(var(--nav-stack-h) + clamp(2.25rem, 4.5vh, 3.5rem));
  padding-bottom: clamp(2.25rem, 4.5vh, 3.25rem);
}

.segment-hero--compact .segment-hero__eyebrow { margin-bottom: 0.6rem; }
.segment-hero--compact h1 { margin-bottom: 0.75rem; }
.segment-hero--compact .segment-hero__stat-label { margin-bottom: 1rem; }
.segment-hero--compact p { margin-bottom: 1.15rem; }

@media (min-width: 900px) {
  .segment-hero--compact .segment-hero__layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem;
  }

  .segment-hero--compact .segment-hero__media {
    /* Industry hero uses a landscape photo; keep it wide, not tall */
    aspect-ratio: 16 / 10;
    width: min(680px, 100%);
  }

  .segment-hero--compact .segment-hero__layout:has(> .segment-hero__content:only-child) {
    grid-template-columns: 1fr;
  }
}

/* Pain section */
.pain-section { background: var(--navy); color: var(--white); }
.pain-section h2 { color: var(--white); }
.pain-section p  { color: rgba(255,255,255,0.65); }

.pain-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.pain-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
}

.pain-item__icon {
  width: 36px;
  height: 36px;
  background: rgba(0,168,255,0.12);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--accent);
}

.pain-item__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.pain-item__body {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

/* Answer section */
.answer-section { background: var(--bg); }

.answer-media-stack {
  display: grid;
  gap: 0.75rem;
}

.answer-media-left,
.answer-media-right {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .answer-media-stack {
    grid-template-columns: 1fr minmax(240px, 0.9fr);
    align-items: start;
  }

  .answer-media-right {
    align-self: stretch;
  }

  .answer-media-right .answer-media-frame {
    height: 100%;
    max-height: none;
  }

  /* Military electronics answer: two horizontal PCB shots, full column width */
  .answer-media-stack--pcb-pair {
    grid-template-columns: 1fr;
  }

  .answer-media-stack:has(> .answer-media-left:only-child) {
    grid-template-columns: 1fr;
  }
}

.answer-media-stack--pcb-pair {
  gap: 1rem;
}

.answer-media-stack--pcb-pair .answer-media-frame {
  aspect-ratio: 1200 / 661;
  max-height: clamp(220px, 36vw, 460px);
  width: 100%;
}

.answer-media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: rgba(13, 27, 42, 0.04);
  /* Wide + compact: keep the section tight while still showing detail via cover-crop */
  aspect-ratio: 21 / 10;
  max-height: clamp(140px, 18vw, 210px);
}

.answer-media-frame--tall {
  aspect-ratio: 4 / 5;
  max-height: clamp(170px, 24vw, 260px);
}

.answer-media-frame img,
.answer-media-frame picture,
.answer-media-frame source {
  display: block;
}

.answer-media-frame picture {
  width: 100%;
  height: 100%;
  line-height: 0;
}

.answer-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.answer-media-frame[data-crop='top'] img {
  object-position: 50% 15%;
}

.answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.answer-grid > :only-child {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .answer-grid { grid-template-columns: 1fr; }
}

/* Plain answer-column media (not .answer-media-frame): keep natural aspect ratio */
.answer-grid > div:last-child > picture {
  display: block;
  width: 100%;
}

.answer-grid > div:last-child > picture img,
.answer-grid > div:last-child > img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.answer-pillar-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.answer-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.answer-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.answer-item::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.answer-item p {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Industry page: capability cards (image + copy) */
.industry-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.industry-cap-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(13, 27, 42, 0.08);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.industry-cap-card__media {
  aspect-ratio: 16 / 10;
  background: rgba(13, 27, 42, 0.06);
  overflow: hidden;
}

.industry-cap-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.industry-cap-card__media img[src$=".svg"] {
  object-fit: contain;
  padding: 0.75rem;
  background: rgba(13, 27, 42, 0.04);
}

.industry-cap-card__title {
  margin: 0;
  padding: 1rem 1.35rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.industry-cap-card__body {
  margin: 0;
  padding: 0.5rem 1.35rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Industry overview: fibre / injection moulding strip */
.industry-moulding-section {
  background: var(--white);
  border-top: 1px solid rgba(13, 27, 42, 0.07);
}

.industry-moulding-section .section-header p {
  max-width: 62ch;
}

/* Next step section */
.next-step-section { background: var(--white); }

.tracks-segment {
  display: grid;
  /* Center cards as a block on wide rows (segment pages) */
  grid-template-columns: repeat(auto-fit, minmax(250px, 320px));
  gap: 1.25rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.track-segment-card {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid rgba(13,27,42,0.1);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.track-segment-card__num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.track-segment-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.375rem;
}

.track-segment-card__body {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Photo strip with captions (airlines product pages) */
.segment-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

.segment-strip-grid__shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 10;
  background: rgba(13, 27, 42, 0.06);
}

.segment-strip-grid__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.segment-strip-grid__cap {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0.5rem 0 0;
}

@media (max-width: 640px) {
  .segment-strip-grid {
    grid-template-columns: 1fr;
  }
}

.segment-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

a.segment-related-card {
  display: block;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(13, 27, 42, 0.1);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.segment-related-card:hover {
  border-color: rgba(0, 168, 255, 0.35);
  box-shadow: 0 4px 20px rgba(13, 27, 42, 0.08);
}

.segment-related-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.35rem;
}

.segment-related-card__body {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}