.modular-arenas {
  --modular-grey: #adadad;
  --modular-rail: #363636;
  background: #000;
  color: #fff;
  overflow: hidden;
  padding: clamp(36px, 4vw, 64px) var(--pad);
}
.modular-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  max-width: 1440px;
  margin-inline: auto;
}
.modular-copy { min-width: 0; align-self: start; }
.modular-kicker {
  margin-bottom: 14px;
  color: var(--modular-grey);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .15em;
}
.modular-copy h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .98;
}
.modular-copy h2 span { color: var(--volt); }
.modular-copy h2 .modular-title-line { display: block; color: inherit; white-space: nowrap; }
.modular-intro, .modular-specs, .modular-contact { font-family: var(--body); font-size: 18px; font-weight: 300; line-height: 1.5; }
.modular-intro { max-width: 42ch; margin-top: 24px; color: #ccc; }
.modular-intro p + p { margin-top: 18px; }
.modular-specs-wrap { margin-top: 24px; }
.modular-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  padding: 0;
  margin: 0;
}
.modular-specs[hidden] { display: none; }
.modular-specs-area { grid-column: 1 / -1; color: var(--volt); font-size: 1.375rem; font-weight: 500; }
.modular-specs-group { min-width: 0; }
.modular-specs-group h3 {
  margin: 0 0 10px;
  color: var(--modular-grey);
  font: 500 .875rem/1.4 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.modular-specs-group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.modular-specs-group li { position: relative; padding-left: 15px; font-size: 1rem; line-height: 1.4; }
.modular-specs-group li::before {
  content: '';
  position: absolute;
  top: .5em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
}
.modular-custom-copy { display: block; max-width: 42ch; color: #ccc; }
.modular-contact { margin-top: 20px; color: #ccc; }
.modular-contact .button { display: flex; width: fit-content; margin-top: 20px; }
.modular-contact .button:focus-visible { outline-color: var(--volt); }
.modular-contact a { color: var(--volt); text-decoration: underline; text-underline-offset: 4px; }
.modular-contact a:hover { color: #fff; }
.modular-contact a:focus-visible { outline-color: var(--volt); }
.modular-visual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.modular-scene {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 14.3;
  isolation: isolate;
}
.modular-render {
  position: absolute;
  inset: 0 -5%;
  opacity: 0;
  background-color: #000;
  background-position: center;
  background-size: 110% auto;
  background-repeat: no-repeat;
  transition: opacity 230ms ease;
  pointer-events: none;
}
.modular-render[data-model="small"] { background-image: url('../assets/arenas/modular-small.webp'); }
.modular-render[data-model="medium"] { background-image: url('../assets/arenas/modular-medium.webp'); }
.modular-render[data-model="large"] { background-image: url('../assets/arenas/modular-large.webp'); }
.modular-render.is-active { opacity: 1; }
.modular-control {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  margin-inline: auto;
  /* Remove the unused black space below the artwork from the control gap. */
  margin-top: -12.85%;
}
.modular-control label {
  display: block;
  margin-bottom: 4px;
  color: var(--modular-grey);
  text-align: center;
  font-size: .875rem;
}
.modular-track { position: relative; height: 46px; display: flex; align-items: center; }
.modular-track::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 21px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--volt) var(--modular-progress, 0%), var(--modular-rail) var(--modular-progress, 0%));
  pointer-events: none;
}
.modular-track::after {
  content: '';
  position: absolute;
  left: calc(50% - 3px);
  top: 20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--modular-grey);
  pointer-events: none;
}
.modular-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 46px;
  margin: 0;
  background: transparent;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  accent-color: var(--volt);
  cursor: ew-resize;
}
.modular-range::-webkit-slider-runnable-track { height: 4px; background: transparent; border: 0; }
.modular-range::-moz-range-track { height: 4px; background: transparent; border: 0; }
.modular-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 28px;
  border-radius: 20px;
  border: 0;
  margin-top: -12px;
  background: linear-gradient(90deg, transparent 39%, #000 39%, #000 43%, transparent 43%, transparent 57%, #000 57%, #000 61%, transparent 61%) center / 20px 10px no-repeat, var(--volt);
}
.modular-range::-moz-range-thumb {
  width: 40px;
  height: 28px;
  border-radius: 20px;
  border: 0;
  background: linear-gradient(90deg, transparent 39%, #000 39%, #000 43%, transparent 43%, transparent 57%, #000 57%, #000 61%, transparent 61%) center / 20px 10px no-repeat, var(--volt);
}
.modular-stops {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--modular-grey);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .03em;
}
.modular-stops [data-selected="true"] { color: var(--volt); }
.modular-range:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 4px; }
@media (min-width: 701px) {
  .modular-control { margin-top: -5%; }
  .modular-visual {
    align-self: start;
    /* Match the kicker line and its gap above the headline. */
    padding-top: calc(.8125rem * 1.55 + 14px);
  }
  .modular-scene {
    /* Match the displayed image height at the existing 121% total width. */
    aspect-ratio: 1600 / 1089;
  }
  .modular-render {
    background-position: center top;
    /* All three 900px-tall images have 37px of black space above the artwork. */
    transform: translateY(-4.111111%);
  }
}
@media (max-width: 700px) {
  .modular-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .modular-copy h2 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .modular-specs-wrap { margin-left: 0; }
  .modular-copy h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modular-render { transition: none; }
}

.modular-render[data-model="custom"]{background-image:url('../assets/arenas/modular-custom-straight-corner.png');inset:0;background-size:contain;transform:none}
.modular-track::after{left:20px;right:20px;width:auto;height:6px;background:radial-gradient(circle at 33.333% center,var(--modular-grey) 0 3px,transparent 3px),radial-gradient(circle at 66.667% center,var(--modular-grey) 0 3px,transparent 3px)}
.modular-stops{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.modular-stops span{text-align:center}
.modular-stops span:first-child{text-align:left}
.modular-stops span:last-child{text-align:right}