/* ==========================================================================
   ADWHS Solutions - Universal Responsive Stylesheet
   Supports: Galaxy Fold (280px+), iPhone (SE, 12-16 Pro), Android, iPad & Tablets (768px-1024px), Laptops & Desktops
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global Reset & Safety Rules for All Screen Sizes
   -------------------------------------------------------------------------- */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* Ensure navigation target anchor sections aren't obscured by fixed header */
.section, section, [id] {
    scroll-margin-top: 85px;
}

/* Prevent iOS form input auto-zoom */
@media (max-width: 860px) {
    input, textarea, select {
        font-size: 16px !important;
    }

    .section, section, [id] {
        scroll-margin-top: 75px;
    }
}

/* Safe Area Insets for iPhones with Home Indicator / Island / Notch */
:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* --------------------------------------------------------------------------
   1. Large Tablets & Small Desktops (max-width: 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .wrap {
        width: calc(100% - 48px);
    }

    .hero-grid {
        grid-template-columns: 1fr 460px;
        gap: 28px;
        align-items: center;
    }

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

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

    .included-split-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .included-split-left {
        position: static;
    }

    .included-devices-visual {
        max-width: 560px;
        margin: 0 auto;
    }

    .partner-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .europe-reach-layout {
        gap: 32px;
    }
}

/* --------------------------------------------------------------------------
   2. Medium Tablets & iPads (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .section {
        padding: 60px 0;
    }

    .hero {
        padding: 100px 0 40px;
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-copy {
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-copy h1 {
        font-size: clamp(2.4rem, 5vw, 3.2rem);
        margin: 0 auto 18px;
    }

    .hero-copy p {
        margin: 0 auto 24px;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-proof {
        justify-content: center;
        margin: 28px auto 0;
    }

    .hero-form {
        max-width: 540px;
        margin: 0 auto;
        width: 100%;
    }

    .wcu-layout-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .wcu-visual-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .europe-reach-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .europe-reach-content {
        max-width: 100%;
        text-align: center;
    }

    .europe-reach-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .europe-countries-grid {
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }

    .europe-map-visual {
        max-width: 580px;
        margin: 0 auto;
    }

    .testimonial-grid article {
        flex: 0 0 calc(50% - 10px);
        min-width: 300px;
        padding: 24px;
    }

    .faq-layout-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .faq-content-col {
        max-width: 640px;
    }

    .faq-help-badge-wrapper {
        margin-top: 24px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .pricing-split-header,
    .partners-split-header,
    .portfolio-split-header,
    .testimonial-split-header,
    .section-head {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start !important;
        margin-bottom: 32px;
    }

    .section-head > div {
        width: 100%;
    }

    .section-head p {
        max-width: 100% !important;
    }

    .section-head .btn-whatsapp-clean,
    .section-head .btn {
        align-self: flex-start !important;
        margin-top: 4px;
    }
}

/* --------------------------------------------------------------------------
   3. Small Tablets & Phablets (max-width: 860px)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        color: #ffffff;
        font-size: 1.4rem;
        cursor: pointer;
        z-index: 1001;
        transition: all 0.25s ease;
    }

    .menu-toggle:hover,
    .menu-toggle:focus {
        background: #0066FF;
        border-color: #0066FF;
        color: #ffffff;
    }

    .nav-links {
        display: none;
        position: fixed;
        left: 16px;
        right: 16px;
        top: 76px;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(10, 22, 45, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        padding: 16px;
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
        z-index: 9999;
    }

    .nav-links.open {
        display: flex;
        animation: navSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes navSlideDown {
        from {
            opacity: 0;
            transform: translateY(-12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-links a:not(.btn) {
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #e2e8f0;
        transition: all 0.2s ease;
    }

    .nav-links a:not(.btn):hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    .nav-links .inline-style-1 {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links .btn {
        width: 100%;
        min-height: 44px;
        font-size: 0.92rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-img-container {
        max-width: 500px;
        margin: 0 auto;
    }

    .counter-split-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .counter-split-content {
        text-align: center;
    }

    .counter-split-content p {
        margin: 16px auto 0 !important;
    }

    .counter-split-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .pricing-custom-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 26px 22px;
    }

    .custom-banner-divider {
        display: none;
    }

    .btn-custom-talk {
        width: 100%;
        justify-content: center;
    }

    .cta-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
    }

    .cta-action {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .cta-btn-white {
        grid-column: 1 / -1;
        width: 100%;
        padding: 13px 18px !important;
        font-size: 0.94rem !important;
        border-radius: 0 !important;
    }

    .cta-btn-whatsapp,
    .cta-btn-mail {
        grid-column: span 1;
        width: 100%;
        padding: 12px 12px !important;
        font-size: 0.88rem !important;
        gap: 6px !important;
        border-radius: 0 !important;
    }

    .footer-nav {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-contact-col {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   4. Mobile Phones (max-width: 680px)
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
    .wrap {
        width: calc(100% - 32px);
    }

    .section {
        padding: 35px 0;
    }

    .section-title {
        font-size: clamp(1.85rem, 6vw, 2.5rem);
        line-height: 1.15;
    }

    .hero {
        padding: 110px 0 40px;
    }

    .hero-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-form {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .hero-actions .btn,
    .hero-actions .text-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pricing-card {
        padding: 28px 20px 24px;
        border-radius: 20px;
    }

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

    .europe-countries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
        justify-items: start;
    }

    .wcu-luxury-section {
        padding: 50px 0;
    }

    .wcu-title {
        font-size: clamp(1.85rem, 6vw, 2.4rem);
    }

    .wcu-feature-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wcu-organic-image-frame {
        height: 280px;
        border-radius: 16px;
    }

    .wcu-trust-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .wcu-trust-divider {
        display: none;
    }

    .wcu-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .wcu-btn-primary,
    .wcu-btn-whatsapp-outline {
        width: 100%;
        justify-content: center;
    }

    .included-every-project-section {
        padding: 50px 0 60px;
    }

    .included-main-title {
        font-size: clamp(2rem, 7vw, 2.7rem);
        line-height: 1.1;
    }

    .included-items-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .included-columns-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .included-item-row {
        gap: 12px;
    }

    .included-item-num {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 0.78rem;
    }

    .faq-luxury-section {
        padding: 50px 0;
    }

    .faq-title {
        font-size: clamp(1.85rem, 6vw, 2.4rem);
    }

    .faq-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .faq-btn-primary,
    .faq-btn-whatsapp {
        width: 100%;
        justify-content: center;
    }

    .faq-trust-row {
        flex-direction: column;
        gap: 14px;
    }

    .faq-doodle-arrow {
        display: none;
    }

    .projects-slider-row .project-showcase-card {
        flex: 0 0 280px;
        width: 280px;
    }

    .project-preview-wrap {
        height: 180px;
    }

    .projects-dual-slider-container {
        gap: 16px;
        padding: 8px 0 16px;
    }

    .testimonial-split-header .section-title {
        font-size: clamp(1.85rem, 6vw, 2.35rem);
    }

    /* Testimonials Horizontal Slider on Mobile */
    .testimonial-grid {
        margin-top: 28px;
        gap: 14px;
        padding: 8px 0 18px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .testimonial-grid article {
        flex: 0 0 calc(88% - 10px);
        width: calc(88% - 10px);
        max-width: 380px;
        min-width: 280px;
        padding: 24px 20px;
        border-radius: 16px;
        scroll-snap-align: center;
    }

    .testimonial-grid article.primary {
        transform: none;
    }

    .testimonial-grid blockquote {
        font-size: 0.94rem;
        line-height: 1.6;
        margin: 14px 0 20px;
    }

    .contact-info-card,
    .contact-form-wrapper {
        padding: 26px 20px;
        border-radius: 20px;
    }

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

    .footer-nav {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-footer .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: center;
        text-align: center;
    }

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

    /* Floating Action Buttons Responsive Positioning */
    .floating-actions-left {
        bottom: calc(14px + var(--safe-bottom));
        left: 12px;
        gap: 10px;
    }

    .floating-actions-right {
        bottom: calc(14px + var(--safe-bottom));
        right: 12px;
        gap: 10px;
    }

    .fab {
        width: 44px;
        height: 44px;
    }

    .fab svg {
        width: 20px;
        height: 20px;
    }

    .sidebar-enquire {
        font-size: 0.82rem;
        padding: 18px 8px;
        letter-spacing: 1px;
    }
}

/* --------------------------------------------------------------------------
   5. Compact Phones (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .brand img {
        height: 42px;
    }

    .hero-proof {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .google-review-box {
        padding: 16px;
    }

    .google-review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .google-review-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .about-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .about-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .counter-split-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .counter-card {
        padding: 18px 14px;
    }

    .counter-number {
        font-size: 1.8rem;
    }

    .counter-label {
        font-size: 0.82rem;
    }

    .service-card {
        padding: 16px;
    }

    .service-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .service-btn-wa,
    .service-btn-mail {
        justify-content: center;
        padding: 9px 8px;
        font-size: 0.82rem;
    }

    .projects-slider-row .project-showcase-card {
        flex: 0 0 260px;
        width: 260px;
    }

    .project-card-footer {
        padding: 14px 14px 16px;
    }

    .project-item-title {
        font-size: 0.96rem;
    }

    .project-link-circle {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .testimonial-grid article {
        flex: 0 0 calc(100% - 10px);
        width: calc(100% - 10px);
        min-width: 250px;
        padding: 22px 18px;
        scroll-snap-align: start;
    }
}

/* --------------------------------------------------------------------------
   6. Ultra-Compact / Fold Phones (max-width: 360px down to 280px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .wrap {
        width: calc(100% - 20px) !important;
    }

    .section {
        padding: 40px 0;
    }

    .hero {
        padding: 95px 0 35px;
    }

    .hero-form {
        padding: 18px 12px;
        border-radius: 16px;
    }

    .hero-form h2 {
        font-size: 1.35rem;
    }

    .hero-copy h1 {
        font-size: 1.75rem;
        letter-spacing: -0.02em;
    }

    .section-title,
    .wcu-title,
    .included-main-title,
    .faq-title,
    .europe-reach-title {
        font-size: 1.65rem !important;
    }

    .counter-split-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .partner-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .partner-box {
        padding: 12px 8px;
    }

    .europe-countries-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wcu-organic-image-frame {
        height: 220px;
    }

    .wcu-avatar-group .wcu-avatar {
        width: 24px;
        height: 24px;
    }

    .wcu-trust-text {
        font-size: 0.78rem;
    }

    .included-items-card {
        padding: 18px 12px;
    }

    .included-item-heading {
        font-size: 0.88rem;
    }

    .included-item-sub {
        font-size: 0.75rem;
    }

    .pricing-card {
        padding: 22px 14px 20px;
    }

    .price-val {
        font-size: 1.7rem;
    }

    .testimonial-grid article {
        flex: 0 0 100%;
        width: 100%;
        min-width: 220px;
        padding: 18px 14px;
    }

    .contact-info-card,
    .contact-form-wrapper {
        padding: 20px 14px;
    }

    /* Floating Action Buttons on Fold devices */
    .floating-actions-left {
        bottom: calc(10px + var(--safe-bottom));
        left: 8px;
        gap: 8px;
    }

    .floating-actions-right {
        bottom: calc(10px + var(--safe-bottom));
        right: 8px;
        gap: 8px;
    }

    .fab {
        width: 38px;
        height: 38px;
    }

    .fab svg {
        width: 17px;
        height: 17px;
    }

    .sidebar-enquire {
        display: none; /* Hide on ultra narrow Fold outer display so screen stays completely clean */
    }

    .modal-content.modal-split-layout {
        padding: 0;
        width: calc(100% - 16px);
    }

    .modal-form-side {
        padding: 24px 16px 20px;
    }

    .modal-form-header h3 {
        font-size: 1.3rem;
    }
}

/* --------------------------------------------------------------------------
   7. Accessibility: Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }

    .hero-video,
    .footer-video {
        display: none !important;
    }

    .projects-slider-row.row-left .projects-track-group,
    .projects-slider-row.row-right .projects-track-group {
        animation: none !important;
    }
}