/* Process-page photography: separate desktop and mobile compositions. */
.process-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(400px, 36vw, 620px);
  padding: clamp(48px, 5vw, 88px) 0;
  background: #f5faff;
}
.process-hero > .wrap { position: relative; z-index: 1; display: block; }
.process-hero .hero-summary,
.process-hero .hero-details { max-width: 56%; }
.process-hero .eyebrow { color: #0059c9; }
.process-hero .hero-summary h1 {
  max-width: none;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.25;
}
.process-hero .hero-details { padding-top: 16px; }
.process-hero .hero-details .lead {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.75;
  color: #415779;
}
.process-hero-picture { position: absolute; inset: 0; z-index: 0; display: block; }
.process-hero-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}
@media (max-width: 767px) {
  .process-hero { min-height: 0; padding: 0; background: #f5faff; }
  .process-hero > .wrap { padding: 28px 24px 36px; }
  .process-hero .hero-summary,
  .process-hero .hero-details { max-width: none; }
  .process-hero .hero-summary h1 { font-size: clamp(32px, 8.6vw, 42px); line-height: 1.3; }
  .process-hero .hero-details { padding-top: 12px; }
  .process-hero .hero-details .lead { font-size: 17px; line-height: 1.75; }
  /* Show the independently composed portrait above the copy, omitting its unused copy space. */
  .process-hero-picture { position: relative; inset: auto; aspect-ratio: 5 / 4; }
  .process-hero-picture img { height: 100%; object-fit: cover; object-position: center bottom; }
}