/* Container steel stays at the edges; the appliances keep the clear central stage. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 76px;
  bottom: 190px;
  width: clamp(48px, 13vw, 210px);
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  background-color: #151713;
  background-image:
    linear-gradient(180deg, #080b0980, transparent 24%, #080b09c9 100%),
    repeating-linear-gradient(90deg,
      #10130f 0 5px,
      #252920 6px 8px,
      #1b1e17 10px 19px,
      #0e110d 22px 27px,
      #20241b 29px 31px,
      #13160f 33px 39px);
}

.hero::before {
  left: 0;
  mask-image: linear-gradient(90deg, #000 0%, #000c 38%, transparent 100%);
}

.hero::after {
  right: 0;
  mask-image: linear-gradient(270deg, #000 0%, #000c 38%, transparent 100%);
}

/* A shallow skew gives the existing campaign strip the edge of a physical tape. */
.campaign-ribbon {
  color: #19160e;
  background-color: #efb936;
  background-image: linear-gradient(180deg, #fff2 0%, transparent 42%, #5f370b0d 100%);
  border-block: 1px solid #8f6624;
  box-shadow: 0 9px 18px #0005;
  outline: 1px solid #68481455;
  outline-offset: -5px;
  transform: skewY(-.35deg);
}

.campaign-ribbon svg {
  color: inherit;
  opacity: .8;
}

@media (max-width: 760px) {
  .hero::before,
  .hero::after {
    top: 84px;
    bottom: 205px;
    width: 42px;
    opacity: .32;
  }

  .campaign-ribbon {
    transform: skewY(-.2deg);
    box-shadow: 0 6px 12px #0004;
  }
}

/* Campaign lettering and tape: stronger identity without adding another layer of content. */
.hero h1 .campaign-sub {
  display: table;
  max-width: calc(100% - 40px);
  margin: 14px auto 0;
  padding: 7px 20px 8px;
  background: var(--gold);
  color: var(--ink);
  font-family: Campaign, Arial, sans-serif;
  font-size: clamp(28px, 3.55vw, 50px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  transform: rotate(-.6deg);
  text-wrap: balance;
}
.campaign-ribbon {
  position: relative;
  isolation: isolate;
  gap: 32px;
  padding-block: 23px;
  font-family: Campaign, Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .015em;
  background-color: var(--gold);
  transform: skewY(-.7deg);
}
.campaign-ribbon::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100px;
  background: linear-gradient(110deg, transparent, #fff7, transparent);
  transform: translateX(-110%);
  pointer-events: none;
  animation: black-tape-glint 10s var(--ease) infinite;
}
@keyframes black-tape-glint {
  0%, 75% { transform: translateX(-110%); opacity: 0; }
  76% { opacity: .7; }
  95%, 100% { transform: translateX(100vw); opacity: 0; }
}

/* The supplied WhatsApp artwork keeps real transparency, with no backing plate. */
.wa-mark,
.header-contact .wa-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: transparent;
  border-radius: 0;
}
.wa-mark .wa-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
}
a.button.gold {
  background: linear-gradient(115deg, #ffd36c, var(--gold) 60%);
  box-shadow: 0 7px 18px #0004;
  min-height: 60px;
  padding: 12px 20px;
  line-height: 1.35;
  white-space: normal;
}
a.button.gold:hover { background: #ffd67b; }
a.button.gold:active { transform: translateY(0); box-shadow: 0 3px 9px #0004; }
#catalog-panel .catalog-offer a.button.gold {
  justify-content: flex-start;
  gap: 9px;
  min-height: 58px;
  padding: 11px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
#catalog-panel .catalog-offer a.button.gold .arrow { display: none; }
a.button.gold > span:not(.wa-mark) { min-width: 0; }
.header-contact .wa-mark { width: 30px; height: 30px; flex-basis: 30px; }
.header-contact .wa-icon { width: 22px; height: 22px; }
html[data-motion="paused"] .campaign-ribbon::after { animation-play-state: paused; }

@media (max-width: 760px) {
  .hero h1 .campaign-sub {
    margin-top: 8px;
    max-width: calc(100% - 32px);
    padding: 6px 12px 7px;
    font-size: clamp(19px, 5.5vw, 30px);
  }
  .campaign-ribbon {
    justify-content: flex-start;
    gap: 24px;
    padding: 18px 20px;
    font-size: 15px;
    transform: skewY(-.5deg);
  }
  .wa-mark { width: 30px; height: 30px; flex-basis: 30px; border-radius: 0; }
  .wa-mark .wa-icon { width: 22px; height: 22px; }
  .header-contact .wa-mark { width: 28px; height: 28px; flex-basis: 28px; }
  .header-contact .wa-icon { width: 20px; height: 20px; }
  .launch-action a.button.gold { width: 100%; min-height: 58px; padding: 12px 14px; }
  #catalog-panel .catalog-offer a.button.gold { padding: 10px; gap: 8px; font-size: 11.5px; }
  .mobile-wa .wa-mark { width: 28px; height: 28px; flex-basis: 28px; }
  .mobile-wa .wa-icon { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-ribbon::after { animation: none; }
  a.button.gold { transition: none; }
}