/* ═══════════════════════════════════════════════════════════════════
   KINDEZ ENGINEERING – MOBILE / RESPONSIVE LAYER
   Loaded AFTER style.css (see includes/header.php).
   Everything here is scoped to phones & tablets unless noted, so the
   desktop design is untouched.

   Contents
   0. Tokens
   1. Overflow & spacing safety net
   2. Buttons on dark backgrounds (all screens)
   3. Top navbar (mobile)
   4. Hero
   5. Bottom navigation bar
   6. Floating buttons (WhatsApp / back-to-top)
   7. Section rhythm, cards, forms, footer
   8. Touch feedback
   9. Animations
  10. Reduced motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. TOKENS ─────────────────────────────────────────────────── */
:root {
    --mbn-h: 64px;                                   /* bottom-nav height (without safe area) */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --nav-h: 72px;                                   /* kept in sync with real navbar by mobile.js */
    --ease-out: cubic-bezier(.22, .8, .24, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}


/* ── 1. OVERFLOW & SPACING SAFETY NET ──────────────────────────── */

/* The page was ~100px wider than the phone (AOS slide-ins, wide rows),
   which made Chrome zoom the layout out: bottom-nav / WhatsApp drifted
   and the right side showed an empty strip. Clip it at the root.
   NOTE: `clip` (not `hidden`) so position:sticky keeps working.      */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
@supports (overflow: clip) {
    html { overflow-x: clip; }
}
body { overflow-x: visible !important; max-width: 100%; }

img, video, svg, canvas, iframe { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, li, a, .btn { overflow-wrap: break-word; }

@media (max-width: 991.98px) {

    /* Bootstrap's .g-5 rows (-24px margins) poke out of a 12px container
       gutter → sideways scroll. Use a gutter that fits.               */
    .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }
    .g-5, .gy-5 { --bs-gutter-y: 2rem; }

    /* Slide-in-from-side animations create off-screen boxes on phones →
       replace them with a soft rise (no sideways travel).             */
    html:not(.no-js) [data-aos="fade-left"],
    html:not(.no-js) [data-aos="fade-right"],
    html:not(.no-js) [data-aos="fade-down-left"],
    html:not(.no-js) [data-aos="fade-down-right"],
    html:not(.no-js) [data-aos="fade-up-left"],
    html:not(.no-js) [data-aos="fade-up-right"] {
        transform: translate3d(0, 34px, 0);
    }
    html:not(.no-js) [data-aos="fade-up"] { transform: translate3d(0, 34px, 0); }
}

@media (max-width: 575.98px) {
    /* Comfortable left/right breathing room (was 12px → text hugged the edge) */
    .container, .container-fluid:not(.px-0) { --bs-gutter-x: 2.5rem; }
    .container-fluid.px-0 { --bs-gutter-x: 0; }
}


/* ── 2. BUTTONS ON DARK BACKGROUNDS (all screens) ──────────────── */
/* .btn-orange is navy – on a navy hero / banner it vanished (see
   "Request a Quote" in the screenshot). Give it a white face there.  */
.hero-section .btn-orange,
.cta-banner .btn-orange,
.newsletter-section .btn-orange,
.page-hero .btn-orange,
.contact-strip-info .btn-orange,
.process-section .btn-orange,
.stats-section .btn-orange {
    background: #ffffff;
    color: var(--primary) !important;
    border-color: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.hero-section .btn-orange::before,
.cta-banner .btn-orange::before,
.newsletter-section .btn-orange::before,
.page-hero .btn-orange::before,
.contact-strip-info .btn-orange::before,
.process-section .btn-orange::before,
.stats-section .btn-orange::before { display: none; }

.hero-section .btn-orange:hover,
.cta-banner .btn-orange:hover,
.newsletter-section .btn-orange:hover,
.page-hero .btn-orange:hover,
.contact-strip-info .btn-orange:hover,
.process-section .btn-orange:hover,
.stats-section .btn-orange:hover {
    background: #e8eef7;
    border-color: #e8eef7;
    color: var(--primary) !important;
    letter-spacing: .5px;
}


/* Top info bar (tablet & up): icons were navy-on-navy, and the opening-hours
   text forced the social icons onto a second line at tablet width.       */
.top-bar .text-orange { color: rgba(255, 255, 255, .8) !important; }
@media (max-width: 991.98px) {
    .top-bar .col-md-5 > span.small { display: none; }
}


/* ── 3. TOP NAVBAR (mobile) ────────────────────────────────────── */
@media (max-width: 991.98px) {

    #mainNavbar { padding: 8px 0; }
    #mainNavbar.scrolled { padding: 6px 0; }
    #mainNavbar .navbar-brand { margin-right: 0; padding: 0; }
    /* logo-redesign.png has ~15% empty margin on its left, so pull it back
       until the "K" lines up with the page content edge.                 */
    #mainNavbar .navbar-brand .brand-logo,
    #mainNavbar.scrolled .navbar-brand .brand-logo {
        height: 50px !important; width: auto; margin-left: -19px;
    }

    /* Toggler: navy icon (was pink/lilac from a CSS filter hack) that
       morphs into an X when the menu is open.                          */
    #mainNavbar .navbar-toggler {
        width: 44px; height: 44px; padding: 0;
        border: 0 !important; border-radius: 12px;
        display: grid; place-items: center;
        background: rgba(12, 40, 79, .07);
        transition: background .25s ease, transform .25s var(--ease-spring);
    }
    #mainNavbar .navbar-toggler:active { transform: scale(.92); }
    #mainNavbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(12, 40, 79, .22); }

    #mainNavbar .navbar-toggler-icon {
        --bar: var(--primary);
        position: relative; display: block;
        width: 22px; height: 2px; border-radius: 2px;
        background-image: none !important; background-color: var(--bar);
        filter: none; transition: background-color .2s ease;
    }
    #mainNavbar .navbar-toggler-icon::before,
    #mainNavbar .navbar-toggler-icon::after {
        content: ''; position: absolute; left: 0; width: 100%; height: 2px;
        border-radius: 2px; background: var(--bar);
        transition: transform .35s var(--ease-out);
    }
    #mainNavbar .navbar-toggler-icon::before { transform: translateY(-7px); }
    #mainNavbar .navbar-toggler-icon::after  { transform: translateY(7px); }
    #mainNavbar .navbar-toggler[aria-expanded="true"] { background: var(--primary); }
    #mainNavbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { --bar: #fff; background-color: transparent; }
    #mainNavbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: rotate(45deg); }
    #mainNavbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after  { transform: rotate(-45deg); }

    /* Drop-down panel */
    #navbarMain {
        max-height: calc(100vh - var(--nav-h) - var(--mbn-h) - var(--safe-b) - 12px);
        overflow-y: auto; overscroll-behavior: contain;
    }
    #navbarMain .navbar-nav { padding: 10px 0 14px; gap: 2px; }
    #mainNavbar .nav-link {
        padding: 13px 14px !important; font-size: 1.05rem;
        border-radius: 10px;
    }
    #mainNavbar .nav-link::after { display: none; }
    #mainNavbar .nav-link.active { background: rgba(12, 40, 79, .07); }
    #mainNavbar .navbar-nav .btn-orange { width: 100%; margin-top: 8px; text-align: center; }

    #navbarMain.show .nav-item {
        animation: navItemIn .45s var(--ease-out) both;
    }
    #navbarMain.show .nav-item:nth-child(1) { animation-delay: .04s; }
    #navbarMain.show .nav-item:nth-child(2) { animation-delay: .08s; }
    #navbarMain.show .nav-item:nth-child(3) { animation-delay: .12s; }
    #navbarMain.show .nav-item:nth-child(4) { animation-delay: .16s; }
    #navbarMain.show .nav-item:nth-child(5) { animation-delay: .20s; }
    #navbarMain.show .nav-item:nth-child(6) { animation-delay: .24s; }
    #navbarMain.show .nav-item:nth-child(7) { animation-delay: .28s; }
}


/* ── 4. HERO ───────────────────────────────────────────────────── */

/* Word-break fix: markup now has a space after "Precision,", and this is
   the safety net if a long word still can't fit.                       */
.hero-title { overflow-wrap: break-word; }

/* Line masks for the entrance animation (all screens) */
.ht-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ht-in   { display: block; animation: lineRise .95s var(--ease-out) both; animation-delay: var(--d, .2s); }

.hero-rise { animation: heroRise .85s var(--ease-out) both; animation-delay: var(--d, 0s); }

/* Blueprint grid drifting very slowly behind the copy – structural
   drawing feel, purely atmospheric.                                    */
.hero-section::before {
    content: ''; position: absolute; inset: -44px 0 0 -44px; z-index: 1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 75% 25%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 75% 25%, #000 0%, transparent 75%);
    animation: gridDrift 26s linear infinite;
}

/* Light sweep across the primary hero button */
.hero-btns .btn-orange::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(12, 40, 79, .14), transparent);
    transform: skewX(-18deg); pointer-events: none;
    animation: btnSweep 4.5s ease-in-out 1.6s infinite;
}

@media (max-width: 991.98px) {

    .hero-section {
        min-height: calc(100vh - var(--nav-h));
        min-height: calc(100svh - var(--nav-h));
        padding: 0 !important;
        display: flex; align-items: center;
    }
    .hero-section .hero-content { padding-top: 34px; padding-bottom: calc(var(--mbn-h) + var(--safe-b) + 40px); }
    .hero-section .row.min-vh-100 { min-height: 0 !important; }
    .hero-bg-image { background-attachment: scroll; }
    .scroll-indicator { display: none; }

    .hero-badge {
        font-size: .72rem; letter-spacing: .8px; padding: 8px 16px; margin-bottom: 18px !important;
        max-width: 100%; text-align: left; line-height: 1.35;
    }
    .hero-title { font-size: clamp(1.9rem, 8.5vw, 3rem); line-height: 1.08; margin-bottom: 4px; }

    .hero-subtitle {
        font-size: clamp(1.05rem, 4.6vw, 1.35rem); letter-spacing: .4px;
        margin-top: 14px !important; margin-bottom: 16px;
        min-height: 3.1em;                     /* no layout jump while typing */
    }
    .hero-desc { font-size: .95rem; line-height: 1.75; margin-bottom: 26px; max-width: 100%; }

    .hero-btns { gap: 12px; margin-bottom: 30px; }
    .hero-btns .btn { padding: 15px 22px !important; font-size: 1.02rem; width: 100%; }

    .hero-stats {
        display: grid; grid-template-columns: repeat(2, 1fr);
        gap: 22px 18px; padding-top: 24px;
    }
    .hero-stat-number { font-size: 2rem; }
    .hero-stat-label  { font-size: .7rem; letter-spacing: .8px; display: block; margin-top: 4px; line-height: 1.35; }
}


/* ── 5. BOTTOM NAVIGATION BAR ──────────────────────────────────── */
/* Rebuilt so it is always the same width as the screen, sits on the
   safe-area (home-bar) and is readable: bigger icons + 11px labels.   */
.mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
    z-index: 1060;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    height: calc(var(--mbn-h) + var(--safe-b));
    padding: 0 6px var(--safe-b);
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
            backdrop-filter: saturate(1.5) blur(14px);
    border-top: 1px solid rgba(12, 40, 79, .10);
    box-shadow: 0 -8px 26px rgba(12, 40, 79, .14);
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
    animation: mbnIn .65s var(--ease-out) .1s both;
}

/* sliding marker (position set by mobile.js via --pos, 0-4) */
.mbn-indicator {
    position: absolute; top: -1px; left: 6px; height: 3px;
    width: calc((100% - 12px) / 5);
    display: flex; justify-content: center; pointer-events: none;
    transform: translateX(calc(var(--pos, 0) * 100%));
    transition: transform .55s var(--ease-spring), opacity .25s ease;
    opacity: 0;
}
.mbn-indicator.on { opacity: 1; }
.mbn-indicator::after {
    content: ''; width: 30px; height: 3px; border-radius: 0 0 4px 4px; background: var(--primary);
}

.mbn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: var(--mbn-h); min-width: 0; padding: 0 2px;
    color: #6f7a8a; text-decoration: none; position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease;
}
.mbn-ic {
    position: relative; display: grid; place-items: center;
    width: 54px; height: 30px; border-radius: 16px;
    font-size: 22px; line-height: 1;
    transition: transform .3s var(--ease-spring);
}
.mbn-ic i { position: relative; z-index: 1; line-height: 1; font-style: normal; }
.mbn-ic::before {              /* pill behind the active icon */
    content: ''; position: absolute; inset: 0; border-radius: 16px;
    background: rgba(12, 40, 79, .11);
    transform: scale(.35); opacity: 0;
    transition: transform .4s var(--ease-spring), opacity .25s ease;
}
.mbn-item > span:not(.mbn-ic) {
    font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .1px;
    line-height: 1; white-space: nowrap;
}
.mbn-item.active { color: var(--primary); }
.mbn-item.active > span:not(.mbn-ic) { font-weight: 700; }
.mbn-item.active .mbn-ic::before { transform: scale(1); opacity: 1; }
.mbn-item:active .mbn-ic { transform: scale(.86); }
.mbn-item.tapped .mbn-ic i { animation: iconPop .45s var(--ease-spring); }

/* centre "Get Quote" button – lifted above the bar */
.mbn-cta {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 4px; height: var(--mbn-h); padding-bottom: 9px;
    position: relative; text-decoration: none; color: var(--primary);
    -webkit-tap-highlight-color: transparent;
}
.mbn-cta > span:not(.mbn-fab) {
    font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.mbn-fab {
    position: relative; display: grid; place-items: center;
    width: 56px; height: 56px; margin-top: 0;
    border-radius: 50%; border: 4px solid #fff;
    background: linear-gradient(145deg, #1d4276, var(--primary));
    color: #fff; font-size: 21px;
    box-shadow: 0 8px 20px rgba(12, 40, 79, .42);
    transform: translateY(-4px);
    transition: transform .3s var(--ease-spring), box-shadow .25s ease;
}
.mbn-fab i { line-height: 1; font-style: normal; transition: transform .35s var(--ease-spring); }
.mbn-fab::before {              /* pulsing ring */
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(12, 40, 79, .5);
    animation: fabPulse 2.6s ease-out 1.2s infinite; pointer-events: none;
}
.mbn-cta:active .mbn-fab { transform: translateY(-2px) scale(.92); }
.mbn-cta.tapped .mbn-fab i { animation: fabFly .6s var(--ease-out); }
.mbn-cta.active .mbn-fab { box-shadow: 0 0 0 3px rgba(12, 40, 79, .18), 0 8px 20px rgba(12, 40, 79, .42); }

@media (max-width: 359.98px) {
    .mbn-item > span:not(.mbn-ic), .mbn-cta > span:not(.mbn-fab) { font-size: 10px; }
    .mbn-ic { width: 46px; }
}


/* ── 6. FLOATING BUTTONS ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    .whatsapp-float {
        right: 16px; bottom: calc(var(--mbn-h) + var(--safe-b) + 18px);
        width: 52px; height: 52px; font-size: 1.6rem;
    }
    .back-to-top {
        right: 20px; bottom: calc(var(--mbn-h) + var(--safe-b) + 82px);
        width: 44px; height: 44px; font-size: 1.1rem;
    }
}


/* ── 7. SECTION RHYTHM, CARDS, FORMS, FOOTER ───────────────────── */
@media (max-width: 991.98px) {

    /* The bottom nav is fixed – let the (dark) footer run underneath it
       instead of leaving a white strip.                                 */
    body { padding-bottom: 0 !important; }
    .main-footer { padding-bottom: calc(var(--mbn-h) + var(--safe-b) + 28px) !important; }

    /* Vertical rhythm: the 80-120px desktop paddings are far too airy on a phone */
    .services-overview, .why-choose-us, .testimonials-section { padding: 64px 0; }
    .stats-section { padding: 56px 0; }
    .cta-banner { padding: 60px 0; }
    section[style*="padding:80px 0"],
    section[style*="padding:90px 0"],
    section[style*="padding: 80px 0"] { padding-top: 60px !important; padding-bottom: 60px !important; }
    .newsletter-section { padding-top: 40px !important; padding-bottom: 40px !important; }

    /* Inner-page banners: the navbar is sticky, not overlaying → far less top padding */
    .page-hero, .about-hero {
        padding: 48px 0 76px !important;
        background-attachment: scroll !important;
    }
    .page-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .page-hero .fs-5 { font-size: 1.02rem !important; }

    .section-title { font-size: 1.75rem; }
    .section-header, .section-heading { margin-bottom: 30px; }

    /* Big padded blocks (Bootstrap p-5 = 48px) */
    .about-strip-content,
    .about-strip-content.p-5,
    .contact-strip-info.p-5,
    .contact-strip-form.p-5 { padding: 34px 20px !important; }
    .about-strip-img img { height: 260px; }
    .about-strip-badge { top: 16px; right: 16px; padding: 14px 16px; }

    .service-card { padding: 28px 22px; }
    .service-detail-img { height: 210px; }
    .contact-form-card, .quote-form-card, .apply-form-card { padding: 26px 20px !important; }

    /* Forms – 16px stops iOS zooming into the field */
    .form-control, .form-select, textarea.form-control { font-size: 16px; min-height: 48px; }
    textarea.form-control { min-height: 120px; }
    #newsletterForm { flex-direction: column; }
    #newsletterForm .btn { width: 100%; padding: 13px 20px; }

    /* Services quick-nav: stick right under the real navbar, swipeable */
    .services-quick-nav { top: var(--nav-h) !important; }
    .services-quick-nav .d-flex { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .services-quick-nav .container { padding-left: 0; padding-right: 0; }
    .svc-nav-tab { scroll-snap-align: start; padding: 14px 18px !important; }

    /* Filter chips: one swipeable row instead of a 3-line wrap */
    .filter-tabs {
        flex-wrap: nowrap !important; justify-content: flex-start !important;
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin-left: -20px; margin-right: -20px; padding: 2px 20px 6px;
        scroll-snap-type: x proximity; scroll-padding: 0 20px; margin-bottom: 26px;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

    /* Footer */
    .main-footer .row { --bs-gutter-y: 2rem; }
    .footer-links li a { display: inline-block; padding: 5px 0; }
    .footer-contact li { align-items: flex-start; }

    /* Back-to-back full-width buttons in CTA rows */
    .cta-banner .btn, .process-section .btn { width: 100%; }
    .cta-banner .btn + .btn { margin-top: 12px; }
}

@media (max-width: 575.98px) {
    /* Tap-friendly, full-width primary actions inside content */
    section .btn.px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .about-strip-content .btn, .services-overview .btn,
    .featured-projects .btn, .gallery-preview .btn { width: 100%; }
}


/* ── 8. TOUCH FEEDBACK ─────────────────────────────────────────── */
/* Phones have no hover; :hover "sticks" after a tap and letter-spacing
   changes made buttons jump.  Neutralise, and give a pressed state.   */
@media (hover: none) {
    .btn-orange:hover, .btn-outline-orange:hover, .btn-outline-light-custom:hover {
        letter-spacing: .5px; transform: none;
    }
    .service-card:hover, .industry-card:hover, .fp-card:hover,
    .feature-item:hover, .service-detail-card:hover, .hero-service-card:hover { transform: none; }
}
.btn { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97) !important; transition-duration: .12s !important; }
.service-card:active, .industry-card:active, .fp-card:active,
.feature-item:active, .service-detail-card:active { transform: scale(.985); }


/* ── 9. ANIMATIONS ─────────────────────────────────────────────── */
@keyframes heroRise {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes lineRise {
    from { transform: translate3d(0, 108%, 0); }
    to   { transform: none; }
}
@keyframes gridDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(44px, 44px, 0); }
}
@keyframes btnSweep {
    0%, 55% { left: -60%; }
    100%    { left: 130%; }
}
@keyframes navItemIn {
    from { opacity: 0; transform: translate3d(0, -10px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes mbnIn {
    from { transform: translate3d(0, 110%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}
@keyframes fabPulse {
    0%   { transform: scale(1);   opacity: .7; }
    70%  { transform: scale(1.32); opacity: 0; }
    100% { transform: scale(1.32); opacity: 0; }
}
@keyframes iconPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3) translateY(-2px); }
    100% { transform: scale(1); }
}
@keyframes fabFly {
    0%   { transform: translate(0, 0) rotate(0); }
    45%  { transform: translate(10px, -10px) rotate(12deg); opacity: .4; }
    46%  { transform: translate(-10px, 10px); opacity: 0; }
    100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

/* Scroll reveals (AOS) – a little softer & quicker on phones */
@media (max-width: 991.98px) {
    [data-aos] { transition-timing-function: cubic-bezier(.22, .8, .24, 1) !important; }
}


/* ── 10. REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ht-in, .hero-rise, .hero-section::before, .hero-btns .btn-orange::after,
    .mobile-bottom-nav, .mbn-fab::before, #navbarMain.show .nav-item,
    .whatsapp-float, .hero-particles span { animation: none !important; }
    .mbn-indicator, .mbn-ic, .mbn-ic::before, .mbn-fab { transition: none !important; }
    html { scroll-behavior: auto; }
}