/* Frame the supplied artwork without modifying the original image. */
.logo-badge,
.foot-logo {
  display: block;
  position: relative;
  width: 220px;
  aspect-ratio: 1088 / 338;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
}
.logo-badge img,
.foot-logo img {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}
.brand-video { background: var(--black, #0a0a0a); color: #fff; }
.brand-video h2 { color: inherit; }
.brand-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: #000;
}
.brand-video-link { display: inline-block; margin-top: 18px; text-decoration: underline; }
.brand-video-link:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 5px; }
.foot-logo { background: transparent; mix-blend-mode: normal; margin-bottom: 18px; }
.project-opening {
  height: 100svh;
  min-height: 480px;
  padding: 116px clamp(16px, 3vw, 48px) 28px;
  background: #0a0a0a;
}
.opening-frame { height: 100%; max-width: 1600px; margin-inline: auto; position: relative; }
.opening-frame::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(223,185,74,.65); pointer-events: none;
}
.opening-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero { min-height: 0; padding: clamp(64px, 8vw, 120px) 0; background: #0a0a0a; }
.hero::after { display: none; }
.hero-content { padding-block: 0; }
.hero h1 { font-size: clamp(36px, 5vw, 76px); }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(285px, .42fr); gap: clamp(32px, 5vw, 80px); }
.hero-meta { width: 100%; max-width: 390px; }
.hero-meta .meta-row { gap: 28px; }
.hero-meta .meta-row span:first-child { flex-shrink: 0; }
.hero-meta .meta-row span:last-child { text-align: right; }
#essencia .essence-item { border-color: #777; border-style: solid; }
#sobre .about-media { min-height: 0; align-self: center; background: #151515; }
#sobre .about-media img { height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
.video-player { width: 100%; aspect-ratio: 16 / 9; position: relative; background: #171717; }
.video-player iframe { position: absolute; inset: 0; height: 100%; }
.video-poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #171717; cursor: pointer; color: #fff; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; }
.video-play-label { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 16px; background: rgba(0,0,0,.24); font: 600 clamp(16px, 2vw, 24px) 'Manrope',sans-serif; }
.video-play-label span { display: grid; place-items: center; width: 60px; height: 60px; color: #111; background: var(--gold-500); }
.video-poster:hover .video-play-label { background: rgba(0,0,0,.4); }
.video-poster:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 4px; }
.cta-final .wrap { align-items: center; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.portfolio-editorial .p-item--empty {
  aspect-ratio: 4 / 3;
  min-height: 180px;
  pointer-events: none;
}
@media (max-width: 760px) {
  .logo-badge { width: 150px; }
  #sobre .about-grid { gap: 0; }
  #sobre .about-media { display: flex; flex-direction: column; align-self: stretch; background: #0a0a0a; }
  #sobre .about-media img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
  #sobre .about-tag { position: relative; left: auto; bottom: auto; max-width: none; margin: 0; padding: 26px 36px 30px; }
  #sobre .about-copy { margin-top: 0; background: transparent; }
  .portfolio-editorial .p-item--empty { flex-basis: 86vw; }
  .project-opening { height: 78svh; min-height: 420px; padding: 110px 14px 16px; }
  .opening-frame img { object-fit: cover; object-position: 50% center; }
  .opening-frame::after { inset: 0; }
  .hero { padding: 56px 0; min-height: 0; }
  .hero-content { padding-block: 0; }
  .hero h1 { font-size: clamp(34px, 10vw, 52px); }
  nav.links.mobile-open { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 48px; }
}