.clean-hero {
  min-height: 690px;
  background: #fff3eb;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: clamp(42px, 6vw, 96px);
  padding: 78px 7vw 102px;
}

.clean-copy {
  position: relative;
  max-width: 980px;
  padding: clamp(42px, 5vw, 72px);
  background: #c90018;
  color: #fff;
  box-shadow: 24px 24px 0 #272525;
}

.clean-copy::before {
  content: "THE HUNGRY BUTCHER";
  display: inline-block;
  margin-bottom: 24px;
  padding: 9px 14px 8px;
  background: #272525;
  color: #fff3eb;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 5px 5px 0 rgba(89,0,10,.5);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .24em;
}

.clean-copy .kicker { color: #ffdadd; margin-bottom: 18px; }
.clean-copy h1 { color: #fff; font-size: clamp(4.25rem, 7.2vw, 8rem); }
.clean-copy h1 em { color: #fff3eb; }
.clean-copy > p:not(.kicker) { color: #ffe7e9; }
.clean-copy .btn.red { background: #272525; color: #fff; border: 1px solid #272525; box-shadow: 5px 5px 0 rgba(89,0,10,.55); }
.clean-copy .btn.red:hover { background: #181818; border-color: #181818; transform: translateY(-1px); }
.clean-copy .btn.dark-outline { border-color: rgba(255,255,255,.72); color: #fff; }
.clean-copy .btn.dark-outline:hover { background: #fff; color: #b90016; }
.hero-points { border-top-color: rgba(255,255,255,.3); gap: 18px 22px; align-items: flex-start; }
.hero-points .hero-standard { display: inline-flex; align-items: center; gap: 9px; max-width: 150px; color: #fff; }
.hero-points .hero-standard::before { display: none; }
.hero-standard-mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; position: relative; border: 1px solid #272525; border-radius: 50%; background: #272525; color: #fff3eb; box-shadow: 0 0 0 3px rgba(39,37,37,.22); font-style: normal; }
.hero-standard-mark::after { content: ""; position: absolute; right: -2px; bottom: 4px; width: 7px; height: 7px; background: #c90018; border: 2px solid #fff3eb; transform: rotate(45deg); }
.hero-standard-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-standard-mark.hero-halal { font: 700 .76rem "DM Sans", sans-serif; }
.hero-standard-mark.hero-hms { font: 800 .62rem "DM Sans", sans-serif; letter-spacing: .03em; }
.hero-standard-mark.hero-prime { font: 800 .42rem "DM Sans", sans-serif; letter-spacing: .05em; }
.hero-standard b { font-size: .61rem; line-height: 1.35; text-transform: uppercase; letter-spacing: .11em; }
.clean-mark { width: 230px; height: 360px; background: #272525; box-shadow: 20px 20px 0 #c90018; }

@media (max-width: 760px) {
  .menu {
    display: block;
    background: #272525;
    color: #fff;
    padding: 13px 19px;
    border: 1px solid #272525;
    border-radius: 0;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .menu:hover,
  .menu[aria-expanded="true"] {
    background: #c90018;
    border-color: #c90018;
  }

  .clean-hero { padding: 42px 5vw 68px; }
  .clean-copy { padding: 38px 24px 36px; box-shadow: 10px 10px 0 #272525; }
  .clean-copy::before { margin-bottom: 20px; }
  .clean-copy h1 { font-size: clamp(3.25rem, 14.5vw, 5rem); }
  .hero-points { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
  .hero-points .hero-standard { max-width: none; }
  .hero-standard-mark { width: 38px; height: 38px; flex-basis: 38px; }
}

@media (max-width: 380px) {
  .clean-copy h1 { font-size: 3rem; }
}