/* ==========================================================================
   SHARP ENTERPRISE — HOMEPAGE & THEME CSS
   Extracted from approved brochure-redesign/index.html inline styles.
   DO NOT MODIFY — This is the approved frontend source of truth.
   ========================================================================== */

/* ===== GLOBAL RESETS ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
    --yellow: #FFC700;
    --yellow-dark: #E6A800;
    --rust: #8B1A0E;
    --rust-dark: #6B1209;
    --navy: #0B1526;
    --navy-card: #111E35;
    --navy-alt: #0D1A2E;
    --white: #FFFFFF;
    --text-muted: #94A3B8;
    --text-light: #CBD5E1;
    --teal: #0D9488;
    --border-gold: rgba(255,199,0,0.25);
    --font-head: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --shadow: 0 8px 32px rgba(0,0,0,0.4);
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--navy); color: var(--text-light); overflow-x: clip; /* clip does NOT break position:sticky unlike hidden */ }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ===== TOP INFO BAR ===== */
.info-bar {
    background: #060D1A;
    border-bottom: 1px solid rgba(255,199,0,0.15);
    padding: 7px 0;
    font-size: 0.72rem;
    font-weight: 600;
}
.info-bar .wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; white-space: nowrap; }
.info-bar-left { display: flex; align-items: center; gap: 22px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.info-bar-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); min-width: 0; }
.info-bar-item span:last-child { overflow: hidden; text-overflow: ellipsis; }
.info-bar-item .icon { color: var(--yellow); font-size: 0.78rem; }
.bni-badge { background: none !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; flex: 0 0 auto !important; max-height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform 0.2s ease; }
.bni-badge img { max-height: 16px !important; width: auto !important; max-width: 50px !important; object-fit: contain !important; display: block !important; }
.bni-badge:hover { transform: scale(1.05); }

/* ===== HEADER ===== */
.site-header {
    background: #0B1526;
    border-bottom: 2px solid rgba(255,199,0,0.2);
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
/* When WP admin bar is visible, push header down to avoid overlap */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .site-header { top: 46px; }
}
.site-header .wrap { max-width: 1280px; margin: 0 auto; padding: 14px 24px !important; display: flex; align-items: center; justify-content: space-between; min-height: 84px !important; height: auto !important; }
.logo-group { display: flex; align-items: center; gap: 12px; }
.logo-hex { width: 46px; height: 46px; background: linear-gradient(135deg, var(--yellow), #F59E0B); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; color: #0B1526; font-family: var(--font-head); }
.logo-text .name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; color: #FFF; letter-spacing: -0.3px; line-height: 1.1; }
.logo-text .tagline { font-size: 0.7rem; color: var(--yellow); font-weight: 700; letter-spacing: 2px; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a { display: block; padding: 8px 16px; font-size: 0.9rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; border-radius: 6px; transition: all 0.2s; }
.nav-links a:hover, .nav-links a.active, .nav-links .current-menu-item > a, .nav-links .current_page_item > a { color: var(--yellow); background: rgba(255,199,0,0.1); }
.btn-quote { background: var(--yellow); color: #0B1526; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; padding: 11px 24px; border-radius: 6px; border: none; cursor: pointer; transition: all 0.3s; white-space: nowrap; display: inline-block; }
.btn-quote:hover { background: var(--yellow-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,199,0,0.4); color: #0B1526; }

/* ===== HERO SECTION ===== */
.hero {
    min-height: 100vh;
    background: linear-gradient(180deg, #060D1A 0%, #0B1526 50%, #111E35 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hero-bg-overlay {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}
.hero-content {
    position: relative; z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px 60px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,199,0,0.1);
    border: 1px solid rgba(255,199,0,0.3);
    color: var(--yellow);
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 28px;
}
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); animation: se-pulse 1.5s infinite; }
@keyframes se-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }
.hero-headline {
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 3.5vw, 3.2rem);
    font-weight: 700;
    color: #FFF;
    line-height: 1.18;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.hero-headline em { color: var(--yellow); font-style: normal; }
.hero-sub {
    font-family: var(--font-head);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.hero-desc { max-width: 680px; color: var(--text-light); font-size: 1.05rem; line-height: 1.7; margin-bottom: 40px; }
.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 60px; }
.btn-primary { background: var(--yellow); color: #0B1526; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; padding: 16px 36px; border-radius: 6px; transition: all 0.3s; border: none; cursor: pointer; display: inline-block; }
.btn-primary:hover { background: var(--yellow-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,199,0,0.4); color: #0B1526; }
.btn-secondary { background: transparent; color: #FFF; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; padding: 16px 36px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.3); transition: all 0.3s; cursor: pointer; display: inline-block; }
.btn-secondary:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }
.btn-rust { background: var(--rust); color: #FFF; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; padding: 16px 36px; border-radius: 6px; transition: all 0.3s; border: none; cursor: pointer; display: inline-block; }
.btn-rust:hover { background: var(--rust-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(139,26,14,0.5); color: #FFF; }

/* HERO EQUIPMENT SHOWCASE STRIP */
.hero-equipment-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: #060D1A;
    border-top: 2px solid var(--yellow);
}
.hero-equip-item {
    position: relative;
    overflow: hidden;
    height: 200px;
    cursor: pointer;
}
.hero-equip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; filter: brightness(0.65); }
.hero-equip-item:hover img { transform: scale(1.08); filter: brightness(0.9); }
.hero-equip-item .equip-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(6,13,26,0.95) 0%, transparent 100%);
    padding: 20px 12px 12px;
    font-family: var(--font-head);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SECTION COMMONS ===== */
section { padding: 80px 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section-header { text-align: center; margin-bottom: 56px; }
.section-eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 12px;
    position: relative;
    padding: 0 24px;
}
.section-eyebrow::before, .section-eyebrow::after { content: ''; position: absolute; top: 50%; height: 2px; width: 20px; background: var(--yellow); }
.section-eyebrow::before { right: 100%; margin-right: -16px; }
.section-eyebrow::after { left: 100%; margin-left: -16px; }
.section-title { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: #FFF; text-transform: uppercase; letter-spacing: -0.5px; line-height: 1.1; }
.section-title em { color: var(--yellow); font-style: normal; }
.section-title.rust em { color: #FF6B4A; }
.section-desc { max-width: 680px; margin: 16px auto 0; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }

/* ===== STATS BAND ===== */
.stats-band { background: var(--yellow); padding: 28px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-item { text-align: center; padding: 0 20px; border-right: 2px solid rgba(11,21,38,0.2); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: var(--font-head); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; color: #0B1526; line-height: 1; }
.stat-label { font-family: var(--font-head); font-size: clamp(0.7rem, 2vw, 0.78rem); font-weight: 600; color: rgba(11,21,38,0.7); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* ===== NOTCH SECTIONS ===== */
.notch-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.notch-text-col .lead { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: #FFF; margin-bottom: 16px; }
.notch-text-col .body { color: var(--text-muted); font-size: 0.95rem; line-height: 1.75; margin-bottom: 16px; }
.notch-image-col img { border-radius: 8px; width: 100%; height: 300px; object-fit: cover; box-shadow: var(--shadow); }

/* ===== CARDS GRIDS ===== */
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.equip-card {
    background: #111E35;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: block;
}
.equip-card:hover { transform: translateY(-6px); border-color: var(--yellow); box-shadow: 0 12px 40px rgba(255,199,0,0.15); }
.equip-card .card-img {
    width: 100% !important;
    height: 320px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
}
.equip-card .card-img a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; }
.equip-card .card-img img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    transform: none !important;
    transition: none !important;
}
.equip-card:hover .card-img img { transform: none !important; }
.equip-card .card-body { padding: 18px 20px 22px; }
.equip-card .card-cat { font-size: 0.7rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; }
.equip-card .card-cat.rust-cat { color: #FF6B4A; }
.equip-card .card-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: #FFF; margin-bottom: 6px; }
.equip-card .card-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }
.equip-card .card-link { display: inline-block; margin-top: 14px; font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: var(--yellow); letter-spacing: 0.5px; text-transform: uppercase; }
.equip-card .card-link:hover { text-decoration: underline; }

/* White bordered card (brochure page 2 & 5) */
.cat-card {
    background: #FFF;
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}
.cat-card:hover { border-color: var(--yellow); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(255,199,0,0.15); }
.cat-card .cat-img { height: 180px; overflow: hidden; }
.cat-card .cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.cat-card:hover .cat-img img { transform: scale(1.07); }
.cat-card .cat-body { padding: 14px 16px 18px; border-top: 3px solid var(--yellow); }
.cat-card .cat-title { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: #1E293B; margin-bottom: 4px; }
.cat-card .cat-desc { font-size: 0.82rem; color: #64748B; }

/* ===== TRUST PILLS ===== */
.trust-pill-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid #E2E8F0; border-radius: 10px; overflow: hidden; margin: 40px 0; }
.trust-pill-row.dark-pills { border-color: rgba(255,199,0,0.2); }
.trust-pill {
    display: flex; align-items: center; gap: 18px;
    padding: 30px 26px;
    background: #FFF;
    border-right: 2px solid #E2E8F0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #1E293B;
    transition: all 0.3s;
}
.trust-pill:hover { background: #FFF7DC; }
.trust-pill:last-child { border-right: none; }
.trust-pill.dark-pill { background: #111E35; color: #FFF; border-color: rgba(255,199,0,0.15); }
.trust-pill.dark-pill:hover { background: #16263F; }
.trust-pill .pill-icon { font-size: 2.6rem; flex-shrink: 0; }
.trust-pill .pill-text { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }

/* ===== KEY FEATURES BANNER ===== */
.key-features-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 40px;
    box-shadow: var(--shadow);
}
.kf-label {
    background: var(--navy);
    color: var(--yellow);
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 32px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.kf-content {
    padding: 26px 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: center;
}
.kf-content.rust-bg { background: linear-gradient(135deg, var(--rust) 0%, #6B1209 100%); }
.kf-content.yellow-bg { background: linear-gradient(135deg, var(--yellow) 0%, #FFD84D 100%); }
.kf-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    color: #FFF;
    line-height: 1.35;
}
.kf-content.yellow-bg .kf-item { color: var(--navy); }
.kf-item::before {
    content: '✓';
    font-size: 1.3rem; line-height: 1; flex-shrink: 0;
    background: rgba(255,255,255,0.25); width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
    color: #FFF;
}
.kf-content.yellow-bg .kf-item::before { background: rgba(11,21,38,0.15); color: var(--navy); }

/* ===== DUAL CATEGORY BANNER ===== */
.dual-category-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 380px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.dual-panel {
    position: relative;
    overflow: hidden;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.dual-panel img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.dual-panel-overlay { position: absolute; inset: 0; z-index: 1; }
.dual-panel-content { position: relative; z-index: 2; }
.dual-panel h3 { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: #FFF; text-transform: uppercase; line-height: 1.2; margin-bottom: 8px; }
.dual-panel p { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 20px; max-width: 280px; }

/* ===== CIRCLE ARCH (brochure page 3) — enhanced split layout ===== */
.circle-arch-section {
    background:
        radial-gradient(circle at 85% 20%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(135deg, #FFE14D 0%, var(--yellow) 55%, #F5B800 100%);
    padding: 90px 0 70px;
    overflow: hidden;
    position: relative;
}

.arch-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.arch-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-head); font-weight: 600; font-size: 0.85rem;
    letter-spacing: 3px; text-transform: uppercase; color: var(--rust);
    margin-bottom: 16px;
}
.arch-kicker::before { content: ''; width: 34px; height: 3px; background: var(--rust); border-radius: 2px; }
.arch-title {
    font-family: var(--font-head); font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.02;
    text-transform: uppercase; color: var(--navy); margin-bottom: 18px;
}
.arch-title span { color: var(--rust); position: relative; display: inline-block; }
.arch-title span::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px; background: rgba(255,255,255,0.6); z-index: -1; border-radius: 4px; }
.arch-desc {
    color: rgba(11,21,38,0.75); font-size: 1.02rem; line-height: 1.7;
    max-width: 480px; margin-bottom: 28px;
}
.arch-stats { display: flex; gap: 36px; margin-bottom: 32px; }
.arch-stat strong {
    font-family: var(--font-head); font-size: 2.1rem; font-weight: 700;
    color: var(--navy); line-height: 1; display: block; margin-bottom: 6px;
}
.arch-stat span { font-size: 0.82rem; font-weight: 700; color: rgba(11,21,38,0.65); text-transform: uppercase; letter-spacing: 0.6px; }
.arch-cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--navy); color: #FFF; font-family: var(--font-head);
    font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;
    padding: 16px 30px; border-radius: 60px; transition: all 0.3s;
    box-shadow: 0 14px 30px rgba(11,21,38,0.25);
}
.arch-cta span { color: var(--yellow); font-size: 1.15rem; transition: transform 0.3s; }
.arch-cta:hover { background: var(--rust); transform: translateY(-3px); }
.arch-cta:hover span { transform: translateX(4px); }

.arch-visual { position: relative; display: flex; justify-content: center; padding: 30px 0; }
.arch-orbit-ring {
    position: absolute; top: 50%; left: 50%;
    width: 560px; height: 560px; transform: translate(-50%, -50%);
    border: 2px dashed rgba(11,21,38,0.25); border-radius: 50%;
}
.arch-orbit-ring::before {
    content: ''; position: absolute; inset: 28px;
    border: 1px dashed rgba(139,26,14,0.35); border-radius: 50%;
}
.circle-arch-frame {
    width: 400px; height: 400px;
    border-radius: 50%;
    background: linear-gradient(170deg, #1E3A5F 0%, #0B1526 100%);
    border: 8px solid var(--navy);
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 30px 70px rgba(11,21,38,0.45), 0 0 0 10px rgba(255,255,255,0.35);
}
.circle-arch-frame img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top;
    transform: scale(1.18);
    transform-origin: center center;
}

.arch-chip {
    position: absolute; z-index: 3;
    background: var(--navy); color: var(--yellow);
    font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.8px;
    padding: 12px 20px; border-radius: 40px;
    box-shadow: 0 12px 26px rgba(11,21,38,0.35);
    animation: archFloat 4s ease-in-out infinite;
}
.arch-chip::before { content: '▸ '; color: #FFF; }
.chip-a { top: 8%; right: 2%; }
.chip-b { bottom: 20%; right: -2%; animation-delay: 1.2s; }
.chip-c { bottom: -4%; left: 10%; animation-delay: 2.1s; }
@keyframes archFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.arch-pill-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 64px;
}
.arch-pill {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(2px);
    color: var(--navy);
    border: 1.5px solid rgba(11,21,38,0.25);
    font-family: var(--font-head);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 14px 10px;
    border-radius: 10px;
    transition: all 0.3s;
}
.arch-pill:hover { background: var(--rust); border-color: var(--rust); color: #FFF; transform: translateY(-3px); }
.circle-arch-tagline {
    text-align: center;
    margin: 40px auto 0;
    max-width: 680px;
    background: var(--navy);
    color: var(--yellow);
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 20px 40px;
    border-radius: 50px;
    box-shadow: 0 18px 40px rgba(11,21,38,0.3);
}

/* ===== WHY CHOOSE SECTION (brochure page 2) ===== */
.why-choose-section { background: #FFF; padding: 80px 0; }
.why-choose-section .section-eyebrow { color: var(--rust); }
.why-choose-section .section-eyebrow::before,
.why-choose-section .section-eyebrow::after { background: var(--rust); }
.why-choose-section .section-title { color: #1E293B; }
.why-choose-section .section-desc { color: #64748B; }
.why-notch-badge {
    background: #1E293B;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 48px 14px 28px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
    margin-bottom: 24px;
}

/* ===== INDUSTRY TAGS ===== */
.industry-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--navy-card); border: 1px solid var(--border-gold);
    border-radius: 10px; padding: 12px 20px;
    font-family: var(--font-head); font-weight: 600; font-size: 0.98rem;
    text-transform: uppercase; letter-spacing: 0.4px; color: #E2E8F0;
    transition: all 0.3s;
}
.industry-tag:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255,199,0,0.12); }
.industry-tag .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }

/* ===== TESTIMONIALS ===== */
.testimonial-card { background: var(--navy-card); border: 1px solid var(--border-gold); border-radius: 12px; padding: 32px; position: relative; }
.testimonial-card::before { content: '\201C'; font-family: Georgia, serif; font-size: 6rem; color: var(--yellow); opacity: 0.15; position: absolute; top: -10px; left: 20px; line-height: 1; }
.testimonial-stars { color: var(--yellow); font-size: 1.1rem; margin-bottom: 14px; }
.testimonial-text { color: var(--text-light); font-size: 0.95rem; line-height: 1.75; margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--rust); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: #FFF; flex-shrink: 0; }
.testimonial-name { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; color: #FFF; }
.testimonial-company { font-size: 0.82rem; color: var(--text-muted); }

/* ===== TESTIMONIAL CAROUSEL (3-up / 1-up) ===== */
.ts-carousel { position: relative; margin-top: 10px; padding: 0 0 42px; }
.ts-viewport { overflow: hidden; }
.ts-track { display: flex; gap: 20px; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
.ts-slide { flex: 0 0 calc((100% - 40px) / 3); }
.ts-slide .testimonial-card { height: 100%; }
.ts-arrow {
    position: absolute; top: 50%; transform: translateY(-60%);
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--navy-card); border: 2px solid var(--border-gold); color: var(--yellow);
    font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; z-index: 2;
}
.ts-arrow:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); transform: translateY(-60%) scale(1.08); }
.ts-prev { left: 6px; }
.ts-next { right: 6px; }
.ts-dots { display: flex; gap: 10px; justify-content: center; position: absolute; bottom: 8px; left: 0; right: 0; }
.ts-dot { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s; padding: 0; }
.ts-dot.active { background: var(--yellow); transform: scale(1.3); }

@media (max-width: 900px) { .ts-slide { flex: 0 0 calc((100% - 20px) / 2); } }
@media (max-width: 640px) {
    .ts-slide { flex: 0 0 100%; }
    .ts-arrow { width: 38px; height: 38px; font-size: 0.85rem; }
    .ts-prev { left: 4px; }
    .ts-next { right: 4px; }
}

/* ===== CTA BAND ===== */
.cta-band { background: linear-gradient(135deg, var(--rust) 0%, var(--rust-dark) 100%); padding: 72px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: 'EMPOWERING PROJECTS. ELEVATING PERFORMANCE.'; position: absolute; bottom: -20px; left: 0; right: 0; font-family: var(--font-head); font-size: 5rem; font-weight: 700; color: rgba(255,255,255,0.04); white-space: nowrap; text-align: center; text-transform: uppercase; pointer-events: none; }
.cta-band h2 { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: #FFF; text-transform: uppercase; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 580px; margin: 0 auto 36px; }
.cta-band .cta-phone { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); color: #FFF; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; padding: 16px 32px; border-radius: 8px; margin-bottom: 12px; transition: all 0.3s; }
.cta-band .cta-phone:hover { background: rgba(255,255,255,0.25); transform: scale(1.03); color: #FFF; }

/* ===== FOOTER ===== */
.site-footer { background: #060D1A; border-top: 2px solid rgba(255,199,0,0.2); }
.footer-top { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: var(--text-muted); font-size: 0.88rem; }
.footer-contact-item .fc-icon { color: var(--yellow); flex-shrink: 0; margin-top: 2px; }
.footer-col h4 { font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: #FFF; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; border-bottom: 2px solid var(--yellow); padding-bottom: 8px; display: inline-block; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { color: var(--text-muted); font-size: 0.88rem; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--yellow); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--text-muted); flex-wrap: wrap; gap: 10px; }
.footer-bottom .brand-tag { color: var(--yellow); font-weight: 600; font-family: var(--font-head); letter-spacing: 1px; }

/* ===== PRODUCTS PAGE ===== */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.filter-pill { background: #09152B; border: 1px solid var(--border-gold); color: #E2E8F0; padding: 10px 20px; border-radius: 30px; font-family: var(--font-head); font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: all 0.3s ease; }
.filter-pill.active, .filter-pill:hover { background: var(--yellow); color: #000; border-color: var(--yellow); }
.search-box { width: 100%; max-width: 480px; background: #09152B; border: 1px solid var(--border-gold); color: #FFF; padding: 14px 20px; border-radius: 8px; font-size: 0.95rem; font-family: var(--font-body); }
.search-box::placeholder { color: var(--text-muted); }

.contact-main-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
.contact-fallback-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form-grid .form-group.full-width { grid-column: 1 / -1; }
.contact-card-box { background: var(--navy-card); border: 1px solid var(--border-gold); border-radius: 16px; padding: 32px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); transition: transform 0.3s ease; }
.contact-card-box:hover { transform: translateY(-5px); border-color: var(--yellow); }
.contact-form-container { background: var(--navy-card); border: 1px solid var(--border-gold); border-radius: 16px; padding: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
.form-input-field { width: 100%; background: #040914; border: 1px solid var(--border-gold); color: #FFF; padding: 14px 18px; border-radius: 8px; font-size: 0.95rem; margin-top: 6px; font-family: var(--font-body); transition: border-color 0.2s; }
.form-input-field:focus { outline: none; border-color: var(--yellow); }

@media screen and (max-width: 992px) {
    .contact-main-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
}
@media screen and (max-width: 640px) {
    .contact-fallback-row, .contact-form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .contact-form-container { padding: 24px 16px !important; }
}
.faq-item {
    background: var(--navy-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover {
    border-color: rgba(245, 194, 17, 0.4);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.faq-question {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 600;
    color: #FFF;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    user-select: none;
}
.faq-toggle-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(245, 194, 17, 0.12);
    border: 1.5px solid #F5C211;
    color: #F5C211;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item.active {
    border-color: rgba(245, 194, 17, 0.6);
    background: rgba(15, 42, 85, 0.6);
}
.faq-item.active .faq-question {
    margin-bottom: 14px;
}
.faq-item.active .faq-toggle-icon {
    transform: rotate(90deg);
    background: #F5C211;
    color: #0B1526;
    box-shadow: 0 4px 14px rgba(245,194,17,0.4);
}
.faq-answer {
    color: #CBD5E1;
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ===== WPCF7 FORM OVERRIDES ===== */
.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea {
    width: 100%;
    background: #040914;
    border: 1px solid var(--border-gold);
    color: #FFF;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    transition: border-color 0.2s;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--yellow); }
.wpcf7 input[type="submit"] { background: var(--yellow); color: #0B1526; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; padding: 16px 36px; border-radius: 6px; border: none; cursor: pointer; transition: all 0.3s; width: 100%; }
.wpcf7 input[type="submit"]:hover { background: var(--yellow-dark); transform: translateY(-2px); }
.wpcf7-not-valid-tip { color: #FF6B6B; font-size: 0.82rem; margin-top: 4px; }
.wpcf7-response-output { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-family: var(--font-head); font-weight: 700; }
.wpcf7-mail-sent-ok { background: rgba(16,185,129,0.15); border-color: #10B981; color: #10B981; }
.wpcf7-validation-errors { background: rgba(239,68,68,0.1); border-color: #EF4444; color: #EF4444; }

/* ===== MOBILE HAMBURGER ===== */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: 2px solid rgba(255,255,255,0.3);
    color: #FFF;
    width: 40px; height: 40px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    align-items: center;
    justify-content: center;
}
.mobile-nav {
    display: none;
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background: rgba(11, 21, 38, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 80px 24px !important;
    z-index: 999999 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.mobile-nav.open { display: flex; }
.admin-bar .mobile-nav {
    top: 0 !important;
}
@media screen and (max-width: 782px) {
    .admin-bar .mobile-nav {
        top: 0 !important;
    }
}
.mobile-nav a { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: #FFF; text-transform: uppercase; letter-spacing: 1.5px; padding: 12px 24px; }
.mobile-nav a:hover, .mobile-nav .current-menu-item > a { color: var(--yellow); }
.mobile-nav .close-btn { position: absolute; top: 24px !important; right: 24px !important; background: none; border: none; color: var(--yellow) !important; font-size: 2.2rem !important; cursor: pointer; line-height: 1; z-index: 1000000; }
.mobile-nav .close-btn:hover { color: #FFF !important; }


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-equipment-strip { grid-template-columns: repeat(3, 1fr); }
    .dual-category-banner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    section { padding: 56px 0; }
    .grid-6, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .notch-content-grid { grid-template-columns: 1fr; }
    .nav-links { display: none !important; }
    .mobile-menu-toggle { display: flex; }
    .trust-pill-row { grid-template-columns: 1fr; }
    .hero-equipment-strip { grid-template-columns: repeat(2, 1fr); }
    .kf-content { grid-template-columns: repeat(2, 1fr); }
    .arch-pill-grid { grid-template-columns: repeat(2, 1fr); }
    .arch-hero-inner { grid-template-columns: 1fr; gap: 20px; }
    .arch-visual { order: -1; }
    .arch-orbit-ring { width: 340px; height: 340px; }
    .circle-arch-frame { width: 300px; height: 300px; }
    .footer-grid { grid-template-columns: 1fr; }
    .info-bar-left { gap: 12px; }
    .cta-band .cta-phone { font-size: 1rem; padding: 12px 20px; }
}
@media (max-width: 600px) {
    .info-bar .wrap { white-space: normal; flex-wrap: wrap; }
    .info-bar-left { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .grid-6, .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
    .hero-equipment-strip { grid-template-columns: 1fr; }
    .hero-headline { font-size: 2rem; }
    .info-bar .wrap { flex-direction: column; gap: 8px; }
    .info-bar-left { width: 100%; }
    .kf-content { grid-template-columns: 1fr; }
    .trust-pill { font-size: 1rem; padding: 24px 20px; }
}
/* ===== COMPANY PROFILE � HOMEPAGE-MATCHED VISUAL SYSTEM ===== */
body.page-template-template-about { background: var(--navy); }
body.page-template-template-about .breadcrumb-bar { background: #060D1A !important; border-color: rgba(255,199,0,.16) !important; }
body.page-template-template-about .products-header { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 20%, rgba(139,26,14,.42), transparent 32%), linear-gradient(135deg,#060D1A,#0B1526 58%,#111E35) !important; padding: 88px 0 72px !important; }
body.page-template-template-about .products-header::after { content: 'POWER  �  LIFT  �  SPACE'; position:absolute; right:-30px; bottom:-38px; color:rgba(255,199,0,.05); font:900 clamp(3rem,8vw,8rem)/1 var(--font-head); letter-spacing:4px; transform:rotate(-8deg); pointer-events:none; }
body.page-template-template-about .products-header .container { position:relative; z-index:1; }
body.page-template-template-about .products-header .section-title { font-size:clamp(2.5rem,5vw,4.6rem) !important; letter-spacing:-1.5px; max-width:780px; }
body.page-template-template-about .products-header .section-subtitle { max-width:680px; }
body.page-template-template-about section[style*="background:#091833"] { background:linear-gradient(135deg,#0B1526,#111E35) !important; }
body.page-template-template-about section[style*="background:#071329"] { background:#060D1A !important; }
body.page-template-template-about section[style*="background:#091833"] .container > div:first-child > div:first-child { position:relative; }
body.page-template-template-about section[style*="background:#091833"] .container > div:first-child > div:first-child::before { content:'01'; color:rgba(255,199,0,.18); font:900 5rem/1 var(--font-head); position:absolute; right:0; top:-24px; }
body.page-template-template-about section[style*="background:#091833"] img { filter:saturate(.9) contrast(1.08); }
body.page-template-template-about section[style*="background:#091833"] div[style*="background:#F5C211"] { background:linear-gradient(135deg,#FFC700,#E6A800) !important; }
body.page-template-template-about section[style*="background:#071329"] div[style*="background:#0F2A55"], body.page-template-template-about section[style*="background:#091833"] div[style*="background:#0F2A55"] { background:rgba(17,30,53,.86) !important; border-color:rgba(255,199,0,.22) !important; box-shadow:0 14px 35px rgba(0,0,0,.18); }
body.page-template-template-about section[style*="background:#071329"] div[style*="background:#0F2A55"]:hover { transform:translateY(-5px); border-color:rgba(255,199,0,.58) !important; box-shadow:0 18px 42px rgba(0,0,0,.3); transition:.25s ease; }
body.page-template-template-about section[style*="linear-gradient(135deg, #1E4D9B"] { background:linear-gradient(135deg,#6B1209,#8B1A0E 42%,#111E35) !important; position:relative; overflow:hidden; }
body.page-template-template-about section[style*="linear-gradient(135deg, #1E4D9B"]::before { content:''; position:absolute; width:340px; height:340px; border:1px solid rgba(255,199,0,.24); border-radius:50%; right:8%; top:-180px; box-shadow:0 0 0 30px rgba(255,199,0,.04),0 0 0 60px rgba(255,199,0,.025); }
body.page-template-template-about .section-tag { font-family:var(--font-head); letter-spacing:1.6px; border:1px solid rgba(255,199,0,.25); border-radius:999px; padding:7px 14px; display:inline-flex; font-size:.72rem; font-weight: 600; }
@media (max-width: 768px) {
 body.page-template-template-about section[style*="grid-template-columns:1fr 1fr"] > .container > div,
 body.page-template-template-about section[style*="grid-template-columns:1fr 2fr"] > .container > div { grid-template-columns:1fr !important; }
 body.page-template-template-about section[style*="grid-template-columns:1fr 1fr"] .container > div:first-child > div:nth-child(2) { margin-top:22px; }
 body.page-template-template-about section[style*="grid-template-columns:1fr 1fr"] div[style*="right:-20px"] { right:12px !important; }
}

/* ===== CUSTOM WPCF7 SPINNER & LOADING INDICATOR (HIDDEN UNTIL SUBMIT) ===== */
.wpcf7-spinner,
span.wpcf7-spinner,
.ajax-loader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 28px !important;
    height: 28px !important;
    margin: 14px auto 0 !important;
    vertical-align: middle !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 3px solid rgba(245, 194, 17, 0.25) !important;
    border-top-color: #F5C211 !important;
    border-radius: 50% !important;
    animation: sharp-spin 0.75s linear infinite !important;
}

/* ONLY display spinner when form is actively submitting */
.wpcf7-form.submitting .wpcf7-spinner,
form.wpcf7-form.submitting span.wpcf7-spinner,
.wpcf7-spinner.is-active,
span.wpcf7-spinner.is-active,
.ajax-loader.is-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 14px auto !important;
    clear: both !important;
}

.modal-body .wpcf7-spinner,
.modal-content .wpcf7-spinner,
.btn-primary-yellow .wpcf7-spinner,
.product-inquiry-grid .wpcf7-spinner,
.inquiry-modal .wpcf7-spinner {
    border: 3px solid rgba(245, 194, 17, 0.3) !important;
    border-top-color: #F5C211 !important;
    box-shadow: 0 0 12px rgba(245, 194, 17, 0.4) !important;
}

@keyframes sharp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.wpcf7-response-output {
    margin-top: 18px !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    clear: both !important;
}

.wpcf7-mail-sent-ok {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 2px solid #10B981 !important;
    color: #10B981 !important;
}

.wpcf7-validation-errors, .wpcf7-mail-sent-ng {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 2px solid #EF4444 !important;
    color: #F87171 !important;
}

/* ===== FLOATING ACTION CONTROLS (WHATSAPP + BACK-TO-TOP) ===== */
#scrollTopBtn:hover {
    background: #F5C211 !important;
    color: #000 !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(245,194,17,0.4) !important;
}

#scrollTopBtn.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#whatsappFloatBtn {
    animation: wa-pulse 2s infinite;
}

#whatsappFloatBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(37,211,102,0.7) !important;
}

@keyframes wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}


/* ==========================================================================
   MASTER SITE-WIDE RESPONSIVE AUDIT & OVERFLOW FIXES (320px - 1920px+)
   ========================================================================== */

/* 1. Global Viewport & Media Constraints
   IMPORTANT: Use overflow-x:clip on both html and body
   overflow-x:hidden breaks position:sticky — clip does NOT */
html, body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* STICKY HEADER reinforcement */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #0B1526 !important;
    border-bottom: 2px solid rgba(255,199,0,0.2) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background 0.3s, box-shadow 0.3s !important;
    visibility: visible !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe, svg, object {
    max-width: 100% !important;
    height: auto;
}
.contact-map-frame,
.contact-map-frame iframe {
    height: 520px !important;
    min-height: 520px !important;
}

/* Prevent iOS Safari form input zoom */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* 2. Header & Navigation Responsiveness */
@media screen and (max-width: 1024px) {
    .site-header .wrap {
        padding: 12px 20px !important;
    }
    .nav-links {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .site-header .btn-quote {
        display: none !important;
    }
}

@media screen and (max-width: 640px) {
    .info-bar {
        font-size: 0.78rem !important;
    }
    .info-bar .wrap {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }
    .info-bar-left {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 16px !important;
    }
    .bni-badge {
        margin-top: 4px;
    }
}

@media screen and (max-width: 480px) {
    .site-header .wrap {
        padding: 10px 14px !important;
    }
    .logo-group {
        gap: 8px !important;
    }
    .logo-group img {
        max-height: 44px !important;
    }
    .logo-text .name {
        font-size: clamp(0.95rem, 4.5vw, 1.15rem) !important;
    }
    .logo-text .tagline {
        font-size: 0.68rem !important;
    }
    .logo-text .gst-tag {
        font-size: 0.65rem !important;
    }
    .btn-quote {
        padding: 8px 14px !important;
        font-size: 0.75rem !important;
    }
}


/* 3. Product Inquiry Fast-Track Form Responsiveness */
.product-inquiry-grid {
    width: 100% !important;
    box-sizing: border-box;
}

@media screen and (max-width: 992px) {
    .product-inquiry-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .product-inquiry-grid > div:last-child {
        grid-column: 1 / -1 !important;
    }
}

@media screen and (max-width: 580px) {
    .product-inquiry-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 4. Modal Popup Form Responsiveness */
#inquiryModalOverlay .modal-content,
.inquiry-modal-content {
    max-width: 580px !important;
    width: 94vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 24px 20px !important;
    border-radius: 14px !important;
}

@media screen and (max-width: 540px) {
    .modal-form-wrap div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

.arch-orbit-ring,
.circle-arch-frame {
    max-width: 90vw !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}
.circle-arch-frame img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* 6. Footer Responsive Grid */
@media screen and (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
}

@media screen and (max-width: 580px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
}

/* 7. CTA Band Responsiveness */
@media screen and (max-width: 600px) {
    .cta-band {
        padding: 48px 16px !important;
    }
    .cta-band .cta-phone {
        font-size: clamp(0.85rem, 3.8vw, 1.15rem) !important;
        padding: 10px 18px !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
}

/* 8. Forms & Inputs Container Safety */
.contact-form-container,
.contact-card-box {
    width: 100% !important;
    box-sizing: border-box;
}

@media screen and (max-width: 580px) {
    .contact-form-container {
        padding: 24px 16px !important;
    }
    .contact-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 9. Floating Buttons Touch Safety */
@media screen and (max-width: 480px) {
    .floating-controls {
        bottom: 16px !important;
        right: 16px !important;
    }
    #whatsappFloatBtn {
        width: 48px !important;
        height: 48px !important;
    }
    #whatsappFloatBtn svg {
        width: 26px !important;
        height: 26px !important;
    }
    #scrollTopBtn {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }
}


/* ==========================================================================
   COMPLETE SCROLL-BASED ANIMATION SYSTEM — Sharp Enterprise
   Native IntersectionObserver  |  No external libraries  |  60fps
   ========================================================================== */

/* ── 1. SCROLL REVEAL CLASSES (STATIC SAFETY) ───────────────────────────── */
.animate-on-scroll,
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale-in,
.anim-fade-in {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ── 2. HERO PAGE-LOAD ENTRANCE ANIMATIONS ────────────────────────────────── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeRight {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Hero elements animate on load — no scroll needed */
.hero-animate {
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-duration: 0.75s;
}
.hero-animate.hero-fade-up    { animation-name: heroFadeUp; }
.hero-animate.hero-fade-right { animation-name: heroFadeRight; }
.hero-animate.hero-fade-in    { animation-name: heroFadeIn; }

/* Stagger delays for hero children */
.hero-anim-d0  { animation-delay: 0ms;   }
.hero-anim-d1  { animation-delay: 100ms; }
.hero-anim-d2  { animation-delay: 200ms; }
.hero-anim-d3  { animation-delay: 300ms; }
.hero-anim-d4  { animation-delay: 400ms; }

/* ── 3. STAGGER HELPERS (set via JS inline style --anim-delay) ──────────────── */
/* Cards in a stagger container automatically get staggered delay via JS */
.stagger-parent .animate-on-scroll { }  /* Intentionally blank — delays are set inline */

/* ── 4. MOBILE — reduce travel distance on small screens ─────────────────── */
@media (max-width: 640px) {
    .anim-fade-up    { transform: translateY(22px); }
    .anim-fade-down  { transform: translateY(-22px); }
    .anim-fade-left  { transform: translateX(-20px); }
    .anim-fade-right { transform: translateX(20px); }
    .anim-scale-in   { transform: scale(0.95); }
}

/* ── 5. SAFETY: If JS fails, content must still be visible ───────────────── */
.no-js .animate-on-scroll,
.no-js .hero-animate {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* ── 6. REDUCED MOTION ACCESSIBILITY ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .hero-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ── 7. ABSOLUTE HEADER SAFETY (must be LAST rule — wins all cascades) ─────── */
/* No animation class, JS error, or override can ever hide the header or info bar */
.site-header,
.site-header *,
.info-bar,
.info-bar *,
header,
header * {
    animation-name: none !important;
}

/* Header STICKY + always-visible (last rule wins) */
.site-header,
header.site-header {
    opacity: 1 !important;
    transform: none !important;
    transition: background 0.3s, box-shadow 0.3s !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Contact map + registered details strip */
.contact-details-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:20px; padding:22px 14px 4px; border-top:1px solid rgba(255,255,255,0.08); }
.contact-detail-item { min-width:0; }
.contact-detail-item > span { display:block; color:#94E0FF; font-size:.78rem; font-weight: 600; line-height:1.35; text-transform:uppercase; }
.contact-detail-item p { margin:5px 0 0; color:#FFF; font-size:.92rem; line-height:1.55; }
.contact-detail-item em { color:#10B981; font-style:normal; font-weight: 600; }
.contact-detail-item a { color:var(--color-primary-yellow); font-weight: 600; }

/* Inner pages (all pages EXCEPT homepage): Maroon Red Design System */
body:not(.home) .top-bar {
    background: linear-gradient(90deg, #6B1209 0%, #8B1A0E 45%, #0B0F17 100%) !important;
    border-bottom: 2px solid #8B1A0E !important;
}

/* BALANCED VIBRANT INDUSTRIAL THEME FOR CATALOG HERO & NON-HOMEPAGE SECTIONS */
body:not(.home) .section-padding.bg-dark-navy,
body:not(.home) .products-header,
body:not(.home) .hero-catalog {
    background: linear-gradient(135deg, #091A36 0%, #0F2A55 50%, #071329 100%) !important;
    border-top: 4px solid #8B1A0E !important;
    border-bottom: 2px solid #1E4D9B !important;
    color: #FFFFFF !important;
}

/* Header Notch Container Box */
body:not(.home) .brochure-header-notch {
    background: linear-gradient(135deg, #0F2A55 0%, #091A36 100%) !important;
    border: 1px solid #1E4D9B !important;
    border-left: 5px solid #8B1A0E !important;
    border-radius: 12px !important;
    padding: 24px 28px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 28px !important;
}

body:not(.home) .brochure-header-notch h1,
body:not(.home) .products-header h1 {
    color: #FFFFFF !important;
    border-left: none !important;
    padding-left: 0 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

body:not(.home) .brochure-header-notch p,
body:not(.home) .products-header p {
    color: #CBD5E1 !important;
    font-size: 1.05rem !important;
}

/* Search Box Input */
body:not(.home) .search-box,
body:not(.home) #catalogSearchInput {
    background: #091A36 !important;
    color: #FFFFFF !important;
    border: 1.5px solid #1E4D9B !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    font-size: 0.95rem !important;
}

body:not(.home) .search-box::placeholder {
    color: #94A3B8 !important;
}

body:not(.home) #catalogCount {
    color: #F5C211 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Filter Pills Bar */
body:not(.home) .filter-pill {
    background: #091A36 !important;
    color: #E2E8F0 !important;
    border: 1px solid #1E4D9B !important;
    border-radius: 30px !important;
    padding: 8px 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s ease !important;
}

body:not(.home) .filter-pill:hover:not(.active) {
    background: #1E4D9B !important;
    border-color: #F5C211 !important;
    color: #F5C211 !important;
    transform: translateY(-2px) !important;
}

body:not(.home) .filter-pill.active {
    background: linear-gradient(135deg, #8B1A0E 0%, #A32212 100%) !important;
    color: #FFFFFF !important;
    border-color: #F5C211 !important;
    box-shadow: 0 4px 18px rgba(139, 26, 14, 0.5) !important;
}

/* Main Grid Background & Machinery Cards */
body:not(.home) .bg-navy-alt {
    background: #071329 !important;
}

body:not(.home) .brochure-card,
body:not(.home) .product-card,
body:not(.home) .equip-card {
    background: #0F2A55 !important;
    border: 1px solid #1E4D9B !important;
    border-top: 4px solid #8B1A0E !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
    overflow: hidden !important;
}

/* Equipment card image container — clean #FFFFFF studio box for 100% seamless image fill without black bars */
.card-img-box,
.equip-card .card-img,
body:not(.home) .card-img-box {
    padding: 0 !important;
    margin: 0 !important;
    height: 320px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 2px solid #F5C211 !important;
}
.card-img-box a,
.equip-card .card-img a,
body:not(.home) .card-img-box a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.card-img-box img,
.equip-card .card-img img,
.brochure-card .card-img-box img,
body:not(.home) .brochure-card .card-img-box img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: fill !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
}

.card-img-box img.is-landscape,
.equip-card .card-img img.is-landscape,
.brochure-card .card-img-box img.is-landscape,
body:not(.home) .brochure-card .card-img-box img.is-landscape,
body:not(.home) .card-img-box img.is-landscape,
body:not(.home) .equip-card .card-img img.is-landscape {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

body:not(.home) .brochure-card .card-title,
body:not(.home) .product-title {
    color: #FFFFFF !important;
}

body:not(.home) .brochure-card .card-desc,
body:not(.home) .product-desc {
    color: #CBD5E1 !important;
}

.card-badge-top,
.hero-badge-pill,
.section-tag,
.card-badge,
body:not(.home) .hero-badge-pill,
body:not(.home) .card-badge-top,
body:not(.home) .section-tag {
    background: #8B1A0E !important;
    color: #FFFFFF !important;
    border: 1px solid #A32212 !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
}

body:not(.home) .btn-primary-yellow,
body:not(.home) .btn-hero-primary,
body:not(.home) .btn-product-quote,
body:not(.home) .card-btn {
    background: linear-gradient(135deg, #8B1A0E 0%, #6B1209 100%) !important;
    color: #FFF !important;
    border: 1px solid #A32212 !important;
    font-weight: 600 !important;
}

body:not(.home) .btn-primary-yellow:hover,
body:not(.home) .btn-hero-primary:hover,
body:not(.home) .btn-product-quote:hover,
body:not(.home) .card-btn:hover {
    background: linear-gradient(135deg, #A32212 0%, #8B1A0E 100%) !important;
    box-shadow: 0 6px 20px rgba(139, 26, 14, 0.45) !important;
}

body:not(.home) .cta-band {
    background: linear-gradient(135deg, #6B1209 0%, #8B1A0E 40%, #0F2A55 100%) !important;
    border-top: 3px solid #8B1A0E !important;
}

@media (max-width:768px) {
    .contact-details-strip { grid-template-columns:1fr; gap:18px; padding-inline:0; }
    .contact-map-frame, .contact-map-frame iframe { height:420px !important; min-height:420px !important; }
}

/* ==========================================================================
   SIMPLE CLEAN RECAPTCHA STYLING (NO WRAPPER BOX OR BORDER)
   ========================================================================== */
.wpcf7-form-control-wrap.recaptcha,
.wpcf7-recaptcha,
.recaptcha-box,
.recaptcha-box-wrapper,
.g-recaptcha {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: auto !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.g-recaptcha > div,
.wpcf7-recaptcha > div {
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.recaptcha-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
}

/* ==========================================================================
   MASTER SITE-WIDE RESPONSIVE SYSTEMS OVERRIDES (320px - 1024px)
   ========================================================================== */

/* 1. Global Viewport & Media Constraints */
img, video, iframe, svg, object {
    max-width: 100% !important;
    height: auto !important;
}

/* 2. Grid & Flex Stack System for Inline Styles at Tablet/Mobile Breakpoints */
@media screen and (max-width: 991px) {
    /* Target two-column grid inline styles */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1.1fr 0.9fr"],
    div[style*="grid-template-columns: 1.1fr 0.9fr"],
    div[style*="grid-template-columns:1.2fr 0.8fr"],
    div[style*="grid-template-columns: 1.2fr 0.8fr"],
    div[style*="grid-template-columns:1fr 2fr"],
    div[style*="grid-template-columns: 1fr 2fr"],
    /* Fast track forms */
    form[style*="grid-template-columns"],
    .product-inquiry-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Target about proprietor absolute card overflow */
    div[style*="position:absolute;bottom:-20px;right:-20px"],
    div[style*="position: absolute; bottom: -20px; right: -20px"] {
        position: relative !important;
        bottom: 0 !important;
        right: 0 !important;
        margin: 24px auto 0 !important;
        max-width: 320px !important;
    }
}

@media screen and (max-width: 768px) {
    /* Stack three-column grids and auto-fit minmax styles */
    div[style*="grid-template-columns:repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(auto-fit"],
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Handle specific minmax ranges that overflow narrow screens */
    div[style*="minmax(340px"] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

    /* Fast-track form row stack */
    form[style*="grid-template-columns:1fr 1fr 1fr auto"],
    form[style*="grid-template-columns: 1fr 1fr 1fr auto"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* 3. Mobile Navigation Menu Dynamic List Support */
.mobile-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
}
.mobile-nav li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
}
.mobile-nav li:not(:last-of-type) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.mobile-nav li a,
.mobile-nav a {
    display: block !important;
    font-family: var(--font-head);
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #FFF !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 14px 20px !important;
    text-align: center !important;
    width: 100% !important;
    transition: color 0.2s ease !important;
}
.mobile-nav li a:hover,
.mobile-nav a:hover,
.mobile-nav .current-menu-item > a {
    color: var(--yellow) !important;
    background: rgba(255,199,0,0.08) !important;
    border-radius: 8px !important;
}

/* 4. Fine-Tuning Header & Top Bar Wrapping */
@media screen and (max-width: 480px) {
    .logo-text .tagline {
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
    }
    .logo-text .gst-tag {
        font-size: 0.65rem !important;
    }
    /* Info bar typography styling */
    .info-bar-item {
        font-size: 0.72rem !important;
    }
}

/* 5. Contact Form 7 Fluid Styling */
.wpcf7-form {
    width: 100% !important;
}
.wpcf7-form p {
    margin-bottom: 14px !important;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 6. Fix for about page section layout mismatch */
body.page-template-template-about section {
    padding: 60px 0 !important;
}

/* 7. Inner Page Top Bar Responsive Adaptations */
@media screen and (max-width: 640px) {
    .top-bar-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .top-contact-info {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
}

/* 8. Catalog Search and Filter Pills Centering on Mobile */
@media screen and (max-width: 600px) {
    .filter-bar {
        justify-content: center !important;
        gap: 8px !important;
    }
    .filter-pill {
        font-size: 0.78rem !important;
        padding: 8px 14px !important;
    }
}

/* 9. Header Actions Alignment (Toggle & Quote Button) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media screen and (max-width: 1024px) {
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;
        width: 42px !important;
        background: transparent !important;
        border: 2px solid rgba(255, 199, 0, 0.4) !important;
        border-radius: 6px !important;
        color: #FFF !important;
        font-size: 1.3rem !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .btn-quote {
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .mobile-menu-toggle {
        height: 38px !important;
        width: 38px !important;
        font-size: 1.1rem !important;
    }
    .btn-quote {
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 0.78rem !important;
    }
}

/* 10. Stats Band Responsive Layout & Divider Alignment */
@media screen and (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 0 !important;
    }
    .stat-item {
        border-right: none !important;
        padding: 10px 15px !important;
    }
    /* Add vertical divider down the exact center */
    .stat-item:nth-child(odd) {
        border-right: 2px solid rgba(11,21,38,0.15) !important;
    }
}

@media screen and (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .stat-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(11,21,38,0.1) !important;
        padding-bottom: 16px !important;
    }
    .stat-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
}

/* 11. Modal Scrolling & Layout Alignment */
.modal-overlay .modal-container,
#inquiryModalOverlay .modal-container {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
}

.modal-overlay .modal-body,
#inquiryModalOverlay .modal-body {
    overflow-y: auto !important;
    flex-grow: 1 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 580px) {
    .modal-overlay .modal-body,
    #inquiryModalOverlay .modal-body {
        padding: 20px 16px !important;
    }
}

/* 12. Submit Button Text Wrapping to Prevent Overflow */
.wpcf7 input[type="submit"],
.btn-primary-yellow,
.btn-primary,
.btn-hero-primary {
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center !important;
}

/* 13. Responsive Product Photo Box Height */
@media screen and (max-width: 768px) {
    #productPhotoBox > div:first-of-type {
        height: 260px !important;
    }
}

@media screen and (max-width: 480px) {
    #productPhotoBox > div:first-of-type {
        height: 200px !important;
    }
}

/* 14. Cinematic Gallery Overlays & Touch Controls */
@media screen and (max-width: 768px) {
    /* Set a fixed responsive height to prevent vertical cutoff on small widths */
    #cinematicFrame {
        aspect-ratio: auto !important;
        height: 290px !important;
    }

    /* Make slide media occupy the top 70% of the container */
    .cinematic-slide .cinematic-img,
    .cinematic-slide iframe,
    .cinematic-slide img {
        height: 70% !important;
        top: 0 !important;
        position: absolute !important;
        object-fit: cover !important;
    }
    
    /* Hide the dark overlay gradient since text is below the image */
    .cinematic-slide > div:first-of-type {
        display: none !important;
    }
    
    /* Reposition text content wrapper to the bottom 30% container */
    .cinematic-slide > div[style*="bottom:25px"] {
        position: absolute !important;
        top: 70% !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 30% !important;
        background: #091A36 !important;
        padding: 12px 20px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        border-top: 1px solid #1E4D9B !important;
        pointer-events: auto !important;
    }

    /* Center floating navigation arrows vertically on the image area (top 70%) */
    #cinematicFrame > button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        line-height: 1 !important;
        top: 35% !important; /* Centered in the middle of the 70% image height */
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        left: 10px !important;
        z-index: 10 !important;
    }
    #cinematicFrame > button[onclick*="next"] {
        left: auto !important;
        right: 10px !important;
    }
}

@media screen and (max-width: 768px) {
    /* Hide fullscreen button text, show icon only in a perfect circle */
    .fullscreen-text {
        display: none !important;
    }
    #cinematicFrame .cinematic-slide button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        gap: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .cinematic-slide > div[style*="bottom:25px"] {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
    }
    #cinematicFrame .cinematic-slide h4 {
        font-size: 0.90rem !important;
        line-height: 1.15 !important;
    }
    .cinematic-slide span[style*="background:#8B1A0E"],
    .cinematic-slide span[style*="background:#10B981"] {
        font-size: 0.60rem !important;
        padding: 2px 6px !important;
        margin-bottom: 0 !important;
    }
}


/* 15. Product Details Column Alignment & CTA Button Wrapping */
.product-info-col p {
    max-width: 100% !important;
    word-wrap: break-word !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media screen and (max-width: 480px) {
    .product-info-col .btn,
    .product-info-col button,
    .product-info-col a {
        width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        padding: 12px 16px !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .product-info-col div[style*="display:flex;gap:14px"] {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 375px) {
    .product-info-col div[style*="grid-template-columns:1fr 1fr"],
    .product-info-col div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }
}

/* 16. Inline Requirement Inquiry Form Padding & Responsiveness */
@media screen and (max-width: 768px) {
    div[style*="border:2px solid #F5C211"][style*="padding:40px"],
    div[style*="border: 2px solid #F5C211"][style*="padding: 40px"] {
        padding: 24px !important;
    }
}
@media screen and (max-width: 480px) {
    div[style*="border:2px solid #F5C211"][style*="padding:40px"],
    div[style*="border: 2px solid #F5C211"][style*="padding: 40px"] {
        padding: 24px 16px !important;
        margin-top: 40px !important;
    }
}

/* 17. Ensure CF7 Wrapper and Input Fields Never Overflow */
.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}
.form-input-field {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 18. Google reCAPTCHA v2 Scaling to Prevent Mobile Cut-off */
@media screen and (max-width: 380px) {
    .wpcf7-form-control-wrap[data-name="recaptcha"] iframe,
    .g-recaptcha iframe,
    div[class*="recaptcha"] iframe,
    iframe[src*="recaptcha"] {
        transform: scale(0.85) !important;
        transform-origin: left top !important;
        max-width: 100% !important;
    }
}
@media screen and (max-width: 320px) {
    .wpcf7-form-control-wrap[data-name="recaptcha"] iframe,
    .g-recaptcha iframe,
    div[class*="recaptcha"] iframe,
    iframe[src*="recaptcha"] {
        transform: scale(0.78) !important;
        transform-origin: left top !important;
        max-width: 100% !important;
    }
}

/* 19. Product Photo Box & Thumbnails Padding and Scrollbar Optimization */
@media screen and (max-width: 480px) {
    #productPhotoBox {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    
    /* Optimize horizontal thumbnail scrolling strip */
    #productPhotoBox div[style*="display:flex;gap:10px"],
    #productPhotoBox div[style*="display: flex; gap: 10px"] {
        padding-left: 2px !important;
        padding-right: 2px !important;
        padding-bottom: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Hide scrollbars for cleaner native-feeling swipe */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    #productPhotoBox div[style*="display:flex;gap:10px"]::-webkit-scrollbar,
    #productPhotoBox div[style*="display: flex; gap: 10px"]::-webkit-scrollbar {
        display: none !important;
    }
}

/* 20. Header Alignment & Text Sizing overrides for 375px and 320px screens */
@media screen and (max-width: 375px) {
    .site-header .wrap {
        padding: 10px 8px !important;
    }
    .logo-group {
        gap: 6px !important;
    }
    .logo-group img {
        max-height: 38px !important;
    }
    .logo-text .name {
        font-size: 0.95rem !important;
    }
    .logo-text .tagline {
        font-size: 0.62rem !important;
        letter-spacing: 0px !important;
    }
    .logo-text .gst-tag {
        font-size: 0.60rem !important;
        letter-spacing: 0px !important;
    }
    .header-actions {
        gap: 6px !important;
    }
    .mobile-menu-toggle {
        height: 34px !important;
        width: 34px !important;
        font-size: 1rem !important;
    }
    .btn-quote {
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.70rem !important;
    }
}

/* 21. Contact Page Map Height Tuning for Mobile */
@media screen and (max-width: 480px) {
    .contact-map-frame,
    .contact-map-frame iframe {
        height: 280px !important;
        min-height: 280px !important;
    }
}

/* 22. Hide Redundant Gallery Top Controls on Responsive screens */
@media screen and (max-width: 768px) {
    .gallery-top-controls {
        display: none !important;
    }
}

/* 23. Full-Screen Mobile Menu Button Styling (Centering & Thumb Size) */
.mobile-nav .btn-quote {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    width: 100% !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    background: var(--yellow) !important;
    color: #0B1526 !important;
    padding: 0 24px !important;
    box-shadow: 0 4px 15px rgba(255,199,0,0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 24. Homepage & Inner Pages Scroll Animation Mobile Safety Net */
@media screen and (max-width: 768px) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        transition: none !important;
    }
}

/* 25. Single Equipment Page Real Mobile Device Layout Fixes */
@media screen and (max-width: 768px) {
    /* Increase Cinematic Frame height to 310px to accommodate wrapped title & badge */
    #cinematicFrame {
        aspect-ratio: auto !important;
        height: 310px !important;
    }
    .cinematic-slide .cinematic-img,
    .cinematic-slide iframe,
    .cinematic-slide img {
        height: 68% !important;
    }
    .cinematic-slide > div[style*="bottom:25px"] {
        top: 68% !important;
        height: 32% !important;
        padding: 10px 14px !important;
    }
    #cinematicFrame > button {
        top: 34% !important;
    }
}

/* Desktop cinematic carousel layout: keep media and controls inside the 16:9 viewport. */
@media screen and (min-width: 769px) {
    #cinematicFrame {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    #cinematicSlidesWrapper,
    .cinematic-slide {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    .cinematic-slide .cinematic-img,
    .cinematic-slide img,
    .cinematic-slide iframe {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
    }
    #cinematicFrame > button {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

#photoLightboxModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(5, 7, 10, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 50px 20px 20px !important;
    box-sizing: border-box !important;
}

#photoLightboxModal:not(.open):not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#photoLightboxModal.open,
#photoLightboxModal.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Fullscreen Fixed Modal Overlay Base & Popup Display Rules */
.modal-overlay,
#inquiryModalOverlay,
#emailTemplateModalOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(5, 7, 10, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.modal-overlay:not(.open):not(.is-open),
#inquiryModalOverlay:not(.open):not(.is-open),
#emailTemplateModalOverlay:not(.open):not(.is-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.modal-overlay.open,
.modal-overlay.is-open,
#inquiryModalOverlay.open,
#inquiryModalOverlay.is-open,
#emailTemplateModalOverlay.open,
#emailTemplateModalOverlay.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.lightbox-media-frame {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 95vw !important;
    flex: 1 !important;
    max-height: calc(100vh - 160px) !important;
    margin: auto !important;
}

#lightboxPhotoImg {
    max-width: 92vw !important;
    max-height: 82vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
    display: block !important;
    border-radius: 14px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95) !important;
    border: 2px solid #1E4D9B !important;
}

#lightboxThumbStrip {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    max-height: 84px !important;
    padding: 8px 12px !important;
    scrollbar-width: thin;
}

@media screen and (min-width: 769px) {
    .lightbox-media-frame.is-video {
        width: calc(100vw - 220px) !important;
        max-width: none !important;
        aspect-ratio: 16 / 9 !important;
        max-height: 72vh !important;
        height: auto !important;
    }

    .lightbox-media-frame.is-video .lightbox-youtube-player {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}
@media screen and (max-width: 480px) {
    /* Stack action buttons vertically on related product cards on mobile */
    .brochure-card .card-action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }
    .brochure-card .btn-card-link {
        text-align: center !important;
        padding: 8px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    .brochure-card .btn-product-quote {
        text-align: center !important;
        width: 100% !important;
        padding: 10px 14px !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    .brochure-card .card-img-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Top-align multi-line trade details & safety feature rows on mobile */
    div[style*="border-left:3px solid #F5C211"] {
        align-items: flex-start !important;
    }
    div[style*="border-left:3px solid #10B981"] {
        align-items: flex-start !important;
    }
    div[style*="border-left:3px solid #10B981"] > span:first-child {
        margin-top: 1px !important;
    }

    /* Adjust floating buttons positioning on mobile */
    .floating-controls {
        bottom: 16px !important;
        right: 16px !important;
    }
}

@media screen and (max-width: 414px) {
    /* Scale reCAPTCHA inside forms on narrow mobile viewports to prevent right-edge clipping */
    .wpcf7-form-control-wrap[data-name="recaptcha"] iframe,
    .g-recaptcha iframe,
    div[class*="recaptcha"] iframe,
    iframe[src*="recaptcha"] {
        transform: scale(0.84) !important;
        transform-origin: left top !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 350px) {
    .wpcf7-form-control-wrap[data-name="recaptcha"] iframe,
    .g-recaptcha iframe,
    div[class*="recaptcha"] iframe,
    iframe[src*="recaptcha"] {
        transform: scale(0.76) !important;
        transform-origin: left top !important;
        max-width: 100% !important;
    }
}

/* 26. GLOBAL LIGHT FORM FIELDS (STRONGLY APPLIED TO ALL FORM INPUTS & SELECTS) */
.form-input-field,
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
select,
textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 13px 16px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Placeholder styling for high legibility */
.form-input-field::placeholder,
.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
select::placeholder,
textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #64748B !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* Focus State with warm gold ring */
.form-input-field:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #F5C211 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(245,194,17,0.28) !important;
}

/* Select option items styling */
select option,
.form-select option,
.wpcf7 select option {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
    padding: 10px !important;
    font-weight: 600 !important;

/* ==========================================================================
   COMPLETE MASTER RESPONSIVE DESIGN SYSTEM OVERRIDES (320px - 1440px+)
   Covers Header, Navigation, Hero, Cards, Equipment Detail, Grids, Forms,
   Footer, Modals, Lightbox & Typography across Desktop, Tablet & Mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL VIEWPORT & CONTAINER SAFETY
   -------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

.wrap,
.container,
.site-header .wrap,
.site-footer .wrap,
.info-bar .wrap {
    box-sizing: border-box !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

img, video, iframe, svg {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   2. TABLET BREAKPOINT ENGINE (768px - 1024px)
   Including 768px, 820px, 834px, 912px, 1024px (iPad Air, iPad Pro, Surface)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {

    /* --- Header & Navigation --- */
    .site-header .wrap {
        padding: 12px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .nav-links,
    .nav-menu,
    header ul.nav-links {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;
        width: 42px !important;
        background: transparent !important;
        border: 2px solid rgba(245, 194, 17, 0.4) !important;
        border-radius: 6px !important;
        color: #FFF !important;
        font-size: 1.3rem !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .btn-quote {
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .logo-group img {
        max-height: 48px !important;
        width: auto !important;
    }

    .logo-text .name {
        font-size: 1.1rem !important;
    }

    .logo-text .tagline {
        font-size: 0.70rem !important;
        letter-spacing: 0.3px !important;
    }

    .logo-text .gst-tag {
        font-size: 0.70rem !important;
    }

    /* --- Hero Section & Grid --- */
    .hero-banner,
    .hero-section {
        padding: 36px 0 !important;
    }

    .hero-grid,
    .hero-slide-grid,
    div[style*="grid-template-columns:1.1fr 0.9fr"],
    div[style*="grid-template-columns: 1.1fr 0.9fr"],
    div[style*="grid-template-columns:1.2fr 0.8fr"],
    div[style*="grid-template-columns: 1.2fr 0.8fr"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .hero-title,
    .hero-slide h1 {
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
    }

    .hero-visual-card {
        margin: 0 auto !important;
        max-width: 540px !important;
        width: 100% !important;
    }

    /* --- Product Catalog & Showcase 2-Column Grid on Tablet --- */
    .products-grid,
    .equipment-catalog-grid,
    .brochure-card-grid,
    .brochure-grid-6,
    div[style*="grid-template-columns:repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* --- Single Equipment & Product Detail Page Layout --- */
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .product-info-col,
    .detail-right-col {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .quick-specs-grid,
    .product-info-col > div[style*="grid-template-columns"],
    .detail-right-col > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
        gap: 12px !important;
    }

    .quick-spec-item {
        padding: 12px 14px !important;
    }

    .product-cta-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Commercial & Technical Specs Sections */
    div[style*="margin-top:55px;background:#0F2A55"],
    div[style*="margin-top:40px;background:#0F2A55"],
    .tech-specs-section,
    .product-overview-card {
        padding: 28px !important;
    }

    div[style*="border-left:3px solid #F5C211"],
    div[style*="border-left:3px solid #10B981"] {
        display: flex !important;
        align-items: flex-start !important;
        padding: 12px 16px !important;
        gap: 10px !important;
    }

    /* --- Footer 2-Column Grid on Tablet --- */
    .footer-grid,
    div[style*="grid-template-columns:2fr 1fr 1fr 1.5fr"],
    div[style*="grid-template-columns: 2fr 1fr 1fr 1.5fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 24px !important;
    }

    .site-footer {
        padding: 48px 0 24px !important;
    }
}

/* --------------------------------------------------------------------------
   3. MOBILE BREAKPOINT ENGINE (320px - 767px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

    /* --- Info Bar Stack --- */
    .info-bar .wrap {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        align-items: center !important;
    }

    .info-bar-left {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* --- Single Column Card Grids --- */
    .products-grid,
    .equipment-catalog-grid,
    .brochure-card-grid,
    .brochure-grid-6,
    div[style*="grid-template-columns:repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns: repeat(4, 1fr)"],
    div[style*="grid-template-columns:repeat(2,1fr)"],
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* --- Hero Typography & Controls --- */
    .hero-title,
    .hero-slide h1 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .hero-text,
    .hero-slide p {
        font-size: 0.92rem !important;
        text-align: center !important;
    }

    /* --- Related Products & CTA Buttons --- */
    .product-cta-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .product-cta-group .btn,
    .product-cta-group button,
    .product-cta-group a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* --- Footer 1-Column Grid --- */
    .footer-grid,
    div[style*="grid-template-columns:2fr 1fr 1fr 1.5fr"],
    div[style*="grid-template-columns: 2fr 1fr 1fr 1.5fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center !important;
    }

    .footer-col {
        align-items: center !important;
        text-align: center !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* --------------------------------------------------------------------------
   4. ULTRA-SMALL MOBILE DEVICES (320px - 480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .site-header .wrap {
        padding: 10px 12px !important;
    }

    .logo-group {
        gap: 6px !important;
    }

    .logo-group img {
        max-height: 38px !important;
    }

    .logo-text .name {
        font-size: 0.95rem !important;
    }

    .logo-text .tagline {
        font-size: 0.62rem !important;
        letter-spacing: 0px !important;
    }

    .logo-text .gst-tag {
        font-size: 0.60rem !important;
        letter-spacing: 0px !important;
    }

    .header-actions {
        gap: 6px !important;
    }

    .mobile-menu-toggle {
        height: 36px !important;
        width: 36px !important;
        font-size: 1.1rem !important;
    }

    .btn-quote {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
    }

    .filter-bar {
        justify-content: center !important;
        gap: 6px !important;
    }

    .filter-pill {
        font-size: 0.76rem !important;
        padding: 6px 12px !important;
    }

    div[style*="border:2px solid #F5C211"][style*="padding:40px"],
    div[style*="border: 2px solid #F5C211"][style*="padding: 40px"] {
        padding: 20px 14px !important;
    }
}

/* --------------------------------------------------------------------------
   5. MASTER 100% FULL-WIDTH / FULL-SCREEN EDGE-TO-EDGE LAYOUT ENGINE
   Removes rigid 1280px / 1560px max-width container caps and expands all headers,
   footers, hero sections, card grids, and page containers across the full screen.
   -------------------------------------------------------------------------- */
.wrap,
.container,
.site-header .wrap,
.site-footer .wrap,
.info-bar .wrap,
section .wrap,
section .container,
.main-content .wrap,
.main-content .container,
.products-showcase-section .container,
#featured-products .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(20px, 3.5vw) !important;
    padding-right: max(20px, 3.5vw) !important;
    box-sizing: border-box !important;
}

/* Widescreen 3 & 4 Column Card Grids to fill full screen width */
@media screen and (min-width: 1200px) {
    .products-grid,
    .equipment-catalog-grid,
    .brochure-card-grid,
    .brochure-grid-6,
    .product-grid,
    .grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 28px !important;
    }
}

@media screen and (min-width: 1650px) {
    .products-grid,
    .equipment-catalog-grid,
    .brochure-card-grid,
    .brochure-grid-6,
    .product-grid,
    .grid-6 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 32px !important;
    }
}

/* --------------------------------------------------------------------------
   6. MASTER EQUIPMENT CARD IMAGE PRESENTATION & BADGE LAYER Z-INDEX FIX
   Ensures card badges (.card-badge-top) always stay on top layer (z-index: 999) above hovered images,
   and card image boxes use clean #FFFFFF studio background with contain object-fit.
   -------------------------------------------------------------------------- */
.brochure-card,
.product-card,
.equip-card,
.card-img-box {
    position: relative !important;
}

.card-badge-top,
.product-badge-group,
.badge-tag,
.badge-status-ready,
.visual-badge-top,
body .card-badge-top,
body .product-badge-group {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 999 !important;
    pointer-events: none !important;
}

/* =========================================
   HOMEPAGE PRODUCT IMAGE
   ========================================= */
/* ==========================================
   EQUIPMENT CARD IMAGE — FINAL PROPORTIONAL NATURAL FIX
   ========================================== */
.product-card__image,
.product-image,
.product-card-image,
.product-image-container,
.card-img-box,
.equip-card .card-img,
.brochure-card .card-img-box,
body .card-img-box,
body .equip-card .card-img {
    width: 100% !important;
    height: 280px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: block !important;
    position: relative !important;
    border-bottom: 2px solid #F5C211 !important;
}

.equip-card .card-img a,
.card-img-box a,
.brochure-card .card-img-box a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Default / Non-Landscape Product Image (ratio < 1.5): Preserve natural behavior */
.product-card__image img,
.product-image img,
.product-card-image img,
.product-image-container img,
.product-image-container .product-photo,
.equip-card .card-img img,
.card-img-box img,
.brochure-card .card-img-box img,
body .brochure-card .card-img-box img,
body .product-card .card-img-box img,
.equipment-card-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: fill !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
}

/* Wide Landscape Product Image (ratio > 1.20): Apply object-fit cover to fill card container */
.product-card__image img.is-landscape,
.product-image img.is-landscape,
.product-card-image img.is-landscape,
.product-image-container img.is-landscape,
.product-image-container .product-photo.is-landscape,
.equip-card .card-img img.is-landscape,
.card-img-box img.is-landscape,
.brochure-card .card-img-box img.is-landscape,
body .brochure-card .card-img-box img.is-landscape,
body:not(.home) .brochure-card .card-img-box img.is-landscape,
body:not(.home) .card-img-box img.is-landscape,
body .product-card .card-img-box img.is-landscape,
body:not(.home) .product-card .card-img-box img.is-landscape,
body .equip-card .card-img img.is-landscape,
body:not(.home) .equip-card .card-img img.is-landscape,
.equipment-card-image.is-landscape,
img.equipment-card-image.is-landscape {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Machine / Product Cutout Images (Square / Portrait): Apply object-fit contain to preserve complete machine */
.product-card__image img.is-square,
.product-card__image img.is-portrait,
.product-image img.is-square,
.product-image img.is-portrait,
.product-card-image img.is-square,
.product-card-image img.is-portrait,
.product-image-container img.is-square,
.product-image-container img.is-portrait,
.product-image-container .product-photo.is-square,
.product-image-container .product-photo.is-portrait,
.equip-card .card-img img.is-square,
.equip-card .card-img img.is-portrait,
.card-img-box img.is-square,
.card-img-box img.is-portrait,
.brochure-card .card-img-box img.is-square,
.brochure-card .card-img-box img.is-portrait,
body .brochure-card .card-img-box img.is-square,
body .brochure-card .card-img-box img.is-portrait,
body:not(.home) .brochure-card .card-img-box img.is-square,
body:not(.home) .brochure-card .card-img-box img.is-portrait,
body:not(.home) .card-img-box img.is-square,
body:not(.home) .card-img-box img.is-portrait,
.equipment-card-image.is-square,
.equipment-card-image.is-portrait,
img.equipment-card-image.is-square,
img.equipment-card-image.is-portrait {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.equip-card:hover .card-img img,
.brochure-card:hover .card-img-box img,
.product-card:hover .card-img-box img,
.product-card:hover .product-photo {
    transform: none !important;
}

/* Responsive Breakpoints — Defined Card Container Height */
@media (max-width: 1024px) {
    .product-card__image,
    .product-image,
    .product-card-image,
    .product-image-container,
    .card-img-box,
    .equip-card .card-img,
    .brochure-card .card-img-box {
        height: 250px !important;
    }
}

@media (max-width: 767px) {
    .product-card__image,
    .product-image,
    .product-card-image,
    .product-image-container,
    .card-img-box,
    .equip-card .card-img,
    .brochure-card .card-img-box {
        height: 220px !important;
    }
}

/* ==========================================================================
   COMPONENT-SPECIFIC IMAGE SYSTEM RULES
   ========================================================================== */

/* Hero & Banner Background Images */
.hero-section img,
.hero-banner img,
.page-banner img,
.equipment-hero img,
.hero-bg img,
.cinematic-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Single Equipment Detail Main Photo */
#mainProductPhoto,
.single-equipment-main-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 480px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
    transform: none !important;
}

/* Single Equipment Detail Gallery Thumbnails */
.thumb-gallery-grid img,
.gallery-thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 6px !important;
}

/* Logos & Brand Elements */
.site-logo img,
.brand-logo img,
.nav-logo img,
.footer-logo img {
    width: auto !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    object-position: left center !important;
}