/* These two modules share the header's frame, with no nested width cap.
   Keep their type roles governed by typography.css. */
.company-intro {
  padding: clamp(64px, 6vw, 112px) var(--site-edge);
  background: #f8f9f6;
}
.company-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: clamp(40px, 4.6vw, 88px);
  align-items: center;
}
.company-intro__photo {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
.company-intro__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
}
/* Preserve the generated photo's proportions instead of cropping it to text height. */
.company-intro__copy { min-width: 0; }
.company-intro__copy p {
  margin: 0;
  color: #334b66;
  font-size: clamp(18px, 1.1vw, 21px);
  font-weight: 400;
  line-height: 2;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.company-intro__copy strong {
  color: #173c69;
  font-weight: 700;
}

/* Content stays visible if motion is unavailable; only entering elements animate. */
@media (prefers-reduced-motion: no-preference) {
  .company-intro .intro-photo-enter {
    animation: company-intro-photo-enter 780ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .company-intro .intro-copy-enter {
    animation: company-intro-copy-enter 720ms 120ms cubic-bezier(.16, 1, .3, 1) both;
  }
}
@keyframes company-intro-photo-enter {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: none; }
}
@keyframes company-intro-copy-enter {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .company-intro__layout { gap: 36px; }
  .company-intro__copy p { font-size: 18px; line-height: 1.95; }
}
@media (max-width: 900px) {
  .company-intro__layout { grid-template-columns: 1fr; gap: 28px; }
  @keyframes company-intro-copy-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 700px) {
  .company-intro { padding-block: 44px 52px; }
  .company-intro__copy p { font-size: 17px; line-height: 1.95; }
}