/**
 * WRAP A DESIGN - Responsive Design System (Mobile Center Aligned & Sharp Edges)
 */

/* Desktops Large & Ultra Wide */
@media (min-width: 1400px) {
    .container {
        max-width: var(--container-width);
    }
}

/* Laptops / Small Desktops (1024px to 1280px) */
@media (max-width: 1280px) {
    .hero-main-heading {
        font-size: 3.4rem;
    }

    .about-grid,
    .expertise-card-container,
    .xpel-grid,
    .why-choose-grid,
    .partnerships-grid,
    .necessary-grid,
    .testimonials-grid,
    .location-card-container,
    .contact-main-grid {
        gap: 35px;
    }

    .xpel-photo-card {
        height: 420px;
    }
}

/* Tablets Landscape / Medium Screens (769px to 1023px) */
@media (max-width: 1023px) {
    .top-bar-left {
        gap: 16px;
    }

    .nav-right .nav-text-link {
        display: none;
    }

    .about-grid,
    .expertise-card-container,
    .xpel-grid,
    .why-choose-grid,
    .partnerships-grid,
    .necessary-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tinting-card-container {
        grid-template-columns: 1fr;
    }

    .recent-gallery-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .location-card-container {
        grid-template-columns: 1fr;
    }

    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-columns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Mobile & Tablets Portrait (<= 768px) - 100% CENTER ALIGNED & SHARP EDGES */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
        --topbar-height: 36px;
        --radius-xs: 0px !important;
        --radius-sm: 0px !important;
        --radius-md: 0px !important;
        --radius-lg: 0px !important;
        --radius-full: 0px !important;
    }

    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    body {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overflow-x: hidden;
    }

    /* Hardware Accelerated Compositing for Mobile Butter-Smooth 60fps */
    .site-header,
    .hero-top-video-zone,
    .hero-bg-video,
    .about-main-img-wrap,
    .about-floating-img-wrap,
    .expertise-card-container,
    .portfolio-card,
    .testimonial-card,
    .why-choose-card,
    .ba-comparison-wrapper,
    .menu-overlay-container,
    .modal-container {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Fast Sharp Edges without layout engine penalty */
    .btn, .button, input, select, textarea, img, video, .card, .badge, .box,
    .expertise-card-container, .service-card, .portfolio-card, .testimonial-card,
    .why-choose-card, .location-box, .btn-quick-quote-solid, .btn-full-quote,
    .btn-learn-more, .top-btn-quote, .header-cta-btn, .sharp-card {
        border-radius: 0px !important;
    }

    .hide-on-mobile {
        display: none !important;
    }

    .top-bar {
        height: 36px;
        line-height: 36px;
        overflow: hidden;
    }

    .top-bar-container {
        padding: 0 16px;
        font-size: 0.76rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .top-phone-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #f4f4f5;
        font-weight: 700;
        white-space: nowrap;
    }

    .top-bar-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .site-header {
        height: 68px;
    }

    .header-container {
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .nav-center {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .logo-main-row {
        white-space: nowrap;
    }

    .logo-wrap, .logo-x-symbol {
        font-size: 1.25rem !important;
        letter-spacing: 0.5px;
    }

    .logo-the {
        font-size: 0.62rem !important;
        margin-bottom: 1px;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .hero-bg-video {
        display: block !important;
    }

    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Prevent overflow on all major section wrappers */
    .hero-section,
    .hero-top-video-zone,
    .about-merged-zone,
    .about-section,
    .expertise-section,
    .before-after-section,
    .ultimate-ppf-section,
    .process-section,
    .xpel-section,
    .why-choose-section,
    .partnerships-section,
    .necessary-section,
    .tinting-section,
    .recent-work-section,
    .testimonials-section,
    .location-section,
    .areas-section,
    .faq-section,
    .contact-page-section,
    .site-main-footer,
    .portfolio-carousel-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Mobile Shutter Rotate Up-to-Down Animated Drawer */
    .menu-overlay-container {
        width: 100% !important;
        height: 100vh !important;
        max-width: 100% !important;
        border: none !important;
        transform-origin: top center !important;
        transform: translateY(-80px) rotateX(-75deg) scaleY(0.7) !important;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .fullscreen-menu-overlay.active .menu-overlay-container {
        transform: translateY(0) rotateX(0deg) scaleY(1) !important;
    }

    .menu-content-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        padding-top: 40px;
    }

    .menu-car-col {
        display: none !important;
    }

    .menu-links-col {
        padding: 30px 20px 20px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .menu-contact-col {
        padding: 20px 20px 40px !important;
    }

    .floating-loyalty-badges {
        display: none !important;
    }

    /* 1. Hero Section (Centered) */
    .hero-top-video-zone {
        padding: 40px 14px 45px;
        text-align: center;
    }

    .hero-content-wrapper {
        text-align: center;
        align-items: center;
    }

    .global-certified-badge,
    .about-global-badge,
    .xpel-certified-badge {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-main-heading {
        font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
        line-height: 1.12 !important;
        margin-bottom: 12px;
        text-align: center;
    }

    .hero-blue-divider {
        width: 80px;
        margin: 0 auto 14px;
    }

    .hero-description {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
        margin-bottom: 20px;
        text-align: center;
    }

    .hero-service-pills {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        width: 100%;
        max-width: 380px;
        margin: 0 auto 24px;
    }

    .dark-pill {
        padding: 8px 10px !important;
        font-size: 0.76rem !important;
        justify-content: center;
        text-align: center;
        border-radius: 0px !important;
    }

    .hero-cta-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .hero-quote-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 13px 20px;
        border-radius: 0px !important;
        margin: 0 auto;
    }

    /* 2. Merged About Us Zone (Centered & Balanced, Zero Overflow) */
    .about-merged-zone {
        padding: 40px 0 55px !important;
        text-align: center;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .about-grid,
    .hero-about-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 28px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .about-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .about-label {
        text-align: center;
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px !important;
    }

    .about-title {
        font-size: clamp(1.35rem, 5.5vw, 1.95rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.2px !important;
        margin: 0 auto 14px !important;
        text-align: center !important;
        max-width: 100% !important;
        width: 100% !important;
        text-transform: uppercase !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    .about-brand-title {
        white-space: normal !important;
        display: inline !important;
    }

    .about-description {
        text-align: center !important;
        font-size: 0.88rem !important;
        line-height: 1.62 !important;
        color: #d1d5db !important;
        margin: 0 auto 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .about-badges-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        box-sizing: border-box !important;
    }

    .about-global-badge {
        flex: 1 1 150px !important;
        max-width: 100% !important;
        min-height: 52px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 1px solid #c59b27 !important;
        background: #0d0d10 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
        box-sizing: border-box !important;
    }

    .global-about-badge-img {
        height: 26px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .global-badge-text-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .global-badge-title {
        font-size: 0.95rem !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .global-badge-sub {
        font-size: 0.52rem !important;
        letter-spacing: 0.4px !important;
        white-space: normal !important;
        color: #c59b27 !important;
        margin-top: 2px !important;
    }

    .since-badge-box {
        flex: 1 1 120px !important;
        max-width: 100% !important;
        min-height: 52px !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: var(--color-primary) !important;
        box-shadow: 0 4px 15px rgba(197, 155, 39, 0.35) !important;
        box-sizing: border-box !important;
    }

    .since-label {
        font-size: 0.58rem !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
        line-height: 1.1 !important;
        color: #ffffff !important;
    }

    .since-year {
        font-size: 1.45rem !important;
        line-height: 1 !important;
        margin-top: 2px !important;
        color: #ffffff !important;
    }

    .about-btn-wrap {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .about-btn-wrap .btn-full-quote {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        font-size: 0.88rem !important;
        box-sizing: border-box !important;
        box-shadow: 0 6px 20px rgba(197, 155, 39, 0.4) !important;
    }

    .about-images-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 24px !important;
        padding-bottom: 30px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .about-main-img-wrap {
        width: 88% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        min-height: 220px !important;
        max-height: 260px !important;
        border: 3px solid #ffffff !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important;
        border-radius: 0px !important;
        overflow: hidden !important;
        background: #111114 !important;
    }

    .about-main-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 75% !important;
        display: block !important;
    }

    .about-floating-img-wrap {
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 56% !important;
        aspect-ratio: 16 / 10 !important;
        height: auto !important;
        max-height: 135px !important;
        border: 3px solid #ffffff !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
        border-radius: 0px !important;
        overflow: hidden !important;
        z-index: 5 !important;
    }

    .about-floating-img,
    .about-floating-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 65% !important;
        display: block !important;
    }

    /* 3. Expertise Section (Centered) */
    .expertise-section {
        text-align: center;
    }

    .expertise-main-title {
        text-align: center;
    }

    .expertise-tabs-nav {
        justify-content: center;
        gap: 8px;
    }

    .expertise-tab-btn {
        padding: 10px 16px;
        font-size: 0.78rem;
    }

    .expertise-card-container {
        padding: 24px 18px;
        text-align: center;
    }

    .expertise-card-title {
        text-align: center;
    }

    .expertise-card-desc {
        text-align: center;
    }

    .expertise-features-list {
        align-items: center;
    }

    .expertise-feature-item {
        justify-content: center;
    }

    .expertise-actions-row {
        justify-content: center;
    }

    .expertise-card-image-wrap {
        height: 260px;
    }

    .expertise-showcase-marquee-wrap {
        margin-top: 35px;
        padding-top: 25px;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .marquee-card {
        flex: 0 0 190px !important;
        width: 190px !important;
        height: 253px !important;
        aspect-ratio: 3 / 4 !important;
    }

    .marquee-track {
        gap: 12px;
        animation-duration: 25s;
    }

    .marquee-viewport {
        mask-image: none;
        -webkit-mask-image: none;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Before & After Transformations (Responsive & Overflow Free) */
    .before-after-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 50px 0 !important;
    }

    .before-after-main-title {
        font-size: clamp(1.4rem, 5.5vw, 2.2rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.2px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    .before-after-subtitle {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        padding: 0 8px !important;
        margin: 0 auto 28px !important;
        box-sizing: border-box !important;
    }

    .ba-project-card {
        padding: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ba-project-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 14px !important;
    }

    .ba-project-meta {
        text-align: center !important;
    }

    .ba-project-title {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .ba-project-header .btn-quick-quote-solid {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    .ba-comparison-dual-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ba-side-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .ba-side-media {
        height: 220px !important;
        width: 100% !important;
    }

    /* 4. Ultimate PPF Section (Centered) */
    .ultimate-card-container {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
        gap: 24px !important;
    }

    .ultimate-img-col {
        height: 240px !important;
        min-height: auto !important;
        width: 100% !important;
    }

    .ultimate-content-col {
        padding: 10px 5px !important;
        text-align: center;
        align-items: center;
    }

    .ultimate-main-heading {
        text-align: center;
    }

    .ultimate-desc {
        text-align: center;
    }

    /* 5. Process Section (Centered) */
    .process-section {
        text-align: center;
    }

    .process-main-heading {
        text-align: center;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .process-card {
        text-align: center;
        align-items: center;
    }

    .process-card-title {
        text-align: center;
    }

    .process-card-text {
        text-align: center;
    }

    /* 6. XPEL Section (Centered & Optimized Mobile Grid) */
    .xpel-section {
        text-align: center;
        padding: 45px 14px 55px;
    }

    .xpel-partner-bar {
        justify-content: center !important;
        padding: 10px 12px;
        gap: 8px 12px;
    }

    .xpel-main-title {
        text-align: center;
    }

    .xpel-paragraphs {
        text-align: center;
    }

    .xpel-features-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 24px;
    }

    .xpel-feat-item {
        align-items: center;
        text-align: center;
        padding: 12px;
    }

    .xpel-photos-col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 10px;
    }

    .xpel-photo-card {
        height: 160px !important;
        width: 100% !important;
    }

    /* 7. Why Choose Us Section (Centered) */
    .why-choose-section {
        text-align: center;
    }

    .why-choose-title {
        text-align: center;
    }

    .why-car-img-wrap {
        height: 260px;
    }

    .why-feature-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 16px;
    }

    /* 8. Partnerships Section (Centered) */
    .partnerships-section {
        text-align: center;
    }

    .partnerships-title {
        text-align: center;
    }

    .partnerships-intro {
        text-align: center;
    }

    .partnerships-img-wrap {
        height: 260px;
    }

    .programme-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 16px;
    }

    /* 9. Why Necessary Section (Centered) */
    .necessary-section {
        text-align: center;
    }

    .necessary-title {
        text-align: center;
    }

    .necessary-desc {
        text-align: center;
    }

    .necessary-img-wrapper {
        height: 260px;
        overflow: hidden !important;
        width: 100% !important;
    }

    .necessary-blue-block {
        display: none !important;
    }

    .necessary-img {
        width: 100% !important;
    }

    /* 10. Window Tinting Section (Centered) */
    .tinting-card-container {
        grid-template-columns: 1fr;
    }

    .tinting-img-col {
        min-height: 260px;
    }

    .tinting-content-col {
        padding: 28px 20px;
        text-align: center;
        align-items: center;
    }

    .tinting-logo-group {
        justify-content: center;
    }

    .tinting-main-heading {
        text-align: center;
    }

    .tinting-desc {
        text-align: center;
    }

    /* 11. Recent Work Section (Centered) */
    .recent-banner-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .recent-banner-title {
        text-align: center;
    }

    .recent-banner-sub {
        text-align: center;
    }

    /* 11. Recent Work 2-Image Carousel (2 Images per View on Mobile) */
    .recent-work-banner {
        padding: 18px 0;
    }

    .recent-banner-action {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .btn-portfolio-white {
        width: 100%;
        max-width: 260px;
        text-align: center;
        padding: 11px 20px;
        font-size: 0.8rem;
    }

    .portfolio-slide-item {
        flex: 0 0 50% !important;
        min-width: 50% !important;
    }

    .portfolio-image-card {
        height: 210px !important;
    }

    .portfolio-card-info {
        padding: 10px 8px !important;
    }

    .portfolio-car-title {
        font-size: 0.68rem !important;
    }

    .portfolio-service-tag {
        font-size: 0.54rem !important;
    }

    .carousel-arrow {
        width: 32px !important;
        height: 32px !important;
    }

    .carousel-arrow-prev {
        left: 6px !important;
    }

    .carousel-arrow-next {
        right: 6px !important;
    }

    /* 12. Testimonials Section (Centered) */
    .testimonials-section {
        text-align: center;
    }

    .testimonials-section-title {
        text-align: center;
    }

    .testimonials-subtitle {
        text-align: center;
    }

    .testimonials-car-img-wrap {
        height: 260px;
    }

    .testimonial-card {
        text-align: center;
    }

    .testimonial-author-row {
        justify-content: center;
    }

    .testimonial-headline {
        text-align: center;
    }

    .testimonial-body {
        text-align: center;
    }

    .testimonial-footer-row {
        justify-content: center;
        gap: 16px;
    }

    .testimonials-slider-nav {
        justify-content: center;
    }

    /* 13. Location Section (Centered) */
    .location-card-container {
        grid-template-columns: 1fr;
    }

    .location-content-col {
        text-align: center;
        align-items: center;
        padding: 30px 20px;
    }

    .location-main-heading {
        text-align: center;
    }

    .location-desc {
        text-align: center;
    }

    .location-address-box {
        justify-content: center;
        text-align: center;
    }

    .location-btn-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* 14. Service Areas (Clean 2-Column Mobile Grid View) */
    .areas-section {
        text-align: center;
        padding: 45px 0 50px !important;
    }

    .areas-main-heading {
        text-align: center;
        font-size: clamp(1.4rem, 5.2vw, 2rem) !important;
        margin-bottom: 24px !important;
    }

    .areas-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 30px !important;
        box-sizing: border-box !important;
    }

    .areas-col {
        display: contents !important;
    }

    .area-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: 7px !important;
        padding: 9px 8px !important;
        background: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid rgba(0, 0, 0, 0.07) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .area-pin-svg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .area-pin-svg svg {
        width: 14px !important;
        height: 14px !important;
    }

    .area-name {
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.2px !important;
        color: #111114 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 15. FAQ Section (Centered) */
    .faq-section {
        text-align: center;
    }

    .faq-main-heading {
        text-align: center;
    }

    .faq-question-btn {
        text-align: left;
    }

    /* 16. Contact Section (Centered) */
    .contact-page-section {
        text-align: center;
    }

    .contact-sec-title {
        text-align: center;
    }

    .contact-sec-subtitle {
        text-align: center;
    }

    .form-row-double {
        grid-template-columns: 1fr;
    }

    .btn-submit-main-form {
        width: 100%;
    }

    .studio-info-card {
        text-align: center;
        padding: 30px 20px;
    }

    .studio-info-title {
        text-align: center;
    }

    .studio-details-list {
        align-items: center;
    }

    .studio-detail-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .studio-social-row {
        justify-content: center;
    }

    /* 17. Footer (Centered & Luxury Obsidian Theme) */
    .site-main-footer {
        text-align: center;
        padding-bottom: 25px;
    }

    .footer-vip-strip {
        flex-direction: column;
        text-align: center;
        padding: 24px 18px;
        margin: 30px 0 35px;
        gap: 16px;
    }

    .vip-strip-action {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .btn-vip-quote {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .footer-columns-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }

    .footer-col-heading {
        justify-content: center;
    }

    .footer-social-boxes {
        justify-content: center;
    }

    .footer-link-list {
        align-items: center;
    }

    .help-action-list {
        align-items: center;
    }

    .help-action-item {
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .footer-bottom-keywords {
        justify-content: center;
        gap: 6px 8px;
        padding: 16px 0;
        margin-bottom: 20px;
    }

    .keyword-pill {
        font-size: 0.68rem !important;
        padding: 5px 8px !important;
        white-space: nowrap;
        text-align: center;
    }

    .footer-copyright-row {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding-top: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-copyright-text {
        text-align: center !important;
        font-size: 0.76rem !important;
        line-height: 1.6 !important;
        color: #71717a !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        word-break: normal !important;
    }

    .footer-policy-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px 12px !important;
        width: 100% !important;
        margin: 4px 0 !important;
    }

    .footer-policy-item {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        display: inline-block !important;
        color: #8b8b94 !important;
        padding: 2px 0 !important;
    }

    .footer-policy-item:hover, .footer-policy-item.active {
        color: var(--color-primary) !important;
    }

    .policy-dot {
        display: inline-block !important;
        color: #3f3f46 !important;
        font-size: 0.65rem !important;
    }

    .footer-powered-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .powered-by-badge {
        font-size: 0.74rem !important;
        color: #8b8b94 !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding: 4px 12px !important;
        background: #111116 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .powered-by-badge a {
        color: var(--color-primary) !important;
        font-weight: 700 !important;
    }
}

/* Very Small Mobile (< 480px) */
@media (max-width: 480px) {
    .recent-gallery-strip {
        grid-template-columns: 1fr;
    }

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

    .services-catalog-grid {
        grid-template-columns: 1fr !important;
    }

    .about-grid-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .page-hero-banner {
        padding: 55px 0 45px !important;
    }

    .service-filter-btn {
        padding: 7px 12px !important;
        font-size: 0.75rem !important;
    }

    .ba-comparison-dual-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .ba-side-media {
        height: 220px !important;
    }

    .ba-project-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .ba-project-header .btn-quick-quote-solid {
        width: 100% !important;
    }

    .service-modal-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .service-modal-scrollable {
        padding: 24px 18px !important;
    }

    /* Small Mobile Footer Enhancements (< 480px) */
    .footer-bottom-keywords {
        gap: 5px 6px !important;
        padding: 14px 0 !important;
    }

    .keyword-pill {
        font-size: 0.64rem !important;
        padding: 4px 7px !important;
    }

    .footer-copyright-text {
        font-size: 0.72rem !important;
        line-height: 1.55 !important;
    }

    .footer-policy-links {
        gap: 5px 8px !important;
    }

    .footer-policy-item {
        font-size: 0.72rem !important;
    }

    .policy-dot {
        font-size: 0.6rem !important;
    }

    .powered-by-badge {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
    }
}