.street-gallery {
  position: relative;
  background:
    radial-gradient(circle at 18% 0%, rgba(232,79,27,.16), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(232,79,27,.10), transparent 40%),
    linear-gradient(180deg, #111111, #0b0b0b);
  color: #fff;
  padding: 120px 0 110px;
  overflow: hidden;
}

.sg-bgword {
  position: absolute;
  top: 6%;
  right: -6%;
  font-size: clamp(5rem, 15vw, 15rem);
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(255,255,255,.03);
  transform: rotate(-4deg);
  pointer-events: none;
  user-select: none;
}

.sg-head {
  max-width: 1100px;
  margin: 0 auto 30px;
  padding: 0 24px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.sg-kicker {
  display: inline-block;
  background: #e84f1b;
  color: #111;
  padding: 6px 12px;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .8rem;
  margin-bottom: 16px;
}

.sg-head h2 {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 16px;
}

.sg-head h2 span { color: #e84f1b; }

.sg-lead {
  max-width: 560px;
  margin: 0 auto;
  opacity: .85;
  line-height: 1.65;
}

.sg-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sg-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 44px 0;
  animation: sgScroll 48s linear infinite;
  will-change: transform;
}

.sg-marquee:hover .sg-track { animation-play-state: paused; }

@keyframes sgScroll {
  to { transform: translateX(-50%); }
}

.sg-card {
  flex: 0 0 auto;
  width: 300px;
  margin: 0;
  border: 8px solid #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}

.sg-card img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.sg-card:nth-child(odd)  { transform: rotate(-2.4deg); }
.sg-card:nth-child(even) { transform: rotate(2deg); }
.sg-card:nth-child(3n)   { transform: rotate(1deg); }

.sg-card:hover {
  transform: rotate(0deg) scale(1.06);
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 4px #e84f1b;
  z-index: 3;
}

.sg-cta {
  text-align: center;
  margin-top: 34px;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .sg-track { animation: none; }
  .sg-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (max-width: 700px) {
  .street-gallery { padding: 90px 0 80px; }
  .sg-card { width: 220px; border-width: 6px; }
  .sg-card img { height: 300px; }
  .sg-track { gap: 18px; padding: 32px 0; }
}


.street-gallery::before,
.street-gallery::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background: repeating-linear-gradient(
    45deg,
    #e84f1b 0 26px,
    #0b0b0b 26px 52px
  );
  z-index: 3;
}

.street-gallery::before { top: 0; }
.street-gallery::after  { bottom: 0; }