/* REVO Media landing — responsive styles. Breakpoints follow the Figma frames: 1800 / 1440 / 834 / 390 */

/* ---------- ≥1440 — exact match to the Figma 1800px frame (node 165-3082) ---------- */

@media (min-width: 1440px) {
    .media main,
    .media-footer {
        max-width: 1800px;
    }

    /* Dark panels stay flush with the viewport. */
    .media-panel {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    /* ---------- Header ---------- */
    .media-header {
        top: 25px;
        max-width: 1750px;
        height: 100px;
        padding: 15px 15px 15px 30px;
        border-radius: 40px;
    }

    .media-logo {
        width: 441px;
    }

    .media-header__actions {
        gap: 15px;
    }

    .media-header__lang {
        gap: 7.5px;
        height: 60px;
        padding: 0 20px;
        border-radius: 20px;
        font-size: 17.5px;
        line-height: 30px;
    }

    .media-header__lang svg {
        width: 20px;
        height: 20px;
    }

    .media-header__cta {
        height: 77.5px;
        padding: 0 25px;
        border-radius: 25px;
        font-size: 21.875px;
        line-height: 37.5px;
    }

    /* ---------- Hero ---------- */
    .media-hero {
        padding: 250px 90px 90px;
        min-height: 950px;
    }

    .media-hero__content {
        max-width: 1021px;
    }

    .media-hero__title {
        font-size: 120px;
        letter-spacing: -4.5px;
    }

    .media-hero__subtitle {
        margin-top: 52.5px;
        max-width: 755px;
        font-size: 30px;
        line-height: 1.25;
        color: #84848c;
    }

    .media-hero__cta {
        margin-top: 52.5px;
        height: 80px;
        padding: 0 40px;
        border-radius: 25px;
        font-size: 22.5px;
    }

    .media-hero__words {
        flex: 0 0 459.5px;
        height: 720px;
    }

    .media-hero__word {
        font-size: 97.5px;
        letter-spacing: -2.5px;
    }

    .media-hero__word-dot {
        width: 28px;
        height: 28px;
        margin-right: 28px;
    }

    .media-hero__dot {
        width: 28px;
        height: 28px;
        margin-top: -14px;
    }

    /* ---------- Shared section title/subtitle ---------- */
    .media-section__title {
        font-size: 70px;
        letter-spacing: -3.75px;
    }

    .media-section__subtitle {
        margin-top: 30px;
        font-size: 40px;
        color: var(--media-white-75);
    }

    /* ---------- Showreel / Services panel ---------- */
    .media-services {
        padding: 90px 87.5px;
        border-radius: 80px;
    }

    .media-services__container {
        display: flex;
        flex-direction: column;
        gap: 75px;
    }

    .media-showreel {
        border-radius: 67.5px;
    }

    .media-showreel__media {
        aspect-ratio: 1625 / 845;
    }

    .media-showreel__brand {
        top: 60.17px;
        left: 60.5px;
        width: 440.39px;
    }

    .media-showreel__badges {
        inset: 0;
    }

    .media-showreel__badge {
        position: absolute;
        width: 336.25px;
        margin-left: 0;
        padding: 0 28px;
        border-radius: 60px;
        font-size: 40px;
        letter-spacing: -1.2px;
    }

    .media-showreel__badge--projects {
        top: 526.5px;
        left: 950.5px;
        height: 164.73px;
        transform: translate(4.6361%, 24.7116%) rotate(-15deg);
    }

    .media-showreel__badge--sales {
        top: 539px;
        left: 1184.25px;
        height: 160.11px;
        transform: translate(4.4583%, 25.4738%) rotate(-15deg);
    }

    .media-services__intro {
        padding: 0;
    }

    .media-services__intro .media-section__title {
        line-height: 89px;
    }

    .media-services__intro .media-section__subtitle {
        max-width: none;
        line-height: 50px;
    }

    .media-services__grid {
        margin-top: 0;
        gap: 15px;
    }

    .media-services__card {
        border-radius: 60px;
        padding: 40px;
        min-height: 315px;
    }

    .media-services__card h3 {
        margin-top: 25px;
        font-size: 45px;
        line-height: 57px;
    }

    .media-services__card p {
        margin-top: 15px;
        font-size: 25px;
        font-weight: 500;
        line-height: 32px;
        color: rgba(255, 255, 255, 0.5333);
    }

    /* ---------- Process (plain background, no panel — matches Figma) ---------- */
    /* Wider heading column here so the steps keep the ~906px width the
       design gives them instead of stretching across the extra room. */
    .media-process {
        padding: 175px 87.5px;
        grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
        gap: 87.5px;
    }

    .media-process > .media-section__title {
        letter-spacing: -2.5px;
    }

    .media-process__list {
        gap: 25px;
    }

    .media-process__row {
        min-height: 235px;
        padding: 50px 52.5px;
        border-radius: 60px;
    }

    .media-process__info h3 {
        font-size: 45px;
    }

    .media-process__info p {
        margin-top: 15px;
        max-width: 520px;
        font-size: 32.5px;
    }

    .media-process__num {
        right: 30px;
        font-size: 230px;
    }

    /* ---------- Trusted ---------- */
    .media-trusted {
        display: flex;
        flex-direction: column;
        padding: 90px 87.5px;
        gap: 77.5px;
    }

    .media-trusted__intro {
        padding: 0;
    }

    .media-trusted__track {
        margin-top: 0;
        gap: 15px;
        padding: 0;
    }

    .media-trusted__card {
        flex: 0 0 500px;
        height: 782.5px;
        border-radius: 67.5px;
    }

    .media-trusted__partners {
        margin-top: 0;
        margin-right: -87.5px;
        margin-left: -87.5px;
        padding-bottom: 0;
    }

    .media-trusted__partners-group {
        gap: 15px;
        padding-right: 15px;
    }

    .media-trusted__partner {
        width: 312.5px;
        height: 200px;
        min-width: 312.5px;
        padding: 0 50px;
        border-radius: 77.5px;
        border-width: 1.56px;
    }

    .media-trusted__partner-logo {
        height: 50px;
    }
    .media-trusted__partner-logo--kon {
        height: 19px;
    }
    .media-trusted__partner-logo--tezavia {
        height: 120px;
    }
    .media-trusted__partner-logo--itpark {
        height: 97px;
    }
    .media-trusted__partner-logo--garage {
        height: 48px;
    }
    .media-trusted__partner-logo--asaxiy {
        height: 45px;
    }

    /* ---------- Why (plain background, no panel — matches Figma) ---------- */
    .media-why {
        padding: 175px 87.5px 87.5px;
    }

    .media-why__grid {
        margin-top: 75px;
        gap: 30px;
    }

    .media-why__card {
        min-height: 270px;
        border-radius: 60px;
        padding: 40px 52.5px 50px;
    }

    .media-why__card h3 {
        font-size: 45px;
    }

    .media-why__card p {
        font-size: 32.5px;
    }

    /* ---------- Footer ---------- */
    .media-footer {
        margin-top: 90px;
        margin-bottom: 0;
        padding: 90px;
        border-radius: 80px 80px 0 0;
    }

    .media-footer__cta {
        height: 272px;
    }

    .media-footer__cta-text {
        flex: 0 0 806.25px;
        width: 806.25px;
    }

    .media-footer__cta-text .media-section__title {
        max-width: 806.25px;
        font-size: 65px;
        line-height: 1.05;
        letter-spacing: -2.5px;
    }

    .media-footer__cta-text p {
        margin-top: 30px;
        max-width: 731.25px;
        font-size: 30px;
    }

    .media-footer__cta-btn {
        width: 700px;
        height: 200px;
        border-radius: 70px;
        padding: 0;
        gap: 15px;
        font-size: 47.5px;
    }

    .media-footer__cta-btn svg {
        width: 65px;
        height: 65px;
    }

    .media-footer__divider {
        margin: 65px 0;
    }

    .media-footer__grid {
        gap: 50px;
        height: 305px;
    }

    .media-footer__col h4 {
        font-size: 24px;
    }

    .media-footer__col a,
    .media-footer__col p {
        margin-top: 25px;
        font-size: 21.25px;
    }
}

/* ---------- ≤1280 ---------- */

@media (max-width: 1280px) {
    .media-hero {
        padding: 170px 48px 70px;
    }

    .media-hero__title {
        font-size: 76px;
        letter-spacing: -2.8px;
    }

    .media-hero__subtitle {
        font-size: 21px;
    }

    .media-hero__words {
        flex: 0 0 360px;
        height: 520px;
    }

    .media-hero__word {
        font-size: 60px;
    }

    .media-section__title {
        font-size: 46px;
    }

    .media-section__subtitle {
        font-size: 21px;
    }

    .media-process {
        padding: 100px 48px;
    }

    .media-services__intro,
    .media-trusted__intro {
        padding-left: 44px;
        padding-right: 44px;
    }

    .media-why {
        padding: 100px 48px 50px;
    }

    .media-footer {
        padding: 56px;
    }

    .media-footer__cta-btn {
        width: 460px;
        height: 132px;
        font-size: 30px;
        border-radius: 44px;
    }

    .media-modal__text h2 {
        font-size: 60px;
    }
}

/* ---------- ≤1024 (Figma 834 frame) ---------- */

@media (max-width: 1024px) {
    .media-hero {
        padding: 150px 32px 60px;
        min-height: 0;
    }

    .media-hero__title {
        font-size: 56px;
        letter-spacing: -2px;
    }

    .media-hero__subtitle {
        font-size: 18px;
        max-width: 480px;
    }

    .media-hero__words {
        flex: 0 0 250px;
        height: 420px;
    }

    .media-hero__word {
        font-size: 44px;
    }

    .media-hero__word-dot {
        width: 14px;
        height: 14px;
        margin-right: 14px;
    }

    .media-hero__dot {
        width: 14px;
        height: 14px;
        margin-top: -7px;
    }

    .media-services {
        padding: 20px 20px 20px;
    }

    .media-services__intro {
        padding: 44px 24px 0;
    }

    .media-services__grid {
        margin-top: 40px;
        grid-template-columns: repeat(2, 1fr);
    }

    .media-services__card h3 {
        font-size: 26px;
    }

    /* Below this width a 420px heading column would leave the steps too
       narrow to read, so the two columns stack and the heading gives up
       its sticky ride. */
    .media-process {
        display: block;
        padding: 80px 32px;
    }

    .media-process > .media-section__title {
        position: static;
    }

    .media-process__list {
        margin-top: 44px;
    }

    .media-process__num {
        font-size: 140px;
    }

    .media-trusted__intro {
        padding: 44px 32px 0;
    }

    .media-trusted__track {
        padding: 0 20px;
    }

    .media-trusted__card {
        flex: 0 0 250px;
        height: 444px;
    }

    .media-trusted__partner {
        height: 84px;
        min-width: 170px;
        padding: 0 32px;
    }

    .media-trusted__partner-logo {
        height: 32px;
    }

    .media-trusted__partner-logo--kon {
        height: 12px;
    }

    .media-trusted__partner-logo--tezavia {
        height: 76px;
    }

    .media-trusted__partner-logo--itpark {
        height: 62px;
    }

    .media-trusted__partner-logo--garage {
        height: 30px;
    }

    .media-trusted__partner-logo--asaxiy {
        height: 28px;
    }

    .media-why {
        padding: 80px 32px 40px;
    }

    .media-card h3 {
        font-size: 28px;
    }

    .media-card p {
        font-size: 18px;
    }

    .media-why__card {
        min-height: 200px;
        padding: 26px 32px 32px;
    }

    .media-footer {
        padding: 44px;
        margin-top: 50px;
    }

    .media-footer__cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .media-footer__cta-btn {
        width: 100%;
        height: 110px;
    }

    .media-footer__divider {
        margin: 44px 0;
    }

    .media-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .media-modal__panel--form {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 44px;
        width: 720px;
    }

    .media-modal__text h2 {
        font-size: 48px;
    }

    .media-modal__text p {
        font-size: 18px;
    }
}

/* ---------- 769–1799 — fluid match to the 834px and 1440px Figma frames ---------- */

@media (min-width: 769px) and (max-width: 1799px) {
    .media-trusted__partners-group {
        gap: 0.8333vw;
        padding-right: 0.8333vw;
    }

    .media-trusted__partner {
        width: 17.3611vw;
        height: 11.1111vw;
        min-width: 17.3611vw;
        padding: 0 2.7778vw;
        border-width: 0.0868vw;
        border-radius: 4.3056vw;
    }

    .media-services {
        padding: 5vw 4.8611vw;
        border-radius: 4.4444vw;
    }

    .media-services__container {
        display: flex;
        flex-direction: column;
        gap: 4.1667vw;
    }

    .media-showreel {
        border-radius: 3.75vw;
    }

    .media-showreel__media {
        aspect-ratio: 1625 / 845;
    }

    .media-showreel__brand {
        top: 3.3428vw;
        left: 3.3611vw;
        width: 24.4661vw;
    }

    .media-showreel__badges {
        inset: 0;
    }

    .media-showreel__badge {
        position: absolute;
        width: 18.6806vw;
        margin-left: 0;
        padding: 0 1.5556vw;
        border-radius: 3.3333vw;
        font-size: 2.2222vw;
        letter-spacing: -0.0667vw;
    }

    .media-showreel__badge--projects {
        top: 29.25vw;
        left: 52.8056vw;
        height: 9.1517vw;
        transform: translate(4.6361%, 24.7116%) rotate(-15deg);
    }

    .media-showreel__badge--sales {
        top: 29.9444vw;
        left: 65.7917vw;
        height: 8.895vw;
        transform: translate(4.4583%, 25.4738%) rotate(-15deg);
    }

    .media-services__intro {
        padding: 0;
    }

    .media-services__intro .media-section__title {
        font-size: 3.8928vw;
        line-height: 4.9444vw;
        letter-spacing: -0.2083vw;
    }

    .media-services__intro .media-section__subtitle {
        max-width: none;
        margin-top: 1.6667vw;
        font-size: 2.2222vw;
        line-height: 2.7778vw;
    }

    .media-services__grid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 0;
        gap: 0.8333vw;
    }

    .media-services__card {
        min-height: 17.5vw;
        height: 17.5vw;
        padding: 2.2222vw;
        border-radius: 3.3333vw;
    }

    .media-services__card .media-card__dot {
        width: 2.2222vw;
        height: 2.2222vw;
    }

    .media-services__card h3 {
        margin-top: 1.3889vw;
        font-size: 2.5vw;
        line-height: 3.1667vw;
    }

    .media-services__card p {
        margin-top: 0.8333vw;
        font-size: 1.3889vw;
        font-weight: 500;
        line-height: 1.7778vw;
        color: rgba(255, 255, 255, 0.5333);
    }

    /* The 834px footer is the same horizontal composition as the 1440px
       footer, scaled with the viewport. Keeping it in this fluid range also
       prevents the 1800px footer rules from taking over at exactly 1440px. */
    .media-footer {
        padding: 5vw;
        margin-bottom: 0;
        border-radius: 4.4444vw 4.4444vw 0 0;
    }

    .media-footer__cta {
        height: 15.1389vw;
        flex-direction: row;
        align-items: center;
        gap: 2.7778vw;
    }

    .media-footer__cta-text {
        flex: 0 0 44.7917vw;
        width: 44.7917vw;
    }

    .media-footer__cta-text .media-section__title {
        max-width: 44.7917vw;
        font-size: 3.6111vw;
        line-height: 1.05;
        letter-spacing: -0.1389vw;
    }

    .media-footer__cta-text p {
        max-width: 40.625vw;
        margin-top: 1.6667vw;
        font-size: 1.6667vw;
    }

    .media-footer__cta-btn {
        width: 38.8889vw;
        height: 11.1111vw;
        padding: 0;
        border-radius: 3.8889vw;
        gap: 0.8333vw;
        font-size: 2.6389vw;
    }

    .media-footer__cta-btn svg {
        width: 3.6111vw;
        height: 3.6111vw;
    }

    .media-footer__divider {
        height: 0.0694vw;
        margin: 3.6111vw 0;
    }

    .media-footer__grid {
        height: 17.0833vw;
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
        gap: 2.7778vw;
    }

    .media-footer .media-logo {
        width: 24.5vw;
    }

    .media-footer__col h4 {
        font-size: 1.3889vw;
    }

    .media-footer__col a,
    .media-footer__col p {
        margin-top: 1.3889vw;
        font-size: 1.1806vw;
    }
}

/* The badge group is not positioned as a straight scale of the 1800px
   frame. These two ranges interpolate through the exact 834, 1440 and
   1800px Figma coordinates. The translate compensates for the larger
   bounding box created by the -15deg rotation. */
@media (min-width: 769px) and (max-width: 1439px) {
    .media-showreel__badge--projects {
        top: calc(29.5776vw + 6.0832px);
        left: calc(53.7195vw + 6.4396px);
    }

    .media-showreel__badge--sales {
        top: calc(30.2723vw + 6.0792px);
        left: calc(66.7063vw + 6.4297px);
    }
}

@media (min-width: 1440px) and (max-width: 1799px) {
    .media-showreel__badge--projects {
        top: calc(26.25vw + 54px);
        left: calc(47.3611vw + 98px);
    }

    .media-showreel__badge--sales {
        top: calc(26.9444vw + 54px);
        left: calc(60.3472vw + 98px);
    }
}

/* ---------- ≤768 ---------- */

@media (max-width: 768px) {
    .media-header {
        top: 10px;
        height: 64px;
        padding: 0 8px 0 16px;
        border-radius: 20px;
    }

    .media-header .media-logo {
        width: 230px;
        max-width: calc(100vw - 124px);
    }

    .media-lang__full {
        display: none;
    }

    .media-lang__short {
        display: inline;
    }

    .media-header__lang {
        height: 44px;
        padding: 0 12px;
        border-radius: 14px;
        font-size: 14px;
        line-height: normal;
    }

    .media-header__lang svg {
        width: 12px;
        height: 12px;
    }

    /* The phone design drops the header CTA entirely — the hero and footer
       buttons carry that job, and the pill only holds logo + language. */
    .media-header__cta {
        display: none;
    }

    .media-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 120px 20px 40px;
    }

    .media-hero__title {
        font-size: 44px;
        letter-spacing: -1.6px;
    }

    .media-hero__subtitle {
        font-size: 16px;
        margin-top: 20px;
    }

    /* Hugs its label in the design — not a full-width bar. */
    .media-hero__cta {
        margin-top: 28px;
        height: 56px;
        padding: 0 36px;
    }

    .media-hero__words {
        flex: none;
        width: 100%;
        height: 380px;
        margin-top: 24px;
    }

    /* The 390px frame indents the whole word column ~28px off the screen
       edge (the hero's own 20px padding provides the rest) — every word
       starts from this same line and rotates around it. */
    .media-hero__word {
        left: 8px;
        font-size: 55px;
    }

    .media-hero__word-dot {
        width: 20px;
        height: 20px;
        margin-right: 16px;
    }

    .media-hero__dot {
        left: 8px;
        width: 20px;
        height: 20px;
        margin-top: -10px;
    }

    .media-section__title {
        font-size: 34px;
        letter-spacing: -1.2px;
    }

    .media-section__subtitle {
        font-size: 17px;
        margin-top: 16px;
    }

    .media-panel {
        border-radius: 40px;
    }

    .media-services {
        padding: 20px;
        border-radius: 42px;
    }

    .media-services__container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .media-showreel {
        border-radius: 32px;
    }

    .media-showreel__media {
        aspect-ratio: 14 / 11;
    }

    .media-showreel__brand {
        top: 16px;
        left: 16px;
        width: min(190px, calc(100% - 92px));
    }

    .media-showreel__media--photo {
        aspect-ratio: 14 / 11;
    }

    .media-showreel__badges {
        inset: 0;
    }

    .media-showreel__badge {
        position: absolute;
        width: calc(6.8401vw + 91.0538px);
        margin-left: 0;
        padding: 0 14px;
        border-radius: calc(1.2198vw + 16.2527px);
        font-size: calc(0.8123vw + 10.8419px);
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .media-showreel__badge--projects {
        top: calc(15.7083vw + 112.7375px);
        left: calc(77.188vw - 174.033px);
        height: calc(3.3500vw + 44.6149px);
        transform: translate(4.6361%, 24.7116%) rotate(-15deg);
    }

    .media-showreel__badge--sales {
        top: calc(15.9612vw + 116.1312px);
        left: calc(81.9396vw - 110.7143px);
        height: calc(3.2566vw + 43.3592px);
        transform: translate(4.4583%, 25.4738%) rotate(-15deg);
    }

    .media-showreel__sound {
        top: 14px;
        right: 14px;
        bottom: auto;
        width: 44px;
        height: 44px;
    }

    .media-services__intro {
        padding: 0;
    }

    .media-services__intro .media-section__title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -2px;
    }

    .media-services__intro .media-section__subtitle {
        margin-top: 16px;
        font-size: 18px;
        line-height: 23px;
    }

    .media-services__grid {
        grid-template-columns: 1fr;
        margin-top: 0;
        gap: 12px;
    }

    .media-services__card {
        height: 180px;
        min-height: 180px;
        padding: 24px;
        border-radius: 48px;
    }

    .media-process {
        padding: 60px 20px;
    }

    .media-process__list {
        margin-top: 28px;
    }

    .media-process__row {
        min-height: 104px;
        padding: 20px 24px;
        border-radius: 24px;
    }

    .media-process__info h3 {
        font-size: 24px;
    }

    .media-process__info p {
        font-size: 15px;
        max-width: 78%;
    }

    .media-process__num {
        font-size: 110px;
        right: 14px;
    }

    .media-trusted__intro {
        padding: 32px 20px 0;
    }

    .media-trusted__track {
        margin-top: 28px;
        padding: 0 14px;
    }

    .media-trusted__card {
        flex: 0 0 216px;
        height: 384px;
        border-radius: 20px;
    }

    .media-trusted__partners {
        margin-top: 28px;
        padding-bottom: 24px;
    }

    .media-trusted__partner {
        width: 156.25px;
        height: 100px;
        min-width: 156.25px;
        padding: 0 25px;
        border-width: 0.78px;
        border-radius: 38.75px;
    }

    .media-why {
        padding: 60px 20px 30px;
    }

    .media-why__grid {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .media-why__card {
        min-height: 0;
        padding: 22px 24px 28px;
        border-radius: 28px;
    }

    .media-card h3 {
        margin-top: 22px;
        font-size: 24px;
    }

    .media-card p {
        font-size: 16px;
    }

    /* Phone cards shrink their dot along with everything else. */
    .media-card__dot {
        width: 24px;
        height: 24px;
    }

    .media-footer {
        padding: 32px 20px;
        margin-top: 40px;
        margin-bottom: 0;
        border-radius: 42px 42px 0 0;
    }

    .media-footer__cta {
        gap: 32px;
    }

    .media-footer__cta-text .media-section__title {
        max-width: 350px;
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -2px;
    }

    .media-footer__cta-text p {
        max-width: 350px;
        font-size: 18px;
        margin-top: 16px;
        line-height: 1.3;
    }

    .media-footer__cta-btn {
        height: 100px;
        border-radius: 35px;
        padding: 0;
        gap: 7.5px;
        font-size: 23.75px;
    }

    .media-footer__cta-btn svg {
        width: 32.5px;
        height: 32.5px;
    }

    .media-footer__divider {
        margin: 32px 0;
    }

    .media-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        height: auto;
    }

    .media-footer__col h4 {
        font-size: 24px;
    }

    .media-footer__col a,
    .media-footer__col p {
        margin-top: 20px;
        font-size: 16px;
    }

    .media-footer__grid > .media-footer__col:nth-child(3) a {
        font-size: 20px;
        line-height: 1.3;
    }

    .media-footer__grid > .media-footer__col:nth-child(3) a + a {
        margin-top: 12px;
    }

    .media-modal {
        padding: 12px;
    }

    .media-modal__panel {
        border-radius: 28px;
    }

    .media-modal__panel--form {
        width: 100%;
        padding: 28px 20px;
        gap: 28px;
    }

    .media-modal__text h2 {
        font-size: 34px;
    }

    .media-modal__text p {
        font-size: 16px;
        margin-top: 16px;
    }

    .media-form__input {
        height: 56px;
        font-size: 15px;
        border-radius: 16px;
    }

    .media-form__textarea {
        height: 150px;
    }

    .media-form__submit {
        height: 56px;
        border-radius: 16px;
        font-size: 15px;
    }

    .media-modal__panel--success {
        padding: 36px 24px;
    }

    .media-modal__panel--success p {
        font-size: 16px;
        margin-top: 20px;
    }

    .media-modal__close {
        top: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 390px) {
    .media-showreel__badge {
        width: calc(33.6371vw - 13.4548px);
        padding-inline: calc(4vw - 1.6px);
        border-radius: calc(6.0029vw - 2.4012px);
        font-size: calc(4.0029vw - 1.6012px);
    }

    .media-showreel__badge--projects {
        top: calc(49.7143vw - 19.8857px);
        left: calc(36.2857vw - 14.5143px);
        height: calc(16.48vw - 6.592px);
    }

    .media-showreel__badge--sales {
        top: calc(50.9657vw - 20.3863px);
        left: calc(59.6714vw - 23.8686px);
        height: calc(16.0171vw - 6.4068px);
    }
}

@media (min-width: 375px) and (max-width: 768px) {
    .media-showreel__badges {
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0 12px 12px 0;
        transform: translate(-12px, -32px);
    }

    .media-showreel__badge {
        position: relative;
        top: auto;
        left: auto;
        flex: 0 0 auto;
    }

    .media-showreel__badge--sales {
        margin-left: calc(-2.0952vw - 27.71px);
    }
}

@media (min-width: 320px) and (max-width: 768px) {
    .media-showreel__media--photo {
        object-position: 39% -30%;
    }
}

/* ---------- ≤480 (Figma 390 frame) ---------- */

@media (max-width: 480px) {
    .media-hero__title {
        font-size: 38px;
    }

    .media-trusted__card {
        flex: 0 0 186px;
        height: 330px;
    }

    .media-footer__cta-btn {
        font-size: 23.75px;
    }

    .media-footer__grid {
        height: 623px;
    }

    .media-footer .media-logo {
        width: 341.49px;
    }
}