.kicker { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .1em; color: var(--red); margin-bottom: 22px; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs li { font-size: 13px; color: rgba(255, 255, 255, .5); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .28); }
.crumbs a { transition: color .3s; }
.crumbs a:hover { color: var(--red); }
.crumbs li[aria-current] { color: rgba(255, 255, 255, .85); }

.px-opener {
  position: relative; overflow: hidden;
  background: var(--zinc-950); color: var(--white);
  padding: 152px 0 34px;
}
.px-opener .zone-glow {
  background: radial-gradient(ellipse 80% 62% at 50% 62%,
    rgba(237, 29, 36, .22), rgba(237, 29, 36, .07) 55%, transparent 80%);
}
.px-opener-inner { position: relative; z-index: 10; }
.px-title {
  margin-top: 28px;
  font-size: clamp(52px, 12vw, 190px); line-height: .8; font-weight: 900;
  letter-spacing: -.05em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px var(--white);
  transition: color .6s;
}
.px-title:hover { color: var(--white); }
.px-title .line { display: block; }
.px-lead {
  margin-top: 30px; max-width: 30ch;
  font-size: clamp(19px, 2vw, 26px); font-weight: 300; line-height: 1.35; color: rgba(255, 255, 255, .82);
}
.px-foot {
  position: relative; z-index: 10; margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center;
}
.px-foot span { position: relative; font-size: 13px; color: rgba(255, 255, 255, .6); padding-left: 18px; }
.px-foot span::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--red);
}

.px-opener .crumbs, .px-title, .px-lead, .px-foot {
  animation: px-rise 1s cubic-bezier(.16, 1, .3, 1) both;
}
.px-title { animation-delay: .08s; }
.px-lead { animation-delay: .18s; }
.px-foot { animation-delay: .28s; }
@keyframes px-rise { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .px-opener .crumbs, .px-title, .px-lead, .px-foot { animation: none; opacity: 1; transform: none; }
}

.px-intro { background: var(--white); padding: var(--sect) 0 0; }
.px-intro-copy { max-width: 72em; }
.px-intro-copy p { font-size: 17px; line-height: 1.68; color: var(--slate-600); }
.px-intro-copy a { color: var(--slate-900); box-shadow: inset 0 -1px 0 var(--red); transition: color .3s; }
.px-intro-copy a:hover { color: var(--red); }

.px-catalogue { background: var(--white); padding: 48px 0 var(--sect); }
.px-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px;
}
.px-fill { display: none; }

.ptile { position: relative; aspect-ratio: 4 / 3.2; background: var(--black); overflow: hidden; display: block; }
.ptile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .85; transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .7s;
}
.ptile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .94), rgba(0, 0, 0, .42) 34%, transparent 58%);
}
.ptile:hover img { transform: scale(1.06); opacity: 1; }
.ptile .p-num {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; color: rgba(255, 255, 255, .75);
}
.ptile .p-arrow {
  position: absolute; top: 16px; right: 16px; z-index: 2; color: var(--white);
  opacity: 0; transform: translate(-6px, 6px); transition: opacity .4s, transform .4s;
}
.ptile:hover .p-arrow { opacity: 1; transform: none; }
.ptile h2 {
  position: absolute; left: 22px; right: 22px; bottom: 46px; z-index: 2;
  font-size: 24px; font-weight: 800; letter-spacing: -.015em; line-height: 1.12;
  color: var(--white); transition: color .3s;
}
.ptile:hover h2 { color: var(--red); }
.ptile .p-data {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; color: rgba(255, 255, 255, .72); transition: color .3s;
}
.ptile:hover .p-data { color: rgba(255, 255, 255, .85); }

@media (max-width: 1023px) {
  .px-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .px-opener { padding-top: 118px; }
  .px-intro { padding-top: 56px; }
  .px-catalogue { padding-top: 56px; }
  .ptile h2 { font-size: 19px; bottom: 42px; }
}
@media (max-width: 559px) {
  .px-grid { grid-template-columns: 1fr; }
}