/* ============ Design Tokens ============ */
        :root {
            --color-navy: #002159;
            --color-blue: #0060AA;
            --color-red: #DC2626;
            --color-red-dark: #B91C1C;
            --font-sans: 'Inter', sans-serif;
            --radius-card: 1rem;
            --transition-base: .3s ease;
        }

        * {
            font-family: 'Inter', sans-serif;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: #0060AA;
        }

        .bg-grid-pattern {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
            background-size: 48px 48px;
        }

        .nav-link {
            position: relative;
            font-weight: 600;
            transition: color .25s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 0%;
            height: 2px;
            background: #DC2626;
            transition: width .3s ease;
        }

        .nav-link:hover {
            color: #DC2626 !important;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .7s cubic-bezier(.22, .9, .35, 1), transform .7s cubic-bezier(.22, .9, .35, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-delay-1.active {
            transition-delay: .08s;
        }

        .reveal-delay-2.active {
            transition-delay: .16s;
        }

        .reveal-delay-3.active {
            transition-delay: .24s;
        }

        .cert-card,
        .award-card,
        .product-card {
            transition: transform .35s cubic-bezier(.22, .9, .35, 1), box-shadow .35s ease, border-color .35s ease;
        }

        .cert-card:hover,
        .award-card:hover,
        .product-card:hover {
            transform: translateY(-8px);
        }

        .timeline-dot {
            position: relative;
        }

        .timeline-dot::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 9999px;
            border: 2px solid rgba(37, 99, 235, .5);
            animation: ring-pulse 2.4s ease-out infinite;
        }

        @keyframes ring-pulse {
            0% {
                transform: scale(.85);
                opacity: .9;
            }

            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }

        .btn-primary {
            transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.02);
        }

        .btn-primary:active {
            transform: translateY(0) scale(.98);
        }

        #mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height .45s ease;
        }

        #mobile-menu.open {
            max-height: 480px;
        }

        .hamburger-line {
            transition: transform .3s ease, opacity .3s ease;
        }

        #hamburger-btn.open .line-1 {
            transform: translateY(7px) rotate(45deg);
        }

        #hamburger-btn.open .line-2 {
            opacity: 0;
        }

        #hamburger-btn.open .line-3 {
            transform: translateY(-7px) rotate(-45deg);
        }

        .counter-icon {
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40;
        }

        .quicknav-link {
            transition: all .25s ease;
        }

        .quicknav-link.active-cat {
            background: #DC2626;
            color: #fff;
        }

        .video-thumb {
            position: relative;
            cursor: pointer;
        }

        .video-thumb::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 33, 89, .75), rgba(0, 33, 89, .1));
            border-radius: inherit;
        }

        .play-btn {
            transition: transform .3s ease;
        }

        .video-thumb:hover .play-btn {
            transform: scale(1.12);
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: .001ms !important;
                transition-duration: .001ms !important;
                scroll-behavior: auto !important;
            }
        }

        a:focus-visible,
        button:focus-visible {
            outline: 2px solid #DC2626;
            outline-offset: 2px;
        }

        /* ============ Mega Menu ============ */
        .mega-menu-wrap {
            position: relative;
        }

        .mega-menu {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            width: min(880px, 90vw);
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 24px 60px -12px rgba(0, 33, 89, .25);
            border: 1px solid rgba(0, 33, 89, .06);
            padding: 2rem;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
            z-index: 60;
        }

        /* Invisible bridge over the gap above the dropdown so hover isn't lost
           while the cursor travels from the trigger into the menu */
        .mega-menu::before,
        .simple-menu::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            height: 24px;
        }

        .mega-menu-wrap:hover .mega-menu,
        .mega-menu-wrap:focus-within .mega-menu,
        .mega-menu-wrap.open .mega-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        .mega-menu-col h5 {
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--color-red);
            margin-bottom: .9rem;
        }

        .mega-menu-col a {
            display: block;
            font-size: .92rem;
            color: #334155;
            padding: .4rem 0;
            transition: color .2s ease, transform .2s ease;
        }

        .mega-menu-col a:hover {
            color: var(--color-red);
            transform: translateX(3px);
        }

        .mega-menu-col .view-all {
            font-weight: 700;
            color: var(--color-navy);
            margin-top: .5rem;
        }

        /* ============ Simple Dropdown (Media menu) ============ */
        .simple-menu-wrap {
            position: relative;
        }

        .simple-menu {
            position: absolute;
            top: calc(100% + 14px);
            right: 0;
            left: auto;
            min-width: 230px;
            max-width: min(90vw, 260px);
            background: #fff;
            border-radius: .85rem;
            box-shadow: 0 24px 60px -12px rgba(0, 33, 89, .25);
            border: 1px solid rgba(0, 33, 89, .06);
            padding: .6rem;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(8px);
            transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
            z-index: 60;
        }

        .simple-menu-wrap:hover .simple-menu,
        .simple-menu-wrap:focus-within .simple-menu,
        .simple-menu-wrap.open .simple-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        .simple-menu a {
            display: block;
            font-size: .92rem;
            font-weight: 600;
            color: #334155;
            padding: .6rem .85rem;
            border-radius: .55rem;
            opacity: 0;
            transform: translateY(-6px);
            transition: background-color .2s ease, color .2s ease, opacity .28s ease, transform .28s ease;
        }

        .simple-menu-wrap:hover .simple-menu a,
        .simple-menu-wrap:focus-within .simple-menu a,
        .simple-menu-wrap.open .simple-menu a {
            opacity: 1;
            transform: translateY(0);
        }

        .simple-menu a:nth-child(1) { transition-delay: .03s; }
        .simple-menu a:nth-child(2) { transition-delay: .06s; }
        .simple-menu a:nth-child(3) { transition-delay: .09s; }
        .simple-menu a:nth-child(4) { transition-delay: .12s; }
        .simple-menu a:nth-child(5) { transition-delay: .15s; }
        .simple-menu a:nth-child(6) { transition-delay: .18s; }
        .simple-menu a:nth-child(7) { transition-delay: .21s; }
        .simple-menu a:nth-child(8) { transition-delay: .24s; }

        .simple-menu a:hover {
            background: #F1F5F9;
            color: var(--color-red);
        }

        /* Mobile accordion for Products */
        .mobile-accordion-trigger .accordion-caret {
            transition: transform .3s ease;
        }

        .mobile-accordion-trigger.open .accordion-caret {
            transform: rotate(180deg);
        }

        .mobile-accordion-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease;
        }

        .mobile-accordion-panel.open {
            max-height: 600px;
        }

        /* Utility bar */
        .utility-bar a {
            transition: color .2s ease;
        }

        .utility-bar a:hover {
            color: var(--color-red);
        }

        /* Search flyout */
        #search-panel {
            transition: opacity .25s ease, transform .25s ease;
        }

        /* Placeholder blocks (Leadership etc.) */
        .placeholder-card {
            border: 2px dashed #CBD5E1;
            background: repeating-linear-gradient(45deg, #F8FAFC, #F8FAFC 10px, #F1F5F9 10px, #F1F5F9 20px);
        }

        /* ============================================================
           Homepage components — Hero carousel / Series / Testimonials / FAQ
           ============================================================ */

        /* ---- Hero carousel ---- */
        #hero-carousel { position: relative; }

        .hero-slide { display: none !important; }

        .hero-slide.is-active {
            display: flex !important;
            animation: heroFade .6s cubic-bezier(.22, .9, .35, 1);
        }

        @keyframes heroFade {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .hero-image-container { position: relative; }

        .hero-arrow {
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: rgba(255, 255, 255, .12);
            border: 1px solid rgba(255, 255, 255, .35);
            transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
        }

        .hero-arrow:hover {
            background: #DC2626;
            border-color: #DC2626;
            transform: translateY(-2px);
        }

        .hero-dot {
            width: 8px;
            height: 8px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, .4);
            border: 0;
            padding: 0;
            cursor: pointer;
            transition: width .3s ease, background-color .3s ease;
        }

        .hero-dot.is-active {
            width: 26px;
            background: #fff;
        }

        /* ---- Hero floating 65-year badge ---- */
        .hero-badge-float {
            position: absolute;
            right: .75rem;
            bottom: .75rem;
            left: auto;
            width: 92px;
            height: 92px;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .5rem;
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .35);
            animation: badgeFloat 4.5s ease-in-out infinite;
            pointer-events: none;
        }

        .hero-badge-float img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-10px); }
        }

        @media (min-width: 640px) {
            .hero-badge-float { width: 116px; height: 116px; }
        }

        @media (min-width: 1024px) {
            .hero-badge-float {
                width: 150px;
                height: 150px;
                left: -2.25rem;
                right: auto;
                top: -2.25rem;
                bottom: auto;
            }
        }

        /* ---- Generic glass badge (fallback) ---- */
        .glass-badge {
            background: rgba(255, 255, 255, .1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 1rem;
        }

        /* ---- Series cards ---- */
        .series-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 1rem;
            overflow: hidden;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }

        .series-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px -14px rgba(0, 33, 89, .20);
            border-color: #0060AA;
        }

        .series-card-media {
            aspect-ratio: 4 / 3;
            background: #f8fafc;
            border-bottom: 1px solid #eef1f5;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .series-card-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 1.1rem;
            transition: transform .4s ease;
        }

        .series-card:hover .series-card-media img { transform: scale(1.06); }

        .series-card-body {
            display: flex;
            flex-direction: column;
            gap: .5rem;
            padding: 1.15rem 1.3rem 1.35rem;
            flex: 1;
        }

        .series-card-tag {
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #0060AA;
        }

        .series-card h3 {
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.3;
            color: #002159;
        }

        .series-card p {
            font-size: .82rem;
            line-height: 1.5;
            color: #6b7280;
            flex: 1;
        }

        .series-card-cta {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            margin-top: .35rem;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #DC2626;
        }

        .series-card-cta .material-symbols-outlined {
            font-size: 1.1rem;
            transition: transform .3s ease;
        }

        .series-card:hover .series-card-cta .material-symbols-outlined { transform: translateX(4px); }

        /* ---- News cards ---- */
        .news-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #eef0f3;
            border-radius: 1rem;
            overflow: hidden;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
            transition: transform .3s ease, box-shadow .3s ease;
        }

        .news-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 22px 44px -16px rgba(0, 33, 89, .22);
        }

        .news-card-media {
            aspect-ratio: 16 / 10;
            background: #f1f5f9;
            overflow: hidden;
        }

        .news-card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .news-card:hover .news-card-media img { transform: scale(1.06); }

        .news-card-body {
            display: flex;
            flex-direction: column;
            gap: .55rem;
            padding: 1.3rem 1.35rem 1.45rem;
            flex: 1;
        }

        .news-card-meta {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #9aa3b0;
        }

        .news-card-cat { color: #DC2626; }

        .news-card h4 {
            font-size: 1.02rem;
            font-weight: 800;
            line-height: 1.35;
            color: #002159;
        }

        .news-card p {
            font-size: .85rem;
            line-height: 1.55;
            color: #6b7280;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-card-cta {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            margin-top: .25rem;
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #0060AA;
        }

        .news-card-cta .material-symbols-outlined {
            font-size: 1.05rem;
            transition: transform .3s ease;
        }

        .news-card:hover .news-card-cta .material-symbols-outlined { transform: translateX(4px); }

        /* ---- Blog cards ---- */
        .blog-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #eef0f3;
            border-radius: 1.25rem;
            overflow: hidden;
            text-decoration: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
            transition: transform .3s ease, box-shadow .3s ease;
        }

        .blog-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 22px 44px -16px rgba(0, 33, 89, .22);
        }

        .blog-card-media {
            position: relative;
            aspect-ratio: 16 / 10;
            background: #f1f5f9;
            overflow: hidden;
        }

        .blog-card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .blog-card:hover .blog-card-media img { transform: scale(1.06); }

        .blog-card-badge {
            position: absolute;
            left: 14px;
            top: 14px;
            background: #DC2626;
            color: #fff;
            font-size: .64rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .4rem .8rem;
            border-radius: 999px;
            box-shadow: 0 8px 18px -6px rgba(220, 38, 38, .55);
        }

        .blog-card-body {
            display: flex;
            flex-direction: column;
            gap: .6rem;
            padding: 1.4rem 1.4rem 1.6rem;
            flex: 1;
        }

        .blog-card-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: .72rem;
            font-weight: 700;
            color: #9aa3b0;
        }

        .blog-card-meta .material-symbols-outlined {
            font-size: 1rem;
            color: #DC2626;
        }

        .blog-card h4 {
            font-size: 1.15rem;
            font-weight: 800;
            line-height: 1.35;
            color: #002159;
        }

        .blog-card:hover h4 { color: #DC2626; }

        .blog-card p {
            font-size: .88rem;
            line-height: 1.6;
            color: #6b7280;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* ---- Blog sidebar ---- */
        .blog-sidebar-card {
            background: #fff;
            border: 1px solid #eef0f3;
            border-radius: 1.25rem;
            padding: 1.75rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
        }

        .blog-sidebar-card + .blog-sidebar-card { margin-top: 1.5rem; }

        .blog-sidebar-card h3 {
            font-size: 1.1rem;
            font-weight: 800;
            color: #002159;
            padding-bottom: .85rem;
            margin-bottom: .5rem;
            border-bottom: 3px solid #DC2626;
            display: inline-block;
        }

        .blog-sidebar-card ul { display: flex; flex-direction: column; }

        .blog-sidebar-card ul a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .75rem .25rem;
            border-bottom: 1px solid #f1f3f9;
            color: #47506b;
            font-weight: 700;
            font-size: .92rem;
            text-decoration: none;
            transition: color .2s ease, padding-left .2s ease;
        }

        .blog-sidebar-card ul li:last-child a { border-bottom: 0; }

        .blog-sidebar-card ul a:hover,
        .blog-sidebar-card ul a.is-active {
            color: #DC2626;
            padding-left: .5rem;
        }

        .blog-sidebar-card ul a .count {
            font-weight: 800;
            color: #9aa3b0;
            font-size: .82rem;
        }

        .blog-sidebar-card ul a:hover .count,
        .blog-sidebar-card ul a.is-active .count { color: #DC2626; }

        .blog-sidebar-cta {
            text-align: center;
            background: linear-gradient(160deg, #002159 0%, #0B1B3F 100%);
            border: 0;
        }

        .blog-sidebar-cta .material-symbols-outlined {
            font-size: 2rem;
            color: #fff;
            background: rgba(255, 255, 255, .1);
            width: 56px;
            height: 56px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto .9rem;
        }

        .blog-sidebar-cta h4 { color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: .4rem; }
        .blog-sidebar-cta p { color: rgba(255,255,255,.6); font-size: .85rem; line-height: 1.5; margin-bottom: 1.1rem; }

        .blog-sidebar-cta a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: #DC2626;
            color: #fff;
            font-weight: 800;
            font-size: .85rem;
            padding: .75rem 1rem;
            border-radius: .8rem;
            text-decoration: none;
            transition: background-color .2s ease;
        }

        .blog-sidebar-cta a:hover { background: #b91c1c; }

        /* ---- Testimonials carousel ---- */
        #testi-carousel { position: relative; }

        .testi-slide { display: none !important; }

        .testi-slide.is-active {
            display: flex !important;
            animation: heroFade .5s cubic-bezier(.22, .9, .35, 1);
        }

        .testi-avatar {
            width: 96px;
            height: 96px;
            border-radius: 9999px;
            overflow: hidden;
            flex-shrink: 0;
            border: 2px solid rgba(255, 255, 255, .25);
            background: rgba(255, 255, 255, .12);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .testi-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testi-avatar span {
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
        }

        @media (min-width: 1024px) {
            .testi-avatar { width: 120px; height: 120px; }
            .testi-avatar span { font-size: 2rem; }
        }

        @media (max-width: 480px) {
            .testi-avatar { width: 84px; height: 84px; }
        }

        .testi-dot {
            width: 8px;
            height: 8px;
            border-radius: 9999px;
            background: #cdd6e4;
            border: 0;
            padding: 0;
            cursor: pointer;
            transition: width .3s ease, background-color .3s ease;
        }

        .testi-dot.is-active {
            width: 26px;
            background: #0060AA;
        }

        /* ---- FAQ accordion ---- */
        .faq-question {
            width: 100%;
            text-align: left;
            background: transparent;
            border: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .faq-icon {
            transition: transform .3s ease, background-color .3s ease, color .3s ease;
        }

        .faq-item.open .faq-icon {
            transform: rotate(45deg);
            background: #0060AA;
            color: #fff;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s cubic-bezier(.22, .9, .35, 1);
        }

        .faq-answer-inner {
            overflow: hidden;
        }

        .faq-item {
            transition: border-color .3s ease, box-shadow .3s ease;
        }

        .faq-item.open {
            border-color: #bfdbfe;
            box-shadow: 0 18px 40px -18px rgba(0, 96, 170, .35);
        }

        /* ============================================================
           2026 corrections — typography scale, enquiry popup, promo
           carousel, sticky WhatsApp, water-pump preloader
           ============================================================ */

        /* ---- (2) Site-wide typography normalisation ---- */
        :root {
            --fs-body: 1rem;
            --lh-body: 1.65;
            --fs-h1-max: 3rem;      /* 48px hard cap for hero headings   */
            --fs-h2-max: 2.25rem;   /* 36px cap for section headings     */
        }

        html { font-size: 16px; }

        @media (max-width: 640px) {
            html { font-size: 15px; }
        }

        body {
            font-size: var(--fs-body);
            line-height: var(--lh-body);
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        p { line-height: var(--lh-body); }

        /* Cap the largest display utilities so nothing renders oversized.
           Loaded after the Tailwind CDN <style>, so these win by source order. */
        .text-6xl { font-size: 2.5rem !important; line-height: 1.15 !important; }
        .text-7xl { font-size: 2.75rem !important; line-height: 1.12 !important; }
        .text-8xl { font-size: 3rem !important; line-height: 1.1 !important; }

        @media (min-width: 1024px) {
            .lg\:text-6xl { font-size: 2.75rem !important; line-height: 1.12 !important; }
            .lg\:text-7xl { font-size: 3rem !important; line-height: 1.1 !important; }
            .xl\:text-7xl { font-size: 3rem !important; line-height: 1.1 !important; }
        }

        /* Hero: keep the headline neat, readable and never huge */
        #hero-carousel .hero-title {
            font-size: clamp(1.75rem, 1.1rem + 3.2vw, var(--fs-h1-max)) !important;
            line-height: 1.15 !important;
            letter-spacing: -0.01em;
            font-weight: 800;
        }

        #hero-carousel .hero-title .block { line-height: 1.15; }

        #hero-carousel p {
            font-size: clamp(0.98rem, 0.9rem + 0.5vw, 1.15rem) !important;
            line-height: 1.6 !important;
        }

        #hero-carousel .hero-image-container .relative > h3 { font-size: 1.35rem; }

        /* Section headings — comfortable, not shouty */
        section h2 {
            font-size: clamp(1.5rem, 1.15rem + 1.6vw, var(--fs-h2-max));
            line-height: 1.2;
        }

        /* ---- (1) Enquiry popup / modal ---- */
        #enquiry-modal {
            position: fixed;
            inset: 0;
            z-index: 1200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.25rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s ease, visibility .3s ease;
        }

        #enquiry-modal.open {
            opacity: 1;
            visibility: visible;
        }

        #enquiry-modal .enquiry-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 20, 56, .62);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }

        #enquiry-modal .enquiry-dialog {
            position: relative;
            width: min(560px, 100%);
            max-height: calc(100vh - 2.5rem);
            overflow-y: auto;
            background: #fff;
            border-radius: 1.25rem;
            box-shadow: 0 40px 80px -20px rgba(0, 20, 56, .55);
            transform: translateY(24px) scale(.96);
            transition: transform .35s cubic-bezier(.22, .9, .35, 1);
        }

        #enquiry-modal.open .enquiry-dialog {
            transform: translateY(0) scale(1);
        }

        .enquiry-close {
            position: absolute;
            top: .85rem;
            right: .85rem;
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 9999px;
            background: #f1f5f9;
            color: #002159;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color .2s ease, transform .2s ease;
        }

        .enquiry-close:hover {
            background: #DC2626;
            color: #fff;
            transform: rotate(90deg);
        }

        .enquiry-field {
            width: 100%;
            border: 1px solid #e2e8f0;
            border-radius: .65rem;
            padding: .75rem .9rem;
            font-size: .9rem;
            transition: border-color .2s ease, box-shadow .2s ease;
        }

        .enquiry-field:focus {
            outline: none;
            border-color: #DC2626;
            box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
        }

        /* ---- (3) Promo carousel (4 slides) ---- */
        #promo-carousel { position: relative; }

        .promo-track {
            position: relative;
            width: 100%;
            border-radius: 1.25rem;
            overflow: hidden;
            box-shadow: 0 24px 60px -24px rgba(0, 33, 89, .35);
            background: #eef2f7;
        }

        .promo-slide {
            display: none;
            width: 100%;
        }

        .promo-slide.is-active {
            display: block;
            animation: heroFade .6s cubic-bezier(.22, .9, .35, 1);
        }

        .promo-slide img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .promo-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #002159;
            background: rgba(255, 255, 255, .85);
            border: 0;
            cursor: pointer;
            box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
            transition: background-color .25s ease, transform .25s ease, color .25s ease;
            z-index: 5;
        }

        .promo-arrow:hover {
            background: #DC2626;
            color: #fff;
        }

        .promo-arrow.promo-prev { left: 14px; }
        .promo-arrow.promo-next { right: 14px; }

        .promo-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            margin-top: 1.1rem;
        }

        .promo-dot {
            width: 8px;
            height: 8px;
            border-radius: 9999px;
            background: #c4ccd8;
            border: 0;
            padding: 0;
            cursor: pointer;
            transition: width .3s ease, background-color .3s ease;
        }

        .promo-dot.is-active {
            width: 26px;
            background: #0060AA;
        }

        @media (max-width: 640px) {
            .promo-arrow { width: 36px; height: 36px; }
            .promo-arrow.promo-prev { left: 8px; }
            .promo-arrow.promo-next { right: 8px; }
        }

        /* ---- (0) Footer social icons ---- */
        .social-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .12);
            transition: background .25s ease, transform .25s ease, border-color .25s ease;
        }

        .social-badge svg {
            width: 19px;
            height: 19px;
            fill: #cbd5e1;
            transition: fill .25s ease;
        }

        .social-badge:hover {
            background: #DC2626;
            border-color: #DC2626;
            transform: translateY(-3px);
        }

        .social-badge:hover svg {
            fill: #fff;
        }

        /* ---- (4b) Scroll-to-top button ---- */
        .scrolltop-float {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1095;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 9999px;
            background: linear-gradient(160deg, #FF8A1E 0%, #FF5B00 55%, #F03D00 100%);
            color: #fff;
            box-shadow: 0 10px 24px -8px rgba(240, 61, 0, .6);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity .25s ease, transform .25s ease, visibility .25s ease, box-shadow .25s ease;
        }

        .scrolltop-float.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .scrolltop-float:hover {
            box-shadow: 0 14px 30px -6px rgba(240, 61, 0, .75);
            transform: translateY(-3px);
        }

        .scrolltop-float svg {
            width: 22px;
            height: 22px;
            fill: #fff;
        }

        @media (max-width: 640px) {
            .scrolltop-float { width: 44px; height: 44px; right: 16px; bottom: 16px; }
        }

        /* ---- (4a) Sticky Enquiry Now tab ---- */
        .enquire-float {
            position: fixed;
            left: 0;
            top: 58%;
            transform: translateY(-50%);
            z-index: 1090;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 18px 10px 20px;
            background: linear-gradient(160deg, #FF8A1E 0%, #FF5B00 55%, #F03D00 100%);
            color: #fff;
            text-decoration: none;
            border-radius: 0 18px 18px 0;
            box-shadow: 6px 10px 26px -8px rgba(240, 61, 0, .55);
            transition: padding-left .25s ease, box-shadow .25s ease, transform .25s ease;
        }

        .enquire-float:hover {
            padding-left: 16px;
            box-shadow: 8px 16px 34px -6px rgba(240, 61, 0, .7);
        }

        .enquire-float-icon {
            display: flex;
            width: 26px;
            height: 26px;
        }

        .enquire-float-icon svg {
            width: 100%;
            height: 100%;
            fill: #fff;
        }

        .enquire-float-text {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: .82rem;
            font-weight: 800;
            letter-spacing: .2em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        @media (max-width: 640px) {
            .enquire-float { top: auto; bottom: 18px; padding: 12px 7px 14px; gap: 7px; }
            .enquire-float-icon { width: 20px; height: 20px; }
            .enquire-float-text { font-size: .66rem; letter-spacing: .14em; }
        }

        /* ---- (4) Sticky WhatsApp button ---- */
        .wa-float {
            position: fixed;
            right: 20px;
            bottom: 82px;
            z-index: 1100;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            border-radius: 9999px;
            background: #25D366;
            color: #fff;
            box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6);
            transition: transform .25s ease, box-shadow .25s ease;
            animation: waPulse 2.6s ease-in-out infinite;
        }

        .wa-float:hover {
            transform: scale(1.08);
            box-shadow: 0 16px 34px -8px rgba(37, 211, 102, .75);
        }

        .wa-float svg {
            width: 30px;
            height: 30px;
            fill: currentColor;
        }

        .wa-float .wa-label {
            position: absolute;
            right: 68px;
            white-space: nowrap;
            background: #002159;
            color: #fff;
            font-size: .78rem;
            font-weight: 700;
            padding: .5rem .8rem;
            border-radius: .55rem;
            opacity: 0;
            transform: translateX(8px);
            pointer-events: none;
            transition: opacity .25s ease, transform .25s ease;
        }

        .wa-float:hover .wa-label {
            opacity: 1;
            transform: translateX(0);
        }

        @keyframes waPulse {
            0%, 100% { box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, .45); }
            50%      { box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6), 0 0 0 14px rgba(37, 211, 102, 0); }
        }

        @media (max-width: 640px) {
            .wa-float { width: 52px; height: 52px; right: 16px; bottom: 72px; }
            .wa-float .wa-label { display: none; }
        }

        /* ---- (6) Water-pump loading animation ---- */
        #site-preloader {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.4rem;
            background: linear-gradient(160deg, #002159 0%, #0060AA 100%);
            transition: opacity .5s ease, visibility .5s ease;
        }

        #site-preloader.is-hidden {
            opacity: 0;
            visibility: hidden;
        }

        .pump-loader {
            position: relative;
            width: 140px;
            height: 140px;
        }

        /* rotating impeller */
        .pump-loader .impeller {
            transform-origin: 70px 70px;
            animation: impellerSpin 1s linear infinite;
        }

        @keyframes impellerSpin {
            to { transform: rotate(360deg); }
        }

        /* water rising inside the pump casing */
        .pump-loader .water-fill {
            animation: waterRise 2.2s ease-in-out infinite;
            transform-origin: 70px 120px;
        }

        @keyframes waterRise {
            0%, 100% { transform: scaleY(.35); opacity: .8; }
            50%      { transform: scaleY(1); opacity: 1; }
        }

        /* droplets ejected from the outlet */
        .pump-loader .drop {
            animation: dropFlow 1.4s ease-in infinite;
            opacity: 0;
        }

        .pump-loader .drop.d2 { animation-delay: .45s; }
        .pump-loader .drop.d3 { animation-delay: .9s; }

        @keyframes dropFlow {
            0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
            20%  { opacity: 1; }
            100% { transform: translate(46px, -30px) scale(1); opacity: 0; }
        }

        .pump-loader-text {
            color: #fff;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .22em;
            text-transform: uppercase;
        }

        .pump-loader-bar {
            width: 180px;
            height: 4px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, .2);
            overflow: hidden;
        }

        .pump-loader-bar span {
            display: block;
            height: 100%;
            width: 40%;
            border-radius: inherit;
            background: #fff;
            animation: loaderBar 1.3s ease-in-out infinite;
        }

        @keyframes loaderBar {
            0%   { transform: translateX(-120%); }
            100% { transform: translateX(320%); }
        }

        @media (prefers-reduced-motion: reduce) {
            .pump-loader .impeller,
            .pump-loader .water-fill,
            .pump-loader .drop,
            .pump-loader-bar span,
            .wa-float { animation: none !important; }
        }

        /* product image thumbnails on catalog tiles */
        .product-thumb {
            width: 100%;
            aspect-ratio: 4 / 3;
            border-radius: .9rem;
            overflow: hidden;
            background: #f4f6f9;
            border: 1px solid #eef1f5;
            margin-bottom: 1rem;
        }

        .product-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: .6rem;
            transition: transform .4s ease;
        }

        .product-card:hover .product-thumb img { transform: scale(1.05); }