/* Responsive line break for address in footer */
.responsive-br {
    display: none;
}
@media (max-width: 600px) {
    .responsive-br {
        display: block;
        width: 100%;
        height: 0;
    }
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

/* Infra card image wrapper for overlay */
.infra-card-img-wrapper {
    position: relative;
    width: 92%;
    margin: 0 auto 14px auto;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,250,0.9));
}
.infra-card-img-wrapper img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.28s ease, filter 0.22s ease;
}
.infra-card-img-wrapper:hover img {
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.03);
}
.infra-card-more {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(28,55,97,0.92);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    display: block; /* present in layout but hidden by opacity for transitions */
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 8;
    white-space: nowrap;
}

/* Show the "Click for More" indicator only for the focused/active infra card.
   The JS carousel already toggles the `infra-card-focus` class on the active card,
   and cards are made keyboard-focusable; this rule ensures only that card shows the tag. */
.infra-card.infra-card-focus .infra-card-more,
.infra-card:focus .infra-card-more,
.infra-card:focus-within .infra-card-more {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
    pointer-events: auto;
}
.infra-carousel-track::-webkit-scrollbar {
    display: none;
}
/* --- Infra Carousel Focused Card --- */


.infra-card {
    opacity: 0.95;
    border-radius: 18px;
    transition: box-shadow 0.22s cubic-bezier(.2,.9,.2,1), transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease;
    cursor: pointer;
    transform-origin: center top; /* grow downward to avoid top clipping */
    will-change: transform, box-shadow, filter;
    /* default unfocused visual: slightly muted and subtle blur */
    filter: grayscale(60%) blur(2px) contrast(0.95) saturate(0.85);
    opacity: 0.85;
}
.infra-card:hover {
    /* Hover should visually match the focused state so pointer focus is clear */
    transform: scale(1.05); /* slightly reduced to minimize clipping */
    box-shadow: 0 28px 70px rgba(12,37,79,0.26), 0 8px 22px rgba(12,37,79,0.12);
    filter: none;
    opacity: 1;
    z-index: 12;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,255,0.95));
}
.infra-card-focus {
    /* focused card should be fully sharp and fully visible */
    opacity: 1;
    transform: scale(1.05); /* align with hover, reduced scale */
    z-index: 12;
    box-shadow: 0 36px 90px rgba(12,37,79,0.28), 0 8px 26px rgba(12,37,79,0.12);
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,255,0.95));
    filter: none;
}
/* --- Infra Carousel Custom Styles --- */
.infra-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 32px 0;
    position: relative;
    overflow: visible; /* allow scaled cards to overflow */
}
.infra-carousel-track {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    overflow-y: visible; /* prevent vertical clipping when card scales up */
    scroll-behavior: smooth;
    padding: 28px 32px 64px; /* give extra bottom room so scaled cards aren't clipped */
    width: 96vw;
}
.infra-card {
    min-width: 320px;
    max-width: 340px;
    /* Brushed metal-style background: lines + subtle noise + base gradient */
    background-image:
        repeating-linear-gradient(-12deg,
            rgba(0, 0, 0, 0.04) 0px,
            rgba(0, 0, 0, 0.04) 1px,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0) 9px
        ),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='128' height='128' filter='url(%23n)' opacity='0.05'/></svg>"),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,249,255,0.98));
    background-size: auto, 128px 128px, auto;
    background-repeat: repeat, repeat, no-repeat;
    background-blend-mode: soft-light, normal, normal;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    min-height: 360px;
    padding: 18px 18px 20px 18px;
}
.infra-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(12,37,79,0.08);
}
.infra-carousel-arrow {
    background: linear-gradient(180deg,#274a7d,#1c3761);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(12,37,79,0.18);
    position: relative;
    z-index: 6;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    transform-origin: center center;
}
/* Color change on hover: white background and brand blue icon */
.infra-carousel-arrow:hover {
    background: #ffffff;
    color: #1C3761;
    box-shadow: 0 8px 22px rgba(12,37,79,0.20), inset 0 0 0 1px rgba(28,55,97,0.25);
}
/* Keep arrows fixed: include base translate on hover so they don't jump */
.infra-prev:hover, .infra-next:hover { transform: translateY(-50%) scale(1.08); }
/* Remove side navigation arrows for infra cards.
   If you want to restore them, remove or comment out the rule below. */
/* Re-enable side navigation arrows for infra cards */
.infra-carousel-arrow { display: inline-flex !important; }
.infra-carousel-wrapper { position: relative; }
.infra-prev, .infra-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.infra-prev { left: -18px; }
.infra-next { right: -18px; }

/* Keep arrows outside the card scaling area */
.infra-carousel-wrapper .infra-carousel-arrow {
    z-index: 20;
}

/* Product carousel arrows: reuse infra arrow styling but scoped to product carousels */
.product-carousel-wrapper {
    position: relative; /* container for arrows */
    display: flex;
    justify-content: center;
}
@media (max-width: 900px) {
    .product-carousel-wrapper {
        justify-content: flex-start;
    }
}
.product-carousel-wrapper .product-prev,
.product-carousel-wrapper .product-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    left: 8px; /* default for prev */
}
.product-carousel-wrapper .product-next { right: 8px; left: auto; }
.product-carousel-wrapper .product-carousel-arrow {
    background: linear-gradient(180deg,#274a7d,#1c3761);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(12,37,79,0.18);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.product-carousel-wrapper .product-carousel-arrow:hover {
    background: #ffffff;
    color: #1C3761;
    box-shadow: 0 8px 22px rgba(12,37,79,0.20), inset 0 0 0 1px rgba(28,55,97,0.25);
}

@media (max-width: 900px) {
    .product-carousel-wrapper .product-prev,
    .product-carousel-wrapper .product-next { display: none; } /* hide arrows on smaller screens to avoid overlap */
}

@media (max-width: 900px) {
    /* Keep nav buttons on either side of cards in mobile */
    .infra-prev, .infra-next { top: 50%; bottom: auto; transform: translateY(-50%); }
    .infra-prev { left: -10px; }
    .infra-next { right: -10px; }
    .infra-prev:hover, .infra-next:hover { transform: translateY(-50%) scale(1.08); }

    /* Remove card scaling on small screens to avoid horizontal overflow */
    .infra-card,
    .infra-card:hover,
    .infra-card-focus { 
        transform: none !important; 
        filter: none !important; 
        opacity: 1 !important; 
    }

    /* Ensure track fits viewport width exactly */
    .infra-carousel-track { 
        width: 100% !important; 
        padding-left: 12px; 
        padding-right: 12px; 
        padding-bottom: 16px; /* further reduce space below cards on mobile */
    }
}
/* Enable a grabbing cursor and avoid accidental clicks while dragging the carousel */
.infra-carousel-track.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    /* Improve GPU compositing for smoother scroll */
    will-change: scroll-position;
}
.infra-carousel-track.dragging .infra-card {
    pointer-events: none; /* prevent click handlers on cards while dragging */
}
@media (max-width: 900px) {
    .infra-carousel-track {
        width: 98vw;
        gap: 16px;
        padding-left: 16px; /* smaller gutters on mobile */
        padding-right: 16px;
        padding-bottom: 40px; /* extra bottom space on mobile to avoid clipping */
    }
    .infra-card {
        min-width: 90vw;
        max-width: 90vw;
    }
}
/* --- End Infra Carousel Custom Styles --- */
/* Force insight cards to be visible */
.insight-card {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
}
/* Force Mission & Vision cards to be visible */
.mission-vision, .mv-card {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
}
/* --- Infrastructure Carousel Horizontal Row Styles --- */
.infra-carousel-row {
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: center;
    align-items: stretch;
    padding: 24px 0;
    width: 100%;
    max-width: 98vw;
    margin: 0 auto;
}

.carousel-row-1, .carousel-row-2 {
    margin-bottom: 0;
}
/* Carousel-specific infra-item width fix */
.infra-carousel-row .infra-item {
    flex: 0 0 340px;
    min-width: 340px;
    max-width: 340px;
    width: 340px;
    transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.4s;
}
/* Focus/unfocus effect for carousel cards */
.infra-center {
    z-index: 2;
    transform: scale(1.08) translateY(-8px);
    box-shadow: 0 8px 32px rgba(37,99,235,0.12);
}
.infra-left, .infra-right {
    opacity: 0.7;
    z-index: 1;
    transform: scale(0.92);
    filter: blur(1px);
}
@media (max-width: 900px) {
    .infra-carousel-row .infra-item { flex-basis: 90vw; min-width: 90vw; max-width: 90vw; }
}
@media (max-width: 600px) {
    .infra-carousel-row .infra-item { flex-basis: 98vw; min-width: 98vw; max-width: 98vw; }
}
/* --- End Infrastructure Carousel Styles --- */
.infra-item {
/* Make infrastructure section title white */
.infrastructure .section-title {
    color: #fff !important;
}
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.07);
    overflow: hidden;
    padding: 0;
    margin: 0 0.5rem;
    display: flex;
    align-items: stretch;
    position: relative;
    min-height: 260px;
    max-height: 400px;
}
.infra-card-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
.infra-card-img {
    flex: 2 1 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: #f4f4f4;
    min-height: 260px;
    max-height: 400px;
    overflow: hidden;
    position: relative;
}
.infra-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    min-height: 260px;
    max-height: 400px;
    z-index: 1;
}
/* Overlay for infra card */
.infra-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.97);
    color: transparent;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
.infra-card-img:hover .infra-card-overlay {
    opacity: 1;
    pointer-events: auto;
}
.infra-card-overlay h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
    color: #801D1D;
    font-weight: 700;
}
.infra-card-overlay p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0;
}
.infra-card-info {
    flex: 1 1 0;
    width: 34%;
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    min-width: 0;
}
.infra-card-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #801D1D;
    font-weight: 600;
}
.infra-card-info p {
    font-size: 0.98rem;
    color: #333;
    margin-bottom: 0.7rem;
    text-align: center;
}
.infra-card-info .click-indicator {
    margin-bottom: 0.7rem;
}
@media (max-width: 1700px) {
    /* Keep 2 columns even on small phones */
    .product-carousel-track.center-aligned {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 12px;
    }
    .infra-card-content {
        flex-direction: column;
    }
    .infra-card-img, .infra-card-info {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .infra-card-img {
        min-height: 120px;
        max-height: 180px;
    }
    .infra-card-img img {
        min-height: 120px;
        max-height: 180px;
    }
}
/* Force 'Find Us' heading in map-card to be fully black */
/* ========================================================= */
/* GLOBAL STYLES & COMMON COMPONENTS                         */
/* ========================================================= */
.map-card .section-title,
.map-card .section-title .find,
.map-card .section-title .us {
    /* Use the unified heading style so 'Find Us' matches other page headings */
    color: var(--heading-unified) !important;
    /* Use the more professional body/neutral font stack for this small map-card heading
       (Poppins can look too geometric/playful at very small sizes). */
    font-family: var(--font-body) !important;
    font-weight: var(--heading-weight) !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}
/* Map-card section title color split */
.section-title .find {
            color: inherit !important;
}
.section-title .us {
            color: inherit !important;
}
/* Map-card: make address and hours use navbar link color */
.map-card .map-address,
.map-card .hours p,
.map-card .map-address strong {
    /* Ensure the address and hours paragraph use the brand blue */
    color: var(--brand-blue-dark) !important;
}

/* Business Hours heading should use #2D3748 */
.map-card .hours h4 {
    color: #2D3748 !important;
}
/* Industries We Serve Section */
/* --------------------------------------------------------- */
/* SECTION: INDUSTRIES WE SERVE                              */
/* --------------------------------------------------------- */
/* Infrastructure rows for 2 cards per row */
.infrastructure-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.infra-row {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.infra-item {
    flex: 1 1 0;
    min-width: 250px;
    max-width: 350px;
}
    /* Infra Card Info Styling */
    .infra-card-info {
        padding: 18px 18px 18px 18px;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .infra-card-info h4 {
        margin: 0 0 12px 0;
        font-size: 1.18rem;
        font-weight: 700;
        color: #1C3761;
        letter-spacing: 0.5px;
    }
    .infra-card-info p {
        margin: 0 0 12px 0;
        font-size: 1rem;
        color: #3b3b3b;
        line-height: 1.6;
        flex-grow: 1;
        text-align: center;
    }
@media (max-width: 900px) {
    .infra-row {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
}
/* Navbar phone number link color */
/* Remove underline from phone number links */
.phone-link {
    text-decoration: none !important;
}
/* Navbar phone icon: reduce size and align */
.nav-contact .contact-number i.fa,
.nav-contact .contact-number i.fas,
.nav-contact .contact-number i.fa-phone {
    font-size: 0.9rem; /* slightly smaller than text */
    line-height: 1;
    vertical-align: middle;
    margin-right: 6px;
    color: var(--link); /* match default page link blue */
    transition: color 0.2s ease;
}
/* Hover: match link hover color */
.nav-contact .contact-number:hover i.fa,
.nav-contact .contact-number:hover i.fas,
.nav-contact .contact-number:hover i.fa-phone {
    color: var(--link-hover);
}
/* Global link styles: remove underline site-wide */
a {
    color: var(--link);
    text-decoration: none !important;
    transition: color 0.2s ease;
}
a:hover { color: var(--link-hover); }

/* ========================================================= */
/* Brand Heading Color Overrides                             */
/* Force key headings to use brand color #0A1F44 across pages */
/* ========================================================= */

/* Page headers on About, Products, Contact */
.page-header h1 {
    color: var(--heading-unified) !important;
}

/* Generic section titles (e.g., Why Choose, Clients, Product sections) */
.section-title {
    color: var(--heading-unified) !important;
}

/* Features block headline on homepage */
.features h2 {
    color: var(--heading-unified) !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Mission, Vision, Values headings on About page */
.mission-vision h3 {
    color: var(--heading-unified) !important;
}

/* Contact page: override map-card heading and inline styles */
.map-card .section-title,
.map-card .section-title .find,
.map-card .section-title .us {
    color: var(--heading-unified) !important;
}
.contact-section .hours h4 {
    color: var(--heading-unified) !important;
}

/* More specific rule to override generic contact-section heading color for the map-card hours */
.contact-section .map-card .hours h4 {
    color: #2D3748 !important;
}

/* Homepage Infrastructure section title (override older white rule) */
body .infrastructure .section-title {
    color: var(--heading-unified) !important;
}
a:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }

/* Focus styles for interactive elements */
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--brand-gold);
    outline-offset: 3px;
}
.nav-contact .contact-number a[href^="tel"] {
    color: var(--brand-maroon-dark) !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.nav-contact .contact-number a[href^="tel"]:hover {
    color: #1C3761 !important;
}
.industries {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
.industries-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem;
        margin-top: 2.5rem;
         justify-items: center;
         align-items: center;
         width: 100%;
         max-width: 1100px;
}
@media (max-width: 900px) {
    .industries-grid {
        grid-template-columns: repeat(5, minmax(180px, 1fr));
        gap: 1.2rem;
        overflow-x: auto;
    }
}
@media (max-width: 600px) {
    .industries-grid {
        grid-template-columns: repeat(5, minmax(140px, 1fr));
        gap: 0.7rem;
        overflow-x: auto;
    }
}
.industry-item {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(28, 55, 97, 0.08);
    padding: 2.5rem 1.5rem 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s, transform 0.3s;
}
.industry-item:hover {
    box-shadow: 0 12px 32px rgba(28, 55, 97, 0.16);
    transform: translateY(-8px) scale(1.03);
}
/* Infrastructure Section Styles */
.infrastructure {
    padding: 80px 0 90px; /* extra bottom padding so tall cards don't clip */
    background: linear-gradient(135deg, #1e293b, #0f172a); /* match footer blue gradient */
    position: relative;
    z-index: 3; /* above hero's z-index:2 */
}

@media (max-width: 900px) {
    .infrastructure { padding: 64px 0 56px; }
}

/* Reduce vertical gap between section title and subtitle specifically for the
   infrastructure section without affecting other sections */
.infrastructure .section-title {
    margin-bottom: 1rem !important;
}
.infrastructure .section-subtitle {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important; /* increased spacing per request */
    white-space: normal !important; /* allow wrapping on smaller screens */
}

/* Apply the same tighter spacing to the Clients & Partners section so the
   subtitle sits closer to the heading without changing global defaults. */
.clients-partners .section-title {
    margin-bottom: 1rem !important;
}
.clients-partners .section-subtitle {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    white-space: normal !important;
}

/* Apply the same tighter spacing to the Key Insights / "Why Choose" section */
.key-insights .section-title {
    margin-bottom: 1rem !important;
}
.key-insights .section-subtitle {
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    white-space: normal !important;
}

/* CTA under infrastructure cards */
.infra-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* slightly tighter spacing between buttons */
    margin-top: 8px; /* reduce space above CTAs */
    margin-bottom: 8px; /* reduce space below CTAs */
}

/* CTA item: text-only buttons with small icon below */
.cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* CTA button: text + icon together as one clickable unit */
.cta-button {
    display: inline-flex;
    flex-direction: row; /* place icon beside the text */
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.95);
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none;
    min-width: 140px;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.cta-button:hover {
    background: rgba(255,255,255,0.04);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(12,37,79,0.14);
}

.cta-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.14);
}

.cta-button .cta-text {
    font-weight: 700;
    color: #ffffff !important;
}

.cta-button .cta-icon i {
    color: #ffffff;
    font-size: 1.2rem;
    opacity: 0.95;
}

/* Ensure spacing and touch target remain accessible on small screens */
@media (max-width: 640px) {
    .cta-item { gap: 8px; }
    /* place icon beside text on narrow screens */
    .cta-button { padding: 12px 18px; min-width: 140px; flex-direction: row; gap: 8px; }
}

/* Ensure both primary and secondary CTA anchors look identical (white outline + same hover)
   This overrides any `.btn-primary` / `.btn-secondary` differences for these special CTAs. */
.cta-button.btn-primary,
.cta-button.btn-secondary {
    border: 2px solid rgba(255,255,255,0.95);
    background: transparent !important;
    color: #ffffff !important;
}

.cta-button.btn-primary:hover,
.cta-button.btn-secondary:hover {
    /* match the same hover effect for both buttons */
    background: rgba(255,255,255,0.04) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 26px rgba(12,37,79,0.14) !important;
}

/* Make the primary CTA outline change to brand blue on hover (match .btn-secondary behavior) */
.cta-button.btn-primary:hover {
    border-color: var(--brand-blue-dark) !important;
}

.cta-button.btn-primary:focus-visible,
.cta-button.btn-secondary:focus-visible {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18) !important;
}

/* Also ensure the primary CTA shows brand blue outline when focused */
.cta-button.btn-primary:focus-visible {
    border-color: var(--brand-blue-dark) !important;
}

/* Apply the same shimmer/highlight animation used by .btn-primary to the
   Get Quote CTA (which is .btn-secondary) so both CTAs have the same hover
   animation. We scope this to .cta-button.btn-secondary so it doesn't affect
   global .btn-secondary usage elsewhere. */
.cta-button.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.7) 60%, transparent 100%);
    transition: left 0.35s ease;
    pointer-events: none;
}

.cta-button.btn-secondary:hover::before {
    left: 100% !important;
}

/* Ensure anchor scroll doesn't get hidden behind fixed navbar */
#infrastructure {
    scroll-margin-top: 90px; /* matches navbar height (~70px) + spacing */
}

.infrastructure-grid {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #1C3761 #f0f0f0;
    margin: 2rem -1rem;
}

.infrastructure-grid::-webkit-scrollbar {
    height: 8px;
}

.infrastructure-grid::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.infrastructure-grid::-webkit-scrollbar-thumb {
    background: #1C3761;
    border-radius: 4px;
}

.infra-item {
    flex: 0 0 300px;
    min-height: 340px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(28, 55, 97, 0.08);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.click-indicator {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: #1C3761;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(28, 55, 97, 0.15);
}

.click-indicator i {
    font-size: 0.9rem;
    animation: point 1.5s ease-in-out infinite;
}

@keyframes point {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.infra-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
    border: 1px solid #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.infra-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(28, 55, 97, 0.16);
}

.infra-item:hover::after {
    opacity: 1;
}

.infra-item:hover .click-indicator {
    bottom: 28px;
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.18);
}

/* Add subtle pulse animation on load */
@keyframes subtle-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.infrastructure-grid .infra-item:nth-child(1) {
    animation: subtle-pulse 2s ease-in-out;
}

/* Add focus styles for accessibility */
.infra-item:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(28, 55, 97, 0.3);
}

.infra-icon {
    margin-bottom: 1.5rem;
}

.infra-icon i {
    font-size: 2.5rem;
    color: #1C3761;
    background: linear-gradient(135deg, #e6e6e6 0%, #f0f0f0 100%);
    border-radius: 50%;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(28, 55, 97, 0.08);
}

.infra-item h3 {
    margin-bottom: 1rem;
    color: #1C3761;
    font-size: 1.25rem;
}

.infra-item p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000; /* above navbar (1000) */
}

/* When a modal is open, hide the fixed navbar and prevent background scroll */
body.modal-open .navbar { display: none !important; }
body.modal-open { overflow: hidden; }

.modal-content {
    position: relative;
    width: 92%;
    max-width: 1280px;
    margin: 20px auto;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 95vh; /* fallback */
    max-height: 95dvh; /* respect dynamic viewport on mobile */
}

.modal-header {
    padding: 16px 22px;
    background: linear-gradient(135deg, #1C3761, #2C528B);
    color: #fff;
    text-align: center; /* center the title text */
    font-size: 1.15rem;
    font-weight: 700;
}
.quote-modal .modal-header {
    padding: 16px 22px;
    background: linear-gradient(135deg, #1C3761, #2C528B); /* keep brand blue header for consistency */
    text-align: center;
}
.quote-modal .modal-body {
    display: block;
    min-height: auto;
}
.quote-modal .modal-content { max-width: 700px; }
.modal-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center; /* center the icon + title group */
}
.modal-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.modal-title-icon i { color: #fff; font-size: 1.05rem; }
.quote-modal #quoteTitle { margin: 0 0 2px 0; }
.quote-modal .modal-subtitle {
    margin: 0; /* keep hero height exact; spacing handled by next section padding */
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    text-align: center;
}
.quote-modal .modal-header h3 { color: #fff !important; text-align: center; }
.quote-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-bottom: 14px;
}
.quote-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.quote-form label {
    font-size: 0.95rem;
    color: #111827;
    font-weight: 600;
}
.quote-form .input-wrap input::placeholder,
.quote-form .input-wrap textarea::placeholder {
    color: #9ca3af;
}
.quote-form .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.quote-form .input-icon {
    position: absolute;
    left: 12px;
    color: #6b7280;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.quote-form .input-wrap input,
.quote-form .input-wrap select,
.quote-form .input-wrap textarea {
    padding-left: 40px;
}
.quote-form .textarea-wrap .input-icon {
    align-self: flex-start;
    top: 12px;
}
.quote-form input,
.quote-form textarea,
.quote-form select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.98rem;
    color: #111827;
    line-height: 1.25;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quote-form input:hover,
.quote-form textarea:hover,
.quote-form select:hover {
    border-color: #d1d5db;
}
.quote-form input:focus,
.quote-form textarea:focus,
.quote-form select:focus {
    outline: none;
    border-color: #801D1D; /* brand maroon */
    box-shadow: 0 0 0 3px rgba(128, 29, 29, 0.12);
}
.quote-form textarea { resize: vertical; }
.quote-form .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    justify-content: center; /* center align action buttons */
}
.quote-modal .form-actions .btn {
    padding: 10px 16px;
    font-size: 0.92rem;
    border-radius: 10px;
}
.quote-modal .modal-body { padding: 18px 18px 22px 18px; }
.form-status {
    margin-top: 12px;
    font-size: 0.95rem;
    color: #1C3761; /* brand blue for status */
}
@media (max-width: 640px) {
    .quote-form .form-grid { grid-template-columns: 1fr; }
    .quote-modal .modal-content { max-width: 92vw; }
}

.modal-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 520px;
}

.modal-left { display: flex; flex-direction: column; background:#0b0b0b; }

.modal-main {
    position: relative;
    min-height: 420px;
    background: #000;
}

.modal-gallery {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-gallery img {
    max-width: 100%;
    /* Reserve space for header + thumbnails so image isn’t cut */
    max-height: calc(95vh - 220px);
    object-fit: contain;
}

.image-counter {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 14px;
    z-index: 2;
}

.modal-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    padding: 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .image-counter {
        top: 15px;
        right: 15px;
        padding: 4px 12px;
        font-size: 12px;
    }

    .modal-caption {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    /* On small screens, account for slightly different header/thumb heights */
    .modal-gallery img {
        max-height: calc(95vh - 200px);
    }
}

.modal-close {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    z-index: 1001;
    transition: transform 0.2s;
}

.modal-close:hover {
    transform: scale(1.2);
}

.modal-prev,
.modal-next,
.thumb-scroll-left,
.thumb-scroll-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 0.9rem 1rem;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}

.modal-prev:hover,
.modal-next:hover,
.thumb-scroll-left:hover,
.thumb-scroll-right:hover {
    background: rgba(0, 0, 0, 0.8);
}

.modal-prev, .thumb-scroll-left {
    left: 0;
    border-radius: 0 4px 4px 0;
}

.modal-next, .thumb-scroll-right {
    right: 0;
    border-radius: 4px 0 0 4px;
}

.modal-thumbnails {
    position: relative;
    background: linear-gradient(180deg, #0b0b0b, #101010);
    padding: 10px 48px;
    height: 110px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.thumbnails-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 5px 0;
    height: 100%;
    justify-content: center;
}

.thumbnails-container::-webkit-scrollbar {
    display: none;
}

.thumb-scroll-left,
.thumb-scroll-right {
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    height: 40px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.thumbnail {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

.thumbnail.active {
    border-color: #ffd700;
    transform: scale(1.05);
}

.thumbnail:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .modal-content {
        width: 96%;
        margin: 10px auto;
    }

    .modal-body { grid-template-columns: 1fr; }
    .modal-right { order: 2; }
    .modal-left { order: 1; }
    .modal-thumbnails { height: 90px; }

    .thumbnail {
        width: 60px;
        height: 60px;
    }
}

/* Right-side info panel */
.modal-right {
    background: linear-gradient(180deg, #ffffff, #f7f9fc);
    border-left: 1px solid #eef2f7;
    padding: 20px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-info-title {
    margin: 0 0 6px 0;
    color: #1C3761;
    font-weight: 800;
    font-size: 1.25rem;
}

/* Removed .modal-info-caption (no longer used) */

.modal-info-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #1f2937;
}

/* Structured items for sidebar */
.modal-info-items { margin-top: 6px; display: none; }
.modal-info-item { margin-bottom: 12px; }
.modal-info-item-title {
    margin: 0 0 4px 0;
    color: #1C3761;
    font-size: 1.05rem;
    font-weight: 800;
}
.modal-info-item-desc {
    margin: 0;
    color: #374151;
    font-size: 0.98rem;
    line-height: 1.55;
}

.modal-info-points {
    margin: 8px 0 0 18px;
    color: #374151;
}

.modal-info-points li { margin: 6px 0; }

/* -- Product enlarge modal tweaks -- */
.product-modal .modal-content {
    max-width: 980px;
    width: 96%;
}
.product-modal .modal-body { grid-template-columns: 1fr; }
#productModalImg {
    max-width: 100%;
    max-height: calc(90vh - 140px);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.product-modal .modal-caption {
    position: static;
    background: transparent;
    color: #111;
    text-align: center;
    padding: 12px 18px 18px 18px;
    font-size: 1rem;
}
.product-modal .modal-close { color: #fff; background: transparent; border: none; font-size: 32px; }
.product-modal .modal-main { background: transparent; }

/* Center the product modal content within the full-screen black overlay
    so the enlarged image appears centered from all sides of the dark background. */

.product-modal.show {
    /* Use flex centering when visible. Use !important to override inline display:block set by JS. */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px; /* breathing room on very small viewports */
}

.product-modal .modal-content {
    /* Make the content container transparent and let it size to the image so the
       black overlay is visible on all sides. Keep some max width to avoid overly large images. */
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    max-height: none !important;
    transform-origin: center center; /* animate from center */
}

.product-modal .modal-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    padding: 0 !important;
}

#productModalImg {
    /* Ensure the full image is visible: allow natural sizing but constrain to viewport
       so the browser will scale the image down (contain) rather than crop it. */
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 40px) !important; /* fallback */
    max-height: calc(100dvh - 40px) !important; /* dynamic viewport */
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}

.product-modal .modal-caption {
    /* Hide caption entirely for product enlarged view per user request */
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.product-modal .modal-close {
    /* keep close button visible in top-right of the overlay */
    position: absolute !important;
    right: 18px !important;
    top: 18px !important;
    z-index: 3001 !important;
    color: #fff !important;
}

/* Animations for product modal open/close */
.product-modal {
    opacity: 0;
    transition: opacity 220ms ease;
}
.product-modal .modal-content {
    transform: translateY(8px) scale(0.98);
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
    opacity: 0;
}
.product-modal.show {
    opacity: 1;
}
.product-modal.show .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* small image hint link */
/* removed .modal-open-original styles — feature disabled per user request */


.industry-item i {
    font-size: 2.8rem;
    color: #1C3761;
    margin-bottom: 1.2rem;
    background: linear-gradient(135deg, #e6e6e6 0%, #f0f0f0 100%);
    border-radius: 50%;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(28, 55, 97, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.industry-item h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1C3761;
    margin-bottom: 0.5rem;
}
/* Make the map info title white */
/* --------------------------------------------------------- */
/* SECTION: MAP INFO                                         */
/* --------------------------------------------------------- */
.map-info-content h3 {
    color: #fff;
}
/* Contact Cards Symmetry */
/* --------------------------------------------------------- */
/* SECTION: CONTACT CARDS                                    */
/* --------------------------------------------------------- */
.contact-details {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
}
.contact-item {
    flex: 1 1 0;
    min-width: 260px;
    max-width: 1fr;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    text-align: center;
}

/* Contact form styles */
@media (max-width: 1000px) {
    .contact-details {
        flex-wrap: wrap;
        gap: 18px;
    }

    .contact-item {
        height: auto;
        padding: 18px;
        min-width: 200px;
    }
}

/* Map section (polished) */
/* --------------------------------------------------------- */
/* SECTION: MAP SECTION                                      */
/* --------------------------------------------------------- */
.map-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.map-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.map-frame {
    width: 100%;
    height: 480px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(28,55,97,0.08);
    border: 1px solid rgba(28,55,97,0.06);
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-card {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(28,55,97,0.06);
    border: 1px solid rgba(28,55,97,0.04);
}

.map-card .muted {
    color: #6b7280;
    margin-bottom: 12px;
}

.map-address {
    font-style: normal;
    line-height: 1.5;
    margin: 12px 0 16px 0;
    color: #111827;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.map-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.map-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Small override: make the "Get Directions" button (inside .map-actions) transparent
   and give it a border that matches the text color. This is scoped to .map-actions so
   other .btn/.btn-primary usages across the site are unaffected. */
.map-actions .btn {
    background: transparent !important;
    color: inherit !important; /* use surrounding text color */
    border: 2px solid currentColor !important; /* border same color as text */
    padding: 10px 16px !important;
    border-radius: 10px !important;
}

.map-actions .btn:hover {
    background: rgba(0,0,0,0.04) !important; /* subtle hover tint */
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

.map-actions .btn:focus-visible {
    outline: 3px solid rgba(0,0,0,0.08) !important;
    outline-offset: 3px !important;
}

@media (max-width: 900px) {
    .map-grid {
        grid-template-columns: 1fr;
    }

    .map-frame {
        height: 340px;
    }

    .map-card {
        order: 2;
    }
}
/* Redesigned Footer Styles */
/* --------------------------------------------------------- */
/* SECTION: FOOTER                                           */
/* --------------------------------------------------------- */
.redesigned-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 60px;
        padding: 32px 0 0 0;
}
.footer-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.footer-col h3 {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: 1px;
        color: #ffd700;
}
.footer-col p {
    margin: 0 0 12px 0;
    line-height: 1.3;
}
/* Header page single-line <p> style */
/* --------------------------------------------------------- */
/* SECTION: HEADER PAGE                                      */
/* --------------------------------------------------------- */
.page-header p {
    color: #801D1D;
    font-weight: 600;
    margin-top: -0.3em;
    margin-bottom: 0.5em;
}
.social-links {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 8px;
}
.social-links a {
    color: #1C3761;
    font-size: 1.3em;
    transition: color 0.2s;
}
.social-links a:hover {
    color: #ffd700;
}
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
}
.footer-contact-item i {
    color: #1C3761;
    font-size: 1.15em;
    background: #f0f0f0;
    border-radius: 50%;
    padding: 6px;
    margin-right: 2px;
}
.hero-title {
    font-family: var(--font-hero, var(--font-heading));
    font-weight: 600; /* thinner than 700 */
    font-size: 4.5rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-align: left;
    margin-bottom: 1.2rem;
    color: var(--heading-unified);
    position: relative;
    z-index: 2;
}
.hero-main {
    display: inline-block;
    font-size: 4.5rem;
    font-weight: 600; /* thinner than 700 */
    line-height: 1.05;
    letter-spacing: 0.02em;
    animation: heroFadeInUp 1.1s cubic-bezier(.77,0,.18,1) both;
}
.hero-rev,
.hero-up,
.hero-rel,
.hero-underline {
    font-family: var(--font-hero, var(--font-heading));
    display: inline-block; /* ensure background-clip: text behaves consistently */
    position: relative;
    /* Moderate spacing for readability on large display text */
    letter-spacing: 0.06em;
    /* Glass-like fill inside letters using layered gradients */
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.66) 28%, rgba(255,255,255,0.32) 48%, rgba(255,255,255,0.18) 62%, rgba(255,255,255,0.32) 78%, rgba(255,255,255,0.70) 100%),
        radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(14,26,44,0.85) 0%, rgba(28,55,97,0.65) 55%, rgba(74,167,230,0.55) 100%),
        linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 80%); /* moving sheen */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important; /* ensure gradient shows through on WebKit */
    background-size: auto, auto, auto, 300% 300% !important;
    background-position: center, center, center, -150% 0% !important;
    animation: heroGlossSweep 1.6s cubic-bezier(.4,.0,.2,1) 0.2s 1 both !important;
    will-change: background-position;
}

@keyframes heroGlossSweep {
    0%   { background-position: center, center, center, -150% 0%; }
    60%  { background-position: center, center, center, 120% 0%; }
    100% { background-position: center, center, center, 150% 0%; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-rev,
    .hero-up,
    .hero-rel,
    .hero-underline {
        animation: none !important;
        background-position: center, center, center, -150% 0% !important;
    }
}

/* Footer logo section spacing adjustment */
.footer-logo-section h3 {
    margin-bottom: -4px;
    line-height: 1;
}
.footer-logo-section p {
    margin-top: 0;
}
.hero-underline {
    border-bottom: 8px solid var(--heading-unified);
    padding-bottom: 0.15em;
    display: inline-block;
}
/* Simplify: remove heavy multi-direction text outline for a slimmer look */
.hero-rev,
.hero-up,
.hero-rel,
.hero-underline {
    text-shadow: none !important;
}

/* Preferred: precise white stroke around letters where supported */
@supports (-webkit-text-stroke: 1px white) {
    .hero-rev,
    .hero-up,
    .hero-rel,
    .hero-underline {
        -webkit-text-stroke: 0 transparent !important; /* no stroke for slimmer appearance */
        text-shadow: none !important;
        -webkit-text-fill-color: currentColor !important;
        paint-order: fill;
    }
}

/* Final specificity guard to ensure glass effect applies even if other styles conflict */
.hero .hero-title .hero-main.hero-rev,
.hero .hero-title .hero-main .hero-up,
.hero .hero-title .hero-main.hero-rel,
.hero .hero-title .hero-main .hero-underline {
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--heading-unified);
}
@keyframes heroFadeInUp {
    0% { opacity: 0; transform: translateY(40px) scale(0.98); }
    60% { opacity: 1; transform: translateY(-4px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Subtle depth for hero title; detailed outline handled on child spans */
.hero-title {
    /* slightly stronger shadow behind hero letters for improved legibility */
    text-shadow: 0 3px 10px rgba(0,0,0,0.50);
}
.hero-title .hero-main {
    /* ensure the animated headline span also receives the shadow */
    text-shadow: 0 3px 10px rgba(0,0,0,0.50);
}
.hero-subtitle {
    /* subtle shadow for the subtitle under the headline */
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
/* Block rotator for hero headline (wipe + horizontal motion) */
.hero-rotator {
    position: relative;
    display: inline-block;
    overflow: hidden;                /* prevent text peeking during transition */
    transition: height 240ms ease;   /* smooth height changes */
    padding-bottom: 0.2em;           /* more room for descenders (g, y, p, j) */
}
.hero-rotator .rot-block {
    position: absolute;
    top: 0; left: 0; right: 0;
    opacity: 0;
    transform: translateX(10px) translateZ(0);
    /* Horizontal wipe reveal using clip-path */
    clip-path: inset(0 100% 0 0);
    transition: opacity 460ms cubic-bezier(.2,.7,.2,1),
                transform 460ms cubic-bezier(.2,.7,.2,1),
                clip-path 460ms cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform, clip-path;
    backface-visibility: hidden;
    padding-bottom: 0.05em;          /* micro-buffer per block */
}
.hero-rotator .rot-block .hero-main { line-height: 1.1; }
.hero-rotator .rot-block .hero-main {
    position: relative;
    display: inline-block;
}
.hero-rotator .rot-block .hero-main::before,
.hero-rotator .rot-block .hero-main::after {
    color: currentColor;
    opacity: 0.9;
    font-weight: 700;
    /* Use a serif for curlier, more decorative braces */
    font-family: Georgia, "Times New Roman", Cambria, "Palatino Linotype", serif;
    font-size: 1.05em;
    line-height: 0.9;
}
.hero-rotator .rot-block .hero-main::before {
    content: '“';
    margin-right: 0.12em;
}
.hero-rotator .rot-block .hero-main::after {
    content: '”';
    margin-left: 0.12em;
}
.hero-rotator .rot-block.is-active {
    position: relative;
    opacity: 1;
    transform: translateX(0) translateZ(0);
    clip-path: inset(0 0 0 0);
    z-index: 2;
}
.hero-rotator .rot-block.is-leaving {
    opacity: 0;
    transform: translateX(-10px) translateZ(0);
    clip-path: inset(0 0 0 100%);
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hero-rotator { transition: none; }
    .hero-rotator .rot-block { transition: none; transform: none; clip-path: none; }
}

/* Keep hero headline on one line on desktop (original look) */
@media (min-width: 901px) {
    .hero-rotator .rot-block .hero-main,
    .hero-title .hero-main {
        white-space: nowrap;
    }
}
/* ============================= */
/* PAGE: INDEX (Home)            */
/* ============================= */
/* ========================================================= */
/* PAGE: INDEX (HOME)                                        */
/* ========================================================= */

/* --- Hero Section --- */
/* --------------------------------------------------------- */
/* SECTION: HERO                                             */
/* --------------------------------------------------------- */
/* Styles for .hero, .hero-title, .hero-main, .hero-rev, .hero-up, .hero-rel, .hero-underline, .hero-buttons, .hero-graphic, etc. */
:root {
    /* Brand palette */
    --brand-blue-dark: #1C3761;   /* primary */
    --brand-blue-mid: #2C528B;    /* secondary */
    --brand-cyan-dark: #2070A8;   /* accent */
    --brand-cyan-light: #4AA7E6;  /* accent light */
    --brand-maroon-dark: #801D1D; /* accent */
    --brand-maroon-light: #993333;
    --brand-gold: #FFD801;        /* highlight */
    --brand-grey-light: #E6E6E6;
    --brand-grey-lighter: #F0F0F0;
    --brand-black: #0E1A2C;

    /* Semantic */
    --text-1: #0E1A2C;
    --text-2: #475569;
    --muted: #6B7280;
    --link: var(--brand-blue-mid);
    --link-hover: var(--brand-blue-dark);

    /* Typography */
    --font-heading: 'Poppins', 'Inter', 'Montserrat', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --heading-weight: 700;
    --body-weight: 400;
    /* Layout: increase horizontal gutters sitewide */
    /* SIDE SPACING SIDE SPACING SIDE SPACING SIDE SPACING SIDE SPACING SIDE SPACING SIDE SPACING */
    --page-gutter: clamp(24px, 6vw, 80px);
    /* Hero display font: thinner, highly readable */
    --font-hero: 'Inter', 'Poppins', 'Montserrat', system-ui, Arial, sans-serif;
}
/* --- Key Insights Section --- */
/* --------------------------------------------------------- */
/* SECTION: KEY INSIGHTS                                     */
/* --------------------------------------------------------- */
/* Styles for .key-insights, .insights-grid, .insight-card, .insight-icon, etc. */
/* --- Features Section --- */
/* --------------------------------------------------------- */
/* SECTION: FEATURES                                         */
/* --------------------------------------------------------- */
/* Styles for .features, .features-content, .features-text, .features-list, .features-image, etc. */
/* --- Clients & Partners Section --- */
/* --------------------------------------------------------- */
/* SECTION: CLIENTS & PARTNERS                               */
/* --------------------------------------------------------- */
/* Styles for .clients-partners, .clients-container, .clients-scroll, .client-logo, .logo-placeholder, etc. */
/* --- CTA Section --- */
/* --------------------------------------------------------- */
/* SECTION: CTA                                              */
/* --------------------------------------------------------- */
/* Styles for .cta, .cta-content, etc. */
/* --- Footer Section --- */
/* --------------------------------------------------------- */
/* SECTION: FOOTER                                           */
/* --------------------------------------------------------- */
/* Styles for .footer, .footer-content, .footer-section, .footer-logo-section, .footer-logo, .footer-bottom, .social-links, etc. */

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}
.footer-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.footer-logo-section h3 {
    margin-bottom: -4px;
    line-height: 1;
}
.footer-logo-section p {
    margin-top: 0;
}
.footer-contact-info h4,
.footer-contact-info h3,
.redesigned-footer .footer-contact-info h4,
.redesigned-footer .footer-contact-info h3,
.footer-col .footer-contact-info h4,
.footer-col .footer-contact-info h3 {
    margin-bottom: 8px;
    color: #ffffff !important; /* make contact info title in footer white */
}
.footer-contact-info p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0;
}

/* Footer: when hovering links inside the footer, use green #00C853 */
footer a:hover,
.redesigned-footer a:hover,
.footer a:hover,
.footer-content a:hover,
.footer-section a:hover,
.footer-col a:hover,
.footer-contact-info a:hover {
    color: #00C853 !important;
}
.footer-contact-info i {
    font-size: 1.1em;
    margin-right: 6px;
}

/* Footer: ensure spacing between envelope/map icons and text */
.footer .footer-section i.fa-envelope,
.footer .footer-section i.fas.fa-envelope,
.footer .footer-section i.fa-map-marker-alt,
.footer .footer-section i.fas.fa-map-marker-alt {
    margin-right: 10px; /* add clear space before text */
    vertical-align: middle;
}

/* Footer: line break for UPSIDC on smaller screens */
@media (max-width: 768px) {
    .footer .upsidc-break::before {
        content: "\A";
        white-space: pre;
    }
}

/* --- Brand palette applied below --- */

.clients-scroll-row1 {
    animation: scroll 30s linear infinite;
}
.clients-scroll-row2 {
    animation: scroll 40s linear infinite reverse;
    margin-top: 1.5rem;
}
.clients-scroll-row1:hover,
.clients-scroll-row2:hover {
    animation-play-state: paused;
}
/* Footer Logo Styling */
.footer-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem; /* tighter space between logo and text */
    margin-bottom: 0.8rem;
    margin-top: 8px;
}

.footer-logo {
    width: 90px;
    height: auto;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 2px 8px rgba(37,99,235,0.10));
    /* Subtle depth only; remove white outline */
    filter: drop-shadow(0 1px 6px rgba(0,0,0,0.18));
    margin-bottom: 4px;
    line-height: 1.1;
}
/* Align Contact Info heading with ENRAY AUTOCOMP */
.footer-contact-info h4 {
    margin-bottom: 4px;
    margin-top: 8px;
    line-height: 1.1;
}
/* Consistent logo sizing for header */
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--text-1);
    background-color: #ffffff;
    font-size: clamp(15px, 0.28vw + 14px, 18px);
    overflow-x: hidden;
    /* Ensure consistent text scaling across mobile browsers */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Make media elements fluid by default to prevent overflow on mobile */
img, video, canvas, svg, iframe {
    max-width: 100%;
    height: auto;
}

.container {
    /* Standard responsive container: full width with side gutters, clamped max */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

/* Restore wider desktop canvas so content doesn't look shrunken */
@media (min-width: 1200px) {
    /* Increase total container width on desktop; padding is included (border-box) */
    .container { max-width: 1600px; }
}

/* Global heading family and sensible defaults */
h1, h2, h3, h4, h5, h6, .section-title {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
}

/* Fluid heading scale */
h1 { font-size: clamp(1.9rem, 2.0vw + 1.0rem, 2.8rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--heading-unified); }
h2 { font-size: clamp(1.6rem, 1.2vw + 0.95rem, 2.1rem); line-height: 1.2;  letter-spacing: -0.015em; color: var(--heading-unified); }
h3 { font-size: clamp(1.3rem, 0.8vw + 0.85rem, 1.6rem);  line-height: 1.25; letter-spacing: -0.01em;  color: var(--heading-unified); }
h4 { font-size: clamp(1.1rem, 0.6vw + 0.8rem, 1.3rem); line-height: 1.3;  color: var(--heading-unified); }
h5 { font-size: clamp(1.0rem, 0.35vw + 0.78rem, 1.15rem); line-height: 1.35; color: var(--heading-unified); }
h6 { font-size: clamp(0.92rem, 0.2vw + 0.75rem, 1.0rem); line-height: 1.4; color: var(--heading-unified); }

/* Tweak section-title to improve hierarchy with subtitles:
   - slightly reduce the default heavy weight used site-wide
   - tighten spacing so subtitles sit closer and read as secondary
*/
.section-title {
    font-weight: 600; /* softer than 700 but still prominent */
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
    line-height: 1.12;
    color: var(--heading-unified);
}

/* Typography utilities (opt-in classes) */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

.fs-italic { font-style: italic !important; }
.fs-normal { font-style: normal !important; }

.tt-uppercase { text-transform: uppercase !important; }
.tt-lowercase { text-transform: lowercase !important; }
.tt-capitalize { text-transform: capitalize !important; }

.ls-tight { letter-spacing: -0.02em !important; }
.ls-normal { letter-spacing: normal !important; }
.ls-wide { letter-spacing: 0.08em !important; }

.lh-tight { line-height: 1.1 !important; }
.lh-normal { line-height: 1.4 !important; }
.lh-relaxed { line-height: 1.7 !important; }

/* Global paragraph alignment: justify big blocks of text */
p {
    text-align: justify;
    text-justify: inter-word;
}

/* Fix: prevent overly large word gaps in justified text for the homepage features block.
   The site uses global justified paragraphs, but `.features` should use ragged-right
   or improved wrapping. Prefer left-aligned text and enable hyphenation to avoid
   large gaps on narrow columns. */
.features p,
.features .features-text p {
    text-align: left !important;
    text-justify: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Opt-out class in case a component needs ragged right */
.no-justify,
.no-justify p {
    text-align: initial !important;
    text-justify: auto !important;
}

/* Navigation */
.navbar {
    background: rgba(255,255,255,0.32);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 8px 32px rgba(28, 55, 97, 0.13);
    border-bottom: 2px solid rgba(74,167,230,0.18);
    border-radius: 0 0 24px 24px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 3.5px solid #801D1D;
}

.nav-container {
    max-width: 98vw;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
    display: flex;
    align-items: center;
    height: 70px;
    justify-content: flex-start;
    position: relative;
}

.nav-logo h2 {
    color: #2563eb;
    font-weight: 700;
    font-size: 1.5rem;
}

.nav-logo img {
    width: 180px;
    height: 72px;
    display: block;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
}

/* Desktop layout: use CSS Grid to create three columns (logo / centered nav / right controls)
   This is more robust than absolute positioning and keeps the nav links centered relative
   to the page while the logo stays left and the hamburger (or other controls) stays right. */
@media (min-width: 900px) {
    .nav-container {
        /* use symmetric horizontal padding so the center column is truly centered
           (previously left/right paddings differed which nudged the center column) */
        padding-inline: var(--page-gutter);
        display: grid;
          /* Fix left column to the logo width so the center column truly aligns to viewport center.
              Reduce left padding so the logo sits nearer to the viewport edge while keeping
              the right padding (page gutter) for visual balance. */
          grid-template-columns: 180px 1fr auto; /* logo (fixed) / center / controls */
          /* nudge logo toward left edge without affecting absolute-centered nav-menu */
          padding-left: clamp(8px, 2.5vw, 24px);
          padding-right: var(--page-gutter);
        align-items: center;
        column-gap: 1rem;
    }

    .nav-logo { grid-column: 1; }

    .nav-menu {
        /* absolutely center the nav links relative to the viewport so they
           appear exactly centered and symmetric regardless of container padding */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* prevent the centered menu from overlapping the logo or controls; leaves 180px
           free on each side as a safe margin (logo width + potential control width) */
        max-width: calc(100% - 360px);
        display: flex;
        align-items: center;
        gap: 2rem;
        justify-content: center;
        z-index: 50;
        flex: 0 1 auto;
        margin: 0;
        white-space: nowrap;
        overflow: visible;
    }

    /* Right-side controls (cog + hamburger) stay in the 3rd grid column */
    .nav-controls {
        grid-column: 3;
        justify-self: end;
        align-items: center;
        display: flex;
        gap: 12px;
    }

    .hamburger {
        grid-column: 3;
        margin-left: 0; /* reset earlier auto margin */
        justify-self: end;
    }
}

.nav-link {
    text-decoration: none; /* override global link underline inside nav */
    color: var(--brand-blue-mid);
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
}

.navbar .nav-link:hover {
    color: var(--brand-maroon-dark);
    font-weight: 500; /* Keep same font-weight to prevent layout shift */
}

/* Hide the mobile quote button on desktop */
.nav-quote-mobile {
    display: none;
}

.navbar .nav-link.active {
    color: var(--brand-maroon-dark);
    font-weight: 500; /* Keep same font-weight to prevent layout shift */
}

/* Active underline in nav */
.navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--brand-maroon-dark);
    display: block;
    border-radius: 1px;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    /* push hamburger to the far right inside .nav-container on wide screens */
    margin-left: auto;
    align-items: center;
}

/* Container for right-side navbar controls (cog, hamburger, etc.) */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-cog {
    background: transparent;
    border: none;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--brand-blue-mid);
    border-radius: 8px;
    transition: transform 220ms ease, color 220ms ease, background 220ms ease;
}

.nav-cog:hover {
    transform: translateY(-2px) scale(1.03);
    color: var(--brand-maroon-dark);
    background: rgba(28,55,97,0.04);
}

.nav-cog svg {
    width: 24px;
    height: 24px;
    display: block;
    transform-origin: 50% 50%;
    /* gentle continuous rotation */
    animation: cogRotate 6s linear infinite;
}

@keyframes cogRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-cog svg { animation: none !important; }
}

/* Custom tooltip (visible on hover & keyboard focus) using the data-tooltip attribute.
   - Visual tooltip only (screen readers use aria-label already)
   - Hides native title by removing title attributes in HTML
*/
.nav-cog[data-tooltip] {
    position: relative;
}


.nav-cog[data-tooltip]::after,
.nav-cog[data-tooltip]::before {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease, transform 200ms cubic-bezier(.2,.7,.2,1);
}

/* Tooltip box: placed to the left of the cog and vertically centered */
.nav-cog[data-tooltip]::after {
    content: attr(data-tooltip);
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px); /* start slightly to the right (off) and slide left into place */
    min-width: 160px;
    max-width: 22rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--brand-blue-dark);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(12,37,79,0.18);
    z-index: 1200;
}

/* Tooltip arrow (points right toward the cog) */
.nav-cog[data-tooltip]::before {
    content: '';
    right: calc(100% + 6px);
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--brand-blue-dark);
    transform: translateY(-50%) rotate(45deg) translateX(6px);
    z-index: 1199;
}

/* Show on hover or focus (keyboard) */
.nav-cog[data-tooltip]:hover::after,
.nav-cog[data-tooltip]:hover::before,
.nav-cog[data-tooltip]:focus::after,
.nav-cog[data-tooltip]:focus::before,
.nav-cog[data-tooltip]:focus-visible::after,
.nav-cog[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .nav-cog[data-tooltip]::after,
    .nav-cog[data-tooltip]::before {
        transition: none !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* Ensure tooltip doesn't overcrowd on very small screens: scale down text and allow wrapping */
@media (max-width: 420px) {
    .nav-cog[data-tooltip]::after {
        white-space: normal;
        font-size: 0.85rem;
        padding: 6px 10px;
        min-width: 120px;
    }
}

.nav-welcome {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-blue-mid);
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.nav-welcome:hover {
    color: var(--brand-maroon-dark);
}

.bar {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    /* Use a single background image (cover) for the hero so one photo fills the whole area.
       Apply a blue gradient tint on top via the stacked linear-gradient. The inline <img>
       is hidden so only this background image is used.
    */
    /* Brand-blue tint over the hero image; made more transparent per request */
    background:
        linear-gradient(180deg, rgba(28,55,97,0.70), rgba(28,55,97,0.70)),
        url('assets/factory.jpeg');
    /* Center both gradient and image for proper, complete coverage */
    background-position: center center, center center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    color: white;
    /* Make sure the background scrolls with the element (not fixed to the viewport) */
    background-attachment: scroll !important;
    /* Prefer modern stable viewport units (fallback to vh) */
    height: calc(110vh - 70px); /* fallback for older browsers */
    height: calc(110svh - 70px);
    box-sizing: border-box;
    padding: 70px 0 40px; /* push content below fixed navbar, but keep hero height exact */
    margin: 0;
    overflow: visible; /* allow next section to flow up immediately after hero */
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2; /* keep hero above overlapping next section */
    /* Ensure earlier min-height does not interfere */
    min-height: 0;

}


.hero::before,
.hero::after { display: none !important; }

/* Remove any gap before the next section */
.hero + section {
    margin-top: 0 !important;
    /* Provide a comfortable responsive gap below hero without margin-collapsing */
    padding-top: clamp(32px, 6vw, 96px) !important;
}

/* If an ancestor has a transform, background-attachment can behave differently.
   Use this only as a debug test — don't keep it permanently. */
.hero, .hero * {
    transform: none !important;
    backface-visibility: visible !important;
}

.hero-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* single column now that icons are removed */
    gap: 1.5rem;
    align-items: center;
    justify-items: center; /* center children horizontally */
    text-align: center; /* center text in hero */
    position: relative;
    z-index: 2; /* ensure content sits above the overlay and image */
    padding: 0 var(--page-gutter); /* horizontal gutters */
}

/* Allow a wider hero text block on desktop to match original feel */
@media (min-width: 1200px) {
    .hero-container { max-width: 1400px; }
    .hero-content { max-width: 1400px; }
}

/* Subtle translucent panel behind hero text to ensure legibility on all backgrounds.
   Uses backdrop-filter where supported; falls back to a semi-transparent dark background. */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px; /* keep same container width */
    padding: 0; /* remove boxed panel padding */
    border-radius: 0;
    background: transparent; /* remove glass/translucent panel behind title */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Improve contrast for hero text */
.hero-title, .hero-subtitle, .hero-description {
    color: #ffffff; /* ensure pure white text */
    /* softer shadow so text pops but doesn't look heavy */
    text-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
}
.hero-title { -webkit-text-stroke: 0.2px rgba(0,0,0,0.25); }
.hero-subtitle { font-weight: 500; opacity: 0.99; }
.hero-description { opacity: 0.97; }

/* Slightly tighten spacing when the translucent panel is visible */
.hero-container .hero-content .hero-title { margin-bottom: 0.9rem; }

/* Inline hero image to show full photo without cropping. Use object-fit: contain so the entire image is visible.
   This will letterbox the image (showing background gradient behind it) when aspect ratios differ. */
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none; /* hide inline image since background covers the hero */
    object-position: center center;
    pointer-events: none; /* let clicks pass through to content */
    z-index: 0; /* below overlay (::before z-index:1) and content (z-index:2) */
    background-color: transparent;
}
.hero-title,
.hero-subtitle,
.hero-description,
.hero-buttons {
    margin-bottom: 0; /* prevents extra space stacking up */
}
.hero-title {
    font-size: clamp(2.2rem, 3.2vw + 1rem, 4.2rem);
    font-weight: 900;
    line-height: 1.08;
    margin-bottom: 1.4rem;
    letter-spacing: -0.02em;
    text-align: left;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.highlight {
        color: var(--brand-blue-dark);
        background: none;
        font-size: 65px;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        background-clip: initial;
            text-shadow:
                -2px -2px 0 #fff,
                 0   -2px 0 #fff,
                 2px -2px 0 #fff,
                -2px  0   0 #fff,
                 2px  0   0 #fff,
                -2px  2px 0 #fff,
                 0    2px 0 #fff,
                 2px  2px 0 #fff,
                 0    0  10px rgba(255,255,255,0.55);
}
@supports (-webkit-text-stroke: 1px white) {
        .highlight {
            -webkit-text-stroke: 4px #ffffff;
            -webkit-text-fill-color: #04233F;
            text-shadow: 0 0 2px rgba(255,255,255,0.45);
            paint-order: stroke fill;
        }
}

.hero-subtitle {
    font-size: clamp(1.05rem, 0.7vw + 0.9rem, 1.4rem);
    font-weight: 600;
    margin-bottom: 0.6rem;
    opacity: 0.9;
    font-style: italic;
    max-width: 62ch;            /* symmetric line length for readability */
    margin-left: 0;              /* left-align block within container */
    margin-right: 0;
    line-height: 1.6;            /* consistent rhythm */
    text-wrap: balance;          /* more even line breaks where supported */
}

.hero-description {
    /* Match the hero subtitle styling so the two lines appear identical */
    font-size: clamp(1.05rem, 0.7vw + 0.9rem, 1.4rem);
    font-weight: 600;
    margin-bottom: 0.6rem;
    opacity: 0.9;
    font-style: italic;
    max-width: 62ch;            /* match subtitle width for symmetry */
    margin-left: 0;             /* left-align block within container */
    margin-right: 0;
    line-height: 1.6;          /* consistent rhythm */
    text-wrap: balance;        /* more even line breaks where supported */
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start; /* left-align the button row */
}

/* Floating "Explore us" cue placed at bottom-center of hero */
.hero-explore-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* anchor flush to the bottom edge of the hero section */
    pointer-events: none; /* container shouldn't block other interactions */
    z-index: 12;
    display: flex;
    justify-content: center;
    /* ensure it visually touches the hero edge */
    padding-bottom: 0;
}
.hero-explore {
    pointer-events: auto; /* enable link clicks */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    background: transparent;
    border: none;
    padding: 6px 10px;
    transform: translateZ(0);
     /* start hidden and fade in on load, then run a continuous fade in/out loop */
     opacity: 0;
     /*
         - hero-explore-fade: entrance animation (one-shot)
         - hero-explore-pulse: continuous fade in/out after entrance
     */
    animation: hero-explore-fade 700ms ease-out 500ms forwards,
               hero-explore-pulse 1800ms ease-in-out 400ms infinite;
    animation-fill-mode: both;
    will-change: opacity, transform;
    transition: color 200ms ease, transform 120ms ease;
}
.hero-explore-text {
    font-size: 1.25rem; /* slightly bigger */
    letter-spacing: 0.02em;
    text-transform: capitalize;
    opacity: 0.95;
}
.hero-explore-arrow {
    font-size: 20px;
    line-height: 1;
    opacity: 0.95;
    display: inline-block;
    /* visual container for the SVG; animation applied to the SVG for reliable motion */
}

/* Ensure the inline SVG itself bounces visibly */
.hero-explore-arrow svg {
    display: inline-block;
    width: 28px; /* a touch larger */
    height: 20px;
    transform-origin: center center;
    /* no continuous bounce to keep the fade clean and less noisy */
    animation: none;
}

/* fade-in for the whole cue */
@keyframes hero-explore-fade {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-explore, .hero-explore-text, .hero-explore-arrow { animation: none !important; opacity: 0.95 !important; transform: none !important; }
}

@keyframes hero-explore-bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0); }
}

/* small fade-in for the visible text/arrow after the wrapper appears */
.hero-explore-text,
.hero-explore-arrow {
    opacity: 0;
    transform: translateY(4px);
    /* children only run the entrance fade; the wrapper controls the repeating fade
       to keep the overall animation smooth and synchronized */
    animation: hero-explore-text-fade 560ms ease-out 760ms forwards;
    transition: color 200ms ease, opacity 220ms ease, transform 220ms ease;
}

@keyframes hero-explore-text-fade {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 0.95; transform: translateY(0); }
}

@keyframes hero-explore-text-pulse {
    /* Smooth, gradual micro-pulse for text and arrow: soft ramps and tiny motion */
    0%   { opacity: 0; transform: translateY(1px); }
    12%  { opacity: 0.5; transform: translateY(0.5px); }
    30%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; transform: translateY(0); }
    88%  { opacity: 0.5; transform: translateY(0.5px); }
    100% { opacity: 0; transform: translateY(1px); }
}

/* Subtle opacity-only pulse for the whole cue to avoid transform conflicts with hover */
@keyframes hero-explore-pulse {
    /* Symmetric, smooth fade in/out for the whole cue. Ramps avoid abrupt jumps. */
    0%   { opacity: 0; }
    20%  { opacity: 0.2; }
    50%  { opacity: 1; }
    80%  { opacity: 0.2; }
    100% { opacity: 0; }
}

/* Slightly raise on hover/focus for affordance, but keep text & icon white */
.hero-explore:focus,
.hero-explore:hover {
    transform: translateY(-2px);
    color: #ffffff !important; /* keep white on hover */
}

/* Ensure children respect the white color on hover (SVG uses currentColor for stroke) */
.hero-explore:focus .hero-explore-text,
.hero-explore:hover .hero-explore-text,
.hero-explore:focus .hero-explore-arrow svg,
.hero-explore:hover .hero-explore-arrow svg {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

@media (max-width: 600px) {
    .hero-explore-text { font-size: 0.95rem; }
    .hero-explore-arrow { font-size: 18px; }
    .hero-explore-wrapper { bottom: 0; }
}

/* On small screens, keep Explore cue anchored at bottom and reserve space */
@media (max-width: 900px) {
    /* Reserve space so text never sits under the cue */
    .hero { padding-bottom: 96px; }
    .hero-explore-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        padding-bottom: 0;
        margin-top: 0;
        z-index: 12;
        display: flex;
        justify-content: center;
    }
}

/* On very small screens, hide the Explore cue and reduce padding */
@media (max-width: 480px) {
    .hero-explore-wrapper { display: none !important; }
    .hero { padding-bottom: 28px; }
}

/* Align hero subtitle, description, and buttons just after the opening quote */
.hero {
    /* Responsive offset to align under the first letter after the quote */
    --hero-align-offset: clamp(20px, 1.2vw + 16px, 56px);
}
.hero .hero-subtitle,
.hero .hero-description,
.hero .hero-buttons {
    margin-left: 0; /* reset left offset so these blocks are centered */
    margin-right: 0;
    text-align: center;
}

@media (max-width: 520px) {
    .hero { --hero-align-offset: 14px; }
}

/* (Glass effect removed as requested) */

/* Scroll cue removed as requested */

.btn {
    padding: 16px 36px;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    /* Use brand blue for primary CTAs instead of gold to match the site theme */
    background: var(--brand-blue-mid);
    color: #ffffff; /* white text on blue for good contrast */
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    background: var(--brand-blue-dark);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(12, 37, 79, 0.22);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.7) 60%, transparent 100%);
    transition: left 0.3s;
    pointer-events: none;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    background: transparent;
    /* Make outlined/secondary buttons use the brand blue to match primary CTAs */
    color: var(--brand-blue-dark);
    border: 2px solid var(--brand-blue-dark);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(28,55,97,0.06);
    border-color: var(--brand-blue-dark);
    color: var(--brand-blue-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(12,37,79,0.07);
}

.btn-large {
    padding: 15px 40px;
    font-size: 1.1rem;
}

.hero-graphic {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8rem;
    gap: 2rem;
    opacity: 0.3;
}

.hero-graphic i {
    /* Base gentle bob; specific icons add layered animations below */
    animation: float 3.2s ease-in-out infinite;
    will-change: transform;
}

.hero-graphic i:nth-child(2) {
    animation-delay: 1s;
}

.hero-graphic i:nth-child(3) {
    animation-delay: 2s;
}

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

/* Layered, icon-specific motion so they feel alive without being noisy */
.hero-graphic i.fa-cog {
    /* Combined float + spin to avoid transform conflicts */
    animation: cogFloatSpin 7s ease-in-out infinite;
}

.hero-graphic i.fa-wrench {
    /* Subtle pendulum sway with gentle lift */
    transform-origin: 50% 10%;
    animation: sway 3.6s ease-in-out 0.4s infinite alternate;
}

.hero-graphic i.fa-tools {
    /* Gentle scale pulse to imply depth */
    animation: pulse 5.4s ease-in-out 0.6s infinite;
}

@keyframes cogFloatSpin {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-12px) rotate(90deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
    75% { transform: translateY(-12px) rotate(270deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

@keyframes sway {
    0% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-10px) rotate(6deg); }
    100% { transform: translateY(0) rotate(-6deg); }
}

@keyframes pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-14px) scale(1.06); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-graphic i,
    .hero-graphic i.fa-cog,
    .hero-graphic i.fa-wrench,
    .hero-graphic i.fa-tools {
        animation: none !important;
    }
}

/* Key Insights Section */
.key-insights {
    /* Pull this section slightly under the hero so any extra space is visually filled */
    margin-top: -60px;
    padding: 60px 0 44px 0; /* reduce bottom spacing to tighten gap */
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    z-index: 1; /* sit below hero */
}

.key-insights::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.section-title {
    text-align: center;
    font-size: clamp(1.7rem, 1.6vw + 1rem, 2.4rem);
    font-weight: 700;
    line-height: 1.3; /* Better line height for descenders */
    margin-bottom: 4rem;
    color: var(--heading-unified) !important;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: initial !important;
}

/* Force white color for infrastructure section title */
/* Allow unified heading color in infrastructure as well */
.infrastructure .section-title { color: var(--heading-unified) !important; }

/* Remove decorative underline under section titles site-wide */
.section-title::after { display: none !important; }
/* Ensure no special-case underline remains in infrastructure section */
.infrastructure .section-title::after { display: none !important; }

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.insight-card {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.insight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.insight-card:hover::before {
    transform: scaleX(1);
}

.insight-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 25px 50px rgba(30, 64, 175, 0.18), 0 1.5px 6px rgba(30, 64, 175, 0.10);
    border-color: rgba(102, 126, 234, 0.2);
}

.insight-icon {
    width: 90px;
    height: 90px;
    background: transparent !important;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2.2rem;
    color: white;
    box-shadow: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    aspect-ratio: 1;
    max-width: 90px;
    max-height: 90px;
}

.insight-card:hover .insight-icon {
    transform: scale(1.1);
    box-shadow: none;
}

.insight-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.insight-card p {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.05rem;
    text-align: justify;
    text-align-last: left; /* avoid awkward last-line centering */
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* Features Section */
.features {
    padding: 56px 0 100px; /* reduce top spacing to tighten gap from insights */
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

/* Mobile: tighten gap between Key Insights (Cost-Effective card lives here) and Features */
@media (max-width: 900px) {
    .key-insights { padding: 48px 0 20px; }
    .features { padding: 28px 0 80px; }
}

.features-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.features-text h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Keep the Features headline on a single line on desktop and allow room */
@media (min-width: 901px) {
    .features-text h2 { white-space: nowrap; }
    /* Override inline max-width set in HTML so the line fits without overflow */
    .features-text { max-width: 780px !important; }
}

.features-text p {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.features-list {
    list-style: none;
}

.features-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    font-size: 1.1rem;
    padding: 0.5rem 0;
}

.features-list li:hover {
    color: #801D1D;
    transform: translateX(5px);
}

.features-list i {
    /* Feature check icon default color */
    color: #00c853; /* green */
    margin-right: 1.5rem;
    font-size: 1.3rem;
    background: rgba(0, 200, 83, 0.10); /* soft green tint */
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* On hover, align with navbar hover/active color */
.features-list li:hover i {
    color: #00b34b; /* slightly darker green on hover */
    background: rgba(0, 200, 83, 0.18);
}

.features-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder {
    width: 450px;
    height: 350px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: white;
    opacity: 0.9;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.image-placeholder:hover::before {
    transform: translateX(100%);
}

.image-placeholder:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.4);
}

/* Clients & Partners Section */
.clients-partners {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--brand-grey-light) 0%, var(--brand-grey-lighter) 100%);
    overflow: hidden;
    position: relative;
}

.clients-partners::before {
    /* Base gradient with layered brushed metal texture */
    background-image:
        linear-gradient(135deg, var(--brand-grey-light) 0%, var(--brand-grey-lighter) 100%),
        repeating-linear-gradient(-12deg,
            rgba(0, 0, 0, 0.05) 0px,
            rgba(0, 0, 0, 0.05) 1px,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0) 10px
        ),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='128' height='128' filter='url(%23n)' opacity='0.05'/></svg>");
    background-blend-mode: normal, soft-light, soft-light;
    background-repeat: no-repeat, repeat, repeat;
    background-size: cover, auto, 128px 128px;
    color: var(--brand-black);
    padding: 100px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.clients-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 3rem;
}

.clients-scroll {
    display: flex;
    animation: scroll 30s linear infinite;
    gap: 1.2rem;
    align-items: center;
}

.clients-scroll:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.client-logo {
    flex-shrink: 0;
    width: 170px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: white;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(28, 55, 97, 0.08);
    border: 2px solid var(--brand-grey-light);
}

.logo-placeholder {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.logo-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-placeholder:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color: #2563eb;
}

.logo-placeholder:hover::before {
    opacity: 1;
}

.logo-placeholder i {
    font-size: 2.5rem;
    color: #2563eb;
    margin-bottom: 0.5rem;
}

.logo-placeholder span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .clients-container {
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .clients-scroll-row2 {
        margin-top: 0;
    }
}

/* CTA Section */
.cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
    padding: 40px 0 16px;
    position: relative;
    overflow: hidden;
    /* Ensure blend modes of overlays don't affect outside elements */
    isolation: isolate;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    z-index: 3; /* above grain overlay */
}

/* Subtle grain + brushed metal overlay */
.footer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Layer 1: very fine diagonal brushed lines; Layer 2: SVG noise tile */
    background-image:
        repeating-linear-gradient(-12deg,
            rgba(255, 255, 255, 0.06) 0px,
            rgba(255, 255, 255, 0.06) 0.8px,
            rgba(0, 0, 0, 0) 0.8px,
            rgba(0, 0, 0, 0) 7px
        ),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='128' height='128' filter='url(%23n)' opacity='0.06'/></svg>");
    background-repeat: repeat, repeat;
    background-size: auto, 128px 128px;
    /* Blend softly into the base gradient for a metallic feel */
    mix-blend-mode: soft-light;
    /* Mild overall strength */
    opacity: 0.9;
    z-index: 1;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
    margin-bottom: 12px; /* create space above the bottom border line */
}

.footer-section {
    flex: 1 1 300px;
    min-width: 220px;
}

/* Footer brand logo sizing */
.footer-brand-logo {
    display: block;
    width: min(200px, 55%);
    height: auto;
    margin: 0 auto 0.01rem auto; /* tighter gap below logo */
    /* Contour-following white stroke using multiple drop-shadows (thinner) */
    filter:
        drop-shadow( 0.6px  0     0 rgba(255,255,255,0.80))
        drop-shadow(-0.6px  0     0 rgba(255,255,255,0.80))
        drop-shadow( 0      0.6px 0 rgba(255,255,255,0.80))
        drop-shadow( 0     -0.6px 0 rgba(255,255,255,0.80))
        drop-shadow( 0.6px  0.6px 0 rgba(255,255,255,0.80))
        drop-shadow(-0.6px  0.6px 0 rgba(255,255,255,0.80))
        drop-shadow( 0.6px -0.6px 0 rgba(255,255,255,0.80))
        drop-shadow(-0.6px -0.6px 0 rgba(255,255,255,0.80))
        /* softer halo */
        drop-shadow(0 0 1px rgba(255,255,255,0.25))
        /* subtle depth */
        drop-shadow(0 1px 6px rgba(0,0,0,0.18));
}

/* Vertical divider to the left of contact section */
.footer-content .with-divider {
    position: relative;
    margin-top: clamp(8px, 1.2vw, 16px); /* lower contact info slightly */
}
.footer-content .with-divider::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
}
@media (max-width: 900px) {
    .footer-content .with-divider::before { display: none; }
    .footer-content .with-divider { margin-top: 8px; } /* keep gap modest on small screens */
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 0.8rem;
    color: #ffffff !important; /* ensure footer headings are white */
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
}

/* Force the specific CONTACT INFO h4 in the footer to white (highest specificity) */
footer.footer .footer-section.with-divider > h4,
footer .footer-section.with-divider > h4 {
    color: #ffffff !important;
}

.footer-section p {
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #00C853 !important; /* green hover for footer links */
}

/* Also force other footer-specific hover states to green */
.footer .social-links a:hover,
.footer .footer-section a:hover,
.footer .with-divider a:hover,
.footer-bottom a:hover {
    color: #00C853 !important;
}

/* Footer contact info hyperlinks hover color */
.footer-section a:hover {
    color: #00C853 !important;
}

.social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.05rem;
}

.social-links a {
    width: 45px;
    height: 45px;
    background: transparent; /* keep hollow circle, no fill */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* icon stays white */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35); /* visible ring */
}

.social-links a:hover {
    background: transparent; /* no fill on hover */
    color: #ffffff !important; /* prevent yellow hover from generic rules */
    transform: translateY(-5px) scale(1.1);
    border-color: rgba(255, 255, 255, 0.65);
}

.footer-bottom {
    border-top: 1px solid #334155;
    padding-top: 0.75rem;
    text-align: center;
    color: #94a3b8;
}

/* Keep footer text non-justified as before */
.footer p,
.footer-section p,
.footer-contact-info p,
.footer-logo-section p,
.footer-bottom p {
    text-align: center !important;
    text-justify: auto !important;
}

/* Standard heading color for all headings */
h1, h2, h3, h4, h5, h6, .section-title {
    color: var(--heading-unified, #2D3748) !important;
}

/* Headings on dark backgrounds stay white */
.hero-title, .hero-subtitle, .hero-description,
.clients-partners .section-title, .clients-partners .section-subtitle,
.cta .section-title, .cta h2 {
    color: #fff !important;
}

/* Footer headings should be brand yellow (overrides global heading color) */
.footer .footer-section h3,
.footer .footer-section h4 {
    color: var(--brand-gold) !important;
}

/* Responsive Design */
/* Treat widths <= 900px as mobile/tablet to avoid cramped nav */
@media (max-width: 900px) {
    .hamburger {
        display: flex;
    }
    /* --- Responsive adjustments for Home page sections --- */

    .nav-menu {
        position: fixed;
        right: -100%;
        top: 67px; /* match compact navbar height plus border */
        z-index: 1101; /* ensure menu overlays page content and navbar */
        flex-direction: column;
        background-color: white;
        width: 100%;
        height: calc(100vh - 67px); /* fallback */
        height: calc(100dvh - 67px); /* account for dynamic mobile browser chrome */
        overflow: auto;
        text-align: center;
        transition: right 0.28s ease, transform 0.28s ease;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        -webkit-overflow-scrolling: touch;
        border-radius: 24px 24px 0 0;
    }

    .nav-menu.active {
        right: 0;
    }

    /* Prevent background scrolling when the mobile nav is open */
    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }

    /* Transform hamburger into an 'X' when active for clearer affordance */
    .hamburger .bar { background: var(--brand-blue-dark); }
    .hamburger.active .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .hamburger .bar { transition: transform 240ms ease, opacity 180ms ease, background 180ms; }

    .nav-menu li a {
        display: block;
        padding: 12px 8px;
        font-size: 1.05rem;
        color: var(--brand-blue-mid);

        text-align: left;
        justify-items: start;
        gap: 2rem;
    }

    /* On small screens make navbar content spread out and logo smaller */
    .nav-container {
        justify-content: space-between;
        padding: 0 16px;
        height: 64px;
    }

    .nav-logo img { width: 140px; height: auto; }

    /* Make hero height fluid on small screens to avoid clipping and large svh usage */
    .hero {
        height: auto !important;
        padding-top: 64px; /* leave room for fixed navbar */
        padding-bottom: 28px;
    }

    .hero-title {
        font-size: 2.8rem;
        margin-top: 1.4rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .features-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .insight-card {
        padding: 2rem 1.5rem;
    }

    .insight-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    .insights-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        justify-content: flex-start;
    }

    /* Make nav links touch-friendly on mobile */
    .nav-menu li a {
        display: block;
        padding: 12px 8px;
        font-size: 1.05rem;
        color: var(--brand-blue-dark);
    }

    /* Show and style the mobile quote button in mobile nav */
    .nav-quote-mobile {
        display: block;
        margin-top: 20px; /* more distance */
    }

    li.nav-quote-mobile a.nav-quote-link {
        background: var(--brand-blue-dark) !important;
        color: white !important;
        border: none !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        margin: 8px 0 !important;
    }

    li.nav-quote-mobile a.nav-quote-link:hover {
        background: var(--brand-maroon-dark) !important;
        color: white !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }

    li.nav-quote-mobile a.nav-quote-link .cta-text {
        color: white !important;
        font-weight: 600 !important;
    }

    li.nav-quote-mobile a.nav-quote-link .cta-icon i {
        color: white !important;
        font-size: 1.1rem !important;
    }

    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-content p {
        font-size: 1rem;
    }

    .machinery-grid {
        grid-template-columns: 1fr;
    }

    .machinery-card {
        padding: 2rem;
        cursor: pointer;
        transition: box-shadow 0.2s, transform 0.2s;
    }

    .machinery-card:hover {
        box-shadow: 0 4px 24px rgba(30, 64, 175, 0.15), 0 1.5px 6px rgba(30, 64, 175, 0.10);
        transform: translateY(-4px) scale(1.03);
    }

    .machinery-actions {
        flex-direction: column;
    }

    .machinery-actions .btn {
        flex: none;
        width: 100%;
    }

    .clients-scroll {
        gap: 2rem;
    }

    .client-logo {
        width: 150px;
        height: 100px;
    }

    .client-logo img {
        height: 70px !important;
        max-width: 140px !important;
    }

    .logo-placeholder i {
        font-size: 2rem;
    }

    .logo-placeholder span {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
        margin-top: 1.4rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .insight-card {
        padding: 2rem;
    }

    .btn {
        padding: 10px 20px;
    }

    .clients-scroll {
        gap: 1.5rem;
    }

    .client-logo {
        width: 120px;
        height: 80px;
    }

    .client-logo img {
        height: 70px !important;
        max-width: 110px !important;
    }

    .logo-placeholder {
        padding: 1rem;
    }

    .logo-placeholder i {
        font-size: 1.5rem;
    }

    .logo-placeholder span {
        font-size: 0.7rem;
    }
}

/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue-mid) 50%, var(--brand-cyan-light) 100%);
    color: white;
    padding: 60px 0 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Keep page header subtitle centered (not justified) */
.page-header p {
    text-align: center !important;
    text-justify: auto !important;
}
/* ============================= */
/* PAGE: ABOUT                   */
/* ============================= */
/* ========================================================= */
/* PAGE: ABOUT                                               */
/* ========================================================= */

/* --- Page Header Section --- */
/* --------------------------------------------------------- */
/* SECTION: PAGE HEADER                                      */
/* --------------------------------------------------------- */
/* Styles for .page-header, .page-header h1, etc. */
/* --- Company Story Section --- */
/* --------------------------------------------------------- */
/* SECTION: COMPANY STORY                                    */
/* --------------------------------------------------------- */
/* Styles for .company-story, .story-content, .story-text, .story-image, etc. */
/* --- Mission & Vision Section --- */
/* --------------------------------------------------------- */
/* SECTION: MISSION & VISION                                 */
/* --------------------------------------------------------- */
/* Styles for .mission-vision, .mv-grid, .mv-card, .mv-icon, etc. */
/* --- Team Section --- */
/* --------------------------------------------------------- */
/* SECTION: TEAM                                             */
/* --------------------------------------------------------- */
/* Styles for .team, .team-grid, .team-member, .member-photo, .position, .bio, etc. */
/* --- Stats Section --- */
/* --------------------------------------------------------- */
/* SECTION: STATS                                            */
/* --------------------------------------------------------- */
/* Styles for .stats, .stats-grid, .stat-item, .stat-number, .stat-label, etc. */
/* --- Why Choose Us Section --- */
/* --------------------------------------------------------- */
/* SECTION: WHY CHOOSE US                                    */
/* --------------------------------------------------------- */
/* Styles for .why-choose, .why-grid, .why-item, .why-icon, etc. */

/* Fine top highlight line for page header */
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
    z-index: 2;
}

.page-header h1 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

/* Lower only the inner content without changing the gray area's size */
.page-header .container {
    position: relative;
    transform: translateY(clamp(6px, 1.2vw, 20px));
}

.page-header {
    background: linear-gradient(135deg, var(--brand-grey-light) 0%, var(--brand-grey-lighter) 100%);
    color: var(--brand-black);
    /* restored original vertical spacing: keep header as it was */
    padding: 100px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate; /* contain blend of overlay */
}

/* Brushed metal overlay for page header */
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(-12deg,
            rgba(0, 0, 0, 0.06) 0px,
            rgba(0, 0, 0, 0.06) 1px,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0) 10px
        ),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='128' height='128' filter='url(%23n)' opacity='0.06'/></svg>");
    background-repeat: repeat, repeat;
    background-size: auto, 128px 128px;
    mix-blend-mode: soft-light;
    opacity: 0.85;
    z-index: 1;
}
/* Company Story */
.company-story {
    /* Reduce top padding to bring the company story closer to the header while
       preserving the header layout. */
    padding: 24px 0 40px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

.company-story::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.story-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.story-text h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.story-text p {
    font-size: 1.15rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.8;
    font-weight: 400;
}

/* Company Story: unified typography and accent color */
.company-story .story-text {
    /* layout-related inline styles are kept in the HTML; typography is controlled here */
    font-family: inherit;
    color: #333333; /* unified body color for story text */
}
.company-story .story-text p {
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 16px;
    color: #333333;
    font-weight: 400;
}
.company-story .story-text p strong {
    color: inherit;
    font-weight: 600;
}
/* Accent class used for the two blue phrases only */
.accent-blue {
    color: #2563eb; /* ENRAY blue */
    font-weight: 500;
}

/* Simple slideshow styles used on About page (factory images) */
.slideshow {
    position: relative;
    width: 100%; /* fill available container space */
    max-width: none; /* allow parent layout to control width */
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background: #fff; /* subtle backdrop while images load */
}
.slideshow .slideshow-track {
    display: flex;
    position: relative;
    width: 100%;
    /* Use aspect-ratio so height scales with width automatically; keep a sensible max height */
    aspect-ratio: 16 / 9;
    max-height: clamp(260px, 40vw, 720px);
    height: auto;
    /* sliding handled by translateX on the track */
    transition: transform 420ms cubic-bezier(.22,.9,.26,1);
    will-change: transform;
}
.slideshow .slideshow-track img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex: 0 0 100%;
    /* gentle scale transition for the active slide */
    transition: transform 520ms cubic-bezier(.22,.9,.26,1), filter 520ms ease;
    transform: scale(1);
}
.slideshow .slideshow-track img.active {
    transform: scale(1.03);
    filter: brightness(0.98);
}
.slideshow button.slideshow-prev,
.slideshow button.slideshow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Darker control for higher contrast */
    background: rgba(0,0,0,0.78);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px; /* increase size of arrow glyphs (‹ ›) */
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.slideshow button.slideshow-prev { left: 12px; }
.slideshow button.slideshow-next { right: 12px; }
.slideshow button.slideshow-prev:focus,
.slideshow button.slideshow-next:focus {
    outline: 2px solid rgba(37,99,235,0.95);
    outline-offset: 2px;
}

.slideshow button.slideshow-prev:hover,
.slideshow button.slideshow-next:hover {
    background: rgba(0,0,0,0.92);
}
.slideshow-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    display: flex;
    gap: 8px;
    z-index: 5;
}
.slideshow-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.65);
    border: none;
    cursor: pointer;
    padding: 0;
}
.slideshow-dots button.active {
    background: #fff;
    width: 10px;
    height: 10px;
}

@media (max-width: 640px) {
    .slideshow button.slideshow-prev,
    .slideshow button.slideshow-next { width: 34px; height: 34px; font-size: 18px; }
}
/* Mission & Vision */
.mission-vision {
    /* Reduce top padding to further close the gap after Company Story */
    padding: 40px 0 100px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

.mission-vision::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    position: relative;
    z-index: 2;
}

.mv-card {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.mv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
     background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.mv-card:hover::before {
    transform: scaleX(1);
}

.mv-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 25px 50px rgba(30, 64, 175, 0.18), 0 1.5px 6px rgba(30, 64, 175, 0.10);
    border-color: rgba(102, 126, 234, 0.2);
}

.mv-icon {
    width: 90px;
    height: 90px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2.2rem;
    color: white;
    box-shadow: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mv-card:hover .mv-icon {
    transform: scale(1.1);
    box-shadow: none;
}

.mv-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.mv-card p {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Ensure mission card text is explicitly centered */
.mv-card h3 { text-align: center; }
.mv-card p {
    text-align: justify;
    hyphens: auto;
}

/* Team Section */

.team {
    padding: 10px 0 0 0;
    margin-bottom: 40px;
    background: white;
}

/* Mobile: tighten vertical gaps between Company Story ↔ Mission & Vision, and Mission & Vision ↔ Team */
@media (max-width: 900px) {
    .company-story { padding: 16px 0 24px; }
    .mission-vision { padding: 24px 0 40px; }
    .team { padding-top: 6px; margin-bottom: 32px; }
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
    margin-top: 0;
}

.team-member {
    text-align: center;
    padding: 0.5rem 0 0 0;
    border-radius: 15px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-member:hover {
    transform: translateY(-5px);
}

.member-photo {
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.35rem; /* slight space under image */
    font-size: 3rem;
    color: white;
}

/* Improve portrait cropping to keep faces visible within the circle */
img.portrait-top {
    object-position: 50% 18%; /* shift further toward top so head isn’t cropped */
}

.team-member h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0.15rem 0 0.2rem; /* tighten spacing to keep next lines close */
    color: #1e293b;
}

.position {
    color: #00c853;
    font-weight: 500;
    margin: 0.15rem 0 0.15rem; /* place just below image/name */
}

.bio {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.1rem 0 0; /* sit close under position */
}

/* Decorative oversized curly quotes around .team paragraph */
.team p {
    position: relative; /* anchor pseudo-elements */
    padding: 0; /* inline quotes sit next to words */
}
.team p::before,
.team p::after {
    position: static; /* participate in inline flow */
    display: inline-block;
    font-family: Georgia, "Times New Roman", Times, serif; /* elegant curly glyphs */
    /* Make the curly quotes subtle and closer to text size */
    font-size: clamp(1em, 2.2vw, 1.15em);
    line-height: 1;
    color: currentColor; /* match message text color */
    pointer-events: none;
    user-select: none;
}
.team p::before {
    content: "\201C"; /* opening curly double quote “ */
    margin-right: 0.15em;
    vertical-align: -0.2em; /* ride slightly above baseline */
}
.team p::after {
    content: "\201D"; /* closing curly double quote ” */
    margin-left: 0.15em;
    vertical-align: -0.2em;
}

@media (max-width: 640px) {
    .team p { padding: 0; }
    .team p::before,
    .team p::after { font-size: clamp(1em, 3.5vw, 1.1em); }
}

/* Stats Section */
.stats {
    padding: 80px 0;
    /* Base gradient + brushed lines + grain overlay */
    background-image:
        linear-gradient(135deg, #1e293b, #334155),
        repeating-linear-gradient(-12deg,
            rgba(255,255,255,0.05) 0px,
            rgba(255,255,255,0.05) 1px,
            rgba(0,0,0,0) 1px,
            rgba(0,0,0,0) 10px
        ),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='128' height='128' filter='url(%23n)' opacity='0.06'/></svg>");
    background-blend-mode: normal, soft-light, soft-light;
    background-repeat: no-repeat, repeat, repeat;
    background-size: cover, auto, 128px 128px;
    color: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat-item {
    padding: 2rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #00c853;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Stats section becomes the positioning context so the footnote can sit at the section bottom */
.stats { position: relative; }

/* Stats footnote: single-line left-aligned at the bottom of the stats section */
.stats-footnote {
    font-size: 0.82rem; /* noticeably smaller */
    color: #94a3b8; /* muted slate */
    line-height: 1.4;
    margin: 0; /* reset margin when absolutely positioned */
    position: absolute;
    /* align with the container's inner content by using the page gutter variable */
    /* keep within page gutters and center the text horizontally */
    left: var(--page-gutter);
    right: var(--page-gutter);
    bottom: 18px; /* lift the footnote a little above the section bottom */
    text-align: center;
    white-space: nowrap; /* keep it on a single line */
    overflow: hidden;
    text-overflow: ellipsis; /* show ellipsis if it overflows */
    display: block;
}

@media (max-width: 640px) {
    .stats-footnote {
        font-size: 0.75rem;
        bottom: 12px;
        left: 0; /* ensure left stays flush on small screens */
        /* Keep single-line behavior but allow ellipsis on very small screens */
        white-space: nowrap;
        text-align: left;
    }
}

/* Why Choose Us */
.why-choose {
    padding: 80px 0;
    background: #f8fafc;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.why-item {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    text-align: center;
    /* lighter default shadow; heavy hover shadow is expensive */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    /* Only animate transform and box-shadow for smoother performance */
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Hint to the browser which properties will change and promote to its own layer */
    will-change: transform, box-shadow;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

.why-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.why-item:hover::before { transform: scaleX(1); }

.why-item:hover {
    /* Keep cards from lifting on hover but apply the same subtle shadow used by other cards */
    transform: none !important; /* prevent translateY/scale on hover */
    /* Slightly darker hover shadow for better contrast without adding motion */
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    border-color: rgba(102, 126, 234, 0.06);
}

.why-icon {
    width: 90px;
    height: 90px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    font-size: 2.2rem;
    color: white;
    /* Only transform the icon (cheap) and hint the change */
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    position: relative;
}

.why-item:hover .why-icon {
    transform: scale(1.06);
}

.why-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.why-item p {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Ensure Why Choose Us card text is explicitly centered */
.why-item h4 { text-align: center; }
.why-item p {
    text-align: justify;
    hyphens: auto;
}

/* Products Overview */
.products-overview {
    padding: 80px 0;
    background: white;
}
/* ============================= */
/* PAGE: PRODUCTS & SERVICES     */
/* ============================= */

/* --- Products Overview Section --- */
/* Styles for .products-overview, .overview-content, etc. */
/* --- Products Grid Section --- */
/* Styles for .products-grid, .products-container, .product-card, .product-image, .product-features, .btn-outline, etc. */
/* --- Services Section --- */
/* Styles for .services, .services-grid, .service-item, .service-icon, etc. */
/* --- Machinery Section --- */
/* Styles for .machinery-section, .machinery-grid, .machinery-card, .machinery-image, .machinery-specs, .machinery-features, .machinery-actions, etc. */
/* --- Industries Section --- */
/* Styles for .industries, .industries-grid, .industry-item, .industry-icon, etc. */

/* --- Product Category Scroller --- */
.product-category {
    padding: 8px 0 8px; /* tightened bottom padding for closer stacked categories */
    background: #fff;
}
.product-category .section-title {
    margin-bottom: 1.8rem; /* increase so more space appears between heading and product cards */
}
.product-category .section-subtitle {
    text-align: left;
    color: #475569;
    margin-top: 0.12rem;
    margin-bottom: 0.5rem; /* tightened subtitle spacing */
}
.product-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 260px);
    justify-content: center; /* center items when content doesn't overflow (no carousel) */
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 12px;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
}
.product-scroll.marquee-active {
    scroll-snap-type: none; /* disable snapping during continuous marquee */
    justify-content: flex-start; /* left-align when marquee is active */
}
.product-scroll::-webkit-scrollbar { height: 10px; }
.product-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
.product-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

.product-item {
    scroll-snap-align: start;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
.product-item img {
    width: 100%;
    height: 140px;
    object-fit: contain !important; /* show full image without cropping */
    object-position: center;
    background: #ffffff; /* uniform white backdrop for product images */
    display: block;
    padding: 6px; /* breathing room so edges never look clipped */
}
.product-item figcaption {
    padding: 8px 10px 10px;
    text-align: center;
    font-weight: 600;
    color: #374151;
    font-size: 0.95rem;
}

@media (max-width: 900px) {
    .product-scroll { grid-auto-columns: 75vw; gap: 10px; }
    .product-item img { height: 120px; }
}
@media (max-width: 600px) {
    .product-scroll { grid-auto-columns: 82vw; gap: 8px; }
    .product-item img { height: 110px; }
}

/* Defensive: make sure all images within product categories never crop */
.product-category .product-item img { object-fit: contain !important; }

/* Ensure carousel product images use the same white backdrop and padding
   (some figures use both .product-item and .product-card - make rule explicit) */
.product-carousel-track .product-card img,
.product-category .product-card img {
    background: #ffffff;
    padding: 6px;
    display: block;
    object-fit: contain !important;
    object-position: center;
}

/* --- Product Carousel Styles (for categories with >6 items) --- */
.product-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 32px 0;
    position: relative;
    overflow: hidden;
}

.product-carousel-track {
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-blue-mid) rgba(0, 0, 0, 0.1);
    -ms-overflow-style: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
}
@media (min-width: 901px) {
    .product-carousel-track {
        justify-content: flex-start;
        width: fit-content;
    }
}

/* When a track is marked as center-aligned it means the section has
   a small number of products and doesn't need carousel behavior.
   Center them and allow wrapping on wider screens. */
.product-carousel-track.center-aligned {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px 12px;
    overflow: visible; /* show shadows and allow wrapping */
}
.product-carousel-track.center-aligned .product-card {
    flex: 0 0 auto;
    width: 240px;
    scroll-snap-align: none;
}
.product-carousel-wrapper:has(.product-carousel-track.center-aligned) {
    overflow: visible;
}

/* Hide native scrollbars for the product carousel but keep it scrollable
   - Firefox: scrollbar-width: none
   - IE/Edge: -ms-overflow-style: none
   - WebKit: hide the ::-webkit-scrollbar pseudo-element
*/
.product-carousel-track {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.product-carousel-track::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
    height: 0;
}

/* Product carousel cards */
.product-carousel-track .product-card {
    opacity: 1;
    border-radius: 18px;
    transition: box-shadow 0.22s cubic-bezier(.2,.9,.2,1), transform 0.22s ease;
    cursor: pointer;
    transform-origin: center top;
    will-change: transform, box-shadow;
    filter: none;
    flex-shrink: 0;
    width: 240px;
    scroll-snap-align: start;
}

.product-carousel-track .product-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(12,37,79,0.20);
    z-index: 12;
}

.product-carousel-track .product-card-focus {
    transform: scale(1.05);
    z-index: 12;
    box-shadow: 0 20px 50px rgba(12,37,79,0.35), 0 8px 20px rgba(12,37,79,0.15);
}

/* Responsive adjustments for product carousel */
@media (max-width: 900px) {
    /* Center align carousel tracks with 2 or fewer products on mobile */
    .product-carousel-track:has(.product-card:nth-child(2):last-child),
    .product-carousel-track:has(.product-card:nth-child(1):last-child) {
        justify-content: center;
    }
    /* Fallback class for small sets: use a simple 2-column grid on mobile */
    .product-carousel-track.center-aligned {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: center;
        align-items: stretch;
        gap: 18px;
        padding: 16px;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .product-carousel-track.center-aligned .product-card {
        width: 100%;
        max-width: 520px;
        flex: 0 0 auto;
    }
    /* When the wrapper is used with small sets, don't clip shadows/edges on mobile */
    .product-carousel-wrapper:has(.product-carousel-track.center-aligned) {
        overflow: visible;
    }
    .product-carousel-track .product-card {
        width: 200px;
    }
    /* Ensure only 2 products are visible at a time on mobile */
    .product-carousel-track {
        max-width: calc(200px * 2 + 18px); /* 2 cards + gap */
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .product-carousel-track .product-card {
        width: 180px;
    }
    .product-carousel-track {
        gap: 15px;
        padding: 15px;
        max-width: calc(180px * 2 + 15px); /* 2 cards + gap */
        margin: 0 auto;
    }
    /* Even on small phones, keep two columns per request */
    .product-carousel-track.center-aligned {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 12px;
    }
}

.overview-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.overview-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1e293b;
}

.overview-content p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
}

/* Products Grid */
.products-grid {
    padding: 80px 0;
    background: #f8fafc;
}

.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.product-card {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.18);
}

.product-image {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: white;
}

.product-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.product-card p {
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.product-features {
    list-style: none;
    margin-bottom: 2rem;
}

.product-features li {
    padding: 0.5rem 0;
    color: #64748b;
    position: relative;
    padding-left: 1.5rem;
}

.product-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.btn-outline {
    background: transparent;
    color: #2563eb;
    border: 2px solid #2563eb;
}

.btn-outline:hover {
    background: #2563eb;
    color: white;
}

/* Services */
.services {
    padding: 80px 0;
    background: white;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.service-item {
    text-align: center;
    padding: 2rem;
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
}

.service-item h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.service-item p {
    color: #64748b;
    line-height: 1.6;
}

/* Machinery Section */
.machinery-section {
    padding: 100px 0;
        padding: 30px 0 10px 0;
    position: relative;
}

.machinery-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.section-subtitle {
    /* Subtitles: slightly smaller than headings, readable weight and color,
       and allow normal wrapping so long descriptions don't get clipped. */
    text-align: center;
    font-size: 1rem; /* reduced for better hierarchy vs h2/h1 */
    color: #475569; /* stronger muted color for better contrast */
    margin-bottom: 1.8rem;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    white-space: normal; /* allow wrapping on narrow screens */
    line-height: 1.4;
    font-weight: 500; /* medium weight to visually pair with titles */
    font-family: var(--font-body);
}

.machinery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 3rem;
    position: relative;
        gap: 1rem;
        margin-top: 0;

.machinery-card {
    background: white;
    padding: 0 2rem 2rem 2rem;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.machinery-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.machinery-card:hover::before {
    transform: scaleX(1);
}

.machinery-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.18);
    border-color: rgba(102, 126, 234, 0.2);
}

.machinery-image {
    width: 100%;
    height: 220px;
        margin: 0 auto 0.2rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: none;
    position: relative;
}

.machinery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(37,99,235,0.13);
    cursor: pointer;
}

/* Modal styles for enlarged image */
.machinery-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh; /* fallback */
    height: 100dvh; /* dynamic viewport for mobile */
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}
.machinery-modal.active {
    display: flex;
}
.machinery-modal img {
    max-width: 90vw;
    max-height: 90vh; /* fallback */
    max-height: 90dvh; /* dynamic viewport */
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(37,99,235,0.25);
}
.machinery-card:hover .machinery-image {
    transform: scale(1.04);
    box-shadow: none;
}

.machinery-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1e293b;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.machinery-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.spec-item {
    background: var(--brand-blue-dark);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.spec-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.machinery-card p {
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.7;
    font-size: 1.05rem;
    font-weight: 400;
}

.machinery-features {
    list-style: none;
    margin-bottom: 2.5rem;
}

.machinery-features li {
    padding: 0.8rem 0;
    color: #64748b;
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.machinery-features li:hover {
    color: #801D1D;
    transform: translateX(5px);
}

.machinery-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.2rem;
    background: rgba(16, 185, 129, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
}

.machinery-actions {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.machinery-actions .btn {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 14px 24px;
    font-weight: 700;
    border-radius: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}

.machinery-actions .btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
}

.machinery-actions .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4);
}

.machinery-actions .btn-outline {
    background: transparent;
    color: var(--brand-blue-dark);
    /* Equal spacing from all sides */
    padding: clamp(32px, 8vw, 80px);
}

.machinery-actions .btn-outline:hover {
    background: var(--brand-blue-dark);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.3);
}

/* Industries */
.industries {
    padding: 80px 0;
    background: white;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.industry-item {
    position: relative;
    overflow: hidden;
    background: #f8fafc;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid #e2e8f0;
}

.industry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
    }

    .industry-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
        transform: scaleX(0);
        transition: transform 0.3s ease;
        z-index: 2;
    }

    .industry-item:hover::before {
        transform: scaleX(1);
}

.industry-item i {
    font-size: 3rem;
    color: #2563eb;
    margin: 0 0 12px 0; /* tight, centered spacing above/below */
}

.industry-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.industry-item p {
    color: #64748b;
    font-size: 0.9rem;
}


.mission-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}
/* ============================= */
/* PAGE: CONTACT                 */
/* ============================= */
/* ========================================================= */
/* PAGE: CONTACT                                             */
/* ========================================================= */

/* --- Contact Section --- */
/* --------------------------------------------------------- */
/* SECTION: CONTACT                                          */
/* --------------------------------------------------------- */
/* Styles for .contact-section, .contact-content, .contact-info, .contact-details, .contact-item, .contact-icon, .contact-text, .social-links, .social-icons, etc. */
/* --- Contact Form Section --- */
/* --------------------------------------------------------- */
/* SECTION: CONTACT FORM                                     */
/* --------------------------------------------------------- */
/* Styles for .contact-form-container, .contact-form, .form-group, .form-group label, .form-group input, .form-group textarea, etc. */
/* --- Map Section --- */
/* --------------------------------------------------------- */
/* SECTION: MAP                                              */
/* --------------------------------------------------------- */
/* Styles for .map-section, .map-container, .map-info, .map-info-content, .map-directions, etc. */
/* --- FAQ Section --- */
/* --------------------------------------------------------- */
/* SECTION: FAQ                                              */
/* --------------------------------------------------------- */
/* Styles for .faq-section, .faq-container, .faq-item, .faq-question, .faq-answer, etc. */

.mission-text h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mission-text p {
    font-size: 1.15rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.8;
    font-weight: 400;
}

.mission-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #10b981;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: #64748b;
}

/* Environmental Impact */
.environmental-impact {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

.environmental-impact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
    position: relative;
    z-index: 2;
}

.impact-card {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #10b981, #059669);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.impact-card:hover::before {
    transform: scaleX(1);
}

.impact-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.18);
}

.impact-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    font-size: 2.2rem;
    color: white;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.impact-card:hover .impact-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
}

.impact-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.impact-card p {
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.7;
    font-size: 1.05rem;
    font-weight: 400;
}

.impact-list {
    list-style: none;
}

.impact-list li {
    padding: 0.5rem 0;
    color: #64748b;
    position: relative;
    padding-left: 1.5rem;
}

/* Green Technologies */
.green-technologies {
    padding: 80px 0;
    background: white;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.tech-item {
    text-align: center;
    padding: 2rem;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-5px);
}

.tech-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
}

.tech-item h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.tech-item p {
    color: #64748b;
    line-height: 1.6;
}


.goals-timeline {
    max-width: 800px;
    margin: 0 auto;
}

.goal-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.goal-year {
    font-size: 2rem;
    font-weight: 700;
    color: #2563eb;
    margin-right: 2rem;
    min-width: 100px;
}

.goal-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.goal-content p {
    color: #64748b;
    line-height: 1.6;
}

/* Certifications */
.certifications {
    padding: 80px 0;
    background: white;
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.cert-item {
    text-align: center;
    padding: 2rem;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.cert-item:hover {
    transform: translateY(-5px);
}

.cert-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
       color: white;
}

.cert-item h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.cert-item p {
    color: #64748b;
    line-height: 1.6;
}

/* Contact Section */
.contact-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    position: relative;
    z-index: 2;
}

.contact-info h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #1e293b;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.contact-info p {
    font-size: 1.15rem;
    color: #64748b;
    margin-bottom: 2.5rem;
    line-height: 1.8;
    font-weight: 400;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
    border-color: rgba(102, 126, 234, 0.2);
    }

    .contact-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
        transform: scaleX(0);
        transition: transform 0.3s ease;
        z-index: 2;
    }

    .contact-item:hover::before {
        transform: scaleX(1);
}

.contact-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-item:hover .contact-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.contact-text h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.contact-text p {
    color: #64748b;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 500;
}

.social-links h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1e293b;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icons a:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-3px);
}

/* Contact Form */
.contact-form-container {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.contact-form h3 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: #1e293b;
    text-align: center;
    letter-spacing: -0.01em;
}

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    font-size: 1.05rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1.05rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    font-weight: 500;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
}

/* Map Section */
.map-section {
    padding: 40px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

.map-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.map-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    min-height: 450px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-container iframe {
    border: none;
    width: 100%;
    height: 450px;
}

.map-info {
    background: linear-gradient(135deg, var(--brand-blue-dark));
    color: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-info-content {
    text-align: center;
}

.map-info-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff !important;
}

.map-info-content p {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.map-info-content i {
    width: 20px;
    text-align: center;
    color: #ffd700;
}

.map-directions {
    margin-top: 2rem;
}

.map-directions .btn {
    background: #ffd700;
    color: #1e293b;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-directions .btn i {
    color: #1e293b !important;
    /* Ensures icon is visible on yellow background */
}

.map-directions .btn:hover {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

/* Mobile responsive for map */
@media (max-width: 768px) {
    .map-container {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .map-container iframe {
        height: 300px;
    }
    
    .map-info {
        padding: 1.5rem;
    }
    
    .map-info-content h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .map-info-content p {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }
}

/* FAQ Section */
.faq-section {
    padding: 80px 0;
    background: white;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.faq-question {
    padding: 1.5rem;
    background: #f8fafc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: #e2e8f0;
}

.faq-question h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.faq-question i {
    color: #2563eb;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    padding: 1.5rem;
    max-height: 200px;
}

.faq-answer p {
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Loading animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.insight-card {
    animation: fadeInUp 0.6s ease forwards;
}

.insight-card:nth-child(1) { animation-delay: 0.1s; }
.insight-card:nth-child(2) { animation-delay: 0.2s; }
.insight-card:nth-child(3) { animation-delay: 0.3s; }

}

.footer-large-logo {
    display: block;
    max-width: 90px;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    filter: drop-shadow(0 2px 12px rgba(37,99,235,0.13));
    border-radius: 18px;
    background: #fff;
    padding: 0.3rem 0.7rem;
    box-shadow: 0 2px 12px rgba(37,99,235,0.07);
}
@media (max-width: 900px) {
    .footer-large-logo {
        margin: 2rem auto 0 auto;
        display: block;
    }
    }

/* Contact Page Map and Card Styles */
.map-contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: stretch;
    margin: 48px 0;
}
.map-frame {
    width: 100%;
    height: 500px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 32px rgba(28,55,97,0.10);
    background: #f8fafc;
}
.map-frame {
    height: 100%;
    min-height: 500px;
    display: flex;
}
.map-contact-grid .map-frame iframe {
    height: 100%;
    min-height: 500px;
    width: 100%;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}
.map-card {
    /* Make card responsive: fill container but cap width for desktop */
    width: 100%;
    max-width: 500px;
    background: linear-gradient(135deg, var(--brand-grey-light) 0%, var(--brand-grey-lighter) 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(28,55,97,0.10);
    padding: 36px 32px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* Keep Find Us content centered and non-justified like before */
.map-card p,
.map-card .muted,
.map-card address,
.map-card .hours p {
    text-align: center !important;
    text-justify: auto !important;
}
.map-card .section-title {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 12px;
    color: #1e293b;
    }

    .map-card .section-title::after {
        display: none !important;
}
.map-card .muted {
    color: #6b7280;
    margin-bottom: 18px;
}

/* Override any inline truncation to allow wrapping inside the card */
.map-card .muted {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
}

/* Icon style for map-card heading (warehouse icon) */
.map-card .section-title .section-icon {
    font-size: 2.2rem; /* larger, more prominent */
    color: var(--heading-unified) !important;
    margin-right: 0.6rem;
    vertical-align: middle;
}

/* Utility to keep accessible text for screen readers only */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Remove the decorative underline for the map-card heading specifically. This
   overrides the site-wide underline rule so the icon-only heading doesn't get
   an unexpected underline. */
.map-card .section-title::after {
    display: none !important;
}
.map-address {
    font-style: normal;
    line-height: 1.6;
    color: #111827;
    margin-bottom: 18px;
    font-size: 1.08rem;
}
.contact-list {
    list-style: none;
    padding: 0;
    margin-bottom: 18px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.contact-list li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-size: 1.08rem;
    color: #374151;
    margin-bottom: 8px;
    padding-left: 24px;
    width: 100%;
}

/* Icon stays at the top */
.contact-list li i {
    flex-shrink: 0;
    margin-top: 2px;
    align-self: center;
}

/* Container for contact values that can wrap */
.contact-list li .contact-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.contact-list li .contact-values a {
    white-space: nowrap;
}

/* Separator styling */
.contact-list li .separator {
    margin: 0 4px;
}

/* Ensure phone/email text wraps naturally on narrow screens (override inline styles) */
.map-card .contact-list li span {
    min-width: 0 !important;
    white-space: normal !important;
    text-align: left !important;
}

/* Restore original desktop presentation exactly */
@media (min-width: 901px) {
    /* Fixed card width inside the right column */
    .map-contact-grid .map-card { width: 500px; max-width: none; margin: 0 auto; }
    /* Desktop subtitle: single line with ellipsis */
    .map-contact-grid .map-card .muted {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Center the list rows like the original, remove left padding */
    .map-contact-grid .contact-list { align-items: center; }
    .map-contact-grid .contact-list li {
        justify-content: center;
        padding-left: 0;
        align-items: baseline;
    }
    /* Desktop: keep items together in one line */
    .map-contact-grid .contact-list li .contact-values {
        flex-wrap: nowrap;
        gap: 0; /* remove extra spacing around the separator to match footer */
    }
    /* Desktop: keep phone/email text on one line with ellipsis */
    .map-contact-grid .contact-list li .contact-values a {
        /* Use natural width so the pipe has no extra gap */
        min-width: auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: left !important;
    }
    /* Desktop: icons use solid black like the original */
    .contact-section .map-card .contact-list i { color: #000000 !important; font-size: 1.2rem; margin-right: 4px; }
    /* Reduce space around separator on desktop */
    .map-contact-grid .contact-list li .separator {
        margin: 0;                /* no extra margins */
        padding: 0 0.25ch;        /* tighter, symmetric spacing around the pipe */
        display: inline-block;    /* ensure padding applies cleanly */
    }
    /* Desktop: normalize anchor margins to avoid unintended extra gap */
    .map-card .contact-list li .contact-values a {
        margin: 0 !important;
    }
    /* Desktop: email row — mirror phone styling; truncate if too long */
    .map-card .contact-list li:nth-child(2) .contact-values a {
        flex: 0 0 auto;
        max-width: 220px; /* keep line tidy like phones */
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
    }
    /* Remove tooltip behavior; keep emails simple like phone numbers */
}
@media (max-width: 900px) {
    .map-contact-grid .contact-list li {
        justify-content: center;
        padding-left: 0;
        align-items: baseline;
    }
    .map-contact-grid .contact-list li i {
        margin-top: 0;
    }
    .map-card .contact-list li:first-child .contact-values {
        flex-wrap: nowrap;
    }
    /* Mobile: remove the pipe between emails in the map-card */
    .map-card .contact-list li:nth-child(2) .separator {
        display: none;
    }
}
.contact-list i {
    color: #801D1D;
    font-size: 1.2rem;
    vertical-align: middle;
    margin-right: 4px;
}
.hours {
    margin-bottom: 18px;
    width: 100%;
}
.hours h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1e293b;
}
.hours p {
    color: #801D1D;
    font-size: 1rem;
    line-height: 1.6;
}
.map-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
}
.map-actions .btn {
    font-size: 1rem;
    padding: 10px 18px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(102,126,234,0.10);
    background: #ffd801;
    color: var(--brand-black);
    border: none;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.map-actions .btn:hover {
    background: #ffd801;
}

/* Map card: phone links red by default, blue on hover (like navbar) */
.map-card .contact-list a[href^="tel"] {
    color: var(--brand-maroon-dark) !important; /* same red as Business Hours */
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.map-card .contact-list a[href^="tel"]:hover {
    color: var(--link-hover) !important; /* match site link hover color */
}

/* Map card: email links same behavior as phone links */
.map-card .contact-list a[href^="mailto"] {
    color: var(--brand-maroon-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.map-card .contact-list a[href^="mailto"]:hover {
    color: var(--link-hover) !important; /* match site link hover color */
}
/* Map card: make phone/mail icons same blue as page links */
.map-card .contact-list i.fa,
.map-card .contact-list i.fas,
.map-card .contact-list i.fa-phone,
.map-card .contact-list i.fa-envelope {
    color: var(--link) !important; /* match site link blue */
    transition: color 0.2s ease;
}
.map-card .contact-list li:hover i.fa,
.map-card .contact-list li:hover i.fas,
.map-card .contact-list li:hover i.fa-phone,
.map-card .contact-list li:hover i.fa-envelope {
    color: var(--link-hover) !important; /* match site link hover color */
}
@media (max-width: 900px) {
    .map-contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .map-frame, .map-card {
        min-height: 340px;
    }
    .map-contact-grid .map-frame iframe {
        min-height: 340px;
    }
}

/* Reduce overlap slightly on small screens for readability */
@media (max-width: 768px) {
    .key-insights {
        margin-top: -40px;
        padding-top: 40px;
    }
}

/* Slightly reduce scale on small screens only to avoid bottom clipping */
@media (max-width: 900px) {
    .infra-card:hover,
    .infra-card-focus {
        transform: scale(1.05);
    }
}

/* ==========================================
   TEMP: Hide social links site-wide
   Reason: URLs not ready yet; remove this block to show them again
   ========================================== */
.social-links,
.social-icons {
    display: none !important;
}

/* ==========================================
   Major Heading Underline (site-wide)
   Applies a small underline to h1, h2, and .section-title.
   - Color: uses currentColor so it matches the heading color/brand
   - Width: subtle short rule; centered for .section-title, left for h1/h2 by default
   - Opt-out: add .no-underline to any heading to disable
   ========================================== */
h1, h2, .section-title { position: relative; }

h1::after,
h2::after,
.section-title::after {
    content: '';
    display: block !important; /* override earlier display: none */
    width: 64px;
    max-width: 30%;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    margin-top: 0.4em; /* Use em units for better spacing with descenders */
    opacity: 0.95;
}

/* Center the underline for section titles which are typically centered */
.section-title::after { margin-left: auto; margin-right: auto; }

/* Re-enable underlines in contexts that previously forced them off */
/* Keep map-card excluded so icon-only heading stays underline-free. */
.infrastructure .section-title::after { display: block !important; }

/* Utilities */
.no-underline::after { display: none !important; }
.underline-center::after { margin-left: auto; margin-right: auto; }
.underline-left::after { margin-left: 0; margin-right: 0; }
.underline-right::after { margin-left: auto; margin-right: 0; }

/* Exclusions: remove underline in hero and page headers */
.hero h1::after,
.hero .hero-title::after,
.page-header h1::after,
.page-header h2::after { display: none !important; }

/* Remove underline from Features section heading */
.features h2::after { display: none !important; }

/* Clients & Partners: make heading and underline the same (brand) color */
.clients-partners .section-title {
    color: var(--heading-unified, #1e293b) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}
.clients-partners .section-title::after {
    background: currentColor !important; /* match heading color */
}

/* Infrastructure: keep heading and underline white */
.infrastructure .section-title {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
}
.infrastructure .section-title::after { background: #ffffff !important; }

/* ==========================================
   Products & Services: Category Distinction
   - Clear visual separation for each category section
   - Uses per-section variables set by ID to theme accents
   ========================================== */
/* Per-category theme variables */
#automobile-products { --cat-color: var(--brand-blue-dark); --cat-tint: rgba(28,55,97,0.06); }
#tube-products       { --cat-color: var(--brand-cyan-dark); --cat-tint: rgba(32,112,168,0.08); }
#bus-products        { --cat-color: var(--brand-maroon-dark); --cat-tint: rgba(128,29,29,0.07); }
#cmb-products        { --cat-color: var(--brand-blue-mid);  --cat-tint: rgba(44,82,139,0.08); }
#green-products      { --cat-color: #0f766e;                --cat-tint: rgba(15,118,110,0.08); }

/* Category section container: subtle band and left accent bar */
.product-category { padding: 32px 0 16px; position: relative; }
.product-category > .container {
    background: linear-gradient(180deg, var(--cat-tint, transparent), transparent 60%);
    border-left: 6px solid var(--cat-color, var(--brand-blue-mid));
    border-radius: 12px;
    padding: 18px max(16px, var(--page-gutter));
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.product-category + .product-category { margin-top: 4px; }

/* Category heading adjustments: left-aligned title, chip hidden for compact layout */
.product-category .section-title { position: relative; margin-top: 8px; text-align: left; display: inline-block; margin-right: 12px; vertical-align: middle; }
.product-category .section-title::before { display: none !important; content: none !important; }
/* Match product category heading size to the "Specialized Service" card headings on the homepage */
.product-category .section-title {
    font-size: 1.3rem; /* same as .insight-card h3 */
    font-weight: 600;
    line-height: 1.15;
}
/* Remove site-wide underline specifically for product category headings */
.product-category .section-title::after { display: none !important; }
/* Chip labels per category (hidden in compact layout) */
#automobile-products .section-title::before { content: 'Automotive'; }
#tube-products .section-title::before       { content: 'Tube & Hose'; }
#bus-products .section-title::before        { content: 'Bus HVAC'; }
#cmb-products .section-title::before        { content: 'CMB'; }
#green-products .section-title::before      { content: 'Green Energy'; }

/* Position subtitles: stack under the title for clearer hierarchy by default,
   center them, and style them for a refined look. On wide screens they
   return to an inline layout (narrower breakpoint to suit content). */
.product-category .section-subtitle {
    display: block;
    margin: 0.08rem 0 0 0; /* small gap beneath the title */
    text-align: left; /* left-align subtitle under the heading */
    font-size: 0.95rem;
    color: #475569;
    white-space: normal;
    line-height: 1.35;
    font-weight: 400; /* lighter for a softer, supportive tone */
    font-style: italic; /* elegant secondary text */
    max-width: 100%;
    font-family: var(--font-heading); /* closer typographic match to headings */
}

/* Product header wrapper: center stacked title + subtitle by default */
.product-header {
    display: flex;
    flex-direction: column; /* stack title above subtitle for clarity */
    align-items: flex-start; /* left-align by default */
    gap: 4px; /* tightened gap between title and subtitle */
    overflow: visible;
}
.product-header .section-title { margin: 0; }
.product-header .section-subtitle {
    margin: 0;
    white-space: normal;
    overflow: visible;
    opacity: 0.95;
    font-size: 0.95rem;
    color: #475569;
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    text-align: left;
}

/* Revert to inline (title + subtitle on one line) on wider viewports.
   Narrowed breakpoint and tightened max-width so subtitle remains secondary. */
@media (min-width: 880px) {
    .product-header { flex-direction: row; align-items: center; gap: 10px; justify-content: flex-start; }
    .product-category .section-subtitle { display: inline-block; margin-left: 8px; max-width: 55%; }
    .product-header .section-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .product-header .section-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* If subtitle is very long on tiny screens, allow it to shrink and show ellipsis */
@media (max-width: 420px) {
    .product-header .section-subtitle { max-width: 40%; }
    .product-header .section-title { max-width: 58%; }
}

/* Tinted accents on items and scrollbar to tie the section together */
.product-category .product-item { border-top: 3px solid var(--cat-color, var(--brand-blue-mid)); }
.product-category .product-item:hover { box-shadow: 0 12px 24px color-mix(in srgb, var(--cat-color, #1C3761) 18%, rgba(0,0,0,0.10)); }
.product-category .product-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--cat-color, #1C3761) 40%, #cbd5e1 60%); }

@supports not (color: color-mix(in srgb, white, black)) {
  /* Fallback hover shadow when color-mix is unsupported */
    .product-category .product-item:hover { box-shadow: 0 12px 24px rgba(28,55,97,0.16); }
}

/* Use heading color for all product category accents; remove category chips */
.product-category .section-title::before { display: none !important; content: none !important; }
.product-category > .container {
    color: var(--brand-blue-dark); /* align accent color with heading color */
    border-left-color: currentColor;
    background: linear-gradient(180deg, rgba(28,55,97,0.06), transparent 60%);
}
.product-category .product-item { border-top-color: currentColor; }
.product-category .product-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, currentColor 40%, #cbd5e1 60%);
}
@supports not (color: color-mix(in srgb, white, black)) {
    .product-category .product-scroll::-webkit-scrollbar-thumb { background: #a8b6cc; }
}

/* ==========================================
   Heading color overrides (solid #04233F)
   Applies to:
   - Homepage: Why Choose ENRAY (in .key-insights)
   - About: Our Executive Team (.team) and Why Choose (.why-choose)
   - Products: All category headings (.product-category)
   Resets gradient text fill and enforces a plain color.
   ========================================== */
.key-insights .section-title,
.team .section-title,
.why-choose .section-title,
.product-category .section-title {
    color: var(--heading-unified) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ==========================================
   Icon color unification
   Applies a consistent brand icon background color (#04233F)
   for icons in key insights (home), mission-vision (about),
   and why-choose (about), keeping the icon glyphs white.
   ========================================== */
.key-insights .insight-icon,
.mission-vision .mv-icon,
.why-choose .why-icon {
    background: transparent !important;
    color: #ffffff !important; /* icon glyphs stay white */
    box-shadow: none !important;
}

/* Preserve hover emphasis with unified tone */
.insight-card:hover .insight-icon,
.mv-card:hover .mv-icon {
    box-shadow: none !important;
}

/* ==========================================
   Image-based Icon Styling
   ========================================== */
.insight-icon img,
.mv-icon img,
.why-icon img {
    border-radius: 0;
    padding: 0;
    background: transparent !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Force transparent background for all icon containers */
.insight-icon,
.mv-icon,
.why-icon {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure PNG images with transparency display correctly */
.insight-icon img[src$=".png"],
.insight-icon img[src$=".png"],
.mv-icon img[src$=".PNG"],
.mv-icon img[src$=".png"],
.why-icon img[src$=".PNG"],
.why-icon img[src$=".png"] {
    background: transparent !important;
    background-color: transparent !important;
    mix-blend-mode: normal;
}

/* Fix square-shaped icon display by maintaining aspect ratio */
.insight-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.insight-card:hover .insight-icon img,
.mv-card:hover .mv-icon img,
.why-item:hover .why-icon img {
    transform: scale(1.05);
    background: transparent;
}

/* ==========================================
    Site-wide Heading Color Unification
    Sets all headings and their underlines to the brand mid-blue (#2C528B)
    while avoiding overwrite of intentionally white headings (those use stronger !important rules).
   ========================================== */
:root { --heading-unified: #2C528B; }

/* Apply unified color and remove gradient text effects */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .section-title {
    color: var(--heading-unified);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

/* Make infrastructure section underline white to preserve contrast against the dark infrastructure background */
.infrastructure .section-title::after {
    background: #ffffff !important;
}

/* Fix: Contact page address name brand color */
.contact-section .map-address strong {
    color: #2D3748 !important;
}

/* Remove previous special-case overrides so unified heading color applies everywhere */

/* Products page overrides: keep the products page background completely white.
   This is scoped to the `.products-page` body class so other pages remain unchanged.
   If you prefer to change scopes, update the selectors below. */
body.products-page, html.products-page {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
}
body.products-page .infrastructure,
body.products-page .industries,
body.products-page .map-section,
body.products-page .product-category,
/* removed .page-header here so product pages use the shared header styles like other pages */
body.products-page .clients-partners,
body.products-page .clients,
body.products-page .features {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
}
body.products-page .container,
body.products-page .modal-content {
    background: transparent !important;
}

/* ========================================================= */
/* Card Height & Spacing Normalization (Insights / Mission / Strengths) */
/* ========================================================= */
/* Goal: remove excess vertical space, ensure symmetrical heights per section,
   keep headings centered while paragraphs are justified for better readability. */
.key-insights .insight-card,
.mission-vision .mv-card,
.why-choose .why-item {
    padding: 2.2rem 2rem 2rem !important; /* tighter vertical space */
    min-height: 300px; /* uniform baseline height per section */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.key-insights .insight-card h3,
.mission-vision .mv-card h3,
.why-choose .why-item h4 {
    margin-bottom: 1rem !important;
    font-size: 1.25rem !important;
}

.key-insights .insight-card p,
.mission-vision .mv-card p,
.why-choose .why-item p {
    margin: 0 0 0.75rem !important;
    text-align: justify !important;
    text-align-last: left !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
}
.key-insights .insight-card p:last-child,
.mission-vision .mv-card p:last-child,
.why-choose .why-item p:last-child { margin-bottom: 0 !important; }

/* Ensure grids stretch children to same height */
.insights-grid,
.mv-grid,
.why-grid { align-items: stretch; }

/* Responsive font size for mobile devices */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    .hero-title {
        text-align: center;
        font-size: 3rem;
    }
    .hero-main {
        font-size: 3rem;
    }
    .hero {
        padding-top: 80px;
    }
    .clients-scroll-row1 {
        animation-duration: 15s;
    }
    .clients-scroll-row2 {
        animation-duration: 20s;
    }
}

/* For very small mobile screens */
@media (max-width: 480px) {
    .clients-scroll {
        gap: 1rem;
    }
    .client-logo {
        width: 100px;
        height: 60px;
    }
    .client-logo img {
        height: 50px !important;
        max-width: 90px !important;
    }
}

/* Hide second row on desktop */
@media (min-width: 769px) {
    .clients-scroll-row2 {
        display: none;
    }
}