/* Two full-width film openings. Existing homepage layouts are untouched. */
.hero-home .site-header {
  position: fixed;
  inset: 0 0 auto;
  border: 0;
  background: transparent;
  transition: background-color .2s ease;
}
.hero-home .site-header.is-scrolled,
.hero-home.menu-open .site-header { background: #000; }
.hero-home .header-inner { max-width: none; min-height: 5.5rem; }
.hero-home .desktop-nav > a[href="/kontakt/"] { color: #fff; }
.hero-home .portfolio-toggle.is-active::after { transform: scaleX(0); }
.hero-home .portfolio-toggle:hover::after,
.hero-home .portfolio-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.video-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: max(40rem, 94svh);
  overflow: hidden;
  background: #000;
  color: #fff;
}
.hero-backdrop { position: absolute; inset: 0; z-index: -3; }
.hero-backdrop img,
.hero-backdrop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.hero-backdrop img { max-width: none; }
.hero-backdrop video { border: 0; }
.video-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.16) 25%, rgba(0,0,0,.22) 56%, rgba(0,0,0,.92));
  pointer-events: none;
}
.hero-center-copy { align-self: center; padding: 9rem var(--side) 8rem; text-align: center; }
.hero-eyebrow { margin: 0 0 2rem; font-size: .875rem; letter-spacing: .15em; text-transform: uppercase; }
.hero-claim { margin: 0; font-weight: 600; letter-spacing: -.06em; line-height: .97; }
.hero-claim span { display: block; }
.hero-claim .hero-period { display: inline; }
.hero-variant-nav { position: absolute; top: 6rem; right: var(--side); display: flex; gap: 1rem; align-items: center; font-size: .875rem; }
.hero-variant-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
.hero-variant-nav a[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }
.hero-variant-nav a:hover { color: var(--orange); }
.hero-center-copy .hero-claim { font-size: clamp(3.25rem, 8.4vw, 8.5rem); }
.hero-claim .hero-accent { color: var(--orange); }
.hero-reel-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  gap: .9rem;
  margin-top: 2.2rem;
  padding: .45rem .8rem .45rem .45rem;
  color: #fff;
  border: 0;
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
}
.hero-play-icon { display: grid; width: 2.6rem; aspect-ratio: 1; place-items: center; border: 1px solid #fff; border-radius: 50%; }
.hero-play-icon::after { content: ""; margin-left: .2rem; border-left: .5rem solid currentColor; border-top: .3rem solid transparent; border-bottom: .3rem solid transparent; }
.hero-reel-button:hover .hero-play-icon { color: #000; border-color: var(--orange); background: var(--orange); }
.hero-bottom {
  position: absolute;
  inset: auto var(--side) 1.8rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
}
.hero-demo-note { margin: 0; color: #c4c4c4; font-size: .8125rem; }
.hero-scroll { display: inline-flex; min-height: 2.75rem; gap: 1.25rem; align-items: center; font-size: .9375rem; }
.hero-scroll span { color: var(--orange); font-size: 1.25rem; }
.hero-scroll:hover { color: var(--orange); }
.hero-pause {
  display: inline-flex;
  min-height: 2.75rem;
  padding: .5rem 0 .5rem .75rem;
  align-items: center;
  gap: .7rem;
  justify-self: end;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: .875rem;
  cursor: pointer;
}
.hero-pause-icon { display: inline-block; width: .65rem; height: .8rem; border-left: .22rem solid currentColor; border-right: .22rem solid currentColor; }
.hero-pause[data-playing="false"] .hero-pause-icon { width: 0; height: 0; border-top: .35rem solid transparent; border-bottom: .35rem solid transparent; border-left: .6rem solid currentColor; border-right: 0; }

/* The second opening uses the left edge as a strong typographic axis. */
body[data-variant="h"] .video-hero { min-height: max(41rem, 88svh); }
body[data-variant="h"] .video-hero::before { background: linear-gradient(180deg, rgba(0,0,0,.68), transparent 33%, rgba(0,0,0,.25) 60%, #000), linear-gradient(90deg, rgba(0,0,0,.38), transparent 80%); }
.hero-offset-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-self: end;
  align-items: end;
  padding: 12rem var(--side) 7rem;
}
.hero-offset-copy .hero-eyebrow { margin-bottom: 1.5rem; }
.hero-offset-copy .hero-claim { max-width: 14ch; font-size: clamp(3.25rem, 6.9vw, 7rem); }
.hero-offset-copy .hero-reel-button { margin-top: 1.5rem; margin-left: -.45rem; }
.hero-orbit-link {
  display: flex;
  width: clamp(7rem, 12vw, 10rem);
  aspect-ratio: 1;
  margin-bottom: .5rem;
  border: 1px solid var(--orange);
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-size: 1rem;
}
.hero-orbit-link span { color: var(--orange); font-size: 2rem; line-height: 1; }
.hero-orbit-link:hover { background: var(--orange); color: #000; }
.hero-orbit-link:hover span { color: #000; }
body[data-variant="h"] .hero-bottom { grid-template-columns: 1fr auto; }

/* Portfolio always follows the full-bleed opening, on a pure black surface. */
.hero-portfolio { max-width: 1520px; padding: clamp(2.5rem, 5vw, 5rem) var(--side) 3rem; margin-inline: auto; }
.hero-portfolio-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.3rem; }
.hero-portfolio-heading h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); font-weight: 400; letter-spacing: -.04em; }
.hero-portfolio-heading > span { color: #aaa; font-size: .875rem; padding-bottom: .3rem; }
.hero-home .hero-portfolio > [data-home] { max-width: none; margin: 0; padding: 0; }
.hero-portfolio-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.4rem 1.2rem;
  grid-template-areas:
    "ads ads ads ads ads ads ads ads corporate corporate corporate corporate"
    "ads ads ads ads ads ads ads ads product product product product"
    "short short short events events events music music music restaurants restaurants restaurants";
}
.hero-portfolio-board [data-style="ads"] { grid-area: ads; }
.hero-portfolio-board [data-style="corporate"] { grid-area: corporate; }
.hero-portfolio-board [data-style="product"] { grid-area: product; }
.hero-portfolio-board [data-style="short"] { grid-area: short; }
.hero-portfolio-board [data-style="events"] { grid-area: events; }
.hero-portfolio-board [data-style="music"] { grid-area: music; }
.hero-portfolio-board [data-style="restaurants"] { grid-area: restaurants; }
.hero-portfolio-board .category-link { display: grid; grid-template-rows: 2.2rem minmax(0, 1fr); height: 100%; }
.hero-portfolio-board .category-link h2 { margin: 0; font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 400; }
.hero-portfolio-board .category-picture { min-height: 0; }
.hero-portfolio-board [data-style="ads"] .category-picture { height: 100%; aspect-ratio: auto; }
.hero-portfolio-board .category-enter { background: #000; color: var(--orange); }
.hero-portfolio-board .category-link:hover .category-enter { background: var(--orange); color: #000; }
body[data-variant="h"] .hero-portfolio { padding-top: 2.5rem; }
body[data-variant="h"] .hero-portfolio-board {
  grid-template-areas:
    "ads ads ads ads ads ads ads corporate corporate corporate corporate corporate"
    "product product product short short short events events events music music music"
    "restaurants restaurants restaurants restaurants restaurants restaurants restaurants restaurants restaurants restaurants restaurants restaurants";
  grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
  aspect-ratio: 1.58;
  gap: 1.5rem 1rem;
}
body[data-variant="h"] .hero-portfolio-board .home-category { min-height: 0; }
body[data-variant="h"] .hero-portfolio-board .category-picture { height: 100%; aspect-ratio: auto; }
.hero-home .design-switch { border-top: 1px solid var(--line); padding-block: 1rem; flex-wrap: wrap; }
.hero-home .design-switch > span { font-size: .875rem; }
.hero-home .design-switch a { font-size: .875rem; }
.hero-demo-credit { max-width: 1440px; margin: 0 auto; padding: .2rem var(--side) 1.5rem; color: #aaa; font-size: .8125rem; }
.hero-demo-credit a { text-decoration: underline; text-underline-offset: .2rem; }

@media (max-width: 1000px) {
  .hero-portfolio-board,
  body[data-variant="h"] .hero-portfolio-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: "ads corporate" "product short" "events music" "restaurants restaurants";
    aspect-ratio: auto;
    gap: 1.6rem 1rem;
  }
  .hero-portfolio-board [data-style="ads"] .category-picture,
  body[data-variant="h"] .hero-portfolio-board .category-picture { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 800px) {
  .hero-variant-nav { top: 4.8rem; }
  .hero-home .header-inner { min-height: 4.6rem; }
  .video-hero,
  body[data-variant="h"] .video-hero { min-height: max(36rem, 88svh); }
  .hero-center-copy { padding-block: 8rem 9rem; }
  .hero-center-copy .hero-claim { font-size: clamp(2.7rem, 8.5vw, 5rem); }
  .hero-eyebrow { max-width: 25ch; margin-inline: auto; line-height: 1.6; }
  .hero-bottom { grid-template-columns: 1fr auto; row-gap: .6rem; bottom: 1.2rem; }
  .hero-demo-note { grid-column: 1 / -1; font-size: .8125rem; }
  .hero-scroll { grid-column: 1; }
  .hero-pause { grid-column: 2; }
  body[data-variant="h"] .hero-demo-note { grid-column: 1; }
  .hero-offset-copy { grid-template-columns: 1fr; gap: 1rem; padding-top: 9rem; padding-bottom: 8.8rem; }
  .hero-offset-copy .hero-claim { font-size: clamp(2.8rem, 8vw, 4.6rem); }
  .hero-offset-copy .hero-eyebrow { margin-inline: 0; }
  .hero-orbit-link { position: absolute; right: var(--side); bottom: 6rem; width: 6rem; font-size: .875rem; }
  .hero-orbit-link span { font-size: 1.6rem; }
  .hero-portfolio-heading { margin-bottom: 1.7rem; }
}
@media (max-width: 600px) {
  .hero-center-copy .hero-claim { font-size: clamp(2rem, 8.5vw, 3.7rem); }
  .hero-portfolio-heading > span { display: none; }
  .hero-portfolio-board,
  body[data-variant="h"] .hero-portfolio-board { display: flex; flex-direction: column; }
  .hero-portfolio-board .category-link { grid-template-rows: 2.5rem auto; }
  .hero-portfolio-board .category-link h2 { font-size: 1.3rem; }
  .hero-offset-copy .hero-claim { font-size: clamp(2rem, 8.6vw, 3.7rem); }
  .hero-offset-copy .hero-reel-button { font-size: .9375rem; margin-top: 1.3rem; }
  .hero-orbit-link { position: static; width: fit-content; min-height: 2.75rem; aspect-ratio: auto; flex-direction: row; padding-right: .5rem; gap: 1rem; border: 0; border-radius: 0; }
  .hero-offset-copy { padding-bottom: 7.5rem; }
  .hero-home .design-switch { flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home .site-header { transition: none; }
}