/* Global Typography */
body {
    font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-transparent {
    background-color: transparent;
}

.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

.nav-logo {
    transition: all 0.3s ease;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0066CC;
    transition: width 0.3s ease;
}

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

/* ── Hero ────────────────────────────────────────────────────── */
#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 8rem;
}

.first_bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/content/Landingpage-bg.webp');
    background-size: 100%;
    background-position: center;
    z-index: 0;
}

.iso-badge {
    width: 140px;
    height: 60px;
    border: 1px solid rgba(0, 102, 204, 0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: pre-line;
    text-align: center;
    transition: all 0.3s ease;
    background: transparent;
}

.iso-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.25);
}

.iso-badges-container {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 10px;
    border-radius: 12px;
    background: transparent;
}

.hero-iso-block .iso-badges-container {
    margin-top: 0.35rem;
}

@media (max-width: 768px) {
    .iso-badges-container {
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }
}

/* ── Products ────────────────────────────────────────────────── */
#products {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.products-bg-top,
.products-bg-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 60%;
    background-size: 110% auto;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform 0.1s linear;
}

.products-bg-top {
    top: 0;
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 2%, rgba(255, 255, 255, 0) 5%),
        url('../images/content/Product bg.jpg');
    background-position: center top;
    z-index: -2;
}

.products-bg-bottom {
    bottom: 0;
    background-image: url('../images/content/product1.jpg');
    background-position: center bottom;
    z-index: -1;
}

.products-bg-middle {
    position: absolute;
    left: 0;
    right: 0;
    top: 33%;
    height: 34%;
    background-image: url('../images/content/product bg2.jpg');
    background-size: 110% auto;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    transition: opacity 0.3s, display 0.3s;
}

.product-image-carousel {
    position: relative;
    height: 12rem;
}

.carousel-arrow {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 9999px;
    padding: 0.25rem;
    z-index: 10;
    cursor: pointer;
    transition: background-color 0.2s;
}

.carousel-arrow:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Products sidebar */
.products-sidebar {
    top: 6rem;
    animation: sidebar-slide-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes sidebar-slide-in {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.products-sidebar-inner {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.products-sidebar-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.products-sidebar-inner:hover::before {
    left: 100%;
}

.products-sidebar-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    animation: header-fade-in 0.6s ease-out backwards 0.1s;
    position: relative;
    overflow: hidden;
}

@keyframes header-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.products-sidebar-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #2563eb, #4f46e5, #2563eb);
    animation: border-expand 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s;
}

@keyframes border-expand {
    from {
        width: 0;
        left: 0;
    }
    to {
        width: 100%;
        left: 0;
    }
}

.products-sidebar-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    animation: title-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 0.15s;
}

@keyframes title-slide-in {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.products-sidebar-title-icon {
    color: #2563eb;
    font-size: 0.85rem;
    animation: icon-spin-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 0.2s;
    display: inline-block;
}

@keyframes icon-spin-in {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.product-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Explore All button */
.product-category-header.product-category-all {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s, box-shadow 0.3s;
    animation: explore-all-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 0.25s;
    position: relative;
    overflow: hidden;
}

@keyframes explore-all-pop-in {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.product-category-header.product-category-all::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.3), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-category-header.product-category-all:hover::before {
    opacity: 1;
}

.product-category-header.product-category-all:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.45), 0 0 30px rgba(37, 99, 235, 0.2);
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.product-category-header.product-category-all:active {
    transform: scale(0.98);
}

.product-category-header.product-category-all.active {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-category-all-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

.product-category-all-inner i {
    font-size: 0.9rem;
    opacity: 0.9;
    animation: icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    display: inline-block;
}

@keyframes icon-bounce {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.1) translateY(-2px); }
}

.product-category-all-inner:hover i {
    animation: icon-pulse-glow 0.4s ease-out;
}

@keyframes icon-pulse-glow {
    0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0.8)); }
    100% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); }
}

.product-category-all-text {
    flex: 1;
    position: relative;
}

.product-category-all-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-category-header.product-category-all:hover .product-category-all-text::after {
    width: 100%;
}

.product-category-all-count {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.25);
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    animation: count-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 0.3s;
    transition: all 0.3s ease;
}

@keyframes count-pop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.product-category-header.product-category-all:hover .product-category-all-count {
    opacity: 1;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.08);
}

/* Category list items */
.product-category-header.product-category-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.65rem;
    background: #fafafa;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: category-item-fade-in 0.5s ease-out backwards;
    position: relative;
    overflow: hidden;
}

/* Staggered animation delays for each category item */
.product-category-header.product-category-item:nth-of-type(2) {
    animation-delay: 0.35s;
}

.product-category-header.product-category-item:nth-of-type(3) {
    animation-delay: 0.45s;
}

.product-category-header.product-category-item:nth-of-type(4) {
    animation-delay: 0.55s;
}

.product-category-header.product-category-item:nth-of-type(5) {
    animation-delay: 0.65s;
}

@keyframes category-item-fade-in {
    from {
        opacity: 0;
        transform: translateX(-25px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.product-category-header.product-category-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.product-category-header.product-category-item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.product-category-header.product-category-item:hover {
    background: linear-gradient(135deg, #f0f7ff 0%, #f1f5f9 100%);
    border-color: rgba(37, 99, 235, 0.35);
    color: #1e40af;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.product-category-header.product-category-item:active {
    transform: translateX(3px) scale(0.97);
}

.product-category-header.product-category-item .product-category-chevron {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-left: auto;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.product-category-header.product-category-item:hover .product-category-chevron {
    color: #2563eb;
    transform: translateX(3px) rotate(8deg);
    text-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY DROPDOWN MENU
═══════════════════════════════════════════════════════════════ */

.category-dropdown {
    max-height: 500px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-dropdown.hidden {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.category-dropdown-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 2px solid #e2e8f0;
    margin-left: 1rem;
    margin-top: 0.5rem;
    border-radius: 0.75rem;
}

.category-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    animation: dropdown-item-fade-in 0.3s ease backwards;
    overflow: hidden;
}

@keyframes dropdown-item-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.category-dropdown-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.category-dropdown-item:hover::before {
    opacity: 1;
}

.category-dropdown-item:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1e40af;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.category-dropdown-item.active {
    border-color: #2563eb;
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.category-dropdown-item-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.category-dropdown-item:hover .category-dropdown-item-dot {
    background: #2563eb;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
    transform: scale(1.5);
}

.category-dropdown-item.active .category-dropdown-item-dot {
    background: #2563eb;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.6);
}

.category-dropdown-item-label {
    flex: 1;
    transition: all 0.3s ease;
}

.category-dropdown-item-arrow {
    font-size: 0.6rem;
    color: #cbd5e1;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-dropdown-item:hover .category-dropdown-item-arrow {
    opacity: 1;
    transform: translateX(2px);
    color: #2563eb;
}

.product-category-header.product-category-item .product-category-chevron {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-left: auto;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.product-category-icon-wrap {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.product-category-icon-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-category-item:hover .product-category-icon-wrap::before {
    opacity: 1;
    animation: icon-shine 0.5s ease-out;
}

@keyframes icon-shine {
    0% { transform: translate(-100%, -100%); }
    100% { transform: translate(100%, 100%); }
}

.product-category-item--blue .product-category-icon-wrap { 
    background: #dbeafe; 
    color: #2563eb;
    animation: icon-color-in-blue 0.5s ease-out backwards;
}

@keyframes icon-color-in-blue {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.product-category-item--blue:hover .product-category-icon-wrap { 
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
    color: #1d4ed8;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.product-category-item--cyan .product-category-icon-wrap { 
    background: #cffafe; 
    color: #0891b2;
    animation: icon-color-in-cyan 0.5s ease-out backwards;
}

@keyframes icon-color-in-cyan {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.product-category-item--cyan:hover .product-category-icon-wrap { 
    background: linear-gradient(135deg, #a5f3fc, #cffafe);
    color: #0e7490;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.product-category-item--slate .product-category-icon-wrap { 
    background: #e2e8f0; 
    color: #475569;
    animation: icon-color-in-slate 0.5s ease-out backwards;
}

@keyframes icon-color-in-slate {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.product-category-item--slate:hover .product-category-icon-wrap { 
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    color: #334155;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.product-category-item--indigo .product-category-icon-wrap { 
    background: #e0e7ff; 
    color: #4f46e5;
    animation: icon-color-in-indigo 0.5s ease-out backwards;
}

@keyframes icon-color-in-indigo {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.product-category-item--indigo:hover .product-category-icon-wrap { 
    background: linear-gradient(135deg, #c7d2fe, #e0e7ff);
    color: #4338ca;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.product-category-header.product-category-item.active .product-category-icon-wrap {
    background: #2563eb;
    color: #fff;
    animation: icon-active-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

@keyframes icon-active-pulse {
    0% { transform: scale(0.8) rotate(-10deg); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1) rotate(0deg); }
}

.product-category-header.product-category-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.15);
    animation: active-pulse-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

@keyframes active-pulse-in {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.8);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.15);
    }
}

.product-category-header.product-category-item.active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: active-shimmer 2s ease-in-out infinite;
}

@keyframes active-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.product-category-header.product-category-item.active .product-category-chevron {
    color: rgba(255, 255, 255, 0.95);
    animation: chevron-spin 0.5s ease-out;
}

@keyframes chevron-spin {
    from { transform: rotate(-180deg) translateX(-5px); }
    to { transform: rotate(0deg) translateX(0px); }
}

.product-category-label {
    flex: 1;
    text-align: left;
    position: relative;
}

.product-category-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    transition: all 0.3s ease;
    animation: count-appear 0.4s ease-out backwards;
}

@keyframes count-appear {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.product-category-item:hover .product-category-count {
    color: #2563eb;
    transform: scale(1.1);
}

.product-category-item.active .product-category-count {
    color: rgba(255, 255, 255, 0.9);
}

/* Category panel (sub-menu) */
.category-panel {
    width: 18rem;
    max-height: min(28rem, calc(100vh - 4rem));
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.category-panel-inner {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: inherit;
    animation: panel-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes panel-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.category-panel-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #4f46e5, #2563eb);
    animation: panel-top-glow 2s ease-in-out infinite;
}

@keyframes panel-top-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.category-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #fafbfc 0%, #f8f9fb 100%);
    animation: header-slide-down 0.4s ease-out backwards 0.1s;
}

@keyframes header-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-panel-header-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.category-panel-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    animation: icon-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 0.15s;
    transition: all 0.3s ease;
}

@keyframes icon-pop-in {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.category-panel-header-info:hover .category-panel-icon {
    transform: scale(1.1) rotate(8deg);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.category-panel-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
    animation: title-fade-in 0.4s ease-out backwards 0.2s;
}

@keyframes title-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.category-panel-count {
    font-size: 0.7rem;
    color: #6b7280;
    margin: 0.15rem 0 0 0;
    animation: count-fade-in 0.4s ease-out backwards 0.25s;
}

@keyframes count-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.category-panel-close {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: button-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards 0.3s;
}

@keyframes button-pop {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-90deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.category-panel-close:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.category-panel-close:active {
    transform: scale(0.95);
}

.category-panel-items {
    padding: 0.5rem;
    overflow-y: auto;
    max-height: 20rem;
}

.category-panel-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(4px) translateX(-10px);
    animation: item-slide-in 0.4s ease-out forwards;
    position: relative;
    overflow: hidden;
}

@keyframes item-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px) translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

/* Stagger delays for panel items */
.category-panel-item:nth-child(1) { animation-delay: 0.1s; }
.category-panel-item:nth-child(2) { animation-delay: 0.15s; }
.category-panel-item:nth-child(3) { animation-delay: 0.2s; }
.category-panel-item:nth-child(4) { animation-delay: 0.25s; }
.category-panel-item:nth-child(5) { animation-delay: 0.3s; }
.category-panel-item:nth-child(n+6) { animation-delay: 0.35s; }

.category-panel-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.4s ease;
}

.category-panel-item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.category-panel-item:hover {
    background: linear-gradient(135deg, #f0f7ff 0%, #f1f5f9 100%);
    color: #2563eb;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.category-panel-item.is-active {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    animation: item-active-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes item-active-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    }
}

.category-panel-item-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: all 0.3s ease;
    animation: dot-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes dot-pop {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.category-panel-item:hover .category-panel-item-dot,
.category-panel-item.is-active .category-panel-item-dot {
    background: #2563eb;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
    transform: scale(1.3);
}

/* Product cards */
.product-card {
    border-radius: 1rem;
    position: relative;
    animation: fade-in 0.4s ease-out backwards;
    perspective: none;
}

.product-card:nth-child(1) { animation-delay: 0s; }
.product-card:nth-child(2) { animation-delay: 0.08s; }
.product-card:nth-child(3) { animation-delay: 0.16s; }
.product-card:nth-child(n+4) { animation-delay: 0.24s; }

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1px;
    background: transparent;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.product-card:hover::before {
    opacity: 0;
    animation: none;
}

.product-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 1rem;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.product-card:hover::after {
    opacity: 0;
}

/* Simple Hover Effect */
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}



.product-card-image {
    border-radius: 1rem 1rem 0 0;
    position: relative;
    overflow: hidden;
}

/* Enhanced Image Zoom with Blur Effect */
.product-card .card-img {
    transition: opacity 0.2s ease, transform 0.3s ease;
}

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

/* Dynamic Overlay Gradient on Image */
.product-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.product-card-gallery-badge {
    z-index: 5;
    position: relative;
}

.product-card-body {
    border-radius: 0 0 1rem 1rem;
}

.product-card-title {
    font-family: 'Outfit', sans-serif;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    color: #1e293b;
}

.product-card:hover .product-card-title {
    color: #1d4ed8;
}

.product-card-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    width: 0;
    background: #1d4ed8;
    transition: width 0.3s ease;
    border-radius: 1px;
}

.product-card:hover .product-card-title::after {
    width: 100%;
}

.product-card p {
    transition: color 0.3s ease;
}

.product-card:hover p {
    color: #6b7280;
}

.product-card-badge {
    display: inline-block;
    position: relative;
    animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transition: all 0.3s ease;
}

@keyframes badge-pop {
    from {
        opacity: 0;
        transform: scale(0.6) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.product-card:hover .product-card-badge {
    transform: scale(1.08);
}

.product-card-badge::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.product-card:hover .product-card-badge::before {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out infinite;
}

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

.product-card-badge--blue {
    color: #9bb3e7;
    background-color: rgba(239, 246, 255, 0.9);
    border-color: rgba(191, 219, 254, 0.8);
}

.product-card-badge--cyan {
    color: #0891b2;
    background-color: rgba(236, 254, 255, 0.95);
    border-color: rgba(165, 243, 252, 0.8);
}

.product-card-badge--slate {
    color: #475569;
    background-color: rgba(241, 245, 249, 0.95);
    border-color: rgba(203, 213, 225, 0.8);
}

.product-card-badge--indigo {
    color: #4f46e5;
    background-color: rgba(238, 242, 255, 0.95);
    border-color: rgba(199, 210, 254, 0.8);
}

.product-card-spec-teaser {
    line-height: 1.3;
    position: relative;
    transition: all 0.3s ease;
    animation: spec-fade-in 0.5s ease-out backwards 0.2s;
}

@keyframes spec-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Enhanced Icon Animation */
.product-card-spec-teaser i {
    transition: all 0.3s ease;
    display: inline-block;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0));
    background-size: 200% 100%;
}

.product-card:hover .product-card-spec-teaser {
    color: #a9b9dd;
    transform: translateX(4px);
    animation: spec-shift 0.3s ease-out;
}

@keyframes spec-shift {
    from {
        transform: translateX(0);
        opacity: 0.8;
    }
    to {
        transform: translateX(4px);
        opacity: 1;
    }
}

.product-card:hover .product-card-spec-teaser i {
    filter: drop-shadow(0 0 8px rgba(205, 217, 242, 0.6));
    transform: rotate(8deg) scale(1.2);
}

.product-card-title {
    font-family: 'Outfit', sans-serif;
}

.product-card-cta-icon {
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-card-cta-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .product-card-cta-icon::before {
    opacity: 1;
    animation: glow-pulse 0.5s ease-out;
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(166, 173, 189, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* Enhanced CTA Icon with Floating Animation */
.product-card-cta-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    animation: none;
}

.product-card:hover .product-card-cta-icon::after {
    opacity: 0;
}

.product-card:hover .product-card-cta-icon {
    transform: translateX(5px) scale(1.15) rotate(-8deg) translateY(-2px);
    box-shadow: 0 8px 16px rgba(145, 159, 190, 0.4), 0 0 20px rgba(79, 70, 229, 0.2);
    animation: icon-float 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

@keyframes icon-float {
    from { transform: translateX(5px) scale(1.15) rotate(-8deg) translateY(-2px); }
    to { transform: translateX(5px) scale(1.15) rotate(-8deg) translateY(-6px); }
}

@keyframes ripple-expand {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* Icon Glow Effect for Navbar */
.nav-link i,
.product-category-header i,
.category-panel-header i,
.category-panel-item i {
    position: relative;
    background: radial-gradient(circle at var(--icon-x, 50%) var(--icon-y, 50%), rgba(255, 255, 255, 0.8), transparent 60%);
    transition: background 0.3s ease;
}

/* Enhanced navbar link hover effects */
.navbar-inner .nav-link:hover {
    position: relative;
}

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

/* Enhanced dropdown item hover effects */
.dropdown-item:hover {
    background: linear-gradient(135deg, #f0f7ff 0%, #f1f5f9 100%);
    border-color: rgba(37, 99, 235, 0.35);
    color: #1e40af;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.dropdown-item:hover .fas {
    color: #2563eb;
    text-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

/* Enhanced nested dropdown hover effects */
.nested-dropdown:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.nested-dropdown .nested-item:hover {
    background: #eff6ff;
    color: #1e40af;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR DROPDOWN ENHANCEMENTS - SIDEBAR STYLE
═══════════════════════════════════════════════════════════════ */

/* Main dropdown container styling */
.dropdown-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    animation: dropdown-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    position: relative;
}

@keyframes dropdown-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown top border gradient */
.dropdown-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #4f46e5, #2563eb);
    animation: panel-top-glow 2s ease-in-out infinite;
}

@keyframes panel-top-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Main dropdown items styling */
.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(4px) translateX(-10px);
    animation: item-slide-in 0.4s ease-out forwards;
    position: relative;
    overflow: hidden;
}

@keyframes item-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px) translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

/* Stagger delays for main dropdown items */
.dropdown-item:nth-child(1) { animation-delay: 0.1s; }
.dropdown-item:nth-child(2) { animation-delay: 0.15s; }
.dropdown-item:nth-child(3) { animation-delay: 0.2s; }
.dropdown-item:nth-child(4) { animation-delay: 0.25s; }

.dropdown-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.4s ease;
}

.dropdown-item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.dropdown-item:hover {
    background: linear-gradient(135deg, #f0f7ff 0%, #f1f5f9 100%);
    color: #2563eb;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

/* Icon styling for main dropdown items */
.dropdown-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.dropdown-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dropdown-item:hover .dropdown-icon::before {
    opacity: 1;
    animation: icon-shine 0.5s ease-out;
}

@keyframes icon-shine {
    0% { transform: translate(-100%, -100%); }
    100% { transform: translate(100%, 100%); }
}

/* Category item color variants */
.icon-blue { 
    background: #dbeafe; 
    color: #2563eb;
    animation: icon-color-in-blue 0.5s ease-out backwards;
}

@keyframes icon-color-in-blue {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.icon-blue:hover { 
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
    color: #1d4ed8;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.icon-cyan { 
    background: #cffafe; 
    color: #0891b2;
    animation: icon-color-in-cyan 0.5s ease-out backwards;
}

@keyframes icon-color-in-cyan {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.icon-cyan:hover { 
    background: linear-gradient(135deg, #a5f3fc, #cffafe);
    color: #0e7490;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.icon-slate { 
    background: #e2e8f0; 
    color: #475569;
    animation: icon-color-in-slate 0.5s ease-out backwards;
}

@keyframes icon-color-in-slate {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.icon-slate:hover { 
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    color: #334155;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.icon-indigo { 
    background: #e0e7ff; 
    color: #4f46e5;
    animation: icon-color-in-indigo 0.5s ease-out backwards;
}

@keyframes icon-color-in-indigo {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.icon-indigo:hover { 
    background: linear-gradient(135deg, #c7d2fe, #e0e7ff);
    color: #4338ca;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Nested dropdown styling */
.nested-dropdown {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-left: 2px solid #e2e8f0;
    margin-left: 1rem;
    margin-top: 0.5rem;
    animation: panel-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    position: relative;
    overflow: hidden;
}

.nested-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #4f46e5, #2563eb);
    animation: panel-top-glow 2s ease-in-out infinite;
}

/* Nested dropdown items */
.nested-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(4px) translateX(-10px);
    animation: item-slide-in 0.4s ease-out forwards;
    position: relative;
    overflow: hidden;
}

/* Stagger delays for nested dropdown items */
.nested-item:nth-child(1) { animation-delay: 0.1s; }
.nested-item:nth-child(2) { animation-delay: 0.15s; }
.nested-item:nth-child(3) { animation-delay: 0.2s; }
.nested-item:nth-child(4) { animation-delay: 0.25s; }
.nested-item:nth-child(5) { animation-delay: 0.3s; }
.nested-item:nth-child(n+6) { animation-delay: 0.35s; }

.nested-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.4s ease;
}

.nested-item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.nested-item:hover {
    background: linear-gradient(135deg, #f0f7ff 0%, #f1f5f9 100%);
    color: #2563eb;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

/* Enhanced hover states for nested items */
.nested-item:hover {
    background: linear-gradient(135deg, #eff6ff 0%, #f1f5f9 100%);
    color: #1e40af;
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* Service dropdown items */
.service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(4px) translateX(-10px);
    animation: item-slide-in 0.4s ease-out forwards;
    position: relative;
    overflow: hidden;
}

/* Service icon styling */
.icon-amber { 
    background: #fffbeb; 
    color: #d97706;
    animation: icon-color-in-amber 0.5s ease-out backwards;
}

@keyframes icon-color-in-amber {
    from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.icon-amber:hover { 
    background: linear-gradient(135deg, #fed7aa, #fffbeb);
    color: #b45309;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}

.icon-cyan { 
    background: #cffafe; 
    color: #0891b2;
    animation: icon-color-in-cyan 0.5s ease-out backwards;
}

.icon-cyan:hover { 
    background: linear-gradient(135deg, #a5f3fc, #cffafe);
    color: #0e7490;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.icon-slate { 
    background: #f8fafc; 
    color: #64748b;
    animation: icon-color-in-slate 0.5s ease-out backwards;
}

.icon-slate:hover { 
    background: linear-gradient(135deg, #e2e8f0, #f8fafc);
    color: #475569;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

.icon-indigo { 
    background: #e0e7ff; 
    color: #4f46e5;
    animation: icon-color-in-indigo 0.5s ease-out backwards;
}

.icon-indigo:hover { 
    background: linear-gradient(135deg, #c7d2fe, #e0e7ff);
    color: #4338ca;
    transform: scale(1.15) rotate(15deg);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Enhanced ripple effect for navbar dropdowns */
.navbar-inner .dropdown-item,
.navbar-inner .nested-item {
    position: relative;
    overflow: hidden;
}

.navbar-inner .dropdown-item::after,
.navbar-inner .nested-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
}

/* Enhanced icon glow for navbar dropdowns */
.navbar-inner .dropdown-item .fas,
.navbar-inner .nested-item .fas {
    position: relative;
    background: radial-gradient(circle at var(--icon-x, 50%) var(--icon-y, 50%), rgba(255, 255, 255, 0.8), transparent 60%);
    transition: background 0.3s ease;
}

/* Enhanced dropdown container with sidebar-style animations */
.dropdown-container {
    animation: dropdown-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transform-origin: top;
    overflow: hidden;
}

.dropdown-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.dropdown-container:hover::after {
    opacity: 0.6;
    animation: gradient-drift 3s ease infinite;
}

@keyframes gradient-drift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* Enhanced nested dropdown container */
.nested-dropdown {
    animation: panel-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    transform-origin: left;
    overflow: hidden;
}

.nested-dropdown::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.nested-dropdown:hover::after {
    opacity: 0.6;
    animation: gradient-drift 3s ease infinite;
}

/* Enhanced text styling for navbar dropdowns */
.dropdown-title {
    font-family: 'Outfit', sans-serif;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    color: #1e293b;
}

.dropdown-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    width: 0;
    background: #1d4ed8;
    transition: width 0.3s ease;
    border-radius: 1px;
}

.dropdown-item:hover .dropdown-title::after {
    width: 100%;
}

.dropdown-subtitle {
    transition: color 0.3s ease;
}

.dropdown-item:hover .dropdown-subtitle {
    color: #6b7280;
}

/* Enhanced chevron animations */
.dropdown-chevron {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.dropdown-item:hover .dropdown-chevron {
    color: #2563eb;
    transform: translateX(3px) rotate(8deg);
    text-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

/* Enhanced nested dropdown text styling */
.nested-title {
    font-family: 'Inter', sans-serif;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    color: #475569;
}

.nested-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1px;
    width: 0;
    background: #2563eb;
    transition: width 0.3s ease;
    border-radius: 1px;
}

.nested-item:hover .nested-title::after {
    width: 100%;
}

.nested-item:hover .nested-title {
    color: #1e40af;
}

/* Enhanced hover states with sidebar-style effects */
.dropdown-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);
}

.nested-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.1);
}

/* Enhanced active states */
.dropdown-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.15);
    animation: active-pulse-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

@keyframes active-pulse-in {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.8);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.15);
    }
}

.dropdown-item.active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: active-shimmer 2s ease-in-out infinite;
}

@keyframes active-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Enhanced nested dropdown active states */
.nested-item.active {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    animation: item-active-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes item-active-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    }
}

/* Enhanced scrollbar for nested dropdowns */
.nested-dropdown .scrollable::-webkit-scrollbar {
    width: 6px;
}

.nested-dropdown .scrollable::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}

.nested-dropdown .scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563eb, #4f46e5);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.nested-dropdown .scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1d4ed8, #4338ca);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

/* Discovery / Category Cards Animations */
.group[class*="category"] {
    animation: category-float-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.group[class*="category"]:hover {
    animation-play-state: paused;
}

@keyframes category-float-in {
    from {
        opacity: 0;
        transform: translateY(50px) rotateX(5deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* Rainbow border pulse for category cards */
.group[class*="border"] {
    position: relative;
}

.group[class*="border"]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, #aeb8ce, #4f46e5, #b9c7e7);
    background-size: 300% auto;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.group[class*="border"]:hover::before {
    opacity: 0.6;
    animation: gradient-drift 3s ease infinite;
}

@keyframes gradient-drift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@keyframes cta-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED PRODUCT CARD CAROUSEL & DOT ANIMATIONS
═══════════════════════════════════════════════════════════════ */

/* Animated dots for image carousel */
.product-card .dot {
    animation: dot-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.product-card .dot:nth-child(1) { animation-delay: 0s; }
.product-card .dot:nth-child(2) { animation-delay: 0.08s; }
.product-card .dot:nth-child(3) { animation-delay: 0.16s; }
.product-card .dot:nth-child(4) { animation-delay: 0.24s; }

@keyframes dot-bounce {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.product-card .dot {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-card .dot:not(.bg-blue-600) {
    animation: dot-pulse-idle 2s ease-in-out infinite;
}

@keyframes dot-pulse-idle {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.product-card .dot.bg-blue-600 {
    animation: dot-active-glow 0.4s ease-out;
}

@keyframes dot-active-glow {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
}

/* Navigation arrow buttons enhanced */
.product-card .nav-prev,
.product-card .nav-next {
    position: relative;
    overflow: hidden;
}

.product-card .nav-prev::before,
.product-card .nav-next::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    opacity: 0;
    animation: nav-shine 0.6s ease-out;
    pointer-events: none;
}

.product-card:hover .nav-prev::before,
.product-card:hover .nav-next::before {
    opacity: 1;
}

@keyframes nav-shine {
    from {
        transform: translate(-100%, -100%);
    }
    to {
        transform: translate(100%, 100%);
    }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR EXPAND/COLLAPSE ANIMATIONS
══════════════════════════════════════════════════════════════ */

.product-sub-items {
    animation: items-expand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top;
    overflow: hidden;
}

.product-sub-items.hidden {
    animation: items-collapse 0.4s ease-out;
    animation-fill-mode: forwards;
}

@keyframes items-expand {
    from {
        opacity: 0;
        max-height: 0;
        transform: scaleY(0.8);
    }
    to {
        opacity: 1;
        max-height: 300px;
        transform: scaleY(1);
    }
}

@keyframes items-collapse {
    from {
        opacity: 1;
        max-height: 300px;
        transform: scaleY(1);
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: scaleY(0.8);
    }
}

.product-sub-item {
    animation: subitem-fade-in 0.3s ease-out backwards;
}

.product-sub-item:nth-child(1) { animation-delay: 0s; }
.product-sub-item:nth-child(2) { animation-delay: 0.05s; }
.product-sub-item:nth-child(3) { animation-delay: 0.1s; }
.product-sub-item:nth-child(4) { animation-delay: 0.15s; }
.product-sub-item:nth-child(5) { animation-delay: 0.2s; }

@keyframes subitem-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.product-sub-item:hover {
    transform: translateX(3px);
}

/* Sidebar scrollbar styling */
.category-panel-items::-webkit-scrollbar {
    width: 6px;
}

.category-panel-items::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}

.category-panel-items::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563eb, #4f46e5);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.category-panel-items::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1d4ed8, #4338ca);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

.product-card:hover .product-card-cta-icon {
    transform: translateX(5px) scale(1.15) rotate(-8deg);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.4);
}

/* ── Services ────────────────────────────────────────────────── */
#services {
    background: transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.services-bg-top,
.services-bg-bottom,
.services-bg-middle {
    position: absolute;
    left: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform 0.1s linear;
}

.services-bg-top {
    top: 0;
    height: 50%;
    background-image: url('../images/content/service bg.jpg');
    background-position: center top;
    z-index: -3;
}

.services-bg-bottom {
    bottom: 0;
    height: 50%;
    background-image: url('../images/content/service bg1.jpg');
    background-position: center bottom;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ── Clients ─────────────────────────────────────────────────── */
#clients {
    position: relative;
    overflow: hidden;
    margin-top: -3rem;
    padding-top: 3rem;
    min-height: 800px;
    background: none;
    z-index: 1;
}

.clients-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 2%,
            rgba(255, 255, 255, 0.7) 5%, rgba(255, 255, 255, 0.6) 8%,
            rgba(255, 255, 255, 0.5) 12%, rgba(255, 255, 255, 0.4) 16%,
            rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.2) 25%,
            rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 35%),
        url('../images/content/client bg.jpg');
    background-size: 110% auto;
    background-position: center top;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform 0.1s linear;
    z-index: -1;
}

.clients-carousel-container {
    background: rgba(255, 255, 255, 0.1) !important;
    position: relative;
    z-index: 2;
}

.overlay-left {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent) !important;
}

.overlay-right {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.2), transparent) !important;
}

.client-logo {
    filter: grayscale(0) saturate(100%) !important;
    -webkit-filter: grayscale(0) saturate(100%) !important;
    opacity: 1 !important;
}

.client-logo-box {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}

.client-logo-box:hover {
    transform: scale(1.05);
}

/* ── Animations & Reveals ────────────────────────────────────── */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
}

.reveal-slide-up {
    transform: translateY(40px);
}

.reveal-slide-up.active {
    transform: translateY(0);
}

.reveal-slide-right {
    transform: translateX(-40px);
}

.reveal-slide-right.active {
    transform: translateX(0);
}

.reveal-slide-left {
    transform: translateX(40px);
}

.reveal-slide-left.active {
    transform: translateX(0);
}

.reveal-fade {
    transform: scale(0.95);
}

.reveal-fade.active {
    transform: scale(1);
}

.reveal-delay-100 {
    transition-delay: 100ms;
}

.reveal-delay-200 {
    transition-delay: 200ms;
}

.reveal-delay-300 {
    transition-delay: 300ms;
}

.reveal-delay-400 {
    transition-delay: 400ms;
}

.reveal-delay-500 {
    transition-delay: 500ms;
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD ACCENT ANIMATIONS
═══════════════════════════════════════════════════════════════ */

/* Floating particle effect */
@keyframes particle-float {
    0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translateY(-30px) translateX(15px) scale(0.5); opacity: 0; }
}

.product-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
}

/* Corner highlights for premium feel */
.product-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.3), transparent 40%);
    pointer-events: none;
    transition: all 0.3s ease;
    opacity: 0;
}

.product-card:hover::after {
    opacity: 1;
}

/* Text reveal animation for card title on hover */
.product-card-title {
    overflow: hidden;
    position: relative;
}

.product-card-gallery-badge {
    animation: badge-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes badge-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

/* Pulsing glow for image on hover */
.product-card:hover .product-card-image {
    box-shadow: inset 0 0 30px rgba(37, 99, 235, 0.2), 0 0 40px rgba(37, 99, 235, 0.15);
}

/* Staggered animation for product badges on card */
.product-card-badge {
    animation-delay: 0.1s;
}

.product-card-badge:nth-of-type(2) {
    animation-delay: 0.2s;
}

/* Navigation buttons enhanced animation */
.product-card .nav-next,
.product-card .nav-prev {
    animation: button-pulse 2s ease-in-out infinite;
    opacity: 0 !important;
    animation-play-state: paused;
}

.product-card:hover .nav-next,
.product-card:hover .nav-prev {
    opacity: 100% !important;
    animation-play-state: running;
}

@keyframes button-pulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2);
    }
    50% { 
        transform: scale(1.08);
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    }
}

/* CTA text animation */
.product-card .product-card-cta {
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    background-size: 200% 100%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

.product-card .product-card-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.product-card:hover .product-card-cta {
    animation: cta-shimmer 1.5s ease-in-out infinite;
    border-top-color: rgba(59, 130, 246, 0.5);
}

.product-card:hover .product-card-cta::before {
    transform: translateX(100%);
    animation: cta-flow 1.5s ease-in-out infinite;
}

@keyframes cta-flow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Border Animation Lines */
.product-card {
    border: 1px solid rgba(59, 130, 246, 0);
}

.product-card::before {
    animation: border-glow 2s ease infinite;
}

@keyframes border-glow {
    0%, 100% { 
        border-color: rgba(59, 130, 246, 0);
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0);
    }
    50% { 
        border-color: rgba(59, 130, 246, 0.1);
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.05);
    }
}


/* ═══════════════════════════════════════════════════════════════
   ENHANCED CONTACT — WHITE THEME SYSTEM  (cw- prefix)
═══════════════════════════════════════════════════════════════ */

#contact {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: #ffffff;
}

/* Clean white background with subtle texture */
.cw-bg-texture {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(99, 102, 241, 0.03) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(148, 163, 184, 0.02) 0%, transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.9));
    pointer-events: none;
    opacity: 0.8;
}

/* Enhanced gradient text for white theme */
.cw-gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Gradient text helper */
.cw-gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Shell ───────────────────────────────────────────────────── */
.cw-shell {
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.05),
        0 20px 48px rgba(0, 0, 0, 0.07),
        0 40px 80px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.5s ease;
}

.cw-shell:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 24px 56px rgba(0, 0, 0, 0.09),
        0 48px 96px rgba(0, 0, 0, 0.06);
}

/* ── Title Bar ───────────────────────────────────────────────── */
.cw-titlebar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    user-select: none;
}

/* Brand header (replaces macOS dots) */
.cw-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cw-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
    flex-shrink: 0;
}

.cw-header-title {
    font-size: 13px;
    font-weight: 900;
    color: #1e293b;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.01em;
    line-height: 1;
}

.cw-header-sub {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 2px;
    letter-spacing: 0.02em;
}


/* Tabs */
.cw-tabs {
    display: flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 3px;
}

.cw-tab {
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cw-tab:hover {
    color: #374151;
}

.cw-tab-active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Right side of titlebar */
.cw-titlebar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cw-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cw-status-online {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    animation: cw-ping 2s ease-in-out infinite;
}

.cw-status-offline {
    background: #94a3b8;
}

@keyframes cw-ping {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
}

.cw-status-label {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cw-ref-badge {
    font-size: 9px;
    font-weight: 700;
    background: rgba(37, 99, 235, 0.08);
    color: #3b82f6;
    border: 1px solid rgba(37, 99, 235, 0.15);
    padding: 3px 8px;
    border-radius: 5px;
    letter-spacing: 0.04em;
}

/* ── Body ────────────────────────────────────────────────────── */
.cw-body {
    overflow: hidden;
}

/* ── Left Panel ──────────────────────────────────────────────── */
.cw-left-panel {
    padding: 24px 20px;
    background: linear-gradient(180deg, #fafbfc 0%, #f8f9fb 100%);
    border-right: 1px solid #f0f4f8;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Availability badge */
.cw-avail-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.cw-avail-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: cw-ping 2s ease-in-out infinite;
    flex-shrink: 0;
}

.cw-avail-offline {
    background: #94a3b8;
    animation: none;
    box-shadow: none;
}

/* Stats row */
.cw-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}

.cw-stat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    transition: all 0.25s ease;
}

.cw-stat:hover {
    border-color: #bfdbfe;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
    transform: translateY(-1px);
}

.cw-stat-value {
    font-size: 14px;
    font-weight: 900;
    color: #1e40af;
    font-family: 'Outfit', sans-serif;
}

.cw-stat-label {
    font-size: 8px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Section dividers */
.cw-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
}

.cw-divider::before,
.cw-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.cw-divider span {
    font-size: 8px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Contact cards */
.cw-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cw-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    border: 1px solid #f0f4f8;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.cw-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.1);
}

.cw-card-blue:hover {
    border-color: #bfdbfe;
}

.cw-card-indigo:hover {
    border-color: #c7d2fe;
}

.cw-card-green:hover {
    border-color: #bbf7d0;
}

.cw-card-amber:hover {
    border-color: #fed7aa;
}

.cw-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}

.cw-card:hover .cw-card-icon {
    transform: scale(1.12);
}

.cw-card-body {
    flex: 1;
    min-width: 0;
}

.cw-card-label {
    font-size: 8px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cw-card-value {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.cw-card-sub {
    font-size: 9px;
    color: #94a3b8;
    margin-top: 1px;
}

.cw-card-arrow {
    font-size: 9px;
    color: #cbd5e1;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.cw-card:hover .cw-card-arrow {
    color: #3b82f6;
    transform: translateX(3px);
}

/* Business hours */
.cw-hours-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 6px;
}

.cw-hour-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 2px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.cw-hour-today {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.15);
}

.cw-hour-abbr {
    font-size: 7px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cw-hour-today .cw-hour-abbr {
    color: #2563eb;
}

.cw-hour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.cw-open {
    background: #22c55e;
}

.cw-closed {
    background: #e2e8f0;
}

.cw-hours-note {
    font-size: 9px;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 14px;
}

/* Social */
.cw-social-row {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

.cw-social-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.cw-social-btn:hover {
    background: #2563eb;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ── Center Panel (Form) ─────────────────────────────────────── */
.cw-center-panel {
    position: relative;
    background: linear-gradient(150deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
    padding: 28px 26px;
    overflow: hidden;
}

/* Ambient glows */
.cw-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    opacity: 0.6;
    display: block;
}

.cw-glow-a {
    width: 200px;
    height: 200px;
    background: rgba(59, 130, 246, 0.12);
    top: -60px;
    right: -40px;
}

.cw-glow-b {
    width: 160px;
    height: 160px;
    background: rgba(99, 102, 241, 0.10);
    bottom: -40px;
    left: -30px;
}

/* Form header */
.cw-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.cw-form-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cw-form-accent {
    display: inline-block;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    flex-shrink: 0;
}

.cw-form-sub {
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
    margin-left: 11px;
}

/* Progress steps */
.cw-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
}

.cw-step span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.08);
    color: #4b5563;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.35s ease;
}

.cw-step-label {
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4b5563;
    white-space: nowrap;
    transition: color 0.35s ease;
}

.cw-step-active span {
    background: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.cw-step-active .cw-step-label {
    color: #60a5fa;
}

.cw-step-done span {
    background: #22c55e;
    color: #fff;
    border-color: #16a34a;
}

.cw-step-done .cw-step-label {
    color: #4ade80;
}

.cw-step-line {
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 14px;
    flex-shrink: 0;
}

/* Form grid */
.cw-form {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cw-form-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Field */
.cw-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
    margin-left: 2px;
}

.cw-required {
    color: #f87171;
}

.cw-input-wrap {
    position: relative;
}

.cw-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #475569;
    pointer-events: none;
    transition: color 0.3s ease;
}

.cw-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    padding: 10px 36px 10px 34px;
    color: #f1f5f9;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-input::placeholder {
    color: #334155;
}

.cw-input:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.14);
}

.cw-input:focus {
    background: rgba(255, 255, 255, 0.11);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 2px 8px rgba(59, 130, 246, 0.1);
}

.cw-input:focus~.cw-input-icon,
.cw-input-wrap:focus-within .cw-input-icon {
    color: #60a5fa;
}

/* Checkmark indicator */
.cw-input-check {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cw-check-visible {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Select */
.cw-select {
    appearance: none;
    cursor: pointer;
}

.cw-select option {
    background: #1e293b;
    color: #f1f5f9;
}

.cw-select-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: #475569;
    pointer-events: none;
}

.cw-textarea {
    resize: none;
    min-height: 90px;
}

/* Char count */
.cw-charcount {
    font-size: 9px;
    font-weight: 700;
    color: #6b7280;
    transition: color 0.3s ease;
}

/* Upload zone */
.cw-upload-zone {
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
    cursor: pointer;
}

.cw-upload-zone:hover,
.cw-upload-dragover {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.05);
}

.cw-upload-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.cw-upload-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(59, 130, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: 14px;
    flex-shrink: 0;
}

.cw-upload-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cw-upload-text span {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
}

.cw-upload-text small {
    font-size: 8px;
    color: #475569;
}

.cw-upload-link {
    color: #60a5fa;
    cursor: pointer;
    font-weight: 700;
}

.cw-upload-link:hover {
    text-decoration: underline;
}

.cw-file-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 12px 10px;
}

.cw-file-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 7px;
}

.cw-file-remove {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.cw-file-remove:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Submit button */
.cw-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 13px 28px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    flex-shrink: 0;
}

.cw-submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.cw-submit-btn:hover::before {
    transform: translateX(100%);
}

.cw-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
}

.cw-submit-btn:active {
    transform: scale(0.97);
}

.cw-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Autofill styles */
.cw-input:-webkit-autofill,
.cw-input:-webkit-autofill:hover,
.cw-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9;
    -webkit-box-shadow: 0 0 0px 1000px #1e293b inset;
    transition: background-color 5000s;
}

/* Success overlay */
.cw-success-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #4f46e5 100%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-success-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}

.cw-success-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 18px;
    animation: cw-success-pulse 2s ease-in-out infinite;
}

@keyframes cw-success-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
    }
}

.cw-success-title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.cw-success-sub {
    font-size: 12px;
    color: #bfdbfe;
    margin-bottom: 4px;
}

.cw-success-ref {
    font-size: 10px;
    color: rgba(191, 219, 254, 0.7);
    margin-bottom: 24px;
}

.cw-success-ref strong {
    color: #fff;
}

.cw-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cw-reset-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ── Right Panel ─────────────────────────────────────────────── */
.cw-right-panel {
    padding: 24px 20px;
    background: #fff;
    border-left: 1px solid #f0f4f8;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Map */
.cw-map-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
}

.cw-map-frame {
    border-radius: 14px;
    overflow: hidden;
    height: 145px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.cw-map-frame:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.cw-map-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    filter: grayscale(25%) saturate(80%);
    transition: filter 0.5s ease;
}

.cw-map-frame:hover iframe {
    filter: grayscale(0%) saturate(100%);
}

.cw-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 9px;
    font-weight: 800;
    color: #2563eb;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: gap 0.2s ease;
}

.cw-map-btn:hover {
    gap: 8px;
    text-decoration: underline;
}

/* FAQ (compact — right panel) */
.cw-faq-block {
    flex: 1;
}

.cw-faq-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cw-faq-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.cw-faq-title {
    font-size: 11px;
    font-weight: 900;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
}

.cw-faq-sub {
    font-size: 8px;
    color: #94a3b8;
    margin-top: 2px;
}

.cw-faq-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cw-faq-item {
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
}

.cw-faq-item:hover {
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cw-faq-item[open] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.cw-faq-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.cw-faq-summary::-webkit-details-marker {
    display: none;
}

.cw-faq-num {
    font-size: 8px;
    font-weight: 900;
    color: #94a3b8;
    background: #f1f5f9;
    min-width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cw-faq-item[open] .cw-faq-num {
    background: #2563eb;
    color: #fff;
}

.cw-faq-q {
    flex: 1;
    font-size: 10px;
    font-weight: 700;
    color: #374151;
    line-height: 1.4;
}

.cw-faq-item[open] .cw-faq-q {
    color: #1d4ed8;
}

.cw-faq-toggle {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cw-faq-item[open] .cw-faq-toggle {
    background: #2563eb;
    color: #fff;
    border-color: #1d4ed8;
    transform: rotate(45deg);
}

.cw-faq-answer {
    padding: 0 10px 10px 37px;
    animation: cw-faq-drop 0.3s ease-out;
}

.cw-faq-answer p {
    font-size: 10px;
    color: #64748b;
    line-height: 1.55;
}

@keyframes cw-faq-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quick CTA block */
.cw-cta-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 14px;
    flex-shrink: 0;
}

.cw-cta-ico {
    font-size: 18px;
    color: #60a5fa;
    flex-shrink: 0;
}

.cw-cta-text {
    flex: 1;
}

.cw-cta-text strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

.cw-cta-text span {
    font-size: 9px;
    color: #64748b;
}

.cw-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.cw-cta-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* ── FAQ Tab (full panel) ─────────────────────────────────────── */
.cw-faq-full-item {
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
}

.cw-faq-full-item:hover {
    border-color: #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.cw-faq-full-item[open] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.cw-faq-full-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.cw-faq-full-summary::-webkit-details-marker {
    display: none;
}

.cw-faq-full-num {
    font-size: 9px;
    font-weight: 900;
    color: #94a3b8;
    background: #f1f5f9;
    min-width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cw-faq-full-item[open] .cw-faq-full-num {
    background: #2563eb;
    color: #fff;
}

.cw-faq-full-q {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
}

.cw-faq-full-item[open] .cw-faq-full-q {
    color: #1d4ed8;
}

.cw-faq-full-answer {
    padding: 0 16px 14px 50px;
    animation: cw-faq-drop 0.3s ease-out;
}

.cw-faq-full-answer p {
    font-size: 12px;
    color: #475569;
    line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cw-shell {
        border-radius: 16px;
    }

    .cw-left-panel {
        border-right: none;
        border-bottom: 1px solid #f0f4f8;
    }

    .cw-right-panel {
        border-left: none;
        border-top: 1px solid #f0f4f8;
    }

    .cw-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .cw-form-header {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .cw-form-grid2 {
        grid-template-columns: 1fr;
    }

    .cw-titlebar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
    }

    .cw-titlebar-right {
        width: 100%;
        justify-content: flex-end;
    }

    .cw-steps {
        display: none;
    }
}

@media (max-width: 640px) {
    .cw-shell {
        border-radius: 14px;
    }

    .cw-left-panel,
    .cw-right-panel {
        padding: 18px 14px;
    }

    .cw-center-panel {
        padding: 20px 14px;
    }

    .cw-map-frame {
        height: 110px;
    }
}

@media print {
    .cw-shell {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .cw-center-panel,
    .cw-map-frame {
        display: none;
    }
}
/* ===== 2026 AAMCO Modern Industrial Design System ===== */
:root{--ink:#071321;--ink-2:#102437;--blue:#0875e1;--electric:#2d9cff;--paper:#f4f2ed;--white:#fff;--muted:#687584;--line:rgba(7,19,33,.12)}
html{scroll-behavior:smooth}.modern-site{background:var(--paper);color:var(--ink);overflow-x:hidden}.modern-site .container{max-width:1320px}.modern-site section{scroll-margin-top:76px}
.site-nav{height:76px;color:white;transition:.35s ease}.nav-shell{height:100%;display:flex;align-items:center;gap:46px}.nav-brand{margin-right:auto}.nav-logo{width:132px;height:auto;filter:brightness(0) invert(1)}.nav-links{align-items:center;gap:34px}.nav-links a{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:.2s}.nav-links a:hover{color:white}.nav-cta{align-items:center;gap:12px;padding:12px 18px;border:1px solid rgba(255,255,255,.32);border-radius:100px;color:white;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.nav-scrolled{height:68px;background:rgba(7,19,33,.94);backdrop-filter:blur(20px);box-shadow:0 12px 36px rgba(0,0,0,.14)}.menu-toggle{width:42px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.menu-toggle span{width:16px;height:1px;background:#fff}.mobile-menu{position:absolute;top:100%;left:12px;right:12px;background:var(--ink);padding:16px;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.mobile-menu a{display:block;padding:13px 12px;color:white;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
.menu-toggle{display:none}
@media(max-width:767px){.menu-toggle{display:flex}}
.hero-modern{position:relative;min-height:100vh;background:var(--ink);color:white;overflow:hidden;display:flex;align-items:flex-end}.hero-media{position:absolute;inset:0 0 0 43%;overflow:hidden}.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(7,19,33,.96) 38%,rgba(7,19,33,.35) 72%,rgba(7,19,33,.12)),linear-gradient(0deg,rgba(7,19,33,.78),transparent 45%)}.hero-grid{position:absolute;inset:0;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,#000,transparent 75%)}.hero-inner{position:relative;z-index:2;padding-top:150px;padding-bottom:76px;display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:end;gap:72px}.hero-copy{max-width:760px}.eyebrow{display:flex;align-items:center;gap:13px;color:#9fcfff;text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:800;margin-bottom:28px}.eyebrow span{width:34px;height:2px;background:var(--electric)}.hero-copy h1{font-size:clamp(64px,7.2vw,116px);line-height:.84;letter-spacing:-.065em;font-weight:800;text-transform:uppercase}.hero-copy h1 em{color:var(--electric);font-style:normal}.hero-copy p{max-width:610px;margin-top:32px;color:#b6c2ce;font-size:17px;line-height:1.65}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:34px}.hero-primary{display:inline-flex;align-items:center;gap:24px;background:var(--blue);color:white;padding:17px 22px;border-radius:4px;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.12em;box-shadow:0 16px 40px rgba(8,117,225,.25)}.hero-primary:hover{background:var(--electric);transform:translateY(-2px)}.hero-secondary{color:white;border-bottom:1px solid rgba(255,255,255,.4);padding:12px 0;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.12em}.hero-proof{border-left:1px solid rgba(255,255,255,.2);padding-left:34px;display:grid;grid-template-columns:1fr 1fr;gap:26px}.hero-proof>div{display:flex;flex-direction:column}.hero-proof strong{font-size:40px;letter-spacing:-.04em}.hero-proof span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;line-height:1.5;color:#9aaabc}.hero-proof .cert-row{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}.cert-row img{height:28px;max-width:82px;object-fit:contain;background:white;border-radius:3px;padding:2px}.scroll-cue{position:absolute;right:30px;bottom:30px;z-index:3;color:white;display:flex;gap:12px;align-items:center;writing-mode:vertical-rl}.scroll-cue span{font-size:9px;text-transform:uppercase;letter-spacing:.28em}
/* Shared editorial styling over the retained content and behavior */
#products,#services,#clients,#our-story{background:var(--paper)!important;padding-top:110px!important;padding-bottom:110px!important}#services,#our-story{background:#fff!important}.modern-site h2[class*="tracking"],.modern-site h3[class*="tracking"]{font-style:normal!important}.modern-site h2.text-xs,.modern-site h2.text-\[10px\]{color:var(--blue)!important}.modern-site h3.text-4xl,.modern-site h3.text-5xl{font-size:clamp(42px,5vw,72px)!important;line-height:.95!important;letter-spacing:-.045em!important}.products-sidebar-inner{border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:none!important;background:#fff!important}.product-category-header{border-radius:10px!important}.modern-site #products-grid{gap:18px!important}.modern-site #products-grid>div,.modern-site #services-grid>div{border-radius:18px!important;box-shadow:0 10px 30px rgba(7,19,33,.06)!important;border:1px solid rgba(7,19,33,.08)!important}.modern-site #products-grid>div:hover,.modern-site #services-grid>div:hover{transform:translateY(-6px)!important;box-shadow:0 22px 50px rgba(7,19,33,.12)!important}.modern-site #services-grid{gap:18px!important}.modern-site #services-grid>div>div:first-child{height:250px!important}.modern-site #clients{overflow:hidden}.modern-site #clients-marquee>div>div>div{border-radius:14px!important;box-shadow:none!important;border:1px solid var(--line)!important}.modern-site #our-story #gallery-grid>div{border-radius:16px!important;box-shadow:none!important}.modern-site footer{background:var(--ink)!important}.modern-site .cw-shell{border-radius:20px!important;box-shadow:0 30px 80px rgba(7,19,33,.12)!important;overflow:hidden}.modern-site .cw-center-panel{background:var(--ink)!important}.modern-site .btn-primary,.modern-site .cw-submit-btn{background:var(--blue)!important;border-radius:4px!important}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;padding-top:130px;padding-bottom:60px}.hero-proof{max-width:560px}.hero-media{left:20%}.hero-shade{background:linear-gradient(90deg,var(--ink) 0%,rgba(7,19,33,.9) 65%,rgba(7,19,33,.35))}.scroll-cue{display:none}}
@media(max-width:640px){.site-nav{height:66px}.nav-logo{width:112px}.hero-modern{min-height:820px}.hero-media{inset:0}.hero-shade{background:linear-gradient(0deg,var(--ink) 12%,rgba(7,19,33,.88) 70%,rgba(7,19,33,.4))}.hero-inner{padding-top:120px;padding-bottom:42px;gap:42px}.hero-copy h1{font-size:51px;line-height:.89}.hero-copy p{font-size:14px}.hero-actions{align-items:flex-start;gap:16px;flex-direction:column}.hero-proof{padding-left:20px;gap:18px}.hero-proof strong{font-size:32px}#products,#services,#clients,#our-story{padding-top:74px!important;padding-bottom:74px!important}.modern-site h3.text-4xl,.modern-site h3.text-5xl{font-size:39px!important}.modern-site #products-grid,.modern-site #services-grid{gap:14px!important}}

/* Larger hero certification marks */
.hero-proof .cert-row{gap:16px}
.hero-proof .cert-row img{height:54px;max-width:120px;border-radius:6px;padding:5px}
@media(max-width:640px){.hero-proof .cert-row img{height:44px;max-width:96px}}

/* Reference-matched slogan typography */
.hero-copy h1{font-family:'Archivo Black','Arial Black',sans-serif;text-transform:none;letter-spacing:-.065em;font-weight:400}

/* Cinematic pinned-scroll capability sequence */
.scroll-story{height:420vh;position:relative;background:#05090e;color:#fff;z-index:4}
.scroll-story-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#05090e}
.scroll-frame{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s cubic-bezier(.22,1,.36,1),visibility .8s;isolation:isolate}
.scroll-frame.is-active{opacity:1;visibility:visible;z-index:2}
.scroll-frame-media{position:absolute;inset:0 0 0 42%;overflow:hidden;transform:scale(1.08);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
.scroll-frame.is-active .scroll-frame-media{transform:scale(1)}
.scroll-frame-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08)}
.scroll-frame-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#05090e 0%,rgba(5,9,14,.98) 34%,rgba(5,9,14,.58) 62%,rgba(5,9,14,.14)),linear-gradient(0deg,rgba(5,9,14,.82),transparent 55%);z-index:1}
.scroll-frame-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.scroll-frame-content>p{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.32em;color:var(--electric);margin-bottom:22px;opacity:0;transform:translateY(22px);transition:.65s .12s ease}
.scroll-frame-content h2{font-family:'Archivo Black','Arial Black',sans-serif;font-size:clamp(90px,15vw,260px);line-height:.72;letter-spacing:-.075em;color:#fff;opacity:0;transform:translateY(70px);transition:.9s .05s cubic-bezier(.22,1,.36,1)}
.scroll-frame-content h2.metal-title{display:flex;align-items:baseline;gap:clamp(2px,.28vw,5px);letter-spacing:0!important;white-space:nowrap}
.scroll-frame-content h2.metal-title>span{display:inline-block;flex:0 0 auto}
.scroll-frame-detail{width:min(410px,90%);margin-top:56px;margin-left:42%;opacity:0;transform:translateY(40px);transition:.8s .28s cubic-bezier(.22,1,.36,1)}
.scroll-frame-detail h3{font-size:clamp(24px,2.5vw,40px);line-height:1;letter-spacing:-.035em;margin-bottom:16px}.scroll-frame-detail p{font-size:13px;line-height:1.65;color:#aeb8c2}.scroll-frame-detail a{display:inline-flex;align-items:center;gap:18px;margin-top:23px;color:#fff;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:9px}
.scroll-frame.is-active .scroll-frame-content>p,.scroll-frame.is-active .scroll-frame-content h2,.scroll-frame.is-active .scroll-frame-detail{opacity:1;transform:translateY(0)}
.scroll-frame-index{position:absolute;right:4vw;top:14vh;z-index:2;font:400 clamp(80px,12vw,190px)/1 'Archivo Black',sans-serif;color:rgba(255,255,255,.06)}
.scroll-story-topline{position:absolute;z-index:5;left:0;right:0;top:94px;display:flex;justify-content:space-between;padding:0 3.1vw;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.24em;color:rgba(255,255,255,.52)}
.scroll-story-progress{position:absolute;z-index:5;top:126px;left:3.1vw;right:3.1vw;height:1px;background:rgba(255,255,255,.15)}.scroll-story-progress i{display:block;width:100%;height:100%;background:var(--electric);transform:scaleX(0);transform-origin:left center;will-change:transform}
.scroll-story-counter{position:absolute;z-index:5;right:3.1vw;bottom:38px;display:flex;align-items:center;gap:12px;font-size:10px;font-weight:900;letter-spacing:.2em}.scroll-story-counter i{width:38px;height:1px;background:rgba(255,255,255,.35)}.scroll-story-counter .current{color:var(--electric)}
@media(max-width:760px){.scroll-story{height:340vh}.scroll-frame-media{inset:0}.scroll-frame-overlay{background:linear-gradient(0deg,#05090e 0%,rgba(5,9,14,.92) 50%,rgba(5,9,14,.32))}.scroll-frame-content{justify-content:flex-end;padding-bottom:100px}.scroll-frame-content h2{font-size:clamp(66px,23vw,120px)}.scroll-frame-detail{margin:34px 0 0;width:100%}.scroll-frame-index{top:18vh}.scroll-story-topline{top:78px}.scroll-story-progress{top:106px}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.scroll-story-sticky{position:relative;height:auto}.scroll-frame{position:relative;min-height:90vh;opacity:1;visibility:visible}.scroll-frame-media,.scroll-frame-content>p,.scroll-frame-content h2,.scroll-frame-detail{transform:none;opacity:1}.scroll-story-progress,.scroll-story-counter{display:none}}

/* Enlarged brand and aligned company details */
.nav-logo{width:184px}
.hero-inner{grid-template-columns:minmax(0,1fr) 430px}
.hero-meta{align-self:end;width:100%;display:flex;flex-direction:column;gap:18px}
.hero-proof{align-self:end;width:100%;padding:24px 26px;border:1px solid rgba(255,255,255,.18);border-left:3px solid var(--electric);border-radius:12px;background:rgba(7,19,33,.76);backdrop-filter:blur(18px);box-shadow:0 22px 55px rgba(0,0,0,.22);gap:20px 28px}
.hero-approval-logo{align-self:end;width:100%;padding:0;border:0;background:transparent}.hero-approval-logo img{display:block;width:100%;height:164px;object-fit:contain;filter:brightness(1.42) saturate(.95) drop-shadow(0 10px 18px rgba(0,0,0,.22))}
.hero-proof .hero-proof-title{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14);font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.hero-proof-title>span{width:24px;height:2px;background:var(--electric)}
.hero-proof>div:not(.hero-proof-title):not(.cert-row){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
.hero-proof strong{font-size:46px;line-height:1;color:#fff}
.hero-proof>div>span{line-height:1.55}
.hero-proof .cert-row{justify-content:flex-start;gap:14px;margin-top:2px;padding-top:18px}
.hero-meta>.cert-row{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:0;background:transparent;border:0}
@media(max-width:1100px){.hero-inner{grid-template-columns:1fr}.hero-meta,.hero-proof{max-width:520px}.nav-logo{width:160px}}
@media(max-width:640px){.nav-logo{width:142px}.hero-proof{padding:20px;gap:16px}.hero-proof strong{font-size:36px}.hero-approval-logo img{height:136px}.hero-proof>div:not(.hero-proof-title):not(.cert-row){grid-template-columns:1fr;gap:6px}}

/* Extend the dark hero field across the unused center space */
@media(min-width:901px){
    .hero-media{inset:0 0 0 52%}
    .hero-shade{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 52%,rgba(7,19,33,.98) 61%,rgba(7,19,33,.62) 74%,rgba(7,19,33,.12) 100%),linear-gradient(0deg,rgba(7,19,33,.78),transparent 45%)}
    .hero-copy{max-width:830px}
}

/* Modern conversion-focused footer */
.site-footer{position:relative;overflow:hidden;background:#030f1c!important;color:#fff;padding:0!important}
.footer-grid-lines{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(125,203,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(125,203,255,.18) 1px,transparent 1px),linear-gradient(rgba(125,203,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(125,203,255,.07) 1px,transparent 1px);background-size:80px 80px,80px 80px,20px 20px,20px 20px;background-position:0 0;mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%);pointer-events:none}
.footer-wrap{position:relative;z-index:1}.footer-cta{min-height:390px;display:flex;align-items:center;justify-content:space-between;gap:50px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer-kicker{display:flex;align-items:center;gap:12px;margin-bottom:28px;color:#9acaff;font-size:10px;font-weight:900;letter-spacing:.26em;text-transform:uppercase}.footer-kicker i{width:30px;height:2px;background:var(--electric)}
.footer-cta h2{font-family:'Archivo Black','Arial Black',sans-serif;font-size:clamp(56px,7vw,112px);line-height:.86;letter-spacing:-.065em;font-weight:400}.footer-cta h2 em{font-style:normal;color:var(--electric)}
.footer-cta h2.footer-project-title{font-family:'Outfit','Arial',sans-serif;font-size:clamp(42px,4.2vw,80px);line-height:1;letter-spacing:-.045em;font-style:italic;font-weight:900;white-space:nowrap}.footer-cta h2.footer-project-title em{color:var(--electric);font:inherit}.footer-cta h2.footer-project-title span{color:#fff;font:inherit}
@media(max-width:900px){.footer-cta h2.footer-project-title{white-space:normal;font-size:clamp(44px,8vw,72px)}.footer-cta h2.footer-project-title em,.footer-cta h2.footer-project-title span{display:block}}
.footer-cta-button{width:178px;height:178px;border-radius:50%;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex-shrink:0;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;transition:.4s cubic-bezier(.22,1,.36,1)}.footer-cta-button:hover{background:var(--electric);transform:rotate(-6deg) scale(1.06)}
.footer-main{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.35fr;gap:46px;padding:80px 0}.footer-brand img{width:230px;height:auto;margin-bottom:25px}.footer-brand p{max-width:360px;color:#7f8d9c;font-size:13px;line-height:1.7}.footer-socials{display:flex;gap:10px;margin-top:28px}.footer-socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#aab5c0;transition:.25s}.footer-socials a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-3px)}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.footer-column>span{color:#667789;font-size:9px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px}.footer-column a{color:#dce4eb;font-size:13px;font-weight:700;transition:.2s}.footer-column a:hover{color:var(--electric);transform:translateX(4px)}.footer-contact p{color:#768696;font-size:12px;line-height:1.7;margin-top:7px}
.footer-bottom{min-height:88px;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;color:#536273;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.footer-live{display:flex;align-items:center;gap:9px}.footer-live i{width:7px;height:7px;background:#39d98a;border-radius:50%;box-shadow:0 0 0 5px rgba(57,217,138,.08)}.footer-live strong{color:#fff}.footer-bottom p{text-align:center}.footer-bottom button{justify-self:end;display:flex;align-items:center;gap:12px;color:#8291a0;text-transform:uppercase;transition:.2s}.footer-bottom button:hover{color:#fff}
@media(max-width:850px){.footer-cta{min-height:430px;align-items:flex-start;justify-content:center;flex-direction:column}.footer-cta-button{width:132px;height:132px}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{grid-template-columns:1fr;justify-items:start;padding:25px 0;gap:16px}.footer-bottom p{text-align:left}.footer-bottom button{justify-self:start}}
@media(max-width:520px){.footer-cta h2{font-size:50px}.footer-main{grid-template-columns:1fr;padding:60px 0}.footer-brand{grid-column:auto}.footer-brand img{width:190px}}

/* Large circular ISO certification marks */
.hero-meta>.cert-row{gap:18px}
.hero-meta>.cert-row img{width:76px;height:76px;max-width:none;padding:0;background:transparent;border-radius:50%;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.22)}
@media(max-width:640px){.hero-meta>.cert-row img{width:62px;height:62px;max-width:none}}

/* Animated client showcase */
.modern-site #clients{--client-x:50%;--client-y:50%;background:#071321!important;color:#fff;position:relative;padding-top:125px!important;padding-bottom:110px!important}
#clients .clients-spotlight{position:absolute;inset:0;background:radial-gradient(520px circle at var(--client-x) var(--client-y),rgba(45,156,255,.16),transparent 68%);pointer-events:none;transition:opacity .3s}
#clients .absolute.inset-0.opacity-10{display:none}
#clients h2{color:#55aaff!important}
#clients h3{color:#fff!important;max-width:980px;margin-left:auto;margin-right:auto}
#clients h3 span{color:var(--electric)!important}
#clients .container>div.flex.flex-wrap{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 18px 60px rgba(0,0,0,.18)!important;padding:20px 32px!important;gap:0!important}
#clients .container>div.flex.flex-wrap>div{min-width:180px;padding:0 26px;border-right:1px solid rgba(255,255,255,.12)}
#clients .container>div.flex.flex-wrap>div:last-child{border-right:0}
#clients .client-stat-value{color:#fff!important;font-size:34px!important}.client-stat-value{font-variant-numeric:tabular-nums}
#clients .client-stat-value+span{color:#6f8296!important}
.clients-orbit{position:absolute;border:1px solid rgba(45,156,255,.13);border-radius:50%;pointer-events:none;animation:clientOrbit 16s linear infinite}
.clients-orbit::before,.clients-orbit::after{content:'';position:absolute;border-radius:50%;background:var(--electric);box-shadow:0 0 22px var(--electric)}
.clients-orbit-a{width:520px;height:520px;left:-250px;top:80px}.clients-orbit-a::before{width:7px;height:7px;right:54px;top:70px}
.clients-orbit-b{width:360px;height:360px;right:-180px;bottom:40px;animation-direction:reverse;animation-duration:12s}.clients-orbit-b::after{width:5px;height:5px;left:30px;bottom:80px}
@keyframes clientOrbit{to{transform:rotate(360deg)}}
#clients .marquee-container{gap:4px!important;padding:55px 0 70px!important;perspective:1200px}
#clients .marquee-track-top>div:first-child,#clients .marquee-track-bottom>div:first-child{background:linear-gradient(90deg,#071321,transparent)!important;width:180px!important}
#clients .marquee-track-top>div:nth-child(2),#clients .marquee-track-bottom>div:nth-child(2){background:linear-gradient(270deg,#071321,transparent)!important;width:180px!important}
#clients .animate-marquee-fast{animation-duration:26s!important}
#clients .animate-marquee-slow{animation-duration:38s!important;animation-direction:reverse}
#clients .marquee-track-bottom{transform:translateX(-80px)}
#clients .marquee-container .group{width:190px!important;height:132px!important;background:rgba(255,255,255,.95)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:16px!important;box-shadow:0 14px 40px rgba(0,0,0,.22)!important;animation:clientFloat 4.5s ease-in-out infinite;animation-delay:calc(var(--logo-index,0) * -.2s);transform-style:preserve-3d}
#clients .marquee-container .group:nth-child(3n+2){animation-delay:-1.5s}#clients .marquee-container .group:nth-child(3n){animation-delay:-3s}
#clients .marquee-container .group:hover{animation-play-state:paused;transform:translateY(-12px) rotateX(6deg) scale(1.08)!important;box-shadow:0 30px 65px rgba(45,156,255,.25)!important;z-index:10}
#clients .marquee-container .group::after{content:'';position:absolute;inset:-1px;border-radius:16px;background:linear-gradient(120deg,transparent 30%,rgba(45,156,255,.28),transparent 70%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
#clients .marquee-container .group:hover::after{transform:translateX(120%)}
@keyframes clientFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
#clients .marquee-controls{display:none!important}
@media(max-width:700px){#clients .container>div.flex.flex-wrap{width:100%!important;display:grid!important;grid-template-columns:1fr!important}#clients .container>div.flex.flex-wrap>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:15px 8px}#clients .container>div.flex.flex-wrap>div:last-child{border-bottom:0}#clients .marquee-container .group{width:150px!important;height:105px!important}.clients-orbit{display:none}}
@media(prefers-reduced-motion:reduce){.clients-orbit,#clients .marquee-container .group{animation:none!important}#clients .animate-marquee-fast,#clients .animate-marquee-slow{animation-duration:80s!important}}

/* Site-wide scroll motion layer */
.site-scroll-progress{position:fixed;z-index:9999;top:0;left:0;width:100%;height:3px;background:rgba(255,255,255,.08);pointer-events:none}.site-scroll-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--blue),var(--electric));transform:scaleX(0);transform-origin:left center;box-shadow:0 0 14px rgba(45,156,255,.55);will-change:transform}
.scroll-heading{clip-path:inset(0 0 100% 0);transform:translateY(34px);opacity:.1;transition:clip-path 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),opacity .7s ease}.scroll-heading.scroll-in{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:1}
.scroll-depth-card{opacity:0;translate:0 45px;scale:.96;filter:blur(4px);transition:opacity .75s var(--scroll-delay) ease,translate .9s var(--scroll-delay) cubic-bezier(.22,1,.36,1),scale .9s var(--scroll-delay) cubic-bezier(.22,1,.36,1),filter .75s var(--scroll-delay) ease,box-shadow .4s ease!important}.scroll-depth-card.scroll-in{opacity:1;translate:0 0;scale:1;filter:blur(0)}
.hero-media img,#services-grid img,#our-story #gallery-grid img{will-change:translate;transition:translate .12s linear}
@media(prefers-reduced-motion:reduce){.site-scroll-progress{display:none}.scroll-heading,.scroll-depth-card{clip-path:none;transform:none;translate:none;scale:1;filter:none;opacity:1;transition:none!important}.hero-media img,#services-grid img,#our-story #gallery-grid img{translate:none!important;transition:none}}

/* Keep the primary footer message continuously visible */
.site-footer .footer-cta h2,.site-footer .footer-cta h2.scroll-heading{clip-path:none;transform:none;opacity:1}

/* Keep section headings visible; their parent sections already reveal on scroll */
.scroll-heading{clip-path:none;transform:none;opacity:1}

/* Animated piping maze in the opening hero */
.pipe-maze{position:absolute;z-index:1;inset:76px 38% 0 0;overflow:hidden;opacity:.42;pointer-events:none;mask-image:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.22) 72%,transparent)}
.pipe-line{position:absolute;display:block;background:rgba(80,169,255,.13);box-shadow:0 0 0 1px rgba(80,169,255,.08);border-radius:999px}
.pipe-line::before{content:'';position:absolute;inset:2px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(45,156,255,.18),rgba(255,255,255,.03));border-radius:inherit}
.pipe-line>i{position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:#8dcbff;box-shadow:0 0 7px #2d9cff,0 0 18px #2d9cff}
.pipe-h{height:7px}.pipe-h>i{top:0;left:-8px;animation:pipeFlowH var(--flow-speed,5s) linear infinite}.pipe-v{width:7px}.pipe-v::before{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(45,156,255,.18),rgba(255,255,255,.03))}.pipe-v>i{left:0;top:-8px;animation:pipeFlowV var(--flow-speed,5s) linear infinite}
.pipe-h1{left:-3%;top:15%;width:43%;--flow-speed:5.2s}.pipe-v1{left:39%;top:15%;height:24%;--flow-speed:3.8s}.pipe-h2{left:39%;top:38.5%;width:35%;--flow-speed:4.6s}.pipe-v2{left:73%;top:38.5%;height:29%;--flow-speed:4.1s}.pipe-h3{left:18%;top:67%;width:56%;--flow-speed:6s}.pipe-v3{left:18%;top:53%;height:14.5%;--flow-speed:2.8s}.pipe-h4{left:18%;top:52.5%;width:24%;--flow-speed:3.5s}
.pipe-h2>i,.pipe-h4>i{animation-direction:reverse}.pipe-v2>i{animation-direction:reverse}
.pipe-node{position:absolute;width:19px;height:19px;border:4px solid rgba(45,156,255,.35);background:#071321;border-radius:50%;box-shadow:0 0 0 5px rgba(45,156,255,.05)}.pipe-n1{left:calc(39% - 6px);top:calc(15% - 6px)}.pipe-n2{left:calc(73% - 6px);top:calc(38.5% - 6px)}.pipe-n3{left:calc(18% - 6px);top:calc(52.5% - 6px)}
.pipe-valve{position:absolute;width:34px;height:34px;border:1px solid rgba(45,156,255,.35);border-radius:50%;background:rgba(7,19,33,.82);animation:pipeValve 7s linear infinite}.pipe-valve::before,.pipe-valve::after{content:'';position:absolute;left:50%;top:4px;width:1px;height:24px;background:rgba(119,190,255,.5);transform-origin:center}.pipe-valve::after{transform:rotate(90deg)}.pipe-valve i{position:absolute;inset:8px;border:1px solid rgba(45,156,255,.4);border-radius:50%}.pipe-valve-1{left:calc(58% - 17px);top:calc(38.5% - 14px)}.pipe-valve-2{left:calc(31% - 17px);top:calc(67% - 14px);animation-direction:reverse;animation-duration:9s}
@keyframes pipeFlowH{from{left:-8px}to{left:calc(100% + 2px)}}@keyframes pipeFlowV{from{top:-8px}to{top:calc(100% + 2px)}}@keyframes pipeValve{to{transform:rotate(360deg)}}
.hero-modern:hover .pipe-maze{opacity:.58;transition:opacity .6s ease}
@media(max-width:900px){.pipe-maze{inset:66px 0 0 0;opacity:.24;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 80%)}}
@media(prefers-reduced-motion:reduce){.pipe-line>i,.pipe-valve{animation:none}.pipe-maze{opacity:.18}}

/* Animated MEP technical drawing in the opening hero */
.mep-drawing{position:absolute;z-index:1;inset:76px 35% 0 0;overflow:hidden;opacity:.44;pointer-events:none;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 66%,transparent 100%)}
.mep-blueprint-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(72,166,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(72,166,255,.11) 1px,transparent 1px),linear-gradient(rgba(72,166,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(72,166,255,.05) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;animation:mepGridFade 6s ease-in-out infinite}
.mep-scan{position:absolute;z-index:8;top:0;bottom:0;width:120px;background:linear-gradient(90deg,transparent,rgba(45,156,255,.09),rgba(128,207,255,.22),transparent);filter:blur(3px);animation:mepScan 8s linear infinite}
.mep-wall{position:absolute;display:block;background:rgba(151,207,255,.24);box-shadow:0 0 8px rgba(45,156,255,.13)}.mep-wall-h{height:2px;transform:scaleX(0);transform-origin:left;animation:mepDrawX 9s cubic-bezier(.22,1,.36,1) infinite}.mep-wall-v{width:2px;transform:scaleY(0);transform-origin:top;animation:mepDrawY 9s cubic-bezier(.22,1,.36,1) infinite}.wall-1{left:8%;top:14%;width:72%;animation-delay:.1s}.wall-2{left:8%;top:14%;height:65%;animation-delay:.35s}.wall-3{left:8%;top:79%;width:62%;animation-delay:.6s}.wall-4{left:70%;top:33%;height:46%;animation-delay:.85s}.wall-5{left:32%;top:33%;width:38%;animation-delay:1.1s}.wall-6{left:32%;top:14%;height:19%;animation-delay:1.35s}
.mep-duct{position:absolute;display:block;border:5px double rgba(101,190,255,.35);border-radius:3px;box-sizing:border-box;transform-origin:left center}.duct-main{left:13%;top:43%;width:58%;height:22px;transform:scaleX(0);animation:mepDrawX 9s .8s cubic-bezier(.22,1,.36,1) infinite}.duct-main>i{position:absolute;left:5%;right:5%;top:50%;height:1px;background:repeating-linear-gradient(90deg,#64b9ff 0 5px,transparent 5px 12px);animation:mepAir 1.2s linear infinite}.duct-branch-a{left:47%;top:30%;width:20px;height:15%;transform:scaleY(0);transform-origin:bottom;animation:mepDrawY 9s 1.3s cubic-bezier(.22,1,.36,1) infinite}.duct-branch-b{left:63%;top:43%;width:20px;height:20%;transform:scaleY(0);animation:mepDrawY 9s 1.6s cubic-bezier(.22,1,.36,1) infinite}
.mep-pipe{position:absolute;display:block;height:4px;border-top:1px solid rgba(72,181,255,.8);border-bottom:1px solid rgba(72,181,255,.42);transform:scaleX(0);transform-origin:left;animation:mepDrawX 9s 1.6s cubic-bezier(.22,1,.36,1) infinite}.mep-pipe>i{position:absolute;width:6px;height:6px;top:-2px;border-radius:50%;background:#8cd0ff;box-shadow:0 0 10px #2d9cff;animation:mepPipeFlow 3.4s linear infinite}.pipe-chw-a{left:18%;top:59%;width:48%}.pipe-chw-b{left:18%;top:62%;width:42%;animation-delay:1.9s}.pipe-chw-b>i{animation-direction:reverse}.pipe-drop{left:65.7%;top:59%;width:17%;transform-origin:left;transform:rotate(90deg) scaleX(0);animation:mepDrawPipeDrop 9s 2.2s cubic-bezier(.22,1,.36,1) infinite}
.mep-electric{position:absolute;display:block;height:2px;background:repeating-linear-gradient(90deg,rgba(255,198,74,.62) 0 4px,transparent 4px 10px);transform:scaleX(0);transform-origin:left;animation:mepDrawX 9s 2.1s cubic-bezier(.22,1,.36,1) infinite}.electrical-a{left:16%;top:71%;width:46%}.electrical-b{left:54%;top:24%;width:22%;transform:rotate(90deg) scaleX(0);animation:mepDrawElectricDrop 9s 2.45s cubic-bezier(.22,1,.36,1) infinite}
.mep-symbol{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;opacity:0;animation:mepSymbolIn 9s 2.8s ease infinite}.mep-fan{left:43%;top:23%;width:45px;height:45px;border:2px solid rgba(104,190,255,.55);border-radius:50%}.mep-fan::before,.mep-fan::after,.mep-fan i{content:'';position:absolute;width:3px;height:34px;background:rgba(104,190,255,.45);transform-origin:center}.mep-fan::after{transform:rotate(60deg)}.mep-fan i{transform:rotate(120deg)}.mep-valve{left:53%;top:56.5%;width:18px;height:18px;border:2px solid #66baff;transform:rotate(45deg)}.mep-panel{left:72%;top:67%;width:38px;height:48px;border:1px solid rgba(255,198,74,.55);color:rgba(255,209,113,.8);font-size:8px;letter-spacing:.1em}
.mep-note{position:absolute;color:rgba(137,201,255,.62);font:700 8px/1 'Inter',sans-serif;letter-spacing:.12em;opacity:0;animation:mepNoteIn 9s 3.1s ease infinite}.note-1{left:23%;top:39%}.note-2{left:26%;top:64%}.note-3{left:71%;top:81%}.note-4{left:9%;top:10%;color:rgba(145,205,255,.82)}.mep-dimension{position:absolute;color:rgba(145,205,255,.42);font:600 7px/1 'Inter',sans-serif;letter-spacing:.18em;opacity:0;animation:mepNoteIn 9s 3.5s ease infinite}.dim-1{left:34%;top:80.5%}.dim-2{left:5.5%;top:47%;transform:rotate(-90deg)}
@keyframes mepDrawX{0%,8%{transform:scaleX(0)}28%,82%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}@keyframes mepDrawY{0%,10%{transform:scaleY(0)}32%,82%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}@keyframes mepDrawPipeDrop{0%,18%{transform:rotate(90deg) scaleX(0)}38%,82%{transform:rotate(90deg) scaleX(1)}94%,100%{transform:rotate(90deg) scaleX(0)}}@keyframes mepDrawElectricDrop{0%,20%{transform:rotate(90deg) scaleX(0)}40%,82%{transform:rotate(90deg) scaleX(1)}94%,100%{transform:rotate(90deg) scaleX(0)}}@keyframes mepSymbolIn{0%,28%{opacity:0;scale:.7}38%,82%{opacity:1;scale:1}94%,100%{opacity:0;scale:.8}}@keyframes mepNoteIn{0%,32%{opacity:0;translate:0 5px}42%,82%{opacity:1;translate:0 0}94%,100%{opacity:0}}@keyframes mepPipeFlow{from{left:0}to{left:100%}}@keyframes mepAir{to{background-position:12px 0}}@keyframes mepScan{from{left:-15%}to{left:105%}}@keyframes mepGridFade{0%,100%{opacity:.55}50%{opacity:1}}
.hero-modern:hover .mep-drawing{opacity:.58;transition:opacity .6s ease}
@media(max-width:900px){.mep-drawing{inset:66px 0 0;opacity:.24;mask-image:linear-gradient(to bottom,#000,transparent 82%)}}
@media(prefers-reduced-motion:reduce){.mep-drawing *{animation:none!important}.mep-wall,.mep-duct,.mep-pipe,.mep-electric{transform:none;opacity:.35}.mep-symbol,.mep-note,.mep-dimension{opacity:.5}}

.client-stat-value{display:inline-block;min-width:70px;transition:color .25s ease,text-shadow .25s ease}.client-stat-value.is-counting{color:var(--electric)!important;text-shadow:0 0 20px rgba(45,156,255,.28)}.client-stat-value.count-complete{animation:clientCountSettle .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes clientCountSettle{0%{transform:scale(.92)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

/* Compact service enquiry modal */
#service-modal .modal-content{width:min(1040px,calc(100vw - 48px));height:min(740px,calc(100vh - 48px));border-radius:24px!important;transition-duration:.42s!important}
#service-modal .modal-backdrop{transition-duration:.42s!important}
#service-modal #service-pane-1,#service-modal #service-pane-2,#service-modal #service-pane-3{padding:30px!important}
#service-modal #service-pane-1>div:first-child{margin-bottom:20px!important}
#service-modal #service-pane-1 .aspect-square{aspect-ratio:4/3}
#service-modal #close-service-modal{top:0;width:42px;height:42px;border-radius:12px}
@media(max-width:900px){#service-modal{overflow-y:auto}#service-modal .modal-content{height:auto;max-height:none;margin:20px 0}#service-modal .modal-content>div{overflow-y:auto}#service-modal #service-pane-1,#service-modal #service-pane-2,#service-modal #service-pane-3{padding:24px!important}}

/* Unified enquiry overlays — desktop, laptop, tablet and mobile */
#product-modal>.relative,#service-modal>div.fixed.inset-0.flex{padding:16px!important}
#product-modal,#service-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;transform:none!important;contain:none!important}
#product-modal .modal-content{width:min(1160px,calc(100vw - 32px));height:min(780px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);border-radius:24px!important;transition-duration:.36s!important}
#product-modal .modal-backdrop,#service-modal .modal-backdrop{transition-duration:.36s!important}
#product-modal #modal-gallery{padding:28px!important}
#product-modal #modal-info{padding:34px!important}
#product-modal #close-modal,#service-modal #close-service-modal{width:42px;height:42px;border-radius:12px}
@media(min-width:901px) and (max-width:1280px){
  #product-modal .modal-content{width:94vw;height:min(720px,calc(100dvh - 36px))}
  #service-modal .modal-content{width:94vw;height:min(700px,calc(100dvh - 36px))}
  #product-modal #modal-gallery,#product-modal #modal-info{padding:24px!important}
  #service-modal #service-pane-1,#service-modal #service-pane-2,#service-modal #service-pane-3{padding:24px!important}
}
@media(max-width:1023px){
  #product-modal,#service-modal{overflow-y:auto}
  #product-modal .modal-content,#service-modal .modal-content{height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);width:calc(100vw - 24px);margin:auto;border-radius:20px!important}
  #product-modal .modal-content>div.flex,#service-modal .modal-content>div.flex{display:block;height:auto;overflow-y:auto}
  #product-modal #modal-gallery{min-height:340px;height:340px;width:100%;padding:22px!important}
  #product-modal #modal-info{width:100%;overflow:visible;padding:26px!important;border-left:0!important}
  #service-modal #service-pane-1,#service-modal #service-pane-2,#service-modal #service-pane-3{width:100%!important;overflow:visible}
}
@media(max-width:640px){
  #product-modal>.relative,#service-modal>div.fixed.inset-0.flex{padding:0!important;align-items:stretch!important}
  #product-modal .modal-content,#service-modal .modal-content{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0!important}
  #product-modal .absolute.top-8.right-8,#service-modal .absolute.top-8.right-8{top:12px!important;right:12px!important;position:fixed!important}
  #product-modal #modal-gallery{height:270px;min-height:270px;padding:16px!important}
  #product-modal #modal-gallery .aspect-\[4\/3\]{max-height:210px;padding:18px!important;border-radius:18px!important}
  #product-modal #modal-gallery .mt-8{margin-top:12px!important}
  #product-modal #modal-gallery .w-16.h-16{width:48px!important;height:48px!important;border-radius:10px!important}
  #product-modal #modal-info{padding:22px 18px 34px!important}
  #product-modal #modal-info h2{font-size:25px!important;padding-right:45px}
  #product-modal #modal-info form .grid-cols-2,#service-modal form .grid-cols-2{grid-template-columns:1fr!important}
  #product-modal #modal-info form .flex.items-center.justify-between{align-items:stretch!important;flex-direction:column!important}
  #product-modal #modal-info form button{width:100%;padding:14px 18px!important}
  #service-modal #service-pane-1,#service-modal #service-pane-2,#service-modal #service-pane-3{padding:22px 18px!important}
  #service-modal #service-pane-1 .aspect-square{aspect-ratio:16/9;margin-top:34px}
  #service-modal input,#service-modal textarea,#product-modal input,#product-modal textarea{font-size:16px!important}
}

/* Defer rendering work for sections outside the viewport */
#clients,#contact,#our-story,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* Editorial Our Story and pinned operations gallery */
#our-story.story-modern{position:relative;overflow:clip;padding:150px 0 0!important;background:#f4f7f9!important;color:#071321;content-visibility:visible;contain:none}
.story-shell{width:min(1280px,calc(100% - 80px));margin:0 auto}.story-modern-intro{display:grid;grid-template-columns:.7fr 1.45fr .85fr;gap:42px;align-items:start;padding-bottom:108px}.story-modern-kicker{display:flex;align-items:center;gap:13px;margin-top:13px;color:#287cdd;font-size:10px;font-weight:900;letter-spacing:.2em}.story-modern-kicker>span,.story-gallery-close p>span{width:35px;height:2px;background:#2588f6}.story-modern-heading h2{margin:0;font-family:'Archivo Black',Outfit,sans-serif;font-size:clamp(46px,5.5vw,88px);line-height:.9;letter-spacing:-.07em;text-transform:uppercase}.story-modern-heading h2 em{font-style:normal;color:#2588f6}.story-modern-lede{display:grid;gap:26px;padding-top:12px}.story-modern-lede p{margin:0;color:#566575;font-size:15px;line-height:1.72}.story-modern-lede span{display:flex;align-items:center;gap:12px;color:#1f5f9f;font-size:9px;font-weight:900;letter-spacing:.15em}.story-modern-lede span i{color:#2588f6}
.story-era-wrap{position:relative;padding-bottom:135px}.story-era-line{position:absolute;top:0;left:0;right:0;height:1px;background:rgba(7,19,33,.16)}.story-era-line i{display:block;width:calc(var(--page-scroll,0) * 100%);height:100%;background:#2588f6;transition:width .15s linear}.story-era-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:30px}.story-era-card{position:relative;min-height:240px;padding:28px 30px;background:#fff;border:1px solid rgba(7,19,33,.1);box-shadow:0 14px 35px rgba(7,19,33,.055);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}.story-era-card:hover{z-index:2;transform:translateY(-10px);border-color:rgba(37,136,246,.45);box-shadow:0 24px 52px rgba(7,19,33,.13)}.story-era-top{display:flex;align-items:center;justify-content:space-between}.story-era-top span{color:#2588f6;font-size:17px;font-weight:900;letter-spacing:-.05em}.story-era-top i{display:grid;width:31px;height:31px;place-items:center;border:1px solid rgba(37,136,246,.28);border-radius:50%;color:#2588f6;font-size:12px}.story-era-card h3{margin:56px 0 10px;color:#071321;font-family:Outfit,sans-serif;font-size:23px;font-weight:900;letter-spacing:-.04em;text-transform:uppercase}.story-era-card p{max-width:280px;margin:0;color:#667482;font-size:13px;line-height:1.55}.story-era-card b{position:absolute;right:27px;bottom:20px;color:rgba(7,19,33,.06);font-family:'Archivo Black',Outfit,sans-serif;font-size:72px;line-height:1;letter-spacing:-.08em}
.story-gallery-scroll{position:relative;height:500vh;background:#06101c;color:#fff}.story-gallery-sticky{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}.story-gallery-grid{position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(rgba(119,189,247,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(119,189,247,.22) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 76%)}.story-gallery-grid::after{content:'';position:absolute;inset:-20%;background:radial-gradient(circle at calc(65% + var(--story-gallery-progress,0) * 10%) 50%,rgba(39,135,230,.35),transparent 23%);transition:background .2s linear}.story-gallery-topline{position:absolute;z-index:5;top:96px;left:4.1vw;right:4.1vw;display:flex;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.2);color:rgba(220,238,255,.72);font-size:9px;font-weight:900;letter-spacing:.2em}.story-gallery-stage{position:absolute;inset:0}.story-gallery-scene{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:scale(1.08);transition:opacity .76s ease,visibility .76s,transform 1.5s cubic-bezier(.22,1,.36,1)}.story-gallery-scene.is-active{opacity:1;visibility:visible;transform:scale(1)}.story-gallery-scene img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.72) contrast(1.08);will-change:transform}.story-gallery-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,21,.97) 0%,rgba(3,12,21,.78) 32%,rgba(3,12,21,.2) 77%,rgba(3,12,21,.48)),linear-gradient(0deg,rgba(3,12,21,.75),transparent 55%)}.story-gallery-scene-number{position:absolute;top:18vh;right:4vw;color:rgba(255,255,255,.08);font:400 clamp(104px,16vw,252px)/.8 'Archivo Black',Outfit,sans-serif;letter-spacing:-.1em}.story-gallery-copy{position:absolute;z-index:4;left:8.8vw;bottom:12vh;width:min(550px,42vw)}.story-gallery-caption{position:absolute;bottom:0;left:0;display:grid;gap:18px;opacity:0;visibility:hidden;transform:translateY(38px);transition:opacity .5s ease,visibility .5s,transform .65s cubic-bezier(.2,.75,.2,1)}.story-gallery-caption.is-active{opacity:1;visibility:visible;transform:translateY(0)}.story-gallery-caption p{margin:0;color:#8bc9ff;font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}.story-gallery-caption h3{max-width:530px;margin:0;font-family:'Archivo Black',Outfit,sans-serif;font-size:clamp(42px,5.2vw,82px);line-height:.88;letter-spacing:-.07em;text-transform:uppercase}.story-gallery-caption span{max-width:420px;color:#d0dbe4;font-size:14px;line-height:1.65}.story-gallery-progress{position:absolute;z-index:5;top:132px;left:4.1vw;right:4.1vw;height:2px;background:rgba(255,255,255,.18)}.story-gallery-progress i{display:block;width:100%;height:100%;background:#2588f6;transform:scaleX(0);transform-origin:left center;box-shadow:0 0 18px rgba(37,136,246,.72);transition:transform .1s linear}.story-gallery-count{position:absolute;z-index:5;right:4.1vw;bottom:43px;display:flex;align-items:center;gap:13px;color:rgba(255,255,255,.55);font-size:10px;font-weight:900;letter-spacing:.2em}.story-gallery-count .story-gallery-current{color:#fff}.story-gallery-count>i{display:block;width:37px;height:1px;background:rgba(255,255,255,.35)}.story-gallery-scrollcue{position:absolute;z-index:5;right:4.1vw;bottom:110px;display:flex;align-items:center;gap:10px;writing-mode:vertical-rl;color:rgba(220,238,255,.64);font-size:8px;font-weight:900;letter-spacing:.22em}.story-gallery-scrollcue i{color:#8bc9ff}.story-gallery-close{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:50px 0 58px}.story-gallery-close p{display:flex;align-items:center;gap:13px;margin:0;color:#1e6cb8;font-size:10px;font-weight:900;letter-spacing:.18em}.story-gallery-close a{display:inline-flex;align-items:center;gap:13px;padding-bottom:9px;border-bottom:1px solid rgba(7,19,33,.35);color:#071321;font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;transition:color .2s,border-color .2s}.story-gallery-close a:hover{border-color:#2588f6;color:#2588f6}
#our-story.story-modern #gallery-grid>.story-gallery-scene{border-radius:0!important;box-shadow:none!important}
@media(max-width:900px){#our-story.story-modern{padding-top:100px!important}.story-shell{width:min(100% - 48px,1280px)}.story-modern-intro{grid-template-columns:1fr;gap:26px;padding-bottom:74px}.story-modern-kicker{margin-top:0}.story-modern-lede{max-width:550px;padding-top:0}.story-era-wrap{padding-bottom:92px}.story-era-grid{gap:12px}.story-era-card{min-height:255px;padding:24px}.story-era-card h3{margin-top:52px}.story-gallery-topline{top:82px}.story-gallery-progress{top:118px}.story-gallery-copy{left:6vw;bottom:14vh;width:min(620px,79vw)}.story-gallery-caption h3{font-size:clamp(48px,8.7vw,74px)}.story-gallery-scene-number{top:20vh}.story-gallery-scrollcue{display:none}}
@media(max-width:650px){#our-story.story-modern{padding-top:78px!important}.story-shell{width:calc(100% - 36px)}.story-modern-heading h2{font-size:43px}.story-modern-lede p{font-size:14px}.story-era-grid{grid-template-columns:1fr}.story-era-card{min-height:200px}.story-era-card h3{margin-top:38px}.story-gallery-scroll{height:460vh}.story-gallery-topline{top:75px;left:20px;right:20px;font-size:8px;letter-spacing:.14em}.story-gallery-topline span:last-child{display:none}.story-gallery-progress{top:107px;left:20px;right:20px}.story-gallery-copy{left:20px;right:20px;bottom:16vh;width:auto}.story-gallery-caption{gap:15px}.story-gallery-caption h3{font-size:47px;line-height:.9}.story-gallery-caption span{max-width:330px;font-size:13px}.story-gallery-scene-number{top:18vh;right:20px;font-size:108px}.story-gallery-shade{background:linear-gradient(0deg,rgba(3,12,21,.95) 4%,rgba(3,12,21,.7) 52%,rgba(3,12,21,.18) 100%)}.story-gallery-count{right:20px;bottom:29px}.story-gallery-close{align-items:flex-start;flex-direction:column;gap:24px;padding:34px 0 42px}.story-gallery-close p{font-size:9px}}
@media(prefers-reduced-motion:reduce){.story-gallery-scroll{height:auto}.story-gallery-sticky{position:relative;height:auto;display:grid}.story-gallery-grid,.story-gallery-topline,.story-gallery-progress,.story-gallery-count,.story-gallery-scrollcue{display:none}.story-gallery-stage{position:relative;display:grid}.story-gallery-scene{position:relative;display:block;min-height:72vh;visibility:visible;opacity:1;transform:none}.story-gallery-scene:not(.is-active){display:none}.story-gallery-copy{position:relative;left:auto;right:auto;bottom:auto;padding:28px 24px;background:#06101c}.story-gallery-caption{position:relative;display:none;visibility:visible;opacity:1;transform:none}.story-gallery-caption.is-active{display:grid}.story-gallery-scene-number{display:none}.story-era-card{transition:none}.story-gallery-scene{transition:none}}
.story-gallery-close{justify-content:center!important;padding:42px 0 58px!important}.story-gallery-link{display:inline-flex;align-items:center;gap:14px;padding:17px 23px;background:#0a1b2d;color:#fff!important;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 14px 28px rgba(7,19,33,.12);transition:transform .25s,background .25s,box-shadow .25s}.story-gallery-link:hover{background:#2588f6;transform:translateY(-4px);box-shadow:0 22px 38px rgba(37,136,246,.28)}.story-gallery-link i{font-size:10px}

/* Scroll-reactive AAMCO growth timeline. */
.story-journey{position:relative;overflow:hidden;background:#071321;color:#fff;isolation:isolate}.story-journey::before{content:'';position:absolute;inset:0;z-index:-2;opacity:.22;background-image:linear-gradient(rgba(126,194,246,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(126,194,246,.2) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 82%)}.story-journey::after{content:'';position:absolute;z-index:-1;top:12%;right:-17vw;width:48vw;height:48vw;border:1px solid rgba(82,167,234,.24);border-radius:50%;box-shadow:0 0 0 66px rgba(50,137,218,.055),0 0 0 132px rgba(50,137,218,.035)}.story-journey-shell{position:relative;padding:94px 0 118px}.story-journey-head{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-bottom:23px;border-bottom:1px solid rgba(207,231,249,.2)}.story-journey-head p{display:flex;align-items:center;gap:13px;margin:0;color:#91ceff;font-size:10px;font-weight:900;letter-spacing:.2em}.story-journey-head p span,.story-journey-close p span{display:block;width:35px;height:2px;background:#2588f6}.story-journey-head strong{color:rgba(224,240,252,.62);font-size:10px;font-weight:900;letter-spacing:.16em}
.story-timeline{--story-timeline-progress:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:minmax(212px,auto);column-gap:112px;row-gap:26px;padding:48px 0 10px}.story-timeline-rail{position:absolute;top:54px;bottom:58px;left:50%;width:1px;background:rgba(161,208,242,.27)}.story-timeline-rail i{display:block;width:100%;height:100%;background:linear-gradient(#91d4ff,#2588f6);box-shadow:0 0 16px rgba(75,168,234,.8);transform:scaleY(var(--story-timeline-progress));transform-origin:top;transition:transform .14s linear}
.story-milestone{position:relative;grid-row:var(--story-row);min-height:212px;padding:25px 28px 29px;overflow:visible;background:linear-gradient(135deg,rgba(22,55,84,.9),rgba(9,29,49,.83));border:1px solid rgba(158,211,247,.22);box-shadow:0 18px 42px rgba(0,0,0,.15);opacity:.22;transform:translateY(32px) scale(.97);transition:opacity .68s var(--story-delay) ease,transform .82s var(--story-delay) cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s}.story-milestone.is-visible{opacity:1;transform:translateY(0) scale(1)}.story-milestone.is-reached{border-color:rgba(103,190,250,.58);box-shadow:0 20px 48px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.08)}.story-milestone--left{grid-column:1}.story-milestone--right{grid-column:2}.story-milestone--left::before,.story-milestone--right::before{content:'';position:absolute;top:39px;width:56px;height:1px;background:rgba(145,211,255,.5)}.story-milestone--left::after,.story-milestone--right::after{content:'';position:absolute;top:33px;width:11px;height:11px;border:2px solid #b5e3ff;border-radius:50%;background:#2588f6;box-shadow:0 0 0 7px rgba(37,136,246,.13),0 0 18px rgba(92,181,243,.8)}.story-milestone--left::before{right:-56px}.story-milestone--left::after{right:-63px}.story-milestone--right::before{left:-56px}.story-milestone--right::after{left:-63px}.story-milestone-top{display:flex;align-items:center;justify-content:space-between;gap:18px}.story-milestone-top span{color:#87ceff;font-family:'Archivo Black',Outfit,sans-serif;font-size:clamp(26px,2.2vw,36px);line-height:1;letter-spacing:-.065em}.story-milestone-top i{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(145,211,255,.34);border-radius:50%;color:#a7dcff;font-size:13px}.story-milestone>p{margin:28px 0 0;color:#77c3f8;font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.story-milestone h3{max-width:320px;margin:10px 0 0;font-family:Outfit,sans-serif;font-size:clamp(24px,2.25vw,34px);font-weight:900;line-height:.98;letter-spacing:-.055em;text-transform:uppercase}.story-milestone small{display:block;max-width:330px;margin-top:13px;color:#c2d6e6;font-size:13px;line-height:1.55}.story-milestone b{position:absolute;right:22px;bottom:15px;color:rgba(177,220,247,.08);font-family:'Archivo Black',Outfit,sans-serif;font-size:63px;line-height:1;letter-spacing:-.09em}.story-milestone:hover{z-index:2;border-color:#7ac4f7;box-shadow:0 25px 55px rgba(0,0,0,.26);transform:translateY(-6px) scale(1.01)}.story-milestone.is-visible:hover{transform:translateY(-6px) scale(1.01)}
.story-journey-close{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:48px 0 60px}.story-journey-close p{display:flex;align-items:center;gap:13px;margin:0;color:#1e6cb8;font-size:10px;font-weight:900;letter-spacing:.18em}.story-journey-close .story-gallery-link{background:#071321}.story-journey-close .story-gallery-link:hover{background:#2588f6}
@media(max-width:900px){.story-journey-shell{padding:72px 0 88px}.story-timeline{column-gap:76px;grid-auto-rows:minmax(220px,auto)}.story-milestone--left::before,.story-milestone--right::before{width:38px}.story-milestone--left::before{right:-38px}.story-milestone--right::before{left:-38px}.story-milestone--left::after{right:-45px}.story-milestone--right::after{left:-45px}.story-milestone{padding:23px 24px}.story-milestone h3{font-size:27px}.story-milestone small{font-size:12px}}
@media(max-width:650px){.story-journey-shell{padding:58px 0 70px}.story-journey-head{align-items:flex-start;flex-direction:column;gap:12px}.story-journey-head strong{font-size:9px}.story-timeline{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:15px;padding:34px 0 0 48px}.story-timeline-rail{top:42px;bottom:38px;left:6px}.story-milestone,.story-milestone--left,.story-milestone--right{grid-column:1;grid-row:auto;min-height:0;padding:21px 20px 24px}.story-milestone--left::before,.story-milestone--right::before{top:35px;left:-42px;right:auto;width:42px}.story-milestone--left::after,.story-milestone--right::after{top:29px;left:-49px;right:auto}.story-milestone-top span{font-size:29px}.story-milestone>p{margin-top:20px}.story-milestone h3{font-size:28px}.story-milestone small{font-size:12px}.story-milestone b{font-size:55px}.story-journey-close{align-items:flex-start;flex-direction:column;gap:24px;padding:34px 0 42px}.story-journey-close p{font-size:9px}}
@media(prefers-reduced-motion:reduce){.story-timeline-rail i{transform:scaleY(1);transition:none}.story-milestone{opacity:1;transform:none;transition:none}.story-milestone:hover,.story-milestone.is-visible:hover{transform:none}}

/* Keep the expanded navigation balanced at compact desktop widths. */
@media(min-width:768px) and (max-width:1180px){.nav-shell{gap:24px}.nav-links{gap:18px}.nav-logo{width:142px}.nav-cta{gap:8px;padding:10px 12px;font-size:10px}}

/* Catalogue download action in the home hero. */
.hero-actions{flex-wrap:wrap}.hero-catalogue{display:inline-flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(151,207,255,.7);color:#a7d3ff;font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;transition:color .2s,border-color .2s,transform .2s}.hero-catalogue:hover{border-color:#fff;color:#fff;transform:translateY(-2px)}.hero-catalogue i{font-size:10px}
@media(max-width:640px){.hero-catalogue{padding:10px 0}.hero-actions{gap:14px}}
#products,#services{content-visibility:visible;contain:none}

/* Shared attachment control for every enquiry form */
.enquiry-attachment{width:100%;min-height:62px;display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px dashed;border-radius:14px;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}.enquiry-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.enquiry-attachment-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.enquiry-attachment-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.enquiry-attachment-copy strong{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.enquiry-attachment-copy small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.enquiry-attachment-action{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:7px 10px;border-radius:8px}.enquiry-attachment-light{border-color:#dbe2ea;background:#f8fafc}.enquiry-attachment-light:hover{border-color:#3b82f6;background:#eff6ff}.enquiry-attachment-light .enquiry-attachment-icon{background:#dbeafe;color:#2563eb}.enquiry-attachment-light .enquiry-attachment-copy strong{color:#1e293b}.enquiry-attachment-light .enquiry-attachment-copy small{color:#94a3b8}.enquiry-attachment-light .enquiry-attachment-action{background:#fff;color:#2563eb}.enquiry-attachment-dark{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045)}.enquiry-attachment-dark:hover{border-color:#60a5fa;background:rgba(59,130,246,.1)}.enquiry-attachment-dark .enquiry-attachment-icon{background:rgba(59,130,246,.16);color:#60a5fa}.enquiry-attachment-dark .enquiry-attachment-copy strong{color:#fff}.enquiry-attachment-dark .enquiry-attachment-copy small{color:#718096}.enquiry-attachment-dark .enquiry-attachment-action{background:rgba(255,255,255,.08);color:#bfdbfe}.enquiry-attachment.has-file{border-style:solid;border-color:#22c55e}.enquiry-attachment.has-file .enquiry-attachment-icon{background:#22c55e;color:#fff}.enquiry-attachment.has-error{border-color:#ef4444}.enquiry-attachment.has-error .enquiry-file-name{color:#f87171}
@media(max-width:480px){.enquiry-attachment{padding:10px;gap:9px}.enquiry-attachment-action{display:none}.enquiry-attachment-copy strong{font-size:9px}.enquiry-attachment-copy small{max-width:210px}}

.enquiry-submit-status{display:none;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;font-size:11px;margin-top:12px}.enquiry-submit-status.is-success,.enquiry-submit-status.is-error{display:flex}.enquiry-submit-status>i{font-size:18px}.enquiry-submit-status>span{display:flex;flex-direction:column;gap:2px}.enquiry-submit-status strong{font-size:11px}.enquiry-submit-status small{font-size:9px;opacity:.72}.enquiry-submit-status.is-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857}.enquiry-submit-status.is-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}#service-enquiry-form .enquiry-submit-status.is-success{background:rgba(16,185,129,.13);border-color:rgba(52,211,153,.35);color:#a7f3d0}#service-enquiry-form .enquiry-submit-status.is-error{background:rgba(239,68,68,.12);border-color:rgba(248,113,113,.35);color:#fecaca}

/* Two-office Google Maps area in service enquiries */
#service-modal #service-pane-3{overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:rgba(96,165,250,.45) transparent}
.service-locations{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}.service-locations-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.service-locations-heading span{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#fff}.service-locations-heading span i{color:#60a5fa}.service-locations-heading small{font-size:8px;color:rgba(191,219,254,.55)}.service-location-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.service-location-card{overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);transition:.25s}.service-location-card:hover{border-color:rgba(96,165,250,.7);transform:translateY(-2px);background:rgba(255,255,255,.09)}.service-location-map{height:90px;overflow:hidden;background:#1e3a8a}.service-location-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.8) contrast(1.05)}.service-location-info{display:flex;align-items:center;justify-content:space-between;padding:10px 11px}.service-location-info>div{display:flex;flex-direction:column;gap:2px}.service-location-info strong{font-size:9px;text-transform:uppercase;letter-spacing:.07em}.service-location-info span{font-size:8px;color:#93a9c5}.service-location-info a{width:27px;height:27px;border-radius:8px;background:rgba(96,165,250,.16);color:#93c5fd;display:flex;align-items:center;justify-content:center;font-size:9px}.service-location-info a:hover{background:#3b82f6;color:#fff}
@media(max-width:480px){.service-location-grid{grid-template-columns:1fr}.service-location-map{height:120px}}

/* Redesigned two-map contact area */
.contact-office-maps{display:flex;flex-direction:column;gap:12px;margin-top:4px}.contact-maps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1px}.contact-maps-header>div{display:flex;align-items:center;gap:8px}.contact-maps-header i{color:#3b82f6;font-size:12px}.contact-maps-header span{font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:#334155}.contact-maps-header small{font-size:8px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em}.contact-map-card{overflow:hidden;border:1px solid #e5eaf0;border-radius:14px;background:#fff;box-shadow:0 7px 22px rgba(15,23,42,.06);transition:.3s}.contact-map-card:hover{transform:translateY(-3px);border-color:#bfdbfe;box-shadow:0 14px 32px rgba(37,99,235,.12)}.contact-map-frame{height:130px;overflow:hidden;background:#eef2f7}.contact-map-frame iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.82) contrast(1.02);transition:filter .35s}.contact-map-card:hover iframe{filter:saturate(1) contrast(1)}.contact-map-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px}.contact-map-meta>div{display:flex;min-width:0;flex-direction:column;gap:2px}.contact-map-meta span{font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}.contact-map-meta strong{font-size:10px;color:#172033}.contact-map-meta a{display:flex;align-items:center;gap:5px;flex-shrink:0;padding:7px 9px;border-radius:8px;background:#eff6ff;color:#2563eb;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.contact-map-meta a:hover{background:#2563eb;color:#fff}
@media(min-width:768px) and (max-width:1023px){.contact-office-maps{display:grid;grid-template-columns:1fr 1fr}.contact-maps-header{grid-column:1/-1}.contact-map-frame{height:180px}}
@media(max-width:480px){.contact-map-frame{height:155px}.contact-map-meta{align-items:flex-start;flex-direction:column}.contact-map-meta a{width:100%;justify-content:center}}

/* Hero transformation: coordinated MEP drawing becomes the installed system */
.hero-mep-media{inset:0;background:#eaf4f7;isolation:isolate}
.hero-mep-media::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(6,18,32,.2),transparent 38%,rgba(80,205,255,.08)),repeating-linear-gradient(0deg,transparent 0 79px,rgba(31,91,120,.08) 79px 80px),repeating-linear-gradient(90deg,transparent 0 79px,rgba(31,91,120,.08) 79px 80px);mix-blend-mode:multiply}
.hero-mep-blueprint,.hero-mep-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%}
.hero-mep-blueprint{z-index:0;animation:mepBlueprintBreathe 12s ease-in-out infinite}
.hero-mep-photo-reveal{position:absolute;z-index:2;inset:-2px;overflow:hidden;clip-path:polygon(88% 0,100% 0,100% 100%,62% 100%);animation:mepPhotoReveal 12s cubic-bezier(.76,0,.24,1) infinite;will-change:clip-path}
.hero-mep-photo{filter:saturate(.86) contrast(1.05) brightness(1.08);animation:mepPhotoFocus 12s ease-in-out infinite}
.hero-mep-scanline{position:absolute;z-index:5;top:-14%;left:75%;width:3px;height:132%;transform:rotate(10deg);transform-origin:center;background:linear-gradient(180deg,transparent 2%,#9ee8ff 16%,#20a6ff 58%,#ffb04a 88%,transparent);box-shadow:0 0 9px #38b8ff,0 0 28px rgba(34,170,255,.72),0 0 60px rgba(255,171,67,.28);animation:mepScanBuild 12s cubic-bezier(.76,0,.24,1) infinite;will-change:left}
.hero-mep-callouts{position:absolute;z-index:3;inset:0;color:#224f67;font:800 9px/1.2 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;animation:mepCalloutsFade 12s ease-in-out infinite}
.hero-mep-callout{position:absolute;display:flex;align-items:center;gap:7px;white-space:nowrap}.hero-mep-callout i{display:block;width:46px;height:1px;background:currentColor;position:relative}.hero-mep-callout i::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border:1px solid currentColor;border-radius:50%}.callout-a{top:25%;right:20%}.callout-b{top:53%;right:8%}.callout-c{bottom:17%;right:25%}.hero-mep-dimension{position:absolute;top:13%;right:7%;padding:5px 9px;border-top:1px solid rgba(34,79,103,.65);border-bottom:1px solid rgba(34,79,103,.65)}
.hero-mep-phase{position:absolute;z-index:6;right:34px;padding:8px 12px;border:1px solid currentColor;color:#275b75;background:rgba(239,248,251,.72);backdrop-filter:blur(7px);font:800 9px/1 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase}.phase-drawing{top:105px;animation:mepDrawingLabel 12s ease-in-out infinite}.phase-built{bottom:45px;color:#fff;background:rgba(7,27,45,.6);animation:mepBuiltLabel 12s ease-in-out infinite}
.hero-mep-media + .hero-shade{z-index:1;background:linear-gradient(90deg,var(--ink) 0%,rgba(7,19,33,.97) 35%,rgba(7,19,33,.58) 57%,rgba(7,19,33,.1) 82%),linear-gradient(0deg,rgba(7,19,33,.5),transparent 48%)}
@keyframes mepPhotoReveal{0%,12%,100%{clip-path:polygon(88% 0,100% 0,100% 100%,62% 100%)}48%,72%{clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}}
@keyframes mepScanBuild{0%,12%,100%{left:75%;opacity:.55}48%,72%{left:8%;opacity:1}}
@keyframes mepBlueprintBreathe{0%,100%{filter:contrast(1) brightness(1);transform:scale(1.01)}52%{filter:contrast(1.12) brightness(1.03);transform:scale(1)}}
@keyframes mepPhotoFocus{0%,12%,100%{transform:scale(1.035);filter:saturate(.72) contrast(1.02) brightness(1.14)}48%,72%{transform:scale(1);filter:saturate(.92) contrast(1.06) brightness(1.08)}}
@keyframes mepCalloutsFade{0%,16%,100%{opacity:.92}48%,72%{opacity:.08}}
@keyframes mepDrawingLabel{0%,22%,100%{opacity:1;transform:translateY(0)}48%,72%{opacity:0;transform:translateY(-8px)}}
@keyframes mepBuiltLabel{0%,22%,100%{opacity:0;transform:translateY(8px)}48%,72%{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.hero-mep-media{inset:0}.hero-mep-blueprint,.hero-mep-photo{object-position:58% center}.hero-mep-callouts{opacity:.55}.hero-mep-media + .hero-shade{background:linear-gradient(90deg,var(--ink) 0%,rgba(7,19,33,.9) 64%,rgba(7,19,33,.28)),linear-gradient(0deg,rgba(7,19,33,.7),transparent 55%)}}
@media(max-width:640px){.hero-mep-blueprint,.hero-mep-photo{object-position:62% center}.hero-mep-callouts,.hero-mep-phase{display:none}.hero-mep-media + .hero-shade{background:linear-gradient(0deg,var(--ink) 10%,rgba(7,19,33,.91) 66%,rgba(7,19,33,.44))}}
@media(prefers-reduced-motion:reduce){.hero-mep-blueprint,.hero-mep-photo,.hero-mep-photo-reveal,.hero-mep-scanline,.hero-mep-callouts,.hero-mep-phase{animation:none!important}.hero-mep-photo-reveal{clip-path:polygon(55% 0,100% 0,100% 100%,30% 100%)}.hero-mep-scanline{left:42%;opacity:.72}.phase-drawing,.phase-built{opacity:1;transform:none}}

/* Use the full canvas on wide PC monitors; laptop and mobile layouts stay unchanged */
@media(min-width:1440px){
  .site-nav .nav-shell,.hero-modern .hero-inner{width:100%;max-width:none!important;padding-left:clamp(52px,4vw,84px)!important;padding-right:clamp(52px,4vw,84px)!important}
  .hero-modern .hero-inner{grid-template-columns:minmax(0,1fr) 430px;gap:64px}
  .hero-modern .hero-copy{max-width:780px}
}

/* Full-bleed hero photography with a restrained cinematic drift. */
.hero-static-media{inset:0!important;background:#081421}
.hero-static-media .hero-static-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%;animation:heroPhotoDrift 18s ease-in-out infinite alternate;translate:none!important;transform:scale(1.045);transition:none;will-change:transform;filter:saturate(.86) contrast(1.05) brightness(1.04)}
@media(max-width:900px){.hero-static-media .hero-static-photo{object-position:58% center}}
@media(max-width:640px){.hero-static-media .hero-static-photo{object-position:62% center}}

/* User-friendly product catalogue */
#products{background:#f3f6f9!important;padding-top:96px!important;padding-bottom:110px!important;overflow:visible!important}
#products .products-intro,#products .products-catalog-shell{max-width:1480px}
.products-intro{margin-bottom:34px}.products-intro-layout{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}.products-intro-heading h1{max-width:900px;font-size:clamp(46px,5vw,76px)!important;line-height:.94!important;letter-spacing:-.035em!important;word-spacing:.06em;font-style:normal!important}.products-intro-heading>p:last-child{max-width:680px;margin-top:22px;color:#667386;font-size:15px;line-height:1.7}.products-intro-points{display:grid;grid-template-columns:1fr;gap:8px;min-width:300px;padding:18px;border:1px solid #dfe6ee;border-radius:18px;background:rgba(255,255,255,.72)}.products-intro-points span{display:flex;align-items:center;gap:10px;color:#536174;font-size:11px;font-weight:700}.products-intro-points i{width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#eaf2ff;color:#1769e8}.products-intro-points b{font-size:14px;color:#142035}
.products-catalog-shell{padding-top:22px!important;padding-bottom:28px!important;border:1px solid #dfe6ee;border-radius:28px;background:#fff;box-shadow:0 26px 70px rgba(15,34,58,.08)}.products-toolbar{display:grid;grid-template-columns:minmax(300px,680px) auto;align-items:center;justify-content:space-between;gap:24px;padding:0 4px 20px;border-bottom:1px solid #e8edf3}.product-search-shell{height:56px;display:flex;align-items:center;gap:13px;padding:0 14px 0 18px;border:1px solid #d9e1ea;border-radius:14px;background:#f7f9fc;color:#8a97a8;transition:border-color .2s,box-shadow .2s,background .2s}.product-search-shell:focus-within{border-color:#2878ed;background:#fff;box-shadow:0 0 0 4px rgba(40,120,237,.11)}.product-search-shell>i{color:#2878ed}.product-search-shell input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#172337;font-size:14px;font-weight:650}.product-search-shell input::placeholder{color:#94a0af}.product-search-shell button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:9px;background:#e8edf4;color:#657386;opacity:0;pointer-events:none;transform:scale(.85);transition:.2s}.product-search-shell button.is-visible{opacity:1;pointer-events:auto;transform:scale(1)}.product-search-shell button:hover{background:#172337;color:#fff}.products-results-summary{display:flex;align-items:flex-end;flex-direction:column;gap:4px}.products-results-summary span{color:#8b97a7;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.products-results-summary strong{color:#172337;font-size:16px}
.products-filter-label{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 4px 9px}.products-filter-label span{color:#223047;font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.products-filter-label small{color:#8c99a8;font-size:10px}.products-layout{gap:22px!important}.products-filter-wrap{min-width:0}.products-sidebar{position:static!important;top:auto!important}.products-sidebar-inner{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.products-sidebar-header{display:none}.product-categories{display:flex!important;align-items:flex-start;flex-wrap:wrap;gap:9px}.product-category{position:relative;flex:0 0 auto}.product-category-header,.product-category-all{width:auto!important;min-height:46px!important;display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;padding:8px 13px!important;border:1px solid #dce3eb!important;border-radius:12px!important;background:#fff!important;color:#3e4d60!important;box-shadow:none!important;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s!important}.product-category-header:hover{border-color:#a9c8f5!important;background:#f5f9ff!important;color:#1769e8!important;transform:translateY(-1px)}.product-category-header.active{border-color:#1769e8!important;background:#1769e8!important;color:#fff!important;box-shadow:0 8px 20px rgba(23,105,232,.22)!important}.product-category-all-inner{display:flex;align-items:center;gap:9px}.product-category-icon-wrap{width:27px!important;height:27px!important;display:flex;align-items:center;justify-content:center;border-radius:8px!important;background:#edf3fb!important;color:#3f5874!important}.product-category-header.active .product-category-icon-wrap{background:rgba(255,255,255,.18)!important;color:#fff!important}.product-category-label,.product-category-all-text{font-size:11px!important;font-weight:800!important}.product-category-count,.product-category-all-count{min-width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border-radius:7px;background:#edf1f6!important;color:#637186!important;font-size:9px!important}.product-category-header.active .product-category-count,.product-category-all.active .product-category-all-count{background:rgba(255,255,255,.18)!important;color:#fff!important}.product-category-chevron{font-size:8px;margin-left:1px;color:inherit!important}.category-dropdown{position:absolute;z-index:45;top:calc(100% + 8px);left:0;width:230px;padding:8px;border:1px solid #dce4ed;border-radius:14px;background:#fff;box-shadow:0 20px 45px rgba(15,34,58,.17)}.category-dropdown-inner{display:flex;flex-direction:column;gap:3px}.category-dropdown-item{width:100%;display:flex;align-items:center;gap:9px;padding:10px;border-radius:9px;color:#526175;font-size:11px;text-align:left;transition:.18s}.category-dropdown-item:hover,.category-dropdown-item.active{background:#eaf2ff;color:#1769e8}.category-dropdown-item-dot{width:6px;height:6px;border-radius:50%;background:#9eb9df}.category-dropdown-item-label{flex:1}.category-dropdown-item-arrow{font-size:8px}.category-panel{display:none!important}
.products-results{min-width:0;padding-top:2px}#products-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}#products-grid .product-card{min-width:0;border:1px solid #e0e6ed!important;border-radius:17px!important;background:#fff!important;box-shadow:0 8px 24px rgba(15,34,58,.07)!important;transform:none!important;transition:border-color .25s,box-shadow .25s,transform .25s!important}#products-grid .product-card:hover{border-color:#abc9f5!important;box-shadow:0 18px 38px rgba(15,67,133,.13)!important;transform:translateY(-4px)!important}#products-grid .product-card:focus-visible{outline:3px solid rgba(36,118,238,.35);outline-offset:3px}.product-card-image{height:210px!important;padding:18px!important;background:linear-gradient(180deg,#f8fafc,#eef2f6)!important}.product-card-image img{max-width:92%;max-height:92%;transition:transform .35s ease!important}.product-card:hover .product-card-image img{transform:scale(1.045)!important}.product-card-body{padding:18px!important}.product-card-title{min-height:40px;font-size:17px!important;line-height:1.18!important}.product-card-body>p{font-size:11px!important;line-height:1.55!important}.product-card-cta{margin-top:12px!important;padding-top:13px!important}.product-card-cta>span{color:#2f4056!important;font-size:10px!important}.product-card-cta-icon{width:34px!important;height:34px!important;border-radius:10px!important;box-shadow:none!important}.product-card-gallery-badge{top:12px!important;right:12px!important}.show-more-btn{border-radius:12px!important;padding:14px 24px!important;box-shadow:0 10px 24px rgba(37,99,235,.2)!important;font-size:11px!important}.show-more-btn:hover{transform:translateY(-2px)!important}.show-more-btn+p{display:none}#no-results{padding:65px 24px!important;border-radius:18px!important}
@media(max-width:1199px){#products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.products-intro-layout{align-items:flex-start;flex-direction:column}.products-intro-points{width:100%;grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){#products{padding-top:76px!important}.products-catalog-shell{border-radius:22px}.products-toolbar{grid-template-columns:1fr}.products-results-summary{align-items:flex-start}.products-filter-label small{display:none}#products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.product-categories{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}.product-category,.product-category-all{flex:0 0 auto}.category-dropdown{position:fixed;left:18px;right:18px;top:auto;bottom:16px;width:auto;max-height:55vh;overflow-y:auto}.products-intro-points{grid-template-columns:1fr}}
@media(max-width:599px){#products{padding-top:66px!important;padding-bottom:72px!important}#products .products-intro,#products .products-catalog-shell{padding-left:16px!important;padding-right:16px!important}.products-intro{margin-bottom:24px}.products-intro-heading h1{font-size:40px!important;line-height:.94!important}.products-intro-heading>p:last-child{font-size:13px;margin-top:16px}.products-intro-points{display:none}.products-catalog-shell{padding-top:16px!important;border-radius:18px}.products-toolbar{padding-bottom:15px}.product-search-shell{height:52px}.products-filter-label{padding-top:15px}#products-grid{grid-template-columns:1fr!important;gap:14px!important}.product-card-image{height:220px!important}.product-card-title{min-height:0}.product-card-body{padding:16px!important}}

/* Desktop catalogue: vertical material dropdown beside the products */
@media(min-width:1000px){
  .products-layout{display:grid!important;grid-template-columns:260px minmax(0,1fr);align-items:start;gap:24px!important}
  .products-filter-wrap{width:260px!important}
  .products-sidebar{position:sticky!important;top:86px!important}
  .products-sidebar-inner{padding:12px!important;border:1px solid #dfe6ee!important;border-radius:18px!important;background:#f8fafc!important}
  .product-categories{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:8px!important;overflow:visible!important}
  .product-category{width:100%!important;flex:0 0 auto!important}
  .product-category-header,.product-category-all{width:100%!important;justify-content:flex-start!important}
  .product-category-label,.product-category-all-text{flex:1;text-align:left}
  .category-dropdown{position:static!important;width:100%!important;margin-top:6px;padding:6px!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}
  .category-dropdown-item{min-height:38px}
  .products-results{grid-column:2;min-width:0}
  #products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(min-width:1000px) and (max-width:1199px){.products-layout{grid-template-columns:235px minmax(0,1fr)}.products-filter-wrap{width:235px!important}#products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:999px){.products-layout{display:flex!important;flex-direction:column!important}.products-filter-wrap{width:100%!important}.products-sidebar{position:static!important}.product-categories{display:flex!important;flex-direction:row!important;align-items:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important}.product-category{width:auto!important}.product-category-header,.product-category-all{width:auto!important}}

/* Single-line client logo strip */
#clients .client-logo-strip{position:relative;height:112px;margin-top:52px;padding:0!important;overflow:hidden;background:transparent;border:0;isolation:isolate}
#clients .client-logo-strip::before{display:none}
#clients .marquee-track-top{height:100%;display:flex;align-items:center;overflow:hidden}
#clients .client-logo-track{position:relative;z-index:2;display:flex;width:max-content;height:100%;align-items:center;will-change:transform;animation:client-logo-loop 29s linear infinite}
#clients .client-logo-sequence{display:flex;height:100%;align-items:center;gap:22px;padding-right:22px}
#clients .client-logo-item{width:clamp(194px,13vw,272px);height:100%;padding:14px 0;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;transition:transform .25s}
#clients .client-logo-item img{display:block;max-width:100%;max-height:76px;background:transparent!important;filter:grayscale(1) invert(1) contrast(4) brightness(1.25)!important;-webkit-filter:grayscale(1) invert(1) contrast(4) brightness(1.25)!important;mix-blend-mode:screen;opacity:.92;transition:opacity .25s,transform .25s}
#clients .client-logo-item:hover{transform:scale(1.05)}#clients .client-logo-item:hover img{opacity:.96}
/* The GAS source artwork has a baked-in solid background; screen blending removes it. */
#clients .client-logo-item img[src*="gas-arabian-services"]{filter:grayscale(1) invert(1) contrast(12) brightness(1.5)!important;-webkit-filter:grayscale(1) invert(1) contrast(12) brightness(1.5)!important;mix-blend-mode:screen!important;opacity:1!important}
#clients .client-logo-fade{position:absolute;inset-block:0;z-index:5;width:72px;pointer-events:none}
#clients .client-logo-fade-left{left:0;background:linear-gradient(90deg,#071321,transparent)}
#clients .client-logo-fade-right{right:0;background:linear-gradient(270deg,#071321,transparent)}
#clients .marquee-controls{display:none!important}
@media(max-width:700px){#clients .client-logo-strip{height:96px;margin-top:36px}#clients .client-logo-track{animation-duration:25s}#clients .client-logo-sequence{gap:16px;padding-right:16px}#clients .client-logo-item{width:168px;padding:10px 0}#clients .client-logo-item img{max-height:58px}#clients .client-logo-fade{width:40px}}
@media(prefers-reduced-motion:reduce){#clients .client-logo-track{animation-duration:90s}}

/* Transparent navigation that adapts to the surface beneath it. */
.site-nav.nav-scrolled{background:transparent!important;backdrop-filter:none!important;box-shadow:none!important}.site-nav.nav-on-light{color:#0875e1}.site-nav.nav-on-light .nav-logo{filter:none}.site-nav.nav-on-light .nav-links a{color:rgba(8,117,225,.82)}.site-nav.nav-on-light .nav-links a:hover{color:#0757ad}.site-nav.nav-on-light .nav-cta{border-color:rgba(8,117,225,.5);color:#0875e1}.site-nav.nav-on-light .nav-cta:hover{border-color:#0875e1;background:#0875e1;color:#fff}.site-nav.nav-on-light .menu-toggle{border-color:rgba(8,117,225,.48);color:#0875e1}.site-nav.nav-on-light .menu-toggle span{background:currentColor}

/* Full-area translucent header keeps navigation legible over every section. */
.site-nav{height:76px;padding-top:0}
.site-nav .nav-shell{width:100%!important;max-width:none!important;height:100%;margin:0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background .32s ease,border-color .32s ease,box-shadow .32s ease,backdrop-filter .32s ease}
.site-nav.nav-scrolled .nav-shell{border-bottom-color:rgba(255,255,255,.12);background:rgba(0,0,0,.7);box-shadow:0 14px 34px rgba(0,0,0,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.site-nav.nav-on-light .nav-logo{filter:brightness(0) invert(1)}
.site-nav.nav-on-light .nav-links a{color:rgba(255,255,255,.76)}
.site-nav.nav-on-light .nav-links a:hover{color:#fff}
.site-nav.nav-on-light .nav-cta{border-color:rgba(255,255,255,.34);color:#fff}
.site-nav.nav-on-light .nav-cta:hover{border-color:#fff;background:#fff;color:#071321}
.site-nav.nav-on-light .menu-toggle{border-color:rgba(255,255,255,.34);color:#fff}
@media(max-width:640px){.site-nav{height:66px}.site-nav .nav-shell{width:100%!important;height:100%;border-radius:0}}

/* Shared header actions for contact and the enquiry cart. */
.nav-actions{align-items:center;gap:10px}.nav-contact-button,.nav-enquiry-cart{display:inline-flex;align-items:center;gap:8px;min-height:39px;padding:10px 13px;border-radius:999px;color:#fff;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.nav-contact-button{border:1px solid #2588f6;background:#2588f6;box-shadow:0 10px 25px rgba(37,136,246,.24)}.nav-contact-button:hover{border-color:#56a8ff;background:#1678db;box-shadow:0 13px 28px rgba(37,136,246,.34);transform:translateY(-1px)}.nav-enquiry-cart{border:1px solid rgba(255,255,255,.27)}.nav-enquiry-cart:hover{border-color:#8fcaff;background:rgba(37,136,246,.2);transform:translateY(-1px)}.nav-enquiry-cart b,.nav-enquiry-cart-mobile b,.mobile-enquiry-cart b{display:grid;min-width:19px;height:19px;place-items:center;border-radius:999px;background:#2588f6;color:#fff;font-size:9px;letter-spacing:0}.nav-enquiry-cart b[hidden],.nav-enquiry-cart-mobile b[hidden]{display:none}.site-nav.nav-on-light .nav-contact-button{border-color:#2588f6;background:#2588f6;color:#fff}.site-nav.nav-on-light .nav-contact-button:hover{border-color:#56a8ff;background:#1678db}.site-nav.nav-on-light .nav-enquiry-cart{border-color:rgba(255,255,255,.34);color:#fff}.site-nav.nav-on-light .nav-enquiry-cart:hover{border-color:#8fcaff;background:rgba(37,136,246,.18)}.nav-enquiry-cart-mobile{position:relative;display:none;align-items:center;justify-content:center;width:38px;height:38px;margin-left:auto;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;font-size:13px}.nav-enquiry-cart-mobile b{position:absolute;top:-6px;right:-6px}.mobile-contact-link,.mobile-enquiry-cart{display:flex!important;align-items:center;gap:8px}.mobile-contact-link{color:#8fcaff!important}.nav-contact-button:focus-visible,.nav-enquiry-cart:focus-visible,.nav-enquiry-cart-mobile:focus-visible,.mobile-contact-link:focus-visible,.mobile-enquiry-cart:focus-visible{outline:2px solid #8fcaff;outline-offset:3px}@media(max-width:767px){.nav-enquiry-cart-mobile{display:inline-flex}}@media(min-width:768px) and (max-width:1180px){.nav-actions{gap:7px}.nav-contact-button,.nav-enquiry-cart{padding:9px 10px;font-size:9px}.nav-contact-button span,.nav-enquiry-cart span{display:none}}

/* Product-modal configuration controls used before adding a product to the enquiry cart. */
.product-enquiry-field{display:grid;gap:6px;color:#4d6378;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.product-enquiry-field span{display:flex;justify-content:space-between;gap:8px}.product-enquiry-field em{color:#8a9aaa;font-style:normal;font-weight:700}.product-enquiry-field input,.product-enquiry-field select,.product-enquiry-field textarea{width:100%;border:1px solid #dce6ee;background:#f8fafc;color:#19324a;font:700 12px/1.35 Inter,sans-serif;letter-spacing:0;text-transform:none;outline:none;transition:border-color .2s,box-shadow .2s}.product-enquiry-field input,.product-enquiry-field select{height:43px;padding:0 11px}.product-enquiry-field textarea{padding:11px;resize:vertical}.product-enquiry-field input:focus,.product-enquiry-field select:focus,.product-enquiry-field textarea:focus{border-color:#2588f6;box-shadow:0 0 0 3px rgba(37,136,246,.13)}.product-enquiry-modal-status{display:flex;align-items:center;gap:9px;padding:12px 13px;border:1px solid;font-size:11px;font-weight:800;line-height:1.45}.product-enquiry-modal-status.is-success{border-color:#a7e0ca;background:#effcf6;color:#087c5b}.product-enquiry-modal-status.is-error{border-color:#f5c5c9;background:#fff4f4;color:#af2735}.product-enquiry-added-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:3px}.product-enquiry-added-actions button,.product-enquiry-added-actions a{color:#176bc0;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.product-enquiry-added-actions a{display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid #7db7e9;padding-bottom:4px}.product-enquiry-added-actions button:hover,.product-enquiry-added-actions a:hover{color:#0b4e8f}@media(max-width:640px){.product-enquiry-added-actions{align-items:flex-start;flex-direction:column;gap:10px}}

/* Branded landing reveal before the opening hero. */
.landing-reveal{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;overflow:hidden;background:#071321;color:#fff;animation:landingRevealExit .8s cubic-bezier(.76,0,.24,1) 1.55s forwards;will-change:transform}.landing-reveal::before{content:'';position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(143,201,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(143,201,255,.22) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}.landing-reveal::after{content:'';position:absolute;right:-18vw;bottom:-39vw;width:70vw;height:70vw;border:1px solid rgba(96,174,255,.22);border-radius:50%;box-shadow:0 0 0 70px rgba(37,136,246,.035),0 0 0 140px rgba(37,136,246,.025)}.landing-reveal-frame{position:absolute;z-index:2;inset:22px;border:1px solid rgba(143,201,255,.17);pointer-events:none}.landing-reveal-frame::before,.landing-reveal-frame::after{content:'';position:absolute;width:54px;height:3px;background:#2588f6}.landing-reveal-frame::before{top:-1px;left:-1px}.landing-reveal-frame::after{right:-1px;bottom:-1px}.landing-reveal-brand{position:relative;z-index:3;display:grid;width:min(430px,62vw);justify-items:center}.landing-reveal-brand img{display:block;width:100%;height:auto;opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(18px) scale(.97);animation:landingLogoReveal .78s cubic-bezier(.22,1,.36,1) .16s forwards}.landing-reveal-rule{display:block;width:100%;height:2px;margin-top:27px;background:linear-gradient(90deg,transparent,#2588f6 18%,#8fcaff 82%,transparent);transform:scaleX(0);animation:landingRuleReveal .72s cubic-bezier(.22,1,.36,1) .48s forwards}.landing-reveal-brand p{margin:16px 0 0;color:#9fcfff;font-size:9px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;opacity:0;transform:translateY(8px);animation:landingLabelReveal .5s ease .7s forwards}.landing-reveal-scan{position:absolute;z-index:4;top:-12%;left:-10%;width:2px;height:124%;background:linear-gradient(180deg,transparent,#8ed5ff 18%,#2588f6 52%,transparent 88%);box-shadow:0 0 16px #2588f6,0 0 52px rgba(37,136,246,.65);transform:skewX(-9deg);opacity:0;animation:landingScan 1.08s cubic-bezier(.7,0,.3,1) .16s forwards;pointer-events:none}
@keyframes landingLogoReveal{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(18px) scale(.97)}100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes landingRuleReveal{to{transform:scaleX(1)}}
@keyframes landingLabelReveal{to{opacity:1;transform:none}}
@keyframes landingScan{0%{left:-10%;opacity:0}12%{opacity:1}82%{opacity:.9}100%{left:110%;opacity:0}}
@keyframes landingRevealExit{0%{transform:translateY(0)}100%{visibility:hidden;transform:translateY(-100%)}}
@media(max-width:640px){.landing-reveal-frame{inset:12px}.landing-reveal-frame::before,.landing-reveal-frame::after{width:38px}.landing-reveal-brand{width:min(250px,66vw)}.landing-reveal-rule{margin-top:21px}.landing-reveal-brand p{margin-top:13px;font-size:7px;letter-spacing:.19em}.landing-reveal::before{background-size:54px 54px}.landing-reveal::after{right:-35vw;bottom:-48vw;width:100vw;height:100vw}}
@media(prefers-reduced-motion:reduce){.landing-reveal{display:none;animation:none}.landing-reveal-brand img,.landing-reveal-rule,.landing-reveal-brand p,.landing-reveal-scan{animation:none}}

/* Hero opening motion: designed to echo a fabrication scan, without obscuring the work. */
.hero-modern{isolation:isolate}
.hero-modern::before{content:'';position:absolute;z-index:1;top:-20%;left:-18vw;width:2px;height:145%;opacity:0;background:linear-gradient(180deg,transparent 8%,rgba(142,213,255,.18) 28%,#2588f6 50%,rgba(142,213,255,.18) 70%,transparent 92%);box-shadow:0 0 18px rgba(37,136,246,.55),0 0 58px rgba(37,136,246,.22);pointer-events:none;transform:rotate(10deg)}
.hero-modern::after{content:'';position:absolute;z-index:1;inset:0;opacity:0;background:radial-gradient(circle at 74% 44%,rgba(45,156,255,.17),transparent 26%);pointer-events:none;transition:opacity 1.15s ease}
.hero-motion-pending .hero-static-photo{animation-play-state:paused}
.hero-motion-pending.hero-is-ready .hero-static-photo{animation-play-state:running}
.hero-motion-pending.hero-is-ready::before{animation:heroScanTraverse 9s cubic-bezier(.65,0,.35,1) .55s infinite}
.hero-motion-pending.hero-is-ready::after{opacity:1;animation:heroGlowBreathe 8s ease-in-out 1.1s infinite}
.hero-motion-pending.hero-is-ready .hero-grid{animation:heroGridDrift 22s linear infinite}
.hero-motion-pending .eyebrow,.hero-motion-pending .hero-copy h1,.hero-motion-pending .hero-copy>p,.hero-motion-pending .hero-actions,.hero-motion-pending .hero-meta,.hero-motion-pending .scroll-cue{opacity:0}
.hero-motion-pending .eyebrow,.hero-motion-pending .hero-copy h1,.hero-motion-pending .hero-copy>p,.hero-motion-pending .hero-actions,.hero-motion-pending .scroll-cue{transform:translateY(22px)}
.hero-motion-pending .hero-meta{transform:translateX(28px)}
.hero-motion-pending.hero-is-ready .eyebrow{animation:heroCopyRise .62s cubic-bezier(.22,1,.36,1) .04s both}
.hero-motion-pending.hero-is-ready .hero-copy h1{animation:heroCopyRise .84s cubic-bezier(.22,1,.36,1) .14s both}
.hero-motion-pending.hero-is-ready .hero-copy>p{animation:heroCopyRise .7s cubic-bezier(.22,1,.36,1) .34s both}
.hero-motion-pending.hero-is-ready .hero-actions{animation:heroCopyRise .7s cubic-bezier(.22,1,.36,1) .47s both}
.hero-motion-pending.hero-is-ready .hero-meta{animation:heroMetaReveal .82s cubic-bezier(.22,1,.36,1) .32s both}
.hero-motion-pending.hero-is-ready .scroll-cue{animation:heroCopyRise .62s cubic-bezier(.22,1,.36,1) .72s both}
@keyframes heroPhotoDrift{0%{transform:scale(1.045) translate3d(-.65%,-.35%,0)}100%{transform:scale(1.085) translate3d(.7%,.45%,0)}}
@keyframes heroScanTraverse{0%,12%{left:-18vw;opacity:0}18%{opacity:.62}78%{opacity:.38}100%{left:118vw;opacity:0}}
@keyframes heroGlowBreathe{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes heroGridDrift{to{background-position:80px 80px,80px 80px}}
@keyframes heroCopyRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroMetaReveal{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:640px){.hero-modern::before{left:-30vw}.hero-modern::after{background:radial-gradient(circle at 72% 25%,rgba(45,156,255,.13),transparent 36%)}.hero-motion-pending .hero-meta{transform:translateY(22px)}.hero-motion-pending.hero-is-ready .hero-meta{animation-name:heroCopyRise}}
@media(prefers-reduced-motion:reduce){.hero-static-media .hero-static-photo{animation:none!important;transform:none!important;will-change:auto!important}.hero-modern::before,.hero-modern::after,.hero-motion-pending .hero-grid{animation:none!important;opacity:0!important}.hero-motion-pending .eyebrow,.hero-motion-pending .hero-copy h1,.hero-motion-pending .hero-copy>p,.hero-motion-pending .hero-actions,.hero-motion-pending .hero-meta,.hero-motion-pending .scroll-cue{animation:none!important;opacity:1!important;transform:none!important}}

/* Search-focused material-system guide on the products directory. */
.products-seo-guide{width:min(1480px,calc(100% - 48px));margin:52px auto 0;padding:clamp(30px,4vw,58px);color:#dbe9f8;background:linear-gradient(135deg,#071426,#0c2748);border:1px solid rgba(255,255,255,.12);border-radius:28px}.products-seo-guide__intro{max-width:850px}.products-seo-guide__eyebrow{margin:0 0 12px;color:#69afff;font-size:10px;font-weight:900;letter-spacing:.28em;text-transform:uppercase}.products-seo-guide h2{margin:0;font:800 clamp(32px,4vw,58px)/1.02 'Outfit',sans-serif;letter-spacing:-.045em}.products-seo-guide__intro>p:last-child{max-width:760px;margin:20px 0 0;color:#aec0d5;font-size:15px;line-height:1.75}.products-seo-guide__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}.products-seo-guide article{display:flex;min-height:240px;flex-direction:column;padding:26px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:18px}.products-seo-guide h3{margin:0;color:#fff;font:800 25px/1.15 'Outfit',sans-serif}.products-seo-guide article p{margin:14px 0 24px;color:#b5c7da;font-size:14px;line-height:1.7}.products-seo-guide article a{display:inline-flex;align-items:center;gap:10px;margin-top:auto;color:#79b8ff;font-size:12px;font-weight:900;letter-spacing:.04em;text-decoration:none;text-transform:uppercase}.products-seo-guide article a:hover,.products-seo-guide article a:focus-visible{color:#fff}.products-seo-guide article a i{transition:transform .2s ease}.products-seo-guide article a:hover i,.products-seo-guide article a:focus-visible i{transform:translateX(4px)}
.products-seo-guide__topics{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}.products-seo-guide__topics span{margin-right:4px;color:#fff;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.products-seo-guide__topics a{padding:10px 14px;color:#cce2fb;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12px;font-weight:700;text-decoration:none}.products-seo-guide__topics a:hover,.products-seo-guide__topics a:focus-visible{color:#fff;background:rgba(105,175,255,.18);border-color:#69afff}
@media(max-width:899px){.products-seo-guide__grid{grid-template-columns:1fr}.products-seo-guide article{min-height:0}}
@media(max-width:599px){.products-seo-guide{width:calc(100% - 32px);margin-top:30px;padding:26px 20px;border-radius:20px}.products-seo-guide h2{font-size:34px}.products-seo-guide__grid{margin-top:24px}}

/* Full-bleed photorealistic PVC process film with approval marks in the opening hero. */
.hero-cinematic-media{inset:0!important;background:#071321}.hero-cinematic-frame{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.025);will-change:opacity,transform;filter:saturate(.94) contrast(1.025) brightness(.965);transition:opacity .32s ease-in-out}.hero-cinematic-frame-current{opacity:1}.hero-certification-meta{max-width:392px!important}.hero-certification-card{position:relative;overflow:hidden;width:100%;padding:21px;border:1px solid rgba(188,224,246,.3);border-radius:14px;background:linear-gradient(145deg,rgba(5,19,31,.81),rgba(4,13,23,.66));box-shadow:0 24px 60px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(18px)}.hero-certification-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(122deg,rgba(255,255,255,.1),transparent 30%,transparent 73%,rgba(37,136,246,.14));mix-blend-mode:screen}.hero-certification-kicker,.hero-certification-title,.hero-certification-artwork,.hero-certification-copy{position:relative;z-index:1}.hero-certification-kicker{display:flex;align-items:center;gap:9px;margin:0;color:#8fcaff;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.hero-certification-kicker span{width:20px;height:2px;background:#2588f6}.hero-certification-title{margin:15px 0 0;color:#fff;font-size:clamp(25px,2.3vw,32px);font-weight:800;line-height:.94;letter-spacing:-.045em;text-transform:uppercase}.hero-certification-title em{color:#91d5ff;font-style:normal}.hero-certification-artwork{display:block;width:100%;height:auto;margin:19px 0 15px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.24))}.hero-certification-copy{margin:0;color:#d1dee8;font-size:12px;line-height:1.55}
@media(max-width:1100px){.hero-certification-meta{max-width:450px!important}.hero-certification-card{max-width:450px}}
@media(max-width:640px){.hero-cinematic-frame{filter:saturate(.86) contrast(1.04) brightness(.77)}.hero-certification-meta{max-width:none!important}.hero-certification-card{padding:17px}.hero-certification-title{font-size:24px}.hero-certification-artwork{margin:16px 0 13px}.hero-certification-copy{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-cinematic-frame{transition:none}.hero-certification-card{backdrop-filter:none}}

/* Keep the film clearly visible across 70% of the wide hero canvas. */
@media(min-width:1101px){
  .hero-cinematic-media{clip-path:inset(0 0 0 30%)}
  .hero-shade{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 29%,rgba(7,19,33,.92) 34%,rgba(7,19,33,.38) 42%,rgba(7,19,33,.1) 53%,rgba(7,19,33,.02) 100%),linear-gradient(0deg,rgba(7,19,33,.56),transparent 48%)}
  .hero-inner{grid-template-columns:minmax(310px,31%) minmax(320px,360px);justify-content:space-between;gap:28px}
  .hero-copy{max-width:440px}
  .hero-copy h1{font-size:clamp(54px,4.75vw,82px)}
  .hero-copy p{max-width:420px;font-size:15px}
  .hero-actions{gap:14px 20px}
  .hero-certification-meta{max-width:360px!important}
  .hero-certification-card{padding:18px}
}

/* Interactive CAD blueprint hero generated from the supplied AutoCAD linework. */
.hero-blueprint-hero{background:#03152b}.hero-blueprint-hero::before{display:none}.hero-blueprint-hero::after{z-index:1;opacity:1;background:radial-gradient(circle at 72% 44%,rgba(53,200,255,.11),transparent 31%)}.hero-blueprint-media{z-index:2!important;inset:0!important;overflow:hidden;background:#03152b;isolation:isolate}.hero-blueprint-media::before,.hero-blueprint-media::after{content:'';position:absolute;inset:0;pointer-events:none}.hero-blueprint-media::before{z-index:0;background-image:linear-gradient(rgba(53,200,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(53,200,255,.12) 1px,transparent 1px),linear-gradient(rgba(234,251,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(234,251,255,.05) 1px,transparent 1px);background-position:center;background-size:64px 64px,64px 64px,16px 16px,16px 16px;mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%)}.hero-blueprint-media::after{z-index:1;background:radial-gradient(circle at 63% 50%,rgba(53,200,255,.13),transparent 31%),linear-gradient(90deg,rgba(3,21,43,.52),rgba(3,21,43,.08) 46%,rgba(3,21,43,.01))}.hero-blueprint-canvas,.hero-blueprint-fallback{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;object-position:65% center}.hero-blueprint-canvas{display:block;pointer-events:none}.hero-blueprint-fallback{left:31%;right:4%;width:65%;height:77%;top:12%;bottom:auto;padding:2.5%;opacity:.84;filter:drop-shadow(0 0 9px rgba(53,200,255,.38));transition:opacity .6s ease}.hero-blueprint-media.is-ready .hero-blueprint-fallback{opacity:0}.hero-blueprint-overlay{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none}.hero-blueprint-scan{position:absolute;top:-14%;bottom:-14%;left:-18%;width:12%;opacity:0;background:linear-gradient(90deg,transparent,rgba(234,251,255,.18) 36%,#eafbff 49%,rgba(53,200,255,.6) 55%,transparent 100%);box-shadow:0 0 16px rgba(234,251,255,.78),0 0 52px rgba(53,200,255,.58);transform:skewX(-9deg)}.hero-blueprint-media.is-animating .hero-blueprint-scan{animation:heroBlueprintScan 16s linear infinite}.hero-blueprint-crosshair{position:absolute;width:34px;height:34px;border:1px solid rgba(234,251,255,.42);border-radius:50%;box-shadow:0 0 0 8px rgba(53,200,255,.04)}.hero-blueprint-crosshair::before,.hero-blueprint-crosshair::after{content:'';position:absolute;left:50%;top:-13px;width:1px;height:58px;background:rgba(53,200,255,.4);transform:translateX(-50%)}.hero-blueprint-crosshair::after{top:50%;left:-13px;width:58px;height:1px;transform:translateY(-50%)}.hero-blueprint-crosshair-a{top:22%;left:51%}.hero-blueprint-crosshair-b{right:17%;bottom:21%;width:23px;height:23px;opacity:.6}.hero-blueprint-callout{position:absolute;display:grid;gap:3px;color:#eafbff;font-size:8px;font-weight:800;letter-spacing:.14em;line-height:1.2}.hero-blueprint-callout i{display:block;width:74px;height:1px;background:linear-gradient(90deg,#35c8ff,rgba(53,200,255,.05))}.hero-blueprint-callout span{color:#74d7ff}.hero-blueprint-callout b{font-size:9px;font-weight:800}.hero-blueprint-callout-a{top:19%;left:39%}.hero-blueprint-callout-b{right:7%;bottom:18%;text-align:right}.hero-blueprint-callout-b i{justify-self:end;background:linear-gradient(90deg,rgba(53,200,255,.05),#35c8ff)}.hero-blueprint-scale{position:absolute;right:5%;top:13%;display:flex;align-items:center;gap:8px;color:#8fddff;font-size:8px;font-weight:800;letter-spacing:.13em}.hero-blueprint-scale i{display:block;width:44px;height:7px;border-top:1px solid #35c8ff;border-bottom:1px solid rgba(53,200,255,.42);background:repeating-linear-gradient(90deg,#35c8ff 0 1px,transparent 1px 8px)}.hero-blueprint-scale b{color:#eafbff}.hero-blueprint-hero .hero-shade{z-index:1;background:linear-gradient(90deg,#03152b 0%,#03152b 29%,rgba(3,21,43,.9) 37%,rgba(3,21,43,.2) 57%,rgba(3,21,43,.03) 100%),linear-gradient(0deg,rgba(3,21,43,.64),transparent 54%)}.hero-blueprint-hero .hero-grid{z-index:1;opacity:.11;background-image:linear-gradient(rgba(53,200,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(53,200,255,.6) 1px,transparent 1px);background-size:128px 128px;mask-image:linear-gradient(90deg,transparent,#000 40%,transparent 100%)}.hero-blueprint-hero .hero-inner,.hero-blueprint-hero .scroll-cue{z-index:3}.hero-blueprint-hero .hero-certification-card{background:linear-gradient(145deg,rgba(3,21,43,.9),rgba(3,21,43,.72));border-color:rgba(143,218,255,.32)}
@keyframes heroBlueprintScan{0%,4%{left:-18%;opacity:0}8%{opacity:.8}42%{opacity:.56}49%,100%{left:116%;opacity:0}}
@media(min-width:1101px){.hero-blueprint-media{inset:0 0 0 55%!important;clip-path:none}.hero-blueprint-media::before{mask-image:none}.hero-blueprint-fallback{inset:12% 3% auto 3%;width:94%;height:76%;padding:0;object-position:center}.hero-blueprint-crosshair-a{left:27%}.hero-blueprint-callout-a{left:7%}.hero-blueprint-hero .hero-inner{grid-template-columns:minmax(310px,31%) minmax(320px,360px);justify-content:space-between;gap:28px}.hero-blueprint-hero .hero-copy{max-width:440px}.hero-blueprint-hero .hero-copy h1{font-size:clamp(54px,4.75vw,82px)}.hero-blueprint-hero .hero-copy p{max-width:420px;font-size:15px}.hero-blueprint-hero .hero-actions{gap:14px 20px}.hero-blueprint-hero .hero-certification-meta{position:absolute;right:47%;bottom:76px;width:230px;max-width:230px!important}.hero-blueprint-hero .hero-certification-card{padding:15px}.hero-blueprint-hero .hero-certification-kicker{font-size:7px}.hero-blueprint-hero .hero-certification-title{margin-top:12px;font-size:25px}.hero-blueprint-hero .hero-certification-artwork{margin:13px 0 11px}.hero-blueprint-hero .hero-certification-copy{font-size:10px}}
@media(max-width:1100px){.hero-blueprint-fallback{left:19%;right:4%;width:77%;object-position:center}.hero-blueprint-media::before{mask-image:none}.hero-blueprint-hero .hero-shade{background:linear-gradient(90deg,#03152b 0%,rgba(3,21,43,.86) 61%,rgba(3,21,43,.28)),linear-gradient(0deg,rgba(3,21,43,.68),transparent 55%)}}
@media(max-width:640px){#hero.hero-blueprint-hero{min-height:1840px;align-items:flex-start}.hero-blueprint-hero .hero-blueprint-media{inset:1010px 0 0!important;clip-path:none}.hero-blueprint-hero .hero-inner{padding-top:112px;padding-bottom:44px}.hero-blueprint-hero .hero-copy{max-width:none}.hero-blueprint-hero .hero-shade{background:linear-gradient(180deg,#03152b 0 35%,rgba(3,21,43,.95) 48%,rgba(3,21,43,.34) 76%,#03152b 100%)}.hero-blueprint-hero .hero-grid{display:none}.hero-blueprint-media::before{background-size:42px 42px,42px 42px,14px 14px,14px 14px;mask-image:none}.hero-blueprint-media::after{background:radial-gradient(circle at 50% 48%,rgba(53,200,255,.16),transparent 45%),linear-gradient(180deg,#03152b,transparent 31%,rgba(3,21,43,.43))}.hero-blueprint-fallback{inset:13% 4% auto 4%;width:92%;height:66%;padding:0;object-position:center}.hero-blueprint-crosshair-a{top:19%;left:15%}.hero-blueprint-crosshair-b{right:13%;bottom:17%}.hero-blueprint-callout-a{top:11%;left:8%}.hero-blueprint-callout-b{right:7%;bottom:11%}.hero-blueprint-scale{right:7%;top:8%}.hero-blueprint-hero .hero-meta{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.hero-blueprint-scan{animation:none!important}.hero-blueprint-media.is-ready .hero-blueprint-fallback{opacity:.84}.hero-blueprint-canvas{display:none}.hero-blueprint-hero .hero-grid{animation:none!important}}
.hero-blueprint-media .hero-blueprint-fallback{object-fit:contain;object-position:center}
@media(min-width:1101px){.hero-blueprint-media .hero-blueprint-fallback{inset:12% 3% auto 3%;width:94%;height:76%;padding:0}}
@media(max-width:1100px){.hero-blueprint-media .hero-blueprint-fallback{inset:12% 4% auto 19%;width:77%;height:77%;padding:2.5%}}
@media(max-width:640px){.hero-blueprint-media .hero-blueprint-fallback{inset:13% 4% auto 4%;width:92%;height:66%;padding:0}}

/* Animated piping blueprint supplied for the homepage hero. */
.hero-pipeline-art-hero{background:#071932}
.hero-pipeline-art{position:absolute;z-index:2;inset:0 0 0 43%;overflow:hidden;background:#1c3975 url('../images/content/hero/pipeline-blueprint.png') center/cover no-repeat;pointer-events:none;isolation:isolate}
.hero-pipeline-art::after{content:'';position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(7,25,50,.62),rgba(7,25,50,.03) 44%,rgba(7,25,50,.08)),linear-gradient(0deg,rgba(7,25,50,.5),transparent 36%,rgba(7,25,50,.08));pointer-events:none}
.hero-pipeline-art-image{position:absolute;z-index:1;inset:-14% -10%;display:block!important;width:120%;height:128%;object-fit:cover;object-position:center top;visibility:visible!important;opacity:.92;mix-blend-mode:screen;filter:saturate(1.04) contrast(1.22) brightness(1.08);transform:scale(1.06) translate3d(-1.5%,-.5%,0);transform-origin:center}
.hero-pipeline-art-hero .hero-shade{z-index:1;background:linear-gradient(90deg,#071321 0%,#071321 36%,rgba(7,19,33,.9) 43%,rgba(7,19,33,.24) 62%,rgba(7,19,33,.04) 100%),linear-gradient(0deg,rgba(7,19,33,.58),transparent 48%)}
.hero-pipeline-art-hero .hero-grid{z-index:3}
.hero-pipeline-art-hero .hero-inner,.hero-pipeline-art-hero .scroll-cue{z-index:4}
@media(max-width:1100px){.hero-pipeline-art{inset:0 0 0 24%}.hero-pipeline-art-image{opacity:.78}.hero-pipeline-art-hero .hero-shade{background:linear-gradient(90deg,#071321 0%,rgba(7,19,33,.91) 57%,rgba(7,19,33,.22)),linear-gradient(0deg,rgba(7,19,33,.66),transparent 50%)}}
@media(max-width:640px){.hero-pipeline-art{inset:0}.hero-pipeline-art-image{inset:-8% -35%;width:170%;height:118%;opacity:.62;object-position:center top}.hero-pipeline-art-hero .hero-shade{background:linear-gradient(0deg,#071321 8%,rgba(7,19,33,.88) 62%,rgba(7,19,33,.38)),linear-gradient(90deg,rgba(7,19,33,.8),rgba(7,19,33,.18))}}
@media(prefers-reduced-motion:reduce){.hero-pipeline-art-image{transform:none!important}}

/* Additional scroll depth and live progress for the growth timeline. */
.story-journey{overflow:clip}.story-journey-head{position:sticky;top:76px;z-index:6;margin-bottom:0;padding-top:16px;background:linear-gradient(180deg,#071321 64%,rgba(7,19,33,.93) 82%,rgba(7,19,33,0));backdrop-filter:blur(10px)}.story-journey-head strong{display:flex;align-items:baseline;gap:11px}.story-journey-head strong span{color:#fff;font-family:'Archivo Black',Outfit,sans-serif;font-size:clamp(24px,2.2vw,35px);line-height:1;letter-spacing:-.06em}.story-journey-head strong em{color:#91ceff;font-size:10px;font-style:normal;font-weight:900;letter-spacing:.16em}.story-timeline-rail::after{content:'';position:absolute;left:50%;top:var(--story-rail-position,0%);width:13px;height:13px;border:2px solid #e8f8ff;border-radius:50%;background:#2588f6;box-shadow:0 0 0 7px rgba(37,136,246,.16),0 0 24px rgba(100,193,255,.94);transform:translate(-50%,-50%);transition:top .14s linear}.story-milestone.is-visible{opacity:var(--story-card-opacity,1);transform:translate3d(0,var(--story-card-parallax,0px),0) scale(var(--story-card-scale,1))}.story-milestone.is-visible.is-active{opacity:1;border-color:#8bd2ff;background:linear-gradient(135deg,rgba(31,86,129,.98),rgba(10,39,67,.96));box-shadow:0 26px 60px rgba(0,0,0,.3),0 0 0 1px rgba(147,218,255,.1),inset 0 1px rgba(255,255,255,.13)}.story-milestone.is-active::before{background:#9edaff;box-shadow:0 0 12px rgba(86,181,244,.75)}.story-milestone.is-active .story-milestone-top span{color:#d9f2ff}.story-milestone.is-active .story-milestone-top i{border-color:#9edaff;color:#fff;box-shadow:0 0 16px rgba(87,181,245,.2)}.story-milestone.is-visible:hover{transform:translate3d(0,calc(var(--story-card-parallax,0px) - 6px),0) scale(1.01)}
@media(max-width:650px){.story-journey-head{top:65px;padding-top:12px}.story-journey-head strong span{font-size:27px}.story-timeline-rail::after{width:11px;height:11px;box-shadow:0 0 0 6px rgba(37,136,246,.16),0 0 20px rgba(100,193,255,.94)}}

/* Homepage PVC production loop, inspired by a compact automated factory line. */
.hero-pvc-factory-hero{background:#071321;isolation:isolate}
.hero-pvc-factory-hero::before,.hero-pvc-factory-hero::after{display:none!important}
.hero-pvc-process{position:absolute;z-index:2;inset:78px 17% 26% 40%;overflow:visible;pointer-events:none;perspective:1000px}
.pvc-process-glow{position:absolute;inset:4% -8% -12%;background:radial-gradient(ellipse at 52% 54%,rgba(70,167,255,.25),rgba(12,60,104,.11) 34%,transparent 69%);filter:blur(8px);opacity:.9}
.pvc-process-stage{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(145,205,255,.17);border-radius:26px;background:linear-gradient(145deg,rgba(19,48,75,.62),rgba(5,17,29,.42));box-shadow:0 28px 80px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(5px);transform:rotateX(2deg);transform-origin:center bottom}
.pvc-process-stage::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(118,185,238,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(118,185,238,.075) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.pvc-process-stage::after{content:'';position:absolute;left:8%;right:8%;bottom:8%;height:18%;border-radius:50%;background:rgba(0,0,0,.2);filter:blur(18px)}
.pvc-process-heading{position:absolute;z-index:4;left:5%;right:5%;top:5%;display:flex;justify-content:space-between;align-items:center;color:#d8edff;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.pvc-process-live{display:flex;align-items:center;gap:8px}.pvc-process-live i{width:7px;height:7px;border-radius:50%;background:#3ef59a;box-shadow:0 0 0 5px rgba(62,245,154,.08),0 0 16px rgba(62,245,154,.8);animation:pvcLivePulse 1.8s ease-in-out infinite}
.pvc-process-cycle{color:#77baf1;opacity:.72}
.pvc-conveyor{position:absolute;z-index:2;height:66px;filter:drop-shadow(0 16px 12px rgba(0,0,0,.22));transform:skewX(-12deg)}
.pvc-conveyor-input{left:-5%;top:51%;width:53%}.pvc-conveyor-output{left:57%;top:51%;width:49%}
.pvc-conveyor-bed{position:absolute;left:0;right:0;top:13px;height:40px;border-radius:8px;background:repeating-linear-gradient(90deg,#aec2d2 0 5px,#7890a3 5px 9px,#1b3449 9px 16px);background-size:32px 100%;border:1px solid rgba(220,241,255,.42);box-shadow:inset 0 8px 12px rgba(236,248,255,.16);animation:pvcConveyorRoll .75s linear infinite}
.pvc-conveyor-rail{position:absolute;z-index:2;left:-2%;right:-2%;height:7px;border-radius:20px;background:linear-gradient(180deg,#eaf7ff,#66849a 55%,#213c50);box-shadow:0 2px 0 rgba(255,255,255,.2)}
.pvc-conveyor-rail-top{top:7px}.pvc-conveyor-rail-bottom{bottom:7px}
.pvc-input-product,.pvc-output-product{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 15px 15px rgba(0,0,0,.35));will-change:transform,opacity}
.pvc-input-product{left:-5%;top:33%;width:34%;animation:pvcPipeFeed 12s cubic-bezier(.55,.08,.35,1) infinite}
.pvc-output-product{left:60%;top:33%;width:24%;opacity:0;animation:pvcElbowExit 12s cubic-bezier(.35,.02,.28,1) infinite}
.pvc-input-product img{display:block;width:100%;height:auto;transform:rotate(-4deg)}
.pvc-output-product img{display:block;width:100%;height:auto;transform:rotate(-8deg)}
.pvc-input-product span,.pvc-output-product span{position:absolute;left:50%;bottom:-17px;white-space:nowrap;transform:translateX(-50%);color:#9acfff;font-size:8px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 2px 8px #071321}
.pvc-forming-machine{position:absolute;z-index:5;left:41%;top:27%;width:22%;height:45%;min-width:132px;border-radius:24px 24px 18px 18px;background:linear-gradient(145deg,#eef7fb 0%,#9eb5c4 42%,#4b687c 72%,#263f52 100%);border:1px solid rgba(230,248,255,.72);box-shadow:0 24px 38px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.72);animation:pvcMachineWork 12s ease-in-out infinite}
.pvc-machine-top{position:absolute;left:9%;right:9%;top:-18%;height:33%;border-radius:50%;background:linear-gradient(145deg,#f3fbff,#7995a8 58%,#28475d);border:1px solid rgba(224,244,255,.65);box-shadow:0 10px 15px rgba(0,0,0,.22),inset 0 2px 4px rgba(255,255,255,.75)}
.pvc-machine-fan{position:absolute;left:50%;top:50%;width:46px;height:46px;border:7px solid #35536a;border-radius:50%;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,#8aa6b8,#dcebf2,#6d899c,#dcebf2,#8aa6b8);box-shadow:inset 0 0 0 6px #203c50;animation:pvcFanSpin 1.35s linear infinite}
.pvc-machine-fan i{position:absolute;inset:12px;border-radius:50%;background:#a8c1d0;box-shadow:0 0 12px rgba(173,223,255,.72)}
.pvc-machine-light{position:absolute;right:8%;bottom:3%;width:10px;height:10px;border-radius:50%;background:#46f5a1;box-shadow:0 0 12px #46f5a1;animation:pvcMachineLight 12s steps(1,end) infinite}
.pvc-machine-face{position:absolute;inset:22% 9% 13%;border-radius:13px;background:linear-gradient(145deg,rgba(14,39,58,.93),rgba(3,16,27,.88));border:1px solid rgba(215,239,255,.25);box-shadow:inset 0 12px 18px rgba(0,0,0,.24)}
.pvc-machine-port{position:absolute;left:50%;top:48%;width:66%;aspect-ratio:1;border:8px solid #7391a5;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#06101a 0 41%,#16364f 43% 58%,#89a7b8 60% 65%,#28465d 67%);box-shadow:0 0 0 6px rgba(7,20,33,.25),0 0 24px rgba(46,155,255,.2);animation:pvcPortHeat 12s ease-in-out infinite}
.pvc-machine-screen{position:absolute;left:9%;right:9%;bottom:7%;height:12px;display:flex;gap:4px}.pvc-machine-screen i{flex:1;border-radius:3px;background:#1e6fc0;box-shadow:0 0 7px rgba(68,167,255,.52);animation:pvcScreenBars 1.2s ease-in-out infinite}.pvc-machine-screen i:nth-child(2){animation-delay:.2s}.pvc-machine-screen i:nth-child(3){animation-delay:.4s}
.pvc-machine-chamber{position:absolute;left:-8%;right:-8%;top:46%;display:flex;justify-content:space-between;pointer-events:none}.pvc-machine-chamber span{width:12px;height:12px;border-radius:50%;background:#2f90ef;box-shadow:0 0 15px #2f90ef;opacity:.25;animation:pvcChamberPulse 12s ease-in-out infinite}.pvc-machine-chamber span:nth-child(2){position:absolute;left:50%;transform:translateX(-50%);background:#ff844f;box-shadow:0 0 20px #ff7940}.pvc-machine-shadow{position:absolute;left:7%;right:7%;bottom:-10%;height:16%;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(8px)}
.pvc-process-meter{position:absolute;z-index:4;left:7%;right:7%;bottom:8%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;color:#91cfff;font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.pvc-meter-track{position:relative;height:4px;overflow:hidden;border-radius:10px;background:rgba(117,178,221,.18)}.pvc-meter-track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#1d7de4,#52c6ff,#54f3ae);box-shadow:0 0 12px rgba(63,181,255,.7);animation:pvcMeterFill 12s ease-in-out infinite}.pvc-meter-value{color:#54f3ae;animation:pvcMeterStatus 12s steps(1,end) infinite}
.hero-pvc-factory-hero .hero-shade{z-index:3;background:linear-gradient(90deg,#071321 0%,#071321 34%,rgba(7,19,33,.92) 42%,rgba(7,19,33,.28) 67%,rgba(7,19,33,.08) 100%),linear-gradient(0deg,rgba(7,19,33,.72),transparent 56%)}
.hero-pvc-factory-hero .hero-grid{z-index:4}.hero-pvc-factory-hero .hero-inner,.hero-pvc-factory-hero .scroll-cue{z-index:5}
.hero-pvc-factory-hero .pvc-process-stage *{animation-play-state:paused}.hero-pvc-factory-hero.hero-is-ready .pvc-process-stage *{animation-play-state:running}
@keyframes pvcConveyorRoll{to{background-position:32px 0}}
@keyframes pvcLivePulse{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes pvcPipeFeed{0%,7%{opacity:0;transform:translate3d(-28%,4%,0) scale(.88)}11%{opacity:1}15%,31%{opacity:1;transform:translate3d(55%,0,0) scale(1)}39%,100%{opacity:0;transform:translate3d(145%,0,0) scale(.72)}}
@keyframes pvcElbowExit{0%,50%{opacity:0;transform:translate3d(-42%,2%,0) rotate(-7deg) scale(.68)}57%{opacity:.15}67%,86%{opacity:1;transform:translate3d(42%,0,0) rotate(0) scale(1)}94%,100%{opacity:0;transform:translate3d(102%,-2%,0) rotate(5deg) scale(.92)}}
@keyframes pvcMachineWork{0%,31%,70%,100%{transform:translateY(0)}38%,43%,48%,53%,58%,63%{transform:translateY(-2px)}40.5%,45.5%,50.5%,55.5%,60.5%,65.5%{transform:translateY(1px)}}
@keyframes pvcFanSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pvcMachineLight{0%,31%,68%,100%{background:#46f5a1;box-shadow:0 0 12px #46f5a1}32%,67%{background:#ff8b4f;box-shadow:0 0 16px #ff7045}}
@keyframes pvcPortHeat{0%,30%,69%,100%{filter:none;box-shadow:0 0 0 6px rgba(7,20,33,.25),0 0 24px rgba(46,155,255,.2)}39%,61%{filter:saturate(1.5);box-shadow:0 0 0 6px rgba(255,112,69,.12),0 0 34px rgba(255,116,65,.7)}}
@keyframes pvcScreenBars{0%,100%{opacity:.35;transform:scaleY(.45)}50%{opacity:1;transform:scaleY(1)}}
@keyframes pvcChamberPulse{0%,30%,70%,100%{opacity:.18;transform:scale(.8)}39%,61%{opacity:1;transform:scale(1.35)}}
@keyframes pvcMeterFill{0%,9%{width:0}30%{width:31%}62%{width:82%}74%,91%{width:100%}100%{width:0}}
@keyframes pvcMeterStatus{0%,31%{color:#91cfff}32%,66%{color:#ff9a68}67%,100%{color:#54f3ae}}
@media(max-width:1180px){.hero-pvc-process{inset:82px 2% 28% 34%;opacity:.82}.pvc-process-stage{filter:saturate(.9)}.hero-pvc-factory-hero .hero-shade{background:linear-gradient(90deg,#071321 0%,rgba(7,19,33,.95) 43%,rgba(7,19,33,.46) 72%,rgba(7,19,33,.2)),linear-gradient(0deg,rgba(7,19,33,.72),transparent 58%)}}
@media(max-width:900px){.hero-pvc-process{inset:67px -8% 48% 23%;opacity:.48}.pvc-process-heading,.pvc-process-meter{display:none}.pvc-forming-machine{min-width:100px}.hero-pvc-factory-hero .hero-shade{background:linear-gradient(0deg,#071321 9%,rgba(7,19,33,.93) 58%,rgba(7,19,33,.42)),linear-gradient(90deg,rgba(7,19,33,.92),rgba(7,19,33,.2))}}
@media(max-width:640px){.hero-pvc-process{inset:66px -32% 57% 5%;opacity:.36}.pvc-process-stage{border-radius:18px}.pvc-forming-machine{min-width:88px}.pvc-input-product span,.pvc-output-product span{display:none}}
@media(prefers-reduced-motion:reduce){.hero-pvc-factory-hero .pvc-process-stage *{animation:none!important}.pvc-input-product{opacity:.7;transform:translate3d(24%,0,0)}.pvc-output-product{opacity:1;transform:translate3d(32%,0,0)}.pvc-meter-track i{width:100%}.pvc-meter-value{color:#54f3ae}}
@media(prefers-reduced-motion:reduce){.story-journey-head{position:relative;top:auto;backdrop-filter:none}.story-timeline-rail::after{top:100%;transition:none}.story-milestone.is-visible{opacity:1;transform:none}.story-milestone.is-visible:hover{transform:none}}

/* Premium industrial growth timeline. */
#our-story.story-modern {
    --story-navy: #051527;
    --story-navy-soft: #08213b;
    --story-blue: #2588f6;
    --story-blue-bright: #49b9ff;
    --story-blue-light: #a8dcff;
    position: relative;
    padding-top: 132px !important;
    background:
        radial-gradient(circle at 12% 4%, rgba(37, 136, 246, .16), transparent 25%),
        linear-gradient(180deg, #071a2e 0%, #051527 32%, #041321 100%) !important;
    color: #fff;
}

#our-story.story-modern::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 430px;
    pointer-events: none;
    opacity: .26;
    background-image:
        linear-gradient(rgba(109, 193, 255, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 193, 255, .12) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, #000, transparent 90%);
}

.story-modern-intro {
    position: relative;
    z-index: 2;
    padding-bottom: 98px;
}

.story-modern-kicker {
    color: var(--story-blue-light);
}

.story-modern-heading h2 {
    color: #fff;
    text-wrap: balance;
}

.story-modern-heading h2 em {
    color: var(--story-blue-bright);
    text-shadow: 0 0 34px rgba(73, 185, 255, .2);
}

.story-modern-lede p {
    color: #c2d4e3;
}

.story-modern-lede span {
    color: #8fd2ff;
}

.story-journey {
    --story-grid-shift: 0px;
    --story-art-shift: 0px;
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 50% 18%, rgba(37, 136, 246, .13), transparent 31%),
        linear-gradient(180deg, rgba(4, 19, 33, .3), rgba(3, 15, 28, .92));
    isolation: isolate;
}

.story-journey::before,
.story-journey::after {
    content: none;
}

.story-blueprint-grid {
    position: absolute;
    z-index: -3;
    inset: -120px 0 -80px;
    opacity: .28;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 203, 255, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 203, 255, .18) 1px, transparent 1px),
        linear-gradient(rgba(125, 203, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 203, 255, .07) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
    background-position: 0 0;
    transform: translate3d(0, var(--story-grid-shift), 0);
    will-change: transform;
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.story-industrial-geometry {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .72;
    transform: translate3d(0, var(--story-art-shift), 0);
    will-change: transform;
}

.story-industrial-geometry i {
    position: absolute;
    display: block;
}

.story-geometry-ring {
    border: 1px solid rgba(94, 184, 249, .18);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(37, 136, 246, .025),
        0 0 0 78px rgba(37, 136, 246, .018);
}

.story-geometry-ring::before,
.story-geometry-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.story-geometry-ring::before {
    inset: 16%;
    border: 1px dashed rgba(139, 211, 255, .2);
}

.story-geometry-ring::after {
    inset: 45%;
    border: 1px solid rgba(168, 220, 255, .3);
    background: rgba(37, 136, 246, .05);
}

.story-geometry-ring--one {
    top: 8%;
    right: -210px;
    width: 540px;
    height: 540px;
}

.story-geometry-ring--two {
    bottom: 5%;
    left: -135px;
    width: 330px;
    height: 330px;
    opacity: .65;
}

.story-geometry-pipe {
    width: 320px;
    height: 320px;
    border: 2px solid rgba(85, 178, 244, .13);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 0 100% 0 0;
}

.story-geometry-pipe::before,
.story-geometry-pipe::after {
    content: '';
    position: absolute;
    background: rgba(115, 202, 255, .18);
}

.story-geometry-pipe::before {
    top: -7px;
    left: -9px;
    width: 18px;
    height: 12px;
    border: 1px solid rgba(139, 211, 255, .28);
    background: #071b30;
}

.story-geometry-pipe::after {
    right: -7px;
    bottom: -9px;
    width: 12px;
    height: 18px;
    border: 1px solid rgba(139, 211, 255, .28);
    background: #071b30;
}

.story-geometry-pipe--one {
    top: 34%;
    left: -235px;
    transform: rotate(42deg);
}

.story-geometry-pipe--two {
    right: -245px;
    bottom: 25%;
    transform: rotate(222deg) scale(.8);
}

.story-geometry-dimension {
    top: 51%;
    right: 2.5%;
    width: 130px;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(129, 206, 255, .28) 0 1px, transparent 1px 10px);
}

.story-geometry-dimension::before,
.story-geometry-dimension::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 1px;
    height: 15px;
    background: rgba(129, 206, 255, .35);
}

.story-geometry-dimension::before {
    left: 0;
}

.story-geometry-dimension::after {
    right: 0;
}

.story-journey-shell {
    position: relative;
    z-index: 2;
    padding: 80px 0 128px;
}

.story-journey-head {
    position: sticky;
    top: 76px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 0;
    padding: 18px 0 22px;
    border-bottom: 1px solid rgba(171, 219, 250, .24);
    background: linear-gradient(180deg, rgba(5, 21, 39, .98) 0 72%, rgba(5, 21, 39, 0));
    backdrop-filter: blur(12px);
}

.story-journey-head p {
    color: #a8dcff;
}

.story-progress-indicator {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 150px;
    color: #fff;
    text-align: right;
}

.story-progress-indicator span {
    color: #fff;
    font-family: 'Archivo Black', Outfit, sans-serif;
    font-size: clamp(27px, 2.5vw, 38px);
    line-height: 1;
    letter-spacing: -.065em;
}

.story-progress-indicator i {
    width: 24px;
    height: 1px;
    background: rgba(155, 216, 255, .48);
}

.story-progress-indicator em {
    color: #91ceff;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .16em;
    white-space: nowrap;
}

.story-timeline {
    --story-timeline-progress: 0;
    --story-rail-position: 0%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: minmax(300px, auto);
    column-gap: clamp(76px, 8vw, 120px);
    row-gap: 20px;
    padding: 58px 0 14px;
}

.story-timeline-rail {
    position: absolute;
    top: 64px;
    bottom: 70px;
    left: 50%;
    width: 2px;
    overflow: visible;
    background: rgba(161, 208, 242, .2);
    transform: translateX(-50%);
}

.story-timeline-rail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(162, 218, 255, .28) 0 4px, transparent 4px 11px);
}

.story-timeline-rail i {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(#a8dcff, #49b9ff 42%, #2588f6);
    box-shadow: 0 0 12px rgba(73, 185, 255, .94), 0 0 28px rgba(37, 136, 246, .42);
    transform: scaleY(var(--story-timeline-progress));
    transform-origin: top center;
    transition: transform .12s linear;
}

.story-timeline-rail::after {
    z-index: 3;
    top: var(--story-rail-position);
    width: 14px;
    height: 14px;
    border: 2px solid #e8f8ff;
    background: #49b9ff;
    box-shadow:
        0 0 0 7px rgba(37, 136, 246, .16),
        0 0 28px rgba(100, 193, 255, .98);
    transition: top .12s linear;
}

.story-milestone {
    --story-entry-x: -66px;
    position: relative;
    grid-row: var(--story-row);
    min-height: 280px;
    padding: 28px 30px 31px;
    overflow: visible;
    background:
        linear-gradient(135deg, rgba(25, 69, 105, .66), rgba(7, 31, 54, .74)),
        rgba(9, 36, 62, .68);
    border: 1px solid rgba(126, 204, 255, .28);
    border-radius: 3px;
    box-shadow:
        0 22px 52px rgba(0, 0, 0, .22),
        inset 0 1px rgba(255, 255, 255, .06);
    opacity: 0;
    transform: translate3d(var(--story-entry-x), 30px, 0) scale(.985);
    transition:
        opacity .7s var(--story-delay) ease,
        transform .82s var(--story-delay) cubic-bezier(.22, 1, .36, 1),
        border-color .38s ease,
        background .38s ease,
        box-shadow .38s ease;
    backdrop-filter: blur(11px);
    will-change: transform, opacity;
}

.story-milestone::after {
    transition: border-color .35s, background .35s, box-shadow .35s, transform .35s;
}

.story-milestone::before {
    transition: background .35s, box-shadow .35s;
}

.story-milestone--left {
    grid-column: 1;
}

.story-milestone--right {
    --story-entry-x: 66px;
    grid-column: 2;
}

.story-milestone--left::before,
.story-milestone--right::before {
    top: 44px;
    width: clamp(38px, 4.1vw, 60px);
    height: 1px;
    background: linear-gradient(90deg, rgba(145, 211, 255, .18), rgba(145, 211, 255, .7));
}

.story-milestone--left::before {
    right: calc(clamp(38px, 4.1vw, 60px) * -1);
}

.story-milestone--right::before {
    left: calc(clamp(38px, 4.1vw, 60px) * -1);
    background: linear-gradient(90deg, rgba(145, 211, 255, .7), rgba(145, 211, 255, .18));
}

.story-milestone--left::after,
.story-milestone--right::after {
    top: 37px;
    width: 14px;
    height: 14px;
    border: 2px solid #a8dcff;
    background: #0a3456;
    box-shadow: 0 0 0 6px rgba(37, 136, 246, .1);
}

.story-milestone--left::after {
    right: calc((clamp(38px, 4.1vw, 60px) * -1) - 8px);
}

.story-milestone--right::after {
    left: calc((clamp(38px, 4.1vw, 60px) * -1) - 8px);
}

.story-milestone.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.story-milestone.is-reached::after {
    border-color: #e8f8ff;
    background: #2588f6;
    box-shadow:
        0 0 0 7px rgba(37, 136, 246, .15),
        0 0 22px rgba(73, 185, 255, .72);
}

.story-milestone.is-active {
    border-color: rgba(142, 219, 255, .92);
    background:
        radial-gradient(circle at 92% 8%, rgba(73, 185, 255, .17), transparent 30%),
        linear-gradient(135deg, rgba(33, 91, 136, .9), rgba(8, 38, 66, .92));
    box-shadow:
        0 28px 64px rgba(0, 0, 0, .32),
        0 0 0 1px rgba(73, 185, 255, .13),
        0 0 34px rgba(37, 136, 246, .13),
        inset 0 1px rgba(255, 255, 255, .13);
}

.story-milestone.is-active::before {
    background: #9edaff;
    box-shadow: 0 0 13px rgba(86, 181, 244, .82);
}

.story-milestone.is-active::after {
    transform: scale(1.16);
    border-color: #fff;
    background: #49b9ff;
    box-shadow:
        0 0 0 8px rgba(37, 136, 246, .18),
        0 0 30px rgba(100, 193, 255, 1);
}

.story-milestone-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.story-milestone-top .story-year {
    display: block;
    overflow: hidden;
    color: #91d5ff;
    font-family: 'Archivo Black', Outfit, sans-serif;
    font-size: clamp(34px, 3vw, 48px);
    line-height: .88;
    letter-spacing: -.075em;
}

.story-milestone-top .story-year .story-year-value {
    display: block;
    width: auto;
    height: auto;
    color: inherit;
    font: inherit;
    clip-path: inset(0 100% 0 0);
    opacity: .2;
    transform: translateY(12px);
    transition:
        clip-path .75s calc(var(--story-delay) + 100ms) cubic-bezier(.22, 1, .36, 1),
        opacity .5s calc(var(--story-delay) + 100ms) ease,
        transform .75s calc(var(--story-delay) + 100ms) cubic-bezier(.22, 1, .36, 1);
}

.story-milestone.is-visible .story-year-value {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0);
}

.story-milestone-top .story-milestone-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(145, 211, 255, .4);
    border-radius: 50%;
    color: #a7dcff;
    font-size: 14px;
    background: rgba(37, 136, 246, .08);
    box-shadow: inset 0 0 18px rgba(73, 185, 255, .035);
    transition: color .35s, border-color .35s, box-shadow .35s, background .35s;
}

.story-milestone-top .story-milestone-icon i {
    display: inline-block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    box-shadow: none;
}

.story-milestone.is-active .story-milestone-icon {
    border-color: #9edaff;
    color: #fff;
    background: rgba(73, 185, 255, .17);
    box-shadow: 0 0 19px rgba(87, 181, 245, .23);
}

.story-milestone > .story-milestone-event {
    max-width: calc(100% - 38px);
    margin: 22px 0 0;
    color: #d5e9f7;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.story-milestone > .story-milestone-category {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 10px 0 0;
    padding: 5px 8px;
    border: 1px solid rgba(104, 194, 255, .22);
    color: #75c9ff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: rgba(37, 136, 246, .08);
}

.story-milestone h3 {
    max-width: 410px;
    margin: 14px 0 0;
    color: #fff;
    font-family: Outfit, sans-serif;
    font-size: clamp(25px, 2.15vw, 34px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.045em;
    text-transform: none;
    text-wrap: balance;
}

.story-milestone > .story-milestone-detail {
    position: relative;
    z-index: 2;
    max-width: 435px;
    margin: 14px 0 0;
    color: #c2d6e6;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    text-transform: none;
}

.story-milestone-sequence {
    position: absolute;
    z-index: 1;
    right: 22px;
    bottom: 11px;
    color: rgba(177, 220, 247, .07);
    font-family: 'Archivo Black', Outfit, sans-serif;
    font-size: 67px;
    line-height: 1;
    letter-spacing: -.09em;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .story-milestone.is-visible:hover {
        z-index: 3;
        transform: translate3d(0, -6px, 0) scale(1.008);
        border-color: #7ac4f7;
        box-shadow:
            0 28px 62px rgba(0, 0, 0, .3),
            0 0 28px rgba(37, 136, 246, .12);
    }
}

@media (max-width: 1000px) {
    #our-story.story-modern {
        padding-top: 100px !important;
    }

    .story-modern-intro {
        padding-bottom: 76px;
    }

    .story-journey-shell {
        padding: 66px 0 100px;
    }

    .story-timeline {
        grid-auto-rows: minmax(320px, auto);
        column-gap: 66px;
    }

    .story-milestone {
        padding: 24px 23px 27px;
    }

    .story-milestone--left::before,
    .story-milestone--right::before {
        width: 33px;
    }

    .story-milestone--left::before {
        right: -33px;
    }

    .story-milestone--right::before {
        left: -33px;
    }

    .story-milestone--left::after {
        right: -41px;
    }

    .story-milestone--right::after {
        left: -41px;
    }

    .story-milestone h3 {
        font-size: clamp(23px, 3vw, 29px);
    }

    .story-milestone > .story-milestone-detail {
        font-size: 12px;
    }

    .story-geometry-ring--one {
        right: -300px;
    }
}

@media (max-width: 650px) {
    #our-story.story-modern {
        padding-top: 76px !important;
    }

    #our-story.story-modern::before {
        height: 560px;
        background-size: 36px 36px;
    }

    .story-modern-intro {
        gap: 24px;
        padding-bottom: 58px;
    }

    .story-modern-heading h2 {
        font-size: clamp(39px, 12.5vw, 54px);
    }

    .story-modern-lede {
        gap: 20px;
    }

    .story-modern-lede p {
        font-size: 13px;
    }

    .story-journey-shell {
        padding: 48px 0 72px;
    }

    .story-journey-head {
        top: 64px;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        padding: 13px 0 18px;
    }

    .story-journey-head p {
        gap: 8px;
        font-size: 8px;
        letter-spacing: .13em;
    }

    .story-journey-head p span {
        width: 20px;
    }

    .story-progress-indicator {
        min-width: 112px;
        justify-content: flex-end;
        gap: 7px;
    }

    .story-progress-indicator span {
        font-size: 24px;
    }

    .story-progress-indicator i {
        width: 10px;
    }

    .story-progress-indicator em {
        font-size: 8px;
        letter-spacing: .09em;
    }

    .story-timeline {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 22px;
        padding: 42px 0 0 42px;
    }

    .story-timeline-rail {
        top: 49px;
        bottom: 42px;
        left: 7px;
        transform: none;
    }

    .story-milestone,
    .story-milestone--left,
    .story-milestone--right {
        --story-entry-x: 28px;
        grid-column: 1;
        grid-row: auto;
        min-height: 0;
        padding: 21px 20px 24px;
    }

    .story-milestone--left::before,
    .story-milestone--right::before {
        top: 36px;
        left: -35px;
        right: auto;
        width: 35px;
        background: linear-gradient(90deg, rgba(145, 211, 255, .72), rgba(145, 211, 255, .18));
    }

    .story-milestone--left::after,
    .story-milestone--right::after {
        top: 29px;
        left: -42px;
        right: auto;
    }

    .story-milestone-top .story-year {
        font-size: 32px;
    }

    .story-milestone-top .story-milestone-icon {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .story-milestone > .story-milestone-event {
        margin-top: 18px;
        font-size: 9px;
    }

    .story-milestone > .story-milestone-category {
        font-size: 7.5px;
    }

    .story-milestone h3 {
        font-size: clamp(24px, 8vw, 30px);
    }

    .story-milestone > .story-milestone-detail {
        font-size: 12px;
        line-height: 1.6;
    }

    .story-milestone-sequence {
        right: 15px;
        bottom: 10px;
        font-size: 52px;
    }

    .story-blueprint-grid {
        opacity: .2;
        background-size: 56px 56px, 56px 56px, 14px 14px, 14px 14px;
        mask-image: linear-gradient(90deg, #000, transparent 96%);
    }

    .story-geometry-ring--one {
        top: 4%;
        right: -290px;
        width: 430px;
        height: 430px;
    }

    .story-geometry-ring--two {
        left: -230px;
    }

    .story-geometry-pipe,
    .story-geometry-dimension {
        opacity: .5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-blueprint-grid,
    .story-industrial-geometry {
        transform: none !important;
        will-change: auto;
    }

    .story-timeline-rail i {
        transform: scaleY(1);
        transition: none;
    }

    .story-timeline-rail::after {
        display: none;
    }

    .story-milestone,
    .story-milestone.is-visible,
    .story-milestone.is-visible:hover {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    .story-year-value {
        clip-path: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.product-enquiry-guidance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: -4px 0 16px;
    padding: 11px 13px;
    border: 1px solid #bfdbfe;
    border-left: 3px solid #2588f6;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e4f7d;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
}

.product-enquiry-guidance i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #2588f6;
    font-size: 12px;
}

/* The catalogue starts on a light surface, so its fixed navigation needs a
   permanent light treatment instead of the homepage's hero-aware white mode. */
.products-page .site-nav .nav-shell,
.products-page .site-nav.nav-scrolled .nav-shell {
    border-bottom-color: rgba(15, 50, 85, .1);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px rgba(15, 34, 58, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.products-page .site-nav .nav-logo,
.products-page .site-nav.nav-on-light .nav-logo {
    filter: none;
}

.products-page .site-nav .nav-links a,
.products-page .site-nav.nav-on-light .nav-links a {
    color: #315170;
}

.products-page .site-nav .nav-links a:hover,
.products-page .site-nav.nav-on-light .nav-links a:hover {
    color: #0875e1;
}

.products-page .site-nav .nav-enquiry-cart,
.products-page .site-nav.nav-on-light .nav-enquiry-cart {
    border-color: rgba(8, 117, 225, .3);
    color: #0875e1;
}

.products-page .site-nav .nav-enquiry-cart:hover,
.products-page .site-nav.nav-on-light .nav-enquiry-cart:hover {
    border-color: #0875e1;
    background: rgba(8, 117, 225, .08);
}

.products-page .site-nav .menu-toggle,
.products-page .site-nav.nav-on-light .menu-toggle,
.products-page .nav-enquiry-cart-mobile {
    border-color: rgba(8, 117, 225, .3);
    color: #0875e1;
}

.products-page .site-nav .menu-toggle span,
.products-page .site-nav.nav-on-light .menu-toggle span {
    background: #0875e1;
}

/* Consistent AAMCO header branding across the main, catalogue and enquiry pages. */
.site-nav .nav-logo {
    width: 160px;
    height: auto;
}

@media (max-width: 640px) {
    .site-nav .nav-logo {
        width: 130px;
    }
}
.products-page-catalogue{padding-top:9rem!important}

.products-page #products-grid .product-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-delay: var(--catalogue-card-delay, 0ms);
}

/* Horizontal product discovery strip before Precision Services. */
.product-showcase {
    position: relative;
    overflow: hidden;
    padding: 120px 0 126px;
    background:
        radial-gradient(circle at 92% 0%, rgba(37, 136, 246, .11), transparent 30%),
        #f4f7fa;
    color: #071321;
}

.product-showcase-shell {
    width: min(100% - 48px, 1440px);
    margin: 0 auto;
}

.product-showcase-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 44px;
    margin-bottom: 48px;
}

.product-showcase-head > div:first-child > p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    color: #1476d4;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
}

.product-showcase-head > div:first-child > p span {
    display: block;
    width: 34px;
    height: 2px;
    background: #2588f6;
}

.product-showcase-head h2 {
    margin: 0;
    color: #071321;
    font-family: 'Archivo Black', Outfit, sans-serif;
    font-size: clamp(43px, 5.5vw, 78px);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.07em;
    text-transform: uppercase;
}

.product-showcase-head h2 em {
    color: #2588f6;
    font-style: normal;
}

.product-showcase-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 4px;
}

.product-showcase-controls {
    display: flex;
    gap: 8px;
}

.product-showcase-controls button {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid #cad8e5;
    border-radius: 50%;
    background: #fff;
    color: #17344f;
    transition: .22s ease;
}

.product-showcase-controls button:hover {
    border-color: #2588f6;
    background: #2588f6;
    color: #fff;
    transform: translateY(-2px);
}

.product-showcase-explore {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border-radius: 999px;
    background: #071321;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    box-shadow: 0 14px 30px rgba(7, 19, 33, .15);
    transition: .25s ease;
}

.product-showcase-explore:hover {
    background: #2588f6;
    transform: translateY(-2px);
}

.product-showcase-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(270px, 25vw, 350px);
    gap: 22px;
    overflow-x: auto;
    padding: 4px 3px 30px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #7fb9ee #dbe7f1;
    overscroll-behavior-inline: contain;
}

.product-showcase-track::-webkit-scrollbar {
    height: 4px;
}

.product-showcase-track::-webkit-scrollbar-track {
    background: #dbe7f1;
}

.product-showcase-track::-webkit-scrollbar-thumb {
    background: #2588f6;
}

.product-showcase-card {
    position: relative;
    display: flex;
    min-height: 500px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #dbe5ed;
    border-radius: 24px;
    background: #fff;
    color: #071321;
    box-shadow: 0 16px 42px rgba(15, 42, 68, .08);
    scroll-snap-align: start;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s;
}

.product-showcase-card:hover {
    border-color: #9ccdf5;
    box-shadow: 0 26px 60px rgba(19, 72, 120, .15);
    transform: translateY(-8px);
}

.product-showcase-index {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
    color: rgba(12, 46, 75, .3);
    font-family: 'Archivo Black', Outfit, sans-serif;
    font-size: 12px;
}

.product-showcase-image {
    display: grid;
    height: 258px;
    flex: 0 0 auto;
    place-items: center;
    padding: 28px;
    background: linear-gradient(155deg, #fbfcfd, #eaf1f6);
}

.product-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.product-showcase-card:hover .product-showcase-image img {
    transform: scale(1.06);
}

.product-showcase-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.product-showcase-card-copy > span {
    color: #2588f6;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .18em;
}

.product-showcase-card-copy h3 {
    margin: 11px 0 0;
    color: #071321;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}

.product-showcase-card-copy p {
    display: -webkit-box;
    overflow: hidden;
    margin: 15px 0 0;
    color: #647587;
    font-size: 12px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.product-showcase-card-copy strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e4eaf0;
    color: #17344f;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-showcase-card-copy strong i {
    color: #2588f6;
    transition: transform .25s;
}

.product-showcase-card:hover strong i {
    transform: translateX(4px);
}

.product-showcase-mobile-action {
    display: none;
}

@media (max-width: 780px) {
    .product-showcase {
        padding: 78px 0 84px;
    }

    .product-showcase-shell {
        width: calc(100% - 32px);
    }

    .product-showcase-head {
        margin-bottom: 32px;
    }

    .product-showcase-head h2 {
        font-size: clamp(38px, 11.5vw, 54px);
    }

    .product-showcase-actions {
        display: none;
    }

    .product-showcase-track {
        grid-auto-columns: min(82vw, 310px);
        gap: 14px;
        margin-right: -16px;
        padding-right: 16px;
    }

    .product-showcase-card {
        min-height: 460px;
        border-radius: 20px;
    }

    .product-showcase-image {
        height: 230px;
    }

    .product-showcase-mobile-action {
        display: block;
        margin-top: 18px;
    }

    .product-showcase-mobile-action .product-showcase-explore {
        width: 100%;
    }
}

/* Photo-only, continuously animated product rail. */
.product-showcase-rail {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    padding: 8px 0 32px;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.product-showcase-rail-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: productPhotoRail 42s linear infinite;
}

.product-showcase-rail-sequence {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.product-rail-card {
    display: grid;
    width: clamp(190px, 18vw, 255px);
    height: clamp(215px, 22vw, 295px);
    flex: 0 0 auto;
    overflow: hidden;
    place-items: center;
    padding: clamp(18px, 2.2vw, 30px);
    border: 1px solid #dce6ed;
    border-radius: 28px;
    background: linear-gradient(145deg, #fff, #eaf1f6);
    box-shadow: 0 18px 46px rgba(15, 42, 68, .09);
    transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.product-rail-card:hover {
    border-color: #8fc8f4;
    box-shadow: 0 28px 65px rgba(19, 72, 120, .16);
    transform: translateY(-7px);
}

.product-rail-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.product-rail-card:hover img {
    transform: scale(1.07);
}

@keyframes productPhotoRail {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 780px) {
    .product-showcase-rail {
        padding-bottom: 24px;
        mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    }

    .product-showcase-rail-track {
        animation-duration: 34s;
    }

    .product-showcase-rail-sequence {
        gap: 13px;
        padding-right: 13px;
    }

    .product-rail-card {
        width: min(58vw, 220px);
        height: min(64vw, 250px);
        padding: 18px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-showcase-rail {
        overflow-x: auto;
        mask-image: none;
    }

    .product-showcase-rail-track {
        animation: none;
    }

    .product-showcase-rail-sequence[aria-hidden="true"] {
        display: none;
    }
}

/* Editorial scroll-stepper timeline. */
@media (min-width: 901px) {
    .story-journey-shell {
        display: grid;
        grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
        align-items: start;
        column-gap: clamp(72px, 9vw, 150px);
        padding-top: 118px;
        padding-bottom: 150px;
    }

    .story-journey-head {
        position: sticky;
        top: 112px;
        display: flex;
        min-height: calc(100svh - 170px);
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        margin: 0;
        padding: 12px 0 30px;
        border: 0;
        background: transparent;
        backdrop-filter: none;
    }

    .story-journey-head > p {
        font-size: 9px;
        letter-spacing: .2em;
    }

    .story-journey-head-copy {
        margin-top: clamp(46px, 7vh, 78px);
    }

    .story-journey-head-copy h3 {
        margin: 0;
        color: #fff;
        font-family: 'Archivo Black', Outfit, sans-serif;
        font-size: clamp(38px, 4vw, 62px);
        font-weight: 900;
        line-height: .88;
        letter-spacing: -.075em;
        text-transform: uppercase;
        text-wrap: balance;
    }

    .story-journey-head-copy p {
        max-width: 390px;
        margin: 25px 0 0;
        color: #9fb9cd;
        font-size: 13px;
        font-weight: 450;
        line-height: 1.7;
        letter-spacing: 0;
    }

    .story-progress-indicator {
        display: grid;
        grid-template-columns: auto 30px auto;
        align-items: end;
        gap: 10px;
        min-width: 0;
        margin-top: clamp(38px, 6vh, 66px);
        text-align: left;
    }

    .story-progress-indicator small {
        grid-column: 1 / -1;
        color: #5fa8dd;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .2em;
    }

    .story-progress-indicator span {
        font-size: clamp(52px, 6vw, 82px);
    }

    .story-progress-indicator i {
        align-self: center;
        width: 30px;
    }

    .story-current-title {
        display: block;
        max-width: 360px;
        margin-top: 17px;
        color: #d9edfb;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.4;
        letter-spacing: .02em;
    }

    .story-scroll-cue {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: auto;
        color: #6f9abb;
    }

    .story-scroll-cue > span {
        position: relative;
        display: block;
        width: 1px;
        height: 76px;
        overflow: hidden;
        background: rgba(132, 201, 247, .2);
    }

    .story-scroll-cue > span i {
        position: absolute;
        inset: 0;
        background: linear-gradient(#8ed3ff, #2588f6);
        transform: scaleY(var(--story-progress, 0));
        transform-origin: top;
        box-shadow: 0 0 12px rgba(73, 185, 255, .75);
    }

    .story-scroll-cue em {
        font-size: 8px;
        font-style: normal;
        font-weight: 900;
        letter-spacing: .18em;
        text-transform: uppercase;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .story-timeline {
        grid-column: 2;
        display: grid;
        width: 100%;
        max-width: 620px;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: clamp(20px, 3vh, 32px);
        padding: 12px 0 56px 68px;
    }

    .story-timeline-rail {
        top: 32px;
        bottom: 110px;
        left: 12px;
        transform: none;
    }

    .story-milestone,
    .story-milestone--left,
    .story-milestone--right {
        --story-entry-x: 48px;
        grid-column: 1;
        grid-row: auto;
        display: flex;
        min-height: clamp(230px, 30vh, 285px);
        justify-content: center;
        flex-direction: column;
        padding: clamp(20px, 2.2vw, 28px);
        border-color: rgba(128, 202, 250, .2);
        border-radius: 20px;
        background:
            linear-gradient(115deg, rgba(15, 57, 91, .82), rgba(6, 30, 53, .9)),
            rgba(8, 35, 61, .88);
        box-shadow: 0 28px 70px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .05);
    }

    .story-milestone--left::before,
    .story-milestone--right::before {
        top: 50%;
        right: auto;
        left: -56px;
        width: 56px;
        background: linear-gradient(90deg, rgba(145, 211, 255, .72), rgba(145, 211, 255, .14));
    }

    .story-milestone--left::after,
    .story-milestone--right::after {
        top: calc(50% - 7px);
        right: auto;
        left: -63px;
    }

    .story-milestone.is-active {
        border-color: rgba(121, 211, 255, .88);
        background:
            radial-gradient(circle at 88% 12%, rgba(73, 185, 255, .2), transparent 34%),
            linear-gradient(120deg, rgba(27, 82, 124, .96), rgba(7, 35, 61, .97));
        box-shadow:
            0 38px 90px rgba(0, 0, 0, .36),
            0 0 0 1px rgba(73, 185, 255, .12),
            0 0 55px rgba(37, 136, 246, .13),
            inset 0 1px rgba(255, 255, 255, .1);
    }

    .story-milestone h3 {
        max-width: 500px;
        margin-top: 10px;
        font-size: clamp(23px, 2.15vw, 32px);
        line-height: .98;
    }

    .story-milestone > .story-milestone-detail {
        max-width: 520px;
        margin-top: 11px;
        font-size: 12px;
        line-height: 1.55;
    }

    .story-milestone-top .story-year {
        font-size: clamp(32px, 3.2vw, 46px);
    }

    .story-milestone-sequence {
        right: 24px;
        bottom: 12px;
        font-size: clamp(50px, 5vw, 68px);
    }
}

@media (max-width: 900px) {
    .story-journey-shell {
        display: block;
    }

    .story-journey-head-copy,
    .story-scroll-cue {
        display: none;
    }

    .story-journey-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 18px;
    }

    .story-progress-indicator {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .story-progress-indicator small {
        display: none;
    }

    .story-current-title {
        grid-column: 1;
        overflow: hidden;
        max-width: 58vw;
        color: #d8eafa;
        font-size: 10px;
        font-weight: 750;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .story-timeline {
        gap: 20px;
    }

    .story-milestone,
    .story-milestone--left,
    .story-milestone--right {
        min-height: 0;
        padding: 18px 18px 21px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-scroll-cue > span i {
        transform: scaleY(1);
    }
}

.product-card-page-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #526174;
    text-decoration: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.product-card-page-link i {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1268f3;
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(18, 104, 243, .24);
    transition: transform .2s ease, background .2s ease;
}

.product-card-page-link:hover,
.product-card-page-link:focus-visible { color: #1268f3; }

.product-card-page-link:hover i,
.product-card-page-link:focus-visible i {
    transform: translateX(2px);
    background: #084cb8;
}

/* Keep the product catalogue in a compact two-column grid on phones. */
@media (max-width: 599px) {
    #products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #products-grid .product-card {
        border-radius: 14px !important;
    }

    #products-grid .product-card-image {
        height: 138px !important;
        padding: 10px !important;
    }

    #products-grid .product-card-body {
        padding: 12px !important;
    }

    #products-grid .product-card-badge {
        max-width: 100%;
        padding: 3px 6px !important;
        font-size: 7px !important;
        letter-spacing: .04em !important;
    }

    #products-grid .product-card-title {
        min-height: 34px;
        font-size: 14px !important;
        line-height: 1.18 !important;
    }

    #products-grid .product-card-body > p:not(.product-card-spec-teaser) {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    #products-grid .product-card-spec-teaser {
        display: none !important;
    }

    #products-grid .product-card-cta {
        margin-top: 8px !important;
        padding-top: 10px !important;
    }

    #products-grid .product-card-page-link {
        gap: 6px;
        font-size: 8px;
        letter-spacing: .05em;
    }

    #products-grid .product-card-page-link i {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 8px;
    }

    .category-dropdown {
        position: fixed !important;
        inset: auto 12px max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-height: min(44dvh, 340px) !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border-radius: 18px !important;
        box-shadow: 0 20px 60px rgba(9, 30, 56, .24) !important;
        -webkit-overflow-scrolling: touch;
    }

    .category-dropdown-inner {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
    }

    .category-dropdown-item {
        min-width: 0;
        min-height: 44px !important;
        padding: 9px 10px !important;
        border: 1px solid #e0e7ef;
        font-size: 10px !important;
        line-height: 1.2;
    }

    .category-dropdown-item-label {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .category-dropdown-item-arrow {
        display: none !important;
    }
}

.product-modal-page-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: -8px 0 22px;
    padding: 10px 13px;
    border: 1px solid #cfe1f5;
    border-radius: 10px;
    background: #f4f9ff;
    color: #1268f3;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.product-modal-page-link:hover,
.product-modal-page-link:focus-visible {
    border-color: #1268f3;
    background: #1268f3;
    color: #fff;
    transform: translateY(-1px);
}

/* Keep the homepage hero completely still. */
.hero-static-hero::before,
.hero-static-hero::after {
    display: none !important;
}

.hero-static-hero {
    background: #061326;
}

.hero-factory-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-factory-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.98) contrast(1.03) brightness(.92);
}

.hero-static-hero .hero-shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5, 17, 31, .92) 0%, rgba(5, 17, 31, .74) 31%, rgba(5, 17, 31, .18) 56%, rgba(5, 17, 31, .04) 100%),
        linear-gradient(0deg, rgba(5, 17, 31, .52), transparent 48%);
}

.hero-static-hero .hero-grid {
    z-index: 2;
}

.hero-static-hero .hero-inner,
.hero-static-hero .scroll-cue {
    z-index: 3;
}

@media (max-width: 900px) {
    .hero-factory-background img {
        object-position: 67% center;
    }

    .hero-static-hero .hero-shade {
        background:
            linear-gradient(0deg, #071321 7%, rgba(7, 19, 33, .91) 63%, rgba(7, 19, 33, .38) 100%),
            linear-gradient(90deg, rgba(7, 19, 33, .86), rgba(7, 19, 33, .12));
    }
}

@media (max-width: 640px) {
    .hero-factory-background img {
        object-position: 72% center;
        filter: saturate(.9) contrast(1.02) brightness(.78);
    }
}