.protection-hero {
  --ph-scene-color: 226, 184, 99;
}

.protection-hero .ph-art {
  z-index: 0;
  opacity: 0;
  background: #050505;
  transform: none;
  transition: opacity .75s ease;
}

.protection-hero .ph-art.is-visible { opacity: 1; }
.protection-hero .ph-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; }

.protection-hero .ph-scene-wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .59) 29%, rgba(0, 0, 0, .14) 67%, rgba(0, 0, 0, .18) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 36%),
    rgba(var(--ph-scene-color), .11);
}

.protection-hero .ph-inner { position: relative; z-index: 2; }
.protection-hero .ph-story { min-height: 100px; }
.protection-hero .ph-copy :is(h1,.ph-title,.ph-story,.ph-actions) { transition: opacity .24s ease, transform .24s ease; }
.protection-hero .ph-copy.is-changing :is(h1,.ph-title,.ph-story,.ph-actions) { opacity: 0; transform: translateY(7px); }
.protection-hero .ph-motto { color: #f4d597; font-weight: 700; }
.protection-hero .ph-description { max-width: 490px; }
.protection-hero .ph-title > :is(span,strong) { overflow-wrap: normal; }

.protection-hero .ph-properties { z-index: 3; width: 214px; }
.protection-hero .ph-properties [data-ph-topic] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 67px;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid rgba(220, 177, 92, .22);
  background: transparent;
  color: #f4f1eb;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.protection-hero .ph-properties [data-ph-topic]:last-child { border-bottom: 0; }
.protection-hero .ph-properties [data-ph-topic]:hover,
.protection-hero .ph-properties [data-ph-topic]:focus-visible { background: rgba(229, 188, 116, .14); outline: none; }
.protection-hero .ph-properties [data-ph-topic]:focus-visible { box-shadow: inset 0 0 0 2px #f4d597; }
.protection-hero .ph-properties [data-ph-topic][aria-current="true"] { background: rgba(var(--ph-scene-color), .22); color: #fff; }
.protection-hero .ph-properties [data-ph-topic][aria-current="true"] svg { color: #ffdd9c; }
.protection-hero .ph-properties [data-ph-topic][aria-current="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #f2ca7b;
  transform-origin: left;
  animation: ph-scene-progress 7s linear both;
}
.protection-hero .ph-properties .ph-finish-swatch {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(242, 214, 161, .64);
  border-radius: 3px;
  background: #6b6b6b;
}
.protection-hero .ph-properties .ph-label-copy { min-width: 0; display: grid; gap: 3px; }
.protection-hero .ph-properties .ph-label-full { min-width: 0; overflow-wrap: anywhere; }
.protection-hero .ph-properties .ph-label-copy small { color: #a9a298; font-size: 8px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.protection-hero .ph-properties [data-ph-topic][aria-current="true"] .ph-label-copy small { color: #dfcfb2; }
.protection-hero .ph-properties .ph-label-short { display: none; }
.protection-hero .ph-properties [data-ph-topic="gloss"] .ph-finish-swatch { background: linear-gradient(130deg, #17191a 12%, #f8f9f8 47%, #777d80 57%, #17191a 85%); }
.protection-hero .ph-properties [data-ph-topic="matte"] .ph-finish-swatch { background: #5d6265; }
.protection-hero .ph-properties [data-ph-topic="color"] .ph-finish-swatch { background: #931c2d; }
.protection-hero .ph-properties [data-ph-topic="satin"] .ph-finish-swatch { background: linear-gradient(135deg, #787f84, #c2c7c8); }
.protection-hero .ph-properties [data-ph-topic="chameleon"] .ph-finish-swatch { background: conic-gradient(#5a2e9a, #087c86, #123f9a, #5a2e9a); }
.protection-hero .ph-properties [data-ph-topic="chrome"] .ph-finish-swatch { background: linear-gradient(135deg, #111 3%, #f7f7f4 38%, #6b7073 52%, #fff 72%, #1b1d1e 97%); }
.protection-hero .ph-properties [data-ph-topic="tint"] .ph-finish-swatch { background: #172127; }
.protection-hero .ph-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.protection-hero[data-active-topic="gloss"] { --ph-scene-color: 226, 184, 99; }
.protection-hero[data-active-topic="matte"] { --ph-scene-color: 159, 168, 170; }
.protection-hero[data-active-topic="color"] { --ph-scene-color: 169, 60, 70; }
.protection-hero[data-active-topic="satin"] { --ph-scene-color: 198, 198, 187; }
.protection-hero[data-active-topic="chameleon"] { --ph-scene-color: 105, 111, 190; }
.protection-hero[data-active-topic="chrome"] { --ph-scene-color: 211, 216, 218; }
.protection-hero[data-active-topic="tint"] { --ph-scene-color: 80, 121, 132; }

@keyframes ph-scene-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-width: 1000px) {
  .protection-hero .ph-art { inset: 0 242px 0 0; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .protection-hero .ph-art { right: 152px; }
}
@media (min-width: 1601px) {
  .protection-hero .ph-art { right: 260px; }
  .protection-hero .ph-properties { width: 224px; }
  .protection-hero .ph-properties [data-ph-topic] { min-height: 72px; font-size: 13px; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .protection-hero .ph-properties { width: 136px; }
  .protection-hero .ph-properties [data-ph-topic] { min-height: 58px; padding: 9px; gap: 7px; font-size: 10px; }
  .protection-hero .ph-properties .ph-label-copy small { display: none; }
}
@media (max-width: 999px) {
  .protection-hero .ph-properties { width: auto; }
  .protection-hero .ph-inner { display: contents; }
  .protection-hero .ph-copy { z-index: 2; }
  .protection-hero .ph-benefits { position: relative; z-index: 2; }
  .protection-hero .ph-scene-wash { bottom: auto; height: min(100%, 560px); }
  .protection-hero .ph-story { min-height: 92px; }
  .protection-hero .ph-properties { grid-template-columns: repeat(7,minmax(0,1fr)); }
  .protection-hero .ph-properties [data-ph-topic] { justify-content: center; flex-direction: column; gap: 5px; min-height: 66px; padding: 8px 4px; border-bottom: 0; border-right: 1px solid rgba(220, 177, 92, .22); text-align: center; font-size: 10px; }
  .protection-hero .ph-properties [data-ph-topic]:last-child { border-right: 0; }
  .protection-hero .ph-properties [data-ph-topic][aria-current="true"]::after { bottom: 0; }
}
@media (max-width: 1199px) {
  .protection-hero { display: grid; grid-template-columns: 100%; height: auto; min-height: 0; max-height: none; padding-bottom: 18px; }
  .protection-hero .ph-inner { display: contents; }
  .protection-hero .ph-benefits { display: none; }
  .protection-hero .ph-copy { display: contents; }
  .protection-hero .ph-copy > h1 { grid-row: 1; margin: 20px 20px 12px; }
  .protection-hero .ph-copy > .ph-title { grid-row: 2; margin-inline: 20px; }
  .protection-hero .ph-copy > .ph-story { grid-row: 4; margin: 16px 20px 0; }
  .protection-hero .ph-art { grid-area: 3 / 1; position: relative; inset: auto; min-height: 0; width: 100%; height: auto; aspect-ratio: 1672 / 941; margin-top: 12px; align-self: auto; }
  .protection-hero .ph-art img { object-fit: contain; object-position: center; }
  .protection-hero .ph-art:after { background: linear-gradient(180deg, transparent 74%, #050505 100%); }
  .protection-hero .ph-scene-wash { display: none; }
  .protection-hero .ph-story { min-height: 0; }
  .protection-hero .ph-copy > .ph-actions { grid-row: 5; margin: 16px 20px 0; }
  .protection-hero .ph-copy > .ph-partner-link { grid-row: 6; margin: 12px 20px 0; }
  .protection-hero .ph-properties { position: static; transform: none; display: grid; width: auto; grid-row: 7; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 16px 72px 0 12px; overflow: hidden; }
  .protection-hero .ph-properties [data-ph-topic] { grid-column: auto; min-height: 48px; flex-direction: row; justify-content: center; gap: 0; padding: 5px 2px; border-right: 1px solid rgba(220, 177, 92, .22); border-bottom: 0; }
  .protection-hero .ph-properties [data-ph-topic]:nth-child(n+5) { grid-column: auto; }
  .protection-hero .ph-properties .ph-finish-swatch { flex-basis: 25px; width: 25px; height: 25px; border-radius: 4px; }
  .protection-hero .ph-properties .ph-label-copy,
  .protection-hero .ph-properties .ph-label-short { display: none; }
  .protection-hero .ph-properties [data-ph-topic]:last-child { border-right: 0; }
  .protection-hero .ph-properties [data-ph-topic][aria-current="true"] { box-shadow: inset 0 0 0 1px rgba(244, 213, 151, .58); }
}
@media (max-width: 480px) {
  .protection-hero .ph-copy > :is(h1,.ph-title,.ph-story,.ph-actions,.ph-partner-link) { text-shadow: 0 2px 14px #000, 0 0 24px #000; }
}
@media (prefers-reduced-motion: reduce) {
  .protection-hero .ph-art, .protection-hero .ph-story { transition: none; }
  .protection-hero .ph-properties [data-ph-topic][aria-current="true"]::after { animation: none; }
}