@charset "utf-8";

main > .process-section { background: rgb(25, 20, 23); color: rgb(255, 255, 255); overflow: clip; }

.process-section .wrap { position: relative; }

.process-cinema { position: relative; }

.cinema-panel { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; min-height: 390px; }

.cinema-copy h2 { font-family: Eesti, sans-serif; font-size: clamp(40px, 4.2vw, 62px); line-height: 1.08; letter-spacing: -0.025em; color: rgb(255, 255, 255); font-weight: 500; }

.cinema-copy p { font-size: 22px; color: rgb(199, 182, 192); line-height: 1.45; max-width: 470px; margin-top: 24px; }

.cinema-art { position: relative; height: 390px; display: grid; place-items: center; perspective: 1100px; }

.cinema-art img { width: 100%; height: 100%; object-fit: contain; }

.chaos-tag { position: absolute; padding: 12px 18px; background: rgb(53, 34, 45); border: 1px solid rgb(117, 67, 89); border-radius: 10px; font-size: 18px; color: rgb(255, 197, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 25px; white-space: nowrap; }

.tag-one { top: 20%; left: -9%; transform: rotate(-10deg); }

.tag-two { top: 55%; right: -3%; transform: rotate(9deg); }

.tag-three { bottom: 8%; left: -6%; transform: rotate(-5deg); }

.process-section .tracker-caption h3 { color: white; }

.process-section .tracker-caption p { color: rgb(199, 182, 192); }

.process-section .gift-strip { background: rgb(53, 33, 44); }

.process-section .gift-strip h3 { color: rgb(255, 255, 255); }

.process-section .gift-strip .gift-label { color: rgb(223, 184, 202); }

.process-section .tracker-inset { border-top: 1px solid rgb(87, 55, 71); padding-top: 40px; margin-top: 45px; scroll-margin-top: 115px; }

@media (max-width: 1000px) {
  .cinema-copy h2 { font-size: 45px; }
  .cinema-copy p { font-size: 20px; }
  .cinema-panel { gap: 25px; }
  .chaos-tag { font-size: 18px; padding: 10px 13px; }
  .tag-one { left: 0px; }
  .tag-three { left: 0px; }
}

@media (max-width: 760px) {
  .cinema-panel { grid-template-columns: 1fr; gap: 20px; min-height: 0px; padding: 36px 0px; }
  .cinema-copy h2 { font-size: 37px; }
  .cinema-copy p { font-size: 18px; margin-top: 18px; }
  .cinema-art { height: 290px; max-width: 360px; width: 100%; margin: auto; }
  .chaos-tag { font-size: 18px; padding: 9px 12px; }
  .tag-one { left: 0px; top: 10%; }
  .tag-two { right: 0px; }
  .tag-three { left: 0px; bottom: 4%; }
  .cinema-skip { font-size: 18px; top: -15px; }
  .cinema-on { min-height: 0px; height: 650px; }
  .cinema-on .cinema-panel { padding: 25px 0px; align-content: start; }
  .cinema-on .cinema-copy h2 { font-size: 37px; }
  .cinema-on .cinema-art { height: 290px; }
  .cinema-on .cinema-scroll { font-size: 18px; bottom: 12px; }
  .method-rules { margin-top: 17px; gap: 8px; }
  .method-rules span { font-size: 18px; padding: 7px 11px; }
  .process-section .tracker-inset { margin-top: 25px; padding-top: 30px; }
  .process-section { overflow: clip; }
  .cinema-copy p { max-width: 100%; }
}

@media (max-width: 360px) {
  .cinema-copy h2, .cinema-on .cinema-copy h2 { font-size: 33px; }
  .cinema-copy p { font-size: 18px; }
  .cinema-on { height: 650px; }
  .cinema-art, .cinema-on .cinema-art { height: 275px; }
  .chaos-tag { font-size: 18px; }
  .cinema-on .cinema-scroll { font-size: 18px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-art { height: 240px; }
  .cinema-panel { min-height: 0px; padding: 35px 0px; border-bottom: 1px solid rgb(80, 51, 63); }
  .cinema-panel:last-of-type { border-bottom: 0px; }
  .cinema-skip { display: none; }
  .chaos-tag { transform: none; }
}

.process-cinema .cinema-panel { position: relative; min-height: 390px; }

.process-section .gift-strip { margin-top: 35px; }

@media (max-width: 760px) {
  .process-cinema .cinema-panel { min-height: 0px; padding-top: 0px; }
}