.media-page .hero-gallery-hero {
    text-align: center;
    padding: clamp(6rem, 9vw, 7.5rem) 0 2.5rem;
}
.top-v2 .works-experience.media-intro {
    margin-block-start: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 2vw, 1.5rem);
}
.media-intro-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}
.top-v2 .media-intro-footer .media-intro-price { margin: 0; }
.media-intro-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: fit-content;
    min-height: 44px;
    box-sizing: border-box;
    margin: 0 0 0 auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: .7rem 1.5rem;
    border-radius: 999px;
    background: #3e5e9b;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: translate .2s ease, background .2s ease;
}
.media-intro-contact:visited { color: #fff; }
.media-intro-contact:hover { background: #253d6b; translate: 0 -2px; }
.media-intro-contact:focus-visible { outline: 3px solid #b6349d; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .media-intro-contact { transition: none; }
}
.media-intro-price strong { display: inline-block; margin-inline-start: .75em; }
.media-intro-price .media-price-label { margin-inline-start: 0; }
.media-page .hero-gallery-hero h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.media-page .hero-gallery-back { margin-bottom: 1rem; }
.media-page .hero-gallery-lead { margin-top: 1rem; font-size: .95rem; }
.media-page .hero-gallery-kicker { margin-bottom: .65rem; }
.media-modal {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    padding: calc(3.5rem + env(safe-area-inset-top)) calc(3.5rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(3.5rem + env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    background: #060913ed;
    color: #fff;
}
.media-modal[open] { display: flex; align-items: center; justify-content: center; }
.media-modal::backdrop { background: #060913db; }
.media-modal-portrait {
    position: relative;
    width: min(100%, calc((100dvh - 4.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16));
    aspect-ratio: 9 / 16;
    flex: 0 0 auto;
    overflow: hidden;
    background: #000;
}
.media-modal .media-modal-portrait iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0;
}
.media-modal-portrait[hidden] { display: none; }
.media-modal :is(video, iframe)[hidden] { display: none; }
.media-animation .hero-film-card { max-width: 24rem; width: 100%; margin-inline: auto; }
.media-animation .hero-film-frame { aspect-ratio: 9 / 16; }
.media-page .media-animation .hero-film-frame img { object-fit: cover; object-position: center; }
.media-youtube { text-decoration: none; }
.media-modal video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.media-modal-close {
    position: absolute;
    top: calc(.25rem + env(safe-area-inset-top));
    right: calc(.5rem + env(safe-area-inset-right));
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: white;
    font-size: 1.7rem;
    cursor: pointer;
}
html.media-modal-open { overflow: hidden; }
.media-modal-step {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ffffffb3;
    border-radius: 50%;
    background: #17233ce6;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}
.media-modal-prev { left: calc(.375rem + env(safe-area-inset-left)); }
.media-modal-next { right: calc(.375rem + env(safe-area-inset-right)); }
.media-modal-step:hover { background: #3e5e9b; }
.media-modal-step:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.media-modal-position {
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top));
    left: 3.5rem;
    right: 3.5rem;
    text-align: center;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-page .hero-film-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.media-page .hero-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}
.media-heading { margin: 0 0 1.5rem; font-size: 1.25rem; }
#brand-logo-grid > [hidden], .media-show-more[hidden] { display: none; }
.media-show-more {
    display: block;
    margin: 1.5rem auto 0;
    min-height: 44px;
    padding: .75rem 2rem;
    border: 1px solid #3e5e9b;
    border-radius: 999px;
    background: #fff;
    color: #3e5e9b;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.media-show-more:hover { background: #3e5e9b; color: #fff; }
.media-show-more:focus-visible { outline: 3px solid #b6349d; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .media-show-more { transition: none; }
}
.media-page .hero-film-frame { position: relative; }
.media-play {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.media-play span {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid #ffffffb3;
    border-radius: 50%;
    background: #17233cbf;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: scale .2s ease, background .2s ease;
}
.media-play:hover span { scale: 1.08; background: #253d6b; }
.media-play:focus-visible { outline: 3px solid #b6349d; outline-offset: -4px; }
.media-play[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .media-play span { transition: none; }
}
.media-page .media-mixplus .hero-film-frame { aspect-ratio: 3 / 4; }
.media-page .media-mixplus video { background: #fff; }