/* Background images only. All sizing, typography, layout and interactions
   continue to use the unchanged production homepage styles. */
#proof.proof {
  position: relative;
  isolation: isolate;
}
#proof.proof::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 1920 / 649;
  max-height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: var(--proof-background-image, url('/static/home/assets/proof-architecture-v1.webp'));
  background-position: right top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  /* Alpha fade blends the real raster into the existing solid section. */
  -webkit-mask-image: linear-gradient(#000 65%, transparent 100%);
  mask-image: linear-gradient(#000 65%, transparent 100%);
}
#practice .practice-feature {
  isolation: isolate;
}
#practice .practice-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--practice-feature-background-image, url('/static/home/assets/case-architecture-v1.webp'));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .72s cubic-bezier(.2,.72,.2,1);
}
#practice .practice-feature:hover,
#practice .practice-feature:focus-visible {
  transform: none;
}
#practice .practice-feature:hover::before,
#practice .practice-feature:focus-visible::before {
  transform: scale(1.06);
}
#practice .practice-feature h3::before {
  content: '';
  position: absolute;
  left: -18px;
  top: .1em;
  bottom: .06em;
  width: 4px;
  border-radius: 2px;
  background: var(--red);
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity .24s ease, transform .24s ease;
}
#practice .practice-feature:hover h3::before,
#practice .practice-feature:focus-visible h3::before {
  opacity: 1;
  transform: scaleY(1);
}
#contact .contact-shade { opacity: .68; }

/* Desktop CTA headline: one smaller type step; mobile and all other layout remain unchanged. */
@media (min-width: 901px) {
  #contact .contact-copy > h2 { font-size: clamp(38px, 3.5vw, 56px); }
}
