.hero.hero-collage {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--ink);
}

.hero-mosaic {
  position: absolute;
  z-index: -3;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--ink);
}

.hero-tile { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #0b1722; }
.hero-tile::after { content: ""; position: absolute; inset: 0; background: rgba(1, 8, 14, .27); }
.hero-tile img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.86) contrast(1.03); }
.hero-tile-mega::after, .hero-tile-gaming::after, .hero-tile-emporium::after { background: rgba(1, 8, 14, .13); }

.hero-tile-mega { grid-area: 1 / 1 / 4 / 7; }
.hero-tile-mega img { object-position: 50% 44%; }
.hero-tile-imperio { grid-area: 4 / 1 / 7 / 7; }
.hero-tile-imperio img { object-position: 52% 51%; }
.hero-tile-emporium { grid-area: 1 / 7 / 4 / 15; }
.hero-tile-emporium img { object-position: 52% 67%; }
.hero-tile-aviacion { grid-area: 1 / 15 / 3 / 21; }
.hero-tile-aviacion img { object-position: 50% 62%; }
.hero-tile-hall { grid-area: 4 / 7 / 7 / 11; }
.hero-tile-hall img { object-position: 50% 72%; }
.hero-tile-gaming { grid-area: 3 / 11 / 7 / 19; }
.hero-tile-gaming img { object-position: 50% 58%; }
.hero-tile-bar { grid-area: 3 / 19 / 5 / 25; }
.hero-tile-bar img { object-position: 50% 68%; }
.hero-tile-caja { grid-area: 5 / 19 / 7 / 25; }
.hero-tile-caja img { object-position: 50% 60%; }
.hero-tile-ceiling { grid-area: 7 / 1 / 9 / 4; }
.hero-tile-ceiling img { object-position: 50% 50%; }
.hero-tile-restaurant { grid-area: 7 / 4 / 9 / 9; }
.hero-tile-restaurant img { object-position: 50% 58%; }
.hero-tile-access { grid-area: 7 / 9 / 9 / 12; }
.hero-tile-access img { object-position: 50% 50%; }
.hero-tile-column { grid-area: 7 / 12 / 9 / 15; }
.hero-tile-column img { object-position: 56% 48%; }
.hero-tile-dining { grid-area: 7 / 15 / 9 / 19; }
.hero-tile-dining img { object-position: 50% 40%; }
.hero-tile-derby { grid-area: 7 / 19 / 9 / 25; }
.hero-tile-derby img { object-position: 50% 54%; }
.hero-tile-facade { grid-area: 1 / 21 / 3 / 25; }
.hero-tile-facade img { object-position: 50% 40%; }
.hero.hero-collage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 42% at 50% 49%, rgba(2, 10, 18, .94) 0%, rgba(2, 10, 18, .85) 36%, rgba(2, 10, 18, .40) 65%, transparent 100%),
    linear-gradient(180deg, rgba(2, 10, 18, .68) 0%, transparent 23%, transparent 76%, rgba(2, 10, 18, .64) 100%);
}

.hero.hero-collage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 110px 20px rgba(2, 10, 18, .38);
}

.hero-brand-lockup {
  position: absolute;
  z-index: 3;
  top: 49%;
  left: 50%;
  width: min(500px, 40vw);
  padding: 34px 28px 38px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-brand-glow {
  position: absolute;
  z-index: -1;
  inset: 13% 4%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(40, 198, 247, .16), rgba(4, 16, 29, .12) 47%, transparent 72%);
  opacity: .45;
  transform: scale(1);
  pointer-events: none;
}

.hero-brand-lockup::before,
.hero-brand-lockup::after { content: ""; display: block; width: min(210px, 55%); height: 1px; margin-inline: auto; background: linear-gradient(90deg, transparent, rgba(242, 241, 236, .55), transparent); }
.hero-brand-lockup::before { margin-bottom: 25px; }
.hero-brand-lockup::after { margin-top: 24px; }
.hero-brand-lockup img { display: block; width: min(300px, 82%); max-height: 300px; margin: 0 auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 1; }
.hero-brand-lockup p { margin: 16px 0 0; color: rgba(242, 241, 236, .7); font-size: .61rem; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; }

.hero-project-caption { position: absolute; z-index: 3; left: clamp(24px, 3vw, 52px); bottom: 30px; margin: 0; color: rgba(242, 241, 236, .68); font-size: .63rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.hero-scroll-cue { position: absolute; z-index: 3; right: clamp(24px, 3vw, 52px); bottom: 26px; display: flex; align-items: center; gap: 15px; color: rgba(242, 241, 236, .82); font-size: .63rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero-scroll-cue i { position: relative; display: block; width: 42px; height: 1px; background: rgba(242, 241, 236, .7); }
.hero-scroll-cue i::after { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-right: 1px solid rgba(242, 241, 236, .7); border-bottom: 1px solid rgba(242, 241, 236, .7); transform: rotate(-45deg); }

@media (max-width: 600px) {
  .hero.hero-collage { min-height: 680px; }
  .hero-mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(12, 1fr); gap: 2px; padding: 2px; }
  .hero-tile-aviacion, .hero-tile-caja, .hero-tile-ceiling, .hero-tile-column, .hero-tile-derby, .hero-tile-access, .hero-tile-dining { display: none; }
  .hero-tile-mega { grid-area: 1 / 1 / 4 / 3; }
  .hero-tile-mega img { object-position: 50% 43%; }
  .hero-tile-imperio { grid-area: 4 / 1 / 6 / 3; }
  .hero-tile-imperio img { object-position: 50% 54%; }
  .hero-tile-emporium { grid-area: 1 / 3 / 3 / 5; }
  .hero-tile-emporium img { object-position: 63% 62%; }
  .hero-tile-facade { grid-area: 3 / 3 / 5 / 5; }
  .hero-tile-facade img { object-position: 50% 43%; }
  .hero-tile-gaming { grid-area: 5 / 3 / 9 / 5; }
  .hero-tile-gaming img { object-position: 50% 61%; }
  .hero-tile-hall { grid-area: 6 / 1 / 9 / 3; }
  .hero-tile-hall img { object-position: 50% 70%; }
  .hero-tile-bar { grid-area: 9 / 3 / 13 / 5; }
  .hero-tile-bar img { object-position: 51% 68%; }
  .hero-tile-restaurant { grid-area: 9 / 1 / 13 / 3; }
  .hero-tile-restaurant img { object-position: 48% 58%; }

  .hero.hero-collage::before {
    background:
      radial-gradient(ellipse 85% 33% at 50% 47%, rgba(2, 10, 18, .95) 0%, rgba(2, 10, 18, .85) 42%, rgba(2, 10, 18, .30) 76%, transparent 100%),
      linear-gradient(180deg, rgba(2, 10, 18, .58) 0%, transparent 22%, transparent 78%, rgba(2, 10, 18, .7) 100%);
  }
  .hero.hero-collage::after { box-shadow: inset 0 0 72px 12px rgba(2, 10, 18, .28); }
  .hero-brand-lockup { top: 47%; width: calc(100vw - 38px); padding: 27px 16px 29px; }
  .hero-brand-lockup::before { margin-bottom: 18px; }
  .hero-brand-lockup::after { margin-top: 18px; }
  .hero-brand-lockup img { width: min(236px, 63vw); max-height: 236px; }
  .hero-brand-lockup p { font-size: .59rem; line-height: 1.6; letter-spacing: .16em; }
  .hero-project-caption { left: 20px; bottom: 21px; font-size: .59rem; }
  .hero-scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}


/* Approved full logo; the existing navigation retains its working interactions. */
.site-header .brand-mini { width: 128px; height: 56px; display: grid; place-items: center; overflow: visible; }
.site-header .brand-mini img { width: 100%; height: 54px; object-fit: contain; transform: none; filter: brightness(0) invert(1); }
.hero-brand-lockup { pointer-events: none; }
.hero-mosaic { z-index: 0; }
.hero.hero-collage::before { z-index: 1; }
.hero.hero-collage::after { z-index: 2; }
.hero-tile picture { display: block; width: 100%; height: 100%; }
.hero-tile::before { content: ""; position: absolute; z-index: 2; inset: 0; background: #020a12; opacity: 0; pointer-events: none; }
.hero-intro-pending .hero-tile::before { opacity: .94; }
.hero-intro-pending .hero-brand-lockup::before,
.hero-intro-pending .hero-brand-lockup::after,
.hero-intro-pending .hero-brand-lockup img,
.hero-intro-pending .hero-brand-lockup p,
.hero-intro-pending .hero-project-caption,
.hero-intro-pending .hero-scroll-cue { opacity: 0; }
.hero-intro-pending .hero-brand-lockup img { transform: translateY(8px) scale(.985); }
.hero-intro-pending .hero-brand-lockup p { transform: translateY(6px); }
.hero-intro-pending .hero-brand-lockup::before,
.hero-intro-pending .hero-brand-lockup::after { transform: scaleX(.3); }
.hero-intro-pending .hero-brand-glow { opacity: 0; transform: scale(.92); }

.hero-is-playing .hero-tile::before { animation: hero-light-on 920ms var(--ease-out) var(--light-delay, 0ms) both; }
.hero-is-playing .hero-tile img { animation: hero-photo-settle 1100ms var(--ease-out) var(--light-delay, 0ms) both; }
.hero-is-playing .hero-brand-glow { animation: hero-glow-on 920ms var(--ease-out) 2320ms both; }
.hero-is-playing .hero-brand-lockup::before,
.hero-is-playing .hero-brand-lockup::after { animation: hero-rule-on 720ms var(--ease-out) 2400ms both; }
.hero-is-playing .hero-brand-lockup img { animation: hero-logo-on 820ms var(--ease-out) 2440ms both; }
.hero-is-playing .hero-brand-lockup p { animation: hero-copy-on 680ms var(--ease-out) 2580ms both; }
.hero-is-playing .hero-project-caption,
.hero-is-playing .hero-scroll-cue { animation: hero-meta-on 620ms var(--ease-out) 2860ms both; }

@keyframes hero-light-on { from { opacity: .94; } to { opacity: 0; } }
@keyframes hero-photo-settle { from { transform: scale(1.02); } to { transform: scale(1); } }
@keyframes hero-glow-on { from { opacity: 0; transform: scale(.92); } to { opacity: .45; transform: scale(1); } }
@keyframes hero-rule-on { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: scaleX(1); } }
@keyframes hero-logo-on { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-copy-on { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-meta-on { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .site-header .brand-mini { width: 112px; height: 52px; }
  .site-header .brand-mini img { height: 50px; }
}
@media (max-height: 680px) {
  .hero.hero-collage { min-height: 560px; }
  .hero-brand-lockup { top: 53%; padding-block: 15px; }
  .hero-brand-lockup img { max-height: 200px; width: auto; max-width: 70%; }
  .hero-brand-lockup::before { margin-bottom: 12px; }
  .hero-brand-lockup::after { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-is-playing .hero-tile::before, .hero-is-playing .hero-tile img,
  .hero-is-playing .hero-brand-glow, .hero-is-playing .hero-brand-lockup::before,
  .hero-is-playing .hero-brand-lockup::after, .hero-is-playing .hero-brand-lockup img,
  .hero-is-playing .hero-brand-lockup p,
  .hero-is-playing .hero-project-caption, .hero-is-playing .hero-scroll-cue { animation: none !important; }
  .hero-intro-pending .hero-tile::before { opacity: 0; }
  .hero-intro-pending .hero-brand-lockup::before,
  .hero-intro-pending .hero-brand-lockup::after,
  .hero-intro-pending .hero-brand-lockup img,
  .hero-intro-pending .hero-brand-lockup p,
  .hero-intro-pending .hero-project-caption,
  .hero-intro-pending .hero-scroll-cue { opacity: 1; transform: none; }
  .hero-intro-pending .hero-brand-glow { opacity: .45; transform: none; }
}