/* Surfaces and photography below the audiovisual Hero. */
.services, .experience-v2 { background: #fff; }
.business-needs, .faq-section { background: #f6f8f9; }
.process-v2 { background: #eef3f5; }
.vision {
  background: #eaf1f4;
  color: #102e43;
}
.vision-intro > p:last-child, .vision-moment > p { color: #405967; }
.vision-intro .eyebrow { color: #245b72; }
.vision-sequence { gap: clamp(20px, 3vw, 48px); }
.vision-photo, .vision-moment:nth-child(n) .vision-photo {
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 5px 32px 5px 5px;
  background: #d7e3e9;
}
.vision-moment:nth-child(2) { margin-top: 40px; }
.vision-moment:nth-child(3) { margin-top: 80px; }
.vision-moment:nth-child(2) h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}
.vision-moment h2 span { color: #08789f; }
.vision-moment > p { font-size: 15px; }
.industry-mosaic { column-gap: clamp(20px, 3vw, 44px); }
.sector-visual { background: #dce7eb; }
.sector-info {
  position: relative;
  border-top: 1px solid #cbd9df;
  margin-top: 18px;
  padding-top: 17px;
}
.sector-info::before {
  content: '';
  position: absolute;
  inset: -1px auto auto 0;
  width: 52px;
  height: 2px;
  background: #08789f;
  transform: scaleX(.45);
  transform-origin: left;
}
.contact {
  background: #082c46;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
}
.contact-photo img { object-position: 50% 45%; }
.contact-photo::after { background: none; }
.contact-inner h2 em { color: #c1e8f4; }
.contact .button { transition: background-color .22s, color .22s, transform .22s; }
.contact .button:hover, .contact .button:focus-visible { background: #ceeff8; }
.contact-secondary a:hover, .contact-secondary a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .28em;
}
@media (max-width: 700px) {
  .vision-moment:nth-child(n) { margin-top: 0; }
  .vision-moment:nth-child(n) .vision-photo { aspect-ratio: 1; }
  .vision-moment > p { font-size: 13px; }
  .contact-photo { height: clamp(280px, 84vw, 430px); }
  .contact-photo img { object-position: center 42%; }
  .contact-inner h2 em { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .vision-moment.revealed, .sector-v2.revealed, .need-tile.revealed,
  .section-heading.revealed, .service-heading.revealed, .vision-intro.revealed,
  .contact-photo.revealed, .contact-inner.revealed {
    animation: refinement-entry .55s var(--ease) both;
  }
  .vision-moment:nth-child(2).revealed { animation-delay: .08s; }
  .vision-moment:nth-child(3).revealed { animation-delay: .14s; }
  .contact-inner.revealed { animation-delay: .1s; }
  .contact-inner:focus-within { animation: none; }
  .sector-info::before { transition: transform .35s var(--ease); }
  .sector-info h3, .vision-moment h2 { transition: color .25s; }
  .contact .button:active { transform: translateY(1px); }
}
@media (hover: hover) and (pointer: fine) {
  .sector-v2:hover .sector-info::before { transform: scaleX(1); }
  .sector-v2:hover h3, .vision-moment:hover h2 { color: #076a8d; }
  .service-card summary { transition: background-color .25s, color .25s; }
  .service-card summary:hover { background-color: #edf6f9; }
}
@keyframes refinement-entry {
  from { opacity: .55; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .contact .button, .service-card summary { transition: none; }
  .sector-info::before { transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .contact-photo img { transition: transform .6s var(--ease); }
  .contact-photo:hover img { transform: scale(1.025); }
  .contact .button:hover { transform: translateY(-2px); }
  .sector-visual > img { transition-duration: .75s; }
}