/* ================================================================
   KROXIA THEME — COMPREHENSIVE RESPONSIVE FIXES
   Covers all devices: 320px → 1400px+
   Mobile First approach with max-width breakpoints.
   ================================================================ */

/* -----------------------------------------------
   GLOBAL BOX-SIZING & OVERFLOW SAFETY
   ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* -----------------------------------------------
   TOUCH — eliminate 300ms tap delay on mobile
   ----------------------------------------------- */
a, button, input, select, textarea, .btn, .btn-primary, .btn-outline, .btn-ghost,
.kx-btn, [role="button"], .toggle, .accordion-trigger, .menu-item a {
    touch-action: manipulation;
}

/* -----------------------------------------------
   CONTAINER — fluid on all screens
   ----------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--kroxia-container, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* -----------------------------------------------
   SECTION PADDING — direct !important overrides
   to ensure sections don't have excessive spacing
   ----------------------------------------------- */

/* ================================================================
   BREAKPOINT: 1280px — Large tablet / small desktop
   ================================================================ */
@media (max-width: 1280px) {
    .container { padding-left: 32px; padding-right: 32px; }

    /* Hero */
    .hero-v7-layout { gap: 48px; }
    .hero-v7-visual { max-width: 440px; }

    /* Grids */
    .case-studies-grid { grid-template-columns: repeat(2, 1fr); }
    .awards-grid { grid-template-columns: repeat(2, 1fr); }
    .kx-cs-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .kx-team-grid { grid-template-columns: repeat(4, 1fr) !important; }

    /* Service detail panel */
    .service-detail-panel { gap: 40px; padding: 40px; }
}

/* ================================================================
   BREAKPOINT: 1024px — Tablet landscape / small laptop
   ================================================================ */
@media (max-width: 1024px) {
    .container { padding-left: 24px; padding-right: 24px; }

    /* Section top/bottom padding */
    .kx-clu-section,
    .kx-wwd-section,
    .kx-wcu-section,
    .kx-oa-section,
    .kx-process-section,
    .kx-promise-section,
    .kx-os-section,
    .kx-cs-section,
    .kx-portfolio-section,
    .kx-team-section,
    .kx-pricing-section,
    .kx-faq-section,
    .kx-contact-section,
    .section-padding { padding-top: 32px !important; padding-bottom: 32px !important; }

    /* ---- HERO ---- */
    .hero-v7-layout {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 40px;
    }
    .hero-v7-visual { display: none; }
    .hero-layout {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .hero-visual { display: none; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; flex-wrap: wrap; gap: 20px; }
    .hero-v7-actions { justify-content: center; }
    .hero-v7-stats { justify-content: center; }

    /* ---- NAV ---- */
    .main-navigation { display: none !important; }
    .mobile-menu-toggle { display: flex !important; }
    .header-cta-btn { display: none !important; }

    /* ---- ABOUT ---- */
    .about-layout { grid-template-columns: 1fr !important; gap: 40px; }
    .about-img-secondary { display: none; }
    .kx-about-layout { grid-template-columns: 1fr !important; gap: 40px; }

    /* ---- FAQ ---- */
    .faq-layout,
    .kx-faq-layout { grid-template-columns: 1fr !important; gap: 40px; }
    .kx-faq-sidebar { position: static !important; }
    .kx-faq-help { display: none; }

    /* ---- CONTACT ---- */
    .kx-contact-layout { grid-template-columns: 1fr !important; gap: 40px; }

    /* ---- SECTION HEADERS ---- */
    .kx-section-header { margin-bottom: 24px; }
    .kx-clu-section .kx-section-header { margin-bottom: 24px; }
    .section-header { margin-bottom: 24px; }
    .kx-section-badge { margin-bottom: 12px; }
    .kx-section-title { margin-bottom: 14px; }

    /* ---- FOOTER ---- */
    .footer-grid-3,
    .footer-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .footer-features-inner { gap: 12px; }

    /* ---- PROCESS ---- */
    .kx-process-steps { grid-template-columns: repeat(2, 1fr) !important; }
    .process-timeline { grid-template-columns: repeat(2, 1fr); }
    .process-timeline::before { display: none; }

    /* ---- WHAT WE DO ---- */
    .kx-wwd-layout { grid-template-columns: 1fr !important; }
    .kx-wwd-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- OUR ADVANTAGE ---- */
    .kx-oa-items { flex-wrap: wrap; }
    .kx-oa-item { flex: 0 0 calc(50% - 0.5px); }

    /* ---- PORTFOLIO ---- */
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .kx-portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- PRICING ---- */
    .kx-pricing-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto 32px; }
    .kx-pricing-popular { transform: none !important; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

    /* ---- CASE STUDIES ---- */
    .case-studies-grid { grid-template-columns: repeat(2, 1fr); }
    .kx-cs-grid { grid-template-columns: 1fr !important; }
    .kx-cs-cta { flex-direction: column; text-align: center; }

    /* ---- TEAM ---- */
    .kx-team-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .kx-team-values { flex-wrap: wrap; }
    .kx-team-value-item { flex: 0 0 calc(50% - 0.5px); border-right: none; border-bottom: 1px solid var(--kx-card-border); }
    .kx-team-cta { flex-direction: column !important; text-align: center; }

    /* ---- SERVICES ---- */
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .kx-os-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .service-detail-panel { grid-template-columns: 1fr !important; gap: 32px; padding: 32px; }
    .service-visual-box { height: 200px; }

    /* ---- STATS ---- */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---- VALUES ---- */
    .values-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---- CLU ---- */
    .kx-clu-brands { flex-wrap: wrap !important; }
    .kx-clu-brands-label {
        width: 100%;
        padding-right: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(91,92,240,0.15) !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    [data-theme="dark"] .kx-clu-brands-label {
        border-bottom-color: rgba(255,255,255,0.1) !important;
    }
    .kx-clu-brand-logos {
        padding-left: 0 !important;
        justify-content: center !important;
        gap: 24px !important;
    }

    /* ---- SINGLE POST ---- */
    .single-post-layout { grid-template-columns: 1fr !important; }
    .single-post-grid { grid-template-columns: 1fr 280px !important; }
    .post-sidebar-left { display: none !important; }
}

/* ================================================================
   BREAKPOINT: 768px — Tablet portrait / large phone
   ================================================================ */
@media (max-width: 768px) {
    .container { padding-left: 20px; padding-right: 20px; }

    /* Section top/bottom padding */
    .kx-clu-section,
    .kx-wwd-section,
    .kx-wcu-section,
    .kx-oa-section,
    .kx-process-section,
    .kx-promise-section,
    .kx-os-section,
    .kx-cs-section,
    .kx-portfolio-section,
    .kx-team-section,
    .kx-pricing-section,
    .kx-faq-section,
    .kx-contact-section,
    .section-padding { padding-top: 32px !important; padding-bottom: 32px !important; }

    /* ---- HEADER ---- */
    .header-layout { height: 68px; gap: 12px; }
    .header-inner { padding: 0; }
    .theme-switcher { display: none !important; }

    /* ---- HERO ---- */
    .hero-title { font-size: clamp(2rem, 6vw, 2.8rem); }
    .hero-stats { flex-direction: column; gap: 16px; align-items: center; }
    .stat-divider { display: none; }
    .hero-badge { font-size: 0.78rem; padding: 6px 14px; }

    /* ---- SECTIONS GRID ---- */
    .services-grid { grid-template-columns: 1fr !important; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .kx-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { grid-template-columns: 1fr !important; }
    .blog-grid { grid-template-columns: 1fr !important; }
    .process-timeline { grid-template-columns: 1fr !important; }
    .kx-process-steps { grid-template-columns: repeat(2, 1fr) !important; }
    .kx-oa-cards { grid-template-columns: repeat(2, 1fr); }
    .kx-promise-cards { grid-template-columns: repeat(2, 1fr); }
    .kx-wcu-features-grid { grid-template-columns: 1fr !important; }
    .kx-wcu-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
    .kx-wcu-actions { flex-direction: column; align-items: flex-start; }
    .kx-wcu-trust { flex-wrap: wrap; }
    .kx-os-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .kx-wwd-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .case-studies-grid { grid-template-columns: 1fr !important; }
    .awards-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .values-grid { grid-template-columns: 1fr !important; }
    .tech-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---- FOOTER ---- */
    .footer-grid-3 { grid-template-columns: 1fr !important; }
    .footer-grid-4 { grid-template-columns: 1fr !important; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-bottom-social { flex-wrap: wrap; justify-content: center; }
    .footer-feature-item { width: calc(50% - 8px); }

    /* ---- SECTION HEADERS ---- */
    .kx-section-header { margin-bottom: 24px; }
    .kx-clu-section .kx-section-header { margin-bottom: 24px; }
    .kx-section-title { margin-bottom: 12px; font-size: clamp(1.8rem, 5vw, 2.4rem); }
    .section-header { max-width: 100%; margin-bottom: 24px; }
    .section-title { margin-bottom: 12px; font-size: clamp(1.8rem, 5vw, 2.4rem); }

    /* ---- CLU (CLIENTS LOVE US) ---- */
    .kx-clu-slider-wrap { flex-direction: column !important; gap: 16px !important; }
    .kx-clu-nav { align-self: center !important; }
    .kx-clu-card { flex: 0 0 100% !important; min-width: 100% !important; padding: 24px !important; }
    .kx-clu-brands {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .kx-clu-brands-label {
        width: 100%;
        padding-right: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(91,92,240,0.15) !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: unset !important;
    }
    [data-theme="dark"] .kx-clu-brands-label {
        border-bottom-color: rgba(255,255,255,0.1) !important;
    }
    .kx-clu-brand-logos {
        padding-left: 0 !important;
        gap: 20px !important;
        justify-content: flex-start !important;
    }
    .kx-clu-section .kx-section-title { font-size: clamp(1.8rem, 5vw, 2.2rem) !important; }

    /* ---- PRICING ---- */
    .pricing-grid { padding: 0; }
    .kx-pricing-features-bar { flex-direction: column; }
    .kx-pricing-fbar-item { border-right: none; border-bottom: 1px solid var(--kx-card-border); }

    /* ---- PROMISE ---- */
    .kx-promise-mid { grid-template-columns: 1fr !important; }
    .kx-promise-cta { flex-direction: column !important; text-align: center; }

    /* ---- CONTACT FORM ---- */
    .kx-cf-row.kx-cf-two { flex-direction: column !important; }
    .kx-contact-form-wrap { padding: 20px !important; }

    /* ---- TESTIMONIALS ---- */
    .testimonial-card { min-width: 100% !important; }

    /* ---- SINGLE POST ---- */
    .single-post-grid { grid-template-columns: 1fr !important; }
    .post-sidebar-right { display: none !important; }
    .post-sidebar-left { display: none !important; }
    .featured-archive-post { grid-template-columns: 1fr !important; }

    /* ---- SERVICE DETAIL ---- */
    .service-selector { grid-template-columns: 1fr !important; }
    .service-meta-grid { grid-template-columns: 1fr 1fr; }
    .budget-selector { grid-template-columns: 1fr 1fr; }

    /* ---- NEWSLETTER ---- */
    .newsletter-form { min-width: 0; width: 100%; }
    .newsletter-input-group { flex-direction: column; border-radius: 12px; }
    .newsletter-btn { border-radius: 0 0 12px 12px; justify-content: center; padding: 12px 20px; }

    /* ---- CTA ---- */
    .cta-actions { flex-direction: column; align-items: center; }
    .cta-actions .btn-primary,
    .cta-actions .btn-outline { width: 100%; justify-content: center; max-width: 320px; }

    /* ---- STATS COUNTER ---- */
    .kx-wwd-stats { flex-direction: column !important; }
    .kx-wwd-stat { border-right: none !important; border-bottom: 1px solid var(--kx-card-border); }

    /* ---- ABOUT FEATURES ---- */
    .about-features { grid-template-columns: 1fr 1fr; }

    /* ---- WHITE-SPACE OVERRIDES — prevent nowrap overflow ---- */
    .kx-btn,
    .kx-clu-company,
    .kx-clu-brand-more,
    .kx-pricing-popular-badge,
    .pricing-badge { white-space: normal !important; }
}

/* ================================================================
   BREAKPOINT: 640px — Medium phone
   ================================================================ */
@media (max-width: 640px) {
    .container { padding-left: 16px; padding-right: 16px; }

    .kx-section-title { font-size: clamp(1.65rem, 5.5vw, 2rem) !important; }
    .kx-section-subtitle { font-size: 0.95rem !important; }
    .section-title { font-size: clamp(1.65rem, 5.5vw, 2rem); }

    /* Blog grid */
    .kroxia-blog-posts.layout-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   BREAKPOINT: 480px — Small phone
   ================================================================ */
@media (max-width: 480px) {
    .container { padding-left: 16px; padding-right: 16px; }

    /* Section top/bottom padding */
    .kx-clu-section,
    .kx-wwd-section,
    .kx-wcu-section,
    .kx-oa-section,
    .kx-process-section,
    .kx-promise-section,
    .kx-os-section,
    .kx-cs-section,
    .kx-portfolio-section,
    .kx-team-section,
    .kx-pricing-section,
    .kx-faq-section,
    .kx-contact-section,
    .section-padding { padding-top: 24px !important; padding-bottom: 24px !important; }

    /* ---- SECTION HEADERS ---- */
    .kx-section-header { margin-bottom: 14px; }
    .kx-clu-section .kx-section-header { margin-bottom: 14px; }
    .section-header { margin-bottom: 14px; }
    .kx-section-badge { margin-bottom: 8px; }
    .kx-section-title { margin-bottom: 8px; }

    /* ---- TYPOGRAPHY ---- */
    .hero-title { font-size: 1.9rem !important; }
    .kx-section-title { font-size: 1.65rem !important; }
    .section-title { font-size: 1.65rem !important; }

    /* ---- HERO ACTIONS ---- */
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn-primary,
    .hero-actions .btn-outline { width: 100%; justify-content: center; }
    .hero-v7-actions { flex-direction: column; align-items: center; }
    .hero-v7-actions .btn-primary,
    .hero-v7-actions .btn-outline { width: 100%; justify-content: center; }

    /* ---- GRIDS → 1 column ---- */
    .team-grid { grid-template-columns: 1fr !important; }
    .kx-team-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .kx-os-grid { grid-template-columns: 1fr !important; }
    .kx-oa-cards { grid-template-columns: 1fr !important; }
    .kx-promise-cards { grid-template-columns: 1fr !important; }
    .kx-wcu-features-grid { grid-template-columns: 1fr !important; }
    .kx-promise-mid-benefits { grid-template-columns: 1fr !important; }
    .kx-wwd-layout { grid-template-columns: 1fr !important; }
    .kx-wwd-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .awards-grid { grid-template-columns: 1fr !important; }
    .tech-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .about-features { grid-template-columns: 1fr !important; }
    .values-grid { grid-template-columns: 1fr !important; }

    /* ---- PROCESS ---- */
    .kx-process-steps { grid-template-columns: 1fr !important; }

    /* ---- FOOTER ---- */
    .footer-bottom-links { flex-direction: column; gap: 12px; }

    /* ---- CLU BRANDS ---- */
    .kx-clu-brand-logos { gap: 16px !important; }
    .kx-clu-card { padding: 20px !important; }

    /* ---- AUTHOR BIO ---- */
    .author-bio-box { flex-direction: column; }

    /* ---- FORM ---- */
    .service-selector { grid-template-columns: 1fr !important; }
    .budget-selector { grid-template-columns: 1fr !important; }
    .kx-contact-form-wrap { padding: 16px !important; }
    .service-meta-grid { grid-template-columns: 1fr !important; }

    /* ---- PRICING BADGE OVERFLOW ---- */
    .pricing-badge { white-space: normal; font-size: 0.7rem; padding: 3px 10px; max-width: 90%; }

    /* ---- TABLE OVERFLOW ---- */
    .comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ---- COOKIE BAR ---- */
    .cookie-bar-inner { flex-direction: column; align-items: flex-start; }
    .cookie-actions { width: 100%; }
    .cookie-btn-accept,
    .cookie-btn-decline { flex: 1; text-align: center; }

    /* ---- SOCIAL PROOF ---- */
    .kroxia-social-proof { min-width: calc(100vw - 32px); left: 16px; }

    /* ---- WHITE-SPACE OVERRIDES ---- */
    .kx-btn,
    .kx-clu-company,
    .kx-clu-brand-more,
    .kx-pricing-popular-badge,
    .pricing-badge { white-space: normal !important; }
}

/* ================================================================
   BREAKPOINT: 360px — Very small phone (Samsung Galaxy A-series, etc.)
   ================================================================ */
@media (max-width: 360px) {
    .container { padding-left: 10px; padding-right: 10px; }

    /* Section top/bottom padding */
    .kx-clu-section,
    .kx-wwd-section,
    .kx-wcu-section,
    .kx-oa-section,
    .kx-process-section,
    .kx-promise-section,
    .kx-os-section,
    .kx-cs-section,
    .kx-portfolio-section,
    .kx-team-section,
    .kx-pricing-section,
    .kx-faq-section,
    .kx-contact-section,
    .section-padding { padding-top: 16px !important; padding-bottom: 16px !important; }
    .hero-title { font-size: 1.5rem !important; }
    .kx-section-title { font-size: 1.35rem !important; }
    .section-title { font-size: 1.35rem !important; }
    .kx-section-subtitle { font-size: 0.85rem !important; }
    .section-subtitle { font-size: 0.85rem !important; }
    .kx-section-header { margin-bottom: 10px; }
    .kx-clu-section .kx-section-header { margin-bottom: 10px; }
    .section-header { margin-bottom: 10px; }
    .kx-section-badge { margin-bottom: 6px; font-size: 0.6rem; padding: 3px 8px; }
    .kx-section-title { margin-bottom: 6px; }
    .btn-primary,
    .btn-outline,
    .btn-ghost,
    .kx-btn { padding: 10px 16px; font-size: 0.82rem; }
    .header-layout { height: 56px; }
    .site-logo,
    .kx-logo img { height: 32px; width: auto; }
    .hero-badge { font-size: 0.7rem; padding: 4px 10px; }
    .section-tag { font-size: 0.72rem; padding: 4px 10px; }

    /* Grids → 1 column */
    .kx-wwd-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .kx-oa-cards { grid-template-columns: 1fr !important; }
    .kx-promise-cards { grid-template-columns: 1fr !important; }
    .kx-os-grid { grid-template-columns: 1fr !important; }
    .kx-team-grid { grid-template-columns: 1fr !important; }
    .kx-portfolio-grid { grid-template-columns: 1fr !important; }
    .kx-cs-grid { grid-template-columns: 1fr !important; }
    .kx-clu-grid { grid-template-columns: 1fr !important; }
    .footer-grid-4 { grid-template-columns: 1fr !important; }
    .kx-process-steps { grid-template-columns: 1fr !important; }

    /* Pricing badge overflow safety */
    .pricing-badge { white-space: normal; font-size: 0.7rem; padding: 3px 10px; max-width: 90%; }

    /* Hide non-essential elements */
    .theme-switcher { display: none !important; }
    .footer-feature-item { width: 100%; }

    /* Service cards */
    .services-v7-card { padding: 18px; }
    .services-v7-icon svg { width: 32px; height: 32px; }
    .services-v7-name { font-size: 0.95rem; }

    /* Why Choose Us — card elements */
    .kx-wcu-card { padding: 14px; }
    .kx-wcu-card-icon { width: 36px; height: 36px; }
    .kx-wcu-card-icon svg { width: 18px; height: 18px; }
    .kx-wcu-card-num { font-size: 1.2rem; }
    .kx-wcu-card-title { font-size: 0.88rem; }
    .kx-wcu-card-desc { font-size: 0.78rem; }
    .kx-wcu-layout { gap: 20px !important; }

    /* Contact form */
    .krx-form-row { flex-direction: column !important; }
    .krx-form-input,
    .krx-form-select,
    .krx-form-textarea { font-size: 0.85rem; padding: 10px 12px; }

    /* Cookie bar */
    .cookie-bar { padding: 12px; }
    .cookie-message { font-size: 0.82rem; }

    /* CTA sections */
    .cta-section { padding: 40px 0; }
    .cta-title { font-size: 1.25rem; }
    .cta-text { font-size: 0.85rem; }

    /* WooCommerce */
    .woocommerce ul.products { grid-template-columns: 1fr !important; }

    /* ---- WHITE-SPACE OVERRIDES ---- */
    .kx-btn,
    .kx-clu-company,
    .kx-clu-brand-more,
    .kx-pricing-popular-badge,
    .pricing-badge { white-space: normal !important; }
}

/* ================================================================
   NAVBAR — mobile-specific overrides
   ================================================================ */
@media (max-width: 1024px) {
    .kx-nav { display: none !important; }
    .kx-hamburger { display: flex !important; }
    .kx-cta-btn { display: none !important; }
}

/* ================================================================
   HERO v7 — Responsive
   ================================================================ */
@media (max-width: 1024px) {
    .hero-v7-layout { grid-template-columns: 1fr !important; text-align: center; }
    .hero-v7-visual { display: none !important; }
    .hero-v7-badge { margin: 0 auto 20px; }
    .hero-v7-title { font-size: clamp(2rem, 5vw, 3rem); }
    .hero-v7-subtitle { max-width: 100%; }
    .hero-v7-stats { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .hero-v7-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
    .hero-v7-actions { flex-direction: column; width: 100%; }
    .hero-v7-actions a,
    .hero-v7-actions button { width: 100%; justify-content: center; }
}

/* ================================================================
   ABOUT SECTION — Responsive
   ================================================================ */
@media (max-width: 1024px) {
    .about-layout { grid-template-columns: 1fr !important; }
    .about-experience-badge { top: 20px; left: 20px; }
}

/* ================================================================
   SERVICE DETAIL PANEL — Responsive
   ================================================================ */
@media (max-width: 900px) {
    .service-detail-panel { padding: 28px !important; gap: 28px !important; }
}

/* ================================================================
   HOME REDESIGN — v7 Responsive
   ================================================================ */
@media (max-width: 768px) {
    .kx-hero-v7-section .container { padding-top: 40px; }
    .brands-section { padding: 28px 0 !important; }
}

/* ================================================================
   PAGES — Portfolio, Blog, Team etc.
   ================================================================ */
@media (max-width: 900px) {
    .kroxia-blog-posts.layout-grid.cols-3,
    .kroxia-blog-posts.layout-grid.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .kroxia-blog-posts.layout-grid { grid-template-columns: 1fr !important; }
    .related-posts-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   WOOCOMMERCE — Responsive
   ================================================================ */
@media (max-width: 768px) {
    .woocommerce-page .woocommerce { padding: 0; }
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* ================================================================
   FLOAT CARDS — hide on small screens to avoid overlap
   ================================================================ */
@media (max-width: 1024px) {
    .hero-float-1,
    .hero-float-2,
    .hero-float-3 { display: none; }
}

/* ================================================================
   TEXT OVERFLOW SAFETY — all text elements
   ================================================================ */
.kx-section-title,
.section-title,
.hero-title,
.kx-section-subtitle,
.section-subtitle,
.kx-wcu-card-desc,
.kx-wcu-card-title,
.kx-os-card-desc,
.kx-os-card-title,
.kx-clu-text,
.kx-clu-company,
.kx-wwd-card-desc,
.kx-oa-card-desc,
.kx-promise-card-desc,
.kx-process-step-desc,
.kx-team-text,
.kx-portfolio-text,
.kx-cs-text,
.kx-pricing-feature,
.testimonial-text,
.kx-card-text,
.kx-feature-text,
.entry-content p,
.entry-content li,
.krx-blog-card__text,
.krx-method-card-text,
.kx-faq-answer,
.kx-section-desc {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* ================================================================
   IMAGES — prevent overflow
   ================================================================ */
.hero-main-image,
.case-study-thumb img,
.portfolio-item img,
.team-photo,
.about-main-img { width: 100%; height: auto; display: block; }

/* ================================================================
   EXTRA RESPONSIVE — section-specific improvements
   ================================================================ */

/* ── HERO: ensure CTA buttons never overflow ── */
.hero-actions .btn-primary,
.hero-actions .btn-outline,
.hero-v7-actions .btn-primary,
.hero-v7-actions .btn-outline,
.landing-cta-group .btn-landing { max-width: 100%; }

/* ── BLOG & POST: featured image never breaks layout ── */
.krx-featured-post__img img { width: 100%; height: auto; object-fit: cover; }
.krx-blog-card__img img { width: 100%; height: auto; object-fit: cover; }

/* ── PORTFOLIO: thumbnail image scale ── */
.kx-portfolio-thumb img { width: 100%; height: auto; object-fit: cover; }

/* ── TEAM: avatar responsive ── */
.kx-team-avatar { max-width: 100%; height: auto; }

/* ── PRICING: card text never overflows ── */
.pricing-card { overflow-wrap: break-word; word-break: break-word; }
.pricing-features li { overflow-wrap: break-word; word-break: break-word; }

/* ── CONTACT FORM: full width on mobile ── */
.krx-form-input,
.krx-form-select,
.krx-form-textarea { max-width: 100%; }

/* ── TESTIMONIALS ── */
.testimonial-text { overflow-wrap: break-word; }

/* ── TABLE WRAP ── */
.krx-shop-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── FOOTER WIDGETS ── */
.footer-widget { overflow-wrap: break-word; }

/* ── RESPONSIVE IFRAME ── */
iframe { max-width: 100%; }

/* ── SINGLE POST CONTENT ── */
.entry-content img,
.entry-content iframe,
.entry-content video { max-width: 100%; height: auto; }
.entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 1280px → tighter padding ── */
@media (max-width: 1280px) {
    .footer-grid-4 { gap: 24px; }
    .kx-portfolio-grid { gap: 16px; }
}

/* ── 1024px → tighter grids ── */
@media (max-width: 1024px) {
    .services-v7-grid { gap: 16px; }
    .kx-oa-cards { gap: 14px; }
    .kx-promise-cards { gap: 14px; }
    .page-hero { padding: 60px 0; }
    .page-hero-title { font-size: clamp(1.8rem, 5vw, 2.4rem); }
}

/* ── 900px → tighter elements ── */
@media (max-width: 900px) {
    .comparison-table-wrap table { font-size: 0.85rem; }
    .comparison-table-wrap th,
    .comparison-table-wrap td { padding: 10px 12px; }
    .service-detail-panel { padding: 24px; }
}

/* ── 768px → comprehensive tablet ── */
@media (max-width: 768px) {
    .site-main { padding-top: 0; }
    .page-hero { padding: 48px 0; }
    .breadcrumbs { font-size: 0.8rem; }
    .hero-v7-section { padding-top: 40px; }
    .kx-hero-v7-section { padding-top: 40px; }
    .services-v7-grid { gap: 12px; }
    .services-v7-card { padding: 20px; }
    .services-v7-card .services-v7-icon svg { width: 36px; height: 36px; }

    /* Pricing */
    .pricing-grid { gap: 16px; padding: 0; }
    .pricing-card { padding: 28px 24px; }

    /* Portfolio */
    .kx-portfolio-grid { gap: 12px; }

    /* Process */
    .kx-process-steps { gap: 12px; }

    /* Section headers */
    .kx-section-header { margin-bottom: 18px; }
    .kx-clu-section .kx-section-header { margin-bottom: 18px; }
    .section-header { margin-bottom: 18px; }
    .kx-section-badge { font-size: 0.7rem; padding: 5px 12px; margin-bottom: 8px; }
    .kx-section-title { margin-bottom: 10px; }
}

/* ── 640px → tighter still ── */
@media (max-width: 640px) {
    .services-v7-card { padding: 16px; }
    .services-v7-card .services-v7-icon svg { width: 32px; height: 32px; }
    .services-v7-name { font-size: 1rem; }
    .services-v7-desc { font-size: 0.85rem; }
    .kx-oa-card { padding: 16px; }
    .kx-wcu-card { padding: 16px; }
    .kx-team-card { padding: 16px; }
    .kx-cs-card { padding: 16px; }
    .kx-portfolio-card { padding: 16px; }
    .kx-clu-card { padding: 16px; }

    /* Hero padding */
    .hero-v7-section { padding-top: 32px; padding-bottom: 40px; }
    .kx-hero-v7-section { padding-top: 32px; }

    /* About */
    .kx-about-layout { gap: 24px; }
    .about-layout { gap: 24px; }

    /* Contact */
    .kx-contact-methods { gap: 12px; }
    .krx-method-card { padding: 16px; }

    /* FAQ */
    .krx-faq-question { padding: 12px 16px; font-size: 0.9rem; }
    .krx-faq-answer-inner { padding: 12px 16px; font-size: 0.85rem; }
}

/* ── 480px → single column everything ── */
@media (max-width: 480px) {
    .kx-wwd-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .kx-oa-items { flex-direction: column; }
    .kx-oa-item { flex: 0 0 100%; }
    .kx-team-values { flex-direction: column; }
    .kx-team-value-item { flex: 0 0 100%; }
    .kx-clu-brand-logos { gap: 12px !important; }
    .kx-clu-brand-item { padding: 8px 12px; font-size: 0.8rem; }
    .header-cta-btn { display: none; }
    .service-meta-grid { grid-template-columns: 1fr; }
    .service-gallery { grid-template-columns: 1fr; }
    .landing-hero-padding { padding: 40px 0; }
    .page-hero { padding: 36px 0; }
    .page-hero-title { font-size: 1.6rem; }

    /* WooCommerce cart */
    .woocommerce-cart-form { overflow-x: auto; }
    .woocommerce-cart-form table.shop_table { min-width: 500px; }
}

/* ── 360px → minimum safe zone ── */
@media (max-width: 360px) {
    .kx-wwd-grid { grid-template-columns: 1fr !important; }
    .services-v7-grid { grid-template-columns: 1fr !important; }
    .kx-oa-cards { grid-template-columns: 1fr !important; }
    .kx-promise-cards { grid-template-columns: 1fr !important; }
    .kx-os-grid { grid-template-columns: 1fr !important; }
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
    .footer-grid-4,
    .footer-grid-3 { gap: 16px; }

    /* Trust bar wraps */
    .hero-v7-stats { gap: 8px; }
    .hero-stats { gap: 8px; }
    .svcp-trust-row { gap: 8px; flex-wrap: wrap; }
    .kx-cs-cta { padding: 20px; }
    .kx-team-cta { padding: 20px; }
}