/* ==================================================
   SHMI — Shrihari Mahalaxmi Industries
   Brand stylesheet
   ================================================== */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,900&display=swap');

:root {
    --blue: #021E9C;
    --blue-light: #1E90F0;
    --deep: #063B73;
    --deep-2: #042A54;
    --gold: #D7B56D;
    --gold-light: #E8CE96;
    --dark: #021E9C;
    --bg: #FFFFFF;
    --soft: #F7F9FC;
    --kraft: #C8A66A;
    --muted: #5F6675;
    --muted-light: #8A93A6;
    --line: #E4E9F1;
    --radius: 14px;
    --radius-sm: 50px;
    --radius-btn: 50px;
    --header-total-height: 116px;
    --shadow: 0 20px 50px rgba(6, 59, 115, .10);
    --shadow-sm: 0 8px 24px rgba(6, 59, 115, .08);
    --font-body: 'Open Sans', sans-serif;
    --font-head: 'Rubik', sans-serif;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 50px !important;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.btn-blue {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(2, 30, 156, .18);
}

.btn-blue:hover {
    background: var(--deep) !important;
    border-color: var(--deep) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(6, 59, 115, .22);
}

.btn-gold {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--deep) !important;
    box-shadow: 0 8px 20px rgba(215, 181, 109, .22);
}

.btn-gold:hover {
    background: var(--gold-light) !important;
    border-color: var(--gold-light) !important;
    color: var(--deep) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(215, 181, 109, .3);
}

.btn-outline-blue {
    background: transparent !important;
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

.btn-outline-blue:hover {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.btn-outline-light-smi {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .75) !important;
    color: #ffffff !important;
}

.btn-outline-light-smi:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--deep) !important;
    transform: translateY(-2px);
}

.cta-band .btn-outline-light-smi,
.cta-band .btn-outline-light-smi:hover {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #ffffff !important;
}

.btn-lg {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 50px !important;
}

.btn-block {
    display: block;
    width: 100%;
    border-radius: 50px !important;
}

/* ==================================================
   Topbar
   ================================================== */
.smi-navbar {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 2px 18px rgba(6, 59, 115, .04);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 28px;
    min-height: 78px;
    position: relative;
}

/* Brand */
.smi-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.smi-brand .brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), var(--deep));
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(8, 120, 209, .28);
    position: relative;
}

.smi-brand .brand-mark::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid #fff;
}

.smi-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.smi-brand .brand-text strong {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 18px;
    color: var(--deep);
    letter-spacing: .2px;
}

.smi-brand .brand-text small {
    font-size: 11px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* Nav menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu > li {
    position: static;
}

.nav-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    margin: 14px 2px;
    color: var(--dark);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 15px;
    border-radius: 50px;
    transition: .25s;
    white-space: nowrap;
}

.nav-menu > li > a:hover,
.nav-menu > li > a.active,
.nav-menu > li:hover > a {
    color: var(--blue);
    background: rgba(8, 120, 209, .08);
}

.nav-menu .caret {
    font-size: 10px;
    color: var(--gold);
    transition: transform .25s;
}

.nav-menu > li:hover .caret {
    transform: rotate(180deg);
}

.nav-cta {
    flex-shrink: 0;
    border-radius: 50px;
    padding: 10px 22px;
}

/* Toggler */
.nav-toggler {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--deep);
}

.nav-toggler .bar {
    width: 20px;
    height: 2px;
    background: var(--deep);
    display: block;
    position: relative;
}

.nav-toggler .bar::before,
.nav-toggler .bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--deep);
}

.nav-toggler .bar::before { top: -6px; }
.nav-toggler .bar::after { top: 6px; }

/* ==================================================
   Mega menus (Apple-style)
   ================================================== */
.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(6, 59, 115, .08);
    border-top: none;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 20px 45px rgba(6, 59, 115, 0.16), 0 6px 18px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all .28s cubic-bezier(.22, .61, .36, 1);
    z-index: 100;
    overflow: hidden;
}

.nav-menu > li.has-mega:hover .mega-panel,
.nav-menu > li.has-mega.open .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-badge-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue), var(--deep));
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 50px;
    margin-left: 6px;
    vertical-align: middle;
}

.smi-navbar:not(.scrolled) .nav-badge-new {
    background: var(--gold);
    color: var(--deep);
}

.mega-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 28px;
    display: grid;
    gap: 56px;
    align-items: start;
}

.mega-inner.mega-2col {
    grid-template-columns: 1.5fr 1fr;
}

.mega-inner.mega-products-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 34px;
}

.mega-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mega-block-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mega-block-label::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--gold);
}

.mega-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-link-list li { margin-bottom: 4px; }

.mega-link-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--dark);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 15px;
    transition: .22s;
}

.mega-link-list a small {
    color: var(--muted-light);
    font-size: 12.5px;
    font-family: var(--font-body);
    font-weight: 400;
}

.mega-link-list a:hover {
    background: var(--soft);
    color: var(--blue);
    padding-left: 16px;
}

.mega-link-list a:hover small { color: var(--blue); }

.mega-feature {
    background: var(--deep);
    border-radius: var(--radius);
    padding: 34px 30px;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mega-feature::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(215, 181, 109, .12);
    right: -60px;
    bottom: -60px;
}

.mega-feature .mf-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
}

.mega-feature .mf-year {
    font-family: var(--font-head);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.mega-feature .mf-year span {
    color: var(--gold);
    font-size: 34px;
    vertical-align: super;
}

.mega-feature h5 {
    color: #fff;
    font-size: 22px;
    margin: 8px 0 6px;
}

.mega-feature p {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    margin-bottom: 16px;
}

.mega-feature a.mf-link {
    color: var(--gold);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 14px;
}

.mega-feature a.mf-link i { transition: transform .25s; }
.mega-feature a.mf-link:hover i { transform: translateX(5px); }

/* Products mega */
.mega-product-list { list-style: none; margin: 0; padding: 0; }

.mega-product-groups .mega-block-label { margin-top: 6px; }
.mega-product-groups .mega-product-list { margin-bottom: 8px; }
.mega-product-groups .mega-product-list:last-child { margin-bottom: 0; }

.mega-product-list li { margin-bottom: 4px; }

.mega-product-list > li { position: relative; }

.product-caret {
    color: var(--gold);
    font-size: 9px;
    margin-left: 4px;
    transition: transform .25s ease;
}

.mega-product-list > li.submenu-open .product-caret { transform: rotate(180deg); }

.product-submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    margin: -2px 0 8px 58px;
    padding: 0;
    opacity: 0;
    transition: max-height .28s ease, opacity .2s ease, margin .28s ease;
}

.mega-product-list > li.submenu-open .product-submenu {
    max-height: 160px;
    margin-top: 2px;
    opacity: 1;
}

.mega-product-list a {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: .22s;
}

.mega-product-list a .mp-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    transition: .22s;
    flex-shrink: 0;
}

.mega-product-list a .mp-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mega-product-list a .mp-info strong {
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--dark);
    font-size: 15px;
}

.mega-product-list a .mp-info small {
    color: var(--muted-light);
    font-size: 13px;
}

.mega-product-list a .mp-arrow {
    margin-left: auto;
    color: var(--gold);
    opacity: 0;
    transform: translateX(-6px);
    transition: .22s;
}

.mega-product-list a:hover {
    background: var(--soft);
    border-color: var(--line);
}

.mega-product-list a:hover .mp-icon {
    background: var(--blue);
    color: #fff;
}

.mega-product-list a:hover .mp-arrow {
    opacity: 1;
    transform: translateX(0);
}

.mega-product-list a.is-active {
    background: var(--soft);
    border-color: var(--line);
}

.mega-product-list > li > .product-menu-toggle {
    min-height: 64px;
    padding: 9px 12px;
    gap: 14px;
}

.mega-product-list > li.submenu-open > .product-menu-toggle,
.mega-product-list > li > .product-menu-toggle[aria-expanded="true"] {
    background: rgba(8, 120, 209, .07);
    border-color: rgba(8, 120, 209, .14);
}

.mega-product-list > li > .product-menu-toggle .mp-icon {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.mega-product-list > li > .product-menu-toggle .mp-info strong {
    font-weight: 600;
}

.mega-product-list > li > .product-menu-toggle .product-caret {
    display: inline-block;
    color: var(--gold);
    font-size: 9px;
    margin-left: 4px;
    transition: transform .2s ease;
}

.mega-product-list > li.submenu-open > .product-menu-toggle .product-caret {
    transform: rotate(180deg);
}

.mega-product-list > li > .product-submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    margin: 0 0 4px 54px;
    padding: 0 0 0 8px;
    opacity: 0;
    border-left: 2px solid rgba(8, 120, 209, .16);
    transition: max-height .2s ease, opacity .2s ease, margin .2s ease;
}

.mega-product-list > li.submenu-open > .product-submenu {
    max-height: 138px;
    margin-top: 2px;
    opacity: 1;
}

.mega-product-list > li.submenu-open {
    margin-bottom: 20px;
}

.mega-product-list > li > .product-submenu > li { margin: 0; }

.mega-product-list > li > .product-submenu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    border-radius: 0 7px 7px 0;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.25;
    transition: color .2s ease, background-color .2s ease, padding-left .2s ease;
}

.mega-product-list > li > .product-submenu > li > a::after {
    content: "\2192";
    font-size: 9px;
    font-weight: 600;
    color: var(--gold);
    opacity: .75;
}

.mega-product-list > li > .product-submenu > li > a:hover {
    padding-left: 14px;
    color: var(--blue);
    background: rgba(8, 120, 209, .06);
}

.mega-product-list > li > .product-menu-toggle .mp-arrow {
    display: none;
}

.mega-preview {
    background: var(--soft);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    min-height: 300px;
    height: 100%;
    max-height: 360px;
    display: flex;
    align-items: flex-end;
}

.mega-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .45s ease, transform .7s ease;
}

.mega-preview img.show {
    opacity: 1;
    transform: scale(1);
}

.mega-preview .mp-caption {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 22px;
    background: linear-gradient(to top, rgba(6, 59, 115, .85), rgba(6, 59, 115, 0));
    color: #fff;
}

.mega-preview .mp-caption strong {
    display: block;
    font-family: var(--font-head);
    font-size: 19px;
}

.mega-preview .mp-caption small {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
}

/* Solutions mega */
.mega-solutions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.mega-solutions a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    color: var(--dark);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 15px;
    transition: .22s;
}

.mega-solutions a i {
    color: var(--blue);
    font-size: 12px;
    transition: .22s;
}

.mega-solutions a:hover {
    background: var(--soft);
    color: var(--blue);
    padding-left: 20px;
}

.mega-solutions a:hover i { color: var(--gold); }

/* ==================================================
   Page header (inner pages)
   ================================================== */
.page-header {
    background: linear-gradient(110deg, var(--deep-2), var(--deep));
    color: #fff;
    padding: 120px 0 72px;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 181, 109, .18), transparent 70%);
}

.page-header::after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -140px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 120, 209, .25), transparent 70%);
}

.page-header .container-xxl { position: relative; z-index: 2; }

.page-header h1 {
    color: #fff;
    font-size: 44px;
    margin-bottom: 10px;
}

.page-header .ph-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}

.page-header .breadcrumb-smi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
}

.page-header .breadcrumb-smi a { color: rgba(255, 255, 255, .85); }
.page-header .breadcrumb-smi a:hover { color: var(--gold); }
.page-header .breadcrumb-smi .sep { color: var(--gold); font-size: 10px; }

/* ==================================================
   Company Overview Hero
   ================================================== */
.page-header.company-hero {
    position: relative;
    min-height: clamp(420px, 48vh, 580px);
    display: flex;
    align-items: center;
    padding: 160px 0 95px;
    margin: 0 0.5rem 0.5rem 0.5rem;
    border-radius: 0 0 clamp(32px, 3.5vw, 46px) clamp(32px, 3.5vw, 46px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(3, 30, 60, 0.90) 0%, rgba(4, 38, 76, 0.78) 38%, rgba(6, 59, 115, 0.35) 72%, rgba(3, 30, 60, 0.55) 100%),
        linear-gradient(180deg, rgba(3, 30, 60, 0.50) 0%, transparent 45%, rgba(3, 30, 60, 0.75) 100%),
        url('../images/hero/company.webp') right center / cover no-repeat;
    box-sizing: border-box;
}

.page-header.company-hero::before,
.page-header.company-hero::after {
    display: none;
}

.page-header.company-hero .container-xxl {
    position: relative;
    z-index: 2;
    width: 100%;
}

.page-header.company-hero h1 {
    font-size: clamp(36px, 4.2vw, 54px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1px;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
}

.page-header.company-hero .ph-eyebrow {
    font-size: 13px;
    letter-spacing: 2.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.page-header.company-hero .breadcrumb-smi {
    font-size: 14.5px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
    .page-header.company-hero {
        min-height: 380px;
        padding: 130px 0 65px;
        margin: 0;
        border-radius: 0 0 32px 32px;
        background:
            linear-gradient(180deg, rgba(3, 30, 60, 0.78) 0%, rgba(4, 38, 76, 0.65) 50%, rgba(3, 30, 60, 0.85) 100%),
            url('../images/hero/company.webp') center / cover no-repeat;
    }
}

@media (max-width: 575px) {
    .page-header.company-hero {
        min-height: 330px;
        padding: 110px 0 50px;
        border-radius: 0 0 24px 24px;
    }
}

/* Products Offerings Hero (image hero, uses image (4).webp) */
.page-header.company-hero.products-hero {
    background:
        linear-gradient(90deg, rgba(3, 30, 60, 0.90) 0%, rgba(4, 38, 76, 0.78) 38%, rgba(6, 59, 115, 0.35) 72%, rgba(3, 30, 60, 0.55) 100%),
        linear-gradient(180deg, rgba(3, 30, 60, 0.50) 0%, transparent 45%, rgba(3, 30, 60, 0.75) 100%),
        url('../images/hero/image (4).webp') right center / cover no-repeat;
}

/* Printing Hero (image hero, uses printing.webp) */
.page-header.company-hero.printing-hero {
    background:
        linear-gradient(90deg, rgba(3, 30, 60, 0.90) 0%, rgba(4, 38, 76, 0.78) 38%, rgba(6, 59, 115, 0.35) 72%, rgba(3, 30, 60, 0.55) 100%),
        linear-gradient(180deg, rgba(3, 30, 60, 0.50) 0%, transparent 45%, rgba(3, 30, 60, 0.75) 100%),
        url('../images/hero/printing.webp') right center / cover no-repeat;
}

@media (max-width: 991px) {
    .page-header.company-hero.products-hero {
        background:
            linear-gradient(180deg, rgba(3, 30, 60, 0.78) 0%, rgba(4, 38, 76, 0.65) 50%, rgba(3, 30, 60, 0.85) 100%),
            url('../images/hero/image (4).webp') center / cover no-repeat;
    }
    .page-header.company-hero.printing-hero {
        background:
            linear-gradient(180deg, rgba(3, 30, 60, 0.78) 0%, rgba(4, 38, 76, 0.65) 50%, rgba(3, 30, 60, 0.85) 100%),
            url('../images/hero/printing.webp') center / cover no-repeat;
    }
}

/* No-image gradient hero (same size + rounded corners as company hero) */
.page-header.card-hero {
    position: relative;
    min-height: clamp(420px, 48vh, 580px);
    display: flex;
    align-items: center;
    padding: 160px 0 95px;
    margin: 0 0.5rem 0.5rem 0.5rem;
    border-radius: 0 0 clamp(32px, 3.5vw, 46px) clamp(32px, 3.5vw, 46px);
    overflow: hidden;
    width: auto;
    box-sizing: border-box;
}

.page-header.card-hero h1 {
    font-size: clamp(36px, 4.2vw, 54px);
    line-height: 1.12;
    letter-spacing: -1px;
}

.page-header.card-hero .ph-eyebrow {
    font-size: 13px;
    letter-spacing: 2.5px;
}

.page-header.card-hero .breadcrumb-smi {
    font-size: 14.5px;
}

@media (max-width: 991px) {
    .page-header.card-hero {
        min-height: 380px;
        padding: 130px 0 65px;
        margin: 0;
        border-radius: 0 0 32px 32px;
    }
}

@media (max-width: 575px) {
    .page-header.card-hero {
        min-height: 330px;
        padding: 110px 0 50px;
        border-radius: 0 0 24px 24px;
    }
}

/* ==================================================
   Request a Quote Hero (Clean Gradient, No Image, Bottom Radius)
   ================================================== */
.page-header.quote-hero {
    background: linear-gradient(135deg, #052c58 0%, #063b73 50%, #031b38 100%);
    min-height: clamp(340px, 36vh, 420px);
    display: flex;
    align-items: center;
    border-radius: 0 0 clamp(32px, 3.5vw, 46px) clamp(32px, 3.5vw, 46px);
    padding: clamp(100px, 12vh, 130px) 0 clamp(45px, 6vh, 65px);
    position: relative;
    overflow: hidden;
}

.page-header.quote-hero::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 181, 109, 0.16), transparent 70%);
    pointer-events: none;
}

.page-header.quote-hero::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 120, 209, 0.22), transparent 70%);
    pointer-events: none;
}

.page-header.quote-hero .container-xxl {
    position: relative;
    z-index: 2;
}

.page-header.quote-hero h1 {
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(32px, 3.8vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 12px;
}

.page-header.quote-hero .ph-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e5bf60;
    margin-bottom: 12px;
}

.page-header.quote-hero .ph-lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 660px;
    font-size: clamp(14.5px, 1.15vw, 16.5px);
    line-height: 1.65;
    margin-bottom: 16px;
}

.page-header.quote-hero .breadcrumb-smi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13.5px;
}

.page-header.quote-hero .breadcrumb-smi a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.page-header.quote-hero .breadcrumb-smi a:hover {
    color: var(--gold);
}

.page-header.quote-hero .breadcrumb-smi .sep {
    color: var(--gold);
    font-size: 10px;
}

/* ==================================================
   Quote Form & Sidebar Customization
   ================================================== */
.quote-form-card {
    background: #ffffff;
    border-radius: 20px;
    padding: clamp(28px, 3.5vw, 44px);
    border: 1px solid rgba(7, 59, 120, 0.08);
    box-shadow: 0 15px 45px rgba(7, 59, 120, 0.06);
}

.quote-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.product-check-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    margin: 0;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.product-check-pill:hover {
    background: #edf5fd;
    border-color: #93c5fd;
    color: var(--blue);
    transform: translateY(-1px);
}

.product-check-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}

.product-check-pill.is-checked,
.product-check-pill:has(input:checked) {
    background: #021E9C !important;
    border-color: #021E9C !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 30, 156, 0.25);
    transform: translateY(-1px);
}

.product-check-pill.is-checked span,
.product-check-pill:has(input:checked) span {
    color: #ffffff !important;
}

.quote-process-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 28px;
    border: 1px solid rgba(7, 59, 120, 0.08);
    box-shadow: 0 15px 40px rgba(7, 59, 120, 0.05);
    margin-bottom: 24px;
}

.quote-process-card h4 {
    color: #073b78;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.quote-process-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.quote-process-item:last-child {
    margin-bottom: 0;
}

.quote-process-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(215, 181, 109, 0.18);
    color: #9c7316;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quote-process-info strong {
    display: block;
    color: #073b78;
    font-size: 14.5px;
    margin-bottom: 3px;
}

.quote-process-info p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
}

.quote-hotline-card {
    background: linear-gradient(135deg, #073b78 0%, #031b38 100%);
    border-radius: 20px;
    padding: 30px 26px;
    color: #ffffff;
    box-shadow: 0 15px 40px rgba(4, 42, 84, 0.18);
}

.quote-hotline-card h4 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}

.quote-hotline-card p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.quote-hotline-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quote-hotline-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.quote-hotline-link:hover {
    background: #ffffff;
    color: #021e9c;
    border-color: #ffffff;
    transform: translateY(-2px);
}

.quote-hotline-link i {
    color: var(--gold);
    font-size: 14px;
}

.quote-hotline-link:hover i {
    color: #021e9c;
}

/* ==================================================
   Company "Who We Are" — Full-Bleed Right Image
   ================================================== */
.company-who-we-are {
    position: relative;
    overflow: hidden;
}

.who-we-are-image-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
}

.who-we-are-image {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}

.who-we-are-image img {
    display: block;
    width: 100%;
    max-width: min(900px, 100%);
    height: auto;
    max-height: 750px;
    object-fit: contain;
    object-position: right center;
    transition: transform .5s ease;
}

.who-we-are-image:hover img {
    transform: translateY(-4px) scale(1.02);
}

@media (max-width: 991px) {
    .who-we-are-image-wrap {
        margin-right: 0;
        justify-content: center;
    }

    .who-we-are-image {
        justify-content: center;
    }

    .who-we-are-image img {
        max-width: 720px;
        max-height: 560px;
        object-position: center;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .who-we-are-image img {
        max-height: 400px;
    }
}

.who-full-bleed .container-xxl {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.who-full-bleed .container-xxl > .row {
    margin-left: 0;
    margin-right: 0;
}

.who-full-bleed .container-xxl > .row > .col-lg-6:first-child {
    padding-left: clamp(24px, 4vw, 60px);
    padding-right: clamp(24px, 4vw, 60px);
}

.who-full-bleed .container-xxl > .row > .col-lg-6:last-child {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 991.98px) {
    .who-full-bleed .container-xxl {
        max-width: initial;
        padding-left: 24px;
        padding-right: 24px;
    }

    .who-full-bleed .container-xxl > .row {
        margin-left: calc(-.5 * var(--bs-gutter-x, 3rem));
        margin-right: calc(-.5 * var(--bs-gutter-x, 3rem));
    }

    .who-full-bleed .container-xxl > .row > .col-lg-6 {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 575.98px) {
    .cert-verification-set {
        gap: 58px;
        padding-left: 48px;
        padding-right: 58px;
    }

    .cert-verification-set img {
        height: 56px;
        max-width: 135px;
    }
}

/* ==================================================
   Section headings
   ================================================== */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 14px;
}

.section-eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--gold);
}

.section-eyebrow.gold-eyebrow { color: var(--gold); }
.section-eyebrow.center-eyebrow::after {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--gold);
}

.section-title {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.section-title .text-blue { color: var(--blue) !important; }
.section-title .text-gold { color: var(--gold) !important; }

.section-lead {
    color: var(--muted);
    font-size: 17px;
    max-width: 720px;
}

.sec-pad { padding: 130px 0; }
.sec-pad-sm { padding: 80px 0; }

/* ==================================================
   Hero
   ================================================== */
.smi-hero {
    background: linear-gradient(180deg, #fff 0%, var(--soft) 100%);
    min-height: calc(100dvh - var(--header-total-height));
    display: flex;
    width: 100%;
}

.smi-hero > .container-xxl {
    width: 100%;
    margin: auto;
}

.hero-wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    padding-bottom: 72px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(215, 181, 109, .14);
    border: 1px solid rgba(215, 181, 109, .35);
    color: #8a6d2f;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 22px;
}

.hero-eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse-dot 2s infinite;
}

.hero-title {
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.08;
    color: var(--deep);
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-title .accent-blue { color: var(--blue); }
.hero-title .accent-gold { color: var(--gold); }

.hero-sub {
    color: var(--muted);
    font-size: 18px;
    max-width: 540px;
    margin-bottom: 30px;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.hero-stats .hs-num {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    color: var(--deep);
    line-height: 1;
}

.hero-stats .hs-num i { color: var(--gold); font-style: normal; }
.hero-stats .hs-label { font-size: 13px; color: var(--muted-light); }

/* Hero media */
.hero-media {
    position: relative;
}

.hero-video-wrap {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: var(--deep);
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 10;
}

.hero-video-wrap video,
.hero-video-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-video-wrap .hv-poster {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 59, 115, .15), rgba(6, 59, 115, .45)),
        url('../images/hero/heroimage.webp') center/cover no-repeat;
    z-index: 2;
}

.hero-video-wrap .hv-poster.playable { cursor: pointer; }

.hero-video-wrap .hv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--deep));
    border: 3px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(8, 120, 209, .45);
    transition: .3s;
    animation: pulse-ring 2.2s infinite;
}

.hero-video-wrap .hv-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.hero-video-wrap .hv-tag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 5;
    background: rgba(255, 255, 255, .92);
    color: var(--deep);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    padding: 8px 16px;
    border-radius: 50px;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-video-wrap .hv-tag i { color: var(--gold); }

.hero-badge-card {
    position: absolute;
    bottom: -26px;
    right: -16px;
    background: #fff;
    /* border-radius: 22px; */
    padding: 18px 22px;
    box-shadow: var(--shadow);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 250px;
}

.hero-badge-card .hbc-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.hero-badge-card strong {
    font-family: var(--font-head);
    color: var(--deep);
    font-size: 15px;
    display: block;
    line-height: 1.3;
}

.hero-badge-card small {
    color: var(--muted-light);
    font-size: 12.5px;
}

/* ==================================================
   Statement band
   ================================================== */
.statement-band {
    background: linear-gradient(180deg, #edf5fd 0%, #f4f8fe 50%, #eaf3fb 100%);
    color: var(--dark);
    text-align: center;
    padding: 130px 24px 105px;
    position: relative;
    overflow: hidden;
}

.statement-band .container-xxl { position: relative; z-index: 2; }

.statement-line {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--deep);
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.15;
    margin-bottom: 26px;
}

.statement-line .g { color: var(--gold); }
.statement-line .b { color: var(--blue); }

.statement-sub {
    color: var(--muted);
    max-width: 640px;
    margin: 0 auto 36px;
    font-size: 17px;
}

/* ==================================================
   Heritage Journey — Flow Path UI (1905 -> Today)
   ================================================== */
.heritage-journey-section {
    position: relative;
    padding: 80px 0 100px;
    background: #f4f8fc;
    overflow: hidden;
    border: none !important;
}

/* Subtle ambient background glow */
.heritage-journey-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 10%, rgba(2, 30, 156, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.badge-pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    vertical-align: middle;
}

/* Minimalist Segmented Era Navigator Bar */
.journey-nav-wrapper {
    position: sticky;
    top: 86px;
    z-index: 30;
    margin-bottom: 48px;
    padding: 8px 0;
    display: flex;
    justify-content: center;
}

.journey-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 5px 6px;
    border-radius: 50px;
    border: none !important;
    box-shadow: 0 10px 30px rgba(6, 59, 115, 0.08);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.journey-nav-pill::-webkit-scrollbar {
    display: none;
}

.journey-era-btn {
    border: none !important;
    background: transparent;
    color: #64748b;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.journey-era-btn .era-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background 0.2s ease;
}
.journey-era-btn:hover {
    color: var(--deep);
    background: #f1f5f9;
}
.journey-era-btn.active {
    background: #021E9C;
    color: #ffffff;
}
.journey-era-btn.active .era-dot {
    background: var(--gold);
}

/* Overall Flow Path Container */
.journey-flow-container {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 0 30px;
    z-index: 2;
}

/* Central Guide Spine Track */
.flow-spine-track {
    position: absolute;
    top: 30px;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    z-index: 1;
}

.flow-line-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #cbd5e1;
    border-radius: 2px;
}

.flow-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #021E9C;
    border-radius: 2px;
    transition: height 0.15s ease-out;
}

/* Minimalist Traveling Waypoint Dot */
.flow-beacon {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0%;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 2;
    transition: top 0.15s ease-out;
}

.flow-beacon-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #021E9C;
    box-shadow: 0 0 0 3px #ffffff, 0 2px 6px rgba(2, 30, 156, 0.3);
}

.flow-beacon-ripple {
    display: none;
}

/* Step container */
.journey-step {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 64px;
    z-index: 2;
}
.journey-step:last-child {
    margin-bottom: 0;
}

.journey-step.flow-left {
    justify-content: flex-start;
}
.journey-step.flow-right {
    justify-content: flex-end;
}

.journey-col {
    width: calc(50% - 46px);
}

/* Central Waypoint Node Jewel */
.journey-node-anchor {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journey-node-jewel {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    box-shadow: 0 4px 14px rgba(6, 59, 115, 0.08);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 6; /* Strictly ABOVE the bridge line */
}

.journey-node-jewel i {
    font-size: 15px;
    color: #64748b;
    transition: color 0.3s ease;
}

/* Connecting Bridge Line — Strictly UNDER the icons */
.journey-bridge {
    position: absolute;
    top: 50%;
    height: 2px;
    background: #cbd5e1;
    z-index: 1 !important; /* Strictly UNDER the icon */
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
    width: 46px;
    pointer-events: none;
}
.flow-left .journey-bridge {
    right: 50%;
}
.flow-right .journey-bridge {
    left: 50%;
}

/* Active State for Step */
.journey-step.is-active .journey-node-jewel {
    background: #021E9C;
    color: #ffffff;
    transform: scale(1.08);
}
.journey-step.is-active .journey-node-jewel i {
    color: #ffffff;
}
.journey-step.is-active .journey-bridge {
    background: #021E9C;
    z-index: 1 !important;
}

/* Milestone Card Styling with Smooth Center Entrance (Clean, Human, No AI Gimmicks) */
.journey-step.flow-left .journey-card {
    background: #ffffff;
    border: none !important;
    border-radius: 20px;
    padding: 32px 30px;
    box-shadow: 0 4px 20px rgba(6, 59, 115, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    opacity: 0.2;
    transform: translateX(-40px) scale(0.96);
    filter: blur(3px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.journey-step.flow-right .journey-card {
    background: #ffffff;
    border: none !important;
    border-radius: 20px;
    padding: 32px 30px;
    box-shadow: 0 4px 20px rgba(6, 59, 115, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    opacity: 0.2;
    transform: translateX(40px) scale(0.96);
    filter: blur(3px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* Active State for Step when reaching viewport center */
.journey-step.is-active .journey-card {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
    box-shadow: 0 8px 28px rgba(6, 59, 115, 0.08);
}

.journey-step.is-active .journey-card:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 14px 34px rgba(6, 59, 115, 0.11);
}

/* Subtle Watermark Year in Background */
.jc-watermark {
    position: absolute;
    top: 10px;
    right: 20px;
    font-family: var(--font-head);
    font-size: clamp(70px, 8vw, 100px);
    font-weight: 800;
    line-height: 1;
    color: #063B73;
    opacity: 0.03;
    letter-spacing: -3px;
    pointer-events: none;
    user-select: none;
}

/* Card Header */
.jc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.jc-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Clean Icon Pebble (No Glow Effect, Minimalist & Crisp) */
.jc-icon-pebble {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #edf3fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--deep);
    font-size: 16px;
    box-shadow: none !important;
    border: none !important;
    flex-shrink: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.journey-card:hover .jc-icon-pebble,
.journey-step.is-active .jc-icon-pebble {
    background: #021E9C;
    color: #ffffff;
    box-shadow: none !important;
}
.journey-card:hover .jc-icon-pebble i,
.journey-step.is-active .jc-icon-pebble i {
    color: #ffffff !important;
}

.jc-year-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.jc-year {
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--deep);
    letter-spacing: -0.5px;
}

.jc-gen-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--deep);
    background: #eef3f9;
    padding: 3px 9px;
    border-radius: 50px;
    border: none !important;
}

.jc-era-tag {
    font-size: 11.5px;
    font-weight: 600;
    color: #8c6418;
    background: #fdf5e6;
    border: none !important;
    padding: 4px 11px;
    border-radius: 50px;
}

.jc-title {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 10px;
    line-height: 1.35;
    position: relative;
    z-index: 2;
}

.jc-desc {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

/* Key Innovation Chips */
.jc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.jc-chip {
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    background: #f1f5f9;
    border: none !important;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s ease;
}
.jc-chip i {
    font-size: 10px;
    color: var(--blue);
}
.jc-chip:hover {
    background: #e2e8f0;
}

/* Highlight Stat Band inside card */
.jc-stat-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: none !important;
    border-radius: 10px;
    padding: 10px 14px;
    position: relative;
    z-index: 2;
}

.jc-stat-label {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jc-stat-val {
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--deep);
    display: flex;
    align-items: center;
    gap: 5px;
}
.jc-stat-val i {
    color: var(--gold);
}

/* Bottom Journey Summary Cap */
.journey-summary-cap {
    margin-top: 50px;
    text-align: center;
    position: relative;
    z-index: 3;
}

.journey-cap-card {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(135deg, #042A54 0%, #063B73 50%, #021E9C 100%);
    color: #ffffff;
    border-radius: 20px;
    border: none !important;
    padding: 40px 36px;
    box-shadow: 0 16px 40px rgba(6, 59, 115, 0.2);
    position: relative;
    overflow: hidden;
}

.journey-cap-card h3 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
}

.journey-cap-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    max-width: 580px;
    margin: 0 auto 24px;
}

/* Responsive Overrides (< 992px) */
@media (max-width: 991.98px) {
    .journey-nav-wrapper {
        top: 70px;
        margin-bottom: 30px;
    }
    .flow-spine-track {
        left: 24px;
        transform: none;
    }
    .journey-step {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 56px;
        margin-bottom: 40px;
    }
    .journey-step.flow-left,
    .journey-step.flow-right {
        justify-content: flex-start;
    }
    .journey-col {
        width: 100%;
    }
    .journey-node-anchor {
        left: 24px;
        transform: translate(-50%, 0);
        top: 24px;
        z-index: 5;
    }
    .journey-node-jewel {
        width: 40px;
        height: 40px;
        font-size: 12px;
        z-index: 6;
    }
    .journey-bridge {
        width: 32px;
        left: 0 !important;
        right: auto !important;
        top: 50%;
        z-index: 1 !important;
    }
    .journey-step.flow-left .journey-card,
    .journey-step.flow-right .journey-card {
        transform: translateY(20px) scale(0.98);
        padding: 24px 20px;
        border-radius: 16px;
    }
    .journey-step.is-active .journey-card {
        transform: translateY(0) scale(1);
    }
    .jc-year {
        font-size: 26px;
    }
    .jc-title {
        font-size: 18px;
    }
    .jc-watermark {
        font-size: 60px;
        right: 12px;
        top: 4px;
    }
}

@media (max-width: 575.98px) {
    .journey-nav-pill {
        padding: 3px 4px;
    }
    .journey-era-btn {
        font-size: 11.5px;
        padding: 6px 10px;
    }
    .flow-spine-track {
        left: 18px;
    }
    .journey-node-anchor {
        left: 18px;
    }
    .journey-step {
        padding-left: 44px;
        margin-bottom: 32px;
    }
    .journey-bridge {
        width: 26px;
        left: 0 !important;
    }
    .journey-card {
        padding: 20px 16px;
        border-radius: 14px;
    }
    .jc-year {
        font-size: 22px;
    }
    .jc-title {
        font-size: 16.5px;
    }
    .jc-icon-pebble {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 8px;
    }
    .journey-cap-card {
        padding: 28px 16px;
        border-radius: 16px;
    }
    .journey-cap-card h3 {
        font-size: 20px;
    }
}

/* ==================================================
   Company Purpose & Values Sections
   ================================================== */
.company-purpose-section,
.company-values-section {
    position: relative;
    padding: 95px 0 105px;
    background: linear-gradient(180deg, #edf5fd 0%, #f4f8fe 50%, #eaf3fb 100%);
    overflow: hidden;
    border: none !important;
}

.company-purpose-section::before,
.company-values-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 10%, rgba(2, 30, 156, 0.035) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.company-purpose-section .container-xxl,
.company-values-section .container-xxl {
    position: relative;
    z-index: 2;
}

.company-purpose-section .feature-card,
.company-values-section .feature-card {
    background: #ffffff;
    border: none !important;
    border-radius: 20px;
    padding: 36px 30px;
    box-shadow: 0 4px 20px rgba(6, 59, 115, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.company-purpose-section .feature-card:hover,
.company-values-section .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(6, 59, 115, 0.09);
}

.company-purpose-section .fc-icon,
.company-values-section .fc-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #edf3fa;
    color: var(--deep);
    font-size: 18px;
    margin-bottom: 20px;
    box-shadow: none !important;
    border: none !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.company-purpose-section .feature-card:hover .fc-icon,
.company-values-section .feature-card:hover .fc-icon {
    background: #021E9C;
    color: #ffffff;
    transform: none;
}

.company-purpose-section .feature-card h4,
.company-values-section .feature-card h4 {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 10px;
}

.company-purpose-section .feature-card p,
.company-values-section .feature-card p {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 0;
}

/* ==================================================
   Feature / icon cards
   ================================================== */
.feature-card {
    background: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 32px 28px;
    height: 100%;
    transition: box-shadow .3s ease, transform .3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(6, 59, 115, 0.05);
}

.feature-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-6px);
}

.feature-card .fc-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: var(--soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    transition: background .3s ease, color .3s ease;
}

.feature-card:hover .fc-icon {
    background: linear-gradient(135deg, var(--blue), var(--deep));
    color: #fff;
    transform: none;
}

.feature-card h4 {
    font-size: 19px;
    margin-bottom: 10px;
}

.feature-card p {
    color: var(--muted);
    font-size: 14.5px;
    margin-bottom: 0;
}

.feature-card .fc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 14px;
    color: var(--blue);
}

.feature-card .fc-link i { color: var(--gold); transition: .25s; }
.feature-card .fc-link:hover i { transform: translateX(5px); }

/* Certification card badge treatment */
.certification-card {
    min-height: 226px;
    height: 100%;
    padding: 24px 24px 22px;
    border: 1px solid rgba(6, 59, 115, .085);
    border-radius: 18px;
    box-shadow: 0 5px 16px rgba(6, 59, 115, .045);
    transition: box-shadow .2s ease-out, transform .2s ease-out, border-color .2s ease-out;
}

.certification-card:hover {
    border-color: rgba(215, 181, 109, .42);
    box-shadow: 0 9px 21px rgba(6, 59, 115, .075);
    transform: translateY(-3px);
}

.certification-badge {
    height: 66px;
    width: 100%;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    overflow: hidden;
    padding: 8px 12px 8px 15px;
    box-sizing: border-box;
    border: 1px solid rgba(215, 181, 109, .25);
    border-radius: 13px;
    background: rgba(6, 59, 115, .035);
    color: var(--blue);
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
}

.certification-badge::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    right: -20px;
    bottom: -28px;
    border: 1px solid rgba(215, 181, 109, .14);
    border-radius: 50%;
}

.certification-badge span {
    max-width: 54%;
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.7px;
    line-height: 1.25;
    text-align: left;
}

.certification-badge img {
    width: 74px;
    height: 50px;
    display: block;
    object-fit: contain;
    border-radius: 6px;
    background: transparent;
    transition: transform .22s ease;
}

.certification-card:hover .certification-badge {
    background: rgba(8, 120, 209, .055);
    border-color: rgba(215, 181, 109, .42);
    transform: scale(1.02);
}

.certification-card:hover .certification-badge img {
    transform: scale(1.04);
}

.certification-card h4 {
    color: var(--deep);
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 5px;
}

.certification-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.48;
}

.cert-standards-section .text-center.mx-auto {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
}

.cert-standards-section .row {
    row-gap: 1.1rem !important;
}

/* ==================================================
   Team Section — Premium Duo Layout
   ================================================== */
.team-duo-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 auto 50px;
    max-width: 1200px;
}

.team-duo-col {
    flex: 1 1 320px;
    max-width: 380px;
    min-width: 280px;
    display: flex;
}

.team-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #ffffff;
    border: none !important;
    border-radius: 22px;
    overflow: hidden;
    width: 100%;
    color: var(--dark);
    box-shadow: 0 4px 20px rgba(6, 59, 115, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
    text-decoration: none;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -8px rgba(6, 59, 115, 0.12), 0 4px 14px rgba(2, 30, 156, 0.04);
    color: var(--dark);
}

.team-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #edf3fa;
    border-radius: 22px 22px 0 0;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.team-photo img[src*="member-2"] {
    object-position: center 5%;
}

.team-card:hover .team-photo img {
    transform: scale(1.025);
}

.team-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 59, 115, 0) 50%, rgba(4, 42, 84, 0.25) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.team-card:hover .team-overlay {
    opacity: 1;
}

.team-linkedin {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #0a66c2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(6, 59, 115, 0.12);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease;
    z-index: 15;
    pointer-events: auto;
}

.team-card:hover .team-linkedin {
    transform: translateY(0);
    opacity: 1;
}

.team-card.over-linkedin .team-linkedin,
.team-linkedin:hover {
    background: #0a66c2;
    color: #ffffff;
    transform: translateY(0) scale(1.08);
}

.team-body {
    padding: 24px 26px 26px;
    background: #ffffff;
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-card:hover .team-body {
    transform: translateY(-3px);
}

.team-name {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 4px;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.team-arrow {
    font-size: 14px;
    color: #94a3b8;
    transition: color 0.3s ease, transform 0.3s ease;
}

.team-card:hover .team-arrow {
    color: var(--blue);
    transform: translate(2px, -2px);
}

.team-role {
    display: block;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Floating Cursor Name Label (Name Only) */
.team-cursor-pill {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: none !important;
    border-radius: 50px;
    padding: 7px 16px;
    box-shadow: 0 10px 28px rgba(6, 59, 115, 0.16), 0 2px 6px rgba(0, 0, 0, 0.04);
    opacity: 0;
    transform: translate(-50%, -135%) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    white-space: nowrap;
    will-change: transform, opacity;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--deep);
    line-height: 1;
}

.team-card.cursor-active .team-cursor-pill {
    opacity: 1;
    transform: translate(-50%, -135%) scale(1);
}

/* When approaching / over LinkedIn, fade out pill instantly and smoothly */
.team-card.over-linkedin .team-cursor-pill {
    opacity: 0 !important;
    transform: translate(-50%, -135%) scale(0.92) !important;
    pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
    .team-cursor-pill {
        display: none !important;
    }
}

/* Team Commitments Feature Strip */
.team-commitments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 54px auto 0;
}

.team-commitment-card {
    background: #ffffff;
    border: none !important;
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 4px 20px rgba(6, 59, 115, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-commitment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(6, 59, 115, 0.08);
}

.tc-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #edf3fa;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.team-commitment-card:hover .tc-icon-wrap {
    background: #021E9C;
    color: #ffffff;
}

.tc-text-wrap {
    flex: 1;
}

.tc-title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 4px;
    line-height: 1.3;
}

.tc-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .team-commitments-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 520px;
    }
}

.team-notes {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}

.team-notes li {
    margin-bottom: 0;
}

/* ==================================================
   Product cards
   ================================================== */
.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: .3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-6px);
}

.product-card .pc-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--soft);
}

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

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

.product-card .pc-media .pc-icon {
    position: absolute;
    left: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: var(--shadow-sm);
}

.product-card .pc-body {
    padding: 24px 24px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card .pc-tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.product-card h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.product-card h4 a { color: var(--deep); }
.product-card h4 a:hover { color: var(--blue); }

.product-card p {
    color: #000;
    font-size: 14.5px;
    flex: 1;
}

.products-offering-grid .product-card p {
    color: #000;
}
.products-offering-grid .pc-tag {
    color: #000;
}
.products-offering-grid .product-card h4 a {
    color: #000;
}
.products-offering-grid .product-card h4 a:hover {
    color: var(--blue);
}
.products-offering-grid .section-eyebrow {
    color: #000;
}
.products-offering-grid .section-title {
    color: #000;
}
.products-offering-grid .section-lead {
    color: #000;
}

.product-card .pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.product-card .pc-foot a {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 14px;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-card .pc-foot a i { transition: .25s; color: var(--gold); }
.product-card .pc-foot a:hover i { transform: translateX(5px); }

/* ==================================================
   Solution cards
   ================================================== */
.solution-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    transition: .3s;
    height: 100%;
}

.solution-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: transparent;
    transform: translateY(-4px);
}

.solution-card .sc-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: .3s;
}

.solution-card:hover .sc-icon {
    background: var(--blue);
    color: #fff;
}

.solution-card h5 {
    font-size: 17px;
    margin-bottom: 3px;
}

.solution-card h5 a { color: var(--deep); }
.solution-card h5 a:hover { color: var(--blue); }

.solution-card p {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0;
}

/* =========================================================
   FACTS SECTION
   ========================================================= */
.facts-section {
    position: relative;
    background: transparent;
    color: var(--deep);
    overflow: hidden;
    padding: 50px 0 135px;
}

/* FACTS CONTAINER */
.facts-container {
    width: min(1450px, 100%);
    margin: 0 auto;
    padding: 30px 35px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

/* INDIVIDUAL FACT */
.fact-item {
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 12px 25px;
    border-right: 1px solid rgba(7, 59, 120, 0.14);
}

.fact-item:last-child {
    border-right: 0;
}

/* ICON */
.fact-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #d8b050;
    border-radius: 50%;
    color: #be9031;
    font-size: 22px;
    background: rgba(215, 181, 109, 0.12);
}

/* VALUE */
.fact-value {
    color: #073b78;
    font-family: 'Rubik', sans-serif;
    font-size: 29px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.fact-value small {
    color: #021E9C;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
}

/* TITLE */
.fact-content h4 {
    margin: 5px 0 7px;
    color: #073b78;
    font-size: 11.5px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .6px;
}

/* DESCRIPTION */
.fact-content p {
    margin: 0;
    color: #556477;
    font-size: 11px;
    line-height: 1.45;
}

/* =========================================================
   VALUES STRIP — INFINITE TICKER LOOP (100% FULL WIDTH)
   ========================================================= */
.facts-values {
    width: 100%;
    max-width: 100%;
    margin: 32px 0 0;
    padding: 16px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(7, 59, 120, 0.12);
    border-bottom: 1px solid rgba(7, 59, 120, 0.12);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    color: #073b78;
    box-shadow: 0 4px 20px rgba(7, 59, 120, 0.04);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    user-select: none;
}

.facts-values-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: facts-ticker 35s linear infinite;
    will-change: transform;
}

.facts-values:hover .facts-values-track {
    animation-play-state: paused;
}

.facts-values-group {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
    flex-shrink: 0;
}

.facts-values span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #073b78;
    white-space: nowrap;
}

.facts-values b {
    color: #d5a832;
    font-size: 13px;
    line-height: 1;
    display: inline-block;
}

@keyframes facts-ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* TABLET */
@media (max-width: 1024px) {
    .facts-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }
    .fact-item:nth-child(2) {
        border-right: 0;
    }
}

/* MOBILE */
@media (max-width: 700px) {
    .facts-container {
        grid-template-columns: 1fr;
        padding: 25px 22px;
    }
    .fact-item,
    .fact-item:nth-child(2),
    .fact-item:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid rgba(7, 59, 120, 0.12);
        padding: 18px 5px;
    }
    .fact-item:last-child {
        border-bottom: 0;
    }
    .facts-values {
        padding: 12px 0;
        margin: 20px 0 0;
    }
    .facts-values-group {
        gap: 18px;
        padding-right: 18px;
    }
    .facts-values span {
        font-size: 10.5px;
        letter-spacing: 1.1px;
    }
    .facts-values-track {
        animation-duration: 25s;
    }
}

/* =========================================================
   CLEAN CENTERED CTA (NO CARD / NO BOX)
   ========================================================= */
.cta-centered-section {
    padding: 130px 0 140px;
    background: transparent;
    text-align: center;
    position: relative;
}

.cta-centered-content {
    max-width: 820px;
    margin: 0 auto;
}

.cta-centered-title {
    font-family: 'Rubik', sans-serif;
    font-size: clamp(34px, 3.8vw, 48px);
    font-weight: 700;
    color: #073b78;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.cta-centered-desc {
    color: #556477;
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto 34px;
}

.cta-centered-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-centered-actions .btn {
    min-width: 175px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px !important;
}

.cta-band {
    background: transparent;
    padding: 90px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 820px;
    margin: 0 auto;
}

.cta-band h3,
.cta-band h2 {
    font-family: 'Rubik', sans-serif;
    font-size: clamp(32px, 3.6vw, 46px);
    font-weight: 700;
    color: #073b78;
    line-height: 1.18;
    letter-spacing: -1px;
    margin-bottom: 12px;
    text-align: center;
}

.cta-band p {
    color: #556477;
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.cta-band .d-flex,
.cta-band .cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.cta-band .btn {
    min-width: 175px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px !important;
    position: relative;
    z-index: 2;
}

.cta-band .btn-gold,
.cta-band .btn-gold:hover {
    color: #ffffff !important;
}

/* =========================================================
   HOW WE BUILD A PACKAGE — 6-SLIDE APPLE STORYTELLING SECTION
   ========================================================= */

.build-story-section {
    position: relative;
    height: 380vh;
    background: transparent;
}

.build-story-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 680px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 30px 0;
    z-index: 10;
}

.build-story-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-height: 900px;
    position: relative;
}

/* HEADING */
.build-story-heading {
    width: 100%;
    max-width: 920px;
    text-align: center;
    margin: 0 auto;
    padding: 25px 20px 30px;
    position: relative;
    z-index: 6;
    flex-shrink: 0;
}

.build-story-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    color: #006fe6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.build-story-eyebrow i {
    display: block;
    width: 55px;
    height: 2px;
    background: #d6ad4b;
    flex-shrink: 0;
}

.build-story-heading h2 {
    margin: 10px auto 0;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
    font-weight: 700;
    color: #073b78;
    letter-spacing: -1.2px;
}

.build-story-sub {
    max-width: 680px;
    margin: 8px auto 0;
    color: #687789;
    font-size: 14.5px;
    line-height: 1.6;
}

/* HORIZONTAL VIEWPORT & TRACK (CENTERED INITIAL SLIDE WITH PEEKING ADJACENT SLIDES) */
.build-story-viewport {
    width: 100vw;
    max-width: 100%;
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.build-story-track {
    display: flex;
    gap: 45px;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    padding-left: calc((100vw - clamp(750px, 68vw, 1080px)) / 2);
    padding-right: calc((100vw - clamp(750px, 68vw, 1080px)) / 2);
}

/* STORY CARDS */
.build-story-card {
    width: clamp(750px, 68vw, 1080px);
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    gap: 38px;
    align-items: center;
    padding: 38px 44px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(7, 59, 120, 0.08);
    box-shadow: 0 20px 60px -15px rgba(7, 50, 105, 0.12);
    opacity: 0.42;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.build-story-card.is-active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 35px 95px -20px rgba(7, 50, 105, 0.24);
}

.bsc-media {
    position: relative;
    height: 100%;
    min-height: 350px;
    max-height: 440px;
    border-radius: 24px;
    overflow: hidden;
    background: #e8f1fa;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.bsc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.build-story-card.is-active .bsc-media img {
    transform: scale(1.03);
}

.bsc-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    color: #073b78;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.bsc-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bsc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.bsc-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    border-radius: 20px;
    background: rgba(214, 173, 75, 0.18);
    color: #a47614;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.bsc-tag {
    color: #006fe6;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.bsc-title {
    font-family: 'Rubik', sans-serif;
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 700;
    color: #073b78;
    line-height: 1.15;
    margin-bottom: 12px;
    letter-spacing: -0.6px;
}

.bsc-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #556477;
    margin-bottom: 20px;
}

.bsc-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsc-specs li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #1e3a5f;
    font-weight: 600;
}

.bsc-specs li i {
    color: #d6ad4b;
    font-size: 14px;
}

/* NAVIGATION CONTROLS */
.build-story-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 15px;
    position: relative;
    z-index: 10;
}

.bsc-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(7, 59, 120, 0.15);
    background: #ffffff;
    color: #073b78;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
}

.bsc-arrow:hover {
    background: #073b78;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(7, 59, 120, 0.25);
}

.build-story-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(7, 59, 120, 0.06);
}

.bsd-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(7, 59, 120, 0.22);
    cursor: pointer;
    padding: 0;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.bsd-dot:hover {
    background: rgba(7, 59, 120, 0.45);
}

.bsd-dot.is-active {
    width: 32px;
    border-radius: 12px;
    background: #d5ad4e;
    box-shadow: 0 4px 14px rgba(213, 173, 78, 0.45);
}

/* RESPONSIVE: PURE NATURAL STACKED LIST ON MOBILE/PHONE */
@media (max-width: 991px) {
    .build-story-section {
        height: auto !important;
        min-height: auto !important;
        padding: clamp(50px, 8vw, 80px) 0 clamp(60px, 9vw, 90px) !important;
        display: block !important;
        position: relative !important;
    }

    .build-story-sticky {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .build-story-container {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 16px !important;
        margin: 0 auto !important;
        justify-content: flex-start !important;
    }

    .build-story-heading {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 32px 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .build-story-eyebrow {
        font-size: 11px !important;
        letter-spacing: 2px !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    .build-story-eyebrow i {
        width: 30px !important;
    }

    .build-story-heading h2 {
        font-size: clamp(26px, 5.8vw, 34px) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.5px !important;
        margin: 10px auto 0 !important;
        max-width: 100% !important;
    }

    .build-story-sub {
        font-size: clamp(14px, 3.8vw, 15.5px) !important;
        line-height: 1.65 !important;
        color: #556477 !important;
        margin: 10px auto 0 !important;
        max-width: 560px !important;
        padding: 0 4px !important;
    }

    .build-story-viewport {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .build-story-track {
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        gap: 24px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .build-story-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: clamp(20px, 4vw, 28px) clamp(16px, 3.5vw, 24px) !important;
        opacity: 1 !important;
        transform: none !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        border: 1px solid rgba(7, 59, 120, 0.08) !important;
        box-shadow: 0 12px 35px rgba(7, 59, 120, 0.06) !important;
        margin: 0 !important;
    }

    .bsc-media {
        width: 100% !important;
        height: 220px !important;
        min-height: auto !important;
        max-height: 240px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #edf5fd !important;
        box-shadow: none !important;
    }

    .bsc-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }

    .bsc-title {
        font-size: clamp(22px, 4.5vw, 26px) !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .bsc-desc {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
        margin-bottom: 18px !important;
    }

    .build-story-controls {
        display: none !important;
    }
}

/* ==================================================
   Testimonials
   ================================================== */
.testimonial-card {
    background: #fff;
    border: 1px solid #e4ecf4;
    border-radius: 18px;
    padding: 34px 30px;
    height: 100%;
    transition: all .35s ease;
    box-shadow: 0 10px 30px rgba(7, 50, 105, 0.04);
}

.testimonial-card:hover {
    box-shadow: 0 18px 45px rgba(7, 50, 105, 0.1);
    transform: translateY(-4px);
    border-color: #d2e1f0;
}

.testimonial-card .t-quote {
    font-size: 32px;
    color: #d5ad4e;
    margin-bottom: 14px;
}

.testimonial-card p {
    color: #556477;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 22px;
}

.testimonial-card .t-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid #eef3f8;
}

.testimonial-card .t-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-card .t-name {
    font-family: var(--font-head);
    font-weight: 700;
    color: #073b78;
    font-size: 15px;
}

.testimonial-card .t-role {
    color: #8899aa;
    font-size: 13px;
}

/* ==================================================
   Footer
   ================================================== */
.smi-footer {
    background: linear-gradient(180deg, #052c58 0%, #031b38 100%);
    color: rgba(255, 255, 255, 0.82);
    padding: 84px 0 0;
    position: relative;
}

.smi-footer h5 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}

.smi-footer h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--gold);
}

.smi-footer .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.smi-footer .footer-links li { margin-bottom: 10px; }

.smi-footer .footer-links a {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: .25s;
}

.smi-footer .footer-links a i {
    color: var(--gold);
    font-size: 9px;
    transition: .25s;
}

.smi-footer .footer-links a:hover {
    color: #fff;
    padding-left: 5px;
}

.smi-footer .footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    align-items: flex-start;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.82);
}

.smi-footer .footer-contact i {
    color: var(--gold);
    margin-top: 4px;
    font-size: 14px;
    min-width: 16px;
}

.smi-footer .footer-about p {
    font-size: 14.5px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.82);
}

.smi-footer .footer-social {
    display: flex;
    gap: 10px;
}

.smi-footer .footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: .3s;
}

.smi-footer .footer-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #021E9C;
    transform: translateY(-3px);
}

.smi-footer .footer-newsletter p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
}

.smi-footer .nl-form {
    display: flex;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
}

.smi-footer .nl-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 14px;
    color: #fff;
    font-size: 14px;
}

.smi-footer .nl-form input::placeholder { color: rgba(255, 255, 255, 0.6); }
.smi-footer .nl-form button {
    background: var(--gold);
    border: none;
    color: #021E9C;
    font-weight: 700;
    padding: 0 18px;
    cursor: pointer;
    transition: .3s;
}

.smi-footer .nl-form button:hover { background: #ffffff; color: #021E9C; }

.smi-footer .footer-brand {
    margin-bottom: 22px;
}

.footer-brand-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
}

.footer-brand-link .brand-logo {
    height: 68px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
    background: transparent;
    padding: 0;
}

.footer-brand-link .brand-text strong {
    font-family: var(--font-head);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    display: block;
    line-height: 1.25;
}

.footer-brand-link .brand-text small {
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-top: 3px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 60px;
    padding: 22px 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.78);
}

.footer-bottom a { color: var(--gold); }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 991px) {
    .smi-footer {
        padding: 65px 0 0;
    }
    .footer-bottom {
        margin-top: 40px;
        text-align: center;
    }
    .footer-bottom .text-lg-end {
        margin-top: 8px;
    }
}

@media (max-width: 767px) {
    .smi-footer {
        padding: 50px 0 0;
    }
    .smi-footer .row {
        --bs-gutter-y: 2rem;
    }
    .footer-brand-link {
        gap: 12px;
    }
    .footer-brand-link .brand-logo {
        height: 44px;
    }
    .footer-brand-link .brand-text strong {
        font-size: 15.5px;
    }
    .footer-brand-link .brand-text small {
        font-size: 10px;
    }
    .smi-footer h5 {
        margin-bottom: 14px;
        font-size: 15.5px;
    }
    .smi-footer .footer-links a {
        font-size: 14px;
    }
    .footer-bottom {
        padding: 18px 0;
        font-size: 12.5px;
    }
}

/* ==================================================
   Content page utilities
   ================================================== */
.text-article p {
    color: var(--muted);
    margin-bottom: 16px;
}

.text-article h3 { margin-top: 28px; margin-bottom: 12px; }

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
    color: var(--muted);
}

.check-list li i {
    color: var(--blue);
    margin-top: 4px;
    font-size: 14px;
}

.check-list li strong { color: var(--deep); font-weight: 600; }

/* Certifications "Quality, Proven" background section */
.cert-proven-section {
    position: relative;
    overflow: hidden;
}

.cert-proven-section .row {
    display: block;
}

.cert-proven-section .col-lg-8 {
    width: 100%;
}

.cert-proven-section .section-eyebrow {
    display: block;
    text-align: center;
}

.cert-proven-section .section-title {
    text-align: center;
}

.cert-proven-section .text-article {
    max-width: 1020px;
    margin: 0 auto;
    text-align: center;
}

.cert-proven-img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 100%;
    max-width: 45%;
    width: auto;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
    border-radius: 0;
}

/* Verified standards ticker */
.cert-verification-ticker {
    width: 100%;
    margin: 30px auto 0;
}

.cert-verification-viewport {
    width: 100%;
    overflow: hidden;
    padding: 4px 0 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.cert-verification-track {
    display: flex;
    width: max-content;
    animation: certVerificationScroll 31s linear infinite;
    will-change: transform;
}

.cert-verification-ticker:hover .cert-verification-track {
    animation-play-state: paused;
}

.cert-verification-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-top: 20px;
    gap: 92px;
    /* padding-left: clamp(48px, 8vw, 140px); */
    padding-right: 92px;
}

.cert-verification-set img {
    width: auto;
    height: 82px;
    max-width: 185px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    mix-blend-mode: multiply;
}

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

@media (max-width: 575.98px) {
    .cert-verification-set {
        gap: 58px;
        padding-left: 48px;
        padding-right: 58px;
    }

    .cert-verification-set img {
        height: 56px;
        max-width: 135px;
    }

    .cert-verification-track {
        animation-duration: 18s;
    }
}

@media (max-width: 991.98px) {
    .cert-verification-set {
        gap: 72px;
        padding-left: 64px;
        padding-right: 72px;
    }

    .cert-verification-set img {
        height: 66px;
        max-width: 155px;
    }

    .cert-proven-img {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-top: 20px;
        border-radius: 18px;
        object-fit: contain;
    }
}

/* ==================================================
   Certifications & Quality Pillars Showcase
   ================================================== */
.cert-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.cert-pillar-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 34px 30px;
    border: 1px solid rgba(6, 59, 115, 0.08);
    box-shadow: 0 10px 30px rgba(6, 59, 115, 0.04);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cert-pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--blue));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cert-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(6, 59, 115, 0.12);
    border-color: rgba(215, 181, 109, 0.45);
}

.cert-pillar-card:hover::before {
    opacity: 1;
}

.cert-pillar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 12px;
}

.cert-pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(6, 59, 115, 0.06);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.cert-pillar-card:hover .cert-pillar-icon {
    background: var(--blue);
    color: #ffffff;
    transform: scale(1.05);
}

.cert-pillar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(215, 181, 109, 0.14);
    color: #8a6d2f;
    border: 1px solid rgba(215, 181, 109, 0.35);
}

.cert-pillar-card h3,
.cert-pillar-card h4 {
    font-size: 21px;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 8px;
    line-height: 1.3;
}

.cert-pillar-sub {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 14px;
    display: block;
}

.cert-pillar-card p {
    font-size: 14.5px;
    color: #5d6878;
    line-height: 1.65;
    margin-bottom: 22px;
    flex-grow: 1;
}

.cert-pillar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(6, 59, 115, 0.08);
    padding-top: 18px;
}

.cert-pillar-list li {
    font-size: 13.5px;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.45;
}

.cert-pillar-list li i {
    color: #10b981;
    font-size: 14px;
    flex-shrink: 0;
}

/* Sedex Spotlight Banner */
.sedex-spotlight-box {
    background: linear-gradient(135deg, #042a54 0%, #063b73 100%);
    border-radius: 26px;
    padding: 48px 44px;
    color: #ffffff;
    margin-top: 56px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(4, 42, 84, 0.25);
    border: 1px solid rgba(215, 181, 109, 0.3);
}

.sedex-spotlight-box::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(215, 181, 109, 0.18) 0%, rgba(215, 181, 109, 0) 70%);
    pointer-events: none;
}

.sedex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.sedex-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(215, 181, 109, 0.22);
    border: 1px solid rgba(215, 181, 109, 0.45);
    color: var(--gold-light);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 50px;
}

.sedex-title {
    color: #ffffff;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    margin-bottom: 14px;
}

.sedex-lead {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 820px;
    margin-bottom: 32px;
}

.sedex-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.sedex-pillar-item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 24px 20px;
    transition: all 0.3s ease;
}

.sedex-pillar-item:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-3px);
    border-color: var(--gold);
}

.sedex-pillar-item i {
    font-size: 24px;
    color: var(--gold-light);
    margin-bottom: 12px;
    display: inline-block;
}

.sedex-pillar-item h5 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.sedex-pillar-item p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.gold-divider {
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 3px;
    margin: 18px 0;
}

/* Stats strip inside pages */
.stat-mini {
    text-align: center;
    padding: 22px 12px;
}

.stat-mini .sm-num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 34px;
    color: var(--blue);
    line-height: 1;
}

.stat-mini .sm-label {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 6px;
}

/* Accordion (FAQs / specs) */
.smi-accordion .acc-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.smi-accordion .acc-head {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 16px;
    color: var(--deep);
}

.smi-accordion .acc-head .acc-arrow {
    color: var(--gold);
    transition: transform .3s;
    flex-shrink: 0;
}

.smi-accordion .acc-item.open .acc-arrow { transform: rotate(45deg); }

.smi-accordion .acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.smi-accordion .acc-body-inner {
    padding: 0 22px 20px;
    color: var(--muted);
    font-size: 14.5px;
}

/* Table */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.spec-table th,
.spec-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.spec-table th {
    background: var(--soft);
    color: var(--deep);
    font-family: var(--font-head);
    font-weight: 600;
}

.spec-table tr:hover td { background: var(--soft); }

/* ==================================================
   Floating WhatsApp Widget
   ================================================== */
.floating-whatsapp {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
    z-index: 999;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-whatsapp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: #25d366;
    z-index: -1;
    animation: waPulse 2.2s infinite;
}

@keyframes waPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    70% {
        transform: scale(1.4);
        opacity: 0;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.floating-whatsapp:hover {
    background: #20ba5a;
    color: #ffffff;
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.6);
}

.floating-whatsapp .whatsapp-tooltip {
    position: absolute;
    right: 68px;
    background: #063b73;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(6, 59, 115, 0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.floating-whatsapp .whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #063b73;
}

.floating-whatsapp:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 767.98px) {
    .floating-whatsapp {
        right: 20px;
        bottom: 20px;
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
    .floating-whatsapp .whatsapp-tooltip {
        display: none;
    }
}

/* ==================================================
   Mobile drawer
   ================================================== */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 1040;
    backdrop-filter: blur(3px);
}

.mobile-overlay.show {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(400px, 88vw);
    background: #fff;
    z-index: 1050;
    border-radius: 20px;
    transform: translateX(110%);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: -20px 0 60px rgba(6, 59, 115, .2);
}

.mobile-nav.open { transform: translateX(0); }

.mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
    border-radius: 20px 20px 0 0;
}

.mob-header .brand-text strong {
    font-family: var(--font-head);
    color: var(--deep);
    font-size: 16px;
}

.mob-header .brand-text small {
    color: var(--gold);
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
}

.mob-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--deep);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

.mob-close:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.mob-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0 0;
}

.mob-body > a.mob-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    margin: 0 12px;
    width: calc(100% - 24px);
    border-radius: 12px;
    color: var(--dark);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid var(--soft);
    transition: .2s;
}

.mob-body > a.mob-link:hover { color: var(--blue); background: var(--soft); }

.mob-acc {
    display: block;
}

.mob-acc-btn {
    width: calc(100% - 24px);
    margin: 0 12px;
    border-radius: 12px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 16px;
    color: var(--dark);
    border-bottom: 1px solid var(--soft);
    cursor: pointer;
    transition: .2s;
    text-align: left;
}

.mob-acc-btn:hover { color: var(--blue); background: var(--soft); }

.mob-acc-btn .mob-caret {
    color: var(--gold);
    font-size: 14px;
    transition: transform .3s;
}

.mob-acc.open .mob-acc-btn .mob-caret { transform: rotate(90deg); }

.mob-acc-panel {
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: height .35s ease, opacity .2s ease;
    background: var(--soft);
    border-radius: 12px;
    margin: 0 12px;
    will-change: height;
}

.mob-acc.open > .mob-acc-panel,
.mob-acc-panel.is-open {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

.mob-acc-panel a {
    display: block;
    padding: 12px 34px;
    color: var(--muted);
    font-size: 15px;
    border-bottom: 1px solid rgba(228, 233, 241, .6);
}

.mob-acc-panel a:last-child { border-bottom: none; }
.mob-acc-panel a:hover { color: var(--blue); padding-left: 40px; }

.mob-product-acc { margin: 0 12px; }

.mob-product-acc .mob-acc-btn {
    width: 100%;
    margin: 0;
    padding: 12px 22px 12px 34px;
    font-size: 15px;
}

.mob-product-acc .mob-acc-panel {
    margin: 0;
    border-radius: 0;
}

.mob-product-acc .mob-acc-panel a { padding-left: 48px; }

.mob-cta-wrap {
    margin-top: auto;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    background: #fff;
}

/* ==================================================
   Forms & Inputs
   ================================================== */
.form-control-smi,
textarea.form-control-smi {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14.5px;
    background: #ffffff;
    color: var(--dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    font-family: var(--font-body);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.form-control-smi:hover,
textarea.form-control-smi:hover {
    border-color: #cbd5e1;
}

.form-control-smi:focus,
textarea.form-control-smi:focus {
    border-color: var(--blue);
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(2, 30, 156, 0.12);
    outline: none;
}

/* Enhanced Custom Dropdowns */
select.form-control-smi {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px 44px 13px 16px;
    font-size: 14.5px;
    font-weight: 500;
    background-color: #ffffff;
    color: var(--deep);
    cursor: pointer;
    font-family: var(--font-body);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23021E9C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) center;
    background-size: 16px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

select.form-control-smi:hover {
    border-color: #94a3b8;
    background-color: #fcfdfe;
}

select.form-control-smi:focus {
    border-color: var(--blue);
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(2, 30, 156, 0.12);
    outline: none;
}

select.form-control-smi option {
    padding: 12px 16px;
    color: var(--dark);
    background: #ffffff;
    font-size: 14.5px;
}

textarea.form-control-smi { resize: vertical; min-height: 130px; }

/* ==================================================
   Luxury Custom Select Dropdown
   ================================================== */
.custom-select-wrap {
    position: relative;
    width: 100%;
    user-select: none;
}

.custom-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 16px;
    background: #ffffff;
    color: var(--dark);
    font-size: 14.5px;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.custom-select-trigger:hover {
    border-color: #94a3b8;
    background-color: #fcfdfe;
}

.custom-select-wrap.is-open .custom-select-trigger {
    border-color: var(--blue);
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(2, 30, 156, 0.12);
}

.cst-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #edf3fa;
    color: #021E9C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-select-wrap.has-value .cst-icon {
    background: #021E9C;
    color: #ffffff;
}

.cst-text {
    flex: 1;
    color: var(--deep);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cst-text.placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.cst-arrow {
    font-size: 11.5px;
    color: #64748b;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.custom-select-wrap.is-open .cst-arrow {
    transform: rotate(180deg);
    color: var(--blue);
}

.custom-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 280px;
    background: #ffffff;
    border: 1px solid rgba(6, 59, 115, 0.09);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(6, 59, 115, 0.14), 0 2px 6px rgba(0, 0, 0, 0.04);
    padding: 8px;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
    max-height: 320px;
    overflow-y: auto;
}

.custom-select-wrap.is-open .custom-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.custom-select-option:hover {
    background: #edf5fd;
}

.custom-select-option.is-selected {
    background: #021E9C;
    color: #ffffff;
}

.cso-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #edf3fa;
    color: #021E9C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.custom-select-option:hover .cso-icon {
    background: #dbeafe;
}

.custom-select-option.is-selected .cso-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.cso-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cso-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--deep);
    line-height: 1.25;
}

.custom-select-option.is-selected .cso-title {
    color: #ffffff;
}

.cso-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
}

.custom-select-option.is-selected .cso-desc {
    color: rgba(255, 255, 255, 0.85);
}

.form-label-smi {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--deep);
    margin-bottom: 8px;
    display: block;
}

.form-hint {
    font-size: 12.5px;
    color: var(--muted-light);
    margin-top: 6px;
}

/* ==================================================
   Contact / info cards
   ================================================== */
.info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition: .3s;
    height: 100%;
}

.info-card:hover { box-shadow: var(--shadow-sm); border-color: transparent; }

.info-card .ic-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.info-card:hover .ic-icon { background: var(--blue); color: #fff; }

.info-card h5 { font-size: 16px; margin-bottom: 4px; }
.info-card p { color: var(--muted); font-size: 14px; margin: 0; }
.info-card a { color: var(--deep); }
.info-card a:hover { color: var(--blue); }

/* Contact page polish */
.contact-info-section {
    padding-top: 78px;
    padding-bottom: 78px;
}

.contact-info-section .info-card {
    min-height: 154px;
    padding: 24px 20px;
    border-color: rgba(6, 59, 115, .09);
    box-shadow: 0 7px 22px rgba(6, 59, 115, .045);
    transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}

.contact-info-section .info-card:hover {
    border-color: rgba(215, 181, 109, .48);
    box-shadow: 0 12px 28px rgba(6, 59, 115, .08);
    transform: translateY(-3px);
}

.contact-info-section .info-card .ic-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 18px;
}

.contact-info-section .info-card h5 {
    color: var(--deep);
    margin-bottom: 8px;
}

.contact-info-section .info-card p,
.contact-info-section .info-card p a {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.contact-form-section .container-xxl > .row {
    align-items: stretch;
}

.contact-form-section {
    overflow: hidden;
    clear: both;
}

.contact-form-section .col-lg-5 {
    display: flex;
    flex-direction: column;
}

.contact-form-section .col-lg-7 {
    padding: 30px 34px;
    border: 1px solid rgba(6, 59, 115, .08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(6, 59, 115, .045);
}

.contact-form-section .contact-form {
    margin-top: 4px;
}

.contact-form-section .contact-form .btn {
    min-width: 170px;
}

.contact-support-card {
    border: 1px solid rgba(6, 59, 115, .08);
    box-shadow: 0 8px 24px rgba(6, 59, 115, .045);
}

.contact-form-section .contact-support-card:first-child {
    flex: 1 1 auto;
}

.contact-form-section .contact-support-card + .contact-support-card {
    flex: 0 0 auto;
}

.contact-support-card + .contact-support-card {
    min-height: 0;
}

@media (max-width: 991.98px) {
    .contact-form-section .col-lg-7 {
        padding: 26px 24px;
    }
}

/* ==================================================
   Misc
   ================================================== */
.ribbon-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--gold);
    color: var(--deep);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    z-index: 3;
}

.media-card {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.media-card img { width: 100%; display: block; }

.about-media {
    overflow: hidden;
}

.about-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-story-full .container-xxl {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.about-story-full .container-xxl > .row {
    margin-left: 0;
    margin-right: 0;
}

.about-story-full .container-xxl > .row > .col-lg-6:first-child {
    padding-left: 0;
    padding-right: 0;
}

.about-story-full .container-xxl > .row > .col-lg-6:last-child {
    padding-left: clamp(24px, 4vw, 60px);
    padding-right: clamp(24px, 4vw, 60px);
}

@media (max-width: 991.98px) {
    .about-story-full .container-xxl {
        max-width: initial;
        padding-left: 24px;
        padding-right: 24px;
    }

    .about-story-full .container-xxl > .row {
        margin-left: calc(-.5 * var(--bs-gutter-x, 3rem));
        margin-right: calc(-.5 * var(--bs-gutter-x, 3rem));
    }

    .about-story-full .container-xxl > .row > .col-lg-6 {
        padding-left: 0;
        padding-right: 0;
    }
}

.divider-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border: none;
    margin: 0;
}

/* =========================================================
   NAVBAR — floating / rounded / glass on scroll
   ========================================================= */
.smi-navbar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1460px;
    border-radius: 0 0 22px 22px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    padding: 6px 10px;
    z-index: 1020;
    transition:
        transform .38s cubic-bezier(.22, .61, .36, 1),
        top .3s ease,
        width .3s ease,
        max-width .3s ease,
        border-radius .3s ease,
        background-color .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        padding .3s ease;
}

.smi-navbar .nav-inner {
    max-width: 1400px;
    min-height: 70px;
}

/* Transparent state (at top): light text over hero image, gold CTA */
.smi-navbar:not(.scrolled) .smi-brand .brand-text strong {
    color: #fff;
}

.smi-navbar:not(.scrolled) .brand-logo {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55));
}

.smi-navbar:not(.scrolled) .nav-menu > li > a {
    color: #fff;
}

.smi-navbar:not(.scrolled) .nav-menu > li > a:hover,
.smi-navbar:not(.scrolled) .nav-menu > li > a.active,
.smi-navbar:not(.scrolled) .nav-menu > li:hover > a {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.smi-navbar:not(.scrolled) .nav-cta {
    background: linear-gradient(135deg, #d8b050 0%, #be9031 100%) !important;
    color: #ffffff !important;
    border: 1px solid #be9031 !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 24px rgba(215, 181, 109, 0.35);
    transition: all 0.3s ease;
}

.smi-navbar:not(.scrolled) .nav-cta:hover {
    background: linear-gradient(135deg, #e0ba5c 0%, #c89a38 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(215, 181, 109, 0.45);
}

.smi-navbar:not(.scrolled) .nav-toggler {
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.smi-navbar:not(.scrolled) .nav-toggler .bar,
.smi-navbar:not(.scrolled) .nav-toggler .bar::before,
.smi-navbar:not(.scrolled) .nav-toggler .bar::after {
    background: #fff;
}

/* Scrolled state: attached flush to top with 1400px max-width, rounded bottom edges, white bg with shadow, blue CTA */
.smi-navbar.scrolled {
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    width: calc(100% - 40px);
    max-width: 1400px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
    border-radius: 0 0 22px 22px !important;
    background: #ffffff;
    border: 1px solid rgba(6, 59, 115, .08);
    border-top: none;
    box-shadow: 0 16px 45px rgba(6, 59, 115, 0.16), 0 6px 18px rgba(0, 0, 0, 0.06);
}

.smi-navbar.scrolled .smi-brand .brand-text strong {
    color: var(--deep);
}

.smi-navbar.scrolled .brand-logo {
    filter: none;
}

.smi-navbar.scrolled .nav-menu > li > a {
    color: var(--dark);
}

.smi-navbar.scrolled .nav-menu > li > a:hover,
.smi-navbar.scrolled .nav-menu > li > a.active,
.smi-navbar.scrolled .nav-menu > li:hover > a {
    color: var(--blue);
    background: rgba(8, 120, 209, .08);
}

.smi-navbar.scrolled .nav-cta {
    background: #021E9C !important;
    color: #ffffff !important;
    border: 1px solid #021E9C !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 24px rgba(2, 30, 156, 0.22);
    transition: all 0.3s ease;
}

.smi-navbar.scrolled .nav-cta:hover {
    background: #063B73 !important;
    color: #ffffff !important;
    border-color: #063B73 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(2, 30, 156, 0.32);
}

.smi-navbar.scrolled .nav-toggler {
    border-color: var(--line);
    color: var(--deep);
}

.smi-navbar.scrolled .nav-toggler .bar,
.smi-navbar.scrolled .nav-toggler .bar::before,
.smi-navbar.scrolled .nav-toggler .bar::after {
    background: var(--deep);
}

/* Hide when scrolling down, slides up */
.smi-navbar.nav-hidden {
    transform: translate(-50%, -130%);
}

/* =========================================================
   HERO — full-bleed image, middle centered content, rounded bottom
   ========================================================= */
.smi-hero {
    position: relative;
    width: calc(100% - 1rem) !important;
    min-height: calc(100dvh - 0.5rem);
    min-height: calc(100svh - 0.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 0.5rem 0.5rem 0.5rem !important;
    border-radius: 0 0 clamp(32px, 3.5vw, 46px) clamp(32px, 3.5vw, 46px);
    background: var(--deep);
    box-sizing: border-box;
    font-family: var(--font-satoshi), sans-serif;
    text-align: center;
}

.hero-slides-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.85s;
    z-index: 1;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto;
}

.hero-slide .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.05);
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide.is-active .hero-bg {
    transform: scale(1);
}

.hero-slide .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at center, rgba(4, 42, 84, 0.45) 0%, rgba(6, 59, 115, 0.35) 55%, rgba(4, 42, 84, 0.65) 100%),
        linear-gradient(180deg, rgba(4, 42, 84, 0.40) 0%, rgba(6, 59, 115, 0.25) 50%, rgba(4, 42, 84, 0.55) 100%);
}

.hero-slide .hero-content-center {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(880px, 92vw);
    margin: auto;
    text-align: center;
    padding-top: max(80px, 8vh);
    padding-bottom: max(70px, 7vh);
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    padding-right: clamp(1.25rem, 3vw, 2.5rem);
    color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.85s ease 0.15s;
}

.hero-slide.is-active .hero-content-center {
    transform: translateY(0);
    opacity: 1;
}

.hero-slide .hero-title {
    font-family: var(--font-satoshi), var(--font-head), sans-serif;
    color: #fff;
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: clamp(12px, 2vh, 18px);
    text-align: center;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.hero-slide .hero-title span {
    color: var(--gold-light);
}

.hero-slide .hero-title strong {
    color: var(--gold);
    font-weight: 700;
}

.hero-slide .hero-desc {
    font-family: var(--font-satoshi), var(--font-body), sans-serif;
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(13.5px, 1.2vw, 15.5px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.01em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(20px, 3vh, 30px);
    max-width: min(660px, 100%);
    text-align: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.hero-slide .hero-main-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(11px, 1.5vh, 14px) clamp(24px, 2vw, 30px);
    border-radius: 50px;
    background: #ffffff;
    border: 1px solid #ffffff;
    color: var(--deep);
    font-family: var(--font-satoshi), sans-serif;
    font-weight: 600;
    font-size: clamp(13px, 1.05vw, 14.5px);
    letter-spacing: 0.2px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all .3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.hero-slide .hero-main-btn i {
    font-size: 12px;
    color: var(--blue);
    transition: transform .25s ease;
}

.hero-slide .hero-main-btn:hover {
    color: var(--blue);
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.hero-slide .hero-main-btn:hover i {
    transform: translateX(4px);
}

/* Slider Controls — Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hero-arrow:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--deep);
    transform: translateY(-50%) scale(1.08);
}

.hero-prev {
    left: clamp(16px, 2.5vw, 40px);
}

.hero-next {
    right: clamp(16px, 2.5vw, 40px);
}

/* Slider Controls — Dots */
.hero-dots {
    position: absolute;
    bottom: clamp(18px, 2.5vh, 28px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.hero-dot {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.hero-dot.is-active {
    width: 44px;
    background: #ffffff;
}

@media (max-width: 767.98px) {
    .hero-arrow {
        display: none;
    }
}

/* =========================================================
   FOOTER — rounded top corners + credit
   ========================================================= */
.smi-footer {
    border-radius: 40px 40px 0 0;
    overflow: hidden;
}

.pixelhexa-credit strong {
    color: var(--gold);
}

.pixelhexa-credit {
    white-space: nowrap;
}

/* =========================================================
   STATEMENT + ADVANTAGES CARDS
   ========================================================= */
.advantages-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(6, 59, 115, 0.08);
    box-shadow: 0 16px 45px rgba(6, 59, 115, 0.06);
    overflow: hidden;
    max-width: 1040px;
    margin: 48px auto 44px;
}

.advantage-item {
    padding: 44px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.advantage-item:hover {
    background: rgba(247, 249, 252, 0.6);
}

.advantage-item + .advantage-item {
    border-left: 1px solid rgba(35, 100, 170, 0.10);
}

/* ICON */
.advantage-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--deep);
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(7, 26, 54, 0.22);
}

/* TITLE */
.advantage-item h3 {
    margin: 0 0 15px;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 600;
    color: #021E9C;
}

/* DESCRIPTION */
.advantage-item p {
    max-width: 240px;
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.7;
    color: #5d6878;
}

/* DISCOVER BUTTON */
.statement-story-btn {
    text-align: center;
    margin-top: 8px;
}

.statement-story-btn .btn {
    border-radius: 50px !important;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
}

/* MOBILE */
@media (max-width: 767px) {
    .advantages-card {
        grid-template-columns: 1fr;
        margin-top: 35px;
        border-radius: 20px;
    }

    .advantage-item {
        padding: 35px 28px;
    }

    .advantage-item + .advantage-item {
        border-left: 0;
        border-top: 1px solid rgba(35, 100, 170, 0.10);
    }
}

/* =========================================================
   ABOUT SHMI SECTION
   ========================================================= */
.about-smi-section {
    padding: 120px 0 110px;
    background: linear-gradient(180deg, #edf5fd 0%, #f4f8fe 50%, #eaf3fb 100%);
    position: relative;
    overflow: hidden;
}

.about-smi-heading {
    width: 100%;
    text-align: center;
    margin: 0 auto 55px;
}

.about-smi-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    color: #006fe6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

.about-smi-eyebrow i {
    display: block;
    width: 55px;
    height: 2px;
    background: #d6ad4b;
    flex-shrink: 0;
}

.about-smi-heading h2 {
    margin: 18px auto 0;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
    font-weight: 700;
    color: #073b78;
    letter-spacing: -1.5px;
}

.about-smi-sub {
    max-width: 680px;
    margin: 14px auto 0;
    color: #5d6878;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.65;
}

.about-smi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

.about-smi-content {
    max-width: 580px;
    position: relative;
    z-index: 2;
}

.about-smi-content-title {
    margin: 0 0 20px;
    font-family: 'Rubik', sans-serif;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    color: #073b78;
}

.about-smi-text {
    font-size: 15px;
    line-height: 1.78;
    color: #5d6878;
    margin-bottom: 18px;
}

.about-smi-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #d8b050 0%, #be9031 100%);
    color: #ffffff !important;
    border: 1px solid #be9031;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    margin-top: 14px;
    box-shadow: 0 10px 25px rgba(215, 181, 109, 0.35);
    transition: all 0.3s ease;
}

.about-smi-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #e0ba5c 0%, #c89a38 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(215, 181, 109, 0.45);
}

.about-smi-btn i {
    color: #ffffff !important;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.about-smi-btn:hover i {
    transform: translateX(4px);
}

.about-smi-image-wrap {
    width: 100%;
    margin-right: calc(-1 * ((100vw - 100%) / 2 + 15px));
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
}

.about-smi-image {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}

.about-smi-image img {
    display: block;
    width: 100%;
    max-width: min(720px, 100%);
    height: auto;
    max-height: 600px;
    object-fit: contain;
    object-position: right center;
    filter: drop-shadow(-10px 20px 45px rgba(7, 59, 120, 0.12));
    transition: transform .5s ease;
}

.about-smi-image:hover img {
    transform: translateY(-4px) scale(1.02);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .about-smi-section {
        padding: 80px 0;
    }

    .about-smi-heading {
        margin-bottom: 45px;
    }

    .about-smi-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-smi-content {
        max-width: 100%;
    }

    .about-smi-image-wrap {
        margin-right: 0;
        justify-content: center;
    }

    .about-smi-image {
        justify-content: center;
    }

    .about-smi-image img {
        max-width: 580px;
        max-height: 460px;
        object-position: center;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .about-smi-heading {
        margin-bottom: 36px;
    }

    .about-smi-heading h2 {
        font-size: 32px;
    }

    .about-smi-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .about-smi-eyebrow i {
        width: 24px;
    }

    .about-smi-text {
        font-size: 14px;
    }

    .about-smi-image img {
        max-height: 340px;
    }
}

/* =========================================================
   EXPLORE PACKAGING SOLUTIONS — FULLSCREEN PINNED SHOWCASE
   ========================================================= */

.packaging-solutions-section {
    position: relative;
    height: 550vh;
    background: transparent;
}

/* PINNED FULL-HEIGHT VIEWPORT */
.packaging-pinned-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 0 25px;
    z-index: 10;
}

.packaging-fullscreen-inner {
    width: min(1500px, 92vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-height: 920px;
    position: relative;
}

/* INTRO HEADING — SITS DIRECTLY AT TOP ABOVE THE SPLIT WRAPPER */
.packaging-solutions-heading {
    width: 100%;
    max-width: 920px;
    text-align: center;
    margin: 0 auto 15px;
    position: relative;
    z-index: 6;
    padding: 0 15px;
    flex-shrink: 0;
}

.packaging-solutions-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    color: #006fe6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.packaging-solutions-eyebrow i {
    display: block;
    width: 55px;
    height: 2px;
    background: #d6ad4b;
    flex-shrink: 0;
}

.packaging-solutions-heading h2 {
    margin: 10px auto 0;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.1;
    font-weight: 700;
    color: #073b78;
    letter-spacing: -1.2px;
}

.packaging-solutions-sub {
    max-width: 640px;
    margin: 8px auto 0;
    color: #687789;
    font-size: 14.5px;
    line-height: 1.6;
}

/* SPLIT LAYOUT (PLACED DIRECTLY UNDER THE HEADING) */
.packaging-split-wrapper {
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    gap: clamp(30px, 4vw, 70px);
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    margin: 0 auto;
}

/* LEFT: MEDIA VIEWER (CLEAN TRANSPARENT FLOATING STYLE LIKE ABOUT US) */
.packaging-sticky-media {
    position: relative;
    height: 100%;
    max-height: 580px;
    min-height: 420px;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.packaging-media-frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.packaging-media-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
                transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1),
                visibility 0.5s ease;
    pointer-events: none;
    visibility: hidden;
    will-change: transform, opacity;
}

.packaging-media-item.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
}

.packaging-media-item img {
    width: 100%;
    max-width: min(800px, 100%);
    height: auto;
    max-height: 560px;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 24px;
    filter: drop-shadow(-10px 20px 45px rgba(7, 59, 120, 0.14));
    transition: transform 0.5s ease;
}

.packaging-media-item:hover img {
    transform: translateY(-4px) scale(1.02);
}

.pmi-badge {
    display: none;
}

/* RIGHT: PURE TYPOGRAPHY STAGE (NEAT IN-AND-OUT TRANSITIONS) */
.packaging-steps-stage {
    position: relative;
    height: min(480px, 60vh);
    display: flex;
    align-items: center;
}

.packaging-step {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate3d(0, 25px, 0);
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
    transition: opacity 0.45s cubic-bezier(0.2, 0.9, 0.3, 1),
                transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1),
                visibility 0.45s ease;
    z-index: 1;
}

.packaging-step.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, -50%, 0);
    pointer-events: auto;
    z-index: 3;
}

.packaging-step.is-prev {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, calc(-50% - 25px), 0);
    z-index: 0;
}

.packaging-step.is-next {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, calc(-50% + 25px), 0);
    z-index: 0;
}

.step-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.step-eyebrow {
    color: #0b72d8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.step-counter {
    color: #8da0b4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.step-title {
    font-family: 'Rubik', sans-serif;
    font-size: clamp(28px, 2.6vw, 42px);
    font-weight: 600;
    color: #073b78;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.8px;
}

.step-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #556477;
    margin-bottom: 28px;
    max-width: 520px;
}

.step-card-foot {
    display: flex;
    align-items: center;
}

.step-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #d8b050 0%, #be9031 100%);
    color: #ffffff !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(214, 173, 75, 0.38);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.step-link:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #e5bf60 0%, #cb9e3c 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(214, 173, 75, 0.5);
}

.step-link i {
    transition: transform 0.25s ease;
    color: #ffffff;
}

.step-link:hover i {
    transform: translateX(4px);
}

.step-media-mobile {
    display: none;
}

/* BOTTOM NAVIGATION DOTS */
.packaging-controls-bar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.packaging-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(7, 59, 120, 0.06);
}

.pmi-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(7, 59, 120, 0.22);
    cursor: pointer;
    padding: 0;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pmi-dot:hover {
    background: rgba(7, 59, 120, 0.45);
}

.pmi-dot.is-active {
    width: 32px;
    border-radius: 12px;
    background: #d5ad4e;
    box-shadow: 0 4px 14px rgba(213, 173, 78, 0.45);
}

/* MOBILE & TABLET: PURE NATURAL STACKED LIST */
@media (max-width: 991px) {
    .packaging-solutions-section {
        height: auto !important;
        min-height: auto !important;
        padding: clamp(50px, 8vw, 80px) 0 clamp(60px, 9vw, 90px) !important;
    }

    .packaging-pinned-container {
        position: static !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .packaging-fullscreen-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        max-height: none !important;
        position: static !important;
    }

    .packaging-split-wrapper {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .packaging-sticky-media {
        display: none !important;
    }

    .packaging-controls-bar {
        display: none !important;
    }

    .packaging-steps-stage {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        position: static !important;
    }

    .packaging-step {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        padding: clamp(20px, 4vw, 28px) clamp(16px, 3.5vw, 24px) !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        border: 1px solid rgba(7, 59, 120, 0.08) !important;
        box-shadow: 0 12px 35px rgba(7, 59, 120, 0.06) !important;
        margin: 0 0 20px 0 !important;
        width: 100% !important;
    }

    .step-media-mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 220px;
        margin-bottom: 18px;
        border-radius: 14px;
        background: #edf5fd;
        padding: 16px;
    }

    .step-media-mobile img {
        width: 100%;
        height: 100%;
        max-height: 190px;
        object-fit: contain;
        border-radius: 12px;
        filter: drop-shadow(-4px 8px 18px rgba(7, 59, 120, 0.12));
    }

    .step-title {
        font-size: clamp(22px, 4.5vw, 28px) !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .step-desc {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
        margin-bottom: 22px !important;
        max-width: 100% !important;
    }

    .step-card-foot {
        width: 100%;
    }

    .step-link {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 13px 24px;
    }
}

@media (max-width: 575px) {
    .packaging-solutions-header h2,
    .packaging-solutions-heading h2 {
        font-size: 28px;
    }

    .step-media-mobile {
        height: 190px;
        padding: 12px;
    }

    .step-media-mobile img {
        max-height: 165px;
    }
}

/* ==================================================
   News & Insights Page
   ================================================== */
.news-featured-section {
    position: relative;
    padding: 85px 0 65px;
    background: #ffffff;
}

.news-featured-card {
    background: #ffffff;
    border: none !important;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(6, 59, 115, 0.07), 0 2px 6px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.news-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(6, 59, 115, 0.11);
}

.news-featured-media {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 380px;
    background: #edf3fa;
}

.news-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.news-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.news-badge-gold {
    background: rgba(215, 181, 109, 0.18);
    color: #9c7316;
}

.news-badge-blue {
    background: #edf3fa;
    color: var(--blue);
}

.news-feed-section {
    position: relative;
    padding: 95px 0 110px;
    
    overflow: hidden;
    border: none !important;
}

.news-feed-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 10%, rgba(2, 30, 156, 0.035) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.news-feed-section .container-xxl {
    position: relative;
    z-index: 2;
}

/* Filter Tabs */
.news-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}

.news-filter-btn {
    border: 1.5px solid #dce5f0;
    background: #ffffff;
    color: #475569;
    padding: 9px 20px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.news-filter-btn:hover {
    background: #edf5fd;
    border-color: #93c5fd;
    color: var(--blue);
    transform: translateY(-1px);
}

.news-filter-btn.is-active {
    background: #021E9C !important;
    border-color: #021E9C !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 30, 156, 0.22);
    transform: translateY(-1px);
}

/* News Cards */
.news-card {
    background: #ffffff;
    border: none !important;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(6, 59, 115, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    text-decoration: none;
    color: inherit;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(6, 59, 115, 0.10);
    color: inherit;
}

.news-card-media {
    position: relative;
    overflow: hidden;
    height: 220px;
    background: #edf3fa;
}

.news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.news-card-body {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-card-title {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    color: var(--deep);
    line-height: 1.35;
    margin: 12px 0 10px;
    transition: color 0.2s ease;
}

.news-card:hover .news-card-title {
    color: var(--blue);
}

.news-card-excerpt {
    font-size: 14px;
    color: #5d6878;
    line-height: 1.6;
    margin-bottom: 20px;
    flex: 1;
}

.news-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 12.5px;
    color: #64748b;
}

.news-card-link {
    font-weight: 600;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s ease;
}

.news-card:hover .news-card-link {
    transform: translateX(3px);
}

/* Newsletter Subscription Band */
.news-newsletter-card {
    background: linear-gradient(135deg, #042A54 0%, #063B73 50%, #021E9C 100%);
    border-radius: 24px;
    padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
    color: #ffffff;
    box-shadow: 0 16px 44px rgba(4, 42, 84, 0.18);
    position: relative;
    overflow: hidden;
}

.news-newsletter-card::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 181, 109, 0.12) 0%, transparent 70%);
    pointer-events: none;
}