/*
Theme Name: Studio by Igor Saterro - Linka Style
Theme URI: https://igorsaterro.com/
Author: Studio by Igor Saterro
Description: A cinematic WordPress theme for Studio by Igor Saterro, rebuilt from scratch with a Linka-inspired editorial grid, showreel hero, universe sections, and expertise hover films.
Version: 1.0.3
License: GPL-2.0-or-later
Text Domain: igor-saterro-linka
*/

:root {
  --color-white: #ffffff;
  --color-cream: #f4eee7;
  --color-black: #2c2926;
  --color-muted: color-mix(in srgb, var(--color-white) 62%, transparent);
  --color-soft: color-mix(in srgb, var(--color-white) 15%, transparent);
  --color-border: color-mix(in srgb, var(--color-white) 22%, transparent);
  --font-primary: "Geist", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --grid-gap: 10px;
  --grid-pad: clamp(24px, 2.1vw, 34px);
  --space-100: .25rem;
  --space-200: .5rem;
  --space-300: 1.25rem;
  --space-400: 1.625rem;
  --space-500: 2.25rem;
  --space-600: 3rem;
  --space-700: 3.75rem;
  --space-800: 7.5rem;
  --space-900: 12.5rem;
  --fs-200: clamp(.72rem, .69rem + .13vw, .8rem);
  --fs-300: clamp(.82rem, .78rem + .18vw, .96rem);
  --fs-400: clamp(1rem, .95rem + .22vw, 1.18rem);
  --fs-500: clamp(1.14rem, 1.03rem + .48vw, 1.55rem);
  --display-100: clamp(2rem, 4.4vw, 3.75rem);
  --display-200: clamp(2.4rem, 6vw, 5rem);
  --display-300: clamp(3.2rem, 8vw, 6.875rem);
  --display-400: clamp(4rem, 10vw, 8.75rem);
  --display-500: clamp(4.2rem, 11.2vw, 9.375rem);
  --display-600: clamp(4.5rem, 13vw, 11.25rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-black);
  color: var(--color-white);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  font-weight: 300;
  line-height: 1.35;
}

body::-webkit-scrollbar {
  width: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.grid {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  padding-inline: var(--grid-pad);
}

.splitted-text {
  overflow: hidden;
}

.line-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--fs-300);
  line-height: 1;
}

.line-link::before {
  content: "";
  width: .42em;
  height: .42em;
  border-left: .42em solid currentColor;
  border-top: .28em solid transparent;
  border-bottom: .28em solid transparent;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  align-items: start;
  padding-block: var(--grid-pad);
  pointer-events: none;
  mix-blend-mode: difference;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

.brand-link {
  grid-column: 1 / span 5;
  display: inline-flex;
  align-items: flex-start;
  width: min(18.5rem, 100%);
}

.brand-link svg {
  width: 100%;
  height: auto;
  fill: var(--color-white);
}

.site-nav {
  grid-column: 11 / span 10;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 34px);
  font-size: var(--fs-300);
  line-height: 1;
}

.site-nav__list,
.language-list {
  display: flex;
  gap: clamp(16px, 1.5vw, 28px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.22em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .55s var(--ease);
}

.site-nav a:hover::after,
.language-list .is-active a::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.menu-button {
  display: none;
}

.hero-media {
  position: relative;
  min-height: 100lvh;
  overflow: hidden;
  background: var(--color-black);
}

.hero-media__media {
  position: absolute;
  inset: 0;
  opacity: .9;
  overflow: hidden;
}

.hero-media__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(44,41,38,.22), rgba(44,41,38,.16) 42%, rgba(44,41,38,.58)),
    linear-gradient(90deg, rgba(44,41,38,.2), rgba(44,41,38,.02) 48%, rgba(44,41,38,.34));
}

.hero-media__media video,
.hero-media__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media__media img {
  z-index: 0;
}

.hero-media__media video {
  z-index: 1;
}

.hero-media__container {
  position: relative;
  z-index: 2;
  min-height: 100lvh;
  grid-template-rows: minmax(42vh, 1fr) auto auto;
}

.hero-media__title {
  position: relative;
  grid-column: 1 / span 16;
  grid-row: 2;
  margin: 0;
  padding-block: var(--space-400);
  border-top: 2px solid var(--color-border);
  font-size: var(--display-300);
  font-weight: 100;
  line-height: 1.05;
  letter-spacing: 0;
  max-width: 12.4ch;
}

.hero-media__title--studio {
  grid-column: 1 / span 16;
  max-width: 13.5ch;
  font-size: clamp(4rem, 10.6vw, 12rem);
  font-weight: 100;
  line-height: .9;
  letter-spacing: .07em;
  text-transform: none;
}

.hero-media__title-main,
.hero-media__title-sub {
  display: block;
}

.hero-media__title-main {
  text-transform: uppercase;
}

.hero-media__title-sub {
  margin-top: .18em;
  font-size: .26em;
  line-height: 1.05;
  letter-spacing: .16em;
  text-transform: none;
}

.hero-media__aside {
  position: relative;
  grid-column: 17 / span 4;
  grid-row: 1 / span 3;
  min-height: 100%;
  margin-right: calc(var(--grid-pad) * -1);
  border-left: 2px solid var(--color-border);
}

.showreel-button {
  position: sticky;
  top: calc(100lvh - 90px);
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 100lvh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.showreel-button > span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: var(--space-400) var(--grid-pad) var(--space-400) var(--space-400);
  color: var(--color-white);
  font-size: var(--fs-300);
  line-height: 1;
}

.showreel-button .play {
  display: inline-flex;
  align-items: center;
  gap: .7em;
}

.showreel-button .play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: .45em solid currentColor;
  border-top: .32em solid transparent;
  border-bottom: .32em solid transparent;
}

.homepage-hero__intro {
  position: relative;
  grid-column: 10 / span 6;
  grid-row: 3;
  margin-block: var(--space-600) var(--space-500);
  color: var(--color-white);
  font-size: var(--fs-400);
  line-height: 1.35;
}

.homepage-hero__intro p {
  margin: 0 0 var(--space-400);
  color: var(--color-white);
}

.presentation {
  position: relative;
  z-index: 3;
  padding-block: var(--space-700) var(--space-900);
  background: var(--color-black);
}

.film-library {
  position: relative;
  z-index: 4;
  padding-block: var(--space-600) var(--space-900);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 18%),
    var(--color-black);
}

.film-library::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(var(--grid-pad) - 1px), var(--color-soft) var(--grid-pad), transparent calc(var(--grid-pad) + 1px)),
    linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}

.film-library__head {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-600);
}

.film-grid {
  position: relative;
  z-index: 2;
  row-gap: var(--grid-gap);
}

.film-card {
  position: relative;
  grid-column: span 5;
  min-height: clamp(300px, 38vw, 560px);
  overflow: hidden;
  background: #191817;
  transform: translateY(calc(var(--float, 0) * 18px));
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}

.film-card--large,
.film-card:nth-child(7) {
  grid-column: span 10;
}

.film-card:nth-child(3),
.film-card:nth-child(8),
.film-card:nth-child(11) {
  grid-column: span 6;
}

.film-card:nth-child(4),
.film-card:nth-child(9),
.film-card:nth-child(12) {
  grid-column: span 4;
}

.film-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.film-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(44,41,38,.05), rgba(44,41,38,.12) 46%, rgba(44,41,38,.82)),
    linear-gradient(90deg, rgba(44,41,38,.46), transparent 54%);
  transition: opacity .45s ease;
}

.film-card__media img,
.film-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s ease, transform 1.35s var(--ease), filter .45s ease;
}

.film-card__media img {
  z-index: 1;
}

.film-card__media video {
  z-index: 2;
  opacity: 0;
}

.film-card:hover .film-card__media video,
.film-card.is-active .film-card__media video {
  opacity: 1;
}

.film-card:hover .film-card__media img,
.film-card:hover .film-card__media video,
.film-card.is-active .film-card__media img,
.film-card.is-active .film-card__media video {
  transform: scale(1.055);
  filter: saturate(1.05) contrast(1.04);
}

.film-card__meta {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-200) var(--space-300);
  align-items: end;
  padding: var(--space-400);
}

.film-card__meta span {
  grid-row: 1 / span 2;
  color: var(--color-muted);
  font-size: var(--fs-300);
}

.film-card__meta h3 {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 4.2rem);
  font-weight: 100;
  line-height: .98;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.film-card__meta p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-200);
  line-height: 1.2;
}

.presentation__text {
  grid-column: 3 / span 13;
  margin: 0;
  padding: var(--space-500) 0 0 var(--space-500);
  border-left: 2px solid var(--color-border);
  font-size: var(--display-100);
  font-weight: 100;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--color-white);
}

.section-label {
  grid-column: 1 / span 3;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-300);
  line-height: 1;
}

.section-title {
  grid-column: 5 / span 12;
  margin: 0;
  font-size: var(--display-200);
  font-weight: 100;
  line-height: 1.05;
}

.horizontal-slider {
  position: relative;
  z-index: 4;
  background: var(--color-black);
  height: calc(var(--slide-count, 5) * 100lvh);
}

.horizontal-slider__list {
  position: sticky;
  top: 0;
  display: flex;
  height: 100lvh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  will-change: transform;
}

.horizontal-slider__slide {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100lvh;
  overflow: hidden;
}

.item-universe {
  display: flex;
}

.item-universe__container {
  position: relative;
  width: 100%;
  height: 100%;
  grid-template-rows: 1fr auto auto;
  overflow: hidden;
  color: var(--color-white);
}

.item-universe__container::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(44, 41, 38, .04), rgba(44, 41, 38, .08) 42%, rgba(44, 41, 38, .24));
  pointer-events: none;
}

.item-universe__image {
  position: relative;
  z-index: 1;
  grid-column: 4 / span 17;
  grid-row: 1 / 3;
  height: 100%;
  margin-right: calc(var(--grid-pad) * -1);
  overflow: hidden;
  line-height: 0;
}

.item-universe__image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.item-universe__image img,
.item-universe__image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s ease, transform 1.6s var(--ease);
}

.item-universe__image img {
  opacity: .92;
}

.item-universe__image video {
  opacity: 0;
}

.item-universe__container:hover .item-universe__image video,
.item-universe__container.is-active .item-universe__image video {
  opacity: .88;
}

.item-universe__container:hover .item-universe__image img,
.item-universe__container:hover .item-universe__image video,
.item-universe__container.is-active .item-universe__image img,
.item-universe__container.is-active .item-universe__image video {
  transform: scale(1.035);
}

.item-universe__baseline {
  position: relative;
  z-index: 3;
  grid-column: 4 / span 10;
  grid-row: 1;
  align-self: end;
  padding: 0 0 var(--space-300) var(--space-500);
  font-size: var(--fs-500);
  font-weight: 200;
  line-height: 1.25;
}

.item-universe__cta {
  position: relative;
  z-index: 3;
  grid-column: 17 / span 4;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: var(--space-400);
  margin-right: calc(var(--grid-pad) * -1);
}

.item-universe__cta::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: -2px;
  top: 0;
  width: 100%;
  width: 2px;
  height: 100lvh;
  background: var(--color-border);
}

.link-blur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.2rem;
  min-height: 8.2rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--color-white) 58%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-black) 18%, transparent);
  backdrop-filter: blur(16px);
  font-size: var(--fs-300);
  line-height: 1;
}

.item-universe__title {
  position: relative;
  z-index: 3;
  grid-column: 2 / span 19;
  grid-row: 2 / 4;
  align-self: end;
  margin: 0;
  padding: var(--space-500) 0;
  font-size: var(--display-600);
  font-weight: 100;
  line-height: .98;
  letter-spacing: 0;
}

.item-universe__title::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--grid-pad) * -1);
  width: 100vw;
  height: 2px;
  background: var(--color-border);
}

.agency {
  position: relative;
  z-index: 4;
  padding-block: var(--space-600) var(--space-900);
  background: var(--color-black);
}

.agency__copy {
  grid-column: 2 / span 8;
  padding-top: var(--space-500);
  border-top: 2px solid var(--color-border);
}

.agency__copy p {
  margin: 0;
}

.agency__lead {
  max-width: 15ch;
  font-size: var(--display-100);
  font-weight: 100;
  line-height: 1.05;
}

.agency__body {
  max-width: 36ch;
  margin-top: var(--space-400) !important;
  color: var(--color-muted);
}

.agency__media {
  position: relative;
  grid-column: 13 / span 7;
  aspect-ratio: 9 / 14;
  margin-right: calc(var(--grid-pad) * -1);
  overflow: hidden;
  background: #211f1d;
}

.agency__media img,
.agency__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agency__media video {
  z-index: 2;
}

.expertises {
  position: relative;
  z-index: 5;
  padding-block: var(--space-600) var(--space-700);
  background: var(--color-black);
}

.expertises__head {
  padding-bottom: var(--space-600);
}

.expertises__list {
  position: relative;
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}

.expertises__list:has(.expertise-item:hover) {
  color: color-mix(in srgb, var(--color-white) 12%, transparent);
}

.expertise-item {
  display: block;
  position: relative;
  color: inherit;
}

.expertise-item__content {
  position: relative;
  z-index: 3;
  border-top: 2px solid var(--color-border);
  padding-block: var(--space-300);
  transition: color .35s ease;
}

.expertise-item:last-child .expertise-item__content {
  border-bottom: 2px solid var(--color-border);
}

.expertise-item__title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--display-500);
  font-weight: 100;
  line-height: 1.02;
  letter-spacing: 0;
}

.expertise-item:nth-child(2) .expertise-item__title {
  grid-column: 6 / span 15;
}

.expertise-item:nth-child(3) .expertise-item__title {
  grid-column: 3 / span 18;
}

.expertise-item:hover {
  color: var(--color-white);
}

.expertise-item__thumbnail {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}

.expertise-item__thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000000 46%, transparent);
}

.expertise-item__thumbnail img,
.expertise-item__thumbnail video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .64;
}

.expertise-item__thumbnail video {
  opacity: .72;
}

.expertise-item:hover .expertise-item__thumbnail {
  opacity: 1;
}

.contact {
  position: relative;
  z-index: 6;
  padding-block: var(--space-800) var(--space-500);
  background: var(--color-black);
}

.contact__headline {
  grid-column: 1 / span 15;
  margin: 0 0 var(--space-800);
  font-size: var(--display-400);
  font-weight: 100;
  line-height: .98;
  letter-spacing: 0;
}

.contact__headline a {
  border-bottom: 2px solid currentColor;
}

.footer-grid {
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-400);
}

.footer-brand {
  grid-column: 1 / span 6;
}

.footer-brand svg {
  width: min(16rem, 100%);
  fill: var(--color-white);
}

.footer-col {
  color: var(--color-muted);
  font-size: var(--fs-300);
}

.footer-col h3 {
  margin: 0 0 var(--space-300);
  color: var(--color-white);
  font-size: var(--fs-300);
  font-weight: 300;
}

.footer-col a,
.footer-col span,
.footer-col p {
  display: block;
  margin: 0 0 .55rem;
}

.footer-nav {
  grid-column: 9 / span 3;
}

.footer-contact {
  grid-column: 13 / span 4;
}

.footer-social {
  grid-column: 17 / span 4;
}

.newsletter {
  display: flex;
  width: 100%;
  max-width: 26rem;
  border-bottom: 1px solid var(--color-border);
}

.newsletter input {
  min-width: 0;
  flex: 1;
  padding: .8rem 0;
  border: 0;
  color: var(--color-white);
  background: transparent;
}

.newsletter input::placeholder {
  color: color-mix(in srgb, var(--color-white) 45%, transparent);
}

.newsletter button {
  border: 0;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: var(--space-700) var(--grid-pad) 0;
  color: color-mix(in srgb, var(--color-white) 48%, transparent);
  font-size: var(--fs-200);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.video-dialog {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--grid-pad);
  background: rgba(18, 17, 16, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.video-dialog.is-open {
  opacity: 1;
  pointer-events: auto;
}

.video-dialog video {
  width: min(1180px, 100%);
  max-height: 82vh;
  background: #000;
}

.video-dialog__close {
  position: absolute;
  top: var(--grid-pad);
  right: var(--grid-pad);
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-black) 70%, transparent);
  cursor: pointer;
}

.video-dialog__close::before,
.video-dialog__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--color-white);
}

.video-dialog__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.video-dialog__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 1023px) {
  :root {
    --grid-pad: 26px;
    --grid-gap: 8px;
  }

  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .site-header {
    align-items: center;
  }

  .brand-link {
    grid-column: 1 / span 4;
    width: min(13rem, 100%);
  }

  .site-nav {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-500);
    padding: 88px var(--grid-pad) var(--grid-pad);
    background: var(--color-black);
    font-size: var(--display-100);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity .45s ease, transform .45s var(--ease);
    mix-blend-mode: normal;
  }

  .site-nav__list,
  .language-list {
    flex-direction: column;
    gap: 14px;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .menu-button {
    grid-column: 7 / span 2;
    justify-self: end;
    display: grid;
    gap: 5px;
    width: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-button span {
    display: block;
    height: 1px;
    background: var(--color-white);
  }

  .hero-media__container {
    grid-template-rows: 1fr auto auto auto;
  }

  .hero-media__title {
    grid-column: 1 / -1;
    font-size: 50px;
    border-top: 0;
    padding-top: 0;
  }

  .hero-media__title--studio {
    max-width: 9.8ch;
    font-size: clamp(3.2rem, 16vw, 5.8rem);
    line-height: .88;
    letter-spacing: .045em;
  }

  .hero-media__title-sub {
    font-size: .32em;
    letter-spacing: .11em;
  }

  .hero-media__aside {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: auto;
    margin-inline: calc(var(--grid-pad) * -1);
    border-left: 0;
    border-top: 2px solid var(--color-border);
  }

  .homepage-hero__intro {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-block: var(--space-400);
  }

  .showreel-button {
    min-height: auto;
    position: static;
  }

  .showreel-button > span {
    padding: var(--space-400) var(--grid-pad);
  }

  .presentation {
    padding-block: var(--space-600) var(--space-800);
  }

  .presentation__text {
    grid-column: 1 / -1;
    padding-left: var(--space-400);
    font-size: var(--fs-500);
  }

  .film-library {
    padding-block: var(--space-500) var(--space-700);
  }

  .film-library__head {
    padding-bottom: var(--space-500);
  }

  .film-card,
  .film-card--large,
  .film-card:nth-child(3),
  .film-card:nth-child(4),
  .film-card:nth-child(7),
  .film-card:nth-child(8),
  .film-card:nth-child(9),
  .film-card:nth-child(11),
  .film-card:nth-child(12) {
    grid-column: 1 / -1;
    min-height: auto;
    aspect-ratio: 4 / 5;
  }

  .film-card:nth-child(odd) {
    aspect-ratio: 16 / 11;
  }

  .film-card__meta {
    padding: var(--space-300);
  }

  .film-card__meta h3 {
    font-size: clamp(1.8rem, 10vw, 3.4rem);
  }

  .section-label,
  .section-title {
    grid-column: 1 / -1;
  }

  .section-title {
    margin-top: var(--space-300);
  }

  .horizontal-slider {
    height: auto !important;
  }

  .horizontal-slider__list {
    position: relative;
    top: auto;
    display: block;
    height: auto;
    transform: none !important;
    overflow: visible;
  }

  .horizontal-slider__slide {
    width: 100%;
    height: auto;
  }

  .item-universe__container {
    min-height: 100lvh;
    grid-template-rows: 1fr auto auto;
  }

  .item-universe__image {
    grid-column: 2 / -1;
    grid-row: 1;
    min-height: 340px;
    margin-right: calc(var(--grid-pad) * -1);
  }

  .item-universe__baseline {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: var(--space-300);
    font-size: var(--fs-400);
  }

  .item-universe__cta {
    display: none;
  }

  .item-universe__title {
    grid-column: 2 / -1;
    grid-row: 3;
    padding-top: var(--space-300);
    font-size: var(--display-300);
  }

  .agency {
    padding-block: var(--space-500) var(--space-700);
  }

  .agency__copy,
  .agency__media {
    grid-column: 1 / -1;
  }

  .agency__media {
    margin-top: var(--space-500);
    margin-right: 0;
    aspect-ratio: 4 / 5;
  }

  .expertises__head {
    padding-bottom: var(--space-500);
  }

  .expertise-item__title,
  .expertise-item:nth-child(2) .expertise-item__title,
  .expertise-item:nth-child(3) .expertise-item__title {
    grid-column: 1 / -1;
    font-size: var(--display-300);
  }

  .expertise-item__thumbnail {
    display: none;
  }

  .contact {
    padding-block: var(--space-700) var(--space-400);
  }

  .contact__headline {
    grid-column: 1 / -1;
    margin-bottom: var(--space-700);
    font-size: var(--display-300);
  }

  .footer-brand,
  .footer-nav,
  .footer-contact,
  .footer-social {
    grid-column: 1 / -1;
    margin-bottom: var(--space-500);
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}