@charset "UTF-8";

/* The original technical scene stays visible beneath this masked hair layer.
   Browsers without masking support retain the unedited base image. */
body.page-home #home-technology .home-tech-stage {
  position: relative;
}

body.page-home #home-technology .home-tech-hair-retouch {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/technology/davinci-home-smooth-hair.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url("assets/technology/davinci-home-hair-mask.svg");
  mask-image: url("assets/technology/davinci-home-hair-mask.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  body.page-home #home-technology .home-tech-hair-retouch { display: block; }
}

/* Load last on the homepage. The film fills its available page width while
   the heading and supporting copy keep the existing 1120px reading measure. */
body.page-home #film > .section-shell {
  --home-film-gutter: 40px;
  display: grid;
  grid-template-columns: minmax(var(--home-film-gutter), 1fr) minmax(0, 1120px) minmax(var(--home-film-gutter), 1fr);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.page-home #film > .section-shell > .section-heading,
body.page-home #film > .section-shell > .film-caption {
  grid-column: 2;
  min-width: 0;
}

body.page-home #film .film-stage {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.page-home #film .film-stage > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

body.page-home #film .film-stage .film-overlay {
  left: max(var(--home-film-gutter), calc((100% - 1120px) / 2));
}

body.page-home #film .film-stage:focus-visible {
  outline-offset: -4px;
}

/* Four original-ratio images precede their shared copy. The two wrappers
   become independent rows on phones without changing image order or links. */
body.page-home #live-services .presenter-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--site-body, #7b746e);
}

body.page-home #live-services .presenter-feature .presenter-feature-images {
  display: grid;
  grid-template-columns: minmax(0, .5627990431fr) minmax(0, .75fr) minmax(0, .4612676056fr) minmax(0, var(--home-sweat-live-close-ratio, .4615384615fr));
  gap: 18px;
  align-items: end;
  min-width: 0;
}

body.page-home #live-services .presenter-feature .presenter-feature-pair {
  display: contents;
}

body.page-home #live-services .presenter-feature .presenter-feature-images img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  aspect-ratio: auto 941 / 1672;
  object-fit: contain;
  object-position: center bottom;
  align-self: end;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Reserve each original frame before lazy loading, including its own ratio. */
body.page-home #live-services .presenter-feature-pair:first-child > img + img {
  aspect-ratio: auto 1536 / 2048;
}
body.page-home #live-services .presenter-feature-pair + .presenter-feature-pair > img {
  aspect-ratio: auto 1179 / 2556;
}
body.page-home #live-services .presenter-feature-pair + .presenter-feature-pair > img + img {
  aspect-ratio: auto 852 / 1846;
}

body.page-home #live-services .presenter-feature .presenter-feature-copy {
  width: 100%;
  max-width: 760px;
  justify-self: start;
}

body.page-home #live-services .presenter-feature .presenter-feature-copy h3 {
  margin-top: 12px;
  margin-bottom: 14px;
}

body.page-home #live-services .presenter-feature .presenter-feature-copy > span {
  margin-top: 20px;
}

/* These margins apply after the two former role paragraphs are removed. */
body.page-home #contact .contact-grid article > h3 + .contact-mail {
  margin-top: 18px;
}

body.page-home #contact .contact-grid article > .contact-links {
  margin-top: 18px;
}

@media (max-width: 760px) {
  body.page-home #film > .section-shell { --home-film-gutter: 25px; }

  body.page-home #live-services .presenter-feature { gap: 22px; }

  body.page-home #live-services .presenter-feature .presenter-feature-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  body.page-home #live-services .presenter-feature .presenter-feature-pair {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, .5627990431fr) minmax(0, .75fr);
    gap: 12px;
    align-items: end;
    min-width: 0;
  }

  body.page-home #live-services .presenter-feature .presenter-feature-pair + .presenter-feature-pair {
    grid-template-columns: minmax(0, .4612676056fr) minmax(0, var(--home-sweat-live-close-ratio, .4615384615fr));
  }

  body.page-home #contact .contact-grid article > h3 + .contact-mail { margin-top: 14px; }
  body.page-home #contact .contact-grid article > .contact-links { margin-top: 14px; }
}

@media (max-width: 450px) {
  body.page-home #film > .section-shell { --home-film-gutter: 20px; }
}

/* Give the four-image study more room on wide screens. The heading and copy
   share the same left edge; the existing narrower-screen gutters stay intact. */
@media (min-width: 1201px) {
  body.page-home #live-services.service-shell { max-width: 1680px; }
}