/* ==========================================================================
   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: 100% !important;
    max-height: 100% !important;

    object-fit: contain !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, svg, object {
    max-width: 100% !important;
    height: auto;
}
/* reCAPTCHA iframes are excluded: forcing height:auto made its 78px frame 150px tall,
   an invisible layer that swallowed clicks on the submit button below it. */
iframe:where(:not([src*="recaptcha"]):not([title*="recaptcha" i])) {
    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,
.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 {
    /* Show the whole uploaded photo, never cropped — "contain" so any
       aspect ratio a client uploads still displays correctly. */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !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, svg, object {
    max-width: 100% !important;
    height: auto !important;
}
/* reCAPTCHA iframes are excluded: forcing height:auto made its 78px frame 150px tall,
   an invisible layer that swallowed clicks on the submit button below it. */
iframe:where(:not([src*="recaptcha"]):not([title*="recaptcha" i])) {
    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;
    }
}

/* Lightbox: show exactly ONE media item at a time (video OR photo).
   #lightboxPhotoImg has display:block !important above, which used to keep the
   photo visible beside the video and push the video off-centre. */
#photoLightboxModal .lightbox-media-frame.is-video #lightboxPhotoImg {
    display: none !important;
}
#photoLightboxModal .lightbox-media-frame:not(.is-video) .lightbox-youtube-player {
    display: none !important;
}
#photoLightboxModal .lightbox-media-frame.is-video {
    overflow: hidden !important;
}
@media screen and (max-width: 768px) {
    #photoLightboxModal .lightbox-media-frame.is-video {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }
    #photoLightboxModal .lightbox-media-frame.is-video .lightbox-youtube-player {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !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;
}

/* NOTE: the rule above was missing its closing brace, so browsers treated
   everything below it as nested inside "select option" and never applied it.
   The approved live design was built without this block, so it is kept
   switched off (@media not all) until it has been visually tested.
   Remove the "@media not all {" wrapper to enable it. */
@media not all {

/* ==========================================================================
   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, svg {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}
/* reCAPTCHA iframes are excluded: forcing height:auto made its 78px frame 150px tall,
   an invisible layer that swallowed clicks on the submit button below it. */
iframe:where(:not([src*="recaptcha"]):not([title*="recaptcha" i])) {
    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: #FFFFFF !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;
}

/* Card / equipment images — ALWAYS show the complete uploaded photo, never
   cropped, whatever its orientation or aspect ratio. "contain" on the white
   box above means a client can upload any image (portrait, landscape,
   square, tightly-framed or with lots of headroom) and it will still
   display correctly, centered, with nothing cut off. This intentionally
   applies the same rule regardless of the is-landscape/is-square/is-portrait
   classes main.js adds, so there is no orientation-dependent inconsistency. */
.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,
.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,
.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 {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !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;
}

} /* end @media not all (dormant block) */

/* ==========================================================================
   FORMS — CONTACT FORM 7 STATES, FULL-SIZE SUBMIT, VISIBLE FEEDBACK
   ========================================================================== */
/* The submit button always sits above neighbouring widgets (e.g. reCAPTCHA) */
.wpcf7 .wpcf7-submit,
.wpcf7 input[type="submit"] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.wpcf7-form-control-wrap.recaptcha {
    position: relative;
    z-index: 1;
    flex-wrap: wrap !important;
}
/* "Please verify that you are not a robot" goes under the widget, not beside it */
.wpcf7-form-control-wrap.recaptcha .wpcf7-not-valid-tip {
    flex-basis: 100% !important;
}
/* Block double submissions while the request is in flight */
.wpcf7 form.submitting .wpcf7-submit {
    pointer-events: none !important;
    opacity: 0.65 !important;
    cursor: progress !important;
}
/* Field-level validation */
.wpcf7 .wpcf7-not-valid-tip {
    display: block !important;
    color: #FF8A8A !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
/* Form-level response message: hidden until CF7 sets a result state */
.wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 14px 18px !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty {
    display: none !important;
}
.wpcf7 form.sent .wpcf7-response-output {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    background: rgba(245, 194, 17, 0.12) !important;
    border-color: #F5C211 !important;
    color: #FCD34D !important;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    background: rgba(239, 68, 68, 0.14) !important;
    border-color: #EF4444 !important;
    color: #FCA5A5 !important;
}