/* Preview-only alternatives. The original photographs are unchanged. */
body[data-image-treatment] :is(.now, .timeline, .technical, .contact, .video, .reviews) {
  isolation: isolate;
  overflow: hidden;
}

body[data-image-treatment] :is(.history-intro, .history-story, .technical .now-grid) {
  display: block;
  position: relative;
}

body[data-image-treatment] .history-story { margin-top: 48px; }
body[data-image-treatment] .history-story .tl-list {
  grid-column: auto;
  grid-row: auto;
  max-width: 830px;
  margin: 0;
}

body[data-image-treatment] :is(.history-heading, .tl-list, .technical .facts) {
  position: relative;
  z-index: 1;
}
body[data-image-treatment] .technical .facts { max-width: 830px; }
body[data-image-treatment] .tl-text { max-width: 660px; }

body[data-image-treatment] .apparel-portrait {
  position: absolute;
  z-index: 0;
  display: block;
  margin: 0;
  min-width: 0;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0,0,0,.72) 47%, transparent 73%);
  mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0,0,0,.72) 47%, transparent 73%);
}
body[data-image-treatment] .apparel-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: saturate(.55) brightness(.76);
  -webkit-mask-image: none;
  mask-image: none;
}

body[data-image-treatment] .contact-grid { position: relative; }
body[data-image-treatment] .contact-channels { position: static; }
body[data-image-treatment] :is(.contact-channels > .channel, .contact-grid > form) {
  position: relative;
  z-index: 1;
}
body[data-image-treatment] .contact-grid > form { min-width: 0; }

/* 1 — Ambient portraits: faint silhouettes at the edges of the copy. */
body[data-image-treatment="ambient"] .apparel-portrait { opacity: .18; }
body[data-image-treatment="ambient"] .apparel-portrait--a {
  width: 53%;
  height: 400px;
  top: -105px;
  right: -8%;
  transform: rotate(-4deg);
}
body[data-image-treatment="ambient"] .apparel-portrait--b {
  width: 67%;
  height: 115%;
  top: -6%;
  right: -16%;
  opacity: .16;
}
body[data-image-treatment="ambient"] .apparel-portrait--c {
  width: 51%;
  height: 112%;
  right: -6%;
  top: -8%;
  opacity: .17;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 24%, rgba(0,0,0,.65) 46%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 42%, #000 24%, rgba(0,0,0,.65) 46%, transparent 70%);
}
body[data-image-treatment="ambient"] .apparel-portrait--back {
  width: 68%;
  height: 105%;
  left: -15%;
  top: -8%;
  opacity: .19;
}
body[data-image-treatment="ambient"] .archive-banner::after {
  background:
    linear-gradient(180deg, var(--void), transparent 26%, transparent 65%, var(--void)),
    linear-gradient(rgba(10,7,18,.57), rgba(10,7,18,.57));
}

/* 2 — Tonal washes: larger, cropped images dissolve into the whole section. */
body[data-image-treatment="wash"] :is(.history-intro, .history-story, .technical .now-grid, .contact-grid) {
  position: static;
}
body[data-image-treatment="wash"] .apparel-portrait {
  opacity: .13;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 64%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 64%, transparent);
}
body[data-image-treatment="wash"] .apparel-portrait img {
  object-fit: cover;
  filter: saturate(.28) brightness(.70);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 80%, transparent);
}
body[data-image-treatment="wash"] .apparel-portrait--a {
  width: 100%;
  height: 58%;
  top: -9%;
  left: 0;
  opacity: .12;
}
body[data-image-treatment="wash"] .apparel-portrait--a img { object-position: 50% 33%; }
body[data-image-treatment="wash"] .now > .apparel-portrait--a {
  height: 100%;
  inset: 0;
}
body[data-image-treatment] .now > .wrap {
  position: relative;
  z-index: 1;
}
body[data-image-treatment="wash"] .apparel-portrait--b {
  width: 100%;
  height: 73%;
  bottom: -8%;
  left: 0;
  opacity: .14;
}
body[data-image-treatment="wash"] .apparel-portrait--b img { object-position: 50% 27%; }
body[data-image-treatment="wash"] .apparel-portrait--c {
  width: 100%;
  height: min(80%, 1100px);
  right: -10%;
  top: 1%;
  opacity: .12;
}
body[data-image-treatment="wash"] .apparel-portrait--c img { object-position: 50% 23%; }
body[data-image-treatment="wash"] .apparel-portrait--back {
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: .15;
}
body[data-image-treatment="wash"] .apparel-portrait--back img { object-position: 50% 39%; }
body[data-image-treatment="wash"] .archive-banner::after {
  background:
    linear-gradient(180deg, var(--void), transparent 34%, transparent 58%, var(--void)),
    linear-gradient(rgba(10,7,18,.68), rgba(10,7,18,.68));
}

/* The setup illustration stays in the content layer, separate from decoration. */
body[data-image-treatment] :is(.technical .spec-grid, .setup-options) {
  position: relative;
  z-index: 1;
}
body[data-image-treatment] :is(.technical, .contact) > .wrap > :is(.kicker, .section-title, .section-body) {
  position: relative;
  z-index: 1;
}

/* Additional photographs dissolve into the open section headings. Cards and
   text remain above the decoration; the existing portraits stay in place. */
body[data-image-treatment] :is(.video, .reviews) > .wrap {
  position: relative;
  z-index: 1;
}
body[data-image-treatment] .apparel-portrait--hoodie {
  width: min(58vw, 700px);
  height: 500px;
  top: -80px;
  right: 0;
  opacity: .16;
}
body[data-image-treatment] .apparel-portrait--hoodie img {
  object-fit: cover;
  object-position: 50% 62%;
}
body[data-image-treatment] .apparel-portrait--wall {
  width: min(48vw, 600px);
  height: 430px;
  top: -105px;
  right: 2%;
  opacity: .13;
}
body[data-image-treatment] .apparel-portrait--wall img {
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 799px) {
  body[data-image-treatment] .history-story { margin-top: 36px; }
  body[data-image-treatment="ambient"] .apparel-portrait--a {
    width: 86%;
    height: 330px;
    top: -58px;
    right: -20%;
    opacity: .14;
  }
  body[data-image-treatment="ambient"] .apparel-portrait--b {
    width: 110%;
    right: -28%;
    opacity: .12;
  }
  body[data-image-treatment="ambient"] .apparel-portrait--c {
    width: 95%;
    right: -25%;
    opacity: .13;
  }
  body[data-image-treatment="ambient"] .apparel-portrait--back {
    width: 130%;
    height: 64%;
    left: -15%;
    top: -4%;
    opacity: .15;
  }
  body[data-image-treatment="wash"] .apparel-portrait--a { height: 42%; top: -4%; }
  body[data-image-treatment="wash"] .apparel-portrait--b { height: 65%; bottom: -1%; }
  body[data-image-treatment="wash"] .apparel-portrait--c { width: 125%; right: -27%; height: 65%; }
  body[data-image-treatment="wash"] .apparel-portrait--back { height: 70%; top: -2%; }
  body[data-image-treatment] .apparel-portrait--hoodie {
    width: 116%;
    height: 360px;
    top: -55px;
    right: -22%;
    opacity: .14;
  }
  body[data-image-treatment] .apparel-portrait--wall {
    width: 112%;
    height: 360px;
    top: -65px;
    right: -18%;
    opacity: .12;
  }
}