/* Kane's Observations — Itachi protection progression.
   Isolated to homepage screen two; the approved card showcase is untouched. */

.chc-story--protection {
  --protection-ice: #cce2ed;
  --protection-blue: #78a9c2;
  --protection-deep: #07131c;
  --protection-ink: #04090d;
  --protection-crimson: #7d2b34;
  background:
    radial-gradient(ellipse 42% 72% at 77% 47%, rgba(124, 174, 198, .25), transparent 68%),
    radial-gradient(ellipse 20% 48% at 83% 48%, rgba(125, 43, 52, .18), transparent 73%),
    linear-gradient(110deg, #040a0f 0%, #07131c 46%, #102735 74%, #07131a 100%);
}

.chc-story--protection::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(1, 4, 7, .58), transparent 44%, rgba(2, 8, 12, .03) 74%, rgba(2, 6, 9, .4)),
    repeating-linear-gradient(99deg, transparent 0 83px, rgba(186, 219, 233, .024) 84px, transparent 86px);
}

.chc-story--protection::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 36%, rgba(1, 4, 7, .34)),
    radial-gradient(circle at 77% 47%, transparent 0 21%, rgba(191, 222, 235, .055) 21.2% 21.5%, transparent 21.7%);
}

.chc-story--protection .chc-story__heading {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: clamp(96px, 8.4vw, 162px);
  width: min(43vw, 690px);
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .72);
  transform: translateY(-50%);
}

.chc-story--protection .chc-story__kicker {
  color: #99c4d8;
  letter-spacing: .26em;
}

.chc-story--protection .chc-story__heading h2 {
  max-width: 700px;
  margin: 0;
  color: #f4f1ea;
  font: 700 clamp(48px, 3.95vw, 71px) / .96 "Playfair Display", Georgia, serif;
  letter-spacing: -.025em;
  text-transform: none;
  text-wrap: balance;
}

.chc-story--protection .chc-story__heading h2 span {
  display: block;
  color: #bad4df;
}

.chc-story--protection .chc-story__heading > p:last-of-type {
  max-width: 570px;
  margin: 21px 0 0;
  color: #c4d0d6;
  font-size: 15px;
  line-height: 1.62;
}

.chc-story--protection .chc-story__actions {
  justify-content: flex-start;
  margin-top: 22px;
}

.chc-story--protection .chc-story__actions a {
  border-color: rgba(149, 190, 210, .43);
  border-radius: 3px;
  background: rgba(5, 13, 19, .72);
  color: #eee9df;
}

.chc-story--protection .chc-story__actions a:first-child {
  border-color: #8ab4c8;
  background: #5d859b;
  color: #fff;
}

.chc-protection__principles {
  display: flex;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid rgba(156, 198, 220, .2);
  padding-top: 16px;
}

.chc-protection__principles span {
  display: grid;
  min-width: 142px;
  gap: 5px;
  padding-right: 18px;
}

.chc-protection__principles span + span {
  border-left: 1px solid rgba(156, 198, 220, .18);
  padding-left: 18px;
}

.chc-protection__principles b {
  color: #d6e6ed;
  font: 700 8px / 1.15 "Orbitron", Arial, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.chc-protection__principles small {
  color: #7f9dac;
  font-size: 9px;
  letter-spacing: .02em;
}

.chc-protection__scene {
  position: absolute;
  z-index: 4;
  top: 4%;
  right: 2.4%;
  width: min(52vw, 930px);
  height: 92%;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(171, 207, 224, .13);
  border-radius: 48% 48% 8% 8% / 23% 23% 6% 6%;
  background:
    linear-gradient(90deg, transparent 49.88%, rgba(194, 225, 238, .075) 50%, transparent 50.12%),
    linear-gradient(180deg, transparent 73%, rgba(191, 222, 235, .06) 73.2%, transparent 73.4%),
    radial-gradient(ellipse at 50% 48%, rgba(83, 133, 157, .22), transparent 61%),
    linear-gradient(180deg, rgba(24, 52, 67, .52), rgba(7, 21, 30, .78) 67%, rgba(3, 10, 15, .96));
  box-shadow: inset 0 0 100px rgba(0, 0, 0, .56), 0 30px 70px rgba(0, 0, 0, .32);
  pointer-events: none;
}

.chc-protection__beam {
  position: absolute;
  z-index: 1;
  top: -10%;
  bottom: 9%;
  left: 50%;
  width: 43%;
  background: linear-gradient(90deg, transparent, rgba(190, 223, 236, .09) 48%, transparent);
  filter: blur(9px);
  opacity: .9;
  transform: translateX(-50%) skewX(-7deg);
}

.chc-protection__halo {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(76%, 600px);
  aspect-ratio: 1;
  border: 1px solid rgba(164, 205, 223, .12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 174, 198, .17), rgba(79, 124, 146, .04) 44%, transparent 69%);
  box-shadow: 0 0 0 38px rgba(162, 202, 219, .018), 0 0 0 92px rgba(162, 202, 219, .01);
  transform: translate(-50%, -54%);
}

.chc-protection__surface {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 3.5%;
  left: 4%;
  height: 22%;
  border: 1px solid rgba(163, 205, 223, .16);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #294654 0%, #142b37 44%, #06131a 74%);
  box-shadow: 0 -12px 38px rgba(111, 166, 190, .1), inset 0 3px 0 rgba(205, 229, 239, .045), 0 35px 46px rgba(0, 0, 0, .48);
  transform: perspective(820px) rotateX(65deg);
}

.chc-protection__card {
  position: absolute;
  z-index: 6;
  top: 47%;
  left: 50%;
  margin: 0;
  opacity: 0;
  filter: drop-shadow(0 28px 29px rgba(0, 0, 0, .58));
  transform-origin: 50% 80%;
  will-change: opacity, transform;
}

.chc-protection__art {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: .6822;
  border-radius: 3.7% / 2.6%;
  background: #eee9df;
}

.chc-protection__art img {
  position: absolute;
  top: -6.75%;
  left: -4.82%;
  width: 109.75%;
  height: 111.47%;
  max-width: none;
  object-fit: fill;
}

.chc-protection__card--bare {
  width: clamp(220px, 16.5vw, 285px);
  transform: translate(-50%, -50%) rotateY(-5deg) rotateZ(-1.25deg);
}

.chc-protection__card--sleeved {
  width: clamp(246px, 18.2vw, 315px);
  transform: translate(-50%, -50%) rotateY(3deg) rotateZ(.8deg);
}

.chc-protection__sleeve {
  position: relative;
  display: block;
  padding: 7.4% 5.8% 5.4%;
  border: 1px solid rgba(230, 242, 247, .7);
  border-radius: 1.7%;
  background:
    linear-gradient(122deg, rgba(255, 255, 255, .17), transparent 22% 71%, rgba(223, 240, 247, .11)),
    rgba(214, 233, 241, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 26px rgba(140, 192, 215, .13);
}

.chc-protection__sleeve::before {
  content: "";
  position: absolute;
  top: 4.6%;
  right: 3.7%;
  left: 3.7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 250, 252, .78), transparent);
  box-shadow: 0 3px 0 rgba(167, 202, 216, .12);
}

.chc-protection__sleeve::after {
  content: "";
  position: absolute;
  top: 9%;
  right: 4.2%;
  bottom: 4%;
  width: 1px;
  background: linear-gradient(transparent, rgba(248, 252, 253, .62), transparent);
}

.chc-protection__card--cased {
  width: clamp(290px, 21.6vw, 372px);
  transform: translate(-50%, -50%) rotateY(-2deg) rotateZ(-.35deg);
}

.chc-protection__case {
  position: relative;
  display: block;
  padding: 18.5% 8.2% 8.6%;
  border: clamp(5px, .52vw, 9px) solid rgba(221, 238, 245, .57);
  border-radius: 4.5% 4.5% 2.5% 2.5% / 3.1% 3.1% 1.7% 1.7%;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .19), transparent 18% 76%, rgba(220, 239, 247, .12)),
    rgba(190, 220, 233, .035);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .16),
    inset 0 0 0 6px rgba(127, 171, 191, .08),
    0 0 34px rgba(139, 191, 213, .18),
    0 30px 48px rgba(0, 0, 0, .45);
}

.chc-protection__case::before,
.chc-protection__case::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 6%;
  width: 2.3%;
  border: 1px solid rgba(236, 247, 250, .38);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(131, 179, 199, .05));
}

.chc-protection__case::before { left: 2.4%; border-radius: 5px 0 0 5px; }
.chc-protection__case::after { right: 2.4%; border-radius: 0 5px 5px 0; }

.chc-protection__magnet {
  position: absolute;
  z-index: 4;
  top: 3.3%;
  left: 50%;
  width: 10.5%;
  aspect-ratio: 1;
  border: 3px solid rgba(225, 239, 245, .78);
  border-radius: 50%;
  background: radial-gradient(circle, #6b777d 0 35%, #374148 38% 49%, #d8e6ec 52% 60%, rgba(160, 194, 208, .2) 63% 100%);
  box-shadow: 0 4px 11px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .44);
  transform: translateX(-50%);
}

.chc-protection__case-well {
  position: relative;
  display: block;
  padding: 2.9%;
  border: 1px solid rgba(229, 241, 246, .44);
  background: linear-gradient(135deg, rgba(255, 255, 255, .11), transparent 31% 73%, rgba(209, 232, 241, .08));
  box-shadow: inset 0 0 0 3px rgba(119, 165, 186, .075);
}

.chc-protection__sleeve--inside-case {
  padding: 3.3% 2.3% 2.6%;
  border-color: rgba(234, 245, 249, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.chc-protection__case-foot {
  position: absolute;
  bottom: -2.2%;
  width: 18%;
  height: 4.7%;
  border: 1px solid rgba(226, 241, 246, .46);
  background: rgba(175, 211, 225, .08);
  box-shadow: inset 0 1px rgba(255, 255, 255, .24);
}

.chc-protection__case-foot--left { left: 9%; border-radius: 2px 2px 6px 6px; }
.chc-protection__case-foot--right { right: 9%; border-radius: 2px 2px 6px 6px; }

.chc-protection__timeline {
  position: absolute;
  z-index: 9;
  right: 10%;
  bottom: 5.8%;
  left: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.chc-protection__timeline::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 16.7%;
  left: 16.7%;
  height: 1px;
  background: rgba(154, 196, 215, .2);
}

.chc-protection__step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(169, 199, 212, .42);
  font: 700 7px / 1 "Orbitron", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chc-protection__step i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(170, 207, 222, .42);
  border-radius: 50%;
  background: #102633;
  box-shadow: 0 0 0 4px rgba(8, 23, 32, .82);
}

.chc-slide.is-active .chc-protection__card--bare { animation: chc-protection-bare 14s ease both; }
.chc-slide.is-active .chc-protection__card--sleeved { animation: chc-protection-sleeved 14s ease both; }
.chc-slide.is-active .chc-protection__card--cased { animation: chc-protection-cased 14s ease both; }
.chc-slide.is-active .chc-protection__beam { animation: chc-protection-scan 14s ease both; }
.chc-slide.is-active .chc-protection__step--one { animation: chc-protection-step-one 14s linear both; }
.chc-slide.is-active .chc-protection__step--two { animation: chc-protection-step-two 14s linear both; }
.chc-slide.is-active .chc-protection__step--three { animation: chc-protection-step-three 14s linear both; }

@keyframes chc-protection-bare {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(.92) rotateY(-9deg) rotateZ(-1.25deg); }
  5%, 23% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(-5deg) rotateZ(-1.25deg); }
  29%, 100% { opacity: 0; transform: translate(-50%, -52%) scale(.96) rotateY(2deg) rotateZ(0); }
}

@keyframes chc-protection-sleeved {
  0%, 22% { opacity: 0; transform: translate(-50%, -46%) scale(.94) rotateY(-5deg) rotateZ(-.8deg); }
  30%, 54% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(3deg) rotateZ(.8deg); }
  61%, 100% { opacity: 0; transform: translate(-50%, -52%) scale(.97) rotateY(-1deg) rotateZ(0); }
}

@keyframes chc-protection-cased {
  0%, 54% { opacity: 0; transform: translate(-50%, -45%) scale(.9) rotateY(4deg) rotateZ(.7deg); }
  64%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(-2deg) rotateZ(-.35deg); }
}

@keyframes chc-protection-scan {
  0%, 18%, 41%, 52%, 76%, 100% { opacity: .18; transform: translateX(-50%) skewX(-7deg); }
  25%, 58% { opacity: .88; transform: translateX(-18%) skewX(-7deg); }
  31%, 64% { opacity: .12; transform: translateX(-82%) skewX(-7deg); }
}

@keyframes chc-protection-step-one {
  0%, 28% { color: #d9ecf4; text-shadow: 0 0 13px rgba(147, 202, 225, .5); }
  32%, 100% { color: rgba(169, 199, 212, .42); text-shadow: none; }
}

@keyframes chc-protection-step-two {
  0%, 27% { color: rgba(169, 199, 212, .42); }
  31%, 59% { color: #d9ecf4; text-shadow: 0 0 13px rgba(147, 202, 225, .5); }
  63%, 100% { color: rgba(169, 199, 212, .42); text-shadow: none; }
}

@keyframes chc-protection-step-three {
  0%, 60% { color: rgba(169, 199, 212, .42); }
  65%, 100% { color: #d9ecf4; text-shadow: 0 0 13px rgba(147, 202, 225, .5); }
}

.chc-slide.is-active .chc-protection__step--one i { animation: chc-protection-dot-one 14s linear both; }
.chc-slide.is-active .chc-protection__step--two i { animation: chc-protection-dot-two 14s linear both; }
.chc-slide.is-active .chc-protection__step--three i { animation: chc-protection-dot-three 14s linear both; }

@keyframes chc-protection-dot-one {
  0%, 28% { border-color: #a9d1e3; background: #8bbbd0; box-shadow: 0 0 0 4px rgba(8, 23, 32, .82), 0 0 18px rgba(139, 187, 208, .7); }
  32%, 100% { border-color: rgba(170, 207, 222, .42); background: #102633; box-shadow: 0 0 0 4px rgba(8, 23, 32, .82); }
}

@keyframes chc-protection-dot-two {
  0%, 27%, 63%, 100% { border-color: rgba(170, 207, 222, .42); background: #102633; box-shadow: 0 0 0 4px rgba(8, 23, 32, .82); }
  31%, 59% { border-color: #a9d1e3; background: #8bbbd0; box-shadow: 0 0 0 4px rgba(8, 23, 32, .82), 0 0 18px rgba(139, 187, 208, .7); }
}

@keyframes chc-protection-dot-three {
  0%, 60% { border-color: rgba(170, 207, 222, .42); background: #102633; box-shadow: 0 0 0 4px rgba(8, 23, 32, .82); }
  65%, 100% { border-color: #a9d1e3; background: #8bbbd0; box-shadow: 0 0 0 4px rgba(8, 23, 32, .82), 0 0 18px rgba(139, 187, 208, .7); }
}

@media (max-width: 1100px) {
  .chc-story--protection .chc-story__heading { left: 72px; width: 46vw; }
  .chc-story--protection .chc-story__heading h2 { font-size: clamp(42px, 4.6vw, 58px); }
  .chc-protection__scene { right: 1%; width: 51vw; }
  .chc-protection__principles span { min-width: 118px; }
}

@media (max-width: 600px) {
  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow {
    top: 67.8%;
  }

  .chc-story--protection {
    background:
      radial-gradient(ellipse 86% 51% at 50% 76%, rgba(124, 174, 198, .2), transparent 70%),
      radial-gradient(ellipse 43% 34% at 64% 76%, rgba(125, 43, 52, .13), transparent 72%),
      linear-gradient(180deg, #040a0f 0%, #07131c 49%, #102735 78%, #07131a 100%);
  }

  .chc-story--protection .chc-story__heading {
    top: 28px;
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
    padding: 0;
    transform: none;
  }

  .chc-story--protection .chc-story__kicker { margin-bottom: 9px; font-size: 8px; }
  .chc-story--protection .chc-story__heading h2 { max-width: 340px; font-size: 34px; line-height: .97; }
  .chc-story--protection .chc-story__heading > p:last-of-type { max-width: 342px; margin-top: 12px; font-size: 11px; line-height: 1.44; }
  .chc-story--protection .chc-story__actions { gap: 7px; margin-top: 12px; }
  .chc-story--protection .chc-story__actions a { min-height: 34px; padding: 7px 9px; font-size: 6.6px; letter-spacing: .07em; }
  .chc-protection__principles { display: none; }

  .chc-protection__scene {
    top: auto;
    right: 4.5%;
    bottom: 1.5%;
    left: 4.5%;
    width: auto;
    height: 49%;
    border-radius: 44% 44% 7% 7% / 19% 19% 5% 5%;
  }

  .chc-protection__halo { width: 94%; }
  .chc-protection__surface { right: -4%; left: -4%; bottom: 3%; height: 24%; }
  .chc-protection__card { top: 45%; }
  .chc-protection__card--bare { width: 151px; }
  .chc-protection__card--sleeved { width: 165px; }
  .chc-protection__card--cased { width: 192px; }
  .chc-protection__timeline { right: 9%; bottom: 4.2%; left: 9%; }
  .chc-protection__step { gap: 6px; font-size: 5.8px; letter-spacing: .08em; }
  .chc-protection__step i { width: 9px; height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .chc-story--protection .chc-protection__card,
  .chc-story--protection .chc-protection__beam,
  .chc-story--protection .chc-protection__step,
  .chc-story--protection .chc-protection__step i {
    animation: none !important;
  }

  .chc-story--protection .chc-protection__card--bare,
  .chc-story--protection .chc-protection__card--sleeved { opacity: 0; }

  .chc-story--protection .chc-protection__card--cased {
    opacity: 1;
    transform: translate(-50%, -50%) rotateY(-2deg) rotateZ(-.35deg);
  }

  .chc-story--protection .chc-protection__step--three { color: #d9ecf4; }
  .chc-story--protection .chc-protection__step--three i { border-color: #a9d1e3; background: #8bbbd0; }
}

/* Protection story refinement v2
   The product stays anchored while each protective layer is fitted around it.
   This intentionally avoids the previous circular HUD and three-card crossfade. */

.chc-story--protection {
  background:
    radial-gradient(ellipse 34% 76% at 79% 49%, rgba(126, 176, 199, .18), transparent 70%),
    linear-gradient(104deg, #04090d 0%, #07131b 47%, #0b1d28 74%, #07131b 100%);
}

.chc-story--protection::before {
  background:
    linear-gradient(90deg, rgba(1, 4, 7, .62), rgba(2, 7, 11, .22) 43%, transparent 68%, rgba(2, 7, 10, .18)),
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 24%, rgba(1, 4, 7, .22));
}

.chc-story--protection::after {
  background: radial-gradient(ellipse 27% 60% at 78% 49%, rgba(157, 199, 217, .075), transparent 72%);
}

.chc-protection__scene {
  top: 1.5%;
  right: 1.6%;
  width: min(52vw, 930px);
  height: 97%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1200px;
}

.chc-protection__scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3% 0 13%;
  border: 0;
  background: radial-gradient(ellipse 31% 63% at 52% 49%, rgba(159, 199, 216, .075), rgba(94, 146, 168, .02) 48%, transparent 74%);
  box-shadow: none;
}

.chc-protection__scene::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 10.5%;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(174, 211, 226, .22) 22% 78%, transparent);
  box-shadow: 0 20px 48px rgba(107, 160, 183, .11);
}

.chc-protection__beam {
  top: 4%;
  bottom: 15%;
  left: 52%;
  width: 48%;
  background: linear-gradient(90deg, transparent, rgba(188, 220, 233, .075) 48%, transparent);
  filter: blur(18px);
  opacity: .68;
  transform: translateX(-50%);
}

.chc-protection__halo {
  top: 48%;
  left: 52%;
  width: min(62%, 520px);
  height: 76%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 28%;
  background: radial-gradient(ellipse, rgba(117, 168, 191, .14), rgba(73, 119, 140, .035) 48%, transparent 73%);
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.chc-protection__surface {
  right: 10%;
  bottom: 8%;
  left: 10%;
  height: 14%;
  border: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(92, 143, 165, .28), rgba(22, 49, 62, .34) 43%, transparent 73%);
  box-shadow: 0 -10px 34px rgba(113, 167, 190, .08), 0 28px 42px rgba(0, 0, 0, .4);
  transform: perspective(900px) rotateX(69deg);
}

.chc-protection__card {
  top: 47.5%;
  left: 52%;
  --protection-stage-depth: 0px;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.chc-protection__card--bare {
  z-index: 5;
  width: clamp(220px, 16.5vw, 285px);
  transform: translate(-50%, -50%);
}

.chc-protection__card--sleeved {
  z-index: 6;
  --protection-stage-depth: 8px;
  width: clamp(248px, 18.65vw, 322px);
  transform: translate(-50%, -50%);
}

.chc-protection__card--cased {
  z-index: 7;
  --protection-stage-depth: 16px;
  width: clamp(292px, 21.9vw, 378px);
  transform: translate(-50%, -50%);
}

.chc-protection__card--sleeved .chc-protection__art,
.chc-protection__card--cased .chc-protection__art {
  opacity: 1;
}

.chc-protection__sleeve {
  transform-style: preserve-3d;
  border-color: rgba(232, 244, 248, .64);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, .1), transparent 24% 74%, rgba(223, 240, 247, .065)),
    rgba(214, 233, 241, .018);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 -5px 12px rgba(49, 82, 97, .08),
    0 8px 18px rgba(0, 0, 0, .14),
    0 0 18px rgba(140, 192, 215, .075);
}

.chc-protection__card--sleeved .chc-protection__art {
  transform: translateZ(-3px);
  box-shadow: 0 3px 8px rgba(2, 8, 12, .2);
}

.chc-protection__case {
  transform-style: preserve-3d;
  border-color: rgba(221, 238, 245, .52);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .09), transparent 20% 77%, rgba(220, 239, 247, .06)),
    rgba(190, 220, 233, .018);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .12),
    inset 0 0 0 6px rgba(127, 171, 191, .055),
    inset 0 -9px 18px rgba(40, 69, 82, .08),
    0 0 24px rgba(139, 191, 213, .1),
    0 32px 48px rgba(0, 0, 0, .42);
}

.chc-protection__case::before,
.chc-protection__case::after {
  transform: translateZ(5px);
}

.chc-protection__case-well {
  transform: translateZ(-5px);
  box-shadow:
    inset 0 0 0 3px rgba(119, 165, 186, .075),
    0 5px 12px rgba(0, 0, 0, .16);
}

.chc-protection__magnet {
  background: radial-gradient(circle, #59656b 0 35%, #333e44 38% 49%, #89979d 52% 60%, rgba(126, 157, 170, .16) 63% 100%);
  transform: translate3d(-50%, 0, 6px);
}

.chc-protection__timeline {
  right: 13%;
  bottom: 5.4%;
  left: 13%;
}

/* One uninterrupted three-turn loop. Each wrapper changes at the thinnest
   edge of the same turn, so the artwork never stalls or jumps between stages. */
.chc-slide.is-active .chc-protection__card--bare {
  animation: chc-protection-loop-bare 12s linear infinite;
}

.chc-slide.is-active .chc-protection__card--sleeved {
  animation: chc-protection-loop-sleeve 12s linear infinite;
}

.chc-slide.is-active .chc-protection__card--cased {
  animation: chc-protection-loop-case 12s linear infinite;
}

.chc-slide.is-active .chc-protection__beam {
  animation: chc-protection-light-breathe 12s ease-in-out infinite;
}

.chc-slide.is-active .chc-protection__step--one {
  animation: chc-protection-loop-step-one 12s linear infinite;
}

.chc-slide.is-active .chc-protection__step--two {
  animation: chc-protection-loop-step-two 12s linear infinite;
}

.chc-slide.is-active .chc-protection__step--three {
  animation: chc-protection-loop-step-three 12s linear infinite;
}

.chc-slide.is-active .chc-protection__step--one i {
  animation: chc-protection-loop-dot-one 12s linear infinite;
}

.chc-slide.is-active .chc-protection__step--two i {
  animation: chc-protection-loop-dot-two 12s linear infinite;
}

.chc-slide.is-active .chc-protection__step--three i {
  animation: chc-protection-loop-dot-three 12s linear infinite;
}

@keyframes chc-protection-loop-bare {
  0%, 18% {
    opacity: 1;
    filter: drop-shadow(18px 28px 34px rgba(23, 40, 49, .28)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .16));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(0deg);
  }
  23.9% {
    opacity: 1;
    filter: drop-shadow(2px 8px 6px rgba(23, 40, 49, .13));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(89.4deg);
  }
  24%, 85.9% {
    opacity: 0;
    filter: drop-shadow(0 4px 3px rgba(23, 40, 49, 0));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(90deg);
  }
  85.999% {
    opacity: 0;
    filter: drop-shadow(0 4px 3px rgba(23, 40, 49, 0));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(-90deg);
  }
  86% {
    opacity: 1;
    filter: drop-shadow(-2px 8px 6px rgba(23, 40, 49, .13));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(-90deg);
  }
  92%, 100% {
    opacity: 1;
    filter: drop-shadow(18px 28px 34px rgba(23, 40, 49, .28)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .16));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(0deg);
  }
}

/* Final production guard: the approved transparent PNGs must reach the
   browser unchanged. Keep this after the legacy render block so no retired
   black-key filter can reintroduce jagged desktop edges. */
.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* A filtered transform flattens preserve-3d descendants. Keep the rotating
   object filter-free and cast the moving shadow from the environment instead. */
.chc-protection__card,
.chc-protection__card--sleeved,
.chc-protection__card--cased {
  filter: none !important;
}

@keyframes chc-protection-full-turn {
  0% {
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(0deg);
  }
  25% {
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(90deg);
  }
  50% {
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(180deg);
  }
  75% {
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(270deg);
  }
  100% {
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(360deg);
  }
}

.chc-protection__scene::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 80%;
  left: 76%;
  display: block !important;
  width: 300px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  opacity: .26;
  background: radial-gradient(ellipse, rgba(17, 37, 47, .58), rgba(17, 37, 47, .18) 48%, transparent 72%);
  box-shadow: none;
  clip-path: none;
  filter: blur(11px);
  transform: translate(-46%, -50%) scaleX(1);
  transform-origin: center;
  animation: chc-protection-environment-shadow 14s linear infinite !important;
  pointer-events: none;
}

@keyframes chc-protection-environment-shadow {
  0%, 100% {
    opacity: .26;
    transform: translate(-46%, -50%) scaleX(1);
  }
  25% {
    opacity: .08;
    transform: translate(-50%, -50%) scaleX(.18);
  }
  50% {
    opacity: .24;
    transform: translate(-54%, -50%) scaleX(.96);
  }
  75% {
    opacity: .08;
    transform: translate(-50%, -50%) scaleX(.18);
  }
}

@media (max-width: 600px) {
  .chc-protection__scene::after {
    top: 89%;
    left: 50%;
    width: 210px;
    height: 40px;
    filter: blur(9px);
  }
}

/* Render v12 Pro-Mold body correction: retain the approved photographic face,
   but give the holder an opaque, continuous acrylic volume through the turn. */
.chc-protection__product3d--case {
  --product-depth: clamp(28px, 2vw, 32px);
}

.chc-protection__product3d--case .chc-protection__product3d-edge {
  border-color: rgba(234, 247, 251, .78);
  background:
    linear-gradient(90deg, rgba(249, 253, 254, .94), rgba(154, 188, 200, .78) 24%, rgba(83, 119, 132, .92) 52%, rgba(177, 205, 215, .82) 78%, rgba(245, 251, 253, .94)),
    #91abb5;
  box-shadow:
    inset 1px 0 2px rgba(255, 255, 255, .72),
    inset -2px 0 4px rgba(36, 65, 77, .38);
}

.chc-protection__product3d--case .chc-protection__product3d-edge--top,
.chc-protection__product3d--case .chc-protection__product3d-edge--bottom {
  background:
    linear-gradient(180deg, rgba(251, 254, 255, .96), rgba(168, 198, 209, .82) 28%, rgba(84, 119, 132, .9) 62%, rgba(225, 240, 245, .9)),
    #91abb5;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .75),
    inset 0 -2px 4px rgba(36, 65, 77, .34);
}

@media (max-width: 600px) {
  .chc-protection__product3d--case {
    --product-depth: 20px;
  }
}

/* Protection story render v12 — one material environment and one solid card.
   The generated archive plate supplies organic depth without a CSS stage.
   Front and authentic back remain attached to the same shallow 3D volume for
   one continuous 360-degree turn; protection wrappers only change opacity. */
.chc-story--protection {
  background-color: #c7c8bd;
  background-image: url("carousel-protection-assets-v4/protection-gallery-background-desktop-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.chc-story--protection::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 1;
  clip-path: none;
  background: linear-gradient(90deg, rgba(250, 245, 234, .13), transparent 46%, transparent 78%, rgba(8, 28, 38, .12));
  box-shadow: inset 0 -32px 65px rgba(17, 42, 54, .1);
}

.chc-story--protection::after {
  display: none;
}

.chc-protection__beam,
.chc-protection__halo,
.chc-protection__surface {
  display: none !important;
  animation: none !important;
}

.chc-protection__card {
  --turn-shadow-front: drop-shadow(18px 28px 34px rgba(23, 40, 49, .3)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .15));
  --turn-shadow-edge-right: drop-shadow(2px 9px 6px rgba(23, 40, 49, .13));
  --turn-shadow-back: drop-shadow(-15px 27px 31px rgba(23, 40, 49, .27)) drop-shadow(6px 2px 8px rgba(208, 224, 229, .11));
  --turn-shadow-edge-left: drop-shadow(-2px 9px 6px rgba(23, 40, 49, .13));
  backface-visibility: visible;
  transform-style: preserve-3d;
  will-change: opacity, transform, filter;
}

.chc-protection__bare3d-back {
  overflow: hidden;
  border-color: rgba(104, 116, 120, .28);
  background-color: #f2f4f4;
  background-image: url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.chc-protection__product3d-back {
  overflow: hidden;
  border-radius: 3.8% / 2.6%;
  background-color: #f2f4f4;
  background-image:
    linear-gradient(110deg, rgba(235, 248, 251, .1), transparent 34%, rgba(246, 252, 253, .08) 66%, transparent),
    url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.chc-protection__product3d--sleeve .chc-protection__product3d-back,
.chc-protection__product3d--case .chc-protection__product3d-back {
  background-color: #f2f4f4;
  background-image:
    linear-gradient(110deg, rgba(232, 247, 251, .11), transparent 34%, rgba(247, 252, 253, .08) 66%, transparent),
    url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.chc-slide.is-active .chc-protection__card--bare {
  animation: chc-protection-full-turn 14s linear infinite, chc-protection-phase-bare 14s linear infinite;
}

.chc-slide.is-active .chc-protection__card--sleeved {
  animation: chc-protection-full-turn 14s linear infinite, chc-protection-phase-sleeve 14s linear infinite;
}

.chc-slide.is-active .chc-protection__card--cased {
  animation: chc-protection-full-turn 14s linear infinite, chc-protection-phase-case 14s linear infinite;
}

@keyframes chc-protection-full-turn {
  0% {
    filter: var(--turn-shadow-front);
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(0deg);
  }
  25% {
    filter: var(--turn-shadow-edge-right);
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(90deg);
  }
  50% {
    filter: var(--turn-shadow-back);
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(180deg);
  }
  75% {
    filter: var(--turn-shadow-edge-left);
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(270deg);
  }
  100% {
    filter: var(--turn-shadow-front);
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(360deg);
  }
}

@keyframes chc-protection-phase-bare {
  0%, 28% { opacity: 1; }
  36%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes chc-protection-phase-sleeve {
  0%, 28% { opacity: 0; }
  36%, 60% { opacity: 1; }
  68%, 100% { opacity: 0; }
}

@keyframes chc-protection-phase-case {
  0%, 60% { opacity: 0; }
  68%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

.chc-slide.is-active .chc-protection__bare3d-highlight {
  animation: chc-protection-full-turn-highlight 14s linear infinite;
}

@keyframes chc-protection-full-turn-highlight {
  0%, 100% { opacity: .09; transform: translateX(-20%); }
  22% { opacity: .17; transform: translateX(18%); }
  25%, 75% { opacity: 0; transform: translateX(66%); }
  50% { opacity: .04; transform: translateX(8%); }
  82% { opacity: .15; transform: translateX(20%); }
}

@media (max-width: 600px) {
  .chc-story--protection {
    background-color: #8fa8b2;
    background-image: url("carousel-protection-assets-v4/protection-gallery-background-mobile-v1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .chc-story--protection::before {
    opacity: 1;
    clip-path: none;
    background: linear-gradient(180deg, rgba(250, 246, 237, .08), transparent 40%, rgba(23, 53, 67, .08));
    box-shadow: none;
  }

  .chc-protection__card {
    --turn-shadow-front: drop-shadow(10px 23px 22px rgba(23, 40, 49, .31)) drop-shadow(-5px 2px 7px rgba(239, 225, 199, .13));
    --turn-shadow-edge-right: drop-shadow(1px 7px 5px rgba(23, 40, 49, .13));
    --turn-shadow-back: drop-shadow(-9px 22px 20px rgba(23, 40, 49, .28)) drop-shadow(4px 2px 6px rgba(210, 225, 230, .1));
    --turn-shadow-edge-left: drop-shadow(-1px 7px 5px rgba(23, 40, 49, .13));
  }
}

/* The approved transparent front product pixels remain literal. */
.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* Protection story render v7
   One responsive editorial composition: quieter type hierarchy, an integrated
   product stage, no step timeline, and grouped carousel-level navigation. */
.chc-screen-navigation {
  display: contents;
}

.chc-screen-navigation__label {
  display: none;
}

.chc-story--protection {
  background:
    radial-gradient(ellipse 38% 84% at 74% 48%, rgba(111, 162, 185, .2), transparent 70%),
    radial-gradient(ellipse 26% 60% at 32% 50%, rgba(76, 119, 139, .07), transparent 73%),
    linear-gradient(112deg, #03080c 0%, #06121a 45%, #0b202c 72%, #07141d 100%);
}

.chc-story--protection::before {
  background:
    linear-gradient(90deg, rgba(1, 4, 7, .68), rgba(3, 9, 13, .34) 43%, transparent 67%, rgba(2, 7, 10, .18)),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(186, 219, 233, .018) 120px, transparent 121px),
    linear-gradient(180deg, rgba(255, 255, 255, .014), transparent 32%, rgba(1, 4, 7, .34));
}

.chc-story--protection::after {
  background:
    radial-gradient(ellipse 34% 65% at 75% 48%, rgba(157, 199, 217, .07), transparent 72%),
    linear-gradient(180deg, transparent 68%, rgba(2, 7, 10, .34));
}

.chc-story--protection .chc-story__heading {
  top: 48.5%;
  left: clamp(104px, 7.7vw, 148px);
  width: min(41vw, 640px);
  text-shadow: 0 3px 28px rgba(0, 0, 0, .7);
  transform: translateY(-50%);
}

.chc-story--protection .chc-story__kicker {
  margin-bottom: 14px;
  color: #9fc8da;
  font-size: 10px;
  letter-spacing: .28em;
}

.chc-story--protection .chc-story__heading h2 {
  max-width: 620px;
  color: #f3f0e9;
  font-size: clamp(46px, 3.45vw, 62px);
  line-height: .99;
  letter-spacing: -.022em;
}

.chc-story--protection .chc-story__heading h2 span {
  color: #bed9e5;
}

.chc-story--protection .chc-story__heading > p:last-of-type {
  max-width: 548px;
  margin-top: 18px;
  color: #c7d2d7;
  font-size: 14px;
  line-height: 1.58;
}

.chc-protection__standard {
  position: relative;
  display: grid;
  max-width: 530px;
  gap: 6px;
  margin-top: 20px;
  border-left: 2px solid rgba(145, 190, 211, .72);
  padding: 11px 16px 12px;
  background: linear-gradient(90deg, rgba(116, 164, 185, .105), transparent 88%);
}

.chc-protection__standard span {
  color: #86afc1;
  font: 700 7px / 1.2 "Orbitron", Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.chc-protection__standard strong {
  color: #e3e8e8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}

.chc-story--protection .chc-story__actions {
  gap: 10px;
  margin-top: 18px;
}

.chc-story--protection .chc-story__actions a {
  min-height: 40px;
  border-radius: 2px;
  padding: 10px 17px;
}

.chc-story--protection .chc-story__actions a:first-child {
  border-color: #83aec1;
  background: #547e94;
}

.chc-protection__principles,
.chc-protection__timeline {
  display: none !important;
}

.chc-protection__scene {
  top: 0;
  right: 4.2%;
  width: min(49vw, 860px);
  height: 100%;
  overflow: visible;
  perspective: 1400px;
}

.chc-protection__scene::before {
  inset: 8.5% 5.5% 11.5%;
  border: 1px solid rgba(159, 197, 214, .09);
  border-radius: 46% 46% 11% 11% / 20% 20% 7% 7%;
  background:
    radial-gradient(ellipse 34% 60% at 50% 46%, rgba(148, 193, 213, .11), transparent 71%),
    linear-gradient(180deg, rgba(24, 53, 68, .16), rgba(4, 14, 20, .045) 70%, rgba(3, 10, 15, .18));
  box-shadow: inset 0 -54px 76px rgba(2, 8, 12, .3);
}

.chc-protection__scene::after {
  right: 8%;
  bottom: 10.8%;
  left: 8%;
  background: linear-gradient(90deg, transparent, rgba(171, 208, 224, .2) 26% 74%, transparent);
  box-shadow: 0 20px 44px rgba(102, 154, 178, .1);
}

.chc-protection__beam {
  top: 4%;
  bottom: 13%;
  left: 50%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(188, 220, 233, .065) 48%, transparent);
  filter: blur(17px);
}

.chc-protection__halo {
  top: 48%;
  left: 50%;
  width: min(58%, 490px);
  height: 74%;
  border-radius: 32%;
  background: radial-gradient(ellipse, rgba(117, 168, 191, .13), rgba(73, 119, 140, .028) 49%, transparent 73%);
  transform: translate(-50%, -50%);
}

.chc-protection__surface {
  right: 13%;
  bottom: 9.2%;
  left: 13%;
  height: 13%;
  background: radial-gradient(ellipse at 50% 45%, rgba(94, 145, 167, .28), rgba(19, 43, 54, .31) 44%, transparent 72%);
  box-shadow: 0 -8px 30px rgba(113, 167, 190, .075), 0 26px 40px rgba(0, 0, 0, .36);
  transform: perspective(900px) rotateX(70deg);
}

.chc-protection__card {
  top: 47.2%;
  left: 50%;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
  position: absolute;
  z-index: 20;
  bottom: 34px;
  left: clamp(104px, 7.7vw, 148px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__label {
  display: block;
  margin-right: 5px;
  color: #809dac;
  font: 700 7px / 1 "Orbitron", Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 1px solid rgba(183, 210, 222, .62);
  background: rgba(8, 21, 29, .72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24), inset 0 0 0 3px rgba(255, 255, 255, .018);
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow svg {
  width: 18px;
  height: 18px;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow:hover,
.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow:focus-visible {
  border-color: #9cc4d7;
  background: #315f77;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .chc-story--protection .chc-story__heading {
    left: 70px;
    width: 43vw;
  }

  .chc-story--protection .chc-story__heading h2 {
    font-size: clamp(42px, 4.5vw, 54px);
  }

  .chc-protection__scene {
    right: 1.5%;
    width: 52vw;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    left: 70px;
  }
}

@media (max-width: 600px) {
  .chc-story--protection {
    background:
      radial-gradient(ellipse 80% 47% at 50% 73%, rgba(111, 162, 185, .17), transparent 71%),
      linear-gradient(180deg, #03080c 0%, #06121a 47%, #0b202c 79%, #07141d 100%);
  }

  .chc-story--protection::before {
    background:
      linear-gradient(180deg, rgba(1, 4, 7, .44), transparent 50%, rgba(2, 7, 10, .24)),
      repeating-linear-gradient(90deg, transparent 0 74px, rgba(186, 219, 233, .014) 75px, transparent 76px);
  }

  .chc-story--protection::after {
    background: radial-gradient(ellipse 65% 40% at 50% 73%, rgba(157, 199, 217, .055), transparent 73%);
  }

  .chc-story--protection .chc-story__heading {
    top: 24px;
    left: 22px;
    width: calc(100% - 44px);
    transform: none;
  }

  .chc-story--protection .chc-story__kicker {
    margin-bottom: 8px;
    font-size: 7.4px;
    letter-spacing: .22em;
  }

  .chc-story--protection .chc-story__heading h2 {
    max-width: 340px;
    font-size: 31px;
    line-height: .98;
  }

  .chc-story--protection .chc-story__heading > p:last-of-type {
    max-width: 345px;
    margin-top: 10px;
    font-size: 10.4px;
    line-height: 1.4;
  }

  .chc-protection__standard {
    max-width: 340px;
    gap: 4px;
    margin-top: 11px;
    padding: 8px 11px 9px;
  }

  .chc-protection__standard span {
    font-size: 6px;
    letter-spacing: .13em;
  }

  .chc-protection__standard strong {
    font-size: 8.8px;
    line-height: 1.3;
  }

  .chc-story--protection .chc-story__actions {
    gap: 7px;
    margin-top: 10px;
  }

  .chc-story--protection .chc-story__actions a {
    min-height: 32px;
    padding: 7px 9px;
    font-size: 6.2px;
    letter-spacing: .055em;
  }

  .chc-protection__scene {
    top: auto;
    right: 0;
    bottom: 50px;
    left: 0;
    width: auto;
    height: 52%;
  }

  .chc-protection__scene::before {
    inset: 1% 7% 10%;
    border-radius: 43% 43% 9% 9% / 18% 18% 6% 6%;
  }

  .chc-protection__scene::after {
    right: 9%;
    bottom: 8%;
    left: 9%;
  }

  .chc-protection__beam {
    top: -1%;
    bottom: 10%;
    width: 56%;
    filter: blur(12px);
  }

  .chc-protection__halo {
    top: 43%;
    width: 72%;
    height: 78%;
  }

  .chc-protection__surface {
    right: 8%;
    bottom: 6%;
    left: 8%;
    height: 15%;
  }

  .chc-protection__card {
    top: 40.5%;
    left: 50%;
  }

  .chc-protection__card--bare { width: 178px; }
  .chc-protection__card--sleeved { width: 230px; }
  .chc-protection__card--cased { width: 248px; }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    right: auto;
    bottom: 9px;
    left: calc(50% - 36px);
    gap: 6px;
    transform: translateX(-50%);
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__label {
    margin-right: 3px;
    font-size: 6px;
    letter-spacing: .12em;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow {
    width: 31px;
    height: 31px;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow svg {
    width: 15px;
    height: 15px;
  }
}

/* Local card-depth preview. The approved card artwork remains unchanged while
   a thin matte cardstock volume gives the bare card a readable edge mid-turn. */
.chc-protection__bare3d {
  --bare-card-depth: 2.8px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: .6822;
  transform-style: preserve-3d;
}

.chc-protection__bare3d-front,
.chc-protection__bare3d-back,
.chc-protection__bare3d-edge,
.chc-protection__bare3d-highlight {
  position: absolute;
  display: block;
  pointer-events: none;
}

.chc-protection__bare3d-front {
  z-index: 4;
  inset: 0;
  overflow: hidden;
  border-radius: 3.7% / 2.6%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 0 9px rgba(255, 255, 255, .055),
    0 7px 14px rgba(0, 0, 0, .23);
  transform: translateZ(calc(var(--bare-card-depth) / 2));
  backface-visibility: hidden;
}

.chc-protection__bare3d-front .chc-protection__art {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.chc-protection__bare3d-back {
  z-index: 1;
  inset: 0;
  border: 1px solid rgba(220, 224, 220, .34);
  border-radius: 3.7% / 2.6%;
  background:
    radial-gradient(circle at 50% 42%, rgba(118, 151, 164, .16), transparent 42%),
    linear-gradient(145deg, #202a2e, #0d1519 68%, #1a2428);
  box-shadow: inset 0 0 14px rgba(230, 239, 239, .07);
  transform: translateZ(calc(var(--bare-card-depth) / -2)) rotateY(180deg);
  backface-visibility: hidden;
}

.chc-protection__bare3d-edge {
  z-index: 2;
  background: linear-gradient(90deg, #d9d6c9, #f4f0e4 45%, #a9a69c);
  box-shadow: inset 0 0 1px rgba(66, 61, 52, .5);
  backface-visibility: visible;
}

.chc-protection__bare3d-edge--left,
.chc-protection__bare3d-edge--right {
  top: 1.1%;
  bottom: 1.1%;
  width: var(--bare-card-depth);
}

.chc-protection__bare3d-edge--left {
  left: 0;
  transform: translateX(-50%) rotateY(90deg);
}

.chc-protection__bare3d-edge--right {
  right: 0;
  transform: translateX(50%) rotateY(90deg);
}

.chc-protection__bare3d-edge--top,
.chc-protection__bare3d-edge--bottom {
  right: 1.1%;
  left: 1.1%;
  height: var(--bare-card-depth);
  background: linear-gradient(180deg, #e7e3d6, #f6f2e7 48%, #aaa69b);
}

.chc-protection__bare3d-edge--top {
  top: 0;
  transform: translateY(-50%) rotateX(90deg);
}

.chc-protection__bare3d-edge--bottom {
  bottom: 0;
  transform: translateY(50%) rotateX(90deg);
}

.chc-protection__bare3d-highlight {
  z-index: 5;
  inset: -12% 36% -12% -28%;
  opacity: .12;
  background: linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, .58) 48%, transparent 61%);
  mix-blend-mode: screen;
  transform: translateX(-18%);
}

.chc-slide.is-active .chc-protection__bare3d-highlight {
  animation: chc-protection-bare-highlight 12s ease-in-out infinite;
}

@keyframes chc-protection-bare-highlight {
  0%, 5%, 92%, 100% { opacity: .08; transform: translateX(-22%); }
  14% { opacity: .2; transform: translateX(48%); }
  24%, 86% { opacity: 0; transform: translateX(70%); }
  90% { opacity: .16; transform: translateX(12%); }
}

@media (max-width: 600px) {
  .chc-protection__bare3d { --bare-card-depth: 2.2px; }
}

/* Approved production renders. These lossless alpha-matted PNGs are the exact
   approved visuals; no keying filter is allowed to alter their smooth edges. */
.chc-protection__product3d--sleeve .chc-protection__product3d-face {
  content: url("carousel-protection-assets-v3/itachi-fitted-penny-sleeve-approved.png");
}

.chc-protection__product3d--case .chc-protection__product3d-face {
  content: url("carousel-protection-assets-v3/itachi-promold-35pt-approved.png");
}

.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

@keyframes chc-protection-loop-sleeve {
  0%, 23.9% {
    opacity: 0;
    filter: drop-shadow(0 4px 3px rgba(23, 40, 49, 0));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(-90deg);
  }
  24% {
    opacity: 1;
    filter: drop-shadow(-2px 8px 6px rgba(23, 40, 49, .13));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(-90deg);
  }
  30%, 49% {
    opacity: 1;
    filter: drop-shadow(18px 28px 34px rgba(23, 40, 49, .28)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .16));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(0deg);
  }
  54.9% {
    opacity: 1;
    filter: drop-shadow(2px 8px 6px rgba(23, 40, 49, .13));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(89.4deg);
  }
  55%, 100% {
    opacity: 0;
    filter: drop-shadow(0 4px 3px rgba(23, 40, 49, 0));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(90deg);
  }
}

@keyframes chc-protection-loop-case {
  0%, 54.9% {
    opacity: 0;
    filter: drop-shadow(0 4px 3px rgba(23, 40, 49, 0));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(-90deg);
  }
  55% {
    opacity: 1;
    filter: drop-shadow(-2px 8px 6px rgba(23, 40, 49, .13));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(-90deg);
  }
  61%, 80% {
    opacity: 1;
    filter: drop-shadow(18px 28px 34px rgba(23, 40, 49, .28)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .16));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(0deg);
  }
  85.9% {
    opacity: 1;
    filter: drop-shadow(2px 8px 6px rgba(23, 40, 49, .13));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(89.4deg);
  }
  86%, 100% {
    opacity: 0;
    filter: drop-shadow(0 4px 3px rgba(23, 40, 49, 0));
    transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(90deg);
  }
}

@keyframes chc-protection-loop-step-one {
  0%, 23%, 87%, 100% {
    color: #d9ecf4;
    text-shadow: 0 0 13px rgba(147, 202, 225, .5);
  }
  25%, 85% {
    color: rgba(169, 199, 212, .42);
    text-shadow: none;
  }
}

@keyframes chc-protection-loop-step-two {
  0%, 23%, 56%, 100% {
    color: rgba(169, 199, 212, .42);
    text-shadow: none;
  }
  25%, 54% {
    color: #d9ecf4;
    text-shadow: 0 0 13px rgba(147, 202, 225, .5);
  }
}

@keyframes chc-protection-loop-step-three {
  0%, 54%, 87%, 100% {
    color: rgba(169, 199, 212, .42);
    text-shadow: none;
  }
  56%, 85% {
    color: #d9ecf4;
    text-shadow: 0 0 13px rgba(147, 202, 225, .5);
  }
}

@keyframes chc-protection-loop-dot-one {
  0%, 23%, 87%, 100% {
    border-color: #a9d1e3;
    background: #8bbbd0;
    box-shadow: 0 0 0 4px rgba(8, 23, 32, .82), 0 0 18px rgba(139, 187, 208, .7);
  }
  25%, 85% {
    border-color: rgba(170, 207, 222, .42);
    background: #102633;
    box-shadow: 0 0 0 4px rgba(8, 23, 32, .82);
  }
}

@keyframes chc-protection-loop-dot-two {
  0%, 23%, 56%, 100% {
    border-color: rgba(170, 207, 222, .42);
    background: #102633;
    box-shadow: 0 0 0 4px rgba(8, 23, 32, .82);
  }
  25%, 54% {
    border-color: #a9d1e3;
    background: #8bbbd0;
    box-shadow: 0 0 0 4px rgba(8, 23, 32, .82), 0 0 18px rgba(139, 187, 208, .7);
  }
}

@keyframes chc-protection-loop-dot-three {
  0%, 54%, 87%, 100% {
    border-color: rgba(170, 207, 222, .42);
    background: #102633;
    box-shadow: 0 0 0 4px rgba(8, 23, 32, .82);
  }
  56%, 85% {
    border-color: #a9d1e3;
    background: #8bbbd0;
    box-shadow: 0 0 0 4px rgba(8, 23, 32, .82), 0 0 18px rgba(139, 187, 208, .7);
  }
}

@keyframes chc-protection-light-breathe {
  0%, 100% { opacity: .4; transform: translateX(-50%) scaleX(.92); }
  33.33% { opacity: .62; transform: translateX(-50%) scaleX(1); }
  66.67% { opacity: .5; transform: translateX(-50%) scaleX(.96); }
}

@media (max-width: 600px) {
  .chc-story--protection {
    background:
      radial-gradient(ellipse 74% 39% at 53% 76%, rgba(126, 176, 199, .16), transparent 72%),
      linear-gradient(180deg, #04090d 0%, #07131b 51%, #0b1d28 80%, #07131b 100%);
  }

  .chc-story--protection::after {
    background: radial-gradient(ellipse 50% 34% at 52% 76%, rgba(157, 199, 217, .065), transparent 74%);
  }

  .chc-protection__scene {
    top: auto;
    right: 2%;
    bottom: 0;
    left: 2%;
    width: auto;
    height: 57%;
  }

  .chc-protection__scene::before {
    inset: 0 0 14%;
  }

  .chc-protection__scene::after {
    right: 3%;
    bottom: 10%;
    left: 3%;
  }

  .chc-protection__beam { top: 0; bottom: 13%; left: 50%; width: 61%; }
  .chc-protection__halo { top: 46%; left: 50%; width: 76%; height: 80%; }
  .chc-protection__surface { right: 4%; bottom: 7%; left: 4%; height: 16%; }
  .chc-protection__card { top: 39.5%; left: 50%; }
  .chc-protection__card--bare { width: 190px; }
  .chc-protection__card--sleeved { width: 254px; }
  .chc-protection__card--cased { width: 274px; }
  .chc-protection__timeline { right: 8%; bottom: 1.2%; left: 8%; }

  .chc-protection__card {
    filter: drop-shadow(0 19px 19px rgba(0, 0, 0, .46));
  }

  .chc-protection__beam {
    filter: blur(12px);
  }

  .chc-protection__case {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .11),
      inset 0 0 0 4px rgba(127, 171, 191, .05),
      0 0 18px rgba(139, 191, 213, .09),
      0 22px 30px rgba(0, 0, 0, .38);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chc-story--protection .chc-protection__card--bare,
  .chc-story--protection .chc-protection__card--sleeved { opacity: 0; }

  .chc-story--protection .chc-protection__card--cased {
    opacity: 1;
    transform: translate(-50%, -50%) rotateY(0deg);
  }
}

/* Protection story render v3
   Premium product photography replaces the flat simulated plastics. The
   rendered faces sit on shallow CSS volumes so the existing continuous turn
   reveals real edge depth without altering the carousel's timing or slide one. */
.chc-protection__product3d {
  --product-depth: 3px;
  --product-object-top: 11.5%;
  --product-object-right: 11.5%;
  --product-object-bottom: 8.5%;
  --product-object-left: 13.5%;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
}

.chc-protection__product3d--case {
  --product-depth: clamp(12px, .92vw, 17px);
  --product-object-top: 7%;
  --product-object-right: 11.5%;
  --product-object-bottom: 7%;
  --product-object-left: 12%;
}

.chc-protection__product3d-face,
.chc-protection__product3d-back,
.chc-protection__product3d-edge {
  position: absolute;
  display: block;
  pointer-events: none;
}

.chc-protection__product3d-face {
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: url("#chc-protection-black-to-alpha") saturate(1.02) contrast(1.025);
  transform: translateZ(calc(var(--product-depth) / 2));
  backface-visibility: hidden;
}

.chc-protection__product3d-back {
  z-index: 1;
  top: var(--product-object-top);
  right: var(--product-object-right);
  bottom: var(--product-object-bottom);
  left: var(--product-object-left);
  border: 1px solid rgba(226, 242, 249, .3);
  border-radius: 3.5%;
  background:
    linear-gradient(135deg, rgba(241, 250, 253, .22), rgba(89, 134, 153, .1) 44%, rgba(230, 245, 250, .16)),
    rgba(5, 13, 18, .78);
  box-shadow: inset 0 0 18px rgba(218, 240, 249, .08);
  transform: translateZ(calc(var(--product-depth) / -2)) rotateY(180deg);
  backface-visibility: hidden;
}

.chc-protection__product3d-edge {
  z-index: 2;
  border: 1px solid rgba(231, 246, 251, .22);
  background: linear-gradient(90deg, rgba(247, 252, 254, .68), rgba(126, 176, 196, .14) 38% 66%, rgba(238, 249, 252, .52));
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .22);
  backface-visibility: visible;
}

.chc-protection__product3d-edge--left,
.chc-protection__product3d-edge--right {
  top: var(--product-object-top);
  bottom: var(--product-object-bottom);
  width: var(--product-depth);
}

.chc-protection__product3d-edge--left {
  left: var(--product-object-left);
  transform: translateX(-50%) rotateY(90deg);
}

.chc-protection__product3d-edge--right {
  right: var(--product-object-right);
  transform: translateX(50%) rotateY(90deg);
}

.chc-protection__product3d-edge--top,
.chc-protection__product3d-edge--bottom {
  right: var(--product-object-right);
  left: var(--product-object-left);
  height: var(--product-depth);
  background: linear-gradient(180deg, rgba(251, 254, 255, .7), rgba(111, 158, 178, .14) 44% 67%, rgba(236, 248, 252, .48));
}

.chc-protection__product3d-edge--top {
  top: var(--product-object-top);
  transform: translateY(-50%) rotateX(90deg);
}

.chc-protection__product3d-edge--bottom {
  bottom: var(--product-object-bottom);
  transform: translateY(50%) rotateX(90deg);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge {
  border-color: rgba(236, 248, 252, .16);
  background: linear-gradient(90deg, rgba(247, 252, 254, .42), rgba(145, 186, 202, .08), rgba(244, 251, 253, .32));
  box-shadow: none;
}

.chc-protection__product3d--sleeve .chc-protection__product3d-back {
  border-color: rgba(232, 246, 250, .18);
  background: rgba(196, 225, 236, .025);
  box-shadow: none;
}

.chc-protection__card--sleeved,
.chc-protection__card--cased {
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .52)) drop-shadow(0 0 17px rgba(137, 188, 209, .09));
}

.chc-protection__filter-defs {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
}

.chc-protection__step--two b,
.chc-protection__step--three b {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .chc-protection__product3d--case { --product-depth: 12px; }
  .chc-protection__product3d--sleeve { --product-depth: 2px; }

  .chc-protection__card--sleeved,
  .chc-protection__card--cased {
    filter: drop-shadow(0 17px 19px rgba(0, 0, 0, .46)) drop-shadow(0 0 12px rgba(137, 188, 209, .08));
  }

  .chc-protection__step {
    font-size: 5.5px;
    letter-spacing: .055em;
  }
}

/* Final production guard: preserve the approved transparent PNG pixels. */
.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* Render v7 mobile cascade guard. Keep this last so retired layout rules cannot
   pull the largest Pro-Mold stage into the copy or grouped story controls. */
@media (max-width: 600px) {
  .chc-protection__standard {
    display: none;
  }

  .chc-story--protection .chc-story__actions {
    margin-top: 12px;
  }

  .chc-protection__scene {
    top: auto;
    right: 0;
    bottom: 50px;
    left: 0;
    width: auto;
    height: 52%;
  }

  .chc-protection__scene::before {
    inset: 1% 7% 10%;
    border-radius: 43% 43% 9% 9% / 18% 18% 6% 6%;
  }

  .chc-protection__scene::after {
    right: 9%;
    bottom: 8%;
    left: 9%;
  }

  .chc-protection__beam {
    top: -1%;
    bottom: 10%;
    left: 50%;
    width: 56%;
    filter: blur(12px);
  }

  .chc-protection__halo {
    top: 50%;
    left: 50%;
    width: 72%;
    height: 78%;
  }

  .chc-protection__surface {
    right: 8%;
    bottom: 6%;
    left: 8%;
    height: 15%;
  }

  .chc-protection__card {
    top: 46%;
    left: 50%;
  }

  .chc-protection__card--bare { width: 178px; }
  .chc-protection__card--sleeved { width: 230px; }
  .chc-protection__card--cased { width: 248px; }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    right: auto;
    bottom: 7px;
    left: calc(50% - 36px);
    transform: translateX(-50%);
  }
}

/* Protection story render v8 — The Conservation Folio.
   A blue-and-silver editorial spread replaces the retired display stage. The
   approved card, penny-sleeve, Pro-Mold artwork, 3D volumes, and timing remain
   unchanged; only the composition around them is new. */
.chc-story--protection {
  background:
    linear-gradient(90deg, #07141c 0%, #0b202c 46.8%, #dbe6eb 47%, #eef3f5 100%);
  box-shadow: inset 0 -1px rgba(7, 20, 28, .14);
}

.chc-story--protection::before {
  z-index: 0;
  inset: 0;
  opacity: .72;
  background:
    repeating-linear-gradient(8deg, transparent 0 4px, rgba(255, 255, 255, .018) 5px, transparent 7px),
    repeating-linear-gradient(96deg, transparent 0 7px, rgba(15, 39, 52, .015) 8px, transparent 10px),
    radial-gradient(ellipse 54% 78% at 23% 48%, rgba(114, 169, 194, .16), transparent 72%),
    radial-gradient(ellipse 42% 68% at 73% 40%, rgba(255, 255, 255, .42), transparent 74%);
}

.chc-story--protection::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: calc(47% - 28px);
  width: 56px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(3, 12, 18, .2) 45%, rgba(255, 255, 255, .25) 51%, transparent 78%);
  filter: blur(6px);
  opacity: .62;
}

.chc-story--protection .chc-story__heading {
  position: absolute;
  z-index: 7;
  top: 13.5%;
  right: clamp(76px, 6.4vw, 122px);
  left: auto;
  width: min(39vw, 640px);
  max-width: none;
  margin: 0;
  padding: 0;
  color: #17232b;
  text-align: left;
  text-shadow: none;
  transform: none;
}

.chc-story--protection .chc-story__kicker {
  margin: 0 0 15px;
  color: #517893;
  font-size: 8px;
  letter-spacing: .29em;
}

.chc-story--protection .chc-story__heading h2 {
  max-width: 620px;
  margin: 0;
  color: #17232b;
  font: 700 clamp(53px, 3.7vw, 66px) / .98 "Playfair Display", Georgia, serif;
  font-family: "Playfair Display", Georgia, serif !important;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
}

.chc-story--protection .chc-story__heading h2 span {
  display: block;
  color: #517893;
}

.chc-story--protection .chc-story__heading > p:last-of-type {
  max-width: 550px;
  margin: 19px 0 0;
  color: #465b66;
  font-size: 15px;
  line-height: 1.58;
  letter-spacing: .005em;
}

.chc-protection__standard {
  display: grid;
  max-width: 540px;
  gap: 6px;
  margin-top: 20px;
  border: 0;
  border-top: 1px solid rgba(60, 88, 102, .25);
  padding: 12px 0 0;
  background: none;
}

.chc-protection__standard span {
  color: #517893;
  font-size: 6.8px;
  letter-spacing: .18em;
}

.chc-protection__standard strong {
  color: #2d414c;
  font-size: 10.5px;
  line-height: 1.42;
}

.chc-story--protection .chc-story__actions {
  justify-content: flex-start;
  gap: 17px;
  margin-top: 20px;
}

.chc-story--protection .chc-story__actions a {
  min-height: 44px;
  border-radius: 1px;
  padding: 11px 18px;
  box-shadow: none;
}

.chc-story--protection .chc-story__actions a:first-child {
  border-color: #517893;
  background: #517893;
  color: #fff;
}

.chc-story--protection .chc-story__actions a:last-child {
  min-height: 0;
  border: 0;
  border-bottom: 1px solid rgba(49, 95, 124, .45);
  padding: 4px 0 3px;
  background: transparent;
  color: #315f7c;
}

.chc-story--protection .chc-story__actions a:hover,
.chc-story--protection .chc-story__actions a:focus-visible {
  border-color: #315f7c;
  background: #315f7c;
  color: #fff;
}

.chc-story--protection .chc-story__actions a:last-child:hover,
.chc-story--protection .chc-story__actions a:last-child:focus-visible {
  border-bottom-color: #315f7c;
  background: transparent;
  color: #173d55;
}

.chc-protection__scene {
  z-index: 4;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 47%;
  height: auto;
  overflow: visible;
  perspective: 1400px;
}

.chc-protection__scene::before,
.chc-protection__scene::after,
.chc-protection__beam,
.chc-protection__halo,
.chc-protection__surface {
  display: none !important;
}

.chc-protection__card {
  top: 50%;
  left: 50%;
  filter: drop-shadow(0 34px 28px rgba(0, 0, 0, .42)) drop-shadow(0 8px 8px rgba(0, 0, 0, .18));
}

.chc-protection__card--bare { width: 285px; }
.chc-protection__card--sleeved { width: 315px; }
.chc-protection__card--cased { width: 372px; }

.chc-protection__card--sleeved,
.chc-protection__card--cased {
  filter: drop-shadow(0 34px 28px rgba(0, 0, 0, .42)) drop-shadow(0 8px 8px rgba(0, 0, 0, .18));
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
  position: absolute;
  z-index: 20;
  right: clamp(76px, 6.4vw, 122px);
  bottom: 108px;
  left: auto;
  display: flex;
  width: min(39vw, 640px);
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid rgba(60, 88, 102, .26);
  padding-top: 12px;
  transform: none;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__label {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  color: #536671;
  font-size: 0;
  letter-spacing: 0;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__label::before {
  content: "KANE'S FOLIO · STORY 02/02";
  font: 700 7px / 1 "Orbitron", Arial, sans-serif;
  letter-spacing: .16em;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--next {
  display: none;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous {
  position: static;
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: 28px;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #315f7c;
  box-shadow: none;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous::after {
  content: "Back to featured cards";
  font: 800 7px / 1 "Orbitron", Arial, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous svg {
  width: 14px;
  height: 14px;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous:hover,
.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous:focus-visible {
  border: 0;
  background: transparent;
  color: #173d55;
  outline: 2px solid rgba(49, 95, 124, .34);
  outline-offset: 5px;
  transform: none;
}

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-story--protection {
    background: linear-gradient(90deg, #07141c 0%, #0b202c 44.8%, #dbe6eb 45%, #eef3f5 100%);
  }

  .chc-story--protection::after { left: calc(45% - 24px); width: 48px; }

  .chc-story--protection .chc-story__heading {
    top: 14%;
    right: 34px;
    width: 48%;
  }

  .chc-story--protection .chc-story__heading h2 {
    font-size: clamp(43px, 5vw, 54px);
  }

  .chc-story--protection .chc-story__heading > p:last-of-type {
    font-size: 13.2px;
  }

  .chc-protection__standard { margin-top: 16px; }
  .chc-story--protection .chc-story__actions { margin-top: 17px; }

  .chc-protection__scene { width: 45%; }
  .chc-protection__card--bare { width: 248px; }
  .chc-protection__card--sleeved { width: 286px; }
  .chc-protection__card--cased { width: 330px; }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    right: 34px;
    width: 48%;
  }
}

@media (max-width: 600px) {
  .chc-story--protection {
    background:
      linear-gradient(180deg, #eef3f5 0%, #eaf1f4 38%, #d9e6eb 72%, #ccdce3 100%);
    box-shadow: none;
  }

  .chc-story--protection::before {
    display: block;
    z-index: 0;
    inset: 0;
    opacity: .7;
    background:
      linear-gradient(180deg, transparent 0 36%, rgba(92, 139, 160, .035) 43%, rgba(49, 95, 124, .11) 100%),
      repeating-linear-gradient(7deg, transparent 0 4px, rgba(18, 46, 60, .014) 5px, transparent 7px);
  }

  .chc-story--protection::after { display: none; }

  .chc-story--protection .chc-story__heading {
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    max-width: none;
    padding: 16px 22px 0;
  }

  .chc-story--protection .chc-story__kicker {
    margin-bottom: 7px;
    color: #517893;
    font-size: 6.8px;
    letter-spacing: .22em;
  }

  .chc-story--protection .chc-story__heading h2 {
    max-width: 345px;
    color: #17232b;
    font-size: 31px;
    line-height: .98;
    letter-spacing: -.03em;
  }

  .chc-story--protection .chc-story__heading h2 span {
    color: #517893;
  }

  .chc-story--protection .chc-story__heading > p:last-of-type {
    max-width: 346px;
    margin-top: 8px;
    color: #465b66;
    font-size: 10.2px;
    line-height: 1.38;
  }

  .chc-protection__standard { display: none; }

  .chc-story--protection .chc-story__actions {
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 9px;
  }

  .chc-story--protection .chc-story__actions a {
    min-height: 33px;
    padding: 7px 10px;
    font-size: 6.1px;
    letter-spacing: .06em;
  }

  .chc-story--protection .chc-story__actions a:last-child {
    min-height: 0;
    padding: 4px 0 3px;
  }

  .chc-protection__scene {
    top: 254px;
    right: 0;
    bottom: 68px;
    left: 0;
    width: 100%;
    height: auto;
  }

  .chc-protection__card {
    top: 50%;
    left: 50%;
    filter: drop-shadow(0 22px 18px rgba(15, 34, 44, .3)) drop-shadow(0 6px 6px rgba(15, 34, 44, .12));
  }

  .chc-protection__card--bare { width: 178px; }
  .chc-protection__card--sleeved { width: 230px; }
  .chc-protection__card--cased { width: 248px; }

  .chc-protection__card--sleeved,
  .chc-protection__card--cased {
    filter: drop-shadow(0 22px 18px rgba(15, 34, 44, .3)) drop-shadow(0 6px 6px rgba(15, 34, 44, .12));
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    top: 215px;
    right: 22px;
    bottom: auto;
    left: 22px;
    width: auto;
    gap: 12px;
    border-top-color: rgba(60, 88, 102, .24);
    padding-top: 8px;
    transform: none;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__label::before {
    content: "STORY 02/02";
    font-size: 6.1px;
    letter-spacing: .14em;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous {
    min-height: 24px;
    gap: 6px;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous::after {
    font-size: 6.1px;
    letter-spacing: .08em;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous svg {
    width: 12px;
    height: 12px;
  }
}

/* Approved transparent product pixels remain literal in render v8. */
.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* Protection story render v9 — Layered conservation landscape.
   The copy returns to the left and the unchanged card sequence moves right.
   Matte almond and deep-blue planes create directional depth without a stage,
   outline, arch, halo, pedestal, or enclosure around the card. */
.chc-story--protection {
  background:
    radial-gradient(ellipse 50% 82% at 84% 46%, rgba(91, 141, 163, .21), transparent 74%),
    linear-gradient(118deg, #07131b 0%, #0b202b 64%, #0e2936 100%);
  box-shadow: inset 0 -1px rgba(2, 8, 12, .34);
}

.chc-story--protection::before {
  display: block;
  z-index: 0;
  inset: -3% 41% -3% -4%;
  opacity: 1;
  background:
    repeating-linear-gradient(7deg, transparent 0 4px, rgba(80, 61, 40, .022) 5px, transparent 7px),
    radial-gradient(ellipse 62% 74% at 32% 42%, rgba(255, 252, 241, .42), transparent 76%),
    linear-gradient(132deg, #efe3cd 0%, #e4d2b4 54%, #cfb892 100%);
  box-shadow: 28px 0 58px rgba(0, 0, 0, .33), inset -1px 0 rgba(255, 255, 255, .45);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  filter: none;
}

.chc-story--protection::after {
  display: block;
  z-index: 2;
  top: -8%;
  bottom: -8%;
  left: 46.8%;
  width: 9.5%;
  opacity: .78;
  background: linear-gradient(94deg, rgba(54, 39, 26, .24), rgba(255, 248, 231, .2) 30%, rgba(6, 18, 25, .25) 71%, transparent);
  filter: blur(8px);
  transform: rotate(4.8deg);
  transform-origin: center;
}

.chc-story--protection .chc-story__heading {
  top: 13.5%;
  right: auto;
  left: clamp(76px, 6.4vw, 122px);
  width: min(39vw, 640px);
  color: #17232b;
}

.chc-story--protection .chc-story__kicker { color: #496f84; }

.chc-story--protection .chc-story__heading h2 {
  color: #17232b;
}

.chc-story--protection .chc-story__heading h2 span { color: #517893; }

.chc-story--protection .chc-story__heading > p:last-of-type { color: #42545d; }

.chc-protection__standard {
  border-top-color: rgba(63, 77, 82, .28);
}

.chc-protection__standard span { color: #496f84; }
.chc-protection__standard strong { color: #2c3b42; }

.chc-protection__scene {
  z-index: 4;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 53%;
  height: auto;
  overflow: hidden;
  perspective: 1400px;
}

.chc-protection__scene::before {
  content: "";
  position: absolute;
  display: block !important;
  z-index: 0;
  inset: -12% -23% -9% 6%;
  border: 0;
  border-radius: 0;
  opacity: 1;
  background:
    linear-gradient(116deg, transparent 0 19%, rgba(129, 177, 197, .065) 19.3% 19.8%, transparent 20.1% 56%, rgba(205, 231, 240, .05) 56.3% 56.8%, transparent 57.1%),
    linear-gradient(148deg, #183441 0%, #0d2531 49%, #071821 50%, #102d3a 100%);
  box-shadow: -30px 38px 74px rgba(0, 0, 0, .48), inset 22px 0 42px rgba(154, 198, 216, .035);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 10% 63%);
  filter: none;
  transform: perspective(1200px) rotateY(-12deg) rotateZ(-1.8deg);
  transform-origin: right center;
}

.chc-protection__scene::after {
  content: "";
  position: absolute;
  display: block !important;
  z-index: 1;
  right: -30%;
  bottom: -20%;
  left: 13%;
  height: 47%;
  border: 0;
  border-radius: 0;
  opacity: .86;
  background:
    repeating-linear-gradient(9deg, transparent 0 5px, rgba(78, 58, 36, .025) 6px, transparent 8px),
    linear-gradient(142deg, #e5d4b7 0%, #cbb18a 58%, #a88c68 100%);
  box-shadow: -18px -22px 54px rgba(1, 7, 10, .38), inset 0 1px rgba(255, 250, 238, .45);
  clip-path: polygon(9% 19%, 100% 0, 100% 100%, 0 100%);
  filter: none;
  transform: perspective(950px) rotateX(16deg) rotateZ(-7deg);
  transform-origin: bottom right;
}

.chc-protection__beam,
.chc-protection__halo,
.chc-protection__surface {
  display: none !important;
}

.chc-protection__card {
  z-index: 4;
  top: 49%;
  left: 50%;
  filter: drop-shadow(-18px 35px 28px rgba(0, 0, 0, .5)) drop-shadow(-4px 8px 8px rgba(0, 0, 0, .23));
}

.chc-protection__card--bare { width: 285px; }
.chc-protection__card--sleeved { width: 315px; }
.chc-protection__card--cased { width: 372px; }

.chc-protection__card--sleeved,
.chc-protection__card--cased {
  filter: drop-shadow(-18px 35px 28px rgba(0, 0, 0, .5)) drop-shadow(-4px 8px 8px rgba(0, 0, 0, .23));
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
  right: auto;
  bottom: 108px;
  left: clamp(76px, 6.4vw, 122px);
  width: min(39vw, 640px);
  border-top-color: rgba(63, 77, 82, .28);
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__label {
  color: #536671;
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-arrow--previous {
  color: #315f7c;
}

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-story--protection::before {
    right: 43%;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  }

  .chc-story--protection::after { left: 47%; }

  .chc-story--protection .chc-story__heading {
    right: auto;
    left: 34px;
    width: 48%;
  }

  .chc-protection__scene { width: 55%; }
  .chc-protection__card--bare { width: 248px; }
  .chc-protection__card--sleeved { width: 286px; }
  .chc-protection__card--cased { width: 330px; }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    right: auto;
    left: 34px;
    width: 48%;
  }
}

@media (max-width: 600px) {
  .chc-story--protection {
    background:
      radial-gradient(ellipse 82% 55% at 62% 70%, rgba(93, 148, 171, .22), transparent 75%),
      linear-gradient(154deg, #07151e 0%, #0b2532 64%, #07151d 100%);
  }

  .chc-story--protection::before {
    display: block;
    z-index: 0;
    inset: 0;
    opacity: 1;
    background:
      repeating-linear-gradient(7deg, transparent 0 4px, rgba(80, 61, 40, .02) 5px, transparent 7px),
      linear-gradient(144deg, #efe3cd 0%, #e3d0af 74%, #cdb48f 100%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .33);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 92% 38.5%, 0 43%);
    filter: none;
  }

  .chc-story--protection::after {
    display: block;
    z-index: 2;
    top: 231px;
    right: -8%;
    bottom: auto;
    left: -8%;
    width: auto;
    height: 62px;
    opacity: .7;
    background: linear-gradient(180deg, rgba(79, 57, 36, .18), rgba(4, 15, 21, .28) 48%, transparent 86%);
    filter: blur(9px);
    transform: rotate(-3deg);
  }

  .chc-story--protection .chc-story__heading {
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
  }

  .chc-story--protection .chc-story__heading > p:last-of-type { color: #42545d; }

  .chc-protection__scene {
    top: 254px;
    right: 0;
    bottom: 68px;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .chc-protection__scene::before {
    display: block !important;
    inset: -17% -35% -17% 9%;
    background:
      linear-gradient(118deg, transparent 0 22%, rgba(161, 205, 221, .055) 22.4% 23%, transparent 23.4% 61%, rgba(207, 229, 236, .04) 61.4% 62%, transparent 62.4%),
      linear-gradient(146deg, #173440 0%, #0a202b 51%, #102f3d 100%);
    box-shadow: -22px 30px 60px rgba(0, 0, 0, .43);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 11% 60%);
    transform: perspective(900px) rotateY(-12deg) rotateZ(-2.5deg);
  }

  .chc-protection__scene::after {
    display: block !important;
    right: -39%;
    bottom: -25%;
    left: 19%;
    height: 34%;
    opacity: .55;
    background: linear-gradient(143deg, #e2d0b1, #b89c77 68%, #8d7255);
    box-shadow: -12px -17px 37px rgba(0, 0, 0, .33);
    clip-path: polygon(8% 19%, 100% 0, 100% 100%, 0 100%);
    transform: perspective(800px) rotateX(15deg) rotateZ(-8deg);
  }

  .chc-protection__card {
    top: 50%;
    left: 54%;
    filter: drop-shadow(-13px 24px 18px rgba(0, 0, 0, .46)) drop-shadow(-3px 6px 6px rgba(0, 0, 0, .2));
  }

  .chc-protection__card--bare { width: 178px; }
  .chc-protection__card--sleeved { width: 230px; }
  .chc-protection__card--cased { width: 248px; }

  .chc-protection__card--sleeved,
  .chc-protection__card--cased {
    filter: drop-shadow(-13px 24px 18px rgba(0, 0, 0, .46)) drop-shadow(-3px 6px 6px rgba(0, 0, 0, .2));
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    top: 215px;
    right: 22px;
    bottom: auto;
    left: 22px;
    width: auto;
  }
}

/* Approved transparent product pixels remain literal in render v9. */
.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* Calibrate the approved sleeve render by its visible alpha bounds. The PNG
   remains unchanged; only its wrapper compensates for transparent margins so
   the protected card holds the same physical scale through the turn. */
.chc-protection__card--sleeved { width: 390px; }

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-protection__card--sleeved { width: 339px; }
}

@media (max-width: 600px) {
  .chc-protection__card--sleeved { width: 243px; }
}

/* Protection story render v10 — The Almond Conservation Atelier.
   One continuous matte room replaces the rejected split-panel composition.
   An almond plaster back wall, receding blue side wall, room-scale floor, and
   asymmetric window light give the right-side card real architectural depth. */
.chc-story--protection {
  background:
    repeating-linear-gradient(7deg, transparent 0 4px, rgba(79, 60, 38, .018) 5px, transparent 7px),
    radial-gradient(ellipse 68% 84% at 27% 36%, rgba(255, 253, 245, .46), transparent 74%),
    linear-gradient(143deg, #efe3ce 0%, #e6d5b9 57%, #cfb994 100%);
  box-shadow: inset 0 -1px rgba(79, 60, 38, .18);
}

.chc-story--protection::before {
  display: block;
  z-index: 0;
  inset: 0;
  opacity: 1;
  background:
    repeating-linear-gradient(101deg, transparent 0 82px, rgba(186, 218, 230, .022) 83px, transparent 85px),
    linear-gradient(142deg, #315f7c 0%, #173d52 45%, #0b2634 100%);
  box-shadow: -36px 0 78px rgba(52, 39, 27, .28), inset 28px 0 58px rgba(194, 222, 232, .06);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 69% 100%);
  filter: none;
}

.chc-story--protection::after {
  display: block;
  z-index: 1;
  inset: 0;
  width: auto;
  opacity: 1;
  background:
    linear-gradient(100deg, transparent 0 55%, rgba(73, 51, 30, .17) 61%, rgba(255, 252, 242, .13) 66%, transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 36%, rgba(71, 51, 31, .07));
  filter: none;
  transform: none;
}

.chc-story--protection .chc-story__heading {
  top: 50%;
  right: auto;
  left: clamp(76px, 6.4vw, 122px);
  width: min(40vw, 640px);
  transform: translateY(-50%);
}

.chc-story--protection .chc-story__kicker { color: #426d84; }

.chc-story--protection .chc-story__heading h2 {
  max-width: 625px;
  color: #172831;
  font-size: clamp(54px, 3.8vw, 66px);
}

.chc-story--protection .chc-story__heading h2 span { color: #315f7c; }

.chc-story--protection .chc-story__heading > p:last-of-type {
  max-width: 555px;
  color: #41535b;
  line-height: 1.6;
}

.chc-protection__standard { display: none; }

.chc-story--protection .chc-story__actions {
  gap: 18px;
  margin-top: 24px;
}

.chc-protection__scene {
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  perspective: 1400px;
}

.chc-protection__scene::before {
  content: "";
  position: absolute;
  display: block !important;
  z-index: 1;
  right: -8%;
  bottom: -24%;
  left: -8%;
  height: 52%;
  border: 0;
  border-radius: 0;
  opacity: 1;
  background:
    repeating-linear-gradient(94deg, transparent 0 95px, rgba(77, 57, 36, .035) 96px, transparent 98px),
    linear-gradient(112deg, #d7c2a1 0%, #c1a984 44%, #8da8b2 69%, #4f788b 100%);
  box-shadow: 0 -32px 70px rgba(66, 47, 28, .19), inset 0 2px rgba(255, 251, 240, .28);
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 100%);
  filter: none;
  transform: perspective(1150px) rotateX(48deg);
  transform-origin: bottom center;
}

.chc-protection__scene::after {
  content: "";
  position: absolute;
  display: block !important;
  z-index: 2;
  top: -22%;
  right: -3%;
  width: 45%;
  height: 118%;
  border: 0;
  border-radius: 0;
  opacity: .56;
  background: linear-gradient(104deg, transparent 0 18%, rgba(239, 249, 250, .28) 43%, rgba(178, 211, 222, .08) 61%, transparent 82%);
  box-shadow: none;
  clip-path: polygon(35% 0, 100% 0, 70% 100%, 0 100%);
  filter: blur(16px);
  transform: rotate(2deg);
}

.chc-protection__beam,
.chc-protection__halo,
.chc-protection__surface {
  display: none !important;
}

.chc-protection__card {
  z-index: 4;
  top: 49%;
  left: 76%;
  filter: drop-shadow(13px 31px 31px rgba(23, 40, 49, .32)) drop-shadow(-7px 3px 11px rgba(155, 187, 201, .15));
}

.chc-protection__card--bare { width: 285px; }
.chc-protection__card--sleeved { width: 390px; }
.chc-protection__card--cased { width: 372px; }

.chc-protection__card--sleeved,
.chc-protection__card--cased {
  filter: drop-shadow(13px 31px 31px rgba(23, 40, 49, .32)) drop-shadow(-7px 3px 11px rgba(155, 187, 201, .15));
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
  top: auto;
  right: auto;
  bottom: 76px;
  left: clamp(76px, 6.4vw, 122px);
  width: min(40vw, 640px);
  border-top-color: rgba(61, 77, 84, .28);
}

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-story--protection::before {
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 67% 100%);
  }

  .chc-story--protection .chc-story__heading {
    right: auto;
    left: 34px;
    width: 46%;
  }

  .chc-story--protection .chc-story__heading h2 {
    font-size: clamp(42px, 5.1vw, 54px);
  }

  .chc-story--protection .chc-story__heading > p:last-of-type {
    font-size: 13.2px;
  }

  .chc-protection__card { left: 76%; }
  .chc-protection__card--bare { width: 248px; }
  .chc-protection__card--sleeved { width: 339px; }
  .chc-protection__card--cased { width: 330px; }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    right: auto;
    left: 34px;
    width: 46%;
  }
}

@media (max-width: 600px) {
  .chc-story--protection {
    background:
      repeating-linear-gradient(7deg, transparent 0 4px, rgba(79, 60, 38, .017) 5px, transparent 7px),
      linear-gradient(144deg, #efe3ce 0%, #e1cdaa 76%, #c9b18b 100%);
  }

  .chc-story--protection::before {
    display: block;
    inset: 0;
    background: linear-gradient(144deg, #315f7c 0%, #173d52 53%, #0a2533 100%);
    box-shadow: -20px 0 48px rgba(64, 46, 27, .25);
    clip-path: polygon(75% 36%, 100% 34%, 100% 100%, 70% 100%);
  }

  .chc-story--protection::after {
    display: block;
    inset: 0;
    background: linear-gradient(104deg, transparent 0 61%, rgba(79, 57, 35, .16) 69%, rgba(246, 249, 245, .08) 76%, transparent 86%);
  }

  .chc-story--protection .chc-story__heading {
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    transform: none;
  }

  .chc-story--protection .chc-story__heading h2 {
    font-size: 31px;
  }

  .chc-story--protection .chc-story__heading > p:last-of-type {
    font-size: 10.2px;
    line-height: 1.38;
  }

  .chc-story--protection .chc-story__actions {
    margin-top: 9px;
  }

  .chc-protection__scene {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  .chc-protection__scene::before {
    right: -18%;
    bottom: -22%;
    left: -18%;
    height: 42%;
    background:
      repeating-linear-gradient(94deg, transparent 0 61px, rgba(73, 53, 32, .03) 62px, transparent 64px),
      linear-gradient(112deg, #d6c09c 0%, #baa17c 47%, #7898a5 72%, #416c80 100%);
    box-shadow: 0 -20px 45px rgba(62, 44, 27, .17);
    clip-path: polygon(0 27%, 100% 0, 100% 100%, 0 100%);
    transform: perspective(880px) rotateX(47deg);
  }

  .chc-protection__scene::after {
    top: 29%;
    right: -8%;
    width: 55%;
    height: 67%;
    opacity: .38;
    background: linear-gradient(103deg, transparent 0 19%, rgba(237, 248, 250, .24) 43%, rgba(176, 209, 220, .06) 62%, transparent 84%);
    clip-path: polygon(38% 0, 100% 0, 71% 100%, 0 100%);
    filter: blur(11px);
  }

  .chc-protection__card {
    top: 63.5%;
    left: 50%;
    filter: drop-shadow(9px 24px 20px rgba(23, 40, 49, .3)) drop-shadow(-5px 2px 8px rgba(155, 187, 201, .13));
  }

  .chc-protection__card--bare { width: 178px; }
  .chc-protection__card--sleeved { width: 243px; }
  .chc-protection__card--cased { width: 248px; }

  .chc-protection__card--sleeved,
  .chc-protection__card--cased {
    filter: drop-shadow(9px 24px 20px rgba(23, 40, 49, .3)) drop-shadow(-5px 2px 8px rgba(155, 187, 201, .13));
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    top: 215px;
    right: 22px;
    bottom: auto;
    left: 22px;
    width: auto;
  }
}

/* Approved transparent product pixels remain literal in render v10. */
.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* Room-scale floor correction: keep the perspective transition below the copy
   instead of allowing the old projection math to rise like a graphic band. */
.chc-protection__scene::before {
  top: auto;
  right: -6%;
  bottom: -2%;
  left: -6%;
  height: 36%;
  clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 100%);
  transform: none;
}

@media (max-width: 600px) {
  .chc-story--protection::before {
    clip-path: polygon(62% 36%, 100% 34%, 100% 100%, 72% 100%);
  }

  .chc-protection__scene::before {
    top: auto;
    right: -14%;
    bottom: -3%;
    left: -14%;
    height: 30%;
    clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%);
    transform: none;
  }

  .chc-protection__card { left: 52%; }
}

/* Protection story render v11 — Suspended Linen Gallery.
   A continuous almond-to-blue atmosphere replaces the rejected room geometry.
   Matte fabric sails establish foreground, middle distance, and background
   without enclosing the approved card in a stage, frame, halo, or pedestal. */
.chc-story--protection {
  background:
    linear-gradient(103deg, #f1e7d4 0%, #e8d7bb 43%, #c5c7bc 60%, #93adb7 76%, #315f7c 100%);
}

.chc-story--protection::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .54;
  clip-path: none;
  background:
    repeating-linear-gradient(0deg, rgba(42, 60, 67, .022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 252, 242, .024) 0 1px, transparent 1px 7px),
    linear-gradient(126deg, rgba(255, 252, 243, .28), transparent 36%, transparent 73%, rgba(13, 39, 52, .18));
  box-shadow: inset 0 -70px 110px rgba(27, 45, 53, .12);
}

.chc-story--protection::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: none;
  opacity: 1;
  background:
    linear-gradient(121deg, rgba(255, 253, 246, .23), transparent 34%, transparent 68%, rgba(174, 206, 216, .13) 82%, rgba(20, 51, 66, .12));
  box-shadow: none;
  filter: none;
  transform: none;
  pointer-events: none;
}

.chc-story--protection .chc-story__heading {
  z-index: 9;
  top: 50%;
  right: auto;
  left: clamp(76px, 6.4vw, 122px);
  width: min(40vw, 640px);
  padding: 0;
  color: #172831;
  text-align: left;
  text-shadow: none;
  transform: translateY(-50%);
}

.chc-story--protection .chc-story__kicker {
  color: #315f7c;
  letter-spacing: .24em;
}

.chc-story--protection .chc-story__heading h2 {
  max-width: 640px;
  color: #172831;
  font-size: clamp(54px, 3.8vw, 66px);
  line-height: .97;
  text-shadow: none;
}

.chc-story--protection .chc-story__heading h2 span { color: #315f7c; }

.chc-story--protection .chc-story__heading > p:last-of-type {
  max-width: 555px;
  color: #3d5058;
  font-size: 15px;
  line-height: 1.6;
}

.chc-protection__standard { display: none; }

.chc-story--protection .chc-story__actions {
  gap: 12px;
  justify-content: flex-start;
  margin-top: 23px;
}

.chc-story--protection .chc-story__actions a {
  min-height: 43px;
  border: 1px solid rgba(41, 71, 84, .44);
  border-radius: 2px;
  background: rgba(246, 240, 226, .7);
  color: #274351;
  box-shadow: none;
  text-shadow: none;
}

.chc-story--protection .chc-story__actions a:first-child {
  border-color: #315f7c;
  background: #315f7c;
  color: #fff;
  box-shadow: 0 12px 24px rgba(25, 56, 71, .16);
}

.chc-protection__scene {
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1400px;
}

.chc-protection__scene::before,
.chc-protection__scene::after {
  display: none !important;
}

.chc-protection__beam,
.chc-protection__halo,
.chc-protection__surface {
  position: absolute;
  display: block !important;
  border: 0;
  border-radius: 0;
  clip-path: none;
  pointer-events: none;
}

.chc-protection__beam {
  z-index: 1;
  top: -8%;
  bottom: auto;
  left: 56%;
  width: 22%;
  height: 116%;
  opacity: .9;
  background:
    linear-gradient(90deg, rgba(210, 226, 231, .18), transparent 8%),
    linear-gradient(105deg, #426f86 0%, #315f7c 48%, #244a5d 100%);
  box-shadow: -52px 24px 72px rgba(31, 54, 65, .2), inset 12px 0 26px rgba(206, 225, 232, .11);
  filter: none;
  transform: perspective(1400px) rotateY(58deg);
  transform-origin: left center;
  animation: none !important;
}

.chc-protection__halo {
  z-index: 2;
  top: -5%;
  right: auto;
  bottom: auto;
  left: 65%;
  width: 15%;
  height: 110%;
  aspect-ratio: auto;
  opacity: .9;
  background:
    linear-gradient(90deg, rgba(255, 250, 238, .38), transparent 11%),
    linear-gradient(102deg, #e5d3b6 0%, #d6bd97 54%, #bba27d 100%);
  box-shadow: -40px 20px 62px rgba(38, 52, 57, .18), inset -10px 0 24px rgba(49, 95, 124, .1);
  filter: none;
  transform: perspective(1400px) rotateY(-54deg) translateZ(-40px);
  transform-origin: right center;
}

.chc-protection__surface {
  z-index: 5;
  top: -10%;
  right: -4%;
  bottom: auto;
  left: auto;
  width: 14%;
  height: 120%;
  opacity: .92;
  background:
    linear-gradient(90deg, rgba(153, 187, 201, .18), transparent 12%),
    linear-gradient(104deg, #315f7c 0%, #244a5d 58%, #172f3b 100%);
  box-shadow: -44px 12px 78px rgba(18, 38, 48, .3);
  filter: blur(1.4px);
  transform: perspective(1400px) rotateY(-32deg) translateZ(90px);
  transform-origin: right center;
}

.chc-protection__card {
  z-index: 7;
  top: 49%;
  left: 76%;
  filter: drop-shadow(18px 28px 34px rgba(23, 40, 49, .28)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .16));
}

.chc-protection__card--bare { width: 285px; }
.chc-protection__card--sleeved { width: 390px; }
.chc-protection__card--cased { width: 372px; }

.chc-protection__card--sleeved,
.chc-protection__card--cased {
  filter: drop-shadow(18px 28px 34px rgba(23, 40, 49, .28)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .16));
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
  z-index: 10;
  top: auto;
  right: auto;
  bottom: 54px;
  left: clamp(76px, 6.4vw, 122px);
  width: min(40vw, 640px);
}

.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__label,
.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation__count,
.cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation button {
  color: #315f7c;
  text-shadow: none;
}

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-story--protection .chc-story__heading {
    left: 34px;
    width: 46%;
  }

  .chc-story--protection .chc-story__heading h2 {
    font-size: clamp(42px, 5.1vw, 54px);
  }

  .chc-story--protection .chc-story__heading > p:last-of-type {
    font-size: 13.2px;
  }

  .chc-protection__beam { left: 58%; width: 19%; }
  .chc-protection__halo { left: 67%; width: 13%; }
  .chc-protection__surface { width: 12%; }
  .chc-protection__card { top: 50%; left: 76%; }
  .chc-protection__card--bare { width: 248px; }
  .chc-protection__card--sleeved { width: 339px; }
  .chc-protection__card--cased { width: 330px; }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    left: 34px;
    width: 46%;
  }
}

@media (max-width: 600px) {
  .chc-story--protection {
    background:
      linear-gradient(180deg, #f1e7d5 0%, #e9d8bc 33%, #ccd0c5 47%, #88a7b3 68%, #315f7c 100%);
  }

  .chc-story--protection::before {
    opacity: .46;
    clip-path: none;
    background:
      repeating-linear-gradient(0deg, rgba(39, 59, 67, .02) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(90deg, rgba(255, 252, 242, .022) 0 1px, transparent 1px 7px),
      linear-gradient(180deg, rgba(255, 253, 246, .25), transparent 43%, rgba(29, 63, 78, .12));
  }

  .chc-story--protection::after {
    background: linear-gradient(151deg, rgba(255, 253, 246, .18), transparent 39%, transparent 68%, rgba(18, 46, 60, .14));
  }

  .chc-story--protection .chc-story__heading {
    top: 18px;
    right: 22px;
    left: 22px;
    width: auto;
    padding: 0;
    transform: none;
  }

  .chc-story--protection .chc-story__kicker {
    font-size: 7.6px;
    letter-spacing: .2em;
  }

  .chc-story--protection .chc-story__heading h2 {
    max-width: none;
    font-size: 31px;
    line-height: .94;
  }

  .chc-story--protection .chc-story__heading > p:last-of-type {
    max-width: none;
    margin-top: 8px;
    color: #334851;
    font-size: 10.2px;
    line-height: 1.38;
  }

  .chc-story--protection .chc-story__actions {
    gap: 8px;
    margin-top: 9px;
  }

  .chc-story--protection .chc-story__actions a {
    min-height: 34px;
  }

  .chc-protection__scene {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  .chc-protection__beam {
    top: 34%;
    bottom: auto;
    left: -14%;
    width: 32%;
    height: 72%;
    opacity: .82;
    background: linear-gradient(103deg, #e5d2b3, #c9ad85 65%, #a98f6c);
    box-shadow: 26px 12px 58px rgba(29, 49, 57, .18);
    filter: none;
    transform: perspective(900px) rotateY(55deg);
    transform-origin: right center;
  }

  .chc-protection__halo { display: none !important; }

  .chc-protection__surface {
    top: 31%;
    right: -16%;
    bottom: auto;
    left: auto;
    width: 34%;
    height: 76%;
    opacity: .86;
    background: linear-gradient(103deg, #517893, #315f7c 58%, #24485a);
    box-shadow: -26px 10px 64px rgba(16, 38, 49, .24);
    filter: none;
    transform: perspective(900px) rotateY(-50deg);
    transform-origin: left center;
  }

  .chc-protection__card {
    top: 62.5%;
    left: 50%;
    filter: drop-shadow(10px 23px 22px rgba(23, 40, 49, .3)) drop-shadow(-5px 2px 7px rgba(239, 225, 199, .14));
  }

  .chc-protection__card--bare { width: 178px; }
  .chc-protection__card--sleeved { width: 243px; }
  .chc-protection__card--cased { width: 248px; }

  .chc-protection__card--sleeved,
  .chc-protection__card--cased {
    filter: drop-shadow(10px 23px 22px rgba(23, 40, 49, .3)) drop-shadow(-5px 2px 7px rgba(239, 225, 199, .14));
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    top: 215px;
    right: 22px;
    bottom: auto;
    left: 22px;
    width: auto;
  }
}

/* Approved transparent product pixels remain literal in render v11. */
.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* Render v12 final precedence guard. Keep this at the physical end of the
   stylesheet so the retired experimental layouts cannot reappear. */
.chc-story--protection {
  background-color: #c7c8bd;
  background-image: url("carousel-protection-assets-v4/protection-gallery-background-desktop-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.chc-story--protection::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 1;
  clip-path: none;
  background: linear-gradient(90deg, rgba(250, 245, 234, .13), transparent 46%, transparent 78%, rgba(8, 28, 38, .12));
  box-shadow: inset 0 -32px 65px rgba(17, 42, 54, .1);
  filter: none;
  transform: none;
}

.chc-story--protection::after { display: none; }

.chc-protection__scene::before,
.chc-protection__scene::after,
.chc-protection__beam,
.chc-protection__halo,
.chc-protection__surface {
  display: none !important;
  animation: none !important;
}

.chc-protection__card {
  --turn-shadow-front: drop-shadow(18px 28px 34px rgba(23, 40, 49, .3)) drop-shadow(-7px 2px 8px rgba(238, 224, 197, .15));
  --turn-shadow-edge-right: drop-shadow(2px 9px 6px rgba(23, 40, 49, .13));
  --turn-shadow-back: drop-shadow(-15px 27px 31px rgba(23, 40, 49, .27)) drop-shadow(6px 2px 8px rgba(208, 224, 229, .11));
  --turn-shadow-edge-left: drop-shadow(-2px 9px 6px rgba(23, 40, 49, .13));
  backface-visibility: visible;
  transform-style: preserve-3d;
  will-change: opacity, transform, filter;
}

.chc-protection__bare3d-back {
  overflow: hidden;
  border-color: rgba(104, 116, 120, .28);
  background: #f2f4f4 url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png") center / cover no-repeat;
}

.chc-protection__product3d-back,
.chc-protection__product3d--sleeve .chc-protection__product3d-back,
.chc-protection__product3d--case .chc-protection__product3d-back {
  overflow: hidden;
  border-radius: 3.8% / 2.6%;
  background-color: #f2f4f4;
  background-image:
    linear-gradient(110deg, rgba(232, 247, 251, .11), transparent 34%, rgba(247, 252, 253, .08) 66%, transparent),
    url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.chc-slide.is-active .chc-protection__card--bare {
  animation: chc-protection-full-turn 14s linear infinite, chc-protection-phase-bare 14s linear infinite;
}

.chc-slide.is-active .chc-protection__card--sleeved {
  animation: chc-protection-full-turn 14s linear infinite, chc-protection-phase-sleeve 14s linear infinite;
}

.chc-slide.is-active .chc-protection__card--cased {
  animation: chc-protection-full-turn 14s linear infinite, chc-protection-phase-case 14s linear infinite;
}

.chc-slide.is-active .chc-protection__bare3d-highlight {
  animation: chc-protection-full-turn-highlight 14s linear infinite;
}

@media (max-width: 600px) {
  .chc-story--protection {
    background-color: #8fa8b2;
    background-image: url("carousel-protection-assets-v4/protection-gallery-background-mobile-v1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .chc-story--protection::before {
    opacity: 1;
    clip-path: none;
    background: linear-gradient(180deg, rgba(250, 246, 237, .08), transparent 40%, rgba(23, 53, 67, .08));
    box-shadow: none;
  }

  .chc-protection__card {
    --turn-shadow-front: drop-shadow(10px 23px 22px rgba(23, 40, 49, .31)) drop-shadow(-5px 2px 7px rgba(239, 225, 199, .13));
    --turn-shadow-edge-right: drop-shadow(1px 7px 5px rgba(23, 40, 49, .13));
    --turn-shadow-back: drop-shadow(-9px 22px 20px rgba(23, 40, 49, .28)) drop-shadow(4px 2px 6px rgba(210, 225, 230, .1));
    --turn-shadow-edge-left: drop-shadow(-1px 7px 5px rgba(23, 40, 49, .13));
  }
}

.chc-protection__product3d-face {
  filter: none;
  image-rendering: auto;
}

/* Render v12 depth correction: the rotating object must remain filter-free or
   the browser flattens its front, back, and edge into one mirrored plane. */
.chc-protection__card,
.chc-protection__card--sleeved,
.chc-protection__card--cased {
  filter: none !important;
}

/* The Pro-Mold face remains unchanged while its surrounding holder is modeled
   as one opaque acrylic body, including at the exact edge-on angle. */
.chc-protection__product3d--case {
  --product-depth: clamp(13px, .95vw, 15px);
}

.chc-protection__product3d--case .chc-protection__product3d-edge {
  border-color: rgba(108, 123, 131, .34);
  background: linear-gradient(90deg,
    rgba(230, 237, 240, .88),
    rgba(178, 191, 198, .84) 24%,
    rgba(147, 162, 170, .82) 52%,
    rgba(177, 190, 197, .84) 78%,
    rgba(225, 233, 236, .88));
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .32),
    inset -1px 0 0 rgba(46, 61, 69, .18);
}

.chc-protection__product3d--case .chc-protection__product3d-edge--top,
.chc-protection__product3d--case .chc-protection__product3d-edge--bottom {
  background:
    linear-gradient(180deg, rgba(237, 243, 245, .88), rgba(173, 186, 193, .82) 46%, rgba(145, 159, 167, .8) 68%, rgba(222, 231, 234, .86));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .42),
    inset 0 -1px 1px rgba(44, 58, 66, .18);
}

/* The cased back is the back of the complete magnetic holder, not a loose card
   face. Its outer acrylic frame shares the exact bounds used by the side wall. */
.chc-protection__product3d--case .chc-protection__product3d-back {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(70, 84, 91, .62);
  border-radius: 2.8%;
  background:
    linear-gradient(135deg, rgba(247, 250, 251, .5), rgba(125, 140, 147, .26) 43%, rgba(224, 231, 234, .44)),
    rgba(148, 160, 166, .34);
  box-shadow:
    inset 0 0 0 3px rgba(242, 247, 248, .42),
    inset 0 0 0 6px rgba(73, 88, 96, .24),
    inset 0 0 12px rgba(36, 48, 55, .2);
}

.chc-protection__product3d--case .chc-protection__product3d-back::before,
.chc-protection__product3d--case .chc-protection__product3d-back::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.chc-protection__product3d--case .chc-protection__product3d-back::before {
  z-index: -1;
  top: 13.5%;
  right: 6%;
  bottom: 7.5%;
  left: 6%;
  border: 1px solid rgba(61, 76, 84, .44);
  border-radius: 2.6%;
  background: #f2f4f4 url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png") center / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(227, 234, 236, .5), inset 0 0 4px rgba(33, 45, 51, .18);
}

.chc-protection__product3d--case .chc-protection__product3d-back::after {
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 5.6%, #d8ad57 0 2.1%, #6e7476 2.2% 3.3%, rgba(235, 239, 240, .72) 3.4% 4.5%, transparent 4.6%),
    linear-gradient(112deg, rgba(255, 255, 255, .22), transparent 24% 72%, rgba(255, 255, 255, .16));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

@media (max-width: 600px) {
  .chc-protection__product3d--case {
    --product-depth: 10px;
  }
}

/* Opacity on the rotating parent forces browsers to flatten its 3D children.
   Use discrete, edge-safe layer handoffs so every visible state retains depth. */
@media (prefers-reduced-motion: no-preference) {
  .chc-slide.is-active .chc-protection__card--bare,
  .chc-slide.is-active .chc-protection__card--sleeved,
  .chc-slide.is-active .chc-protection__card--cased {
    opacity: 1 !important;
    transform-style: preserve-3d;
    will-change: transform;
  }
}

@keyframes chc-protection-phase-bare {
  0%, 31.99% { visibility: visible; }
  32%, 95.99% { visibility: hidden; }
  96%, 100% { visibility: visible; }
}

@keyframes chc-protection-phase-sleeve {
  0%, 31.99% { visibility: hidden; }
  32%, 63.99% { visibility: visible; }
  64%, 100% { visibility: hidden; }
}

@keyframes chc-protection-phase-case {
  0%, 63.99% { visibility: hidden; }
  64%, 95.99% { visibility: visible; }
  96%, 100% { visibility: hidden; }
}

/* Opposing walls face opposing directions. Hiding each wall's reverse side
   prevents both rails from appearing simultaneously at the edge-on angle. */
.chc-protection__scene {
  perspective-origin: 76% 49%;
}

.chc-protection__bare3d-edge,
.chc-protection__product3d-edge {
  backface-visibility: hidden;
}

.chc-protection__bare3d-edge--left,
.chc-protection__product3d-edge--left {
  transform: translateX(-50%) rotateY(-90deg);
}

.chc-protection__bare3d-edge--right,
.chc-protection__product3d-edge--right {
  transform: translateX(50%) rotateY(90deg);
}

.chc-protection__bare3d-edge--top,
.chc-protection__product3d-edge--top {
  transform: translateY(-50%) rotateX(90deg);
}

.chc-protection__bare3d-edge--bottom,
.chc-protection__product3d-edge--bottom {
  transform: translateY(50%) rotateX(-90deg);
}

@media (max-width: 600px) {
  .chc-protection__scene {
    perspective-origin: 50% 62.5%;
  }
}

@keyframes chc-protection-full-turn {
  0% { transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(0deg); }
  25% { transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(90deg); }
  50% { transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(180deg); }
  75% { transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(270deg); }
  100% { transform: translate3d(-50%, -50%, var(--protection-stage-depth)) rotateX(1.4deg) rotateY(360deg); }
}

.chc-protection__scene::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 80%;
  left: 76%;
  display: block !important;
  width: 300px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  opacity: .26;
  background: radial-gradient(ellipse, rgba(17, 37, 47, .58), rgba(17, 37, 47, .18) 48%, transparent 72%);
  box-shadow: none;
  clip-path: none;
  filter: blur(11px);
  transform: translate(-46%, -50%) scaleX(1);
  transform-origin: center;
  animation: chc-protection-environment-shadow 14s linear infinite !important;
  pointer-events: none;
}

@keyframes chc-protection-environment-shadow {
  0%, 100% { opacity: .26; transform: translate(-46%, -50%) scaleX(1); }
  25% { opacity: .08; transform: translate(-50%, -50%) scaleX(.18); }
  50% { opacity: .24; transform: translate(-54%, -50%) scaleX(.96); }
  75% { opacity: .08; transform: translate(-50%, -50%) scaleX(.18); }
}

@media (max-width: 600px) {
  .chc-protection__scene::after {
    top: 89%;
    left: 50%;
    width: 210px;
    height: 40px;
    filter: blur(9px);
  }
}

/* Protection turn audit v13 — three complete objects, three complete turns.
   The active protection screen lasts 35 seconds. Each physical state receives
   an uninterrupted 10-second revolution, changes only while front-facing,
   then the bare card rests front-facing for the final five seconds. */
.chc-protection__card--bare,
.chc-protection__card--sleeved,
.chc-protection__card--cased {
  --protection-stage-depth: 0px;
}

/* The approved sleeve already compensates for transparent canvas padding.
   The approved Pro-Mold has less padding, so this alpha-aware width removes
   the former scale jump while retaining its naturally taller magnet header. */
.chc-protection__card--cased { width: 336px; }

.chc-protection__bare3d { --bare-card-depth: 1.45px; }

.chc-protection__bare3d-edge {
  border: 0;
  background: linear-gradient(90deg, #c8c5ba, #eeeadf 50%, #aaa79d);
  box-shadow: inset 0 0 1px rgba(70, 66, 58, .32);
}

/* Exact visible-object bounds measured from the approved transparent PNGs. */
.chc-protection__product3d--sleeve {
  --product-depth: 1.8px;
  --product-object-top: 13.737%;
  --product-object-right: 12.793%;
  --product-object-bottom: 11.979%;
  --product-object-left: 14.063%;
}

.chc-protection__product3d--case {
  --product-object-top: 4.167%;
  --product-object-right: 7.324%;
  --product-object-bottom: 4.036%;
  --product-object-left: 7.520%;
}

/* A sleeved back is one card inside one clear film envelope. The outer back
   and all four edge walls share the sleeve silhouette; the authentic KAYOU
   back sits inside it at the same inset as the photographed front card. */
.chc-protection__product3d--sleeve .chc-protection__product3d-back {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(231, 245, 249, .36);
  border-radius: 2.7%;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .19), transparent 29% 73%, rgba(222, 241, 247, .13)),
    rgba(188, 219, 230, .055);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 -4px 10px rgba(60, 91, 104, .045);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-back::before,
.chc-protection__product3d--sleeve .chc-protection__product3d-back::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.chc-protection__product3d--sleeve .chc-protection__product3d-back::before {
  z-index: -1;
  top: 3.42%;
  right: 3.07%;
  bottom: 2.19%;
  left: 3.47%;
  border: 1px solid rgba(110, 122, 126, .22);
  border-radius: 3.7% / 2.6%;
  background: #f2f4f4 url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png") center / cover no-repeat;
  box-shadow: 0 1px 4px rgba(27, 43, 50, .18);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-back::after {
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(108deg, rgba(255, 255, 255, .13), transparent 27% 71%, rgba(236, 249, 252, .1));
}

/* Keep the authentic back inside the same card aperture photographed on the
   approved Pro-Mold front. This removes the oversized white block at rear. */
.chc-protection__product3d--case .chc-protection__product3d-back::before {
  top: 14.40%;
  right: 11.47%;
  bottom: 6.81%;
  left: 9.52%;
}

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-protection__card--cased { width: 292px; }
}

@media (max-width: 600px) {
  .chc-protection__card--cased { width: 210px; }
  .chc-protection__bare3d { --bare-card-depth: 1.15px; }
  .chc-protection__product3d--sleeve { --product-depth: 1.35px; }
}

@media (prefers-reduced-motion: no-preference) {
  .chc-slide.is-active .chc-protection__card--bare {
    animation:
      chc-protection-three-full-turns 35s linear infinite,
      chc-protection-three-phase-bare 35s linear infinite;
  }

  .chc-slide.is-active .chc-protection__card--sleeved {
    animation:
      chc-protection-three-full-turns 35s linear infinite,
      chc-protection-three-phase-sleeve 35s linear infinite;
  }

  .chc-slide.is-active .chc-protection__card--cased {
    animation:
      chc-protection-three-full-turns 35s linear infinite,
      chc-protection-three-phase-case 35s linear infinite;
  }

  .chc-slide.is-active .chc-protection__bare3d-highlight {
    animation: chc-protection-three-highlight 35s linear infinite;
  }

  .chc-slide.is-active .chc-protection__scene::after {
    animation: chc-protection-three-shadow 35s linear infinite !important;
  }
}

@keyframes chc-protection-three-full-turns {
  0% {
    transform: translate3d(-50%, -50%, 0) rotateX(1.4deg) rotateY(0deg);
  }
  28.5714% {
    transform: translate3d(-50%, -50%, 0) rotateX(1.4deg) rotateY(360deg);
  }
  57.1429% {
    transform: translate3d(-50%, -50%, 0) rotateX(1.4deg) rotateY(720deg);
  }
  85.7143%, 100% {
    transform: translate3d(-50%, -50%, 0) rotateX(1.4deg) rotateY(1080deg);
  }
}

@keyframes chc-protection-three-phase-bare {
  0%, 28.570% { visibility: visible; }
  28.571%, 85.713% { visibility: hidden; }
  85.714%, 100% { visibility: visible; }
}

@keyframes chc-protection-three-phase-sleeve {
  0%, 28.570% { visibility: hidden; }
  28.571%, 57.141% { visibility: visible; }
  57.142%, 100% { visibility: hidden; }
}

@keyframes chc-protection-three-phase-case {
  0%, 57.141% { visibility: hidden; }
  57.142%, 85.713% { visibility: visible; }
  85.714%, 100% { visibility: hidden; }
}

/* The floor shadow follows each of the three turns and then rests with the
   front-facing bare card, instead of drifting independently out of phase. */
@keyframes chc-protection-three-shadow {
  0%, 28.5714%, 57.1429%, 85.7143%, 100% {
    opacity: .26;
    transform: translate(-46%, -50%) scaleX(1);
  }
  7.1429%, 35.7143%, 64.2857% {
    opacity: .08;
    transform: translate(-50%, -50%) scaleX(.18);
  }
  14.2857%, 42.8571%, 71.4286% {
    opacity: .24;
    transform: translate(-54%, -50%) scaleX(.96);
  }
  21.4286%, 50%, 78.5714% {
    opacity: .08;
    transform: translate(-50%, -50%) scaleX(.18);
  }
}

@keyframes chc-protection-three-highlight {
  0%, 28.5714%, 57.1429%, 85.7143%, 100% {
    opacity: .08;
    transform: translateX(-22%);
  }
  4%, 32.5714%, 61.1429% {
    opacity: .2;
    transform: translateX(48%);
  }
  7.1429%, 21.4286%, 35.7143%, 50%, 64.2857%, 78.5714% {
    opacity: 0;
    transform: translateX(70%);
  }
}

/* Short-phone fit guard. The carousel itself is taller than these viewports,
   so the three equal-apparent-size objects are scaled as one group and lifted
   above the fixed Contact Us control. Taller phones keep the approved scale. */
@media (max-width: 600px) and (max-height: 700px) {
  .chc-protection__card {
    top: 52.1%;
  }

  .chc-protection__card--bare {
    width: 127px;
  }

  .chc-protection__card--sleeved {
    width: 174px;
  }

  .chc-protection__card--cased {
    width: 150px;
  }

  .cinematic-home-carousel:has(.chc-story--protection.is-active) .chc-screen-navigation {
    top: 205px;
  }
}

/* Pro-Mold real-side reference v14.
   The photographed holder is not an opaque rail: it is two clear acrylic
   halves surrounding a narrow recessed card channel. Keep the approved front
   untouched and let the page background remain visible through every wall. */
.chc-protection__product3d--case .chc-protection__product3d-edge {
  overflow: hidden;
  border: 0;
  background: linear-gradient(90deg,
    rgba(248, 253, 255, .45) 0 3%,
    rgba(181, 215, 228, .16) 4% 35%,
    rgba(238, 249, 253, .2) 36% 43%,
    rgba(46, 71, 81, .32) 44% 50%,
    rgba(238, 249, 253, .19) 51% 56%,
    rgba(176, 213, 227, .14) 57% 96%,
    rgba(246, 252, 254, .42) 97% 100%);
  box-shadow: none;
}

/* The wall overlaps the photographed acrylic rim by less than one pixel. That
   keeps it physically attached at three-quarter angles without covering any
   approved artwork at the front or back. */
.chc-protection__product3d--case .chc-protection__product3d-edge--left {
  left: calc(var(--product-object-left) + .7px);
}

.chc-protection__product3d--case .chc-protection__product3d-edge--right {
  right: calc(var(--product-object-right) + .7px);
}

.chc-protection__product3d--case .chc-protection__product3d-edge--top,
.chc-protection__product3d--case .chc-protection__product3d-edge--bottom {
  background: linear-gradient(180deg,
    rgba(248, 253, 255, .45) 0 3%,
    rgba(181, 215, 228, .16) 4% 35%,
    rgba(238, 249, 253, .2) 36% 43%,
    rgba(46, 71, 81, .32) 44% 50%,
    rgba(238, 249, 253, .19) 51% 56%,
    rgba(176, 213, 227, .14) 57% 96%,
    rgba(246, 252, 254, .42) 97% 100%);
  box-shadow: none;
}

.chc-protection__product3d--case .chc-protection__product3d-edge--top {
  top: calc(var(--product-object-top) + .7px);
}

.chc-protection__product3d--case .chc-protection__product3d-edge--bottom {
  bottom: calc(var(--product-object-bottom) + .7px);
}

/* The rear is the same transparent holder around the authentic KAYOU card,
   not a second gray plate. The inset card and magnet detail stay unchanged. */
.chc-protection__product3d--case .chc-protection__product3d-back {
  border-color: rgba(218, 239, 247, .4);
  background:
    linear-gradient(135deg, rgba(249, 253, 254, .17), rgba(151, 194, 211, .035) 42%, rgba(238, 249, 252, .12)),
    rgba(192, 221, 232, .035);
  box-shadow:
    inset 0 0 0 1px rgba(248, 253, 255, .3),
    inset 0 0 0 3px rgba(147, 190, 207, .075),
    inset 0 0 8px rgba(211, 237, 246, .08);
}

/* The authentic bare-card back uses the exact same physical rectangle as the
   front. Removing the extra border and sizing the artwork to that rectangle
   eliminates the false second-card seam during the first revolution. */
.chc-protection__bare3d-back {
  overflow: hidden;
  border: 0;
  background: #f2f4f4;
  box-shadow: none;
}

.chc-protection__bare3d-back::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: url("carousel-protection-assets-v4/itachi-kayou-card-back-cleaned-v1.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.chc-protection__bare3d-front {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 0 7px rgba(255, 255, 255, .045);
}

/* The sleeve walls terminate just inside the transparent photograph. This
   removes the tiny synthetic corner that was escaping at the top right. */
.chc-protection__product3d--sleeve .chc-protection__product3d-edge {
  border: 0;
  background: linear-gradient(90deg,
    rgba(247, 252, 254, .27),
    rgba(145, 186, 202, .035) 22% 78%,
    rgba(244, 251, 253, .21));
  box-shadow: none;
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--left,
.chc-protection__product3d--sleeve .chc-protection__product3d-edge--right {
  top: calc(var(--product-object-top) + .65px);
  bottom: calc(var(--product-object-bottom) + .65px);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--top,
.chc-protection__product3d--sleeve .chc-protection__product3d-edge--bottom {
  right: calc(var(--product-object-right) + .55px);
  left: calc(var(--product-object-left) + .55px);
  background: linear-gradient(180deg,
    rgba(247, 252, 254, .27),
    rgba(145, 186, 202, .035) 22% 78%,
    rgba(244, 251, 253, .21));
}

/* Acrylic reflections intensify only as the holder approaches a true side
   view. At three-quarter angles the far rail recedes instead of becoming the
   detached white strip seen in the rejected prototype. */
@media (prefers-reduced-motion: no-preference) {
  .chc-slide.is-active .chc-protection__product3d--case .chc-protection__product3d-edge {
    animation: chc-protection-case-edge-reflection 35s linear infinite;
  }
}

@keyframes chc-protection-case-edge-reflection {
  0%, 57.142%, 60.714%, 67.857%, 71.429%, 75%, 82.143%, 85.714%, 100% { opacity: .42; }
  63.571%, 65%, 77.857%, 79.286% { opacity: .78; }
  64.286%, 78.571% { opacity: 1; }
}

/* Rear-corner alignment v15. The straight side walls stop where each rounded
   face begins, then overlap the face by a fraction of a pixel. This removes
   the raised top-right sliver and the dark seam beneath it while preserving a
   real edge at the exact side-on angle. */
.chc-protection__bare3d-edge {
  border-radius: 999px;
  background: linear-gradient(90deg, #deded8, #f5f4ee 50%, #d8d8d2);
  box-shadow: none;
}

.chc-protection__bare3d-edge--left,
.chc-protection__bare3d-edge--right {
  top: 2.6%;
  bottom: 2.6%;
}

.chc-protection__bare3d-edge--left { left: .45px; }
.chc-protection__bare3d-edge--right { right: .45px; }

.chc-protection__bare3d-edge--top,
.chc-protection__bare3d-edge--bottom {
  right: 3.7%;
  left: 3.7%;
  background: linear-gradient(180deg, #e5e5df, #f7f6f1 50%, #d9d9d3);
}

.chc-protection__bare3d-edge--top { top: .45px; }
.chc-protection__bare3d-edge--bottom { bottom: .45px; }

.chc-protection__product3d--sleeve .chc-protection__product3d-edge {
  border-radius: 999px;
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--left,
.chc-protection__product3d--sleeve .chc-protection__product3d-edge--right {
  top: calc(var(--product-object-top) + 1.9%);
  bottom: calc(var(--product-object-bottom) + 1.9%);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--left {
  left: calc(var(--product-object-left) + .55px);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--right {
  right: calc(var(--product-object-right) + .55px);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--top,
.chc-protection__product3d--sleeve .chc-protection__product3d-edge--bottom {
  right: calc(var(--product-object-right) + 2%);
  left: calc(var(--product-object-left) + 2%);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--top {
  top: calc(var(--product-object-top) + .55px);
}

.chc-protection__product3d--sleeve .chc-protection__product3d-edge--bottom {
  bottom: calc(var(--product-object-bottom) + .55px);
}

/* Bare-card edge cleanup v16. The v15 vertical wall sampled a near-white
   midpoint at one physical pixel, making the attached paper edge look like a
   second pale strip just after 90 and 270 degrees. Preserve the verified
   geometry and depth; only tone that wall to a neutral cardstock edge. */
.chc-protection__bare3d-edge--left,
.chc-protection__bare3d-edge--right {
  background: linear-gradient(90deg, #aeb1ad 0%, #c6c7c1 50%, #9fa3a0 100%);
}

/* The slight X tilt reveals a few pixels of the top and bottom walls near a
   side view. Match those corner wedges to the same cardstock tone so no pale
   remnant can sit beside the corrected vertical wall. */
.chc-protection__bare3d-edge--top,
.chc-protection__bare3d-edge--bottom {
  background: linear-gradient(180deg, #aeb1ad 0%, #c6c7c1 50%, #9fa3a0 100%);
}

/* Connected protection objects — release 1.
   The visible spin is now one watertight WebGL contour per physical state.
   Retired DOM face/edge planes remain in the document only as rollback markup
   and can never appear as a production fallback. */
.chc-protection__connected-canvas,
.chc-protection__connected-fallback {
  position: absolute;
  z-index: 7;
  display: block;
  pointer-events: none;
}

.chc-protection__connected-canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.chc-protection__connected-fallback {
  top: 49%;
  left: 76%;
  width: 336px;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(18px 28px 34px rgba(23, 40, 49, .3));
}

.chc-protection__scene > .chc-protection__card {
  display: none !important;
  animation: none !important;
}

.chc-protection__scene--connected-ready .chc-protection__connected-canvas {
  opacity: 1;
}

.chc-protection__scene--connected-ready .chc-protection__connected-fallback {
  display: none;
}

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-protection__connected-fallback {
    top: 50%;
    width: 292px;
  }
}

@media (max-width: 600px) {
  .chc-protection__connected-fallback {
    top: 62.5%;
    left: 50%;
    width: 210px;
    filter: drop-shadow(10px 23px 22px rgba(23, 40, 49, .31));
  }
}

@media (max-width: 600px) and (max-height: 700px) {
  .chc-protection__connected-fallback {
    top: 52.1%;
    width: 150px;
  }
}

/* Static Pro-Mold presentation — release 1.
   The approved PNG is displayed directly and unfiltered. The retired WebGL
   canvas and rollback planes stay hidden so no rotating state can reappear. */
.chc-story--protection .chc-protection__connected-canvas {
  display: none !important;
}

.chc-story--protection .chc-protection__connected-fallback,
.chc-story--protection .chc-protection__scene--connected-ready .chc-protection__connected-fallback {
  top: 50%;
  left: 76%;
  display: block !important;
  width: clamp(360px, 28vw, 430px);
  height: auto;
  max-width: 42%;
  max-height: none;
  opacity: 1;
  object-fit: contain;
  filter: none;
  transform: translate(-50%, -50%);
}

.chc-story--protection .chc-protection__scene::after {
  top: 88%;
  left: 76%;
  width: 250px;
  opacity: .22;
  animation: none !important;
  transform: translate(-50%, -50%);
}

@media (max-width: 1100px) and (min-width: 601px) {
  .chc-story--protection .chc-protection__connected-fallback,
  .chc-story--protection .chc-protection__scene--connected-ready .chc-protection__connected-fallback {
    left: 75%;
    width: clamp(300px, 31vw, 370px);
    height: auto;
    max-width: 42%;
  }
}

@media (max-width: 600px) {
  .chc-story--protection .chc-protection__connected-fallback,
  .chc-story--protection .chc-protection__scene--connected-ready .chc-protection__connected-fallback {
    top: 63%;
    left: 50%;
    width: 288px;
    height: auto;
    max-width: 76vw;
    max-height: 50%;
  }

  .chc-story--protection .chc-protection__scene::after {
    top: 85%;
    left: 50%;
    width: 210px;
  }
}

@media (max-width: 600px) and (max-height: 700px) {
  .chc-story--protection .chc-protection__connected-fallback,
  .chc-story--protection .chc-protection__scene--connected-ready .chc-protection__connected-fallback {
    top: 59%;
    width: 220px;
    max-width: 66vw;
    max-height: 45%;
  }
}