/* Shared photographic opening screen. Opt-in only: product galleries stay untouched.
   Layers within the isolated hero: photograph 0, contrast scrim 1, content 2. */
.photo-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  height: auto;
  min-height: clamp(480px, calc(100svh - var(--header) - 40px), 640px);
  overflow: hidden;
  border: 0;
  background: #15201e;
  color: #fff;
}
.photo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(9,20,22,.88), rgba(9,20,22,.76) 64%, rgba(9,20,22,.22));
}
.photo-hero .service-hero__grid { position: static; display: block; min-height: 0; }
.photo-hero .service-hero__media,
.photo-hero .hero__media,
.photo-hero .home-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
}
.photo-hero .service-hero__media img,
.photo-hero .hero__media img,
.photo-hero .home-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.photo-hero .hero__media::after,
.photo-hero .hero__stamp,
.photo-hero .service-hero__media figcaption { display: none; }
.photo-hero .service-hero__copy,
.photo-hero .hero__content,
.photo-hero .home-hero__content {
  position: relative;
  z-index: 2;
  display: block;
  container-type: normal;
  min-height: 0;
  padding: 48px 0;
}
.photo-hero .hero__content,
.photo-hero .home-hero__content { width: var(--wrap); margin-inline: auto; }
.photo-hero h1 {
  width: min(900px, 78%);
  max-width: none;
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: none;
}
.photo-hero .hero__title { max-width: none; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; letter-spacing: -.035em; }
.photo-hero .hero__bottom { max-width: none; }
.photo-hero .lead,
.photo-hero .home-hero__lead { width: min(700px, 72%); max-width: none; margin: 0; color: #f4f7f5; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.photo-hero .eyebrow,
.photo-hero .home-hero__eyebrow { margin: 0 0 20px; color: #c1e0e4; font-size: 12px; }
.photo-hero .eyebrow::before { background: currentColor; }
.photo-hero .breadcrumbs { margin: 0 0 32px; color: #e1e9e7; font-size: 13px; }
.photo-hero .breadcrumbs a { color: inherit; }
.photo-hero .actions,
.photo-hero .home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.photo-hero .button { min-height: 50px; white-space: nowrap; }
.photo-hero .button--ghost { color: #fff; border-color: #d5e1df; background: rgba(9,20,22,.45); }
.photo-hero .button--ghost:hover { color: var(--ink); border-color: #fff; background: #fff; }
.photo-hero :is(a, button):focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

@media (max-width: 767px) {
  .photo-hero { min-height: 520px; }
  .photo-hero::after { background: linear-gradient(90deg, rgba(9,20,22,.86), rgba(9,20,22,.76)); }
  .photo-hero .service-hero__copy,
  .photo-hero .hero__content,
  .photo-hero .home-hero__content { padding: 36px 0 40px; }
  .photo-hero h1,
  .photo-hero .hero__title { width: 100%; max-width: none; font-size: clamp(30px, 8.2vw, 40px); line-height: 1.12; }
  .photo-hero .lead,
  .photo-hero .home-hero__lead { width: 100%; font-size: 17px; }
  .photo-hero .eyebrow,
  .photo-hero .home-hero__eyebrow { font-size: 11px; line-height: 1.5; margin-bottom: 16px; }
  .photo-hero .breadcrumbs { margin-bottom: 24px; }
  .photo-hero .actions,
  .photo-hero .home-hero__actions { gap: 10px; margin-top: 24px; }
  .photo-hero .button { width: auto; min-height: 48px; }
}
@media (max-width: 420px) {
  .photo-hero .actions,
  .photo-hero .home-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .photo-hero .button { width: 100%; }
}
@media (min-width: 768px) and (max-height: 700px) {
  .photo-hero { min-height: 0; }
  .photo-hero .service-hero__copy,
  .photo-hero .hero__content,
  .photo-hero .home-hero__content { padding-block: 32px; }
  .photo-hero .breadcrumbs { margin-bottom: 20px; }
}