/* MaiTincMerch! — premium dark cinematic landing */

:root {
  --bg: #0a0a0a;
  --bg-soft: #121212;
  --graphite: #1a1a1a;
  --line: rgba(239, 234, 226, 0.1);
  --line-strong: rgba(239, 234, 226, 0.22);
  --fg: #efeae2;
  --fg-dim: rgba(239, 234, 226, 0.62);
  --fg-faint: rgba(239, 234, 226, 0.38);
  --gold: #c9a36a;
  --gold-soft: rgba(201, 163, 106, 0.16);
  --gold-glow: rgba(201, 163, 106, 0.3);

  --display: "Archivo Black", "Anton", Impact, sans-serif;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--gold);
  color: #0a0a0a;
}

/* film grain noise overlay */
.noise,
.vignette {
  pointer-events: none;
}

/* custom cursor */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  border-radius: 0 !important;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition:
    width 220ms ease,
    height 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
  mix-blend-mode: difference;
}
.cursor.hover {
  width: 56px;
  height: 56px;
  background: var(--gold);
  border-color: var(--gold);
}
.cursor-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  background: var(--fg);
  border-radius: 0 !important;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
}
@media (pointer: coarse) {
  .cursor,
  .cursor-dot {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body {
    cursor: auto;
  }
}
@media (hover: hover) {
  body {
    cursor: none;
  }
  a,
  button,
  input,
  textarea {
    cursor: none;
  }
}

/* === NAV === */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 22px;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: calc(100% - 28px);
  max-width: 1240px;
  border-radius: 0 !important;
  background: rgba(18, 18, 18, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(239, 234, 226, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.35);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 !important;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 40%
  );
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  color: var(--fg);
  text-transform: none;
  text-decoration: none;
}
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(201, 163, 106, 0.25));
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}
.nav-logo:hover .nav-logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 18px rgba(201, 163, 106, 0.45));
}
.nav {
  mix-blend-mode: normal;
}
.nav-links {
  display: flex;
  gap: 32px;
}
.nav-link {
  color: var(--fg);
  text-decoration: none;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    color 0.2s;
}
.nav-link:hover {
  opacity: 1;
  color: var(--gold);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0 !important;
  transition: all 0.2s;
}
.nav-cta:hover {
  background: var(--gold);
  color: #0a0a0a;
  border-color: var(--gold);
}

/* === GENERIC === */
.section {
  position: relative;
  padding: 140px 36px;
  max-width: 1640px;
  margin: 0 auto;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.section-tag::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.section-title {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: balance;
  width: 100%;
}
.section-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 640px;
}

/* placeholder image style */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(239, 234, 226, 0.04) 0 2px,
      transparent 2px 12px
    ),
    linear-gradient(135deg, #181818, #0e0e0e);
  border: 1px solid var(--line);
  overflow: hidden;
}
.placeholder::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.placeholder::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 0 !important;
  box-shadow: 0 0 12px var(--gold-glow);
}

/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 0 36px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg .placeholder {
  width: 100%;
  height: 100%;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 20% 80%,
      rgba(201, 163, 106, 0.18) 0%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.4) 0%,
      rgba(10, 10, 10, 0.85) 70%,
      #0a0a0a 100%
    );
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-bottom: 60px;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.hero-meta-l,
.hero-meta-r {
  display: flex;
  gap: 32px;
}
.hero-meta b {
  color: var(--fg);
  font-weight: 500;
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(64px, 11.5vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: uppercase;
}
.hero-title em {
  font-style: italic;
  font-family: "Boldonse", "Archivo Black", serif;
  color: var(--gold);
  font-weight: 400;
}
.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.hero-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroRise 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes heroRise {
  to {
    transform: translateY(0);
  }
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-top: 50px;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.45;
  color: var(--fg-dim);
  max-width: 460px;
}
.hero-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--gold);
  color: #0a0a0a;
  padding: 20px 28px 20px 32px;
  border: none;
  border-radius: 0 !important;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  box-shadow:
    0 0 0 1px rgba(201, 163, 106, 0.4),
    0 20px 60px -20px rgba(201, 163, 106, 0.6);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(201, 163, 106, 0.6),
    0 30px 80px -20px rgba(201, 163, 106, 0.8);
}
.btn-primary svg {
  transition: transform 0.25s;
}
.btn-primary:hover svg {
  transform: translateX(4px);
}

/* scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 36px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.scroll-cue::before {
  content: "";
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  animation: cueLine 2s ease-in-out infinite;
}
@keyframes cueLine {
  0%,
  100% {
    transform: scaleX(0.5);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
  }
}

/* ticker */
.ticker {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
  background: #0a0a0a;
  z-index: 1;
}
.ticker-track {
  display: flex;
  gap: 60px;
  animation: tickerScroll 42s linear infinite;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 44px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  z-index: 1;
}
.ticker-track > span {
  display: inline-flex;
  align-items: center;
  gap: 60px;
}
.ticker-track .star {
  color: var(--gold);
  font-size: 24px;
  display: inline-block;
  transform: translateY(-4px);
}
@keyframes tickerScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* === SECTION: SOLUCIÓN 360 === */
.solution {
  position: relative;
}
.solution-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 16px;
}
.svc {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    border-color 0.3s,
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    var(--gold-soft),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.svc:hover::before {
  opacity: 1;
}
.svc-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
  position: relative;
}
.svc-title {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  position: relative;
}
.svc-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-dim);
  position: relative;
  margin: 12px 0 0;
}
.svc-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svc.has-media .svc-content {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 10, 10, 0.85) 70%
  );
  margin: -28px;
  padding: 28px;
  height: calc(100% + 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* === ARTISTS === */
.artists {
  position: relative;
  padding: 160px 0 160px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.artists-inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 36px;
  position: relative;
}
.artists-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
  gap: 40px;
}
.artists-counter {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.artists-list {
  position: relative;
  z-index: 2;
}
.artist-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 26px 12px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: padding 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  text-decoration: none;
  color: inherit;
}
.artist-row:last-child {
  border-bottom: 1px solid var(--line);
}
.artist-row:hover {
  padding-left: 36px;
}
.artist-idx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
}
.artist-name {
  font-family: var(--display);
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
  transition:
    color 0.35s,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    -webkit-text-stroke-color 0.35s;
  position: relative;
  transform-origin: left center;
}
.artist-row:hover .artist-name {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
}
.artist-genre {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.artist-arrow {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--fg-faint);
  transition:
    color 0.25s,
    transform 0.25s;
}
.artist-row:hover .artist-arrow {
  color: var(--gold);
  transform: translateX(8px);
}

.artist-preview {
  position: fixed;
  top: var(--cy, 50%);
  left: var(--cx, 50%);
  width: 380px;
  height: 480px;
  margin-left: 40px;
  margin-top: -240px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition:
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.5s;
  filter: blur(20px);
}
.artist-preview.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}
.artist-preview .placeholder {
  width: 100%;
  height: 100%;
}
.artist-preview-label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  z-index: 2;
}

/* === PRODUCTION === */
.production {
  position: relative;
}
.production-banner {
  font-family: var(--display);
  font-size: clamp(48px, 9vw, 160px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 80px;
}
.production-banner .line {
  display: block;
  overflow: hidden;
}
.production-banner em {
  font-style: italic;
  color: var(--gold);
  font-family: "Boldonse", serif;
  font-weight: 400;
}
.production-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.production-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.prod-card {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 28px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.prod-card.media {
  min-height: 420px;
  padding: 0;
}
.prod-card.media .placeholder {
  width: 100%;
  height: 100%;
}

.metric-num {
  font-family: var(--display);
  font-size: clamp(60px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.metric-num sup {
  font-size: 0.3em;
  vertical-align: top;
  color: var(--gold);
  margin-left: 6px;
  font-family: var(--mono);
  font-weight: normal;
  letter-spacing: 0;
}
.prod-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 5px 10px;
  border: 1px solid var(--gold);
  border-radius: 0 !important;
  align-self: flex-start;
}
.prod-ref {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 18px 0 6px;
}
.metric-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 14px;
  max-width: 280px;
  line-height: 1.5;
}

/* === FESTIVALS === */
.festivals {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
}
.festivals-head {
  padding: 0 36px;
  margin-bottom: 60px;
  max-width: 1640px;
  margin-left: auto;
  margin-right: auto;
}
.festivals-track {
  display: flex;
  gap: 24px;
  padding: 0 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.festivals-track::-webkit-scrollbar {
  display: none;
}
.fest-card {
  position: relative;
  flex: 0 0 480px;
  height: 620px;
  scroll-snap-align: start;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.fest-card .placeholder {
  width: 100%;
  height: 100%;
}
.fest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
}
.fest-meta {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fest-name {
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.fest-info {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.fest-tag {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 5px 10px;
  border: 1px solid var(--gold);
  border-radius: 0 !important;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(8px);
}
.festivals-nav {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  padding: 0 36px;
  max-width: 1640px;
  margin-left: auto;
  margin-right: auto;
}
.fest-arrow {
  width: 56px;
  height: 56px;
  border-radius: 0 !important;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  font-size: 16px;
  font-family: var(--mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.fest-arrow:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
}

/* === PROCESS === */
.process {
  position: relative;
}
.process-list {
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1.2fr 2fr auto;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  transition: background 0.3s;
}
.process-step:last-child {
  border-bottom: 1px solid var(--line);
}
.process-step:hover {
  background: rgba(201, 163, 106, 0.03);
}
.process-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.16em;
}
.process-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.process-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-dim);
}
.process-icon {
  width: 56px;
  height: 56px;
  border-radius: 0 !important;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 14px;
  transition: all 0.3s;
}
.process-step:hover .process-icon {
  background: var(--gold);
  color: #0a0a0a;
  border-color: var(--gold);
  box-shadow: 0 0 30px var(--gold-glow);
}

/* === CONTACT === */
.contact {
  position: relative;
  padding: 160px 36px;
  max-width: 1640px;
  margin: 0 auto;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.contact-centered {
  max-width: 900px;
}
.contact-intro {
  text-align: center;
  margin-bottom: 60px;
}
.contact-centered .contact-headline {
  text-align: center;
}
.contact-centered .form-box {
  max-width: 780px;
  margin: 0 auto;
}
.contact-headline {
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.contact-headline em {
  font-style: italic;
  color: var(--gold);
  font-family: "Boldonse", serif;
  font-weight: 400;
}
.contact-info {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-info-row {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-info-row span:first-child {
  color: var(--fg-faint);
}
.contact-info-row span:last-child {
  color: var(--fg);
}

/* === BOXED CONTACT FORM === */
.form-box {
  position: relative;
  background: linear-gradient(180deg, #141414 0%, #0d0d0d 100%);
  border: 1px solid var(--line-strong);
  border-radius: 0 !important;
  padding: 40px;
  box-shadow:
    0 0 0 1px rgba(201, 163, 106, 0.1) inset,
    0 40px 80px -40px rgba(0, 0, 0, 0.8),
    0 0 80px -40px var(--gold-glow);
}
.form-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 0 !important;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(201, 163, 106, 0.3) 0%,
    transparent 50%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.form-box-head {
  margin-bottom: 30px;
}
.form-box-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 5px 10px;
  border: 1px solid var(--gold);
  border-radius: 0 !important;
  margin-bottom: 16px;
}
.form-box-title {
  font-family: var(--display);
  font-size: 32px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
  line-height: 1;
}
.form-box-sub {
  font-size: 14px;
  color: var(--fg-dim);
  margin: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}
.ff {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ff-full {
  grid-column: 1 / -1;
}
.ff-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.ff-req {
  color: var(--gold);
  margin-left: 4px;
}
.ff-input {
  width: 100%;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid var(--line);
  border-radius: 0 !important;
  padding: 14px 16px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.ff-input::placeholder {
  color: var(--fg-faint);
}
.ff-input:hover {
  border-color: rgba(239, 234, 226, 0.2);
}
.ff-input:focus {
  border-color: var(--gold);
  background: rgba(10, 10, 10, 0.9);
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.1);
}
.ff-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--sans);
}
.ff-input select {
  background: var(--bg);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 28px 0 16px;
  transition: border-color 0.3s;
}
.field:focus-within {
  border-color: var(--gold);
}
.field label {
  position: absolute;
  top: 28px;
  left: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.field.filled label,
.field:focus-within label {
  top: 6px;
  font-size: 9px;
  color: var(--gold);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 18px;
  padding: 0;
  margin-top: 4px;
}
.field textarea {
  resize: none;
  min-height: 80px;
}
.field select option {
  background: var(--bg);
  color: var(--fg);
}

.form-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
.form-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.form-status.ok {
  color: var(--gold);
}
.form-status.err {
  color: #e87d5c;
}
.form-cta {
  gap: 20px;
  flex-wrap: wrap;
}

/* === FOOTER === */
.footer {
  position: relative;
  padding: 80px 36px 40px;
  border-top: 1px solid var(--line);
}
.footer-mega {
  font-family: var(--display);
  font-size: clamp(120px, 22vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 60px;
  background: linear-gradient(
    180deg,
    var(--fg) 0%,
    rgba(239, 234, 226, 0.15) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  max-width: 1640px;
  margin-left: auto;
  margin-right: auto;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 8px;
}
.footer-col a {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--fg);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--gold);
}
.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-social {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  color: var(--fg) !important;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 0 !important;
  width: max-content;
  transition:
    border-color 0.25s,
    color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.footer-social svg {
  color: var(--fg-dim);
  transition: color 0.25s;
}
.footer-social:hover {
  border-color: var(--gold);
  color: var(--gold) !important;
  background: var(--gold-soft);
  transform: translateY(-2px);
}
.footer-social:hover svg {
  color: var(--gold);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.footer-bottom a {
  color: var(--fg-dim);
  text-decoration: none;
  margin-left: 24px;
}
.footer-bottom a:hover {
  color: var(--gold);
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 {
  transition-delay: 0.1s;
}
.reveal.d2 {
  transition-delay: 0.2s;
}
.reveal.d3 {
  transition-delay: 0.3s;
}
.reveal.d4 {
  transition-delay: 0.4s;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .nav {
    padding: 18px 20px;
  }
  .nav-links {
    display: none;
  }
  .section {
    padding: 100px 20px;
  }
  .hero {
    padding: 0 20px 60px;
  }
  .hero-meta {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .hero-bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-cta-wrap {
    align-items: flex-start;
  }
  .solution-head,
  .solution-grid {
    grid-template-columns: 1fr;
  }
  .solution-grid > * {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
  .production-grid,
  .production-bottom {
    grid-template-columns: 1fr;
  }
  .artist-row {
    grid-template-columns: 30px 1fr auto;
    gap: 16px;
  }
  .artist-genre {
    display: none;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .process-step {
    grid-template-columns: 50px 1fr;
    gap: 16px;
  }
  .process-desc,
  .process-icon {
    display: none;
  }
  .fest-card {
    flex: 0 0 320px;
    height: 460px;
  }
  .ticker-track {
    font-size: 28px;
  }
  .artist-preview {
    display: none;
  }
  .form-box {
    padding: 24px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .footer-bottom a {
    margin: 0 12px;
  }
  .nav-logo-img {
    height: 50px;
  }
}

/* =========================================================
   STREETWEAR / GRAFFITI GOLD REDESIGN — added by ChatGPT
   ========================================================= */
:root {
  --bg: #070604;
  --bg-soft: #12100a;
  --graphite: #17130d;
  --line: rgba(246, 213, 137, 0.16);
  --line-strong: rgba(246, 213, 137, 0.34);
  --fg: #fff7e7;
  --fg-dim: rgba(255, 247, 231, 0.68);
  --fg-faint: rgba(255, 247, 231, 0.4);
  --gold: #d6a738;
  --gold-2: #ffdf7a;
  --gold-dark: #7a5514;
  --ink: #060504;
  --paper: #f7edd6;
  --spray: rgba(214, 167, 56, 0.18);
}

body {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 210, 92, 0.11),
      transparent 28vw
    ),
    radial-gradient(
      circle at 86% 22%,
      rgba(182, 125, 28, 0.15),
      transparent 34vw
    ),
    repeating-linear-gradient(
      102deg,
      rgba(255, 255, 255, 0.026) 0 1px,
      transparent 1px 15px
    ),
    #070604;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.55;
  background:
    linear-gradient(
      120deg,
      transparent 0 35%,
      rgba(214, 167, 56, 0.08) 35% 36%,
      transparent 36% 100%
    ),
    repeating-radial-gradient(
      circle at 12% 80%,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(
      -8deg,
      transparent 0 28px,
      rgba(255, 255, 255, 0.025) 28px 30px
    );
}

body::after {
  content: "MAITINC MERCH  •  STREET DROP  •  TOUR SUPPLY  •  SOLD OUT";
  position: fixed;
  left: -8vw;
  bottom: 8vh;
  z-index: -1;
  width: 125vw;
  transform: rotate(-7deg);
  font-family: var(--display);
  font-size: clamp(42px, 10vw, 170px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 167, 56, 0.13);
  pointer-events: none;
  white-space: nowrap;
}

.noise {
  opacity: 0.12;
  mix-blend-mode: screen;
}
.vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 28%,
    rgba(0, 0, 0, 0.76) 100%
  );
}

.nav {
  top: 22px;
  max-width: 1280px;
  border-radius: 0 !important;
  padding: 12px 18px 12px 24px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  box-shadow:
    10px 10px 0 rgba(0, 0, 0, 0.88),
    0 0 0 1px rgba(0, 0, 0, 0.12) inset;
  clip-path: polygon(
    0 8%,
    3% 0,
    18% 4%,
    31% 0,
    49% 5%,
    65% 0,
    82% 4%,
    100% 0,
    99% 90%,
    94% 100%,
    73% 96%,
    54% 100%,
    31% 96%,
    12% 100%,
    0 92%
  );
}
.nav::before {
  border-radius: 0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(214, 167, 56, 0.18),
      transparent 35%,
      rgba(214, 167, 56, 0.16)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 6px,
      rgba(0, 0, 0, 0.035) 6px 7px
    );
}
.nav-logo-img {
  height: 44px;
  filter: contrast(1.2) drop-shadow(3px 3px 0 rgba(214, 167, 56, 0.35));
}
.nav-link,
.nav-cta {
  color: var(--ink);
  opacity: 1;
  font-family: var(--display);
  letter-spacing: 0.03em;
  font-size: 13px;
  transform: rotate(-1deg);
}
.nav-link:hover {
  color: var(--gold-dark);
  transform: rotate(1deg) translateY(-2px);
}
.nav-cta {
  border: 2px solid var(--ink);
  background: var(--gold);
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--ink);
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--gold-2);
  border-color: var(--ink);
  transform: translate(-1px, -1px) rotate(1deg);
}

.hero {
  min-height: 100vh;
  padding-top: 120px;
  background:
    radial-gradient(
      circle at 64% 46%,
      rgba(214, 167, 56, 0.19),
      transparent 24vw
    ),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 100%);
}
.hero::before,
.solution::before,
.artists::before,
.process::before,
.contact::before {
  content: "✦";
  position: absolute;
  z-index: 1;
  right: 6vw;
  top: 18vh;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  font-size: 74px;
  color: var(--ink);
  background: var(--gold);
  clip-path: polygon(
    50% 0,
    61% 35%,
    98% 21%,
    70% 50%,
    98% 79%,
    61% 65%,
    50% 100%,
    39% 65%,
    2% 79%,
    30% 50%,
    2% 21%,
    39% 35%
  );
  transform: rotate(12deg);
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.8));
}
.hero-bg {
  inset: 132px 36px 80px 52%;
  transform: rotate(3deg);
}
.hero-bg .placeholder {
  border: 10px solid var(--paper);
  box-shadow:
    18px 22px 0 rgba(0, 0, 0, 0.76),
    0 0 0 2px var(--gold) inset;
  filter: grayscale(1) contrast(1.25);
}
.hero-bg .placeholder::after {
  color: var(--ink);
  background: var(--gold);
  padding: 8px 12px;
  left: -8px;
  bottom: 28px;
  transform: rotate(-4deg);
}
.hero-inner {
  z-index: 3;
  max-width: 820px;
}
.hero-title {
  font-size: clamp(58px, 10.4vw, 164px);
  line-height: 0.78;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  text-shadow:
    5px 5px 0 #000,
    8px 8px 0 rgba(214, 167, 56, 0.62);
}
.hero-title .word span {
  display: inline-block;
  color: var(--gold-2);
  -webkit-text-stroke: 2px #000;
  transform: rotate(-1deg);
}
.hero-title em,
.section-title em,
.production-banner em,
.contact-headline em {
  display: inline-block;
  font-style: normal;
  color: var(--ink);
  background: var(--paper);
  padding: 0.03em 0.16em 0.08em;
  text-shadow: none;
  -webkit-text-stroke: 0;
  box-shadow: 12px 12px 0 rgba(214, 167, 56, 0.82);
  clip-path: polygon(
    0 13%,
    8% 0,
    34% 6%,
    62% 0,
    100% 8%,
    96% 87%,
    79% 100%,
    48% 93%,
    22% 100%,
    3% 89%
  );
  transform: rotate(-3deg);
}
.hero-sub,
.section-sub {
  font-weight: 750;
  color: rgba(255, 247, 231, 0.78);
}
.btn-primary,
.btn-ghost {
  border-radius: 0 !important;
  font-family: var(--display);
  letter-spacing: 0.03em;
  clip-path: polygon(0 8%, 8% 0, 100% 6%, 96% 100%, 4% 94%);
}
.btn-primary {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 2px solid #000 !important;
  box-shadow: 7px 7px 0 #000 !important;
}
.btn-primary:hover {
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 11px 11px 0 #000 !important;
}
.btn-ghost {
  background: var(--paper);
  color: #080604;
  border: 2px solid #000;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
}

.section-tag {
  color: var(--gold-2);
  font-family: var(--display);
}
.section-title,
.production-banner,
.contact-headline {
  text-transform: uppercase;
  letter-spacing: -0.06em;
  text-shadow: 4px 4px 0 #000;
}
.solution-grid {
  gap: 18px;
}
.svc,
.prod-card,
.form-box {
  border-radius: 0 !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.01)
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(214, 167, 56, 0.055) 0 2px,
      transparent 2px 12px
    ),
    #11100b !important;
  border: 2px solid rgba(255, 223, 122, 0.34) !important;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.72) !important;
  clip-path: polygon(0 0, 97% 1.5%, 100% 12%, 98% 100%, 4% 98%, 0 88%);
}
.svc:hover,
.prod-card:hover {
  transform: translate(-4px, -4px) rotate(-0.4deg);
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.86) !important;
}
.svc-num,
.prod-pill,
.form-box-tag,
.artists-counter,
.process-num,
.ff-label,
.form-status {
  font-family: var(--display) !important;
  color: var(--gold-2) !important;
  letter-spacing: 0.04em !important;
}
.svc-title,
.process-title,
.prod-ref,
.form-box-title {
  text-transform: uppercase;
  letter-spacing: -0.04em;
}
.placeholder {
  border-radius: 0 !important;
  background:
    linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.32)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(135deg, #2a2417, #090806) !important;
}
.placeholder::before {
  border-radius: 0 !important;
  background: var(--gold-2);
  box-shadow: 0 0 24px var(--gold);
}
.placeholder::after {
  color: var(--gold-2);
}

.ticker {
  background: var(--gold);
  color: #070604;
  border-block: 3px solid #000;
  transform: rotate(-1.2deg) scale(1.03);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.65);
}
.ticker-track span {
  font-family: var(--display);
  text-shadow: none;
}
.ticker .star {
  color: #070604;
}

.artists {
  background:
    radial-gradient(
      circle at 20% 16%,
      rgba(255, 223, 122, 0.12),
      transparent 24vw
    ),
    #090806;
}
.artist-row {
  border-color: rgba(255, 223, 122, 0.22) !important;
  transform: rotate(-0.4deg);
}
.artist-row:hover {
  color: var(--ink) !important;
  background: var(--gold);
  padding-left: 22px;
  box-shadow: 8px 8px 0 #000;
}
.artist-name {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -0.05em;
}
.artist-preview .placeholder {
  border: 8px solid var(--paper);
  filter: grayscale(1) contrast(1.2);
  box-shadow: 12px 14px 0 #000;
}

.process-step {
  border-radius: 0 !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 2px solid #000 !important;
  box-shadow: 8px 8px 0 #000;
  transform: rotate(-0.6deg);
}
.process-step:nth-child(even) {
  transform: rotate(0.7deg);
  background: #15120b !important;
  color: var(--fg) !important;
  border-color: var(--gold) !important;
}
.process-step:hover {
  transform: translate(-3px, -3px) rotate(0deg);
}
.process-step:nth-child(even) .process-desc {
  color: rgba(255, 247, 231, 0.72);
}
.process-desc {
  color: rgba(6, 5, 4, 0.72);
}
.process-icon {
  color: var(--gold-dark);
}

.ff-input {
  border-radius: 0 !important;
  background: #080705 !important;
  border: 2px solid rgba(255, 223, 122, 0.3) !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
}
.ff-input:focus {
  border-color: var(--gold) !important;
  box-shadow:
    6px 6px 0 #000,
    0 0 0 3px rgba(214, 167, 56, 0.22) !important;
}
.footer {
  background: #050403 !important;
  border-top: 3px solid var(--gold);
}
.footer::before {
  color: rgba(214, 167, 56, 0.08) !important;
}

@media (max-width: 900px) {
  .nav {
    clip-path: none;
    border-radius: 0 !important;
    padding: 10px 12px;
  }
  .nav-links {
    gap: 14px;
  }
  .nav-link {
    font-size: 11px;
  }
  .nav-cta {
    display: none;
  }
  .hero {
    padding: 118px 20px 70px;
  }
  .hero-bg {
    position: relative;
    inset: auto;
    height: 320px;
    margin: 32px 0 0;
    transform: rotate(2deg);
    order: 3;
  }
  .hero-inner {
    max-width: none;
  }
  .hero-title {
    font-size: clamp(56px, 19vw, 104px);
  }
  .hero::before {
    width: 64px;
    height: 64px;
    font-size: 48px;
    right: 16px;
    top: 165px;
  }
  .section {
    padding-inline: 20px;
  }
  .svc,
  .prod-card,
  .form-box {
    clip-path: none;
  }
}

/* === V2 REQUEST: deeper streetwear/graffiti structure === */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: contrast(1.16) saturate(0.75);
}
.hero-photo-stack {
  position: absolute;
  right: clamp(22px, 6vw, 110px);
  top: 21vh;
  width: min(36vw, 520px);
  height: 54vh;
  pointer-events: none;
  z-index: 3;
}
.hero-polaroid {
  position: absolute;
  width: 58%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: #f7edd5;
  border: 10px solid #f7edd5;
  box-shadow:
    16px 22px 0 #000,
    0 0 38px var(--gold-glow);
  filter: grayscale(0.15) contrast(1.1);
  animation: spiderJitter 1.05s steps(4, end) infinite;
}
.hero-polaroid.p1 {
  right: 0;
  top: 0;
  transform: rotate(7deg);
}
.hero-polaroid.p2 {
  left: 0;
  top: 17%;
  transform: rotate(-9deg);
  animation-delay: -0.25s;
}
.hero-polaroid.p3 {
  right: 14%;
  bottom: 0;
  width: 46%;
  transform: rotate(4deg);
  animation-delay: -0.5s;
}
@keyframes spiderJitter {
  0%,
  100% {
    translate: 0 0;
    filter: grayscale(0.1) contrast(1.1);
  }
  25% {
    translate: 4px -3px;
    filter: grayscale(0.4) contrast(1.35);
  }
  50% {
    translate: -3px 2px;
  }
  75% {
    translate: 2px 4px;
  }
}

.artists {
  background:
    radial-gradient(circle at 15% 20%, var(--gold-soft), transparent 30%),
    #080705;
}
.artists-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  position: relative;
  z-index: 2;
}
.artist-card {
  position: relative;
  min-height: 360px;
  padding: 24px;
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  background: #111;
  border: 2px solid #2d2412;
  transform: rotate(var(--tilt, 0deg));
  clip-path: polygon(0 3%, 97% 0, 100% 96%, 4% 100%);
  transition:
    transform 0.18s steps(3, end),
    border-color 0.18s steps(3, end),
    box-shadow 0.18s steps(3, end);
  isolation: isolate;
}
.artist-card:nth-child(odd) {
  --tilt: -0.8deg;
}
.artist-card:nth-child(even) {
  --tilt: 0.7deg;
}
.artist-card:hover {
  transform: translate(-6px, -8px) rotate(0deg);
  border-color: var(--gold);
  box-shadow:
    12px 12px 0 #000,
    0 0 0 3px rgba(214, 167, 56, 0.22);
  animation: spiderCard 0.34s steps(3, end) infinite;
}
@keyframes spiderCard {
  0%,
  100% {
    translate: 0 0;
  }
  33% {
    translate: 3px -2px;
  }
  66% {
    translate: -2px 3px;
  }
}
.artist-card-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 0.12s steps(2, end),
    transform 0.22s steps(4, end);
  z-index: -1;
}
.artist-card:hover .artist-card-media {
  opacity: 0.9;
  transform: scale(1);
}
.artist-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.86));
}
.artist-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.artist-card-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
}
.artist-card h3 {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 60px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 72px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000;
}
.artist-card p {
  position: absolute;
  left: 24px;
  bottom: 24px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255, 247, 231, 0.74);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.artist-card-arrow {
  position: absolute;
  right: 22px;
  bottom: 20px;
  color: var(--gold);
  font-family: var(--display);
  font-size: 38px;
}
.spray-dot {
  position: absolute;
  border-radius: 0 !important;
  background: var(--gold);
  filter: blur(1px);
  opacity: 0.72;
}
.dot-a {
  width: 38px;
  height: 38px;
  right: 24px;
  top: 44px;
}
.dot-b {
  width: 18px;
  height: 18px;
  left: 38px;
  top: 92px;
}
.artist-preview,
.artists-list {
  display: none !important;
}

.festivals {
  padding: 150px 36px;
  background: #0d0b07;
  border-top: 1px solid var(--line);
}
.festivals-head {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 54px;
  align-items: end;
}
.festivals-grid {
  max-width: 1640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.fest-card {
  flex: initial;
  height: 560px;
  clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 96%);
  border: 2px solid #34270f;
  transform: rotate(-0.6deg);
  box-shadow: 12px 12px 0 #000;
  transition:
    transform 0.2s steps(4, end),
    border-color 0.2s steps(4, end);
}
.fest-card:nth-child(2) {
  transform: rotate(0.8deg);
  margin-top: 42px;
}
.fest-card:nth-child(3) {
  transform: rotate(-1deg);
  margin-top: 12px;
}
.fest-card:hover {
  transform: translateY(-10px) rotate(0);
  border-color: var(--gold);
  animation: spiderCard 0.4s steps(3, end) infinite;
}
.fest-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.18) saturate(0.8);
}
.fest-card::before {
  content: "FEST";
  position: absolute;
  top: 88px;
  right: -20px;
  z-index: 2;
  font-family: var(--display);
  font-size: 80px;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  transform: rotate(90deg);
  opacity: 0.7;
}

.process {
  overflow: hidden;
}
.process-flow {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
.process-tile {
  position: relative;
  min-height: 330px;
  padding: 30px;
  border: 3px solid #0a0a0a;
  background: #f4ead3;
  color: #070604;
  box-shadow: 12px 12px 0 #000;
  clip-path: polygon(0 4%, 96% 0, 100% 94%, 5% 100%);
  transform: rotate(-1deg);
}
.process-tile:nth-of-type(3) {
  transform: rotate(1deg);
  background: #17120a;
  color: var(--fg);
  border-color: var(--gold);
}
.process-tile:hover {
  animation: spiderCard 0.32s steps(3, end) infinite;
}
.process-tile .process-num {
  color: var(--gold-dark);
}
.process-tile .process-title {
  margin-top: 58px;
  font-size: clamp(40px, 5vw, 76px);
  text-shadow: 3px 3px 0 rgba(214, 167, 56, 0.35);
}
.process-tile .process-desc {
  margin-top: 20px;
  color: inherit;
  opacity: 0.78;
}
.process-stamp {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--display);
  color: var(--gold);
  border: 2px solid currentColor;
  padding: 7px 10px;
  transform: rotate(8deg);
}
.process-graffiti-arrow {
  font-family: var(--display);
  font-size: 70px;
  color: var(--gold);
  text-shadow: 4px 4px 0 #000;
  transform: rotate(-8deg);
}
.process-list {
  display: none;
}

@media (max-width: 980px) {
  .hero-photo-stack {
    opacity: 0.38;
    right: -40px;
    width: 70vw;
  }
  .artists-grid,
  .festivals-grid {
    grid-template-columns: 1fr;
  }
  .artist-card {
    min-height: 300px;
  }
  .festivals-head {
    grid-template-columns: 1fr;
  }
  .fest-card,
  .fest-card:nth-child(2),
  .fest-card:nth-child(3) {
    height: 430px;
    margin-top: 0;
  }
  .process-flow {
    grid-template-columns: 1fr;
  }
  .process-graffiti-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

/* === V3: brighter black/gold streetwear redesign === */
:root {
  --bg: #14110b;
  --bg-soft: #1b160d;
  --paper: #fff4d7;
  --paper-2: #f3dfae;
  --ink: #070604;
  --gold: #d6a738;
  --gold-2: #ffdc73;
  --gold-dark: #7a5514;
  --line: rgba(7, 6, 4, 0.16);
}
html,
body {
  background:
    radial-gradient(
      circle at 16% 5%,
      rgba(255, 220, 115, 0.22),
      transparent 28vw
    ),
    radial-gradient(
      circle at 92% 22%,
      rgba(214, 167, 56, 0.17),
      transparent 25vw
    ),
    linear-gradient(
      180deg,
      #18130b 0%,
      #100d08 34%,
      #f1e0ba 34%,
      #e6d0a2 62%,
      #130f08 62%
    );
}
.vignette {
  background: radial-gradient(
    ellipse at center,
    transparent 48%,
    rgba(0, 0, 0, 0.38) 100%
  );
}
.noise {
  opacity: 0.08;
}
.section,
.artists,
.festivals,
.process,
.contact {
  position: relative;
  isolation: isolate;
}
.section-title,
.contact-headline {
  color: var(--paper);
}
.solution-v3 .section-title,
.solution-v3 .section-sub,
.solution-v3 .section-tag {
  color: var(--ink) !important;
  text-shadow: none !important;
}
.v3-head {
  max-width: 1640px;
  margin: 0 auto 54px;
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 54px;
  align-items: end;
}
.v3-head .section-sub {
  max-width: 620px;
  color: rgba(255, 244, 215, 0.76);
}
.solution-v3 .v3-head .section-sub {
  color: rgba(7, 6, 4, 0.72) !important;
}
.hero-v3 {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18),
    rgba(0, 0, 0, 0.05) 68%,
    rgba(0, 0, 0, 0.25)
  );
}
.hero-kicker {
  display: inline-block;
  margin-bottom: 20px;
  padding: 9px 13px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  letter-spacing: 0.04em;
  box-shadow: 6px 6px 0 #000;
  transform: rotate(-1deg);
}
.hero-v3 .hero-bg {
  border: 12px solid var(--paper);
  box-shadow:
    18px 22px 0 #000,
    0 0 50px rgba(255, 220, 115, 0.2);
  clip-path: polygon(0 4%, 97% 0, 100% 92%, 4% 100%);
}
.hero-v3 .hero-bg::before,
.hero-v3 .hero-bg::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 34px;
  background: rgba(255, 244, 215, 0.72);
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transform: rotate(-10deg);
}
.hero-v3 .hero-bg::before {
  left: 30px;
  top: -22px;
}
.hero-v3 .hero-bg::after {
  right: 46px;
  bottom: -16px;
  transform: rotate(8deg);
}
.hero-v3 .hero-bg img {
  opacity: 0.94;
  filter: grayscale(0.15) contrast(1.08) saturate(0.92);
}
.hero-v3 .hero-polaroid::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 30px;
  top: -22px;
  height: 32px;
  background: rgba(255, 244, 215, 0.7);
  z-index: 3;
  transform: rotate(-8deg);
}
.hero-v3 .hero-polaroid {
  animation: floatPoster 5s ease-in-out infinite;
}
@keyframes floatPoster {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

.solution-v3 {
  background: linear-gradient(180deg, #f4e4bd, #dfc58d);
  color: var(--ink);
  padding-top: 140px;
  padding-bottom: 150px;
  border-block: 4px solid #000;
}
.solution-v3::before {
  opacity: 0.45;
  right: 4vw;
  top: 10vh;
}
.service-editorial {
  max-width: 1640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: stretch;
}
.service-big-photo {
  position: relative;
  min-height: 620px;
  border: 4px solid #000;
  background: #000;
  box-shadow: 16px 16px 0 #000;
  clip-path: polygon(0 2%, 100% 0, 96% 100%, 3% 96%);
  overflow: hidden;
}
.service-big-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.82);
}
.service-big-photo strong {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 86px);
  line-height: 0.82;
  color: var(--gold-2);
  text-shadow: 5px 5px 0 #000;
}
.tape {
  position: absolute;
  z-index: 7;
  width: 112px;
  height: 34px;
  background: rgba(255, 244, 215, 0.74);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  mix-blend-mode: screen;
}
.tape-a {
  left: 22px;
  top: -14px;
  transform: rotate(-9deg);
}
.tape-b {
  right: 30px;
  bottom: -12px;
  transform: rotate(8deg);
}
.service-stack {
  display: grid;
  gap: 20px;
}
.service-scrap {
  position: relative;
  padding: 34px 34px 36px;
  border: 3px solid #000;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 #000;
  clip-path: polygon(0 0, 96% 3%, 100% 86%, 95% 100%, 4% 97%);
}
.service-scrap:nth-child(2) {
  background: #151109;
  color: var(--paper);
  transform: rotate(0.7deg);
  border-color: var(--gold);
}
.service-scrap:nth-child(3) {
  background: var(--gold);
  transform: rotate(-0.6deg);
}
.service-mark {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
  background: #000;
  color: var(--gold-2);
  padding: 7px 10px;
}
.service-scrap h3 {
  margin: 26px 0 12px;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 72px);
  line-height: 0.82;
  text-transform: uppercase;
  letter-spacing: -0.06em;
}
.service-scrap p {
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.78;
  max-width: 720px;
}

.artists-v3 {
  padding: 150px 36px;
  background: linear-gradient(180deg, #12100b 0%, #1b150a 55%, #0f0c07 100%);
}
.artist-wall {
  max-width: 1640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.artist-poster {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
  border: 4px solid #000;
  background: #000;
  box-shadow: 12px 12px 0 #000;
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
  transition:
    transform 0.18s steps(3, end),
    box-shadow 0.18s steps(3, end);
}
.artist-poster:nth-child(3n + 2) {
  transform: rotate(0.7deg);
  margin-top: 34px;
}
.artist-poster:nth-child(3n + 1) {
  transform: rotate(-0.6deg);
}
.artist-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.12) saturate(0.86);
  opacity: 0.72;
  transform: scale(1.04);
  transition:
    opacity 0.16s steps(3, end),
    filter 0.16s steps(3, end),
    transform 0.22s steps(4, end);
}
.poster-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.18) 45%,
    rgba(0, 0, 0, 0.82)
  );
}
.artist-poster h3 {
  position: absolute;
  left: 22px;
  right: 20px;
  bottom: 22px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 86px);
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: -0.07em;
  text-shadow: 5px 5px 0 #000;
}
.artist-poster::after {
  position: absolute;
  right: 18px;
  top: 18px;
  font-family: var(--display);
  font-size: 12px;
  background: var(--gold);
  color: #000;
  padding: 8px 10px;
  box-shadow: 4px 4px 0 #000;
}
.artist-poster:hover {
  transform: translate(-6px, -8px) rotate(0deg);
  box-shadow:
    18px 18px 0 #000,
    0 0 34px rgba(255, 220, 115, 0.22);
  animation: comicStep 0.38s steps(2, end) infinite;
}
.artist-poster:hover img {
  opacity: 1;
  filter: grayscale(0) contrast(1.14) saturate(1.02);
  transform: scale(1);
}
@keyframes comicStep {
  0%,
  100% {
    clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
  }
  50% {
    clip-path: polygon(0 3%, 98% 0, 100% 96%, 2% 100%);
  }
}
.artist-card,
.artists-counter {
  display: none !important;
}

.festivals-v3 {
  padding: 150px 36px;
  background: linear-gradient(180deg, #e6d0a2, #f2e1ba);
  color: var(--ink);
  border-block: 4px solid #000;
}
.festivals-v3 .section-title,
.festivals-v3 .section-tag {
  color: var(--ink);
  text-shadow: none !important;
}
.festivals-v3 .section-sub {
  color: rgba(7, 6, 4, 0.72);
}
.festival-wall {
  max-width: 1640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 24px;
  align-items: start;
}
.festival-poster {
  position: relative;
  height: 560px;
  overflow: hidden;
  border: 4px solid #000;
  background: #000;
  box-shadow: 14px 14px 0 #000;
  clip-path: polygon(0 4%, 96% 0, 100% 100%, 3% 96%);
}
.festival-poster:nth-child(2) {
  margin-top: 70px;
  transform: rotate(1deg);
}
.festival-poster:nth-child(3) {
  margin-top: 24px;
  transform: rotate(-0.8deg);
}
.festival-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.12) saturate(0.86);
  opacity: 0.9;
}
.festival-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.82));
}
.festival-label {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  color: var(--paper);
}
.festival-label h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 82px);
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: -0.07em;
  text-shadow: 5px 5px 0 #000;
}
.festival-label span {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--display);
  font-size: 13px;
  background: var(--gold);
  color: #000;
  padding: 8px 10px;
  box-shadow: 4px 4px 0 #000;
}

.process-v3 {
  padding: 150px 36px;
  background: #100d08;
  overflow: hidden;
}
.spray-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.45;
  background:
    radial-gradient(
      circle at 20% 25%,
      rgba(255, 220, 115, 0.18),
      transparent 22vw
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(255, 220, 115, 0.12),
      transparent 26vw
    );
}
.spray-bg span {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 2px solid rgba(255, 220, 115, 0.18);
  border-radius: 0 !important;
  animation: drift 9s steps(5, end) infinite;
}
.spray-bg span:nth-child(1) {
  left: 8%;
  top: 18%;
}
.spray-bg span:nth-child(2) {
  right: 14%;
  top: 28%;
  animation-delay: -3s;
}
.spray-bg span:nth-child(3) {
  left: 46%;
  bottom: 10%;
  animation-delay: -6s;
}
@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(18px, -22px) rotate(12deg);
  }
}
.process-v3-flow {
  max-width: 1640px;
  margin-inline: auto;
}
.process-v3-tile {
  min-height: 360px;
  background: var(--paper);
}
.process-v3-tile:nth-of-type(3) {
  background: #17120a;
  color: var(--paper);
}
.process-v3-tile .process-title {
  text-shadow: 3px 3px 0 rgba(214, 167, 56, 0.45);
}
.process-sticker {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--display);
  font-size: 13px;
  background: var(--gold);
  color: #000;
  padding: 8px 10px;
  box-shadow: 4px 4px 0 #000;
  transform: rotate(-5deg);
}
.process-graffiti-arrow {
  font-size: 86px;
  color: var(--gold-2);
  filter: drop-shadow(5px 5px 0 #000);
  animation: arrowPulse 1.2s steps(3, end) infinite;
}
@keyframes arrowPulse {
  50% {
    transform: translateX(8px) rotate(-8deg) scale(1.06);
  }
}

.contact-v3 {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: 34px;
  align-items: center;
  padding: 150px 36px;
  background: linear-gradient(180deg, #f2e1ba, #120e08);
}
.contact-poster {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  border: 4px solid #000;
  background: #000;
  box-shadow: 16px 16px 0 #000;
  clip-path: polygon(3% 0, 100% 3%, 96% 100%, 0 96%);
}
.contact-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(0.85);
}
.contact-poster strong {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 90px);
  line-height: 0.82;
  color: var(--gold-2);
  text-shadow: 5px 5px 0 #000;
}
.form-v3 {
  max-width: 900px !important;
  margin: 0 !important;
  background: #151109 !important;
  border: 4px solid #000 !important;
  box-shadow: 16px 16px 0 #000 !important;
  clip-path: polygon(0 2%, 98% 0, 100% 96%, 4% 100%) !important;
}
.form-v3 .form-box-title {
  font-size: clamp(44px, 5vw, 84px);
  line-height: 0.82;
  color: var(--paper);
  text-shadow: 4px 4px 0 #000;
}
.form-v3 .form-box-sub {
  color: rgba(255, 244, 215, 0.7);
}
.form-v3 .ff-input {
  background: #fff4d7 !important;
  color: #070604 !important;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0 #000 !important;
  font-weight: 800;
}
.form-v3 .ff-label {
  color: var(--gold-2) !important;
}
.form-v3 .ff-input::placeholder {
  color: rgba(7, 6, 4, 0.45);
}
.form-v3 .form-status {
  color: var(--paper) !important;
}
.neon-tag {
  color: var(--gold-2);
  text-shadow:
    0 0 12px rgba(255, 220, 115, 0.65),
    0 0 28px rgba(255, 220, 115, 0.3);
}

@media (max-width: 980px) {
  .v3-head,
  .service-editorial,
  .festival-wall,
  .contact-v3 {
    grid-template-columns: 1fr;
  }
  .artist-wall {
    grid-template-columns: 1fr;
  }
  .artist-poster:nth-child(n),
  .festival-poster:nth-child(n) {
    margin-top: 0;
    transform: none;
  }
  .service-big-photo,
  .contact-poster {
    min-height: 420px;
  }
  .contact-v3,
  .artists-v3,
  .festivals-v3,
  .process-v3,
  .solution-v3 {
    padding: 100px 20px;
  }
}

/* =========================================================
   REFACTOR REQUEST — polaroids, scrollspy tape, paper form
   ========================================================= */
.section-title--two-lines {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
  max-width: min(100%, 9.7em);
  text-wrap: nowrap;
  white-space: nowrap;
}
.section-title--two-lines span {
  display: block;
}

.nav-logo-img {
  filter: drop-shadow(5px 5px 0 #000) !important;
}
.nav-logo:hover .nav-logo-img {
  filter: drop-shadow(6px 6px 0 #000) !important;
}
.nav-link {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  transition:
    transform 220ms ease,
    color 220ms ease,
    opacity 220ms ease;
}
.nav-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px -7px 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.18),
      transparent 32%,
      rgba(0, 0, 0, 0.035)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.035) 0 1px,
      transparent 1px 7px
    ),
    #f8e9bf;
  clip-path: polygon(
    2% 8%,
    13% 0,
    38% 6%,
    62% 1%,
    92% 7%,
    100% 22%,
    97% 90%,
    84% 100%,
    56% 95%,
    27% 100%,
    0 88%
  );
  opacity: 0;
  transform: rotate(-2.4deg) scale(0.92);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}
.nav-link.is-active {
  color: #070604 !important;
  opacity: 1;
  transform: rotate(-1deg) translateY(-1px);
}
.nav-link.is-active::before {
  opacity: 1;
  transform: rotate(-2.4deg) scale(1);
}

.artists-v3 .v3-head,
.festivals-v3 .v3-head {
  grid-template-columns: max-content 1fr;
}
.artists-v3 .section-title--two-lines,
.festivals-v3 .section-title--two-lines {
  line-height: 0.86;
  letter-spacing: -0.065em;
}

.artist-wall {
  align-items: start;
}
.artist-poster {
  min-height: auto !important;
  aspect-ratio: 4 / 5.35;
  padding: 14px 14px 76px;
  overflow: visible;
  background: #fff8e9 !important;
  border: 0 !important;
  color: #070604;
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.35),
    10px 10px 0 #000 !important;
  clip-path: none !important;
  transform-origin: center;
  transition:
    transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.artist-poster:nth-child(3n + 2) {
  transform: rotate(0.9deg);
}
.artist-poster:nth-child(3n + 1) {
  transform: rotate(-0.8deg);
}
.artist-poster img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: calc(100% - 6px);
  object-fit: cover;
  opacity: 1;
  filter: grayscale(100%) contrast(1.08);
  transform: none;
  transition:
    filter 520ms ease,
    transform 520ms ease;
}
.artist-poster:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.015);
  box-shadow:
    0 28px 46px rgba(0, 0, 0, 0.44),
    14px 14px 0 #000 !important;
  animation: none !important;
}
.artist-poster:hover img {
  filter: grayscale(0%) contrast(1.06) saturate(1.04);
  transform: scale(1.012);
}
.artist-poster .poster-shade {
  display: none;
}
.artist-poster h3 {
  left: 18px;
  right: 18px;
  bottom: 22px;
  color: #070604;
  font-size: clamp(26px, 3.1vw, 46px);
  line-height: 0.9;
  letter-spacing: -0.055em;
  text-shadow: none;
}
.artist-poster .tape {
  z-index: 3;
  mix-blend-mode: normal;
}

.festival-wall {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.festival-poster:nth-child(n) {
  height: 510px;
  margin-top: 0;
  transform: rotate(var(--festival-tilt, -0.5deg));
}
.festival-poster:nth-child(2) {
  --festival-tilt: 0.7deg;
  margin-top: 42px;
}
.festival-poster:nth-child(3) {
  --festival-tilt: -1deg;
  margin-top: 18px;
}
.festival-poster:nth-child(4) {
  --festival-tilt: 0.9deg;
  margin-top: 68px;
}
.festival-poster {
  transition:
    transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 420ms ease;
}
.festival-poster img {
  filter: grayscale(100%) contrast(1.1) saturate(0.9);
  transform: scale(1.035);
  transition:
    filter 520ms ease,
    transform 520ms ease,
    opacity 520ms ease;
}
.festival-poster:hover {
  transform: translate(-6px, -8px) rotate(0deg) scale(1.012);
  border-color: var(--gold) !important;
  box-shadow:
    18px 18px 0 #000,
    0 0 34px rgba(255, 220, 115, 0.22);
}
.festival-poster:hover img {
  filter: grayscale(0%) contrast(1.12) saturate(1.04);
  transform: scale(1);
  opacity: 1;
}

.process-v3-tile {
  transition:
    transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 420ms ease;
}
.process-v3-tile:hover {
  animation: none !important;
  transform: translateY(-6px) scale(1.012) rotate(0deg);
  box-shadow:
    16px 16px 0 #000,
    0 18px 36px rgba(0, 0, 0, 0.26);
}
.process-v3-tile.is-sold-out,
.process-v3-tile:nth-of-type(3) {
  background: linear-gradient(
    145deg,
    #c8952f 0%,
    #e0b84f 46%,
    #f6dd8f 100%
  ) !important;
  color: #211504 !important;
  border-color: #000 !important;
}
.process-v3-tile.is-sold-out .process-sticker,
.process-v3-tile:nth-of-type(3) .process-sticker {
  background: #211504;
  color: #f8e9bf;
}
.process-v3-tile.is-sold-out .process-title,
.process-v3-tile:nth-of-type(3) .process-title {
  color: #211504;
  text-shadow: 3px 3px 0 rgba(255, 244, 215, 0.55);
}
.process-v3-tile.is-sold-out .process-desc,
.process-v3-tile:nth-of-type(3) .process-desc {
  color: rgba(33, 21, 4, 0.78);
}
.process-graffiti-arrow {
  animation: none !important;
}

.contact-v3 {
  background: #d6a738 !important;
  color: #070604;
}
.contact-v3 .contact-poster {
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.86);
}
.form-v3 {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 37px,
      rgba(80, 55, 18, 0.12) 37px 38px
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0.06)
    ),
    #fff8e9 !important;
  color: #211504 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(1% 0, 99% 1%, 100% 97%, 94% 100%, 4% 98%, 0 4%) !important;
  box-shadow:
    16px 18px 0 #000,
    0 24px 52px rgba(0, 0, 0, 0.22) !important;
}
.form-v3::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(180, 66, 54, 0.24);
  border-radius: 0 !important;
  mask: none;
  -webkit-mask: none;
}
.form-v3 .form-box-tag {
  background: rgba(214, 167, 56, 0.2);
  color: #211504 !important;
  border: 1px solid rgba(33, 21, 4, 0.35);
}
.form-v3 .form-box-title {
  color: #211504;
  text-shadow: none;
}
.form-v3 .form-box-sub,
.form-v3 .form-status {
  color: rgba(33, 21, 4, 0.72) !important;
}
.form-v3 .ff-label {
  color: rgba(33, 21, 4, 0.72) !important;
}
.form-v3 .ff-req {
  color: #8d5d12;
}
.form-v3 .ff-input {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(33, 21, 4, 0.34) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #211504 !important;
  padding: 10px 2px 12px;
  font-weight: 750;
}
.form-v3 .ff-input:hover,
.form-v3 .ff-input:focus {
  border-bottom-color: #211504 !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 8px 0 rgba(214, 167, 56, 0.1) !important;
}
.form-v3 .ff-textarea {
  min-height: 132px;
  line-height: 1.55;
}
.form-v3 .btn-primary {
  background: #211504 !important;
  color: #fff8e9 !important;
  border-color: #211504 !important;
  box-shadow: 6px 6px 0 rgba(214, 167, 56, 0.75) !important;
}
.form-v3 .btn-primary:hover {
  box-shadow: 9px 9px 0 rgba(214, 167, 56, 0.9) !important;
}

@media (max-width: 980px) {
  .section-title--two-lines {
    width: 100%;
    max-width: 100%;
  }
  .artists-v3 .v3-head,
  .festivals-v3 .v3-head {
    grid-template-columns: 1fr;
  }
  .festival-wall {
    grid-template-columns: 1fr;
  }
  .festival-poster:nth-child(n) {
    height: 430px;
    margin-top: 0;
    transform: none;
  }
}

/* =========================================================
   ITERATION — randomized tape, hard gold shadows, paper sheet
   ========================================================= */
.nav-logo {
  position: relative;
  min-width: 62px;
  min-height: 62px;
  justify-content: center;
  border-radius: 0 !important;
  isolation: isolate;
}
.nav-logo::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 0 !important;
  background: #070604;
  box-shadow: 4px 4px 0 rgba(214, 167, 56, 0.55);
}
.nav-logo-img,
.nav-logo:hover .nav-logo-img {
  filter: none !important;
}
.nav-link::before {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.1),
      transparent 32%,
      rgba(0, 0, 0, 0.12)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.08) 0 1px,
      transparent 1px 7px
    ),
    #c18f2f;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}
.nav-link.is-active {
  color: #080604 !important;
}

.artist-poster {
  display: grid;
  padding: 14px 14px 0 !important;
  aspect-ratio: 4 / 5.35;
  transition:
    transform 0.4s steps(4, end),
    box-shadow 0.4s steps(4, end) !important;
}
.artist-polaroid {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.artist-photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #0a0805;
}
.artist-poster img {
  height: 100% !important;
  transition: all 0.4s steps(4, end) !important;
}
.artist-poster figcaption {
  display: grid;
  align-items: center;
  min-height: 78px;
  padding: 14px 4px 18px;
  background: #fff8e9;
}
.artist-poster h3 {
  position: static !important;
  overflow-wrap: anywhere;
  hyphens: auto;
  color: #070604;
  text-shadow: 3px 3px 0 #d6a738 !important;
}
.artist-poster:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.015);
}
.artist-poster:hover img {
  filter: grayscale(0%) contrast(1.06) saturate(1.04);
  transform: scale(1.018);
}
.artist-poster .tape-a {
  transform: translate(var(--tape-a-x, 0), var(--tape-a-y, 0))
    rotate(var(--tape-a-r, -9deg));
}
.artist-poster .tape-b {
  transform: translate(var(--tape-b-x, 0), var(--tape-b-y, 0))
    rotate(var(--tape-b-r, 8deg));
}

.festival-poster {
  transition:
    transform 0.4s steps(4, end),
    box-shadow 0.4s steps(4, end),
    border-color 0.4s steps(4, end) !important;
}
.festival-poster img {
  transition: all 0.4s steps(4, end) !important;
}
.festival-label h3 {
  text-shadow: 4px 4px 0 #d6a738 !important;
}

.form-v3 {
  transform: rotate(-1deg);
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 255, 255, 0.72),
      transparent 24%
    ),
    radial-gradient(circle at 84% 8%, rgba(214, 167, 56, 0.1), transparent 20%),
    repeating-linear-gradient(
      0deg,
      rgba(33, 21, 4, 0.028) 0 1px,
      transparent 1px 8px
    ),
    linear-gradient(135deg, #fffaf0 0%, #f7ecd4 100%) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow:
    12px 16px 0 rgba(0, 0, 0, 0.82),
    0 22px 50px rgba(0, 0, 0, 0.22) !important;
}
.form-v3::before {
  display: none !important;
}
.form-v3:hover,
.form-v3:focus-within {
  transform: rotate(-1deg);
}

@media (max-width: 980px) {
  .nav-logo {
    min-width: 54px;
    min-height: 54px;
  }
  .artist-poster figcaption {
    min-height: 72px;
  }
  .form-v3,
  .form-v3:hover,
  .form-v3:focus-within {
    transform: rotate(-0.45deg);
  }
}

/* =========================================================
   ITERATION 2 — clipping fixes, robust scrollspy, Spider-Verse motion
   ========================================================= */
:root {
  --spider-step: all 0.15s steps(3, end);
  --hard-gold-shadow: #d6a738;
}

/* HEADER */
.nav-logo {
  min-width: auto !important;
  min-height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.nav-logo::before {
  display: none !important;
}
.nav-logo-img,
.nav-logo:hover .nav-logo-img {
  filter: drop-shadow(2px 2px 0 #000) !important;
  transition: var(--spider-step) !important;
}
.nav-logo:hover .nav-logo-img {
  transform: translate(-1px, -1px) scale(1.045) !important;
  filter: drop-shadow(3px 3px 0 #000) !important;
}
.nav-link,
.nav-link::before,
.nav-cta,
.nav-cta svg,
.btn-primary,
.btn-primary::after {
  transition: var(--spider-step) !important;
}
.nav-link:hover {
  transform: translate(-1px, -2px) rotate(-1deg);
}
.nav-cta:hover,
.btn-primary:hover {
  transform: translate(-3px, -3px) rotate(-1deg);
}

/* HERO clipping + headline */
.hero,
.hero-v3,
.hero-inner,
.hero-title,
.hero-title .word {
  overflow: visible !important;
}
.hero-v3 {
  padding-top: clamp(132px, 15vh, 190px) !important;
  padding-bottom: clamp(92px, 12vh, 150px) !important;
}
.hero-inner {
  padding-top: 18px !important;
  padding-inline: clamp(20px, 3vw, 48px) !important;
}
.hero-title {
  padding: 0.08em 0.08em 0.14em 0 !important;
  line-height: 0.9 !important;
}
.hero-title .word > span {
  padding: 0.02em 0.08em 0.08em 0;
  text-shadow: 5px 5px 0 #000;
}
.hero-title em {
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 0.04em 0.14em 0.08em 0.08em;
  color: #070604 !important;
  text-shadow: 3px 3px 0 var(--hard-gold-shadow) !important;
  overflow: visible !important;
}
.hero-title em::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.08em -0.08em 0.02em -0.08em;
  background: #fff4d7;
  clip-path: polygon(3% 10%, 94% 0, 100% 82%, 88% 100%, 8% 94%, 0 34%);
  box-shadow: 8px 8px 0 #000;
  transform: rotate(-1.2deg);
}
.hero-bottom,
.hero-cta-wrap {
  overflow: visible !important;
}

/* SERVICIOS */
.solution-v3 {
  overflow: hidden;
}
.solution-v3::before,
.solution-v3::after {
  display: none !important;
}
.solution-logo-bg {
  position: absolute;
  z-index: -1;
  right: 2vw;
  top: 50%;
  width: min(35vw, 980px);
  max-width: none;
  opacity: 1;
  transform: translateY(-145%) rotate(-7deg);
  filter:
    drop-shadow(4px 4px 0 #000)
    drop-shadow(0 0 10px rgba(214,167,56,0.25));

  pointer-events: none;
}
.solution-v3 .v3-head {
  grid-template-columns: 1fr !important;
}
.solution-v3 .section-title {
  overflow: visible !important;
}
.solution-v3 .section-title em {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.05em 0.14em 0.08em 0.08em;
  color: #070604 !important;
  text-shadow: 3px 3px 0 var(--hard-gold-shadow) !important;
  overflow: visible !important;
}
.solution-v3 .section-title em::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.03em -0.08em 0.02em -0.07em;
  background: #fff4d7;
  clip-path: polygon(1% 14%, 96% 0, 100% 72%, 88% 100%, 4% 92%, 0 42%);
  box-shadow: 7px 7px 0 #000;
  transform: rotate(0.8deg);
}
.service-scrap {
  overflow: visible;
}
.service-scrap--1 {
  clip-path: polygon(0 3%, 97% 0, 100% 82%, 94% 100%, 5% 96%) !important;
  border-radius: 0 !important;
}
.service-scrap--2 {
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 93%) !important;
  border-radius: 0 !important;
}
.service-scrap--3 {
  clip-path: polygon(0 0, 94% 3%, 100% 96%, 8% 100%, 2% 72%) !important;
  border-radius: 0 !important;
}

/* ARTISTAS */
.artist-poster,
.artist-poster img {
  transition: all 0.15s steps(3, end) !important;
}
.artist-poster:hover img {
  transform: scale(1.02) !important;
}
.artist-poster.reveal {
  transform: translateY(34px) rotate(var(--artist-tilt, 0deg)) scale(0.97);
}
.artist-poster.reveal.in {
  transform: rotate(var(--artist-tilt, 0deg)) scale(1);
}
.artist-poster:nth-child(3n + 1) {
  --artist-tilt: -0.8deg;
}
.artist-poster:nth-child(3n + 2) {
  --artist-tilt: 0.9deg;
}
.artist-poster:nth-child(3n) {
  --artist-tilt: 0.35deg;
}
.artist-poster.reveal.in:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.015);
}

/* FESTIVALES */
.festival-poster,
.festival-poster img {
  transition: all 0.15s steps(3, end) !important;
}
.festival-poster .tape,
.festival-poster .tape-a {
  display: none !important;
}
.festival-poster:nth-child(1) {
  clip-path: polygon(0 5%, 96% 0, 100% 88%, 92% 100%, 4% 96%) !important;
}
.festival-poster:nth-child(2) {
  clip-path: polygon(4% 0, 100% 4%, 96% 100%, 0 92%) !important;
}
.festival-poster:nth-child(3) {
  clip-path: polygon(0 0, 94% 2%, 100% 96%, 9% 100%, 2% 74%) !important;
}
.festival-poster:nth-child(4) {
  clip-path: polygon(3% 4%, 100% 0, 97% 93%, 86% 100%, 0 96%) !important;
}
.festival-label {
  left: 18px !important;
  right: 18px !important;
  bottom: 20px !important;
  padding-right: 4px;
}
.festival-label h3 {
  font-size: clamp(28px, 3.4vw, 58px) !important;
  line-height: 0.88 !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  letter-spacing: -0.055em !important;
}
.festival-label span {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* PROCESO: cards static + unique scraps */
.process-v3-tile,
.process-v3-tile:hover {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
.process-v3-tile:nth-of-type(1) {
  clip-path: polygon(0 3%, 98% 0, 100% 86%, 94% 100%, 5% 97%) !important;
}
.process-v3-tile:nth-of-type(2) {
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 94%) !important;
}
.process-v3-tile:nth-of-type(3) {
  clip-path: polygon(0 0, 93% 4%, 100% 96%, 8% 100%, 2% 76%) !important;
}
.process-graffiti-arrow,
.process-graffiti-arrow:hover {
  animation: none !important;
  transition: none !important;
}

/* CONTACTO */
.form-v3,
.form-v3:hover,
.form-v3:focus-within,
.form-v3 .ff-input,
.form-v3 .btn-primary {
  transition: all 0.15s steps(3, end) !important;
}
.form-v3:hover,
.form-v3:focus-within {
  transform: rotate(-1deg) translate(-4px, -4px) !important;
  box-shadow:
    16px 20px 0 rgba(0, 0, 0, 0.86),
    0 26px 56px rgba(0, 0, 0, 0.26) !important;
}

/* FOOTER redesign */
.footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(214, 167, 56, 0.24),
      transparent 28%
    ),
    linear-gradient(180deg, #100d08 0%, #070604 100%) !important;
  border-top: 4px solid #000;
  padding: 72px 36px 34px !important;
}
.footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 24px clamp(18px, 4vw, 70px) auto;
  height: 116px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.13),
      transparent 30%,
      rgba(0, 0, 0, 0.12)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.08) 0 1px,
      transparent 1px 8px
    ),
    #c18f2f;
  clip-path: polygon(
    1% 12%,
    10% 0,
    34% 7%,
    60% 1%,
    92% 9%,
    100% 30%,
    97% 88%,
    84% 100%,
    50% 94%,
    16% 100%,
    0 82%
  );
  transform: rotate(-0.7deg);
  box-shadow: 10px 10px 0 #000;
  opacity: 0.9;
}
.footer-cols {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto 46px !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px !important;
}
.footer-col {
  position: relative;
  padding: 28px 26px !important;
  background: #fff4d7;
  color: #211504;
  border: 3px solid #000;
  box-shadow: 9px 9px 0 #000;
  clip-path: polygon(0 3%, 98% 0, 100% 92%, 94% 100%, 4% 97%);
}
.footer-col:nth-child(2) {
  transform: rotate(0.7deg);
  clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 94%);
  background: #d6a738;
}
.footer-col:nth-child(3) {
  transform: rotate(-0.6deg);
  clip-path: polygon(0 0, 95% 3%, 100% 96%, 8% 100%, 2% 76%);
}
.footer-col-label {
  display: inline-block;
  margin-bottom: 18px !important;
  padding: 7px 10px;
  background: #070604;
  color: #d6a738 !important;
  font-family: var(--display) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(214, 167, 56, 0.5);
}
.footer-col a,
.footer-bottom a {
  color: inherit !important;
  font-weight: 900;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(214, 167, 56, 0.65);
  text-underline-offset: 5px;
  transition: all 0.15s steps(3, end) !important;
}
.footer-col a:hover,
.footer-bottom a:hover {
  color: #000 !important;
  transform: translate(-2px, -2px) rotate(-1deg);
  text-decoration-color: #000;
}
.footer-social {
  border: 2px solid #000 !important;
  box-shadow: 5px 5px 0 #000;
  background: rgba(255, 255, 255, 0.22);
  padding: 10px 12px !important;
}
.footer-bottom {
  max-width: 1240px;
  margin: 0 auto !important;
  padding: 18px 20px !important;
  background: #070604;
  color: #fff4d7;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 rgba(214, 167, 56, 0.72);
  clip-path: polygon(1% 0, 100% 7%, 98% 100%, 0 92%);
}
.footer-bottom span {
  color: #d6a738;
  font-family: var(--display);
  text-shadow: 2px 2px 0 #000;
}

@media (max-width: 980px) {
  .hero-title em::before,
  .solution-v3 .section-title em::before {
    inset: 0.08em -0.05em 0.04em -0.05em;
  }
  .solution-logo-bg {
    width: 120vw;
    right: -42vw;
    opacity: 0.06;
  }
  .footer-cols {
    grid-template-columns: 1fr;
  }
  .footer-col:nth-child(n) {
    transform: none;
  }
  .footer-bottom {
    clip-path: none;
  }
}

/* =========================================================
   FIX FINAL — <em> highlight siempre por debajo del texto
   ========================================================= */
:where(.hero-title, .section-title, .production-banner, .contact-headline) em {
  position: relative !important;
  display: inline-block !important;
  isolation: isolate !important;
  overflow: visible !important;

  /* El contenedor ya NO pinta fondo encima/alrededor del texto */
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;

  /* Espacio mínimo para que no corte sombras ni la mancha */
  padding: 0.035em 0.12em 0.09em !important;
  margin-inline: 0.03em !important;

  font-style: normal !important;
  color: #070604 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 3px 3px 0 #d6a738 !important;
  z-index: 1 !important;
  transform: rotate(-2deg);
}

:where(.hero-title, .section-title, .production-banner, .contact-headline)
  em::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;

  left: -0.08em !important;
  right: -0.08em !important;
  top: 0.16em !important;
  bottom: 0.03em !important;

  display: block !important;
  background: #fff4d8 !important;
  border-radius: 0 !important;
  box-shadow: 7px 7px 0 #000 !important;
  transform: rotate(-1deg) !important;

  clip-path: polygon(
    2% 10%,
    96% 0,
    100% 78%,
    90% 100%,
    7% 94%,
    0 35%
  ) !important;
  -webkit-clip-path: polygon(
    2% 10%,
    96% 0,
    100% 78%,
    90% 100%,
    7% 94%,
    0 35%
  ) !important;
}

:where(.hero-title, .section-title, .production-banner, .contact-headline),
:where(.hero-title, .section-title, .production-banner, .contact-headline)
  .word,
:where(.hero-title, .section-title, .production-banner, .contact-headline)
  span {
  overflow: visible !important;
}

/* Ajustes por tamaño para que la mancha no invada demasiado en titulares grandes */
.hero-title em::before {
  top: 0.18em !important;
  bottom: 0.05em !important;
}

.production-banner em,
.contact-headline em {
  transform: rotate(-1.5deg) !important;
}

@media (max-width: 980px) {
  :where(.hero-title, .section-title, .production-banner, .contact-headline)
    em {
    padding: 0.04em 0.1em 0.1em !important;
    margin-inline: 0.02em !important;
    text-shadow: 2px 2px 0 #d6a738 !important;
  }

  :where(.hero-title, .section-title, .production-banner, .contact-headline)
    em::before {
    left: -0.05em !important;
    right: -0.05em !important;
    top: 0.17em !important;
    bottom: 0.04em !important;
    box-shadow: 5px 5px 0 #000 !important;
  }
}

/* =========================================================
   MOBILE ONLY REDO — clean responsive layout + hamburger menu
   Desktop remains handled by the original styles above.
   ========================================================= */
.nav-burger,
.mobile-nav-overlay,
.mobile-nav-panel {
  display: none;
}

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
  }

  body.mobile-menu-open {
    overflow: hidden;
    touch-action: none;
  }


  .noise,
  .vignette {
    opacity: 0.45;
  }

  .nav {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 64px !important;
    transform: none !important;
    padding: 8px 10px 8px 12px !important;
    gap: 10px !important;
    border-radius: 0 !important;
    background: rgba(10, 10, 10, 0.82) !important;
    border: 1px solid rgba(239, 234, 226, 0.16) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
  }

  .nav::before {
    display: none !important;
  }

  .nav-logo {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden;
  }

  .nav-logo-img {
    width: auto !important;
    height: 42px !important;
    max-width: min(52vw, 190px) !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: drop-shadow(0 0 12px rgba(214, 167, 56, 0.35)) !important;
  }

  .nav-links,
  .nav-cta {
    display: none !important;
  }

  .nav-burger {
    display: inline-flex !important;
    position: relative;
    z-index: 130;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(239, 234, 226, 0.22);
    border-radius: 0 !important;
    background: rgba(239, 234, 226, 0.08);
    color: var(--fg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .nav-burger span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 0 !important;
    background: currentColor;
    transition: transform 220ms ease, opacity 180ms ease;
  }

  .nav.is-menu-open .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav.is-menu-open .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .nav.is-menu-open .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block !important;
    pointer-events: none;
    opacity: 0;
    background: rgba(0, 0, 0, 0.66);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: opacity 220ms ease;
  }

  .mobile-nav-overlay.is-visible {
    pointer-events: auto;
    opacity: 1;
  }

  .mobile-nav-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1001;
    display: flex !important;
    width: min(86vw, 360px);
    min-width: 280px;
    height: 100dvh;
    flex-direction: column;
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
      radial-gradient(circle at 20% 0%, rgba(214, 167, 56, 0.22), transparent 36%),
      linear-gradient(180deg, rgba(26, 26, 26, 0.98), rgba(8, 8, 8, 0.98));
    color: var(--fg);
    border-left: 1px solid rgba(239, 234, 226, 0.14);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.52);
    transform: translateX(104%);
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .mobile-nav-panel.is-visible {
    transform: translateX(0);
  }

  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(239, 234, 226, 0.12);
  }

  .mobile-nav-logo {
    width: min(54vw, 190px);
    height: 48px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 12px rgba(214, 167, 56, 0.32));
  }

  .mobile-nav-close {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(239, 234, 226, 0.18);
    border-radius: 0 !important;
    background: rgba(239, 234, 226, 0.08);
    color: var(--fg);
  }

  .mobile-nav-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 2px;
    border-radius: 0 !important;
    background: currentColor;
  }

  .mobile-nav-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .mobile-nav-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .mobile-nav-links {
    display: grid;
    gap: 10px;
    padding: 22px 0;
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 15px 16px;
    border: 1px solid rgba(239, 234, 226, 0.12);
    border-radius: 0 !important;
    background: rgba(239, 234, 226, 0.055);
    color: var(--fg);
    text-decoration: none;
    font-family: var(--display);
    font-size: clamp(21px, 6vw, 30px);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .mobile-nav-link::after {
    content: "↗";
    font-family: var(--mono);
    font-size: 15px;
    color: var(--gold);
    margin-left: 12px;
  }

  .mobile-nav-link.is-active {
    color: #0a0a0a;
    background: var(--gold);
    border-color: var(--gold);
  }

  .mobile-nav-link.is-active::after {
    color: #0a0a0a;
  }

  .mobile-nav-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 16px 18px;
    border-radius: 0 !important;
    background: var(--fg);
    color: #0a0a0a;
    text-decoration: none;
    font-family: var(--display);
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }

  .hero-v3 {
    display: flex !important;
    min-height: auto !important;
    padding: 116px 16px 64px !important;
    flex-direction: column !important;
    gap: 28px;
  }

  .hero-inner {
    width: 100% !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero-kicker {
    margin-bottom: 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    line-height: 1.2 !important;
  }

  .hero-title {
    max-width: 100% !important;
    font-size: clamp(48px, 16vw, 72px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.055em !important;
    text-wrap: balance;
    overflow-wrap: normal !important;
  }

  .hero-title .word,
  .hero-title .word > span,
  .hero-title em {
    display: inline-block;
    max-width: 100%;
  }

  .hero-title .word > span {
    -webkit-text-stroke: 0.7px #000 !important;
    text-shadow: 2px 2px 0 #000 !important;
  }

  .hero-title em {
    padding: 0.02em 0.08em 0.08em !important;
    transform: rotate(-1deg) !important;
  }

  .hero-bottom {
    margin-top: 22px !important;
    display: grid !important;
    gap: 18px !important;
  }

  .hero-sub,
  .section-sub,
  .service-scrap p,
  .process-desc,
  .ff-label,
  .form-status {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .hero-cta-wrap,
  .btn-primary {
    width: 100%;
  }

  .btn-primary {
    min-height: 54px;
    justify-content: center;
    padding: 16px 20px !important;
    font-size: 15px !important;
    letter-spacing: 0.06em !important;
  }

  .hero-bg {
    position: relative !important;
    inset: auto !important;
    order: 2;
    width: 100% !important;
    height: clamp(230px, 66vw, 330px) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 8px solid #efeae2 !important;
    transform: none !important;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4) !important;
  }

  .hero-photo-stack {
    display: none !important;
  }

  .ticker {
    z-index: 1 !important;
    transform: none !important;
    margin-top: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34) !important;
  }

  .ticker-track,
  .ticker-track > span {
    gap: 28px !important;
  }

  .ticker-track {
    font-size: clamp(22px, 7.5vw, 34px) !important;
    line-height: 1 !important;
  }

  .section,
  .solution-v3,
  .artists-v3,
  .festivals-v3,
  .process-v3,
  .contact-v3 {
    width: 100% !important;
    padding: 78px 16px !important;
  }

  .section-tag {
    margin-bottom: 16px !important;
    font-size: 10px !important;
  }

  .section-title,
  .contact-headline,
  .form-v3 .form-box-title {
    max-width: 100% !important;
    font-size: clamp(36px, 11.5vw, 58px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .section-title br {
    display: none;
  }

  .section-title--two-lines {
    display: grid !important;
    gap: 2px;
    width: 100% !important;
    white-space: normal !important;
  }

  .section-title--two-lines span {
    display: block;
  }

  .solution-v3 .section-title br,
  .process-v3 .section-title br {
    display: block;
  }

  .solution-logo-bg {
    width: min(70vw, 280px) !important;
    right: -14vw !important;
    top: 96px !important;
    opacity: 0.13 !important;
    transform: rotate(-8deg) !important;
    z-index: 0 !important;
  }

  .solution-v3 .v3-head,
  .service-editorial,
  .artist-wall,
  .festival-wall,
  .process-v3-flow,
  .contact-v3,
  .footer-cols {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .service-editorial,
  .contact-v3 {
    gap: 26px !important;
  }

  .service-big-photo,
  .contact-poster {
    min-height: clamp(260px, 78vw, 360px) !important;
    border-radius: 0 !important;
    clip-path: none !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.38) !important;
    transform: none !important;
  }

  .service-big-photo img,
  .contact-poster img,
  .festival-poster img,
  .artist-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .service-stack,
  .artist-wall,
  .festival-wall {
    gap: 18px !important;
  }

  .service-scrap,
  .process-v3-tile,
  .form-v3,
  .footer-col {
    clip-path: none !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  .service-scrap,
  .service-scrap:hover {
    padding: 24px 20px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32) !important;
  }

  .service-scrap h3,
  .process-v3-tile .process-title {
    font-size: clamp(30px, 10vw, 46px) !important;
    line-height: 0.98 !important;
    overflow-wrap: normal !important;
  }

  .artist-wall {
    grid-template-columns: 1fr !important;
  }

  .artist-poster,
  .artist-poster.reveal,
  .artist-poster.reveal.in,
  .artist-poster.reveal.in:hover {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  .artist-polaroid {
    padding: 10px 10px 18px !important;
    border-radius: 0 !important;
  }

  .artist-photo {
    height: clamp(260px, 86vw, 380px) !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }

  .artist-poster h3 {
    font-size: clamp(25px, 8.5vw, 38px) !important;
    line-height: 1 !important;
    margin: 10px 0 0 !important;
    overflow-wrap: anywhere;
  }

  .artist-poster figcaption {
    min-height: auto !important;
    padding: 0 4px !important;
  }

  .festival-wall {
    grid-template-columns: 1fr !important;
  }

  .festival-poster:nth-child(n),
  .festival-poster {
    height: clamp(260px, 78vw, 390px) !important;
    clip-path: none !important;
    border-radius: 0 !important;
    transform: none !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36) !important;
  }

  .festival-label {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
  }

  .festival-label h3 {
    font-size: clamp(30px, 10vw, 48px) !important;
    line-height: 0.95 !important;
    overflow-wrap: anywhere;
  }

  .festival-label span {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .process-v3-flow {
    gap: 18px !important;
  }

  .process-v3-tile {
    min-height: auto !important;
    padding: 64px 20px 24px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
  }

  .process-graffiti-arrow {
    display: grid;
    place-items: center;
    height: 46px;
    font-size: 40px !important;
    line-height: 1;
    transform: rotate(90deg) !important;
  }

  .contact-v3 {
    align-items: stretch !important;
  }

  .form-v3,
  .form-v3:hover,
  .form-v3:focus-within {
    width: 100% !important;
    padding: 24px 18px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
  }

  .form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .ff-input {
    min-height: 50px !important;
    font-size: 16px !important;
  }

  .form-cta {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .footer {
    padding: 58px 16px 28px !important;
  }

  .footer::before {
    height: 70px !important;
    inset-inline: 16px !important;
  }

  .footer-cols {
    gap: 14px !important;
  }

  .footer-col {
    padding: 22px 18px !important;
  }

  .footer-bottom {
    display: grid !important;
    gap: 14px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .footer-bottom div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
}

@media (max-width: 390px) {
  .nav-logo-img {
    max-width: 48vw !important;
    height: 38px !important;
  }

  .nav-burger {
    width: 42px;
    height: 42px;
  }

  .hero-title {
    font-size: clamp(43px, 15vw, 58px) !important;
  }

  .section-title,
  .contact-headline,
  .form-v3 .form-box-title {
    font-size: clamp(33px, 10.5vw, 48px) !important;
  }

  .mobile-nav-panel {
    width: min(90vw, 340px);
    padding-inline: 14px;
  }
}

/* =========================================================
   MOBILE/TABLET IDENTITY RESTORE — max-width 1024px only
   Desktop >= 1025px remains untouched.
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --mobile-step: all 0.15s steps(3, end);
    --mobile-paper: #fff4d8;
    --mobile-paper-2: #f2db9b;
    --mobile-brown: #8a5f24;
    --mobile-ink: #070604;
  }

  html,
  body {
    overflow-x: clip !important;
  }

  .section,
  .artists,
  .festivals,
  .process,
  .contact,
  .solution-v3,
  .artists-v3,
  .festivals-v3,
  .process-v3,
  .contact-v3,
  .footer {
    overflow-x: clip !important;
  }

  /* GLOBAL MOBILE: remove soft rounded shapes and recover brutalist scraps */
  :where(
    .nav,
    .nav-burger,
    .mobile-nav-panel,
    .mobile-nav-link,
    .mobile-nav-cta,
    .service-scrap,
    .artist-poster,
    .artist-polaroid,
    .artist-photo,
    .festival-poster,
    .process-v3-tile,
    .form-v3,
    .ff-input,
    .footer-col,
    .footer-bottom,
    .btn-primary
  ) {
    border-radius: 0 !important;
  }

  /* HEADER + BURGER */
  .nav {
    min-height: 66px !important;
    padding: 9px 12px 9px 14px !important;
    background:
      linear-gradient(90deg, rgba(255, 244, 216, 0.76), rgba(255, 244, 216, 0.64)),
      repeating-linear-gradient(0deg, rgba(7, 6, 4, 0.065) 0 1px, transparent 1px 7px) !important;
    color: var(--mobile-ink) !important;
    border: 2px solid rgba(7, 6, 4, 0.52) !important;
    clip-path: polygon(0 10%, 7% 0, 31% 5%, 54% 0, 83% 6%, 100% 1%, 98% 88%, 91% 100%, 62% 96%, 32% 100%, 0 92%) !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.78) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
  }

  .nav-logo {
    color: var(--mobile-ink) !important;
  }

  .nav-logo-img {
    filter: drop-shadow(2px 2px 0 #000) !important;
  }

  .nav-burger {
    width: 52px !important;
    height: 44px !important;
    border: 2px solid #000 !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 38%),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 6px),
      #d6a738 !important;
    color: #070604 !important;
    box-shadow: 5px 5px 0 #000 !important;
    clip-path: polygon(0 8%, 12% 0, 100% 6%, 95% 100%, 5% 94%) !important;
    transition: var(--mobile-step) !important;
  }

  .nav-burger span {
    width: 24px !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: currentColor !important;
    transition: transform 0.15s steps(3, end), opacity 0.15s steps(3, end) !important;
  }

  .nav.is-menu-open .nav-burger {
    transform: translate(-2px, -2px) rotate(-1deg) !important;
    box-shadow: 7px 7px 0 #000 !important;
  }

  .nav.is-menu-open .nav-burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  .nav.is-menu-open .nav-burger span:nth-child(2) {
    opacity: 0 !important;
  }

  .nav.is-menu-open .nav-burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* BURGER MENU: paper sheet + post-its */
  .mobile-nav-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
    transition: opacity 0.15s steps(3, end) !important;
  }

  .mobile-nav-panel {
    inset: 16px 14px 18px 14px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 34px) !important;
    padding: calc(22px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.62), transparent 24%),
      repeating-linear-gradient(0deg, rgba(80, 55, 18, 0.045) 0 1px, transparent 1px 9px),
      var(--mobile-paper) !important;
    color: var(--mobile-ink) !important;
    border: 3px solid #000 !important;
    box-shadow: 14px 16px 0 #000, 0 26px 80px rgba(0, 0, 0, 0.46) !important;
    clip-path: polygon(1% 0, 99% 2%, 100% 96%, 94% 100%, 5% 98%, 0 5%) !important;
    transform: translateX(108%) rotate(-1deg) !important;
    transition: transform 0.18s steps(3, end) !important;
  }

  .mobile-nav-panel.is-visible {
    transform: translateX(0) rotate(-1deg) !important;
  }

  .mobile-nav-head {
    border-bottom: 0 !important;
    padding-bottom: 12px !important;
  }

  .mobile-nav-logo {
    filter: drop-shadow(3px 3px 0 #000) !important;
  }

  .mobile-nav-close {
    width: 48px !important;
    height: 40px !important;
    border: 2px solid #000 !important;
    background: #d6a738 !important;
    color: #000 !important;
    box-shadow: 5px 5px 0 #000 !important;
    clip-path: polygon(0 10%, 100% 0, 94% 100%, 7% 92%) !important;
    transition: var(--mobile-step) !important;
  }

  .mobile-nav-close span {
    border-radius: 0 !important;
    transition: var(--mobile-step) !important;
  }

  .mobile-nav-links {
    gap: 14px !important;
    padding: 24px 0 18px !important;
  }

  .mobile-nav-link {
    min-height: 58px !important;
    justify-content: center !important;
    border: 2px solid #000 !important;
    color: #070604 !important;
    box-shadow: 6px 6px 0 #000 !important;
    font-size: clamp(25px, 8vw, 38px) !important;
    letter-spacing: -0.05em !important;
    text-align: center !important;
    transition: var(--mobile-step) !important;
  }

  .mobile-nav-link::after {
    display: none !important;
  }

  .mobile-nav-link:nth-child(1) {
    background: #fff0ad !important;
    transform: rotate(2deg) !important;
  }

  .mobile-nav-link:nth-child(2) {
    background: #e5b848 !important;
    transform: rotate(-3deg) !important;
  }

  .mobile-nav-link:nth-child(3) {
    background: #f4d06f !important;
    transform: rotate(1deg) !important;
  }

  .mobile-nav-link:nth-child(4) {
    background: #c9922d !important;
    transform: rotate(-2deg) !important;
  }

  .mobile-nav-link.is-active {
    background: #070604 !important;
    color: #fff4d8 !important;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:focus-visible {
    transform: translate(-2px, -2px) rotate(0deg) !important;
    box-shadow: 8px 8px 0 #000 !important;
  }

  .mobile-nav-cta {
    margin-top: auto !important;
    min-height: 62px !important;
    background: var(--mobile-brown) !important;
    color: #fff4d8 !important;
    border: 2px solid #000 !important;
    box-shadow: 7px 7px 0 #000 !important;
    transform: rotate(1.6deg) !important;
    clip-path: polygon(0 0, 5% 12%, 0 24%, 5% 36%, 0 48%, 5% 60%, 0 72%, 5% 84%, 0 100%, 100% 100%, 95% 84%, 100% 72%, 95% 60%, 100% 48%, 95% 36%, 100% 24%, 95% 12%, 100% 0) !important;
    transition: var(--mobile-step) !important;
  }

  /* SERVICES */
  .solution-logo-bg,
  .service-big-photo {
    display: none !important;
  }

  .service-editorial {
    display: block !important;
  }

  .service-stack {
    display: grid !important;
    gap: 18px !important;
  }

  .service-scrap,
  .service-scrap:hover {
    padding: 30px 22px 32px !important;
    border: 3px solid #000 !important;
    box-shadow: 9px 9px 0 #000 !important;
    overflow: visible !important;
  }

  .service-scrap--1 {
    clip-path: polygon(0 4%, 97% 0, 100% 88%, 92% 100%, 5% 97%) !important;
  }

  .service-scrap--2 {
    clip-path: polygon(4% 0, 100% 5%, 96% 100%, 0 93%) !important;
  }

  .service-scrap--3 {
    clip-path: polygon(0 0, 94% 4%, 100% 96%, 8% 100%, 2% 74%) !important;
  }

  .service-scrap h3,
  .service-scrap p {
    position: relative !important;
    z-index: 2 !important;
  }

  /* ARTISTS: clothesline horizontal carousel */
  .artists-v3 {
    padding-inline: 0 !important;
    overflow: hidden !important;
  }

  .artists-inner {
    padding-inline: 18px !important;
  }

  .artist-wall {
    position: relative !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 22px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 46px 18px 30px !important;
    margin-inline: -18px !important;
  }

  .artist-wall::-webkit-scrollbar {
    display: none !important;
  }

  .artist-wall::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #8a5f24 8%, #8a5f24 92%, transparent) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
    z-index: 4;
    pointer-events: none;
  }

  .artist-poster,
  .artist-poster.reveal,
  .artist-poster.reveal.in,
  .artist-poster.reveal.in:hover {
    flex: 0 0 min(76vw, 310px) !important;
    width: min(76vw, 310px) !important;
    scroll-snap-align: center !important;
    min-height: 380px !important;
    aspect-ratio: 4 / 5.35 !important;
    padding: 12px 12px 0 !important;
    background: #fff8e9 !important;
    border: 3px solid #000 !important;
    box-shadow: 10px 10px 0 #000 !important;
    clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%) !important;
    transform: rotate(var(--artist-mobile-tilt, -1deg)) !important;
    overflow: visible !important;
  }

  .artist-poster:nth-child(3n + 1) { --artist-mobile-tilt: -1.2deg; }
  .artist-poster:nth-child(3n + 2) { --artist-mobile-tilt: 1deg; }
  .artist-poster:nth-child(3n) { --artist-mobile-tilt: -0.4deg; }

  .artist-poster::before,
  .artist-poster::after {
    content: "";
    position: absolute;
    top: -22px;
    width: 18px;
    height: 46px;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.22), transparent 40%),
      #c79a58;
    border: 2px solid #5c3915;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.62);
    z-index: 6;
    pointer-events: none;
  }

  .artist-poster::before {
    left: calc(50% - 26px);
    transform: rotate(-7deg);
  }

  .artist-poster::after {
    left: calc(50% + 8px);
    transform: rotate(5deg);
  }

  .artist-poster:nth-child(2n)::before { transform: rotate(6deg); }
  .artist-poster:nth-child(2n)::after { transform: rotate(-4deg); }

  .artist-poster .tape {
    display: none !important;
  }

  .artist-polaroid {
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .artist-photo {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    clip-path: polygon(0 1%, 100% 0, 98% 100%, 2% 98%) !important;
  }

  .artist-poster img,
  .artist-photo img {
    filter: grayscale(0) contrast(1.06) saturate(1.04) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .artist-poster figcaption {
    min-height: 82px !important;
    padding: 14px 4px 18px !important;
  }

  /* FESTIVALS */
  .festival-wall {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .festival-poster,
  .festival-poster:nth-child(n) {
    height: clamp(330px, 86vw, 460px) !important;
    border: 3px solid #000 !important;
    box-shadow: 10px 10px 0 #000 !important;
    overflow: hidden !important;
    transform: rotate(var(--festival-mobile-tilt, -1deg)) !important;
  }

  .festival-poster:nth-child(1) {
    --festival-mobile-tilt: -1deg;
    clip-path: polygon(0 5%, 96% 0, 100% 88%, 92% 100%, 4% 96%) !important;
  }

  .festival-poster:nth-child(2) {
    --festival-mobile-tilt: 1deg;
    clip-path: polygon(4% 0, 100% 4%, 96% 100%, 0 92%) !important;
  }

  .festival-poster:nth-child(3) {
    --festival-mobile-tilt: -0.5deg;
    clip-path: polygon(0 0, 94% 2%, 100% 96%, 9% 100%, 2% 74%) !important;
  }

  .festival-poster:nth-child(4) {
    --festival-mobile-tilt: 0.8deg;
    clip-path: polygon(3% 4%, 100% 0, 97% 93%, 86% 100%, 0 96%) !important;
  }

  .festival-poster img {
    filter: grayscale(0) contrast(1.1) saturate(1.04) !important;
    opacity: 1 !important;
  }

  /* PROCESS: text visible */
  .process-v3-flow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  .process-v3-tile,
  .process-v3-tile:nth-of-type(n),
  .process-v3-tile:hover {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 70px 22px 28px !important;
    overflow: visible !important;
    border: 3px solid #000 !important;
    box-shadow: 10px 10px 0 #000 !important;
    transform: rotate(var(--process-mobile-tilt, -0.8deg)) !important;
  }

  .process-v3-tile:nth-of-type(1) {
    --process-mobile-tilt: -1deg;
    clip-path: polygon(0 3%, 98% 0, 100% 86%, 94% 100%, 5% 97%) !important;
  }

  .process-v3-tile:nth-of-type(2) {
    --process-mobile-tilt: 0.7deg;
    clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 94%) !important;
  }

  .process-v3-tile:nth-of-type(3) {
    --process-mobile-tilt: -0.4deg;
    clip-path: polygon(0 0, 93% 4%, 100% 96%, 8% 100%, 2% 76%) !important;
  }

  .process-v3-tile .process-title,
  .process-v3-tile .process-desc,
  .process-sticker {
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .process-v3-tile .process-desc {
    margin-top: 16px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: currentColor !important;
    max-width: none !important;
  }

  .process-graffiti-arrow {
    display: grid !important;
  }

  /* CONTACT + FOOTER */
  .contact-poster {
    display: none !important;
  }

  .contact-v3 {
    display: block !important;
  }

  .form-v3,
  .form-v3:hover,
  .form-v3:focus-within {
    width: 100% !important;
    padding: 30px 20px 28px !important;
    transform: rotate(-0.6deg) !important;
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.6), transparent 28%),
      repeating-linear-gradient(0deg, rgba(80, 55, 18, 0.04) 0 1px, transparent 1px 9px),
      #fff8e9 !important;
    border: 3px solid #000 !important;
    box-shadow: 10px 12px 0 #000 !important;
    clip-path: polygon(1% 0, 99% 1%, 100% 97%, 94% 100%, 4% 98%, 0 4%) !important;
    overflow: visible !important;
  }

  .form-grid {
    gap: 16px !important;
  }

  .ff-input {
    padding: 12px 4px 13px !important;
  }

  .footer-cols {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .footer-col,
  .footer-col:nth-child(n) {
    padding: 28px 22px !important;
    border: 3px solid #000 !important;
    box-shadow: 8px 8px 0 #000 !important;
    overflow: visible !important;
    transform: rotate(var(--footer-mobile-tilt, -0.6deg)) !important;
  }

  .footer-col:nth-child(1) {
    --footer-mobile-tilt: -0.8deg;
    clip-path: polygon(0 3%, 98% 0, 100% 92%, 94% 100%, 4% 97%) !important;
  }

  .footer-col:nth-child(2) {
    --footer-mobile-tilt: 0.7deg;
    clip-path: polygon(3% 0, 100% 5%, 96% 100%, 0 94%) !important;
  }

  .footer-col:nth-child(3) {
    --footer-mobile-tilt: -0.4deg;
    clip-path: polygon(0 0, 95% 3%, 100% 96%, 8% 100%, 2% 76%) !important;
  }

  .footer-bottom {
    border-radius: 0 !important;
    clip-path: polygon(1% 0, 100% 7%, 98% 100%, 0 92%) !important;
  }
}

/* =========================================================
   MOBILE/TABLET FINAL FIX — strict max-width 1024px only
   Desktop >= 1025px remains untouched.
   ========================================================= */
@media (max-width: 1024px) {
  /* Absolute mobile rule: no rounded corners anywhere in the UI */
  *,
  *::before,
  *::after {
    border-radius: 0 !important;
  }

  /* HEADER: logo visible, left aligned, no clipping */
  .nav {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 74px !important;
    padding: 10px 14px 10px 18px !important;
    overflow: visible !important;
    clip-path: polygon(0 9%, 8% 0, 34% 5%, 58% 0, 86% 6%, 100% 2%, 98% 90%, 90% 100%, 61% 96%, 30% 100%, 0 92%) !important;
  }

  .nav-logo {
    margin-right: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .nav-logo-img {
    display: block !important;
    height: clamp(42px, 11vw, 58px) !important;
    width: auto !important;
    max-width: clamp(118px, 36vw, 190px) !important;
    object-fit: contain !important;
    overflow: visible !important;
  }

  .nav-burger {
    flex: 0 0 52px !important;
    margin-left: auto !important;
  }

  /* ARTISTS: straight polaroids + one visible peg + full-length rope */
  .artists-v3,
  .artists-inner {
    overflow: visible !important;
  }

  .artist-wall {
    position: relative !important;
    display: flex !important;
    width: auto !important;
    min-width: max-content !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 52px 22px 34px !important;
    margin-inline: 0 !important;
    gap: 24px !important;
    scroll-snap-type: x mandatory !important;
    isolation: isolate !important;
  }

  .artist-wall::before {
    content: "" !important;
    position: absolute !important;
    left: -100vw !important;
    right: -100vw !important;
    top: 30px !important;
    width: auto !important;
    min-width: calc(100% + 200vw) !important;
    height: 3px !important;
    background: #8a5f24 !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .artist-poster,
  .artist-poster.reveal,
  .artist-poster.reveal.in,
  .artist-poster.reveal.in:hover,
  .artist-poster:hover {
    flex: 0 0 min(76vw, 315px) !important;
    width: min(76vw, 315px) !important;
    min-height: 382px !important;
    aspect-ratio: 4 / 5.35 !important;
    scroll-snap-align: center !important;
    overflow: visible !important;
    clip-path: none !important;
    background: #fff8e9 !important;
    border: 3px solid #000 !important;
    box-shadow: 10px 10px 0 #000 !important;
    transform: rotate(var(--artist-mobile-tilt, -1deg)) !important;
    z-index: 3 !important;
  }

  .artist-poster:nth-child(3n + 1) { --artist-mobile-tilt: -1.4deg; }
  .artist-poster:nth-child(3n + 2) { --artist-mobile-tilt: 1.1deg; }
  .artist-poster:nth-child(3n) { --artist-mobile-tilt: -0.35deg; }

  .artist-poster::after {
    display: none !important;
    content: none !important;
  }

  .artist-poster::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -33px !important;
    width: 20px !important;
    height: 50px !important;
    transform: translateX(-50%) rotate(var(--peg-rotate, -5deg)) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 42%),
      #c79a58 !important;
    border: 2px solid #5c3915 !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.68) !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .artist-poster:nth-child(3n + 1)::before { --peg-rotate: -7deg; }
  .artist-poster:nth-child(3n + 2)::before { --peg-rotate: 6deg; }
  .artist-poster:nth-child(3n)::before { --peg-rotate: -2deg; }

  .artist-polaroid {
    overflow: visible !important;
    clip-path: none !important;
  }

  .artist-photo {
    overflow: hidden !important;
    clip-path: none !important;
  }

  .artist-poster img,
  .artist-photo img {
    filter: grayscale(0) contrast(1.06) saturate(1.04) !important;
  }

  .artist-poster .tape,
  .artist-poster .tape-a,
  .artist-poster .tape-b {
    display: none !important;
  }

  /* PROCESS: decorative star behind title, tighter tiles, visible labels */
  .process-v3 {
    overflow: visible !important;
  }

  .process-v3::before {
    display: grid !important;
    width: clamp(46px, 15vw, 72px) !important;
    height: clamp(46px, 15vw, 72px) !important;
    font-size: clamp(34px, 11vw, 54px) !important;
    right: 18px !important;
    top: clamp(88px, 12vw, 128px) !important;
    z-index: 0 !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
  }

  .process-v3 > .section-title,
  .process-v3 > .section-sub,
  .process-v3-flow {
    position: relative !important;
    z-index: 2 !important;
  }

  .process-v3-flow {
    gap: 18px !important;
  }

  .process-v3-tile,
  .process-v3-tile:nth-of-type(n),
  .process-v3-tile:hover {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 22px 26px !important;
    gap: 14px !important;
    overflow: visible !important;
    transform: rotate(var(--process-mobile-tilt, -0.8deg)) !important;
  }

  .process-sticker,
  .process-v3-tile .process-sticker {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: inline-block !important;
    width: fit-content !important;
    max-width: calc(100% - 8px) !important;
    margin: 0 0 10px 0 !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
    overflow: visible !important;
    z-index: 4 !important;
  }

  .process-v3-tile .process-title {
    margin: 0 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .process-v3-tile .process-desc {
    margin: 0 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* CONTACT: mobile form must be a regular straight rectangle */
  .form-v3,
  .form-v3:hover,
  .form-v3:focus-within {
    clip-path: none !important;
    transform: rotate(-0.6deg) !important;
    overflow: visible !important;
    padding: 30px 20px 28px !important;
  }

  /* Footer brutalist shapes keep content visible */
  .footer-col,
  .footer-bottom {
    overflow: visible !important;
    padding-inline: 22px !important;
  }
}


/* =========================================================
   FINAL TOUCH DEVICE + MOBILE/TABLET FIXES
   ========================================================= */
@media (pointer: coarse) {
  .cursor,
  .cursor-dot {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body {
    cursor: auto !important;
  }
}

@media (max-width: 1024px) {
  .artist-wall {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    overscroll-behavior-x: contain !important;
  }

  .artist-poster:last-child {
    margin-right: 0 !important;
  }

  .artist-poster,
  .artist-polaroid {
    overflow: visible !important;
  }

  .artist-poster::before,
  .artist-poster .tape,
  .artist-poster .tape-a,
  .artist-poster .tape-b {
    z-index: 60 !important;
  }

  .artist-wall::before {
    z-index: 10 !important;
  }

  .artist-photo,
  .artist-photo img,
  .artist-poster figcaption {
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-nav-link,
  .mobile-nav-cta {
    font-family: 'Archivo Black', sans-serif !important;
  }
}

/* =========================================================
   LARGE DESKTOP / 4K RESPONSIVE PASS
   Applies only to very wide screens. Mobile/tablet rules stay untouched.
   ========================================================= */
@media (min-width: 1920px) {
  :root {
    --wide-max: 1880px;
    --wide-pad: clamp(48px, 4vw, 96px);
  }

  .nav {
    max-width: 1680px;
    padding-inline: 28px 22px;
  }

  .nav-logo-img {
    height: 52px;
  }

  .nav-links {
    gap: 44px;
  }

  .nav-link,
  .nav-cta {
    font-size: 15px;
  }

  .section,
  .artists-inner,
  .v3-head,
  .service-editorial,
  .artist-wall,
  .festival-wall,
  .process-v3-flow,
  .contact,
  .footer-cols {
    max-width: var(--wide-max);
  }

  .section,
  .solution-v3,
  .artists-v3,
  .festivals-v3,
  .process-v3,
  .contact-v3,
  .contact {
    padding-left: var(--wide-pad);
    padding-right: var(--wide-pad);
  }

  .section,
  .solution-v3,
  .artists-v3,
  .festivals-v3,
  .process-v3,
  .contact-v3,
  .contact {
    padding-top: clamp(170px, 8vw, 230px);
    padding-bottom: clamp(170px, 8vw, 230px);
  }

  .hero {
    min-height: 108vh;
    padding-left: var(--wide-pad);
    padding-right: var(--wide-pad);
    padding-bottom: clamp(90px, 5vw, 140px);
  }

  .hero-inner {
    max-width: 1080px;
  }

  .hero-title {
    font-size: clamp(172px, 9.6vw, 260px);
  }

  .hero-sub {
    max-width: 620px;
    font-size: 22px;
  }

  .hero-bottom {
    gap: 110px;
  }

  .hero-bg {
    inset: 150px var(--wide-pad) 110px 50%;
  }

  .hero-photo-stack {
    right: clamp(80px, 7vw, 160px);
    width: clamp(620px, 34vw, 820px);
  }

  .hero-polaroid {
    width: clamp(260px, 15vw, 390px);
  }

  .ticker-track {
    font-size: clamp(58px, 3.8vw, 86px);
  }

  .section-title {
    font-size: clamp(108px, 5.6vw, 160px);
  }

  .section-sub {
    max-width: 760px;
    font-size: 21px;
  }

  .v3-head {
    grid-template-columns: 1fr 0.68fr;
    gap: 84px;
    margin-bottom: 86px;
  }

  .service-editorial {
    gap: 52px;
    grid-template-columns: 1fr 1.08fr;
  }

  .service-big-photo {
    min-height: 760px;
  }

  .service-stack {
    gap: 28px;
  }

  .service-scrap {
    padding: 44px 44px 48px;
  }

  .service-scrap h3 {
    font-size: clamp(70px, 3.8vw, 106px);
  }

  .service-scrap p {
    font-size: 19px;
  }

  .artist-wall {
    gap: 36px;
  }

  .artist-poster {
    min-height: 560px;
  }

  .artist-poster h3 {
    font-size: clamp(74px, 4vw, 120px);
    left: 30px;
    right: 30px;
    bottom: 30px;
  }

  .festival-wall {
    gap: 34px;
  }

  .festival-poster {
    height: 720px;
  }

  .festival-label h3 {
    font-size: clamp(76px, 3.8vw, 118px);
  }

  .process-v3-flow {
    gap: 36px;
  }

  .process-v3-tile {
    min-height: 430px;
    padding: 48px 44px;
  }

  .process-title {
    font-size: clamp(58px, 3.1vw, 92px);
  }

  .process-desc {
    font-size: 19px;
  }

  .process-graffiti-arrow {
    font-size: 112px;
  }

  .contact-v3 {
    grid-template-columns: 0.82fr 1fr;
    gap: 60px;
  }

  .contact-poster {
    min-height: 820px;
  }

  .form-v3 {
    max-width: 1080px !important;
    padding: 54px !important;
  }

  .form-v3 .form-box-title {
    font-size: clamp(78px, 3.8vw, 116px);
  }

  .ff-label,
  .form-status {
    font-size: 14px;
  }

  .ff-input {
    font-size: 18px;
    padding: 18px 6px 19px;
  }

  .footer {
    padding-left: var(--wide-pad) !important;
    padding-right: var(--wide-pad) !important;
  }

  .footer-cols {
    gap: 34px !important;
  }
}

@media (min-width: 2560px) {
  :root {
    --wide-max: 2260px;
    --wide-pad: clamp(96px, 5vw, 160px);
  }

  .nav {
    max-width: 2040px;
  }

  .hero-inner {
    max-width: 1280px;
  }

  .hero-title {
    font-size: clamp(230px, 8.6vw, 330px);
  }

  .hero-sub {
    font-size: 25px;
    max-width: 760px;
  }

  .hero-bg {
    inset: 170px var(--wide-pad) 130px 49%;
  }

  .section-title {
    font-size: clamp(148px, 5vw, 210px);
  }

  .section-sub,
  .v3-head .section-sub {
    font-size: 24px;
    max-width: 880px;
  }

  .service-big-photo {
    min-height: 900px;
  }

  .artist-poster {
    min-height: 690px;
  }

  .festival-poster {
    height: 860px;
  }

  .process-v3-tile {
    min-height: 520px;
  }

  .contact-poster {
    min-height: 960px;
  }

  .form-v3 {
    max-width: 1240px !important;
  }
}

/* =========================================================
   FINAL MOBILE ARTISTS CLOTHESLINE FIX
   Real rope behind the pegs, not a decorative short line.
   ========================================================= */
@media (max-width: 1024px) {
  .artists-v3,
  .artists-v3 .artists-inner {
    overflow: visible !important;
  }

  .artist-wall-scroll {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
  }

  .artist-wall-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .artist-wall {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    grid-template-columns: none !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    gap: 24px !important;
    padding: 56px 32px 38px !important;
    margin: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
    scroll-snap-type: x mandatory !important;
  }

  .artist-wall::before {
    content: "" !important;
    position: absolute !important;
    left: 32px !important;
    right: 32px !important;
    top: 31px !important;
    height: 5px !important;
    background:
      repeating-linear-gradient(
        90deg,
        #6f4519 0 10px,
        #9b692b 10px 18px,
        #5a3715 18px 26px
      ) !important;
    border: 1px solid rgba(0, 0, 0, 0.42) !important;
    box-shadow:
      0 2px 0 rgba(0, 0, 0, 0.72),
      0 -1px 0 rgba(255, 220, 130, 0.25) inset !important;
    z-index: 12 !important;
    pointer-events: none !important;
  }

  .artist-poster,
  .artist-poster.reveal,
  .artist-poster.reveal.in,
  .artist-poster.reveal.in:hover,
  .artist-poster:hover {
    position: relative !important;
    flex: 0 0 min(76vw, 315px) !important;
    width: min(76vw, 315px) !important;
    min-width: min(76vw, 315px) !important;
    max-width: min(76vw, 315px) !important;
    min-height: 382px !important;
    aspect-ratio: 4 / 5.35 !important;
    margin: 0 !important;
    overflow: visible !important;
    scroll-snap-align: center !important;
    z-index: 20 !important;
  }

  .artist-poster::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -35px !important;
    width: 24px !important;
    height: 58px !important;
    transform: translateX(-50%) rotate(var(--peg-rotate, -5deg)) !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent 38%),
      linear-gradient(180deg, #d7a85f 0%, #b87930 100%) !important;
    border: 2px solid #4b2b0e !important;
    box-shadow:
      3px 4px 0 rgba(0, 0, 0, 0.76),
      inset -4px 0 0 rgba(80, 43, 10, 0.22) !important;
    z-index: 40 !important;
    pointer-events: none !important;
  }

  .artist-poster::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: -12px !important;
    width: 36px !important;
    height: 8px !important;
    transform: translateX(-50%) rotate(var(--peg-rotate, -5deg)) !important;
    background: rgba(42, 23, 7, 0.3) !important;
    z-index: 35 !important;
    pointer-events: none !important;
  }

  .artist-poster:nth-child(3n + 1)::before,
  .artist-poster:nth-child(3n + 1)::after { --peg-rotate: -7deg; }

  .artist-poster:nth-child(3n + 2)::before,
  .artist-poster:nth-child(3n + 2)::after { --peg-rotate: 6deg; }

  .artist-poster:nth-child(3n)::before,
  .artist-poster:nth-child(3n)::after { --peg-rotate: -2deg; }

  .artist-polaroid,
  .artist-photo {
    position: relative !important;
  }

  .artist-polaroid {
    overflow: visible !important;
    z-index: 21 !important;
  }

  .artist-photo {
    overflow: hidden !important;
    z-index: 1 !important;
  }

  .artist-poster .tape,
  .artist-poster .tape-a,
  .artist-poster .tape-b {
    display: none !important;
  }
}


/* === Ajustes HTML estático multipágina === */
.page-main { min-height: 70vh; }
.nav-link.is-active { opacity: 1; color: var(--gold); }
.static-page-hero { padding-top: 180px; padding-bottom: 36px; }
.static-page-hero .section-sub { max-width: 760px; }
.legal-content { max-width: 960px; margin: 0 auto; padding: 170px 36px 100px; }
.legal-content h1 { font-family: var(--display); font-size: clamp(44px, 8vw, 96px); line-height: .92; text-transform: uppercase; margin: 0 0 28px; }
.legal-content h2 { font-family: var(--display); text-transform: uppercase; margin-top: 40px; }
.legal-content p { color: var(--fg-dim); line-height: 1.8; }
.form-status.ok { color: #a7ffb8; }
.form-status.err { color: #ffb4a7; }
@media (max-width: 760px) { .static-page-hero { padding-top: 150px; } }