.company-video-section {
  padding-top: 36px;
  padding-bottom: 18px;
}

.company-video-section h2 {
  margin: 0 0 10px;
}

.company-video-section p {
  max-width: 680px;
  margin: 0 0 20px;
  color: #56625d;
}

.company-video-section video {
  display: block;
  width: 100%;
  max-height: 680px;
  aspect-ratio: 16 / 9;
  background: #0d1d2e;
  object-fit: contain;
}

.page-intro p + p {
  margin-top: 12px;
}


/* Cross-device layout safeguards: preserve the original visual design while
   preventing common overflow and touch-target problems on narrow screens. */
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; margin-inline: auto; overflow-x: clip; }
img, picture, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { max-width: 100%; font: inherit; }
a, button { touch-action: manipulation; }
a { overflow-wrap: anywhere; }
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }
table { max-width: 100%; }
main, header, footer, section, nav, article, aside { min-width: 0; }
#root { width: 100%; min-width: 0; }
@media (max-width: 767px) {
  body { min-width: 0; }
  main, section, article, footer, header { max-width: 100%; }
  img, picture, video, iframe { max-width: 100%; }
  button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] {
    min-height: 42px;
  }
  input, select, textarea { min-height: 42px; }
  [class*="grid"] { min-width: 0; }
  pre, code { overflow-wrap: anywhere; white-space: pre-wrap; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.35rem, 6vw, 2rem); }
  p { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Targeted fix: prevent the opportunity-card Explore link overlapping copy on phones */
@media (max-width: 767px) {
  .areas-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }
  .area-card,
  .area-card + .area-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    padding: 22px 4px 24px;
    overflow: visible;
  }
  .area-card h3 {
    margin: 24px 0 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .area-card p {
    width: 100%;
    max-width: none;
    margin: 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .area-card .area-arrow {
    position: static;
    align-self: flex-start;
    margin-top: 16px;
    bottom: auto;
    flex: 0 0 auto;
  }
}

/* Remove accidental blank spacer regions without changing populated sections. */
section:empty, main:empty, .page-intro:has(.wrap:empty) { display: none !important; }
section:has(> .wrap:empty), section:has(> div:empty):not(:has(h1,h2,h3,p,a,button,img,video,form,ul,ol,article)) { display: none !important; }
/* Prevent fixed/minimum heights from leaving large empty bands on smaller screens. */
@media (max-width: 768px) {
  .page-intro:has(.wrap:empty), .intro-strip:has(.wrap:empty) { display: none !important; }
  .page-intro { min-height: 0; }
}