/* =====================================================
   VERY SMALL MOBILE — 380px AND BELOW
===================================================== */

@media (max-width: 380px) {
    .logo>a:first-child img {
        max-width: 100px;
    }

    .logo-divider {
        height: 25px;
    }

    .service-name span {
        font-size: 6px;
        letter-spacing: 1.2px;
    }

    .service-name strong {
        font-size: 12px;
    }

    .studio-hero,
    .studio-hero .min-vh-100,
    .studio-hero-row {
        min-height: 740px !important;
    }

    .hero-content h1 {
        font-size: 36px;
    }

    .hero-features {
        grid-template-columns: 1fr;
    }

    .primary-btn,
    .secondary-btn {
        max-width: 100%;
    }
}



/* =====================================================
   SMALL MOBILE — 576px AND ABOVE
===================================================== */

@media (min-width: 576px) {
    .logo {
        gap: 10px;
    }

    .logo>a:first-child img {
        max-width: 130px;
    }

    .logo-divider {
        height: 30px;
    }

    .service-name span {
        font-size: 8px;
        letter-spacing: 1.8px;
    }

    .service-name strong {
        font-size: 14px;
    }

    .toggle_menu {
        width: 42px;
        height: 42px;
        padding: 7px 9px;
    }

    #scroll-up {
        right: 20px;
        bottom: 20px;

        width: 46px;
        height: 46px;
    }


    .studio-hero,
    .studio-hero .min-vh-100,
    .studio-hero-row {
        min-height: 750px !important;
    }

    .studio-hero-bg img {
        object-position: 65% center;
    }

    .studio-hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(5, 5, 5, 0.97) 0%,
                rgba(5, 5, 5, 0.88) 60%,
                rgba(5, 5, 5, 0.58) 100%),
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.10) 0%,
                rgba(0, 0, 0, 0.38) 50%,
                rgba(0, 0, 0, 0.88) 100%);
    }

    .hero-label {
        font-size: 11px;
        gap: 10px;
    }

    .hero-label span {
        width: 27px;
    }

    .hero-content h1 {
        font-size: clamp(44px, 9vw, 54px);
        letter-spacing: -1.6px;
    }

    .price-row strong {
        font-size: 36px;
    }

    .hero-actions {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
    }

    .primary-btn,
    .secondary-btn {
        width: auto;
        max-width: none;
    }

    .hero-features {
        gap: 10px 18px;
    }

    .about-image img {
        height: 460px;
    }

    .experience-box {
        left: 22px;
        bottom: 22px;

        width: auto;
        max-width: 245px;

        padding: 22px;
    }

    .experience-box strong {
        font-size: 44px;
    }

    .experience-box span {
        font-size: 14px;
    }

    .about-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px 20px;

        margin: 32px 0;
    }

    .studio-intro::before {
        top: -160px;
        right: -180px;

        width: 400px;
        height: 400px;
    }

    .section-title {
        font-size: 44px;
    }

    .studio-service-card {
        min-height: 245px;
        padding: 26px 24px;
    }

    .service-top {
        margin-bottom: 40px;
    }

    .service-content {
        padding-right: 32px;
    }

    .service-content p {
        font-size: 14px;
    }

    .studio-tour::before {
        right: -170px;

        width: 350px;
        height: 350px;
    }

    .tour-video-card {
        height: 420px;
        border-radius: 11px;
    }

    .tour-badge {
        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .tour-play-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .tour-play strong {
        font-size: 21px;
    }

    .studio-gallery-large,
    .studio-gallery-small,
    .studio-gallery-medium {
        min-height: 340px;
    }

    .gallery-content {
        left: 22px;
        right: 56px;
        bottom: 22px;
    }

    .gallery-content strong {
        font-size: 24px;
    }

    .gallery-content>span {
        font-size: 14px;
    }

    .studio-tour-info-card {
        padding: 32px 28px;
        border-radius: 11px;
    }

    .studio-tour-info-card p,
    .studio-tour-info-card ul li {
        font-size: 15px;
    }

    .facility-item {
        grid-template-columns: 48px minmax(0, 1fr) 30px;
        align-items: center;

        min-height: 112px;
        padding: 22px 20px;
    }

    .facility-check {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 30px;
        height: 30px;

        font-size: 12px;
        font-weight: 700;

        color: var(--primary-color);
        background: rgba(255, 0, 55, 0.06);

        border: 1px solid rgba(255, 0, 55, 0.15);
        border-radius: 50%;
    }

    .facility-content .facility-title,
    .facility-content .facilityTitle {
        font-size: 20px;
    }

    .facility-content p {
        font-size: 14px;
    }

    .facility-booking-card {
        padding: 34px 28px;
        border-radius: 10px;
    }

    .facility-price .price-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
    }

    .facility-price strong {
        font-size: 50px;
    }

    .booking-features li {
        font-size: 14px;
    }

    .experience-item {
        grid-template-columns: minmax(0, 1fr) 38px;
        gap: 15px;

        padding: 22px 16px;
    }

    .experience-title {
        gap: 15px;
    }

    .experience-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .experience-title .experience-item-title,
    .experience-title .experienceTitle {
        font-size: 20px;
    }

    .experience-item>p {
        padding-left: 59px;

        font-size: 14px;
    }

    .experience-arrow {
        width: 36px;
        height: 36px;
    }

    .experience-bottom {
        padding: 25px 24px;
        border-radius: 7px;
    }

    .dark-outline-btn {
        width: auto;
    }

    .booking-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .booking-card {
        min-height: 290px;
        padding: 24px 22px;
    }

    .booking-card-top {
        margin-bottom: 42px;
    }

    .booking-card-number {
        font-size: 38px;
    }

    .booking-card-content .booking-title,
    .booking-card-content .bookingTitle {
        font-size: 23px;
    }

    .booking-process .dark-outline-btn {
        width: auto;
    }


    .faq-intro>p {
        font-size: 15px;
        line-height: 1.8;
    }

    .studio-faq .dark-outline-btn {
        width: auto;
    }

    .studio-faq-accordion .accordion-button {
        grid-template-columns: 38px minmax(0, 1fr) 22px;
        gap: 14px;

        min-height: 82px;
        padding: 20px 8px;

        font-size: 20px;
    }

    .faq-number {
        width: 33px;
        height: 33px;

        font-size: 11px;
    }

    .studio-faq-accordion .accordion-button::after {
        width: 20px;
        height: 20px;
    }

    .studio-faq-accordion .accordion-body {
        padding: 0 45px 24px 55px;

        font-size: 13px;
    }

    .booking-wrapper {
        border-radius: 10px;
    }

    .booking-content,
    .booking-form-card {
        padding: 38px 28px;
    }

    .booking-content .section-title {
        font-size: 43px;
    }

    .booking-description {
        font-size: 15px;
    }

    .booking-price-highlight>div {
        flex-direction: row;
        align-items: flex-end;
        gap: 14px;
    }

    .booking-price-highlight strong {
        font-size: 48px;
    }

    .booking-price-highlight small {
        padding-bottom: 4px;
    }

    .booking-benefit strong {
        font-size: 15px;
    }

    .booking-benefit small {
        font-size: 13px;
    }

    .booking-contact-item {
        padding: 13px 14px;
    }

    .booking-form-heading .booking-heading-title,
    .booking-form-heading .bookingHeadingTitle {
        font-size: 34px;
    }

    .booking-form-heading p {
        font-size: 14px;
        line-height: 1.75;
    }

    .form-group label {
        font-size: 13px;
    }

    .booking-consent>span:last-child {
        font-size: 13px;
    }


    .footer-main {
        padding: 58px 0 48px;
    }

    .footer-logo-wrap {
        flex-direction: row;
        align-items: center;
        gap: 12px;

        margin-bottom: 24px;
    }

    .footer-main-logo img {
        max-width: 135px;
    }

    .footer-logo-divider {
        display: block;
        height: 32px;
    }

    .footer-service-name span {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .footer-service-name strong {
        font-size: 18px;
    }

    .footer-brand>p {
        font-size: 14px;
    }

    .footer-column .footer-title,
    .footer-column .footerTitle {
        margin-bottom: 20px;

        font-size: 15px;
    }

    .footer-column ul {
        gap: 12px;
    }

    .footer-column ul li a {
        font-size: 14px;
    }

    .footer-contact-item {
        gap: 13px;
        padding: 13px 0;
    }

    .footer-contact-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .footer-contact-item small {
        font-size: 11px;
    }

    .footer-contact-item strong {
        font-size: 14px;
    }

    .footer-bottom p,
    .footer-legal a {
        font-size: 12px;
    }

    .gallery-card {
        min-height: 300px;
        border-radius: 9px;
    }

    .gallery-card-large {
        min-height: 390px;
    }

    .gallery-card-content,
    .gallery-card-large .gallery-card-content {
        left: 22px;
        right: 65px;
        bottom: 22px;
    }

    .gallery-card-content>span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .gallery-card-content .gallery-title,
    .gallery-card-content .galleryTitle {
        font-size: 22px;
    }

    .gallery-card-large .gallery-card-content .gallery-title,
    .gallery-card-large .gallery-card-content .galleryTitle {
        font-size: 30px;
    }

    .gallery-view-icon {
        right: 20px;
        bottom: 20px;

        width: 38px;
        height: 38px;
    }

    .gallery-bottom {
        padding: 24px 22px;
    }

    .gallery-bottom .primary-btn {
        width: auto;
    }

}




/* =====================================================
   TABLET — 768px AND ABOVE
===================================================== */

@media (min-width: 768px) {

    :root {
        --font-size: 16px;
        --line-height: 1.75;
    }

    body,
    p {
        font-size: 16px;
        line-height: 1.75;
    }

    h1 {
        font-size: clamp(48px, 8vw, 68px);
        letter-spacing: -1.8px;
    }

    h2 {
        font-size: clamp(38px, 6vw, 52px);
        letter-spacing: -1.2px;
    }

    h3 {
        font-size: 34px;
        letter-spacing: -0.7px;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 21px;
    }

    .section-label {
        margin-bottom: 18px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .section-label::before {
        width: 28px;
    }

    .section-padding {
        padding: 80px 0;
    }

    .section-padding-sm {
        padding: 65px 0;
    }



    .header {
        padding: 12px 0;
    }

    .header.sticky {
        padding: 9px 0;
    }

    .navigation {
        gap: 14px;
    }

    .logo {
        gap: 11px;
    }

    .logo>a:first-child img {
        max-width: 125px;
        max-height: 45px;
    }

    .logo-divider {
        height: 32px;
    }

    .service-name span {
        font-size: 7px;
        letter-spacing: 2px;
    }

    .service-name strong {
        font-size: 15px;
    }

    .header_action {
        display: block;
        margin-left: auto;
    }

    .toggle_menu {
        margin-left: 0;
    }

    .menu {
        top: calc(100% + 13px);
    }



    .studio-hero,
    .studio-hero .min-vh-100,
    .studio-hero-row {
        min-height: 720px !important;
    }

    .studio-hero-bg img {
        object-position: 68% center;
    }

    .studio-hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(5, 5, 5, 0.98) 0%,
                rgba(5, 5, 5, 0.92) 50%,
                rgba(5, 5, 5, 0.55) 100%),
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.15) 0%,
                rgba(0, 0, 0, 0.12) 55%,
                rgba(0, 0, 0, 0.82) 100%);
    }

    .studio-hero .min-vh-100,
    .studio-hero-row {
        padding-top: 125px;
        padding-bottom: 105px;
    }

    .hero-label {
        margin-bottom: 20px;

        font-size: 12px;
        letter-spacing: 2px;
    }

    .hero-label span {
        width: 30px;
    }

    .hero-content h1 {
        font-size: 50px;
        line-height: 0.99;
        letter-spacing: -1.8px;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.75;
    }

    .hero-price {
        margin-top: 27px;
    }

    .hero-price>span {
        font-size: 13px;
        letter-spacing: 1.2px;
    }

    .price-row strong {
        font-size: 38px;
    }

    .price-row small {
        font-size: 14px;
    }

    .hero-actions {
        margin-top: 30px;
    }

    .hero-features {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: 12px 22px;
        margin-top: 28px;
    }

    .hero-feature {
        font-size: 13px;
    }

    .hero-bottom-inner span {
        font-size: 11px;
        letter-spacing: 1.1px;
    }

    .about-image {
        border-radius: 16px;
    }

    .about-image img {
        height: 520px;
    }

    .experience-box {
        left: 26px;
        bottom: 26px;

        padding: 25px;

        border-radius: 12px;
    }

    .experience-box strong {
        font-size: 50px;
    }

    .about-studio .section-title {
        margin-bottom: 26px;
    }

    .about-studio p {
        margin-bottom: 18px;
    }

    .about-list {
        margin: 36px 0;

        font-size: 16px;
    }

    .about-item {
        padding-left: 28px;
    }

    .about-item::before {
        width: 10px;
        height: 10px;
    }

    .section-title {
        max-width: 540px;

        font-size: 46px;
        letter-spacing: -1.6px;
    }

    .section-description {
        font-size: 16px;
        line-height: 1.8;
    }

    .studio-service-card {
        min-height: 255px;
        padding: 26px;
    }

    .service-top {
        margin-bottom: 42px;
    }

    .service-content h3 {
        font-size: 24px;
    }

    .service-content p {
        font-size: 15px;
    }

    .service-arrow {
        right: 25px;
        bottom: 25px;

        width: 36px;
        height: 36px;
    }

    .studio-tour-heading {
        margin-bottom: 42px;
    }

    .studio-tour-description {
        font-size: 16px;
        line-height: 1.8;
    }

    .tour-video-card {
        height: 470px;
        border-radius: 12px;
    }

    .tour-badge {
        top: 22px;
        left: 22px;

        padding: 10px 13px;

        font-size: 10px;
    }

    .tour-play {
        left: 28px;
        bottom: 28px;

        gap: 14px;
    }

    .tour-play-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .tour-play small {
        display: block;
    }

    .tour-play strong {
        font-size: 23px;
    }

    .studio-gallery-large,
    .studio-gallery-small,
    .studio-gallery-medium {
        min-height: 380px;
    }

    .gallery-content {
        left: 24px;
        right: 58px;
        bottom: 24px;
    }

    .gallery-content small {
        font-size: 11px;
    }

    .gallery-content strong {
        font-size: 25px;
    }

    .gallery-arrow {
        right: 21px;
        bottom: 24px;

        width: 38px;
        height: 38px;
    }

    .studio-tour-info-card {
        padding: 36px 32px;
    }

    .studio-tour-info-card h3 {
        font-size: 34px;
    }

    .studio-tour-info-card p {
        margin-bottom: 24px;

        font-size: 16px;
        line-height: 1.75;
    }

    .studio-tour-info-card ul li {
        font-size: 16px;
    }

    .facilities-heading {
        margin-bottom: 46px;
    }

    .facilities-description {
        font-size: 16px;
        line-height: 1.8;
    }

    .facility-item {
        grid-template-columns: 36px 52px minmax(0, 1fr) 30px;
        gap: 16px;

        min-height: 118px;
        padding: 22px;
    }

    .facility-number {
        display: block;

        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.4px;

        color: rgba(255, 255, 255, 0.28);
    }

    .facility-icon {
        width: 48px;
        height: 48px;
    }

    .facility-content .facility-title,
    .facility-content .facilityTitle {
        font-size: 21px;
    }

    .facility-booking-card {
        padding: 35px 30px;
    }

    .facility-price strong {
        font-size: 51px;
    }

    .additional-time strong {
        font-size: 39px;
    }

    .booking-features li {
        font-size: 15px;
    }

    .facility-note {
        font-size: 13px;
    }


    .experience-heading {
        margin-bottom: 46px;
    }

    .experience-description {
        font-size: 16px;
        line-height: 1.8;
    }

    .experience-item {
        grid-template-columns: 40px minmax(0, 1fr) 38px;
        gap: 18px;

        min-height: 118px;
        padding: 24px 20px;
    }

    .experience-number {
        display: block;

        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.4px;

        color: rgba(255, 255, 255, 0.28);
    }

    .experience-title {
        grid-column: 2;
    }

    .experience-title .experience-item-title,
    .experience-title .experienceTitle {
        font-size: 21px;
    }

    .experience-item>p {
        grid-column: 2 / 3;

        margin-top: -8px;
        padding-left: 64px;

        font-size: 15px;
    }

    .experience-arrow {
        grid-column: 3;
        grid-row: 1 / 3;

        width: 38px;
        height: 38px;
    }

    .experience-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 30px;

        margin-top: 34px;
        padding: 26px 28px;
    }

    .booking-process-heading {
        margin-bottom: 44px;
    }

    .booking-process-description {
        font-size: 16px;
        line-height: 1.8;
    }

    .booking-card {
        min-height: 310px;
        padding: 25px 23px;
    }

    .booking-card-top {
        margin-bottom: 48px;
    }

    .booking-card-number {
        font-size: 41px;
    }

    .booking-card-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .booking-card-content .booking-title,
    .booking-card-content .bookingTitle {
        font-size: 24px;
    }

    .booking-process-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 30px;

        margin-top: 32px;
        padding: 24px 25px;
    }

    .faq-intro .section-title {
        margin-bottom: 24px;
    }

    .faq-intro>p {
        margin-bottom: 30px;
    }

    .studio-faq-accordion .accordion-button {
        grid-template-columns: 40px minmax(0, 1fr) 26px;
        gap: 16px;

        min-height: 88px;
        padding: 22px 10px;

        font-size: 21px;
    }

    .faq-number {
        width: 35px;
        height: 35px;

        font-size: 12px;
    }

    .studio-faq-accordion .accordion-button::after {
        width: 21px;
        height: 21px;
    }

    .studio-faq-accordion .accordion-body {
        padding: 0 52px 26px 64px;

        font-size: 14px;
        line-height: 1.8;
    }

    .studio-booking::before {
        left: -180px;
        bottom: -180px;

        width: 380px;
        height: 380px;
    }

    .booking-content,
    .booking-form-card {
        padding: 42px 34px;
    }

    .booking-content .section-title {
        font-size: 46px;
    }

    .booking-description {
        margin-bottom: 28px;
    }

    .booking-price-highlight {
        margin-bottom: 28px;
        padding: 22px 0;
    }

    .booking-price-highlight strong {
        font-size: 50px;
    }

    .booking-benefits {
        gap: 14px;

        margin-bottom: 32px;
    }

    .benefit-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

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

    .booking-form-heading {
        margin-bottom: 30px;
    }

    .booking-form-heading .booking-heading-title,
    .booking-form-heading .bookingHeadingTitle {
        font-size: 37px;
    }

    .form-group input,
    .form-group select {
        height: 48px;
    }

    .form-group textarea {
        min-height: 105px;
    }

    .booking-consent>span:last-child {
        font-size: 14px;
    }

    .booking-submit-btn {
        min-height: 56px;
    }

    .studio-footer::before {
        right: -175px;
        bottom: -175px;

        width: 360px;
        height: 360px;
    }

    .footer-main {
        padding: 62px 0 50px;
    }

    .footer-main-logo img {
        max-width: 145px;
    }

    .footer-logo-divider {
        height: 35px;
    }

    .footer-service-name strong {
        font-size: 20px;
    }

    .footer-social a {
        width: 42px;
        height: 42px;
    }

    .footer-column .footer-title,
    .footer-column .footerTitle {
        margin-bottom: 22px;

        font-size: 16px;
    }

    .footer-column ul {
        gap: 13px;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 12px;

        padding: 22px 0;
    }

    .footer-bottom p,
    .footer-legal a {
        font-size: 13px;
    }

    .studio-gallery::before {
        left: -180px;
        bottom: -180px;

        width: 370px;
        height: 370px;
    }

    .gallery-heading {
        margin-bottom: 44px;
    }

    .gallery-description {
        font-size: 16px;
        line-height: 1.8;
    }

    .studio-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 420px repeat(2, 230px);
    }

    .gallery-card {
        min-height: 0;
    }

    .gallery-card-large {
        grid-column: span 2;
        grid-row: span 1;

        min-height: 0;
    }

    .gallery-card-large .gallery-card-content .gallery-title,
    .gallery-card-large .gallery-card-content .galleryTitle {
        font-size: 32px;
    }

    .gallery-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 30px;

        margin-top: 30px;
        padding: 24px 26px;
    }

}


/* =====================================================
   LAPTOP — 992px AND ABOVE
===================================================== */

@media (min-width: 992px) {

    h1 {
        font-size: clamp(56px, 6vw, 76px);
        letter-spacing: -2.2px;
    }

    h2 {
        font-size: clamp(44px, 4.8vw, 58px);
        letter-spacing: -1.5px;
    }

    h3 {
        font-size: clamp(34px, 3vw, 38px);
        letter-spacing: -0.8px;
    }

    h4 {
        font-size: 25px;
    }

    h5 {
        font-size: 22px;
    }

    .section-padding {
        padding: 95px 0;
    }

    .section-padding-sm {
        padding: 75px 0;
    }

    .header {
        padding: 14px 0;
    }

    .header.sticky {
        padding: 10px 0;
    }

    .navigation {
        position: static;
        gap: 20px;
    }

    .logo {
        gap: 12px;
        flex: 0 0 auto;
    }

    .logo>a:first-child img {
        max-width: 135px;
    }

    .logo-divider {
        height: 34px;
    }

    .service-name span {
        font-size: 9px;
        letter-spacing: 2.2px;
    }

    .service-name strong {
        font-size: 17px;
    }

    .toggle_menu {
        display: none;
    }

    .menu {
        position: static;

        width: auto;
        max-height: none;

        margin-left: auto;
        overflow: visible;

        background: transparent;
        border: 0;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .menu ul {
        display: flex;
        align-items: center;
        gap: 20px;

        padding: 0;
    }

    .menu ul li {
        border-bottom: 0;
    }

    .menu ul li a {
        padding: 10px 0;

        font-size: 13px;

        color: rgba(255, 255, 255, 0.72);
        background: transparent;
    }

    .menu ul li a:hover,
    .menu ul li a.active {
        color: var(--color-white);
        background: transparent;
    }

    .menu ul li a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 2px;

        display: block;

        width: 0;
        height: 1px;

        background-color: var(--primary-color);

        transition: width var(--transition);
    }

    .menu ul li a:hover::after,
    .menu ul li a.active::after {
        width: 100%;
    }

    .header_action {
        display: block;
        margin-left: 0;
    }


    .studio-hero-bg img {
        object-position: center 58px;
    }

    .studio-hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(5, 5, 5, 0.98) 0%,
                rgba(5, 5, 5, 0.94) 24%,
                rgba(5, 5, 5, 0.72) 42%,
                rgba(5, 5, 5, 0.35) 58%,
                rgba(5, 5, 5, 0.10) 72%,
                rgba(5, 5, 5, 0) 100%),
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.10) 0%,
                rgba(0, 0, 0, 0) 45%,
                rgba(0, 0, 0, 0.45) 100%);
    }

    .studio-hero-glow {
        top: 100px;
        left: -120px;

        width: 500px;
        height: 500px;
    }

    .studio-hero,
    .studio-hero .min-vh-100,
    .studio-hero-row {
        min-height: 720px !important;
    }

    .studio-hero .min-vh-100,
    .studio-hero-row {
        padding-top: 110px;
        padding-bottom: 105px;
    }

    .hero-content {
        max-width: 650px;
    }

    .hero-label {
        gap: 12px;
        margin-bottom: 22px;

        font-size: 14px;
        letter-spacing: 2.2px;
    }

    .hero-label span {
        width: 32px;
    }

    .hero-content h1 {
        font-size: 52px;
        line-height: 0.98;
        letter-spacing: -2.3px;
    }

    .hero-description {
        margin-top: 20px;

        font-size: 17px;
    }

    .hero-price {
        margin-top: 30px;
    }

    .hero-price>span {
        font-size: 14px;
        letter-spacing: 1.3px;
    }

    .price-row strong {
        font-size: 39px;
    }

    .hero-actions {
        gap: 18px;
        margin-top: 32px;
    }

    .hero-features {
        gap: 12px 25px;
        margin-top: 25px;
    }

    .hero-bottom-inner {
        justify-content: space-between;
        gap: 25px;

        min-height: 55px;
        overflow: visible;
    }

    .hero-bottom-inner span {
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    .hero-bottom-inner span:not(:last-child)::after {
        right: -27px;
    }

    .about-image {
        border-radius: 18px;
    }

    .about-image img {
        height: 585px;
    }

    .experience-box {
        left: 30px;
        bottom: 30px;

        padding: 28px;

        border-radius: 14px;
    }

    .experience-box strong {
        font-size: 54px;
    }

    .experience-box span {
        margin-top: 8px;
        line-height: 1.6;
    }

    .about-studio .section-title {
        margin-bottom: 30px;
    }

    .about-studio p {
        margin-bottom: 20px;
    }

    .about-list {
        gap: 15px;

        margin: 40px 0;
    }

    .studio-intro::before {
        top: -180px;
        right: -180px;

        width: 460px;
        height: 460px;
    }

    .section-title {
        max-width: 620px;

        font-size: 46px;
        letter-spacing: -2px;
    }

    .section-description {
        margin-top: 0;
    }

    .studio-service-card {
        min-height: 280px;
        padding: 30px;
    }

    .service-top {
        margin-bottom: 56px;
    }

    .service-number {
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .service-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .service-icon svg {
        width: 23px;
        height: 23px;
    }

    .service-content {
        padding-right: 36px;
    }

    .service-content h3 {
        margin-bottom: 13px;
        font-size: 25px;
    }

    .service-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .service-arrow {
        right: 28px;
        bottom: 27px;
    }

    .studio-tour::before {
        top: 80px;
        right: -150px;

        width: 400px;
        height: 400px;
    }

    .studio-tour-heading {
        margin-bottom: 50px;
    }

    .studio-tour-description {
        margin-left: auto;
    }

    .tour-video-card {
        height: 540px;
        border-radius: 14px;
    }

    .tour-badge {
        top: 28px;
        left: 28px;

        padding: 10px 14px;
    }

    .tour-play {
        left: 36px;
        bottom: 34px;

        gap: 16px;
    }

    .tour-play-icon {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .tour-play strong {
        font-size: 25px;
    }

    .studio-gallery-large,
    .studio-gallery-small {
        min-height: 400px;
    }

    .studio-gallery-medium,
    .studio-tour-info-card {
        min-height: 370px;
    }

    .studio-gallery-card {
        border-radius: 12px;
    }

    .gallery-content {
        left: 26px;
        right: 60px;
        bottom: 25px;
    }

    .gallery-content small {
        margin-bottom: 9px;

        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .gallery-content strong {
        margin-bottom: 8px;

        font-size: 27px;
    }

    .gallery-content>span {
        font-size: 13px;
        line-height: 1.6;
    }

    .gallery-arrow {
        right: 24px;
        bottom: 28px;

        width: 40px;
        height: 40px;
    }

    .studio-tour-info-card {
        padding: 40px;
        border-radius: 12px;
    }

    .studio-tour-info-card h3 {
        margin-bottom: 20px;

        font-size: 36px;
    }

    .studio-tour-info-card p {
        margin-bottom: 25px;
    }

    .studio-tour-info-card ul {
        margin-bottom: 30px;
    }

    .studio-tour-info-card ul li {
        margin-bottom: 13px;
    }

    .facilities-description {
        margin-left: auto;
    }

    .facility-booking-card {
        position: sticky;
        top: 100px;

        min-height: 100%;
    }

    .experience-description {
        margin-left: auto;
    }

    .experience-item {
        grid-template-columns:
            42px minmax(230px, 0.9fr) minmax(280px, 1.1fr) 38px;

        align-items: center;
        gap: 18px;

        min-height: 122px;
        padding: 25px 22px;
    }

    .experience-title {
        grid-column: auto;
    }

    .experience-item>p {
        grid-column: auto;

        margin-top: 0;
        padding-left: 0;

        font-size: 16px;
        line-height: 1.7;
    }

    .experience-arrow {
        grid-column: auto;
        grid-row: auto;
    }

    .experience-title .experience-item-title,
    .experience-title .experienceTitle {
        font-size: 21px;
    }

    .experience-bottom {
        margin-top: 38px;
        padding: 27px 30px;

        border-radius: 8px;
    }

    .booking-process-description {
        margin-left: auto;
    }

    .booking-card {
        min-height: 320px;
        padding: 26px 24px;
    }

    .booking-card-top {
        margin-bottom: 52px;
    }

    .booking-card-number {
        font-size: 43px;
    }

    .booking-card-content .booking-title,
    .booking-card-content .bookingTitle {
        font-size: 25px;
    }

    .booking-card-arrow {
        right: 22px;
        bottom: 22px;

        width: 37px;
        height: 37px;
    }

    .faq-intro {
        position: sticky;
        top: 120px;

        margin-bottom: 0;
    }

    .faq-intro .section-title {
        margin-bottom: 26px;
    }

    .faq-intro>p {
        margin-bottom: 32px;
    }

    .studio-faq-accordion .accordion-button {
        grid-template-columns: 42px minmax(0, 1fr) 28px;
        gap: 18px;

        min-height: 92px;
        padding: 24px 12px;

        font-size: 22px;
        line-height: 1.25;
    }

    .faq-number {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

    .studio-faq-accordion .accordion-button::after {
        width: 22px;
        height: 22px;
    }

    .studio-faq-accordion .accordion-body {
        padding: 0 58px 28px 72px;
    }

    .booking-content {
        min-height: 100%;
        padding: 45px 35px;

        border-right: 1px solid var(--border-color);
        border-bottom: 0;
    }

    .booking-form-card {
        min-height: 100%;
        padding: 45px 38px;
    }

    .booking-content .section-title {
        font-size: 47px;
    }

    .booking-contact {
        grid-template-columns: 1fr;

        margin-top: auto;
    }

    .booking-price-highlight strong {
        font-size: 48px;
    }

    .booking-form-heading .booking-heading-title,
    .booking-form-heading .bookingHeadingTitle {
        font-size: 39px;
    }

    .form-group input,
    .form-group select {
        height: 45px;
    }

    .form-group textarea {
        min-height: 100px;
    }

    .footer-main {
        padding: 70px 0 58px;
    }

    .footer-logo-wrap {
        gap: 16px;

        margin-bottom: 25px;
    }

    .footer-main-logo img {
        max-width: 155px;
        max-height: 52px;
    }

    .footer-logo-divider {
        height: 38px;
    }

    .footer-service-name span {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .footer-service-name strong {
        font-size: 22px;
    }

    .footer-brand>p {
        margin-bottom: 27px;

        line-height: 1.8;
    }

    .footer-contact-column {
        margin-left: 0;
    }

    .footer-bottom {
        grid-template-columns: 1fr auto;
        gap: 25px;

        min-height: 76px;
        padding: 0;

        text-align: left;
    }

    .footer-legal {
        justify-content: flex-end;
        gap: 22px;
    }

    .footer-bottom p,
    .footer-legal a {
        font-size: 14px;
    }

    .gallery-description {
        margin-left: auto;
    }

    .studio-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, 240px);
    }

    .gallery-card-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* .gallery-card {
        border-radius: 0;
    } */

    .gallery-card-content {
        left: 24px;
        right: 60px;
        bottom: 23px;
    }

    .gallery-card-large .gallery-card-content {
        left: 32px;
        right: 90px;
        bottom: 31px;
    }

    .gallery-card-large .gallery-card-content .gallery-title,
    .gallery-card-large .gallery-card-content .galleryTitle {
        font-size: 32px;
    }

    .gallery-view-icon {
        right: 22px;
        bottom: 22px;

        width: 40px;
        height: 40px;

        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.16);

        opacity: 0;
        transform: translateY(7px);
    }

    .gallery-bottom {
        margin-top: 32px;
        padding: 25px 28px;

        border-radius: 0;
    }


}


/* =====================================================
   DESKTOP — 1200px AND ABOVE
===================================================== */

@media (min-width: 1200px) {

    h1 {
        font-size: clamp(60px, 6vw, 82px);
        letter-spacing: -2.5px;
    }

    h2 {
        font-size: clamp(48px, 4.5vw, 62px);
        letter-spacing: -1.8px;
    }

    h3 {
        font-size: clamp(36px, 3vw, 40px);
    }

    h4 {
        font-size: 26px;
    }

    .section-padding {
        padding: 110px 0;
    }

    .section-padding-sm {
        padding: 80px 0;
    }


    .navigation {
        gap: 28px;
    }

    .logo>a:first-child img {
        max-width: 175px;
    }

    .logo-divider {
        height: 38px;
    }

    .service-name span {
        font-size: 12px;
        letter-spacing: 2.8px;
    }

    .service-name strong {
        font-size: 22px;
    }

    .menu ul {
        gap: 30px;
    }

    .menu ul li a {
        font-size: 16px;
    }



    .studio-hero,
    .studio-hero .min-vh-100,
    .studio-hero-row {
        min-height: 760px !important;
    }

    .hero-content {
        max-width: 720px;
    }

    .hero-content h1 {
        letter-spacing: normal;
    }

    .hero-bottom-inner span:not(:last-child)::after {
        right: -42px;
    }

    .tour-video-card {
        height: 620px;
    }

    .studio-gallery-large,
    .studio-gallery-small {
        min-height: 440px;
    }

    .studio-gallery-medium,
    .studio-tour-info-card {
        min-height: 400px;
    }

    .studio-facilities::before {
        left: -210px;
        bottom: -210px;

        width: 460px;
        height: 460px;
    }

    .facilities-heading {
        margin-bottom: 52px;
    }

    .facility-item {
        grid-template-columns: 45px 58px minmax(0, 1fr) 34px;
        gap: 20px;

        min-height: 118px;
        padding: 24px 26px;
    }

    .facility-icon {
        width: 52px;
        height: 52px;
    }

    .facility-content .facility-title,
    .facility-content .facilityTitle {
        font-size: 22px;
    }

    .facility-booking-card {
        padding: 38px;
        border-radius: 12px;
    }

    .booking-card-label {
        margin-bottom: 22px;

        font-size: 14px;
        letter-spacing: 1.8px;
    }

    .facility-price {
        padding-bottom: 26px;
    }

    .facility-price strong {
        font-size: 58px;
    }

    .price-meta span,
    .price-meta small {
        font-size: 16px;
    }

    .additional-time {
        padding: 25px 0;
    }

    .additional-time strong {
        font-size: 43px;
    }

    .booking-features {
        margin: 27px 0 30px;
    }

    .booking-features li {
        margin-bottom: 13px;

        font-size: 16px;
    }

    .facility-note {
        font-size: 14px;
    }

    .studio-experience::before {
        top: -180px;
        right: -180px;

        width: 450px;
        height: 450px;
    }

    .experience-heading {
        margin-bottom: 52px;
    }

    .experience-item {
        grid-template-columns:
            55px minmax(250px, 0.9fr) minmax(320px, 1.1fr) 42px;

        gap: 25px;
    }

    .experience-number {
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    .experience-title {
        gap: 18px;
    }

    .experience-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .experience-title .experience-item-title,
    .experience-title .experienceTitle {
        font-size: 23px;
    }

    .experience-arrow {
        width: 38px;
        height: 38px;
    }

    .booking-process::before {
        top: -170px;
        right: -170px;

        width: 420px;
        height: 420px;
    }

    .booking-process-heading {
        margin-bottom: 50px;
    }

    .booking-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    .booking-timeline::before {
        content: "";
        position: absolute;
        top: 54px;
        left: 8%;
        right: 8%;
        z-index: -1;

        display: block;

        height: 1px;

        background:
            linear-gradient(90deg,
                rgba(239, 35, 60, 0.10),
                rgba(239, 35, 60, 0.55),
                rgba(239, 35, 60, 0.10));
    }

    .booking-card {
        min-height: 340px;
        padding: 27px 25px;

        border-radius: 10px;
    }

    .booking-card-top {
        margin-bottom: 55px;
    }

    .booking-card-number {
        font-size: 44px;
    }

    .booking-card-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .booking-card-content .booking-title,
    .booking-card-content .bookingTitle {
        margin-bottom: 14px;
        font-size: 25px;
    }

    .booking-card-arrow {
        right: 23px;
        bottom: 23px;
    }

    .booking-card-link {
        padding-top: 28px;
    }

    .booking-process-footer {
        margin-top: 35px;
        padding: 25px 28px;

        border-radius: 8px;
    }

    .studio-faq::before {
        top: -180px;
        right: -180px;

        width: 420px;
        height: 420px;
    }

    .studio-booking::before {
        left: -190px;
        bottom: -190px;

        width: 440px;
        height: 440px;
    }

    .booking-wrapper {
        border-radius: 14px;

        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
    }

    .booking-content {
        padding: 52px 45px;
    }

    .booking-form-card {
        padding: 52px 48px;
    }

    .booking-content .section-title {
        margin-bottom: 25px;

        font-size: 42px;
    }

    .booking-description {
        margin-bottom: 30px;
    }

    .booking-price-highlight {
        margin-bottom: 30px;
        padding: 23px 0;
    }

    .booking-price-highlight>span {
        margin-bottom: 12px;

        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .booking-price-highlight strong {
        font-size: 53px;
    }

    .booking-price-highlight small {
        font-size: 16px;
    }

    .booking-benefits {
        margin-bottom: 35px;
    }

    .booking-benefit strong {
        font-size: 16px;
    }

    .booking-contact-item {
        padding: 14px 15px;
    }

    .booking-contact-item>span {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .booking-contact-item small {
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    .booking-contact-item strong {
        font-size: 14px;
    }

    .booking-form-heading {
        margin-bottom: 32px;
    }

    .booking-form-heading>span {
        margin-bottom: 14px;

        font-size: 10px;
        letter-spacing: 1.7px;
    }

    .booking-form-heading .booking-heading-title,
    .booking-form-heading .bookingHeadingTitle {
        margin-bottom: 15px;

        font-size: 39px;
        line-height: 1.05;
    }

    .studio-footer::before {
        right: -180px;
        bottom: -180px;

        width: 420px;
        height: 420px;
    }

    .footer-main {
        padding: 80px 0 68px;
    }

    .footer-contact-column {
        margin-left: auto;
    }

    .footer-bottom {
        grid-template-columns: 1fr auto 1fr;
    }

    .footer-legal {
        justify-content: center;
    }

    .footer-webpulse-link {
        display: inline-flex;
    }

    .studio-gallery::before {
        left: -190px;
        bottom: -190px;

        width: 430px;
        height: 430px;
    }

    .gallery-heading {
        margin-bottom: 50px;
    }

    .studio-gallery-grid {
        grid-template-rows: repeat(3, 270px);
    }

    .gallery-card-large .gallery-card-content .gallery-title,
    .gallery-card-large .gallery-card-content .galleryTitle {
        font-size: 36px;
        line-height: 1.05;
    }

}


/* =====================================================
   LARGE DESKTOP — 1400px AND ABOVE
===================================================== */

@media (min-width: 1400px) {

    .container {
        max-width: var(--container-width);
    }
}



/* =====================================================
   HOVER-CAPABLE DEVICES ONLY
===================================================== */

@media (hover: hover) and (pointer: fine) {
    .studio-service-card:hover {
        border-color: rgba(239, 35, 60, 0.25);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.38);
    }

    .studio-service-card:hover .service-card-bg {
        opacity: 1;
        transform: scale(1);
    }

    .studio-service-card:hover .service-card-overlay {
        opacity: 1;
    }

    .studio-service-card:hover .service-line {
        transform: scaleX(1);
    }

    .studio-service-card:hover .service-number {
        color: rgba(255, 255, 255, 0.80);
    }

    .studio-service-card:hover .service-icon {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: rotate(-8deg);

        box-shadow:
            0 12px 30px rgba(239, 35, 60, 0.28);
    }

    .studio-service-card:hover .service-content p {
        color: rgba(255, 255, 255, 0.84);
    }

    .studio-service-card:hover .service-arrow {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: translateX(0);
    }

    .tour-video-card:hover img {
        transform: scale(1.045);
    }

    .tour-video-card:hover .tour-play-icon {
        background: var(--primary-hover);
        transform: scale(1.08);
    }

    .studio-gallery-card:hover img {
        filter: brightness(1.05);
        transform: scale(1.055);
    }

    .studio-gallery-card:hover .gallery-overlay {
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.02) 0%,
                rgba(0, 0, 0, 0.08) 42%,
                rgba(0, 0, 0, 0.77) 100%);
    }

    .studio-gallery-card:hover .gallery-arrow {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: translateX(0);
    }

    .facility-item:hover {
        background: rgba(255, 255, 255, 0.035);
        transform: translateX(5px);
    }

    .facility-item:hover::before {
        transform: scaleY(1);
    }

    .facility-item:hover .facility-icon {
        color: #ffffff;
        background: var(--primary-color);

        transform: rotate(-6deg);
    }

    .experience-item:hover {
        padding-left: 30px;
        background: rgba(255, 255, 255, 0.025);
    }

    .experience-item:hover::before {
        width: 100%;
    }

    .experience-item:hover::after {
        height: 58%;
    }

    .experience-item:hover .experience-icon {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: rotate(-7deg);

        box-shadow:
            0 12px 30px rgba(239, 35, 60, 0.20);
    }

    .experience-item:hover .experience-arrow {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: translateX(4px);
    }

    .dark-outline-btn:hover {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .dark-outline-btn:hover svg {
        transform: translateX(4px);
    }

    .creative-image:hover img {
        transform: scale(1.05);
    }

    .creative-play:hover {
        color: var(--color-white);
        background: var(--primary-hover);

        transform: translate(-50%, -50%) scale(1.08);
    }

    .creative-buttons .secondary-btn:hover {
        color: #111111;
        background: #ffffff;
    }

    .booking-card:hover {
        background: #151515;
        border-color: rgba(239, 35, 60, 0.22);

        transform: translateY(-8px);

        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.32);
    }

    .booking-card:hover::before {
        transform: scaleX(1);
    }

    .booking-card:hover::after {
        opacity: 1;
    }

    .booking-card:hover .booking-card-number {
        color: rgba(239, 35, 60, 0.48);
    }

    .booking-card:hover .booking-card-icon {
        color: #ffffff;
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: rotate(-7deg);
    }

    .booking-card:hover .booking-card-arrow {
        color: #ffffff;
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: translateX(4px);
    }

    .booking-card-link:hover {
        color: var(--primary-color);
    }

    .booking-card-link:hover svg {
        transform: translateX(4px);
    }

    .booking-process .dark-outline-btn:hover {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .studio-faq-accordion .accordion-button:hover {
        padding-left: 20px;

        color: var(--color-white);
        background: rgba(255, 255, 255, 0.025);
    }

    .studio-faq .dark-outline-btn:hover {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .booking-contact-item:hover {
        color: inherit;
        background: rgba(255, 255, 255, 0.035);
        border-color: rgba(239, 35, 60, 0.22);
    }

    .footer-service-name:hover strong {
        color: var(--primary-color);
    }

    .footer-social a:hover {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: translateY(-3px);
    }

    .footer-column ul li a:hover {
        padding-left: 15px;

        color: var(--color-white);
    }

    .footer-column ul li a:hover::before {
        width: 9px;
    }

    .footer-contact-item:hover {
        color: inherit;
    }

    .footer-contact-item:hover .footer-contact-icon {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .footer-legal a:hover {
        color: var(--primary-color);
    }

    .footer-webpulse-link:hover {
        color: var(--color-white);
    }

    .studio-booking-modal .btn-close:hover {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .gallery-card:hover {
        color: var(--color-white);

        border-color: rgba(239, 35, 60, 0.35);

        transform: translateY(-4px);

        box-shadow: 0 24px 55px rgba(0, 0, 0, 0.38);
    }

    .gallery-card:hover img {
        transform: scale(1.1);
    }

    .gallery-card:hover .gallery-overlay {
        background:
            linear-gradient(180deg,
                rgba(5, 5, 5, 0.02) 0%,
                rgba(5, 5, 5, 0.22) 38%,
                rgba(5, 5, 5, 0.94) 100%);
    }

    .gallery-card:hover::after {
        transform: scaleX(1);
    }

    .gallery-card:hover .gallery-view-icon {
        opacity: 1;
        transform: translateY(0);

        background: var(--primary-color);
        border-color: var(--primary-color);
    }

}


/* =====================================================
   TOUCH DEVICES
===================================================== */

@media (hover: none) and (pointer: coarse) {
    .studio-service-card {
        box-shadow: none;
    }

    .service-card-bg {
        opacity: 0.32;
        transform: scale(1);
    }

    .service-card-overlay {
        opacity: 1;
    }

    .service-content p {
        color: rgba(255, 255, 255, 0.72);
    }

    .service-number {
        color: rgba(255, 255, 255, 0.72);
    }

    .service-line {
        transform: scaleX(1);
    }

    .tour-video-card img,
    .studio-gallery-card img {
        transform: none;
        filter: none;
    }

    .gallery-arrow {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);

        transform: translateX(0);
    }

    .facility-item::before {
        transform: scaleY(1);
    }

    .facility-item {
        transform: none;
    }

    .experience-item::after {
        height: 58%;
    }

    .experience-arrow {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .creative-image img {
        transform: none;
    }

    .booking-card::before {
        transform: scaleX(1);
    }

    .booking-card-arrow {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .studio-faq-accordion .accordion-button {
        -webkit-tap-highlight-color: transparent;
    }

    .studio-faq-accordion .accordion-button:not(.collapsed) {
        padding-left: 8px;
    }

    .booking-contact-item {
        -webkit-tap-highlight-color: transparent;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
    }

    .footer-social a,
    .footer-contact-item,
    .footer-column ul li a {
        -webkit-tap-highlight-color: transparent;
    }

    .footer-contact-icon {
        color: var(--color-white);
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .gallery-card {
        -webkit-tap-highlight-color: transparent;
    }

    .gallery-card::after {
        transform: scaleX(1);
    }

    .gallery-card img {
        transform: scale(1);
    }

    .gallery-view-icon {
        opacity: 1;
        transform: none;

        background: var(--primary-color);
        border-color: var(--primary-color);
    }


}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .studio-service-card,
    .service-card-bg,
    .service-card-overlay,
    .service-line,
    .service-icon,
    .service-arrow,
    .service-number,
    .service-content p {
        transition: none;
    }

    .tour-video-card img,
    .tour-play-icon,
    .studio-gallery-card img,
    .gallery-overlay,
    .gallery-arrow {
        transition: none;
    }

    .facility-item,
    .facility-item::before,
    .facility-icon {
        transition: none;
    }

    .experience-item,
    .experience-item::before,
    .experience-item::after,
    .experience-icon,
    .experience-arrow,
    .dark-outline-btn,
    .dark-outline-btn svg {
        transition: none;
    }

    .creative-image img,
    .creative-play,
    .booking-card,
    .booking-card::before,
    .booking-card::after,
    .booking-card-number,
    .booking-card-icon,
    .booking-card-arrow,
    .booking-card-link svg {
        transition: none;
    }

    .studio-faq-accordion .accordion-button,
    .studio-faq-accordion .accordion-button::after,
    .faq-number,
    .dark-outline-btn {
        transition: none;
    }

    .booking-contact-item,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .custom-checkbox,
    .custom-checkbox::after {
        transition: none;
    }

    .footer-service-name strong,
    .footer-social a,
    .footer-column ul li a,
    .footer-column ul li a::before,
    .footer-contact-icon,
    .footer-legal a,
    .footer-webpulse-link {
        transition: none;
    }

    .studio-booking-modal .btn-close,
    .gallery-card,
    .gallery-card img,
    .gallery-card .gallery-overlay,
    .gallery-card::after,
    .gallery-view-icon {
        transition: none;
    }


}