/* =============================================================================
   KMVLN — Responsive + Cross-Aspect-Ratio Layer (2026-05-08)
   Loaded LAST in cascade. Site-wide responsive overrides for legacy and kmv-*
   classes. Defensive: pairs with fixes-2026.css (overflow guards already there).
   Breakpoints: mobile-sm <480 / mobile 480-767 / tablet 768-1023 /
                laptop-sm 1024-1180 / laptop 1181-1399 / desktop 1400-1799 /
                desktop-xl 1800+
   ============================================================================= */


/* =============================================================================
   1. GLOBAL TYPOGRAPHY SCALE (mobile-friendly clamp; safe on all viewports)
   ============================================================================= */
h1, .page-title, .hero-title, .kmv-hero__title {
    font-size: clamp(1.6rem, 4.4vw, 3rem);
    line-height: 1.15;
}
h2, .section-title, .cta-title, .kmv-section__title {
    font-size: clamp(1.4rem, 3.4vw, 2.2rem);
    line-height: 1.2;
}
h3, .service-title, .value-title, .blog-card h3, .kmv-bento__title {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.3;
}
body, p, li {
    font-size: 0.95rem;
}
@media (min-width: 768px) {
    body, p, li { font-size: 1rem; }
}

/* Section vertical padding scale */
.section,
section.section,
.services-section,
.about-section,
.values-section,
.cta-section,
.contact-section,
.faq-section,
.blog-section,
.notif-section,
.careers-intro,
.careers-positions,
.careers-apply,
.tools-grid-section,
.kmv-section {
    padding-top: clamp(48px, 8vw, 96px);
    padding-bottom: clamp(48px, 8vw, 96px);
}


/* =============================================================================
   2. ICON + SVG SAFETY
   ============================================================================= */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands {
    width: 1em;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}
.service-card svg,
.value-card svg,
.bento-card svg,
.kmv-bento__card svg,
.glass-card svg,
.blog-card svg,
.notif-card svg {
    max-width: 100%;
    height: auto;
}
img {
    object-fit: contain;
}
.hero img,
.page-header img,
.about-image img,
.team-image img,
.gallery-img-wrapper img,
.blog-image img {
    object-fit: cover;
}


/* =============================================================================
   3. MOBILE-SM (< 480px) — phones in portrait
   ============================================================================= */
@media (max-width: 479px) {
    .container,
    .container-2026 {
        padding-left: clamp(12px, 4vw, 20px);
        padding-right: clamp(12px, 4vw, 20px);
    }

    /* Heroes — both legacy and kmv */
    .hero,
    .kmv-hero,
    .page-header,
    .hero-2026 {
        padding-top: clamp(80px, 18vw, 110px);
        padding-bottom: clamp(36px, 9vw, 56px);
    }
    .hero-content,
    .kmv-hero__content {
        text-align: center;
    }
    .hero-badge,
    .kmv-hero__badge,
    .page-header__badge {
        font-size: 0.78rem;
        padding: 6px 12px;
    }
    .hero-subtitle,
    .kmv-hero__subtitle,
    .page-header__desc {
        font-size: 0.95rem;
    }

    /* Hero buttons — full-width stack */
    .hero-buttons,
    .kmv-hero__cta,
    .cta-buttons,
    .form-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .hero-buttons .btn,
    .kmv-hero__cta .btn,
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats — 1 column, centered */
    .stats-grid,
    .hero-stats,
    .kmv-stats {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .stat-item,
    .hero-stat,
    .kmv-stat-card {
        text-align: center;
    }
    .hero-stat-number,
    .stat-number,
    .kmv-stat-card__num {
        font-size: 2rem;
    }

    /* Cards — tighter padding */
    .glass-card,
    .bento-card,
    .service-card,
    .value-card,
    .blog-card,
    .notif-card,
    .contact-card,
    .benefit-card,
    .position-card,
    .apply-form-card,
    .kmv-bento__card {
        padding: 16px;
    }

    /* Page header */
    .page-header {
        padding: clamp(100px, 22vw, 130px) 0 clamp(28px, 7vw, 48px);
    }
    .breadcrumb {
        font-size: 0.78rem;
    }

    /* Footer */
    footer .footer-grid,
    footer .footer-cols {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    /* Forms */
    .form-row,
    .form-row-2col {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 14px;
    }
    input, select, textarea, .form-control {
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    /* CTA banners */
    .cta-inner,
    .cta-section,
    .kmv-cta {
        padding: 36px 18px;
    }
    .cta-title { font-size: 1.4rem; }
    .cta-desc { font-size: 0.95rem; }

    /* Tools page */
    .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* Blog cards */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    /* Floats — smaller */
    .whatsapp-float,
    .back-to-top {
        width: 48px !important;
        height: 48px !important;
    }
}


/* =============================================================================
   4. MOBILE (480 — 767) — large phones
   ============================================================================= */
@media (min-width: 480px) and (max-width: 767px) {
    .container,
    .container-2026 {
        padding-left: clamp(16px, 4vw, 24px);
        padding-right: clamp(16px, 4vw, 24px);
    }

    /* Stats 2x2 */
    .stats-grid,
    .hero-stats,
    .kmv-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Single-column grids for content lists */
    .services-grid,
    .values-grid,
    .blog-grid,
    .notif-grid,
    .team-grid,
    .careers-benefits,
    .tools-grid,
    .gallery-grid,
    .kmv-bento,
    .kmv-services-grid,
    .svc-overview-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Hero CTAs side-by-side */
    .hero-buttons,
    .kmv-hero__cta,
    .cta-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .hero-buttons .btn,
    .kmv-hero__cta .btn,
    .cta-buttons .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Footer 1 col */
    footer .footer-grid,
    footer .footer-cols {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 28px;
    }

    /* Forms two-column collapse */
    .form-row,
    .form-row-2col {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 14px;
    }

    /* Contact grid */
    .contact-grid,
    .about-preview {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    /* Cards padding */
    .glass-card,
    .bento-card,
    .service-card,
    .value-card,
    .blog-card,
    .notif-card,
    .contact-card,
    .kmv-bento__card {
        padding: 18px;
    }

    /* iOS zoom-protect */
    input, select, textarea, .form-control {
        font-size: 16px;
    }
}


/* =============================================================================
   5. SHARED MOBILE (< 768) — applies to both phone tiers
   ============================================================================= */
@media (max-width: 767px) {
    /* Dropdown menus inside mobile drawer should be flat lists, not absolutely
       positioned. Coordinate with fixes-2026.css which handles drawer open. */
    .nav-menu.active .has-dropdown {
        position: static;
        width: 100%;
    }
    .nav-menu.active .has-dropdown .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding-left: 16px;
        padding-top: 4px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        display: block;
    }
    .nav-menu.active .has-dropdown.open .dropdown {
        max-height: 600px;
    }
    .nav-menu.active .has-dropdown .dropdown li {
        list-style: none;
    }
    .nav-menu.active .has-dropdown .dropdown li a {
        display: block;
        padding: 8px 12px;
        font-size: 0.92rem;
    }

    /* Section headers center on mobile */
    .section-header,
    .kmv-section__head {
        text-align: center;
    }
    .section-header > *,
    .kmv-section__head > * {
        margin-left: auto;
        margin-right: auto;
    }

    /* Block-level CTA buttons in cards */
    .service-card .btn,
    .value-card .btn,
    .blog-card .btn {
        width: 100%;
        justify-content: center;
    }

    /* Tables — wrap any unwrapped tables in scroll container behavior */
    .blog-content table,
    .bp-prose table,
    .admin-content table,
    .data-table,
    .bp-chart {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Marquee tighter */
    .clients-track .client-item img {
        max-width: 110px;
        max-height: 40px;
    }

    /* Page-header H1 doesn't crowd */
    .page-header,
    .hero,
    .kmv-hero {
        text-align: center;
    }
    .page-header-content,
    .hero-content,
    .kmv-hero__content {
        max-width: 100%;
        padding: 0 4px;
    }

    /* Bento/feature spans collapse to 1 col */
    .bento-card.bento--span-2,
    .bento-card.bento--span-3,
    .bento-card.bento--span-4,
    .bento-card.bento--span-6,
    .bento-card.bento--span-8,
    .bento-card.bento--span-12,
    .kmv-bento__card[data-span],
    .kmv-bento__card--feature {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }

    /* Notifications grid */
    .notif-grid {
        grid-template-columns: 1fr !important;
    }

    /* Why-section alternating rows stack */
    .why-row,
    .kmv-why__row {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    /* Service detail rows */
    .service-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }

    /* FAQ width */
    .faq-grid {
        max-width: 100% !important;
    }
}


/* =============================================================================
   6. TABLET (768 — 1023) — iPads, small landscape phones
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .container,
    .container-2026 {
        padding-left: clamp(20px, 3vw, 28px);
        padding-right: clamp(20px, 3vw, 28px);
    }

    /* Two-column grids */
    .services-grid,
    .values-grid,
    .blog-grid,
    .notif-grid,
    .team-grid,
    .careers-benefits,
    .tools-grid,
    .svc-overview-grid,
    .kmv-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* Bento — 2 columns; spans collapse to row 1 width */
    .kmv-bento {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
    .kmv-bento__card[data-span="6"],
    .kmv-bento__card[data-span="8"],
    .kmv-bento__card[data-span="12"],
    .kmv-bento__card--feature {
        grid-column: span 2 !important;
    }
    .kmv-bento__card[data-row-span] {
        grid-row: auto !important;
    }
    .bento--span-3 { grid-column: span 6 !important; }
    .bento--span-4 { grid-column: span 6 !important; }
    .bento--span-6 { grid-column: span 12 !important; }
    .bento--span-8 { grid-column: span 12 !important; }

    /* Stats 4-col on landscape, 2x2 on portrait */
    .stats-grid,
    .hero-stats,
    .kmv-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    /* Gallery 2 col */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Footer 2 col */
    footer .footer-grid,
    footer .footer-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    /* Contact grid: form on top, info below */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 36px;
    }

    /* Service detail keep stacked */
    .service-detail-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =============================================================================
   7. LAPTOP-SM (1024 — 1180) — cramped narrow laptops
   ============================================================================= */
@media (min-width: 1024px) and (max-width: 1180px) {
    .container,
    .container-2026 {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Slightly tighter typography to keep heros from blowing out vertically */
    .kmv-hero__title,
    .hero-title {
        font-size: clamp(1.8rem, 3.6vw, 2.4rem);
    }
    .kmv-hero__subtitle,
    .hero-subtitle {
        font-size: 1rem;
    }

    /* Services 3-col instead of 4 to avoid scrunching */
    .services-grid,
    .kmv-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    /* Stats keep 4 cols, smaller numbers */
    .stats-grid,
    .hero-stats,
    .kmv-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
    .stat-number,
    .kmv-stat-card__num {
        font-size: 2.1rem;
    }

    /* Bento — 8 cols instead of 12 to keep cards readable */
    .kmv-bento {
        gap: 18px;
    }

    /* Footer 4-col still but tighter */
    footer .footer-grid,
    footer .footer-cols {
        gap: 24px;
    }
}


/* =============================================================================
   8. LAPTOP (1181 — 1399) — standard laptops
   ============================================================================= */
@media (min-width: 1181px) and (max-width: 1399px) {
    .container,
    .container-2026 {
        max-width: 1180px;
    }

    .services-grid,
    .kmv-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* =============================================================================
   9. DESKTOP (1400 — 1799)
   ============================================================================= */
@media (min-width: 1400px) and (max-width: 1799px) {
    .container,
    .container-2026 {
        max-width: 1320px;
    }

    .services-grid,
    .kmv-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .notif-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* =============================================================================
   10. DESKTOP-XL (1800+)
   ============================================================================= */
@media (min-width: 1800px) {
    .container,
    .container-2026 {
        max-width: 1400px;
    }

    /* Don't let hero title grow past readable ~3.4rem on huge screens */
    .hero-title,
    .kmv-hero__title {
        font-size: 3.2rem;
    }
    .page-title {
        font-size: 2.8rem;
    }
}


/* =============================================================================
   11. ASPECT-RATIO: NARROW DESKTOPS (4:3-ish, 16:10) — 1024+
   On 1366×1024, 1280×800, 1280×1024 — compress vertical padding so hero +
   first section both fit above the fold.
   ============================================================================= */
@media (max-aspect-ratio: 4/3) and (min-width: 1024px) {
    .hero,
    .kmv-hero,
    .page-header,
    .hero-2026 {
        padding-top: clamp(70px, 8vh, 110px);
        padding-bottom: clamp(36px, 6vh, 64px);
    }
    .section,
    section.section,
    .services-section,
    .about-section,
    .values-section,
    .cta-section,
    .kmv-section {
        padding-top: clamp(40px, 6vh, 72px);
        padding-bottom: clamp(40px, 6vh, 72px);
    }
    .kmv-hero__title,
    .hero-title {
        font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    }
}

/* 4:3 narrow desktops — services 3-col when viewport <1280 */
@media (max-aspect-ratio: 4/3) and (min-width: 1024px) and (max-width: 1280px) {
    .services-grid,
    .kmv-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 16:10 height-clip protection — hero never taller than viewport */
@media (min-aspect-ratio: 16/10) and (max-aspect-ratio: 17/10) and (min-width: 1024px) {
    .hero,
    .kmv-hero {
        max-height: 100vh;
        overflow: clip;
    }
}


/* =============================================================================
   12. ASPECT-RATIO: ULTRAWIDE (21:9 and wider) — 1800+
   Cap content max-width, generous side gutters, keep readable line-length.
   ============================================================================= */
@media (min-aspect-ratio: 21/9) and (min-width: 1800px) {
    .container,
    .container-2026 {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(32px, 4vw, 80px);
        padding-right: clamp(32px, 4vw, 80px);
    }

    /* Hero text doesn't span 21:9 width — cap reading width */
    .hero-content,
    .kmv-hero__content,
    .page-header-content {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-subtitle,
    .kmv-hero__subtitle,
    .page-header__desc {
        max-width: 70ch;
    }

    /* Cards in ultrawide — keep 4 cols max, no 5+ col explosion */
    .services-grid,
    .kmv-services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* =============================================================================
   13. ASPECT-RATIO: PHONE-IN-LANDSCAPE (very short viewports)
   Hero CTA must remain visible. Compress padding aggressively.
   ============================================================================= */
@media (orientation: landscape) and (max-height: 500px) {
    .hero,
    .kmv-hero,
    .page-header,
    .hero-2026 {
        padding-top: clamp(60px, 12vh, 90px);
        padding-bottom: clamp(20px, 5vh, 40px);
        min-height: 0;
    }
    .hero-title,
    .kmv-hero__title,
    .page-title {
        font-size: clamp(1.4rem, 4vh, 2rem);
        margin-bottom: 8px;
    }
    .hero-subtitle,
    .kmv-hero__subtitle,
    .page-header__desc {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    .hero-buttons,
    .kmv-hero__cta {
        margin-top: 8px;
    }

    /* Mobile drawer doesn't get cut off */
    .nav-menu.active {
        padding-top: 60px !important;
    }
}


/* =============================================================================
   14. CARDS — universal padding consistency
   ============================================================================= */
.glass-card,
.bento-card,
.service-card,
.value-card,
.blog-card,
.notif-card,
.contact-card,
.benefit-card,
.position-card,
.team-card,
.tool-card,
.kmv-bento__card,
.kmv-stat-card {
    box-sizing: border-box;
    min-width: 0;
}

@media (min-width: 768px) {
    .glass-card,
    .bento-card,
    .service-card,
    .value-card,
    .blog-card,
    .notif-card,
    .contact-card,
    .benefit-card,
    .position-card,
    .team-card,
    .tool-card,
    .kmv-bento__card {
        padding: 24px;
    }
}


/* =============================================================================
   15. NAVIGATION — supplement fixes-2026.css for tablet/phone
   ============================================================================= */
@media (max-width: 1180px) {
    /* Logo doesn't get squashed by hamburger */
    .logo,
    header .logo {
        flex-shrink: 0;
        max-width: 60vw;
    }
    .logo-img {
        max-height: 44px;
        width: auto;
    }

    /* Mobile nav cta visible inside drawer */
    .nav-menu.active .nav-cta {
        display: inline-flex !important;
        margin-top: 12px;
        width: 100%;
        justify-content: center;
    }

    /* Mobile overlay z-index */
    .mobile-overlay.active {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 999;
        backdrop-filter: blur(2px);
    }
}

/* Header sticky stays clean on all sizes */
.header,
header.header {
    box-sizing: border-box;
}


/* =============================================================================
   16. FOOTER — column counts per breakpoint
   ============================================================================= */
@media (min-width: 1024px) {
    footer .footer-grid,
    footer .footer-cols {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}


/* =============================================================================
   17. FORMS — consistent layout across breakpoints
   ============================================================================= */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

/* Two-column form rows on >=768 */
@media (min-width: 768px) {
    .form-row,
    .form-row-2col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

/* Contact form wrapper padding scale */
.contact-form-wrapper,
.apply-form-card {
    padding: clamp(20px, 4vw, 40px);
}


/* =============================================================================
   18. TABLES — defensive scroll in any context
   ============================================================================= */
.bp-prose table,
.blog-content table,
.notification-print table,
.notification-content table {
    width: 100%;
    border-collapse: collapse;
    max-width: 100%;
}
@media (max-width: 767px) {
    .bp-prose table,
    .blog-content table {
        font-size: 0.85rem;
    }
}


/* =============================================================================
   19. KMV-BENTO RESPONSIVE GRID (default 12-col scaffold)
   Kept generic — Specialist A's home-2026-v2.css owns the visual styling.
   ============================================================================= */
.kmv-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}
.kmv-bento__card {
    grid-column: span 12;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .kmv-bento__card[data-span="6"]  { grid-column: span 6; }
    .kmv-bento__card[data-span="4"]  { grid-column: span 6; }
    .kmv-bento__card[data-span="8"]  { grid-column: span 12; }
    .kmv-bento__card[data-span="12"] { grid-column: span 12; }
}
@media (min-width: 1024px) {
    .kmv-bento__card[data-span="3"]  { grid-column: span 3; }
    .kmv-bento__card[data-span="4"]  { grid-column: span 4; }
    .kmv-bento__card[data-span="6"]  { grid-column: span 6; }
    .kmv-bento__card[data-span="8"]  { grid-column: span 8; }
    .kmv-bento__card[data-span="12"] { grid-column: span 12; }
    .kmv-bento__card[data-row-span="2"] { grid-row: span 2; }
}


/* =============================================================================
   20. HOVER STATES — only on hover-capable devices (avoids phantom mobile hovers)
   ============================================================================= */
@media (hover: none) {
    .service-card:hover,
    .value-card:hover,
    .blog-card:hover,
    .notif-card:hover,
    .glass-card:hover,
    .bento-card:hover,
    .kmv-bento__card:hover,
    .tool-card:hover,
    .team-card:hover,
    .gallery-item-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-2, 0 4px 14px rgba(15, 23, 42, 0.06)) !important;
    }
    .btn:hover,
    .btn-primary:hover,
    .btn-cta:hover,
    .btn-ghost:hover {
        transform: none !important;
    }
}


/* =============================================================================
   21. MARQUEE / CLIENT LOGOS — scale gracefully
   ============================================================================= */
@media (max-width: 767px) {
    .clients-track {
        gap: 24px;
    }
    .client-item {
        flex: 0 0 auto;
    }
    .client-item img {
        max-height: 36px !important;
        max-width: 100px !important;
    }
}


/* =============================================================================
   22. UTILITY HELPERS
   ============================================================================= */
.hide-mobile { display: initial; }
.hide-desktop { display: none; }
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
    .hide-desktop { display: initial !important; }
}

/* Visually-hidden helper (a11y safe) */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =============================================================================
   23. FLOATING ACTION BUTTONS — safe placement on all viewports
   ============================================================================= */
.whatsapp-float,
.back-to-top {
    box-sizing: border-box;
    z-index: 950;
}
@media (max-width: 767px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
    }
    .back-to-top {
        right: 16px;
        bottom: 80px;
    }
}


/* =============================================================================
   24. PRELOADER — never blocks interactions on slow networks
   ============================================================================= */
.preloader {
    pointer-events: none;
}
.preloader.active {
    pointer-events: auto;
}


/* =============================================================================
   25. PRINT STYLES — clean printable pages
   ============================================================================= */
@media print {
    .nav,
    header.header,
    .header,
    .footer-bottom,
    .cta,
    .cta-section,
    .preloader,
    .chatbot,
    .chatbot-launcher,
    .whatsapp-float,
    .back-to-top,
    .mobile-overlay,
    .nav-toggle,
    .cookie-banner-2026,
    .progress-bar {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 11pt;
    }
    .container,
    .container-2026 {
        max-width: 100% !important;
        padding: 0 !important;
    }
    .section,
    .page-header,
    .hero {
        padding: 16px 0 !important;
        page-break-inside: avoid;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 80%;
        word-break: break-all;
    }
    .blog-card,
    .notif-card,
    .service-card,
    .value-card {
        page-break-inside: avoid;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}


/* =============================================================================
   26. REDUCED-MOTION — soft re-affirm (theme-2026.css already covers; cheap belt)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-in-left,
    .fade-in-right,
    .kmv-counter,
    .clients-track {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}