/* ==========================================================================
   wildposters.css
   Scoped styles for the Wildposters format page.
   Everything is namespaced under .wildposters-page so it can never leak into
   or be overridden by styles.css, regardless of <link> order. --paper and
   --surface are redefined dark here so inline `background: var(--paper)` /
   `var(--surface)` copied from reference markup resolves dark via inheritance.
   ========================================================================== */

.wildposters-page {
  --red: #e60012;
  --ink: #08070a;
  --paper: #08070a;
  --surface: #100f13;
  background: var(--ink) !important;
  color: #fff !important;
}

/* Full, uncropped frame — height follows the video's natural aspect ratio at 100% width */
.wp-hero-video {
  height: auto;
}

.wildposters-page .wp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 46%);
  gap: 48px;
  align-items: center;
}

.wildposters-page .wp-hero-img {
  width: 100%;
  aspect-ratio: 1920 / 1000;
  object-fit: cover;
  display: block;
}

@media (max-width: 780px) {
  .wildposters-page .wp-hero-grid { grid-template-columns: 1fr; }
  .wildposters-page .wp-hero-img { margin-top: 32px; }
}

/* ============ FINAL CTA (photo bg + overlaid form, matching Arrival) ============ */
.wildposters-page .footer { margin-top: 0; }
.wildposters-page .final-cta { padding: 56px 16px; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; background-color: #08070a; background-size: cover; background-position: center; }
.wildposters-page .final-cta-grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) min(520px, 42%); gap: 64px; align-items: start; text-align: left; }
.wildposters-page .final-cta .fc-head { font-size: clamp(38px, 6.2vw, 92px); line-height: 1.0; color: #fff; }
.wildposters-page .final-cta .fc-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; margin-top: 28px; color: #fff; opacity: 0.85; }
.wildposters-page .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(255,255,255,0.55); border-bottom: none; }
.wildposters-page .f-input { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.55); color: #fff; padding: 20px 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; width: 100%; transition: background 0.25s; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.wildposters-page .f-input.f-col-left { border-right: 1px solid rgba(255,255,255,0.55); }
.wildposters-page .f-input:focus { outline: none; background: #0d0c10; }
.wildposters-page .f-input::placeholder { color: #fff; opacity: 0.9; }
.wildposters-page .f-input.full { grid-column: 1 / -1; }
.wildposters-page textarea.f-input { min-height: 140px; resize: vertical; }
.wildposters-page .form-send { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.wildposters-page .form-send .ff-note { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding-left: 18px; flex: 1; min-width: 0; color: #fff; }
.wildposters-page .form-send .btn-red { padding: 14px 24px; flex-shrink: 0; }
.wildposters-page .form-send .btn-red:hover { transform: none; }

@media (max-width: 900px) {
  .wildposters-page .final-cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .wildposters-page .form-grid { grid-template-columns: 1fr; }
  .wildposters-page .f-input.f-col-left { border-right: none; }
  .wildposters-page .form-send { flex-direction: column; align-items: stretch; gap: 0; }
  .wildposters-page .form-send .ff-note { padding: 14px 18px; }
}

/* ---- hover motion: image zoom, matching site convention ---- */
.wildposters-page .img-placeholder {
  position: relative;
}
.wildposters-page .img-placeholder img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.35s ease;
}
.wildposters-page .img-placeholder:hover img {
  transform: scale(1.06);
}

/* ---- brands on the best walls: hover logo reveal ---- */
.wildposters-page .bw-logo-reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,7,10,0.78);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.wildposters-page .bw-logo-reveal img {
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 38%;
  object-fit: contain;
  transform: none !important;
}
.wildposters-page .img-placeholder:hover .bw-logo-reveal {
  opacity: 1;
}
.wildposters-page .card-light {
  transition: transform 0.3s, border-color 0.3s;
}
.wildposters-page .card-light:hover {
  transform: translateY(-4px);
  border-color: var(--red);
}

/* ---- flight cards (four weeks / the long game): hover-to-red ---- */
.wildposters-page .flight-card {
  padding: 40px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.3s, border-color 0.3s;
}
.wildposters-page .flight-standard {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.wildposters-page .flight-standard:hover {
  background: var(--red);
  border-color: var(--red);
}
.wildposters-page .flight-label {
  color: var(--red);
  transition: color 0.3s;
}
.wildposters-page .flight-standard:hover .flight-label {
  color: #fff;
}
.wildposters-page .flight-period {
  color: var(--red);
  transition: color 0.3s;
}
.wildposters-page .flight-standard:hover .flight-period {
  color: #000;
}

/* ============ WHY BRANDS KEEP COMING BACK (accordion) — self-contained, provided ============ */
.comeback-section { --cb-red: #e60012; font-family: 'Inter', system-ui, sans-serif; }
.comeback-section .cb-container { max-width: 1400px; margin: 0 auto; }
.comeback-section .cb-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cb-red); font-weight: 700; display: inline-block; }
.comeback-section .cb-headline { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; font-weight: 400; font-size: clamp(32px, 6vw, 96px); margin-top: 16px; color: #000; }
.comeback-section .cb-headline .cb-period { display: none; }
.comeback-section .cb-copy { font-size: 16px; line-height: 1.65; max-width: 720px; margin-top: 24px; }

.comeback-section .cb-list { margin-top: 56px; border-top: 1px solid rgba(0,0,0,0.15); }
.comeback-section .cb-row { border-bottom: 1px solid rgba(0,0,0,0.15); }

.comeback-section .cb-row-head { width: 100%; background: none; border: none; color: #000; cursor: pointer; display: flex; align-items: baseline; gap: 20px; padding: 26px 0 4px; text-align: left; font-family: inherit; }
.comeback-section .cb-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.07em; font-weight: 700; color: var(--cb-red); flex-shrink: 0; min-width: 64px; }
.comeback-section .cb-title { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; font-size: clamp(22px, 3.2vw, 44px); letter-spacing: -0.01em; line-height: 1; transition: color 0.2s; }
.comeback-section .cb-row-head:hover .cb-title { color: var(--cb-red); }
.comeback-section .cb-toggle { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 500; flex-shrink: 0; transition: transform 0.25s ease; line-height: 1; }
.comeback-section .cb-row.open .cb-toggle { transform: rotate(45deg); color: var(--cb-red); }

.comeback-section .cb-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.comeback-section .cb-body-inner { padding: 0 0 32px 84px; max-width: 760px; }
.comeback-section .cb-kicker { font-size: 17px; font-weight: 600; color: #000; margin-bottom: 8px; }
.comeback-section .cb-copy-body { font-size: 14px; line-height: 1.65; color: #000; }

@media (max-width: 640px) {
  .comeback-section .cb-row-head { gap: 14px; padding: 20px 0; }
  .comeback-section .cb-num { min-width: 44px; }
  .comeback-section .cb-body-inner { padding-left: 0; }
}

/* ============ DEDICATED SPACES — THE WALL INDEX — self-contained, provided ============ */
.ded-spaces { --ds-red: #e60012; font-family: 'Inter', system-ui, sans-serif; }
.ded-spaces .ds-container { max-width: 1400px; margin: 0 auto; position: relative; }
.ded-spaces .ds-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ds-red); font-weight: 700; }
.ded-spaces .ds-headline { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; font-weight: 400; font-size: clamp(36px, 6.5vw, 104px); margin-top: 16px; }
.ded-spaces .ds-headline .ds-period { display: none; }
.ded-spaces .ds-copy { font-size: 16px; line-height: 1.65; max-width: 720px; margin-top: 28px; }
.ded-spaces .ds-copy strong { color: #000; opacity: 1; }

.ded-spaces .ds-stamp { position: absolute; top: 0; right: 0; font-family: 'Anton', Impact, sans-serif; font-size: clamp(48px, 6vw, 110px); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--ds-red); transform: rotate(-8deg); opacity: 0.9; pointer-events: none; line-height: 1; }

.ded-spaces .ds-index { margin-top: 64px; border-top: 1px solid rgba(0,0,0,0.15); }

.wildposters-page .fc-slider { position: relative; }
.wildposters-page .fc-slide { display: none; }
.wildposters-page .fc-slide.active { display: block; animation: wp-fc-fade 0.5s ease; }
@keyframes wp-fc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wildposters-page .fc-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.wildposters-page .fc-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s, border-color 0.25s; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; }
.wildposters-page .fc-arrow:hover { background: var(--red); border-color: var(--red); }
.wildposters-page #fcPrev { left: 24px; }
.wildposters-page #fcNext { right: 24px; }
.wildposters-page .fc-dots { display: flex; align-items: center; gap: 10px; }
.wildposters-page .fc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: background 0.25s, transform 0.25s; }
.wildposters-page .fc-dot.on { background: var(--red); transform: scale(1.3); }

@media (max-width: 900px) {
  .wildposters-page .fc-arrow { position: static; transform: none; }
}
.ded-spaces .ds-row { display: grid; grid-template-columns: 80px 1fr 160px; gap: 16px; align-items: center; padding: 26px 8px; border-bottom: 1px solid rgba(0,0,0,0.15); cursor: pointer; position: relative; transition: padding-left 0.4s cubic-bezier(0.25,1,0.3,1); }
.ded-spaces .ds-row:hover { padding-left: 24px; }

.ded-spaces .ds-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.07em; transition: color 0.3s; }
.ded-spaces .ds-name { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; font-size: clamp(18px, 2.6vw, 40px); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; transition: color 0.3s; }
.ded-spaces .ds-district { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; text-align: right; }

.ded-spaces .ds-row:hover .ds-name { color: var(--ds-red); }
.ded-spaces .ds-row:hover .ds-id { color: var(--ds-red); }

.ded-spaces .ds-row::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0); width: 12px; height: 3px; background: var(--ds-red); transition: transform 0.35s cubic-bezier(0.25,1,0.3,1); transform-origin: left; }
.ded-spaces .ds-row:hover::before { transform: translateY(-50%) scaleX(1); }

/* real wall photos matched to each location by name */
.ded-spaces .ds-scene-1 { background-image: url('../images/wildposter/section pictures/melrose st.jpg'); background-size: cover; background-position: center; }
.ded-spaces .ds-scene-2 { background-image: url('../images/wildposter/section pictures/W 3rd St & Alta Vista.jpeg'); background-size: cover; background-position: center; }
.ded-spaces .ds-scene-3 { background-image: url('../images/wildposter/section pictures/soho.png'); background-size: cover; background-position: center; }
.ded-spaces .ds-scene-4 { background-image: url('../images/wildposter/section pictures/Mott Street, New York, NY.jpg'); background-size: cover; background-position: center; }
.ded-spaces .ds-scene-5 { background-image: url('../images/wildposter/section pictures/South Congress.jpeg'); background-size: cover; background-position: center; }
.ded-spaces .ds-scene-6 { background-image: url('../images/wildposter/section pictures/6th Ave & 44th St.jpg'); background-size: cover; background-position: center; }

.ded-spaces .ds-grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.4; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E"); }

.ded-spaces .ds-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; flex-wrap: wrap; gap: 12px; }

.ded-spaces .ds-inline { display: block; height: 0; overflow: hidden; grid-column: 3 / -1; justify-self: end; width: 0%; transition: width 0.45s cubic-bezier(0.25,1,0.3,1), height 0.45s cubic-bezier(0.25,1,0.3,1); position: relative; }
.ded-spaces .ds-row.open .ds-inline { grid-column: 1 / -1; width: 45%; height: 320px; margin-top: 16px; }
.ded-spaces .ds-inline-img { width: 100%; height: 100%; position: relative; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.15); border-top: 3px solid var(--ds-red); }
.ded-spaces .ds-inline-label { position: absolute; bottom: 12px; left: 12px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,0.7); white-space: nowrap; }

@media (max-width: 820px) {
  .ded-spaces .ds-stamp { position: static; transform: rotate(-4deg); margin-top: 24px; display: inline-block; }
  .ded-spaces .ds-row { grid-template-columns: 56px 1fr 100px; }
  .ded-spaces .ds-inline { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
  .ded-spaces .ds-row.open .ds-inline { width: 100%; height: 340px; }
}

/* ============ BUILT FOR MOMENTUM — marquee strip — self-contained, provided ============ */
.momentum { --m-red: #e60012; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; }
.momentum .m-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.momentum .m-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--m-red); font-weight: 700; }
.momentum .m-headline { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; font-weight: 400; font-size: clamp(36px, 6.5vw, 104px); margin-top: 16px; }
.momentum .m-headline .m-period { color: var(--m-red); }
.momentum .m-copy { font-size: 16px; line-height: 1.65; max-width: 720px; margin-top: 28px; }

.momentum .m-marquee { margin-top: 0; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); overflow: hidden; white-space: nowrap; position: relative; }
.momentum .m-track { display: inline-flex; align-items: baseline; padding: 28px 0; animation: m-scroll 22s linear infinite; will-change: transform; }
.momentum .m-marquee:hover .m-track { animation-play-state: paused; }

.momentum .m-phrase { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9; font-size: clamp(64px, 9vw, 150px); color: var(--m-red); padding-right: 0.45em; }
.momentum .m-phrase .m-white { color: #fff; }
.momentum .m-sep { font-family: 'JetBrains Mono', monospace; font-size: clamp(20px, 2.5vw, 36px); color: #fff; padding-right: 0.9em; transform: translateY(-0.4em); display: inline-block; }

@keyframes m-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.momentum .m-marquee::before, .momentum .m-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.momentum .m-marquee::before { left: 0; background: linear-gradient(90deg, #08070a, transparent); }
.momentum .m-marquee::after { right: 0; background: linear-gradient(270deg, #08070a, transparent); }

.momentum .m-foot { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 20px; }

@media (max-width: 640px) {
  .momentum { padding: 64px 0; }
  .momentum .m-marquee { margin-top: 0; }
  .momentum .m-track { padding: 18px 0; }
}